You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/12/07 20:41:59 UTC
(camel-karavan) 02/02: Topology as primary Project Tab
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 32d1c1d20be9622de42962ed43f95bf34d98e82b
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Dec 7 15:41:45 2023 -0500
Topology as primary Project Tab
---
karavan-designer/src/App.tsx | 4 +-
karavan-designer/src/designer/KaravanDesigner.tsx | 11 ++++-
karavan-designer/src/designer/utils/CamelUi.tsx | 7 +++
karavan-designer/src/topology/TopologyTab.tsx | 11 +++--
karavan-designer/src/topology/TopologyToolbar.tsx | 52 ++++++++++++++++------
karavan-designer/src/topology/topology.css | 15 ++++++-
karavan-space/src/App.tsx | 4 +-
karavan-space/src/designer/KaravanDesigner.tsx | 11 ++++-
karavan-space/src/designer/utils/CamelUi.tsx | 7 +++
karavan-space/src/topology/TopologyTab.tsx | 11 +++--
karavan-space/src/topology/TopologyToolbar.tsx | 52 ++++++++++++++++------
karavan-space/src/topology/topology.css | 15 ++++++-
karavan-vscode/webview/App.tsx | 6 ++-
karavan-vscode/webview/topology/TopologyTab.tsx | 11 +++--
.../webview/topology/TopologyToolbar.tsx | 52 ++++++++++++++++------
karavan-vscode/webview/topology/topology.css | 15 ++++++-
16 files changed, 225 insertions(+), 59 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index d4a2b788..eadcdfbb 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -183,7 +183,9 @@ class App extends React.Component<Props, State> {
<TopologyTab
files={this.getIntegrationFiles()}
onSetFile={fileName => {}}
- onClickCreateButton={() => {}}
+ onClickAddRoute={() => {}}
+ onClickAddREST={() => {}}
+ onClickAddBean={() => {}}
hideToolbar={false}
/>
)
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index eb967d0e..9cbf4f86 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -50,8 +50,8 @@ interface Props {
yaml: string
dark: boolean
hideLogDSL?: boolean
- tab?: string
showCodeTab: boolean
+ tab?: "routes" | "rest" | "beans"
}
export function KaravanDesigner(props: Props) {
@@ -72,7 +72,14 @@ export function KaravanDesigner(props: Props) {
setSelectedStep(undefined);
const i = makeIntegration(props.yaml, props.filename);
setIntegration(i, false);
- setTab(i.kind === 'Kamelet' ? 'kamelet' : 'routes')
+ let designerTab = i.kind === 'Kamelet' ? 'kamelet' : props.tab;
+ if (designerTab === undefined) {
+ const counts = CamelUi.getFlowCounts(i);
+ designerTab = (counts.get('routes') || 0) > 0 ? 'routes' : designerTab;
+ designerTab = (counts.get('rest') || 0) > 0 ? 'rest' : designerTab;
+ designerTab = (counts.get('beans') || 0) > 0 ? 'beans' : designerTab;
+ }
+ setTab(designerTab || 'routes')
reset();
setDark(props.dark);
setHideLogDSL(props.hideLogDSL === true);
diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx b/karavan-designer/src/designer/utils/CamelUi.tsx
index 5caae0a7..318c729a 100644
--- a/karavan-designer/src/designer/utils/CamelUi.tsx
+++ b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -781,6 +781,13 @@ export class CamelUi {
return result;
}
+ static getRests = (integration: Integration): CamelElement[] => {
+ const result: CamelElement[] = [];
+ integration.spec.flows?.filter((e: any) => e.dslName === 'RestDefinition')
+ .forEach((f: any) => result.push(f));
+ return result;
+ }
+
static getRouteConfigurations = (integration: Integration): RouteConfigurationDefinition[] | undefined => {
const result: CamelElement[] = [];
integration.spec.flows?.filter((e: any) => e.dslName === 'RouteConfigurationDefinition')
diff --git a/karavan-designer/src/topology/TopologyTab.tsx b/karavan-designer/src/topology/TopologyTab.tsx
index 520bf8d2..5da3a3c4 100644
--- a/karavan-designer/src/topology/TopologyTab.tsx
+++ b/karavan-designer/src/topology/TopologyTab.tsx
@@ -36,12 +36,13 @@ import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
-
interface Props {
files: IntegrationFile[],
- onClickCreateButton: () => void
onSetFile: (fileName: string) => void
hideToolbar: boolean
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyTab (props: Props) {
@@ -94,7 +95,11 @@ export function TopologyTab (props: Props) {
return (
<TopologyView
className="topology-panel"
- contextToolbar={!props.hideToolbar? <TopologyToolbar onClickCreateButton={props.onClickCreateButton}/> : undefined}
+ contextToolbar={!props.hideToolbar
+ ? <TopologyToolbar onClickAddRoute={props.onClickAddRoute}
+ onClickAddBean={props.onClickAddBean}
+ onClickAddREST={props.onClickAddREST}/>
+ : undefined}
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
controlBar={
<TopologyControlBar
diff --git a/karavan-designer/src/topology/TopologyToolbar.tsx b/karavan-designer/src/topology/TopologyToolbar.tsx
index 2d9fc55c..473bb6f9 100644
--- a/karavan-designer/src/topology/TopologyToolbar.tsx
+++ b/karavan-designer/src/topology/TopologyToolbar.tsx
@@ -17,28 +17,54 @@
import * as React from 'react';
import {
- Button,
+ Button, ToolbarContent,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
interface Props {
- onClickCreateButton: () => void
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyToolbar (props: Props) {
return (
- <ToolbarItem align={{default: "alignRight"}}>
- <Tooltip content={"Add new integration"}>
- <Button size="sm"
- variant={"primary"}
- icon={<PlusIcon/>}
- onClick={e => props.onClickCreateButton()}
- >
- Create
- </Button>
- </Tooltip>
- </ToolbarItem>
+ <ToolbarContent>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Integration Route"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddRoute()}
+ >
+ Route
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add REST API"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddREST()}
+ >
+ REST
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Bean"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddBean()}
+ >
+ Bean
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ </ToolbarContent>
)
}
\ No newline at end of file
diff --git a/karavan-designer/src/topology/topology.css b/karavan-designer/src/topology/topology.css
index bfd345b7..3de49041 100644
--- a/karavan-designer/src/topology/topology.css
+++ b/karavan-designer/src/topology/topology.css
@@ -16,7 +16,20 @@
*/
.karavan .topology-panel .pf-v5-c-toolbar {
- padding-bottom: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ height: fit-content;
+ row-gap: 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+ padding: 0 6px 0 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section {
+ margin: 6px 0 6px 0;
}
.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__group{
diff --git a/karavan-space/src/App.tsx b/karavan-space/src/App.tsx
index 62a9278b..77d1289e 100644
--- a/karavan-space/src/App.tsx
+++ b/karavan-space/src/App.tsx
@@ -174,7 +174,9 @@ class App extends React.Component<Props, State> {
<TopologyTab
files={this.getIntegrationFiles()}
onSetFile={fileName => this.setState({pageId: 'designer'})}
- onClickCreateButton={() => {}}
+ onClickAddRoute={() => {}}
+ onClickAddREST={() => {}}
+ onClickAddBean={() => {}}
hideToolbar={true}
/>
)
diff --git a/karavan-space/src/designer/KaravanDesigner.tsx b/karavan-space/src/designer/KaravanDesigner.tsx
index eb967d0e..9cbf4f86 100644
--- a/karavan-space/src/designer/KaravanDesigner.tsx
+++ b/karavan-space/src/designer/KaravanDesigner.tsx
@@ -50,8 +50,8 @@ interface Props {
yaml: string
dark: boolean
hideLogDSL?: boolean
- tab?: string
showCodeTab: boolean
+ tab?: "routes" | "rest" | "beans"
}
export function KaravanDesigner(props: Props) {
@@ -72,7 +72,14 @@ export function KaravanDesigner(props: Props) {
setSelectedStep(undefined);
const i = makeIntegration(props.yaml, props.filename);
setIntegration(i, false);
- setTab(i.kind === 'Kamelet' ? 'kamelet' : 'routes')
+ let designerTab = i.kind === 'Kamelet' ? 'kamelet' : props.tab;
+ if (designerTab === undefined) {
+ const counts = CamelUi.getFlowCounts(i);
+ designerTab = (counts.get('routes') || 0) > 0 ? 'routes' : designerTab;
+ designerTab = (counts.get('rest') || 0) > 0 ? 'rest' : designerTab;
+ designerTab = (counts.get('beans') || 0) > 0 ? 'beans' : designerTab;
+ }
+ setTab(designerTab || 'routes')
reset();
setDark(props.dark);
setHideLogDSL(props.hideLogDSL === true);
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx
index 5caae0a7..318c729a 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -781,6 +781,13 @@ export class CamelUi {
return result;
}
+ static getRests = (integration: Integration): CamelElement[] => {
+ const result: CamelElement[] = [];
+ integration.spec.flows?.filter((e: any) => e.dslName === 'RestDefinition')
+ .forEach((f: any) => result.push(f));
+ return result;
+ }
+
static getRouteConfigurations = (integration: Integration): RouteConfigurationDefinition[] | undefined => {
const result: CamelElement[] = [];
integration.spec.flows?.filter((e: any) => e.dslName === 'RouteConfigurationDefinition')
diff --git a/karavan-space/src/topology/TopologyTab.tsx b/karavan-space/src/topology/TopologyTab.tsx
index 520bf8d2..5da3a3c4 100644
--- a/karavan-space/src/topology/TopologyTab.tsx
+++ b/karavan-space/src/topology/TopologyTab.tsx
@@ -36,12 +36,13 @@ import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
-
interface Props {
files: IntegrationFile[],
- onClickCreateButton: () => void
onSetFile: (fileName: string) => void
hideToolbar: boolean
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyTab (props: Props) {
@@ -94,7 +95,11 @@ export function TopologyTab (props: Props) {
return (
<TopologyView
className="topology-panel"
- contextToolbar={!props.hideToolbar? <TopologyToolbar onClickCreateButton={props.onClickCreateButton}/> : undefined}
+ contextToolbar={!props.hideToolbar
+ ? <TopologyToolbar onClickAddRoute={props.onClickAddRoute}
+ onClickAddBean={props.onClickAddBean}
+ onClickAddREST={props.onClickAddREST}/>
+ : undefined}
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
controlBar={
<TopologyControlBar
diff --git a/karavan-space/src/topology/TopologyToolbar.tsx b/karavan-space/src/topology/TopologyToolbar.tsx
index 2d9fc55c..473bb6f9 100644
--- a/karavan-space/src/topology/TopologyToolbar.tsx
+++ b/karavan-space/src/topology/TopologyToolbar.tsx
@@ -17,28 +17,54 @@
import * as React from 'react';
import {
- Button,
+ Button, ToolbarContent,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
interface Props {
- onClickCreateButton: () => void
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyToolbar (props: Props) {
return (
- <ToolbarItem align={{default: "alignRight"}}>
- <Tooltip content={"Add new integration"}>
- <Button size="sm"
- variant={"primary"}
- icon={<PlusIcon/>}
- onClick={e => props.onClickCreateButton()}
- >
- Create
- </Button>
- </Tooltip>
- </ToolbarItem>
+ <ToolbarContent>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Integration Route"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddRoute()}
+ >
+ Route
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add REST API"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddREST()}
+ >
+ REST
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Bean"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddBean()}
+ >
+ Bean
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ </ToolbarContent>
)
}
\ No newline at end of file
diff --git a/karavan-space/src/topology/topology.css b/karavan-space/src/topology/topology.css
index bfd345b7..3de49041 100644
--- a/karavan-space/src/topology/topology.css
+++ b/karavan-space/src/topology/topology.css
@@ -16,7 +16,20 @@
*/
.karavan .topology-panel .pf-v5-c-toolbar {
- padding-bottom: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ height: fit-content;
+ row-gap: 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+ padding: 0 6px 0 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section {
+ margin: 6px 0 6px 0;
}
.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__group{
diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
index 0b28d69c..c8742e52 100644
--- a/karavan-vscode/webview/App.tsx
+++ b/karavan-vscode/webview/App.tsx
@@ -45,7 +45,7 @@ interface State {
hasChanges: boolean
page: "designer" | "knowledgebase" | 'topology'
active: boolean
- tab?: string
+ tab?: "routes" | "rest" | "beans"
files: IntegrationFile[]
}
@@ -226,7 +226,9 @@ class App extends React.Component<Props, State> {
<TopologyTab
hideToolbar={true}
files={this.state.files}
- onClickCreateButton={() => vscode.postMessage({ command: 'createIntegration' })}
+ onClickAddRoute={() => vscode.postMessage({ command: 'createIntegration' })}
+ onClickAddREST={() => vscode.postMessage({ command: 'createIntegration' })}
+ onClickAddBean={() => vscode.postMessage({ command: 'createIntegration' })}
onSetFile={(fileName) => vscode.postMessage({ command: 'openFile', fileName: fileName })}
/>
}
diff --git a/karavan-vscode/webview/topology/TopologyTab.tsx b/karavan-vscode/webview/topology/TopologyTab.tsx
index 520bf8d2..5da3a3c4 100644
--- a/karavan-vscode/webview/topology/TopologyTab.tsx
+++ b/karavan-vscode/webview/topology/TopologyTab.tsx
@@ -36,12 +36,13 @@ import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
-
interface Props {
files: IntegrationFile[],
- onClickCreateButton: () => void
onSetFile: (fileName: string) => void
hideToolbar: boolean
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyTab (props: Props) {
@@ -94,7 +95,11 @@ export function TopologyTab (props: Props) {
return (
<TopologyView
className="topology-panel"
- contextToolbar={!props.hideToolbar? <TopologyToolbar onClickCreateButton={props.onClickCreateButton}/> : undefined}
+ contextToolbar={!props.hideToolbar
+ ? <TopologyToolbar onClickAddRoute={props.onClickAddRoute}
+ onClickAddBean={props.onClickAddBean}
+ onClickAddREST={props.onClickAddREST}/>
+ : undefined}
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
controlBar={
<TopologyControlBar
diff --git a/karavan-vscode/webview/topology/TopologyToolbar.tsx b/karavan-vscode/webview/topology/TopologyToolbar.tsx
index 2d9fc55c..473bb6f9 100644
--- a/karavan-vscode/webview/topology/TopologyToolbar.tsx
+++ b/karavan-vscode/webview/topology/TopologyToolbar.tsx
@@ -17,28 +17,54 @@
import * as React from 'react';
import {
- Button,
+ Button, ToolbarContent,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
interface Props {
- onClickCreateButton: () => void
+ onClickAddRoute: () => void
+ onClickAddREST: () => void
+ onClickAddBean: () => void
}
export function TopologyToolbar (props: Props) {
return (
- <ToolbarItem align={{default: "alignRight"}}>
- <Tooltip content={"Add new integration"}>
- <Button size="sm"
- variant={"primary"}
- icon={<PlusIcon/>}
- onClick={e => props.onClickCreateButton()}
- >
- Create
- </Button>
- </Tooltip>
- </ToolbarItem>
+ <ToolbarContent>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Integration Route"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddRoute()}
+ >
+ Route
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add REST API"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddREST()}
+ >
+ REST
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ <ToolbarItem align={{default:"alignRight"}}>
+ <Tooltip content={"Add Bean"} position={"bottom"}>
+ <Button size="sm"
+ variant={"primary"}
+ icon={<PlusIcon/>}
+ onClick={e => props.onClickAddBean()}
+ >
+ Bean
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
+ </ToolbarContent>
)
}
\ No newline at end of file
diff --git a/karavan-vscode/webview/topology/topology.css b/karavan-vscode/webview/topology/topology.css
index bfd345b7..3de49041 100644
--- a/karavan-vscode/webview/topology/topology.css
+++ b/karavan-vscode/webview/topology/topology.css
@@ -16,7 +16,20 @@
*/
.karavan .topology-panel .pf-v5-c-toolbar {
- padding-bottom: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ height: fit-content;
+ row-gap: 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+ padding: 0 6px 0 0;
+}
+
+.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section {
+ margin: 6px 0 6px 0;
}
.karavan .topology-panel .pf-v5-c-toolbar .pf-v5-c-toolbar__group{