From 42c45424cadcd1bc54b9450b91682cbd351d31f5 Mon Sep 17 00:00:00 2001
From: Andrey Pokhilko <andrei.pokhilko@gmail.com>
Date: Wed, 23 Aug 2023 13:20:37 +0100
Subject: [PATCH] Add more info to graph nodes (#30)

* Add more info to graph nodes

* Clean roadmap

* Add title to node
---
 Roadmap.md                                    | 30 ++++++++-----------
 .../src/components/graph/CustomNodes.tsx      | 13 +++++---
 pkg/frontend/src/components/graph/data.ts     |  4 +++
 pkg/frontend/src/pages/ClaimPage.tsx          |  2 +-
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/Roadmap.md b/Roadmap.md
index 41e10e5..5fac2c6 100644
--- a/Roadmap.md
+++ b/Roadmap.md
@@ -1,34 +1,25 @@
 # Roadmap
 
-help buttons in page header to explain and link to CP learning
-
-Make event type be aligned better in event list
-
 Decide on presentation approach: info drawer or dedicated pages
 
-Detect crossplane is not installed and tell user to install it first
-
 Refactor common code around drawer display => <ResourceListWithDrawer?/>
 
-Refactor backend controller for cleaner arch
-
-Make Relations the first tab
+Make Relations the first tab in drawer (if we keep drawer)
 
-Make watcher-based resource tracker, to avoid re-reading all CRDs
-
-For providerConfig nodes, add YAML modal
+For providerConfig nodes in graph, add YAML modal/drawer
 
 Standard troubleshooting problem: Secret References from various objects
 
-Make left main menu items highlight current item
-
 Make sure compositions of compositions are displayed properly
 
-When we "open" resource (from diagram), it redirects to corresponding section and desorients user. Needs to stay in-place. Probably whole navigation has to be re-thought because of this.
+When we "open" resource (from diagram), it redirects to corresponding section and desorients user. Needs to stay
+in-place. Probably whole navigation has to be re-thought because of this.
 
-For MR, show resource kind in graph.
+ArgoCD has the ability to load UI extensions. It would be amazing to have komoplane-style inspection of the crossplane
+resources in argocd: https://argo-cd.readthedocs.io/en/latest/developer-guide/extensions/ui-extensions/, there is one
+that does backend stuff as well: https://github.com/argoproj-labs/rollout-extension (by Blake Barnett)
 
-ArgoCD has the ability to load UI extensions. It would be amazing to have komoplane-style inspection of the crossplane resources in argocd: https://argo-cd.readthedocs.io/en/latest/developer-guide/extensions/ui-extensions/, there is one that does backend stuff as well: https://github.com/argoproj-labs/rollout-extension (by Blake Barnett)
+For k8s-MRs, display actual k8s resources in graph
 
 ## Claims
 
@@ -66,3 +57,8 @@ Turn it into table
 
 Filter of free-text search
 Display as table
+
+## Backend
+
+Refactor backend controller for cleaner arch
+Make watcher-based resource tracker in backend, to avoid re-reading all CRDs
diff --git a/pkg/frontend/src/components/graph/CustomNodes.tsx b/pkg/frontend/src/components/graph/CustomNodes.tsx
index 73a6a81..89d9d79 100644
--- a/pkg/frontend/src/components/graph/CustomNodes.tsx
+++ b/pkg/frontend/src/components/graph/CustomNodes.tsx
@@ -49,16 +49,21 @@ function CustomNode({data, sourcePosition, targetPosition}: NodeProps) {
     return (
         <Box className="border rounded border-gray-600" sx={{
             backgroundColor: data.bgcolor,
-            maxWidth: 300,
+            maxWidth: 350,
             borderWidth: data.main ? 3 : null,
             cursor: data.onClick ? "pointer" : "grab"
         }}>
-            <Box className="px-3 py-1 border-b border-gray-400 bg-gray-500 bg-opacity-20 "
-            >
+            <Box className="px-3 py-1 border-b border-gray-400 bg-gray-500 bg-opacity-20"
+                 sx={{display: 'flex', justifyContent: 'space-between', flexDirection: 'row'}}>
                 <Typography fontSize="x-small" className="uppercase text-xs">{data.type}</Typography>
+                <Typography fontSize="x-small" className="text-xs" sx={{marginLeft: "0.5rem"}}
+                            title={data.apiVersion}>{data.kind}</Typography>
             </Box>
             <Box className="px-3 py-1">
-                <Typography variant="h6" sx={data.main?{ fontWeight: 'bold' }:{}}>{data.label}</Typography>
+                <Typography variant="h6" sx={data.main ? {fontWeight: 'bold'} : {}}
+                            title={data.compositionName ? data.label : ""}>
+                    {data.compositionName ? data.compositionName : data.label}
+                </Typography>
                 <NodeStatusLine data={data}/>
             </Box>
             <Handle type="target" position={targetPosition ? targetPosition : Position.Top}/>
diff --git a/pkg/frontend/src/components/graph/data.ts b/pkg/frontend/src/components/graph/data.ts
index 46bba0e..0261ca3 100644
--- a/pkg/frontend/src/components/graph/data.ts
+++ b/pkg/frontend/src/components/graph/data.ts
@@ -26,11 +26,15 @@ export class GraphData {
         const status = this.getStatus(res)
         const onClick = this.genOnClick(ntype, res, isMain, navigate)
         logger.log("OnClick", onClick == NOOP)
+        const compositionName = res?.metadata.annotations ? res.metadata.annotations["crossplane.io/composition-resource-name"] : null
         const node = {
             id: (++this.id).toString(),
             type: ntype,
             data: {
                 label: res?.metadata.name,
+                apiVersion: res?.apiVersion,
+                kind: res?.kind,
+                compositionName: compositionName,
                 status: status[0],
                 statusMsg: status[1],
                 main: isMain,
diff --git a/pkg/frontend/src/pages/ClaimPage.tsx b/pkg/frontend/src/pages/ClaimPage.tsx
index 0816090..2c3fd3c 100644
--- a/pkg/frontend/src/pages/ClaimPage.tsx
+++ b/pkg/frontend/src/pages/ClaimPage.tsx
@@ -85,7 +85,7 @@ export default function ClaimPage() {
                     <Grid item xs={12} md={6}>
                         <Paper className="p-4">
                             <Typography variant="h6">Status</Typography>
-                            <ConditionList conditions={claim.status.conditions}></ConditionList>
+                            <ConditionList conditions={claim.status?.conditions}></ConditionList>
                         </Paper>
                     </Grid>
                     <Grid item xs={12} md={12}>