integrated edges for graph view

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

@@ -5,28 +5,13 @@ 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 },
-  { id: 1, x: 200, y: 50, w: 40, h: 40 },
-  { id: 2, x: -230, y: -250, w: 40, h: 40 },
-  { id: 3, x: -200, y: 150, w: 40, h: 40 },
-];
-
-const edges = [
-  [0, 1],
-  [0, 2],
-  [0, 3],
-  [1, 2],
-  [1, 3],
-  [2, 3]
-];
-
 const zoomConstant = 0.01;
 const panConstant = 0.8;
 
 type NodeType = {
   id: number,
   name: string,
+  kind: string,
   x: number,
   y: number,
   w: number,
@@ -94,10 +79,25 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     // Suppress trackpad gestures
     this.spaceRef.addEventListener("touchmove", (e: any) => e.preventDefault());
     this.spaceRef.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}
+    let nodes = components.map((c: ResourceType) => {
+      return {id: c.ID, name: c.Name, kind: c.Kind, x:0, y:0, w:40, h:40}
     })
 
+    let edges = [] as EdgeType[]
+    components.map((c: ResourceType) => {
+      c.Relations.ControlRels.map((rel: any) => {
+        if (rel.Source == c.ID) {
+          edges.push({type: "ControlRel", source: rel.Source, target: rel.Target})
+        }
+      })
+      c.Relations.LabelRels.map((rel: any) => {
+        if (rel.Source == c.ID) {
+          edges.push({type: "LabelRel", source: rel.Source, target: rel.Target})
+        }
+      })
+
+      this.setState({edges})
+    })
     this.setState({nodes})
   }
 

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

@@ -1,9 +1,19 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+const kindToIcon: any = {
+  'Deployment': 'category',
+  'Pod': 'fiber_manual_record',
+  'Service': 'alt_route',
+  'Ingress': 'sensor_door',
+  'StatefulSet': 'location_city',
+  'Secret': 'vpn_key',
+}
+
 type NodeType = {
   id: number,
   name: string,
+  kind: string,
   x: number,
   y: number,
   w: number,
@@ -27,8 +37,14 @@ export default class Node extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { x, y, w, h, name } = this.props.node;
+    let { x, y, w, h, name, kind } = this.props.node;
     let { originX, originY, nodeMouseDown, nodeMouseUp, isActive } = this.props;
+
+    let icon = 'tonality';
+    if (Object.keys(kindToIcon).includes(kind)) {
+      icon = kindToIcon[kind]; 
+    }
+
     return (
       <StyledNode
         x={Math.round(originX + x - (w / 2))}
@@ -39,8 +55,8 @@ export default class Node extends Component<PropsType, StateType> {
         onMouseUp={nodeMouseUp}
         isActive={isActive}
       >
-        <i className="material-icons">category</i>
-        <NodeLabel>{name}</NodeLabel>
+        <i className="material-icons">{icon}</i>
+        <NodeLabel>{kind}: {name}</NodeLabel>
       </StyledNode>
     );
   }

dashboard/src/shared/types.tsx

@@ -35,7 +35,7 @@ export interface ResourceType {
   Kind: string,
   Name: string,
   RawYAML: Object,
-  Relations: Object
+  Relations: any
 }
 
 export enum StorageType {

server/api/release_handler.go

@@ -2,7 +2,6 @@ package api
 
 import (
 	"encoding/json"
-	"fmt"
 	"net/http"
 	"net/url"
 	"strconv"
@@ -135,8 +134,6 @@ func (app *App) HandleGetReleaseComponents(w http.ResponseWriter, r *http.Reques
 		return
 	}
 
-	fmt.Println(release.Manifest)
-
 	yamlArr := grapher.ImportMultiDocYAML([]byte(release.Manifest))
 	objects := grapher.ParseObjs(yamlArr)