feat(routeDiagram): Add IDs to the nodes

hawtio · Oct 17, 2024 · 69e2852 · 69e2852
1 parent ddbeb9a
commit 69e2852
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.css b/packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.css
@@ -8,12 +8,12 @@
 }
 .react-flow__node-camel .camel-node-content {
   display: grid;
-  grid-template-rows: 30% 40% 30%;
+  grid-template-rows: 25% 25% 25% 25%; /* Now there are four rows */
   grid-template-columns: 40% 35% 25%;
   border: 2px solid #8a8d90;
   background-color: #fafafa;
   padding: 5px;
-  height: 80px;
+  height: 100px;
   min-width: 150px;
   border-radius: 10px;
 
@@ -54,6 +54,11 @@
   grid-column: 1 / 4;
   justify-self: center;
 }
+.react-flow__node-camel .camel-node-content .camel-node-id {
+  grid-row: 4 / 5;
+  grid-column: 1 / 4;
+  justify-self: center;
+}
 
 .node-tooltip {
   background-color: white;

diff --git a/packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.tsx b/packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.tsx
@@ -160,13 +160,12 @@ const CamelNode: React.FunctionComponent<NodeProps<CamelNodeData>> = ({
     >
       <Handle type='target' position={targetPosition ?? Position.Top} />
       <Handle type='source' position={sourcePosition ?? Position.Bottom} id='a' />
-
       <div className='annotation'>{annotation?.element}</div>
       <div className='icon'>{data.imageUrl}</div>
       <div className='inflights'>{showInflightCounter && data.stats?.exchangesInflight}</div>
       <div className='number'>{data.stats?.exchangesCompleted}</div>
-      <div className='camel-node-label'> {truncate(data.label)}</div>
-
+      <div className='camel-node-label'>{truncate(data.label)}</div>
+      {data.cid && <div className='camel-node-id'> (ID: {data.cid})</div>}
       {showStatistics && (
         <NodeToolbar isVisible={isVisible} position={Position.Bottom} style={{ marginTop: '-30px' }}>
           <div className={'node-tooltip'}>