integrated nodes in graph view

dashboard/src/main/home/dashboard/expanded-chart/OverviewSection.tsx

@@ -17,54 +17,21 @@ type PropsType = {
 type StateType = {
   viewMode: string,
   showKindLabels: boolean,
-  components: ResourceType[]
+  components: ResourceType[],
+  isLoaded: boolean
 };
 
-const dummyObjects = [
-  {
-    kind: 'deployment', name: 'radical-conspirator', rawYaml: {
-      stuff: {
-        idk: 'test'
-      }
-    }
-  },
-  { kind: 'service', name: 'fawkes-guy', rawYaml: {
-      stuff: {
-        idk: 'test'
-      }
-    }
-  },
-  { kind: 'ingress', name: 'bellion-john', rawYaml: {
-      stuff: {
-        idk: 'test'
-      }
-    }
-  },
-  { kind: 'pod', name: 'tenet-tenet', rawYaml: {
-      stuff: {
-        idk: 'test'
-      }
-    }
-  },
-  { kind: 'statefulset', name: 'brokerage-farm', rawYaml: {
-      stuff: {
-        idk: 'test'
-      }
-    }
-  }
-];
-
 export default class OverviewSection extends Component<PropsType, StateType> {
   state = {
     viewMode: 'graph',
     showKindLabels: true,
     components: [] as ResourceType[],
+    isLoaded: false
   }
 
   componentDidMount() {
     let { currentCluster, setCurrentError } = this.context;
     let { currentChart } = this.props;
-    console.log(currentCluster)
     api.getChartComponents('<token>', {
       namespace: currentChart.namespace,
       context: currentCluster,
@@ -73,8 +40,9 @@ export default class OverviewSection extends Component<PropsType, StateType> {
       if (err) {
         console.log(err)
       } else {
-        console.log(res.data)
-        this.setState({components: res.data})
+        this.setState({components: res.data}, () => {
+          this.setState({isLoaded: true})
+        })
       }
     });
   }
@@ -101,10 +69,15 @@ export default class OverviewSection extends Component<PropsType, StateType> {
       )
     }
 
-    return <GraphDisplay />
+    return <GraphDisplay components={this.state.components}/>
   }
 
   render() {
+    if (!this.state.isLoaded) {
+      return <StyledOverviewSection>
+        Loading...
+      </StyledOverviewSection>
+    }
     return (
       <StyledOverviewSection>
         {this.renderContents()}

dashboard/src/main/home/dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import Node from './Node';
 import Edge from './Edge';
+import { ResourceType } from '../../../../../shared/types';
 
 const nodes = [
   { id: 0, x: 0, y: 0, w: 40, h: 40 },
@@ -24,6 +25,7 @@ const zoomConstant = 0.01;
 
 type NodeType = {
   id: number,
+  name: string,
   x: number,
   y: number,
   w: number,
@@ -32,12 +34,19 @@ type NodeType = {
   toCursorY?: number,
 }
 
+type EdgeType = {
+  type: string,
+  source: number,
+  target: number,
+}
+
 type PropsType = {
+  components: ResourceType[]
 };
 
 type StateType = {
   nodes: NodeType[],
-  edges: [number, number][],
+  edges: EdgeType[],
   originX: number | null,
   originY: number | null,
   activeIds: number[],
@@ -52,8 +61,8 @@ type StateType = {
 
 export default class GraphDisplay extends Component<PropsType, StateType> {
   state = {
-    nodes: nodes as NodeType[],
-    edges: edges as [number, number][],
+    nodes: [] as NodeType[],
+    edges: [] as EdgeType[],
     originX: null as (number | null),
     originY: null as (number | null),
     activeIds: [] as number[],
@@ -63,12 +72,13 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     deltaY: null as (number | null),
     dragBg: false,
     preventDrag: false,
-    scale: 1
+    scale: 0.5
   }
 
   myRef: any = React.createRef();
 
   componentDidMount() {
+    let { components } = this.props;
     let height = this.myRef.offsetHeight;
     let width = this.myRef.offsetWidth;
     this.setState({
@@ -79,6 +89,11 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     // Suppress trackpad gestures
     this.myRef.addEventListener("touchmove", (e: any) => e.preventDefault());
     this.myRef.addEventListener("mousewheel", (e: any) => e.preventDefault());
+    let nodes = components.map( (c: ResourceType) => {
+      return {id: c.ID, name: c.Name, x:0, y:0, w:40, h:40}
+    })
+
+    this.setState({nodes})
   }
 
   componentWillUnmount() {
@@ -180,21 +195,23 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   }
 
   renderEdges = () => {
-    return this.state.edges.map((edge: [number, number], i: number) => {
+    return this.state.edges.map((edge: EdgeType, i: number) => {
       return (
         <Edge
+          key={i}
           originX={this.state.originX}
           originY={this.state.originY}
-          x1={this.state.nodes[edge[0]].x}
-          y1={this.state.nodes[edge[0]].y}
-          x2={this.state.nodes[edge[1]].x}
-          y2={this.state.nodes[edge[1]].y}
+          x1={this.state.nodes[edge.source].x}
+          y1={this.state.nodes[edge.source].y}
+          x2={this.state.nodes[edge.target].x}
+          y2={this.state.nodes[edge.target].y}
         />
       );
     });
   }
 
   render() {
+    console.log('rendering graph display')
     return (
       <StyledGraphDisplay
         ref={element => this.myRef = element}

dashboard/src/main/home/dashboard/expanded-chart/graph/Node.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 type NodeType = {
   id: number,
+  name: string,
   x: number,
   y: number,
   w: number,
@@ -26,7 +27,7 @@ export default class Node extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { x, y, w, h } = this.props.node;
+    let { x, y, w, h, name } = this.props.node;
     let { originX, originY, nodeMouseDown, nodeMouseUp, isActive } = this.props;
     return (
       <StyledNode
@@ -39,7 +40,7 @@ export default class Node extends Component<PropsType, StateType> {
         isActive={isActive}
       >
         <i className="material-icons">category</i>
-        <NodeLabel>some-object-name</NodeLabel>
+        <NodeLabel>{name}</NodeLabel>
       </StyledNode>
     );
   }

dashboard/src/shared/types.tsx

@@ -31,9 +31,11 @@ export interface ChartType {
 }
 
 export interface ResourceType {
+  ID: number,
   Kind: string,
   Name: string,
-  RawYAML: Object
+  RawYAML: Object,
+  Relations: Object
 }
 
 export enum StorageType {