Merge pull request #233 from code0-tech/feat/#195

Display all available modules on runtime column and within settings

Author: nicosammito

src/app/(flow)/layout.tsx

@@ -78,7 +78,7 @@ export default function FlowLayout({bar, tab, children}: {
         functions[1].values({namespaceId, projectId, runtimeId})
         datatype[1].values({namespaceId, projectId, runtimeId})
         flowtype[1].values({namespaceId, projectId, runtimeId})
-        module[1].values({namespaceId, projectId})
+        module[1].values({namespaceId, projectId, runtimeId})
     }, [runtimeId, namespaceId, projectId, currentSession, flow, functions, datatype, flowtype])
 
     return <ContextStoreProvider

src/packages/ce/src/module/pages/ModuleConfigurationPage.tsx

@@ -65,14 +65,6 @@ export const ModuleConfigurationPage: React.FC = () => {
     const projectId: NamespaceProject['id'] = `gid://sagittarius/NamespaceProject/${projectIndex}`
     const moduleId: RuntimeModule['id'] = `gid://sagittarius/RuntimeModule/${moduleIndex}`
 
-    const module = React.useMemo(
-        () => moduleService.getById(moduleId, {
-            namespaceId,
-            projectId
-        }),
-        [moduleId, moduleStore, namespaceId, projectId]
-    )
-
     const project = React.useMemo(
         () => projectService.getById(projectId),
         [projectStore, projectId]
@@ -85,7 +77,16 @@ export const ModuleConfigurationPage: React.FC = () => {
 
     const runtime = React.useMemo(
         () => runtimes.find((runtime) => runtime.modules?.nodes?.find(module => module?.id === moduleId)),
-        [runtimes, module]
+        [runtimes]
+    )
+
+    const module = React.useMemo(
+        () => moduleService.getById(moduleId, {
+            namespaceId,
+            projectId,
+            runtimeId: runtime?.id
+        }),
+        [moduleId, moduleStore, namespaceId, projectId, runtime]
     )
 
     const moduleConfigurationSchemas = module?.configurationDefinitions?.nodes?.map(moduleConfiguration => {

src/packages/ce/src/module/pages/ModulesPage.tsx

@@ -45,8 +45,9 @@ export const ModulesPage: React.FC = () => {
     const modules = React.useMemo(
         () => moduleService.values({
             namespaceId,
-            projectId
-        }).filter(module => module.runtime?.id === project?.primaryRuntime?.id),
+            projectId,
+            runtimeId: project?.primaryRuntime?.id
+        }),
         [params, namespaceId, projectId, moduleStore, project]
     )
 

src/packages/ce/src/module/services/Module.service.ts

@@ -1,12 +1,13 @@
 import {ReactiveArrayService, ReactiveArrayStore} from "@code0-tech/pictor";
-import {Namespace, NamespaceProject, Query, RuntimeModule} from "@code0-tech/sagittarius-graphql-types";
+import {Namespace, NamespaceProject, Query, Runtime, RuntimeModule} from "@code0-tech/sagittarius-graphql-types";
 import {GraphqlClient} from "@core/util/graphql-client";
 import {View} from "@code0-tech/pictor/dist/utils/view";
 import modulesQuery from "@edition/module/services/queries/Modules.query.graphql"
 
 export type ModuleDependencies = {
     namespaceId: Namespace['id']
     projectId: NamespaceProject['id']
+    runtimeId: Runtime['id']
 }
 
 export class ModuleService extends ReactiveArrayService<RuntimeModule, ModuleDependencies> {
@@ -23,31 +24,35 @@ export class ModuleService extends ReactiveArrayService<RuntimeModule, ModuleDep
         const modules = super.values()
         if (!dependencies?.namespaceId || !dependencies.projectId) return modules
 
-        this.client.query<Query>({
-            query: modulesQuery,
-            variables: {
-                namespaceId: dependencies?.namespaceId,
-                projectId: dependencies.projectId,
-
-                firstRuntime: 50,
-                afterRuntime: null,
-
-                firstModule: 50,
-                afterModule: null,
-
-                firstConfiguration: 50,
-                afterConfiguration: null
-            }
-        }).then(res => {
-            const nodes = res.data?.namespace?.project?.runtimes?.nodes?.flatMap(runtime => runtime?.modules?.nodes ?? []) ?? []
-            nodes.forEach(module => {
-                if (module && !this.hasById(module.id)) {
-                    this.set(this.i++, new View(module))
+        const filtered = modules.filter(m => m.runtime?.id === dependencies.runtimeId)
+
+        if (filtered.length <= 0) {
+            this.client.query<Query>({
+                query: modulesQuery,
+                variables: {
+                    namespaceId: dependencies?.namespaceId,
+                    projectId: dependencies.projectId,
+
+                    firstRuntime: 50,
+                    afterRuntime: null,
+
+                    firstModule: 50,
+                    afterModule: null,
+
+                    firstConfiguration: 50,
+                    afterConfiguration: null
                 }
+            }).then(res => {
+                const nodes = res.data?.namespace?.project?.runtimes?.nodes?.flatMap(runtime => runtime?.modules?.nodes ?? []) ?? []
+                nodes.forEach(module => {
+                    if (module && !this.hasById(module.id)) {
+                        this.set(this.i++, new View(module))
+                    }
+                })
             })
-        })
+        }
 
-        return modules
+        return filtered
     }
 
     hasById(id: RuntimeModule["id"]): boolean {

src/packages/ce/src/runtime/components/RuntimeProjectDataTableRowComponent.tsx

@@ -11,7 +11,7 @@ import {
     MenuContent,
     MenuItem,
     MenuPortal,
-    MenuTrigger,
+    MenuTrigger, Spacing,
     Text,
     useService,
     useStore
@@ -20,6 +20,7 @@ import {RuntimeService} from "@edition/runtime/services/Runtime.service";
 import {formatDistanceToNow} from "date-fns";
 import {IconDotsVertical, IconServerSpark, IconX} from "@tabler/icons-react";
 import {ProjectService} from "@edition/project/services/Project.service";
+import {ModuleService} from "@edition/module/services/Module.service";
 
 export interface RuntimeProjectDataTableRowComponentProps {
     projectId: NamespaceProject['id']
@@ -34,6 +35,8 @@ export const RuntimeProjectDataTableRowComponent: React.FC<RuntimeProjectDataTab
     const projectStore = useStore(ProjectService)
     const runtimeService = useService(RuntimeService)
     const runtimeStore = useStore(RuntimeService)
+    const moduleService = useService(ModuleService)
+    const moduleStore = useStore(ModuleService)
 
     const runtime = React.useMemo(
         () => runtimeService.getById(runtimeId),
@@ -45,6 +48,11 @@ export const RuntimeProjectDataTableRowComponent: React.FC<RuntimeProjectDataTab
         [projectStore, projectId]
     )
 
+    const modules = React.useMemo(
+        () =>moduleService.values({namespaceId: project?.namespace?.id, projectId: projectId, runtimeId: runtimeId}),
+        [moduleStore, runtime]
+    )
+
     const makePrimary = React.useCallback(() => {
         startTransition(() => {
             projectService.projectUpdate({
@@ -91,6 +99,27 @@ export const RuntimeProjectDataTableRowComponent: React.FC<RuntimeProjectDataTab
             </Flex>
         </DataTableColumn>
         <DataTableColumn>
+            <Text>
+                Installed plugins
+            </Text>
+            <Spacing spacing={"xxs"}/>
+            <Flex align={"center"} style={{gap: "0.35rem"}}>
+                {
+                    modules.map(m => m.names?.[0].content).map((name, index) => {
+                        return index <= 5 ? <Badge color={"secondary"}>
+                            {name}
+                        </Badge> : index == 6 ? <Text>...</Text> : null
+                    })
+
+                }
+            </Flex>
+
+        </DataTableColumn>
+        <DataTableColumn>
+            <Text>
+                Status
+            </Text>
+            <Spacing spacing={"xxs"}/>
             <Badge color={runtime?.status === "CONNECTED" ? "success" : "error"} border>
                 <Text style={{color: "inherit"}}>{runtime?.status}</Text>
             </Badge>