node yaml in graph view

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import yaml from 'js-yaml';
 
 import { kindToIcon } from '../../../../shared/rosettaStone';
-
 import { ResourceType } from '../../../../shared/types';
 import YamlEditor from '../../../../components/YamlEditor';
 

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

@@ -120,24 +120,23 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
   createNodes = (components: ResourceType[]) => {
     return components.map((c: ResourceType) => {
-      let yaml = JSON.stringify(c.RawYAML)
       switch(c.Kind) {
         case "ClusterRoleBinding":
         case "ClusterRole":
         case "RoleBinding":
         case "Role":
-          return { id: c.ID, yaml, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(-1000, 0), y: this.getRandomIntBetweenRange(0, 500), w: 40, h: 40 };
+          return { id: c.ID, RawYAML: c.RawYAML, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(-1000, 0), y: this.getRandomIntBetweenRange(0, 500), w: 40, h: 40 };
         case "Deployment":
         case "StatefulSet":
         case "Pod":
         case "ServiceAccount":
-          return { id: c.ID, yaml, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(0, 1000), y: this.getRandomIntBetweenRange(0, 500), w: 40, h: 40 };
+          return { id: c.ID, RawYAML: c.RawYAML, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(0, 1000), y: this.getRandomIntBetweenRange(0, 500), w: 40, h: 40 };
         case "Service":
         case "Ingress":
         case "ServiceAccount":
-            return { id: c.ID, yaml, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(0, 1000), y: this.getRandomIntBetweenRange(-500, 0), w: 40, h: 40 };
+            return { id: c.ID, RawYAML: c.RawYAML, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(0, 1000), y: this.getRandomIntBetweenRange(-500, 0), w: 40, h: 40 };
         default:
-          return { id: c.ID, yaml, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(-700, 0), y: this.getRandomIntBetweenRange(-500, 0), w: 40, h: 40 };
+          return { id: c.ID, RawYAML: c.RawYAML, name: c.Name, kind: c.Kind, x: this.getRandomIntBetweenRange(-700, 0), y: this.getRandomIntBetweenRange(-500, 0), w: 40, h: 40 };
         }
     });
   }

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

@@ -54,7 +54,7 @@ export default class InfoPanel extends Component<PropsType, StateType> {
           </Div>
           <YamlWrapper>
             <YamlEditor
-              value={'# Placeholder resource YAML'}
+              value={yaml.dump(openedNode.RawYAML)}
               readOnly={true}
               height='100vw'
             />

dashboard/src/shared/types.tsx

@@ -42,7 +42,7 @@ export interface NodeType {
   id: number,
   name: string,
   kind: string,
-  RawYAML?: string,
+  RawYAML?: Object,
   x: number,
   y: number,
   w: number,