Topology

Author: mgubaidullin

karavan-vscode/package.json

@@ -724,9 +724,9 @@
     "copy-karavan": "npm run copy-core && npm run replace-import",
     "vscode:prepublish": "npm run copy-karavan && npm run package",
     "compile": "npm run copy-karavan && cross-env NODE_ENV=development node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js --progress --stats-error-details",
-    "watch": "npm run copy-karavan && cross-env NODE_ENV=development webpack --progress --watch",
-    "package": "npm run copy-karavan  && cross-env NODE_ENV=production webpack --progress",
-    "webpack": "cross-env NODE_ENV=development webpack --progress",
+    "watch": "npm run copy-karavan && cross-env NODE_ENV=development node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js --progress --watch",
+    "package": "npm run copy-karavan  && cross-env NODE_ENV=production node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js --progress",
+    "webpack": "cross-env NODE_ENV=development node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js --progress",
     "test-compile": "tsc -p ./",
     "test-watch": "tsc -watch -p ./",
     "pretest": "npm run copy-karavan && npm run test-compile && npm run lint",

karavan-vscode/webpack.config.js

@@ -62,6 +62,10 @@ const baseConfig = (webpackEnv) => {
                             test: /\.tsx?$/,
                             exclude: /node_modules\/(?!@patternfly\/react-topology).*/,
                             loader: require.resolve("ts-loader"),
+                            options: {
+                                allowTsInNodeModules: true,
+                                transpileOnly: true, 
+                            },
                         },
                         {
                             test: /\.css$/,

karavan-vscode/webview/App.tsx

@@ -16,6 +16,7 @@
  */
 import * as React from "react";
 import {
+  Bullseye,
   Content,
   Page, PageSection, Spinner
 } from "@patternfly/react-core";
@@ -207,7 +208,6 @@ class App extends React.Component<Props, State> {
   saveIntegrationFiles(files: any) {
     const f = Object.keys(files).map(key => new IntegrationFile(key, files[key]));
     this.setState({ files: f });
-
   }
 
   onchangeBlockedList(type: string, name: string, checked: boolean) {
@@ -226,9 +226,11 @@ class App extends React.Component<Props, State> {
       <div className="karavan">
         {!loaded &&
           <PageSection className="loading-page">
-            <Spinner className="progress-stepper" diameter="80px" aria-label="Loading..." />
-            {/* {loadingMessages.map(message => <Text component={TextVariants.h5}>{message}</Text>)} */}
-            <Content component={'h5'}>Loading...</Content>
+            <Bullseye>
+              <Spinner className="progress-stepper" diameter="80px" aria-label="Loading..." />
+              {/* {loadingMessages.map(message => <Text component={TextVariants.h5}>{message}</Text>)} */}
+              <Content component={'h5'}>Loading...</Content>
+            </Bullseye>
           </PageSection>
         }
         {loaded && page === "designer" &&
@@ -263,7 +265,7 @@ class App extends React.Component<Props, State> {
           <TopologyTab openApiJson={undefined}
             asyncApiJson={undefined}
             hideToolbar={true}
-            files={[]}
+            files={this.state.files}
           />
         }
       </div>

karavan-vscode/webview/index.css

@@ -18,7 +18,8 @@
 html,
 body,
 #root,
-.App {
+.App,
+.karavan {
   height: 100%;
   overflow: hidden;
 }

karavan-vscode/webview/integration-topology/GetCustomMenu.tsx

@@ -28,33 +28,7 @@ export function getCustomMenu(element: GraphElement, groupNames: string[]) {
         </ContextMenuItem>
     );
     if (data?.type === 'route') {
-        result.push(
-            <ContextMenuItem key={element.getId()}
-                             onClick={() => data?.setDisabled?.(data?.fileName, data?.routeId, !(data?.autoStartup))}>
-                {data?.autoStartup === false ? 'Enable' : 'Disable'}
-            </ContextMenuItem>
-        );
-        result.push(
-            <ContextMenuItem key={element.getId() + '-delete'} onClick={() => {
-                data?.deleteRoute?.(data?.fileName, data?.step.id);
-            }}>
-                {'Delete'}
-            </ContextMenuItem>
-        );
-        if (groupNames.length > 0) {
-            result.push(
-                <ContextSubMenuItem label='Groups' key={element.getId() + '-groups'} children={
-                    groupNames.filter(g => !g.startsWith("karavan-")).map(groupName => {
-                        return (
-                            <ContextMenuItem key={`${element.getId()}-groups-${groupName}`} isSelected={data.routeGroup === groupName} onClick={() => data?.setRouteGroup?.(data?.fileName, data?.routeId, groupName)}
-                            >
-                                {groupName}
-                            </ContextMenuItem>
-                        )
-                    })
-                }/>
-            )
-        }
+        
     } else if (data?.type === 'step' && data?.outgoing) {
         result.push(
             <ContextMenuItem key={element.getId() + '-step'}

karavan-vscode/webview/integration-topology/TopologyTab.tsx

@@ -45,7 +45,6 @@ import {TopologyLegend} from "./TopologyLegend";
 import {ModalConfirmation, ModalConfirmationProps} from "@/components/ModalConfirmation";
 import {EyeIcon, EyeSlashIcon} from '@patternfly/react-icons';
 import {ArrowDown, GroupObjects, JumpLink, UngroupObjects} from '@carbon/icons-react';
-import {useFilesStore} from "@/api/ProjectStore";
 import {NODE_POSITIONED_EVENT} from "@patternfly/react-topology/src/types";
 import {TopologyDagreLayout} from "@/integration-topology/graph/TopologyDagreLayout";
 import {ASYNCAPI_FILE_NAME_JSON, OPENAPI_FILE_NAME_JSON} from "@/core/contants";
@@ -59,13 +58,12 @@ interface Props {
 
 export function TopologyTab(props: Props) {
 
-    // const { files, hideToolbar, openApiJson, asyncApiJson } = props;
+    const { files, hideToolbar } = props;
     const [modelMap, setModelMap, setFileName, layout, showGroups, setShowGroups,
         showBeans, setShowBeans, showLegend, setShowLegend, straightEdges, setStraightEdges] = useTopologyStore((s) =>
         [s.modelMap, s.setModelMap, s.setFileName, s.layout, s.showGroups, s.setShowGroups,
             s.showBeans, s.setShowBeans, s.showLegend, s.setShowLegend, s.straightEdges, s.setStraightEdges]);
     const [setSelectedStep] = useDesignerStore((s) => [s.setSelectedStep], shallow)
-    const [files] = useFilesStore((s) => [s.files], shallow);
     const [confirmationProps, setConfirmationProps] = useState<ModalConfirmationProps>();
     const {selectFile, setDisabled, deleteRoute, setRouteGroup} = useTopologyHook(setConfirmationProps);
 

karavan-vscode/webview/integration-topology/useTopologyHook.tsx

@@ -22,6 +22,7 @@ import {CamelDefinitionYaml} from "@/core/api/CamelDefinitionYaml";
 import {CamelDefinitionApiExt} from "@/core/api/CamelDefinitionApiExt";
 import {RouteDefinition} from "@/core/model/CamelDefinition";
 import {ModalConfirmationProps} from "@/components/ModalConfirmation";
+import vscode from "../vscode";
 
 export function useTopologyHook(setConfirmationProps?: React.Dispatch<React.SetStateAction<ModalConfirmationProps | undefined>>) {
 
@@ -30,11 +31,8 @@ export function useTopologyHook(setConfirmationProps?: React.Dispatch<React.SetS
     const [setTabIndex] = useProjectStore((s) => [s.setTabIndex], shallow);
 
     function selectFile(fileName: string) {
-        const file = files.filter(f => f.name === fileName)?.at(0);
-        if (file) {
-            setFile('select', file);
-            setTabIndex(0);
-        }
+        console.log(fileName)
+        vscode.postMessage({ command: 'openFile', fileName: fileName })
     }
 
     function setDisabled(fileName: string, elementId: string, enable: boolean) {