diff --git a/src/app/(flow)/layout.tsx b/src/app/(flow)/layout.tsx index 1a364674..62352cbf 100644 --- a/src/app/(flow)/layout.tsx +++ b/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 { 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 => { diff --git a/src/packages/ce/src/module/pages/ModulesPage.tsx b/src/packages/ce/src/module/pages/ModulesPage.tsx index 94806fb7..36f70b31 100644 --- a/src/packages/ce/src/module/pages/ModulesPage.tsx +++ b/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] ) diff --git a/src/packages/ce/src/module/services/Module.service.ts b/src/packages/ce/src/module/services/Module.service.ts index 9dce7deb..4283f331 100644 --- a/src/packages/ce/src/module/services/Module.service.ts +++ b/src/packages/ce/src/module/services/Module.service.ts @@ -1,5 +1,5 @@ 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" @@ -7,6 +7,7 @@ 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 { @@ -23,31 +24,35 @@ export class ModuleService extends ReactiveArrayService({ - 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: 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 { diff --git a/src/packages/ce/src/runtime/components/RuntimeProjectDataTableRowComponent.tsx b/src/packages/ce/src/runtime/components/RuntimeProjectDataTableRowComponent.tsx index 03960923..b7bd7825 100644 --- a/src/packages/ce/src/runtime/components/RuntimeProjectDataTableRowComponent.tsx +++ b/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 runtimeService.getById(runtimeId), @@ -45,6 +48,11 @@ export const RuntimeProjectDataTableRowComponent: React.FCmoduleService.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 + + Installed plugins + + + + { + modules.map(m => m.names?.[0].content).map((name, index) => { + return index <= 5 ? + {name} + : index == 6 ? ... : null + }) + + } + + + + + + Status + + {runtime?.status}