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
The following commit(s) were added to refs/heads/main by this push:
new e0f1efc2 UI improvements for #1309
e0f1efc2 is described below
commit e0f1efc2bbf915b633630789f8b38f950e144ad1
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Jun 4 07:56:59 2024 -0400
UI improvements for #1309
---
.../src/main/webui/src/topology/TopologyApi.tsx | 6 +-
.../src/main/webui/src/topology/TopologyStore.ts | 3 +-
.../main/webui/src/topology/TopologyToolbar.tsx | 2 +-
.../src/main/webui/src/topology/topology.css | 10 ++
karavan-designer/public/example/demo.camel.yaml | 154 ---------------------
karavan-designer/src/topology/TopologyApi.tsx | 6 +-
karavan-designer/src/topology/TopologyStore.ts | 3 +-
karavan-designer/src/topology/TopologyToolbar.tsx | 2 +-
karavan-designer/src/topology/topology.css | 10 ++
karavan-space/src/topology/TopologyApi.tsx | 6 +-
karavan-space/src/topology/TopologyStore.ts | 3 +-
karavan-space/src/topology/TopologyToolbar.tsx | 2 +-
karavan-space/src/topology/topology.css | 10 ++
13 files changed, 45 insertions(+), 172 deletions(-)
diff --git a/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
b/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
index 383c2159..ffe14098 100644
--- a/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
+++ b/karavan-app/src/main/webui/src/topology/TopologyApi.tsx
@@ -273,8 +273,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Consumer group',
style: {
- padding: 10,
- strokeWidth: "2px",
+ padding: 25,
}
})
@@ -286,8 +285,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Producer group',
style: {
- padding: 10,
- strokeWidth: "2px"
+ padding: 25,
}
})
diff --git a/karavan-app/src/main/webui/src/topology/TopologyStore.ts
b/karavan-app/src/main/webui/src/topology/TopologyStore.ts
index 514f1b37..63b7ed4f 100644
--- a/karavan-app/src/main/webui/src/topology/TopologyStore.ts
+++ b/karavan-app/src/main/webui/src/topology/TopologyStore.ts
@@ -28,7 +28,7 @@ interface TopologyState {
setRanker: (ranker: string) => void
nodeData: any
setNodeData: (nodeData: any) => void
- showGroups?: boolean
+ showGroups: boolean
setShowGroups: (showGroups: boolean) => void
}
@@ -56,6 +56,7 @@ export const useTopologyStore =
createWithEqualityFn<TopologyState>((set) => ({
return {nodeData: nodeData};
});
},
+ showGroups: false,
setShowGroups: (showGroups: boolean) => {
set((state: TopologyState) => {
return {showGroups: showGroups};
diff --git a/karavan-app/src/main/webui/src/topology/TopologyToolbar.tsx
b/karavan-app/src/main/webui/src/topology/TopologyToolbar.tsx
index 0de61fee..0b23c542 100644
--- a/karavan-app/src/main/webui/src/topology/TopologyToolbar.tsx
+++ b/karavan-app/src/main/webui/src/topology/TopologyToolbar.tsx
@@ -17,7 +17,7 @@
import * as React from 'react';
import {
- Button, Switch, ToolbarContent,
+ Button, Switch,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
diff --git a/karavan-app/src/main/webui/src/topology/topology.css
b/karavan-app/src/main/webui/src/topology/topology.css
index 7d21c7b2..0521a9a9 100644
--- a/karavan-app/src/main/webui/src/topology/topology.css
+++ b/karavan-app/src/main/webui/src/topology/topology.css
@@ -92,7 +92,17 @@
pointer-events: none;
opacity: 0.7;
}
+
.karavan .topology-sidebar .properties .pf-v5-c-form
.pf-v5-c-form__group-label-help {
pointer-events: auto;
opacity: 1;
+}
+
+.karavan .topology-panel .pf-topology__group .pf-topology__group__background {
+ stroke-width: 2px;
+ stroke-dasharray: 3;
+}
+
+.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/karavan-designer/public/example/demo.camel.yaml
b/karavan-designer/public/example/demo.camel.yaml
index 72b56e9b..f80c8a26 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -58,160 +58,6 @@
uri: kafka
parameters:
topic: audit
-- route:
- id: route-715c
- description: Consume Orders
- nodePrefixId: route-4f3
- routeConfigurationId: auditedRoute
- from:
- id: from-7adf
- description: From Kafka
- uri: kamelet:kafka-scram-source
- variableReceive: orderJson
- parameters:
- bootstrapServers: "{{secret:kafka-secret/bootstrapServers}}"
- securityProtocol: "{{secret:kafka-secret/securityProtocol}}"
- saslMechanism: "{{secret:kafka-secret/saslMechanism}}"
- user: "{{secret:kafka-secret/userName}}"
- password: "{{secret:kafka-secret/password}}"
- topic: orders
- autoCommitEnable: true
- autoOffsetReset: earliest
- consumerGroup: ordrer-consumer-1
- steps:
- - removeHeaders:
- id: removeHeaders-c67b
- pattern: "*"
- - unmarshal:
- id: unmarshal-9c0d
- variableSend: orderJson
- variableReceive: order
- json:
- id: json-0b83
- - choice:
- id: choice-f872
- when:
- - id: when-c007
- description: Special Orders
- expression:
- groovy:
- id: groovy-15e2
- expression: variables.order.type == 'SPECIAL'
- steps:
- - log:
- id: log-735e
- message: "SPECIAL: ${variable.order}"
- - to:
- id: to-7a02
- uri: direct
- parameters:
- name: special
- otherwise:
- id: otherwise-d9a2
- steps:
- - log:
- id: log-f600
- message: "ORDINAL: ${variable.order}"
- - to:
- id: to-c45b
- uri: direct
- parameters:
- name: ordinal
-- route:
- id: route-1695
- description: Enrich Ordinal Order
- nodePrefixId: route-f1b
- from:
- id: from-471d
- uri: direct
- parameters:
- name: ordinal
- steps:
- - log:
- id: log-202b
- message: ${body}
- - to:
- id: to-f1b3
- uri: direct
- parameters:
- name: send
-- route:
- id: route-9a71
- description: Send to HTTP
- nodePrefixId: route-fdf
- from:
- id: from-b83d
- uri: direct
- parameters:
- name: send
- steps:
- - log:
- id: log-ca7f
- message: "send: ${variable.order}"
- - marshal:
- id: marshal-a102
- variableSend: order
- variableReceive: orderOut
- json:
- id: json-d9be
- - setHeaders:
- id: setHeaders-2a6c
- headers:
- - id: setHeader-7dd5
- name: X-API-Key
- expression:
- simple:
- id: simple-e2a5
- expression: "{{secret:http-secret/X-API-Key}}"
- - to:
- id: to-fb94
- description: Send to HTTP Service
- variableSend: orderOut
- uri: http
- parameters:
- httpUri: http-to-database.talisman/order
- httpMethod: POST
-- route:
- id: route-e9e4
- description: Enrich Special Order
- nodePrefixId: route-3ca
- from:
- id: from-b883
- uri: direct
- parameters:
- name: special
- steps:
- - to:
- id: to-6000
- description: Get Rebate
- variableReceive: rebate
- uri: sql
- parameters:
- dataSource: "#bean:RebateDatabase"
- query: SELECT * FROM REBATES WHERE NAME = 'SPECIAL'
- outputType: SelectOne
- - log:
- id: log-8558
- message: ${variable.rebate}
- - setVariable:
- id: setVariable-d9a6
- description: Update Order
- name: order
- expression:
- groovy:
- id: groovy-a753
- expression: >-
- def updatedOrder = variables.order;
-
- updatedOrder.amount = updatedOrder.amount * (1 -
- variables.rebate.rebate);
-
- return updatedOrder;
- - to:
- id: to-20bb
- uri: direct
- parameters:
- name: send
- route:
id: hello
from:
diff --git a/karavan-designer/src/topology/TopologyApi.tsx
b/karavan-designer/src/topology/TopologyApi.tsx
index 383c2159..ffe14098 100644
--- a/karavan-designer/src/topology/TopologyApi.tsx
+++ b/karavan-designer/src/topology/TopologyApi.tsx
@@ -273,8 +273,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Consumer group',
style: {
- padding: 10,
- strokeWidth: "2px",
+ padding: 25,
}
})
@@ -286,8 +285,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Producer group',
style: {
- padding: 10,
- strokeWidth: "2px"
+ padding: 25,
}
})
diff --git a/karavan-designer/src/topology/TopologyStore.ts
b/karavan-designer/src/topology/TopologyStore.ts
index 514f1b37..63b7ed4f 100644
--- a/karavan-designer/src/topology/TopologyStore.ts
+++ b/karavan-designer/src/topology/TopologyStore.ts
@@ -28,7 +28,7 @@ interface TopologyState {
setRanker: (ranker: string) => void
nodeData: any
setNodeData: (nodeData: any) => void
- showGroups?: boolean
+ showGroups: boolean
setShowGroups: (showGroups: boolean) => void
}
@@ -56,6 +56,7 @@ export const useTopologyStore =
createWithEqualityFn<TopologyState>((set) => ({
return {nodeData: nodeData};
});
},
+ showGroups: false,
setShowGroups: (showGroups: boolean) => {
set((state: TopologyState) => {
return {showGroups: showGroups};
diff --git a/karavan-designer/src/topology/TopologyToolbar.tsx
b/karavan-designer/src/topology/TopologyToolbar.tsx
index 0de61fee..0b23c542 100644
--- a/karavan-designer/src/topology/TopologyToolbar.tsx
+++ b/karavan-designer/src/topology/TopologyToolbar.tsx
@@ -17,7 +17,7 @@
import * as React from 'react';
import {
- Button, Switch, ToolbarContent,
+ Button, Switch,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
diff --git a/karavan-designer/src/topology/topology.css
b/karavan-designer/src/topology/topology.css
index 7d21c7b2..0521a9a9 100644
--- a/karavan-designer/src/topology/topology.css
+++ b/karavan-designer/src/topology/topology.css
@@ -92,7 +92,17 @@
pointer-events: none;
opacity: 0.7;
}
+
.karavan .topology-sidebar .properties .pf-v5-c-form
.pf-v5-c-form__group-label-help {
pointer-events: auto;
opacity: 1;
+}
+
+.karavan .topology-panel .pf-topology__group .pf-topology__group__background {
+ stroke-width: 2px;
+ stroke-dasharray: 3;
+}
+
+.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/karavan-space/src/topology/TopologyApi.tsx
b/karavan-space/src/topology/TopologyApi.tsx
index 383c2159..ffe14098 100644
--- a/karavan-space/src/topology/TopologyApi.tsx
+++ b/karavan-space/src/topology/TopologyApi.tsx
@@ -273,8 +273,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Consumer group',
style: {
- padding: 10,
- strokeWidth: "2px",
+ padding: 25,
}
})
@@ -286,8 +285,7 @@ export function getModel(files: IntegrationFile[],
grouping?: boolean): Model {
group: true,
label: 'Producer group',
style: {
- padding: 10,
- strokeWidth: "2px"
+ padding: 25,
}
})
diff --git a/karavan-space/src/topology/TopologyStore.ts
b/karavan-space/src/topology/TopologyStore.ts
index 514f1b37..63b7ed4f 100644
--- a/karavan-space/src/topology/TopologyStore.ts
+++ b/karavan-space/src/topology/TopologyStore.ts
@@ -28,7 +28,7 @@ interface TopologyState {
setRanker: (ranker: string) => void
nodeData: any
setNodeData: (nodeData: any) => void
- showGroups?: boolean
+ showGroups: boolean
setShowGroups: (showGroups: boolean) => void
}
@@ -56,6 +56,7 @@ export const useTopologyStore =
createWithEqualityFn<TopologyState>((set) => ({
return {nodeData: nodeData};
});
},
+ showGroups: false,
setShowGroups: (showGroups: boolean) => {
set((state: TopologyState) => {
return {showGroups: showGroups};
diff --git a/karavan-space/src/topology/TopologyToolbar.tsx
b/karavan-space/src/topology/TopologyToolbar.tsx
index 0de61fee..0b23c542 100644
--- a/karavan-space/src/topology/TopologyToolbar.tsx
+++ b/karavan-space/src/topology/TopologyToolbar.tsx
@@ -17,7 +17,7 @@
import * as React from 'react';
import {
- Button, Switch, ToolbarContent,
+ Button, Switch,
ToolbarItem, Tooltip
} from '@patternfly/react-core';
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
diff --git a/karavan-space/src/topology/topology.css
b/karavan-space/src/topology/topology.css
index 7d21c7b2..0521a9a9 100644
--- a/karavan-space/src/topology/topology.css
+++ b/karavan-space/src/topology/topology.css
@@ -92,7 +92,17 @@
pointer-events: none;
opacity: 0.7;
}
+
.karavan .topology-sidebar .properties .pf-v5-c-form
.pf-v5-c-form__group-label-help {
pointer-events: auto;
opacity: 1;
+}
+
+.karavan .topology-panel .pf-topology__group .pf-topology__group__background {
+ stroke-width: 2px;
+ stroke-dasharray: 3;
+}
+
+.karavan .topology-panel .pf-topology__group
.pf-topology__node__label__background {
+ opacity: 0.5;
}
\ No newline at end of file
