Part d and e - link to details and other changes (#9329)

locales/en/plugin__gitops-plugin.json

@@ -116,16 +116,17 @@
   "Delete {{x}}": "Delete {{x}}",
   "Edit {{x}}": "Edit {{x}}",
   "View in Argo CD": "View in Argo CD",
+  "View Details": "View Details",
   "Edit Application": "Edit Application",
   "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",
   "Sync Unknown": "Sync Unknown",
   "One or more resources are in Progressing state": "One or more resources are in Progressing state",
-  "Go to application": "Go to application",
   "Step {{x}}": "Step {{x}}",
   "Step: unmatched": "Step: unmatched",
   "There is no history associated with the application.": "There is no history associated with the application.",

locales/ja/plugin__gitops-plugin.json

@@ -116,16 +116,17 @@
   "Delete {{x}}": "Delete {{x}}",
   "Edit {{x}}": "Edit {{x}}",
   "View in Argo CD": "View in Argo CD",
+  "View Details": "View Details",
   "Edit Application": "Edit Application",
   "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",
   "Sync Unknown": "Sync Unknown",
   "One or more resources are in Progressing state": "One or more resources are in Progressing state",
-  "Go to application": "Go to application",
   "Step {{x}}": "Step {{x}}",
   "Step: unmatched": "Step: unmatched",
   "There is no history associated with the application.": "There is no history associated with the application.",

locales/ko/plugin__gitops-plugin.json

@@ -116,16 +116,17 @@
   "Delete {{x}}": "Delete {{x}}",
   "Edit {{x}}": "Edit {{x}}",
   "View in Argo CD": "View in Argo CD",
+  "View Details": "View Details",
   "Edit Application": "Edit Application",
   "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",
   "Sync Unknown": "Sync Unknown",
   "One or more resources are in Progressing state": "One or more resources are in Progressing state",
-  "Go to application": "Go to application",
   "Step {{x}}": "Step {{x}}",
   "Step: unmatched": "Step: unmatched",
   "There is no history associated with the application.": "There is no history associated with the application.",

locales/zh/plugin__gitops-plugin.json

@@ -116,16 +116,17 @@
   "Delete {{x}}": "Delete {{x}}",
   "Edit {{x}}": "Edit {{x}}",
   "View in Argo CD": "View in Argo CD",
+  "View Details": "View Details",
   "Edit Application": "Edit Application",
   "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",
   "Sync Unknown": "Sync Unknown",
   "One or more resources are in Progressing state": "One or more resources are in Progressing state",
-  "Go to application": "Go to application",
   "Step {{x}}": "Step {{x}}",
   "Step: unmatched": "Step: unmatched",
   "There is no history associated with the application.": "There is no history associated with the application.",

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,
@@ -59,14 +59,19 @@ import { GraphResourceMenuItem } from './hooks/GraphResourceMenuItems';
 import { ApplicationNode } from './nodes/ApplicationNode';
 import { ResourceGroupNode } from './nodes/ResourceGroupNode';
 import { ResourceNode } from './nodes/ResourceNode';
-import { getInitialEdges, getInitialNodes } from './graph-utils';
+import {
+  getInitialEdges,
+  getInitialNodes,
+  getResourceMapKey,
+  getResourcePathForResource,
+} from './graph-utils';
 
 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',
@@ -122,7 +127,6 @@ const customComponentFactory =
       ) {
         return <GraphResourceMenuItem key={label} graphElement={graphElement} label={label} />;
       }
-
       // For other actions that don't need resource-specific hooks
       return (
         <ContextMenuItem
@@ -131,6 +135,9 @@ const customComponentFactory =
             if (label === t('View in Argo CD')) {
               window.open(hrefRef.current, '_blank');
             }
+            if (label === t('View Details')) {
+              navigate(graphElement.getData().resourcePath);
+            }
           }}
         >
           {label}
@@ -146,26 +153,14 @@ const customComponentFactory =
         graphElement.getData().kind === 'AppProject' ||
         graphElement.getData().kind === 'Namespace'
       ) {
-        return createContextMenuItems2(graphElement, [
-          t('Edit labels'),
-          t('Edit annotations'),
-          t('Edit {{x}}', {
-            x: graphElement.getData().kind,
-          }),
-          '-',
-          t('View in Argo CD'),
-        ]);
+        return createContextMenuItems2(graphElement, [t('View Details'), t('View in Argo CD')]);
       } else {
         return createContextMenuItems2(graphElement, [
-          t('Edit labels'),
-          t('Edit annotations'),
-          t('Edit {{x}}', {
-            x: graphElement.getData().kind,
-          }),
           t('Delete {{x}}', {
             x: graphElement.getData().kind,
           }),
           '-',
+          t('View Details'),
           t('View in Argo CD'),
         ]);
       }
@@ -308,6 +303,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(() => {
@@ -357,12 +357,26 @@ export const ApplicationGraphView: React.FC<{
     return newController;
   }, []);
 
+  const resourcePaths = React.useMemo(() => {
+    const map = new Map<string, string>();
+    resources.forEach((resource) => {
+      const mapKey = getResourceMapKey(resource);
+      if (resource.health?.status !== HealthStatus.MISSING) {
+        map.set(mapKey, getResourcePathForResource(resource, allK8sModels));
+      } else {
+        map.set(mapKey, '');
+      }
+    });
+    return map;
+  }, [resources, allK8sModels]);
   const initialNodes = getInitialNodes(
     application,
     resources,
     allK8sModels,
     groupNodeState,
     groupNodeStates,
+    resourceNodeLayout,
+    resourcePaths,
   );
   const initialEdges = getInitialEdges(application, initialNodes, groupNodeState);
   const nodes = [...initialNodes];
@@ -373,12 +387,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 +413,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 +481,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 />,