Merge pull request #221 from keithchong/9329-PartA-DifferentNodeShape

Toggle resource node shape to be OpenShift (classic PatternFly) or Argo CD (#9329)

Author: keithchong

locales/en/plugin__gitops-plugin.json

@@ -120,6 +120,7 @@
   "Delete Application": "Delete Application",
   "Show {{x}}": "Show {{x}}",
   "Hide {{x}}": "Hide {{x}}",
+  "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}": "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}",
   "Group resources of the same kind into one node": "Group resources of the same kind into one node",
   "Group Nodes": "Group Nodes",
   "There is no health status for this resource": "There is no health status for this resource",

locales/ja/plugin__gitops-plugin.json

@@ -120,6 +120,7 @@
   "Delete Application": "Delete Application",
   "Show {{x}}": "Show {{x}}",
   "Hide {{x}}": "Hide {{x}}",
+  "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}": "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}",
   "Group resources of the same kind into one node": "Group resources of the same kind into one node",
   "Group Nodes": "Group Nodes",
   "There is no health status for this resource": "There is no health status for this resource",

locales/ko/plugin__gitops-plugin.json

@@ -120,6 +120,7 @@
   "Delete Application": "Delete Application",
   "Show {{x}}": "Show {{x}}",
   "Hide {{x}}": "Hide {{x}}",
+  "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}": "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}",
   "Group resources of the same kind into one node": "Group resources of the same kind into one node",
   "Group Nodes": "Group Nodes",
   "There is no health status for this resource": "There is no health status for this resource",

locales/zh/plugin__gitops-plugin.json

@@ -120,6 +120,7 @@
   "Delete Application": "Delete Application",
   "Show {{x}}": "Show {{x}}",
   "Hide {{x}}": "Hide {{x}}",
+  "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}": "Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}",
   "Group resources of the same kind into one node": "Group resources of the same kind into one node",
   "Group Nodes": "Group Nodes",
   "There is no health status for this resource": "There is no health status for this resource",

src/gitops/components/application/graph/ApplicationGraphView.scss

@@ -32,7 +32,53 @@
   // .pf-topology__edge__background {
   //   stroke: var(--pf-t--global--dark--background--color--100);
   // }
-  
+
+  .pf-topology__node.pf-m-selected {     
+    .pf-topology__node__label__badge > rect {
+      stroke-width: 1;
+    }
+    .pf-topology__node__action-icon__icon .pf-v6-svg{
+      stroke: var(--pf-topology__node--Color);
+      fill: var(--pf-topology__node__label__background--Stroke);
+    }
+    .gitops-node-layout {
+      .pf-topology__node__action-icon__icon .pf-v6-svg{
+        stroke: var(--pf-t--global--border--color--default);
+        fill: var(--pf-topology__node__action-icon__icon--Color);
+      }
+    }
+  }
+
+  .gitops-resource-node-label-badge-opaque {
+    opacity: 0;
+  }
+
+  .gitops-resource-node-label {
+    .pf-topology__node__separator {
+      opacity: 0;
+    }
+    
+    .pf-topology__node__label__background {
+      width: 0px;
+      height: 0px;
+      stroke: var(--pf-topology__node--Color);
+      fill: var(--pf-topology__node--Color);
+    }
+  }
+
+  .gitops-resource-node-menu {
+    transform: translate(243px,10px);
+  }
+
+  .gitops-resource-group-node-menu {
+    transform: translate(243px,25px);
+  }
+
+  .gitops-application-node-menu {
+    transform: translate(263px,25px);
+    fill: var(--pf-topology__node__label__background--Stroke);
+  }
+
   .step-edge {
     &.step-edge-healthy {
       stroke: var(--pf-v5-global--success-color--100);
@@ -74,7 +120,7 @@
       padding-right: 6px;
     }
 
-    .pf-v6-c-toolbar__item:has(button#setting-owner-reference-layout) {
+    .pf-v6-c-toolbar__item:has(button#toggle-node-layout) {
       padding-left: 8px;
       border-left: 2px solid var(--pf-t--global--border--color--default);
     }

src/gitops/components/application/graph/ApplicationGraphView.tsx

@@ -18,7 +18,7 @@ import {
   useUserSettings,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { useK8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/utils/k8s/hooks/useK8sModel';
-import { ObjectGroupIcon } from '@patternfly/react-icons';
+import { ObjectGroupIcon, ToggleOffIcon, ToggleOnIcon } from '@patternfly/react-icons';
 import {
   action,
   ComponentFactory,
@@ -66,7 +66,7 @@ import './ApplicationGraphView.scss';
 const customLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout | undefined => {
   return new DagreLayout(graph, {
     rankdir: 'LR',
-    ranksep: 1,
+    ranksep: 0,
     nodesep: 0,
     edgesep: 0,
     ranker: 'network-simplex',
@@ -308,6 +308,11 @@ export const ApplicationGraphView: React.FC<{
     false,
     false,
   );
+  const [resourceNodeLayout, setResourceNodeLayout] = useUserSettings(
+    'redhat.gitops.resourceNodeLayout',
+    true,
+    false,
+  );
   const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
   const hrefRef = React.useRef<string>('');
   React.useEffect(() => {
@@ -363,6 +368,7 @@ export const ApplicationGraphView: React.FC<{
     allK8sModels,
     groupNodeState,
     groupNodeStates,
+    resourceNodeLayout,
   );
   const initialEdges = getInitialEdges(application, initialNodes, groupNodeState);
   const nodes = [...initialNodes];
@@ -373,12 +379,16 @@ export const ApplicationGraphView: React.FC<{
   // Track the previous node count to detect structural changes
   const previousNodeCountRef = React.useRef<number>(0);
   const groupNodeRef = React.useRef<boolean>(groupNodeState);
+  const resourceNodeLayoutRef = React.useRef<boolean>(resourceNodeLayout);
 
   const currentNodeCount = nodes.length;
   const previousNodeCount = previousNodeCountRef.current;
   const previousGroupNodeState = groupNodeRef.current;
+  const previousResourceNodeLayout = resourceNodeLayoutRef.current;
   const isStructuralChange =
-    currentNodeCount !== previousNodeCount || previousGroupNodeState != groupNodeState;
+    currentNodeCount !== previousNodeCount ||
+    previousGroupNodeState != groupNodeState ||
+    previousResourceNodeLayout != resourceNodeLayout;
 
   if (isStructuralChange || previousNodeCount === 0) {
     // Structural change: Create model WITH layout
@@ -395,6 +405,7 @@ export const ApplicationGraphView: React.FC<{
     controller.fromModel(modelWithLayout, false);
     previousNodeCountRef.current = currentNodeCount;
     groupNodeRef.current = groupNodeState;
+    resourceNodeLayoutRef.current = resourceNodeLayout;
   } else {
     // Data change only: Update ONLY changed nodes (no layout, no position changes)
     let updateCount = 0;
@@ -462,6 +473,22 @@ export const ApplicationGraphView: React.FC<{
               controller.getGraph().layout();
             }),
             customButtons: [
+              {
+                id: 'toggle-node-layout',
+                icon: resourceNodeLayout ? <ToggleOnIcon /> : <ToggleOffIcon />,
+                tooltip: t(
+                  'Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}',
+                  { x: resourceNodeLayout ? 'Argo CD' : 'OpenShift' },
+                ),
+                ariaLabel: t(
+                  'Toggle between OpenShift shapes and Argo CD shapes for tree nodes. Current setting: {{x}}',
+                  { x: resourceNodeLayout ? 'Argo CD' : 'OpenShift' },
+                ),
+                callback: () => {
+                  setResourceNodeLayout(!resourceNodeLayout);
+                  controller.getGraph().layout();
+                },
+              },
               {
                 id: 'use-group-nodes',
                 icon: <ObjectGroupIcon />,

src/gitops/components/application/graph/graph-utils.tsx

@@ -24,7 +24,10 @@ const NODE_TYPE_APPLICATION = 'application-node';
 const NODE_TYPE_APPLICATION_LABEL = 'Application';
 
 // Map application health status with topology node status
-const createApplicationNode = (application: ApplicationKind): NodeModel => {
+const createApplicationNode = (
+  application: ApplicationKind,
+  resourceNodeLayout: boolean,
+): NodeModel => {
   const nodeStatus = getTopologyNodeStatus(application.status?.health?.status);
   return {
     id:
@@ -34,7 +37,7 @@ const createApplicationNode = (application: ApplicationKind): NodeModel => {
       '-' +
       application?.metadata?.namespace,
     type: NODE_TYPE_APPLICATION,
-    label: NODE_TYPE_APPLICATION_LABEL,
+    label: resourceNodeLayout ? ' ' : NODE_TYPE_APPLICATION_LABEL,
     status: nodeStatus,
     width: APP_NODE_WIDTH,
     height: APP_NODE_HEIGHT,
@@ -47,7 +50,9 @@ const createApplicationNode = (application: ApplicationKind): NodeModel => {
       badgeBorderColor: RESOURCE_COLORS.get(
         RESOURCE_BADGE_COLORS.get('.co-m-resource-' + application?.kind.toLowerCase()),
       ),
+      badgeTextColor: 'white',
       rank: 0,
+      resourceNodeLayout: resourceNodeLayout,
       nodeStatus: nodeStatus,
       resourceHealthStatus: application?.status?.health?.status,
       appHealthStatus: application?.status?.health?.status,
@@ -105,6 +110,7 @@ const createGroupResourceNode = (
   resources: ApplicationResourceStatus[],
   allK8sModels: { [key: string]: K8sModel },
   resourceGroupExpandState: boolean,
+  resourceNodeLayout: boolean,
 ): Map<string, NodeModel> => {
   const resourceCount = resources.filter((res) => res.kind === resource.kind).length;
   const resourceHealthyCount = resource.health
@@ -186,7 +192,7 @@ const createGroupResourceNode = (
     groupResourceNode = {
       id: kind + '-node-group',
       type: 'node-group',
-      label: allK8sModels[kind]?.labelPlural || kind + 's',
+      label: resourceNodeLayout ? ' ' : allK8sModels[kind]?.labelPlural || kind + 's',
       shape: NodeShape.stadium,
       status: groupStatus,
       width: 280,
@@ -196,6 +202,7 @@ const createGroupResourceNode = (
         kind: kind, // Group's kind
         kindPlural: allK8sModels[kind]?.labelPlural || kind + 's',
         resourceGroupExpandState: resourceGroupExpandState,
+        resourceNodeLayout: resourceNodeLayout,
         nodeStatus: groupStatus,
         healthStatus: groupStatus,
         healthyCount: resourceHealthyCount,
@@ -217,6 +224,7 @@ const createGroupResourceNode = (
         badgeColor:
           RESOURCE_COLORS.get(RESOURCE_BADGE_COLORS.get('.co-m-resource-' + kind.toLowerCase())) ||
           RESOURCE_COLORS.get('color-container-dark'),
+        badgeTextColor: 'white',
         icon: kind,
         resourceChildrenIds: [],
       },
@@ -246,29 +254,30 @@ export const getInitialNodes = (
   allK8sModels: { [key: string]: K8sModel },
   showGroupNodes: boolean,
   groupNodeStates: string[],
+  resourceNodeLayout: boolean,
 ) => {
   // This contains all the nodes we want to add to the graph view
   const initialNodes: NodeModel[] = [];
   // This contains all the group nodes for each resource kind: kind to model map
   let groupResourceNodeMap = new Map<string, NodeModel>();
 
   // Step 1. Create the Application Node
-  initialNodes.push(createApplicationNode(application));
+  initialNodes.push(createApplicationNode(application, resourceNodeLayout));
 
   // Step 2: Proceed with adding more nodes only if the application has resources
   // If we use the resource tree in the future, this will change
   if (resources && resources.length > 0) {
     // Spacer node to the right of the application node. Fixed.
     initialNodes.push(createSpacerNode(1, 'application-node-spacer'));
     // Add child resources
-    resources.forEach((resource) => {
+    resources.forEach((resource, count) => {
       const kind = resource.kind;
       const badgeLabel = allK8sModels[kind]?.abbr || kindToAbbr(kind);
       const color =
         RESOURCE_COLORS.get(
           RESOURCE_BADGE_COLORS.get('.co-m-resource-' + resource.kind.toLowerCase()),
         ) || RESOURCE_COLORS.get('color-container-dark');
-      const nodeId = resource.kind + '-' + resource.name + '-' + resource.namespace;
+      const nodeId = count + '-' + resource.kind + '-' + resource.name + '-' + resource.namespace;
       const key = resource.kind + 's';
       const resourceGroupExpandState = groupNodeStates.includes(key);
 
@@ -280,6 +289,7 @@ export const getInitialNodes = (
           resources,
           allK8sModels,
           resourceGroupExpandState,
+          resourceNodeLayout,
         );
 
         if (!initialNodes.includes(groupResourceNodeMap.get(kind))) {
@@ -295,7 +305,7 @@ export const getInitialNodes = (
         initialNodes.push({
           id: nodeId,
           type: 'node',
-          label: resource.kind,
+          label: resourceNodeLayout ? ' ' : resource.kind,
           width: 280,
           height: NODE_DIAMETER,
           labelPosition: LabelPosition.bottom,
@@ -305,6 +315,7 @@ export const getInitialNodes = (
             name: resource.name,
             group: resource.group,
             kind: resource.kind,
+            resourceNodeLayout: resourceNodeLayout,
             version: resource.version,
             namespace: resource.namespace,
             indent: 100,
@@ -313,6 +324,7 @@ export const getInitialNodes = (
             syncStatus: resource.status,
             rank: 5,
             badgeColor: color,
+            badgeTextColor: 'white',
             badge: badgeLabel,
             icon: kind,
           },
@@ -348,7 +360,6 @@ export const getInitialNodes = (
             selectable: false,
             hideContextMenuKebab: true,
             hulledOutline: false,
-            style: { padding: 40 },
             data: {
               kind: groupNode.data.kind,
             },
@@ -382,7 +393,6 @@ export const getInitialNodes = (
           selectable: false,
           hideContextMenuKebab: true,
           hulledOutline: false,
-          style: { padding: 40 },
         };
         initialNodes.push(transparentGroupsOfGroups);
       }
@@ -420,7 +430,7 @@ export const getInitialEdges = (
           target: node.id,
           edgeStyle: EdgeStyle.dotted,
           data: {
-            indent: 100,
+            indent: 0,
           },
         });
       }
@@ -432,7 +442,7 @@ export const getInitialEdges = (
           target: node.data.kind + '-node-spacer',
           edgeStyle: EdgeStyle.dotted,
           data: {
-            indent: 100,
+            indent: 0,
           },
         });
       }
@@ -445,17 +455,18 @@ export const getInitialEdges = (
         if (node.type === 'node') {
           const b =
             nodes.filter(
-              (res) => res.type === 'node-group' && res.id === node.label + '-node-group',
+              (res) => res.type === 'node-group' && res.id === node.data.kind + '-node-group',
             ).length > 0;
           initialEdges.push({
-            id: 'e-' + node.label + '-' + index,
+            id: 'e-' + node.data.kind + '-' + index,
             type: 'edge',
             nodeSeparation: 0,
-            source: showGroupNodes && b ? node.label + '-node-spacer' : 'application-node-spacer',
+            source:
+              showGroupNodes && b ? node.data.kind + '-node-spacer' : 'application-node-spacer',
             target: node.id,
             edgeStyle: EdgeStyle.default,
             data: {
-              indent: 100,
+              indent: 0,
             },
           });
         }