Merge pull request #20 from baaalint/feat/tables

Feat/tables

ui/src/App.tsx

@@ -19,10 +19,13 @@ import { ChatHistoriesTablePage } from 'pages/ChatHistoriesPage'
 import { ChatPage } from 'pages/ChatPage'
 import { DataSourceTablePage } from 'pages/DataSourcesTablePage'
 import { DatasetsTablePage } from 'pages/DatasetsTablePage'
+import { DocumentsTablePage } from 'pages/DocumentsTablePage'
 import { LoginPage } from 'pages/LoginPage'
 import { ModelsTablePage } from 'pages/ModelsTablePage'
 import { ProjectsTablePage } from 'pages/ProjectsTablePage'
+import { PromptTemplatesTablePage } from 'pages/PromptTemplatesTablePage'
 import { UsersTablePage } from 'pages/UsersTablePage'
+import { WorkflowsTablePage } from 'pages/WorkflowsTablePage'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 
 function App() {
@@ -41,6 +44,9 @@ function App() {
     { path: '/admin/data-sources', element: <DataSourceTablePage /> },
     { path: '/admin/datasets', element: <DatasetsTablePage /> },
     { path: '/admin/models', element: <ModelsTablePage /> },
+    { path: '/admin/documents', element: <DocumentsTablePage /> },
+    { path: '/admin/prompt-templates', element: <PromptTemplatesTablePage /> },
+    { path: '/admin/workflows', element: <WorkflowsTablePage /> },
     {
       path: '/admin/histories',
       element: <ChatHistoriesTablePage />

ui/src/atoms/documents.ts

@@ -0,0 +1,47 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Client from '@services/Api';
+import { Document } from '@shared/types/document';
+import { atom } from 'jotai';
+
+export const documentsAtom = atom<Document[]>([]);
+
+export const documentsLoadingAtom = atom<boolean>(false);
+
+export const documentsErrorAtom = atom<string | null>(null);
+
+
+export const documentsWithFetchAtom = atom(
+  (get) => get(documentsAtom),
+  async (_get, set, username) => {
+    set(documentsLoadingAtom, true);
+    set(documentsErrorAtom, null);
+    try {
+      const documents = await Client.getDocuments(username as string);
+      const sortedDocuments = documents.data.sort((a: Document, b: Document) => {
+        const dateA = new Date(a.created as string);
+        const dateB = new Date(b.created as string);
+        return dateA.getTime() - dateB.getTime();
+      });
+      set(documentsAtom, sortedDocuments);
+    } catch (error) {
+      set(documentsErrorAtom, 'Failed to fetch documents');
+    } finally {
+      set(documentsLoadingAtom, false);
+    }
+  }
+);
+
+export const selectedDocumentAtom = atom<Document>({ name: '', description: '', labels: {}, owner_id: '', project_id: '', path: '' });

ui/src/atoms/promptTemplates.ts

@@ -0,0 +1,47 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Client from '@services/Api';
+import { PromptTemplate } from '@shared/types/promptTemplate';
+import { atom } from 'jotai';
+
+export const promptTemplatesAtom = atom<PromptTemplate[]>([]);
+
+export const promptTemplatesLoadingAtom = atom<boolean>(false);
+
+export const promptTemplatesErrorAtom = atom<string | null>(null);
+
+
+export const promptTemplatesWithFetchAtom = atom(
+  (get) => get(promptTemplatesAtom),
+  async (_get, set, username) => {
+    set(promptTemplatesLoadingAtom, true);
+    set(promptTemplatesErrorAtom, null);
+    try {
+      const promptTemplates = await Client.getPromptTemplates(username as string);
+      const sortedPromptTemplates = promptTemplates.data.sort((a: PromptTemplate, b: PromptTemplate) => {
+        const dateA = new Date(a.created as string);
+        const dateB = new Date(b.created as string);
+        return dateA.getTime() - dateB.getTime();
+      });
+      set(promptTemplatesAtom, sortedPromptTemplates);
+    } catch (error) {
+      set(promptTemplatesErrorAtom, 'Failed to fetch promptTemplates');
+    } finally {
+      set(promptTemplatesLoadingAtom, false);
+    }
+  }
+);
+
+export const selectedPromptTemplateAtom = atom<PromptTemplate>({ name: '', description: '', labels: {}, owner_id: '', project_id: '', text: '', arguments: [] });

ui/src/atoms/workflows.ts

@@ -0,0 +1,47 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import Client from '@services/Api';
+import { Workflow, WorkflowType } from '@shared/types/workflow';
+import { atom } from 'jotai';
+
+export const workflowsAtom = atom<Workflow[]>([]);
+
+export const workflowsLoadingAtom = atom<boolean>(false);
+
+export const workflowsErrorAtom = atom<string | null>(null);
+
+
+export const workflowsWithFetchAtom = atom(
+  (get) => get(workflowsAtom),
+  async (_get, set, username) => {
+    set(workflowsLoadingAtom, true);
+    set(workflowsErrorAtom, null);
+    try {
+      const workflows = await Client.getWorkflows(username as string);
+      const sortedWorkflows = workflows.data.sort((a: Workflow, b: Workflow) => {
+        const dateA = new Date(a.created as string);
+        const dateB = new Date(b.created as string);
+        return dateA.getTime() - dateB.getTime();
+      });
+      set(workflowsAtom, sortedWorkflows);
+    } catch (error) {
+      set(workflowsErrorAtom, 'Failed to fetch workflows');
+    } finally {
+      set(workflowsLoadingAtom, false);
+    }
+  }
+);
+
+export const selectedWorkflowAtom = atom<Workflow>({ name: '', description: '', labels: {}, owner_id: '', project_id: '', workflow_type: WorkflowType.APPLICATION, deployment: '' });

ui/src/components/feature/AddEditDocumentModal.tsx

@@ -0,0 +1,102 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { publicUserAtom } from '@atoms/index'
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay
+} from '@chakra-ui/react'
+import { Document } from '@shared/types/document'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+type DocumentModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (document: Document) => void
+  document?: Document
+}
+
+const AddEditDocumentModal: React.FC<DocumentModalProps> = ({ isOpen, onClose, onSave, document }) => {
+  const [publicUser] = useAtom(publicUserAtom)
+  const [formData, setFormData] = useState<Document>(
+    document || {
+      name: '',
+      description: '',
+      owner_id: publicUser.uid as string,
+      project_id: '',
+      path: ''
+    }
+  )
+  useEffect(() => {
+    if (document) {
+      setFormData(document)
+    }
+  }, [document])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const handleSubmit = () => {
+    onSave(formData)
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {document?.uid ? 'Edit' : 'Add New'} {' Document'}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl id="name" mb={4}>
+            <FormLabel>Document Name</FormLabel>
+            <Input type="text" name="name" value={formData.name || ''} onChange={handleChange} />
+          </FormControl>
+          <FormControl id="description" mb={4}>
+            <FormLabel>Description</FormLabel>
+            <Input type="text" name="description" value={formData.description || ''} onChange={handleChange} />
+          </FormControl>
+          <FormControl id="path" mb={4}>
+            <FormLabel>Path</FormLabel>
+            <Input type="text" name="path" value={formData.path || ''} onChange={handleChange} />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button isDisabled={!formData.description || !formData.name} colorScheme="blue" mr={3} onClick={handleSubmit}>
+            {document ? 'Save Changes' : 'Add Document'}
+          </Button>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AddEditDocumentModal

ui/src/components/feature/AddEditPromptTemplateModal.tsx

@@ -0,0 +1,108 @@
+// Copyright 2024 Iguazio
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { publicUserAtom } from '@atoms/index'
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay
+} from '@chakra-ui/react'
+import { PromptTemplate } from '@shared/types/promptTemplate'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+type PromptTemplateModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (promptTemplate: PromptTemplate) => void
+  promptTemplate?: PromptTemplate
+}
+
+const AddEditPromptTemplateModal: React.FC<PromptTemplateModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  promptTemplate
+}) => {
+  const [publicUser] = useAtom(publicUserAtom)
+  const [formData, setFormData] = useState<PromptTemplate>(
+    promptTemplate || {
+      name: '',
+      description: '',
+      owner_id: publicUser.uid as string,
+      project_id: '',
+      text: '',
+      arguments: ['prompt']
+    }
+  )
+  useEffect(() => {
+    if (promptTemplate) {
+      setFormData(promptTemplate)
+    }
+  }, [promptTemplate])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData({ ...formData, [name]: value })
+  }
+
+  const handleSubmit = () => {
+    onSave(formData)
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {promptTemplate?.uid ? 'Edit' : 'Add New'} {' PromptTemplate'}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl id="name" mb={4}>
+            <FormLabel>PromptTemplate Name</FormLabel>
+            <Input type="text" name="name" value={formData.name || ''} onChange={handleChange} />
+          </FormControl>
+          <FormControl id="description" mb={4}>
+            <FormLabel>Description</FormLabel>
+            <Input type="text" name="description" value={formData.description || ''} onChange={handleChange} />
+          </FormControl>
+          <FormControl id="text" mb={4}>
+            <FormLabel>Text</FormLabel>
+            <Input type="text" name="text" value={formData.text || ''} onChange={handleChange} />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button isDisabled={!formData.description || !formData.name} colorScheme="blue" mr={3} onClick={handleSubmit}>
+            {promptTemplate ? 'Save Changes' : 'Add PromptTemplate'}
+          </Button>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AddEditPromptTemplateModal