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 656aa882e3cd64cbc34a07d6f902c05a630ca2e3
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Aug 29 16:56:10 2023 -0400
Revert Hide Log DSL
---
karavan-designer/public/example/demo.camel.yaml | 126 +++++++++------------
karavan-designer/src/designer/KaravanDesigner.tsx | 26 ++---
.../src/designer/route/DslConnections.tsx | 4 +-
karavan-designer/src/designer/route/DslElement.tsx | 29 +++--
.../src/designer/route/useRouteDesignerHook.tsx | 7 +-
.../karavan-app/src/main/docker/Dockerfile.jvm | 9 ++
.../webui/src/designer/route/DslConnections.tsx | 26 +++--
.../main/webui/src/designer/route/DslElement.tsx | 44 ++++---
.../src/designer/route/useRouteDesignerHook.tsx | 7 +-
.../karavan-app/src/main/webui/src/index.css | 10 +-
10 files changed, 149 insertions(+), 139 deletions(-)
diff --git a/karavan-designer/public/example/demo.camel.yaml
b/karavan-designer/public/example/demo.camel.yaml
index 5a7ba0c0..57a7a2b4 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -1,76 +1,58 @@
- route:
- id: route-f435
+ id: route-1a95
from:
- uri: kamelet:timer-source
- id: from-e52c
+ uri: kamelet:aws-sqs-source
+ id: from-c57c
steps:
- - process:
- id: process-1dad
- - filter:
+ - log:
+ message: ${body}
+ id: log-8ec1
+ - log:
+ message: ${body}
+ id: log-beae
+ - dynamicRouter:
expression: {}
- id: filter-064f
-# - choice:
-# when:
-# - expression: {}
-# id: when-064f
-# steps:
-# - multicast:
-# id: multicast-38cea
-# steps:
-# - bean:
-# id: bean-3b8e
-# - log:
-# message: ${body}
-# id: log-546f
-# - loop:
-# expression: {}
-# id: loop-4635
-# steps:
-# - convertBodyTo:
-# id: convertBodyTo-1cae
-# otherwise:
-# id: otherwise-0b09
-# steps:
-# - filter:
-# expression: {}
-# id: filter-a02b
-# id: choice-c53c
-# - doTry:
-# id: doTry-8fd5
-# doCatch:
-# - id: doCatch-1071
-# - id: doCatch-c38e
-# steps:
-# - routingSlip:
-# expression: {}
-# id: routingSlip-a85a
-#- route:
-# id: route-178a
-# from:
-# uri: kamelet:aws-cloudtrail-source
-# id: from-3e7d
-# steps:
-# - multicast:
-# id: multicast-eef7
-# steps:
-# - bean:
-# id: bean-a5ef
-# - aggregate:
-# id: aggregate-f5d8
-# - aggregate:
-# id: aggregate-b9e7
-# - aggregate:
-# id: aggregate-5eb8
-# - aggregate:
-# id: aggregate-c57e
-# - aggregate:
-# id: aggregate-1cd4
-# - bean:
-# id: bean-72a1
-# - choice:
-# when:
-# - expression: {}
-# id: when-a56b
-# otherwise:
-# id: otherwise-9f31
-# id: choice-1905
+ id: dynamicRouter-079a
+- route:
+ id: route-4530
+ from:
+ uri: kamelet:azure-cosmosdb-source
+ id: from-ea00
+ steps:
+ - choice:
+ when:
+ - expression: {}
+ id: when-1755
+ steps:
+ - loop:
+ expression: {}
+ id: loop-967a
+ - expression: {}
+ id: when-16be
+ steps:
+ - log:
+ message: ${body}
+ id: log-fb70
+ - pollEnrich:
+ expression: {}
+ id: pollEnrich-2f03
+ otherwise:
+ id: otherwise-331b
+ steps:
+ - log:
+ message: ${body}
+ id: log-29e1
+ - process:
+ id: process-857f
+ id: choice-cc9a
+- route:
+ id: route-24d3
+ from:
+ uri: kamelet:cassandra-source
+ id: from-bf6e
+ steps:
+ - process:
+ id: process-2d45
+ - log:
+ message: ${body}
+ id: log-1919
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx
b/karavan-designer/src/designer/KaravanDesigner.tsx
index ed6ad193..badf8ba8 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -133,19 +133,19 @@ export function KaravanDesigner (props: Props) {
<Tab eventKey='rest' title={getTab("REST", "REST
services", "rest")}></Tab>
<Tab eventKey='beans' title={getTab("Beans", "Beans
Configuration", "beans")}></Tab>
</Tabs>
- {tab === 'routes' && <Tooltip content={"Hide Log elements"}>
- <Switch
- isReversed
- isChecked={hideLogDSL}
- onChange={(_, checked) => {
- setHideLogDSL(checked)
- }}
- aria-label={"Hide Log"}
- id="hideLogDSL"
- name="hideLogDSL"
- className={"hide-log"}
- />
- </Tooltip>}
+ {/*{tab === 'routes' && <Tooltip content={"Hide Log
elements"}>*/}
+ {/* <Switch*/}
+ {/* isReversed*/}
+ {/* isChecked={hideLogDSL}*/}
+ {/* onChange={(_, checked) => {*/}
+ {/* setHideLogDSL(checked)*/}
+ {/* }}*/}
+ {/* aria-label={"Hide Log"}*/}
+ {/* id="hideLogDSL"*/}
+ {/* name="hideLogDSL"*/}
+ {/* className={"hide-log"}*/}
+ {/* />*/}
+ {/*</Tooltip>}*/}
</div>
{tab === 'routes' && <RouteDesigner/>}
{tab === 'rest' && <RestDesigner/>}
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx
b/karavan-designer/src/designer/route/DslConnections.tsx
index 9f3578ad..c9d85ccb 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -30,8 +30,8 @@ const outgoingDefinitions: string[] = ['ToDefinition',
'KameletDefinition', 'ToD
export function DslConnections() {
const [integration] = useIntegrationStore((state) => [state.integration],
shallow)
- const [width, height, top, left] = useDesignerStore((s) =>
- [s.width, s.height, s.top, s.left], shallow)
+ const [width, height, top, left, hideLogDSL] = useDesignerStore((s) =>
+ [s.width, s.height, s.top, s.left, s.hideLogDSL], shallow)
const [ steps, addStep, deleteStep, clearSteps] = useConnectionsStore((s)
=> [s.steps, s.addStep, s.deleteStep, s.clearSteps], shallow)
useEffect(() => {
diff --git a/karavan-designer/src/designer/route/DslElement.tsx
b/karavan-designer/src/designer/route/DslElement.tsx
index f3283154..9aaf6735 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -51,7 +51,7 @@ export function DslElement(props: Props) {
const [selectedUuids, selectedStep, showMoveConfirmation,
setShowMoveConfirmation, hideLogDSL] =
useDesignerStore((s) =>
- [s.selectedUuids, s.selectedStep, s.showMoveConfirmation,
s.setShowMoveConfirmation, s.hideLogDSL], shallow)
+ [s.selectedUuids, s.selectedStep, s.showMoveConfirmation,
s.setShowMoveConfirmation, s.hideLogDSL], shallow)
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false);
@@ -197,20 +197,21 @@ export function DslElement(props: Props) {
function sendPosition(el: HTMLDivElement | null) {
const isSelected = isElementSelected();
const isHidden = isElementHidden();
- if (isHidden) {
- EventBus.sendPosition("delete", props.step, props.parent, new
DOMRect(), new DOMRect(), 0);
- } else {
- if (el) {
- const header = Array.from(el.childNodes.values()).filter((n:
any) => n.classList.contains("header"))[0];
- if (header) {
- const headerIcon: any =
Array.from(header.childNodes.values()).filter((n: any) =>
n.classList.contains("header-icon"))[0];
- const headerRect = headerIcon.getBoundingClientRect();
- const rect = el.getBoundingClientRect();
- if (props.step.showChildren) {
+ if (el) {
+ const header = Array.from(el.childNodes.values()).filter((n: any)
=> n.classList.contains("header"))[0];
+ if (header) {
+ const headerIcon: any =
Array.from(header.childNodes.values()).filter((n: any) =>
n.classList.contains("header-icon"))[0];
+ const headerRect = headerIcon.getBoundingClientRect();
+ const rect = el.getBoundingClientRect();
+ if (props.step.showChildren) {
+ if (isHidden) {
+ // EventBus.sendPosition("delete", props.step,
props.parent, new DOMRect(), new DOMRect(), 0);
EventBus.sendPosition("add", props.step, props.parent,
rect, headerRect, props.position, props.inSteps, isSelected);
} else {
- EventBus.sendPosition("delete", props.step,
props.parent, new DOMRect(), new DOMRect(), 0);
+ EventBus.sendPosition("add", props.step, props.parent,
rect, headerRect, props.position, props.inSteps, isSelected);
}
+ } else {
+ EventBus.sendPosition("delete", props.step, props.parent,
new DOMRect(), new DOMRect(), 0);
}
}
}
@@ -265,8 +266,7 @@ export function DslElement(props: Props) {
if (!checkRequired[0]) className = className + " header-text-required";
if (checkRequired[0]) {
return <Text className={className}>{title}</Text>
- }
- else return (
+ } else return (
<Tooltip position={"right"} className="tooltip-required-field"
content={checkRequired[1].map((text, i) => (<div
key={i}>{text}</div>))}>
<Text className={className}>{title}</Text>
@@ -445,7 +445,6 @@ export function DslElement(props: Props) {
className={className}
ref={el => sendPosition(el)}
style={{
- display: isElementHidden() ? "none" : "flex",
borderStyle: hasBorder() ? "dotted" : "none",
borderColor: isElementSelected() ?
"var(--step-border-color-selected)" : "var(--step-border-color)",
marginTop: isInStepWithChildren() ? "16px" : "8px",
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index cf4c8282..4d814f1a 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -76,6 +76,7 @@ export function useRouteDesignerHook () {
}
const deleteElement = () => {
+ EventBus.sendPosition("clean", new CamelElement(""), undefined, new
DOMRect(), new DOMRect(), 0);
selectedUuids.forEach(uuidToDelete => {
const i =
CamelDefinitionApiExt.deleteStepFromIntegration(integration, uuidToDelete);
setIntegration(i, false);
@@ -83,11 +84,7 @@ export function useRouteDesignerHook () {
setShowDeleteConfirmation(false);
setDeleteMessage('');
setSelectedStep(undefined);
- setSelectedUuids([uuidToDelete]);
-
- const el = new CamelElement("");
- el.uuid = uuidToDelete;
- EventBus.sendPosition("delete", el, undefined, new DOMRect(), new
DOMRect(), 0);
+ setSelectedUuids([]);
});
}
diff --git a/karavan-web/karavan-app/src/main/docker/Dockerfile.jvm
b/karavan-web/karavan-app/src/main/docker/Dockerfile.jvm
new file mode 100644
index 00000000..4f7e95a5
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/docker/Dockerfile.jvm
@@ -0,0 +1,9 @@
+FROM registry.access.redhat.com/ubi8/openjdk-17:1.16
+ENV LANGUAGE='en_US:en'
+COPY --chown=185 target/*-runner.jar /deployments/quarkus-run.jar
+EXPOSE 8080
+USER 185
+ENV JAVA_OPTS="-Dquarkus.http.host=0.0.0.0
-Djava.util.logging.manager=org.jboss.logmanager.LogManager"
+ENV JAVA_APP_JAR="/deployments/quarkus-run.jar"
+ENTRYPOINT [ "/opt/jboss/container/java/run/run-java.sh" ]
+
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index 9f3578ad..4ba95f56 100644
---
a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
@@ -30,8 +30,8 @@ const outgoingDefinitions: string[] = ['ToDefinition',
'KameletDefinition', 'ToD
export function DslConnections() {
const [integration] = useIntegrationStore((state) => [state.integration],
shallow)
- const [width, height, top, left] = useDesignerStore((s) =>
- [s.width, s.height, s.top, s.left], shallow)
+ const [width, height, top, left, hideLogDSL] = useDesignerStore((s) =>
+ [s.width, s.height, s.top, s.left, s.hideLogDSL], shallow)
const [ steps, addStep, deleteStep, clearSteps] = useConnectionsStore((s)
=> [s.steps, s.addStep, s.deleteStep, s.clearSteps], shallow)
useEffect(() => {
@@ -363,12 +363,17 @@ export function DslConnections() {
)
}
+ function isElementHidden(element: CamelElement): boolean {
+ return element.dslName === 'LogDefinition' && hideLogDSL;
+ }
+
function getCircle(pos: DslPosition) {
+ const isHidden = isElementHidden(pos.step);
const cx = pos.headerRect.x + pos.headerRect.width / 2 - left;
const cy = pos.headerRect.y + pos.headerRect.height / 2 - top;
- const r = pos.headerRect.height / 2;
+ const r = isHidden ? 1 : pos.headerRect.height / 2;
return (
- <circle cx={cx} cy={cy} r={r} stroke="transparent" strokeWidth="3"
fill="transparent" key={pos.step.uuid + "-circle"}/>
+ <circle cx={cx} cy={cy} r={r} stroke="red" strokeWidth="3"
fill="transparent" key={pos.step.uuid + "-circle"}/>
)
}
@@ -385,6 +390,7 @@ export function DslConnections() {
}
function getArrow(pos: DslPosition) {
+ const isHidden = isElementHidden(pos.step);
const endX = pos.headerRect.x + pos.headerRect.width / 2 - left;
const endY = pos.headerRect.y - 9 - top;
if (pos.parent) {
@@ -395,12 +401,14 @@ export function DslConnections() {
if ((!pos.inSteps || (pos.inSteps && pos.position === 0)) &&
parent.step.dslName !== 'MulticastDefinition') {
return (
<path name={pos.step.dslName} d={`M
${startX},${startY} C ${startX},${endY} ${endX},${startY} ${endX},${endY}`}
- className="path" key={pos.step.uuid}
markerEnd="url(#arrowhead)"/>
+ className="path"
+ key={pos.step.uuid} markerEnd={isHidden ? "none"
: "url(#arrowhead)"}/>
)
} else if (parent.step.dslName === 'MulticastDefinition' &&
pos.inSteps) {
return (
<path d={`M ${startX},${startY} C ${startX},${endY}
${endX},${startY} ${endX},${endY}`}
- className="path" key={pos.step.uuid}
markerEnd="url(#arrowhead)"/>
+ className="path"
+ key={pos.step.uuid} markerEnd={isHidden ? "none"
: "url(#arrowhead)"}/>
)
} else if (pos.inSteps && pos.position > 0 &&
!hasSteps(pos.step)) {
const prev = getPreviousStep(pos);
@@ -409,7 +417,8 @@ export function DslConnections() {
const prevX = r.x + r.width / 2 - left;
const prevY = r.y + r.height - top;
return (
- <line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
+ <line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid}
+ markerEnd={isHidden ? "none" :
"url(#arrowhead)"}/>
)
}
} else if (pos.inSteps && pos.position > 0 &&
hasSteps(pos.step)) {
@@ -419,7 +428,8 @@ export function DslConnections() {
const prevX = r.x + r.width / 2 - left;
const prevY = r.y + r.height - top;
return (
- <line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
+ <line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid}
+ markerEnd={isHidden ? "none" :
"url(#arrowhead)"}/>
)
}
}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
index f3283154..d1c24f7b 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslElement.tsx
@@ -51,7 +51,7 @@ export function DslElement(props: Props) {
const [selectedUuids, selectedStep, showMoveConfirmation,
setShowMoveConfirmation, hideLogDSL] =
useDesignerStore((s) =>
- [s.selectedUuids, s.selectedStep, s.showMoveConfirmation,
s.setShowMoveConfirmation, s.hideLogDSL], shallow)
+ [s.selectedUuids, s.selectedStep, s.showMoveConfirmation,
s.setShowMoveConfirmation, s.hideLogDSL], shallow)
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false);
@@ -197,20 +197,21 @@ export function DslElement(props: Props) {
function sendPosition(el: HTMLDivElement | null) {
const isSelected = isElementSelected();
const isHidden = isElementHidden();
- if (isHidden) {
- EventBus.sendPosition("delete", props.step, props.parent, new
DOMRect(), new DOMRect(), 0);
- } else {
- if (el) {
- const header = Array.from(el.childNodes.values()).filter((n:
any) => n.classList.contains("header"))[0];
- if (header) {
- const headerIcon: any =
Array.from(header.childNodes.values()).filter((n: any) =>
n.classList.contains("header-icon"))[0];
- const headerRect = headerIcon.getBoundingClientRect();
- const rect = el.getBoundingClientRect();
- if (props.step.showChildren) {
+ if (el) {
+ const header = Array.from(el.childNodes.values()).filter((n: any)
=> n.classList.contains("header"))[0];
+ if (header) {
+ const headerIcon: any =
Array.from(header.childNodes.values()).filter((n: any) =>
n.classList.contains("header-icon"))[0];
+ const headerRect = headerIcon.getBoundingClientRect();
+ const rect = el.getBoundingClientRect();
+ if (props.step.showChildren) {
+ // if (isHidden) {
+ // EventBus.sendPosition("delete", props.step,
props.parent, new DOMRect(), new DOMRect(), 0);
+ // EventBus.sendPosition("add", props.step,
props.parent, rect, headerRect, props.position, props.inSteps, isSelected);
+ // } else {
EventBus.sendPosition("add", props.step, props.parent,
rect, headerRect, props.position, props.inSteps, isSelected);
- } else {
- EventBus.sendPosition("delete", props.step,
props.parent, new DOMRect(), new DOMRect(), 0);
- }
+ // }
+ } else {
+ EventBus.sendPosition("delete", props.step, props.parent,
new DOMRect(), new DOMRect(), 0);
}
}
}
@@ -265,8 +266,7 @@ export function DslElement(props: Props) {
if (!checkRequired[0]) className = className + " header-text-required";
if (checkRequired[0]) {
return <Text className={className}>{title}</Text>
- }
- else return (
+ } else return (
<Tooltip position={"right"} className="tooltip-required-field"
content={checkRequired[1].map((text, i) => (<div
key={i}>{text}</div>))}>
<Text className={className}>{title}</Text>
@@ -444,8 +444,16 @@ export function DslElement(props: Props) {
<div key={"root" + element.uuid}
className={className}
ref={el => sendPosition(el)}
- style={{
- display: isElementHidden() ? "none" : "flex",
+ style={isElementHidden() ? {
+ visibility: "hidden",
+ height: "1px",
+ width: "1px",
+ borderStyle: hasBorder() ? "dotted" : "none",
+ borderColor: isElementSelected() ?
"var(--step-border-color-selected)" : "var(--step-border-color)",
+ marginTop: isInStepWithChildren() ? "16px" : "8px",
+ zIndex: element.dslName === 'ToDefinition' ? 20 : 10,
+ boxShadow: isDraggedOver ? "0px 0px 1px 2px
var(--step-border-color-selected)" : "none",
+ }: {
borderStyle: hasBorder() ? "dotted" : "none",
borderColor: isElementSelected() ?
"var(--step-border-color-selected)" : "var(--step-border-color)",
marginTop: isInStepWithChildren() ? "16px" : "8px",
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
index cf4c8282..4d814f1a 100644
---
a/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/route/useRouteDesignerHook.tsx
@@ -76,6 +76,7 @@ export function useRouteDesignerHook () {
}
const deleteElement = () => {
+ EventBus.sendPosition("clean", new CamelElement(""), undefined, new
DOMRect(), new DOMRect(), 0);
selectedUuids.forEach(uuidToDelete => {
const i =
CamelDefinitionApiExt.deleteStepFromIntegration(integration, uuidToDelete);
setIntegration(i, false);
@@ -83,11 +84,7 @@ export function useRouteDesignerHook () {
setShowDeleteConfirmation(false);
setDeleteMessage('');
setSelectedStep(undefined);
- setSelectedUuids([uuidToDelete]);
-
- const el = new CamelElement("");
- el.uuid = uuidToDelete;
- EventBus.sendPosition("delete", el, undefined, new DOMRect(), new
DOMRect(), 0);
+ setSelectedUuids([]);
});
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/index.css
b/karavan-web/karavan-app/src/main/webui/src/index.css
index cbfaabcc..6cf02634 100644
--- a/karavan-web/karavan-app/src/main/webui/src/index.css
+++ b/karavan-web/karavan-app/src/main/webui/src/index.css
@@ -8,6 +8,10 @@
flex-direction: column;
}
+.pf-v5-c-toggle-group__button {
+ align-items: center;
+}
+
.karavan .pf-v5-c-page__main {
overflow: hidden;
}
@@ -411,4 +415,8 @@
.projects-page .pf-v5-c-table.pf-m-compact
tr:not(.pf-v5-c-table__expandable-row) > *:last-child {
--pf-v5-c-table--cell--PaddingRight: 0;
-}
\ No newline at end of file
+}
+
+.new-project .icon {
+ display: block;
+}
