Add more info to graph nodes (#30)

* Add more info to graph nodes

* Clean roadmap

* Add title to node

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

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}/>

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,

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}>