merged with main redirect

dashboard/package-lock.json

@@ -396,6 +396,11 @@
         "jest-diff": "^24.3.0"
       }
     },
+    "@types/js-yaml": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.12.5.tgz",
+      "integrity": "sha512-JCcp6J0GV66Y4ZMDAQCXot4xprYB+Zfd3meK9+INSJeVZwJmHAW30BBEEkPzXswMXuiyReUGOP3GxrADc9wPww=="
+    },
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
@@ -423,7 +428,8 @@
     "@types/qs": {
       "version": "6.9.5",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
-      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ=="
+      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==",
+      "dev": true
     },
     "@types/react": {
       "version": "16.9.49",
@@ -972,6 +978,14 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
@@ -2490,6 +2504,11 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
     "esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -4128,6 +4147,15 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "js-yaml": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -5294,7 +5322,8 @@
     "qs": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
+      "dev": true
     },
     "querystring": {
       "version": "0.2.0",
@@ -6188,6 +6217,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",

dashboard/package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/js-yaml": "^3.12.5",
     "@types/qs": "^6.9.5",
     "ace-builds": "^1.4.12",
     "axios": "^0.20.0",
     "dotenv": "^8.2.0",
+    "js-yaml": "^3.14.0",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-ace": "^9.1.3",
@@ -26,6 +28,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.12.62",
+    "@types/qs": "^6.9.5",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "@types/react-modal": "^3.10.6",
@@ -34,6 +37,7 @@
     "@types/styled-components": "^5.1.3",
     "file-loader": "^6.1.0",
     "html-webpack-plugin": "^4.5.0",
+    "qs": "^6.9.4",
     "source-map-loader": "^1.1.0",
     "ts-loader": "^8.0.4",
     "typescript": "^4.0.3",

dashboard/src/components/Loading.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import loading from '../assets/loading.gif';
 
 type PropsType = {
+  offset?: string
 };
 
 type StateType = {
@@ -14,7 +15,7 @@ export default class Loading extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledLoading>
+      <StyledLoading offset={this.props.offset}>
         <Spinner src={loading} />
       </StyledLoading>
     );
@@ -31,4 +32,5 @@ const StyledLoading = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: ${(props: { offset?: string }) => props.offset};
 `;

dashboard/src/components/TabSelector.tsx

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+export interface selectOption {
+  value: string,
+  label: string
+}
+
+type PropsType = {
+  currentTab: string,
+  options: selectOption[],
+  setCurrentTab: (value: string) => void,
+  tabWidth?: string  
+};
+
+type StateType = {
+};
+
+export default class TabSelector extends Component<PropsType, StateType> {
+
+  renderLine = (tab: string): JSX.Element | undefined => {
+    if (this.props.currentTab === tab) {
+      return <Highlight />
+    }
+  };
+
+  handleTabClick = (value: string) => {
+    this.props.setCurrentTab(value);
+  }
+
+  renderTabList = () => {
+    return (
+      this.props.options.map((option: selectOption, i: number) => {
+        return (
+          <Tab
+            key={i}
+            onClick={() => this.handleTabClick(option.value)}
+            tabWidth={this.props.tabWidth}
+          >
+            {option.label}
+            {this.renderLine(option.value)}
+          </Tab>
+        );
+      })
+    );
+  }
+
+  render() {
+    return (
+      <StyledTabSelector>
+        {this.renderTabList()}
+      </StyledTabSelector>
+    );
+  }
+}
+
+const Highlight = styled.div`
+  width: 80%;
+  height: 1px;
+  margin-top: 5px;
+  background: #949EFFcc;
+
+  opacity: 0;
+  animation: lineEnter 0.5s 0s;
+  animation-fill-mode: forwards;
+  @keyframes lineEnter {
+    from { width: 0%; opacity: 0; }
+    to   { width: 80%; opacity: 1; }
+  }
+`; 
+
+const Tab = styled.div`
+  height: 30px;
+  width: ${(props: { tabWidth: string }) => props.tabWidth ? props.tabWidth : ''};
+  padding: 0 10px;
+  margin-right: 12px;
+  display: flex;
+  font-family: 'Work Sans', sans-serif;
+  font-size: 13px;
+  user-select: none;
+  color: #949effcc;
+  flex-direction: column;
+  padding-top: 7px;
+  align-items: center;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: 5px;
+  
+  :hover {
+    background: #949EFF22;
+  }
+`;
+
+const StyledTabSelector = styled.div`
+  display: flex;
+  align-items: center;
+`;

dashboard/src/components/YamlEditor.tsx

@@ -8,6 +8,8 @@ import 'ace-builds/src-noconflict/theme-terminal';
 type PropsType = {
   value: string,
   onChange: (e: any) => void,
+  height?: string,
+  border?: boolean
 }
 
 type StateType = {
@@ -40,7 +42,10 @@ class YamlEditor extends Component<PropsType, StateType> {
   render() {
     return (
       <Holder>
-        <Editor onSubmit={this.handleSubmit}>
+        <Editor
+          onSubmit={this.handleSubmit}
+          border={this.props.border}
+        >
           <AceEditor
             mode='yaml'
             value={this.props.value}
@@ -48,8 +53,8 @@ class YamlEditor extends Component<PropsType, StateType> {
             onChange={this.props.onChange}
             name='codeEditor'
             editorProps={{ $blockScrolling: true }}
+            height={this.props.height}
             width='100%'
-            height='295px'
             style={{ borderRadius: '5px' }}
           />
         </Editor>
@@ -61,15 +66,18 @@ class YamlEditor extends Component<PropsType, StateType> {
 export default YamlEditor;
 
 const Editor = styled.form`
-  margin-top: 0px;
-  margin-bottom: 12px;
-  width: calc(100% - 0px);
-  border-radius: 5px;
-  border: 1px solid #ffffff22;
+  border-radius: ${(props: { border: boolean }) => props.border ? '5px' : ''};
+  border: ${(props: { border: boolean }) => props.border ? '1px solid #ffffff22' : ''};
 `;
 
 const Holder = styled.div`
   .ace_scrollbar {
     display: none;
   }
+  .ace_editor, .ace_editor * {
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+    letter-spacing: 0 !important;
+  }
 `;

dashboard/src/main/Main.tsx

@@ -120,6 +120,7 @@ const GlobalStyle = createGlobalStyle`
   }
   body {
     background: #202227;
+    overscroll-behavior-x: none;
   }
 `;
 
@@ -131,4 +132,4 @@ const StyledMain = styled.div`
   left: 0;
   background: #202227;
   color: white;
-`;
+`;

dashboard/src/main/home/Home.tsx

@@ -14,9 +14,13 @@ type PropsType = {
 };
 
 type StateType = {
+  forceSidebar: boolean
 };
 
 export default class Home extends Component<PropsType, StateType> {
+  state = {
+    forceSidebar: true
+  }
 
   renderDashboard = () => {
     let { currentCluster, setCurrentModal, setCurrentModalData } = this.context;
@@ -41,7 +45,14 @@ export default class Home extends Component<PropsType, StateType> {
       return <Loading />
     }
 
-    return <DashboardWrapper><Dashboard /></DashboardWrapper>
+    return (
+      <DashboardWrapper>
+        <Dashboard
+          currentCluster={currentCluster}
+          setSidebar={(x: boolean) => this.setState({ forceSidebar: x })}
+        />
+      </DashboardWrapper>
+    );
   }
 
   render() {
@@ -56,7 +67,7 @@ export default class Home extends Component<PropsType, StateType> {
           <ClusterConfigModal />
         </ReactModal>
 
-        <Sidebar logOut={this.props.logOut} />
+        <Sidebar logOut={this.props.logOut} forceSidebar={this.state.forceSidebar} />
         <StyledDashboard>
           {this.renderDashboard()}
         </StyledDashboard>

dashboard/src/main/home/Toolbar.tsx

@@ -4,7 +4,6 @@ import ReactModal from 'react-modal';
 
 import { Context } from '../../shared/Context';
 
-import Sidebar from './sidebar/Sidebar';
 import ClusterConfigModal from './modals/ClusterConfigModal';
 
 type PropsType = {
@@ -27,7 +26,6 @@ export default class Home extends Component<PropsType, StateType> {
           <ClusterConfigModal />
         </ReactModal>
 
-        <Sidebar logOut={this.props.logOut} />
         <DummyDashboard>
           🏗️🏗️🏗️🏗️🏗️
         </DummyDashboard>

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import gradient from '../../../assets/gradient.jpg';
 
 import { Context } from '../../../shared/Context';
-import { ChartType } from '../../../shared/types';
+import { ChartType, StorageType } from '../../../shared/types';
 import api from '../../../shared/api';
 
 import ChartList from './chart/ChartList';
@@ -11,6 +11,8 @@ import NamespaceSelector from './NamespaceSelector';
 import ExpandedChart from './expanded-chart/ExpandedChart';
 
 type PropsType = {
+  currentCluster: string,
+  setSidebar: (x: boolean) => void
 };
 
 type StateType = {
@@ -24,13 +26,22 @@ export default class Dashboard extends Component<PropsType, StateType> {
     currentChart: null as (ChartType | null)
   }
 
+  componentDidUpdate(prevProps: PropsType) {
+
+    // Reset namespace filter and close expanded chart on cluster change
+    if (prevProps.currentCluster !== this.props.currentCluster) {
+      this.setState({ namespace: '', currentChart: null });
+    }
+  }
+
   // Allows rollback to update the top-level chart
   refreshChart = () => {
-    let { currentCluster } = this.context;
+    let { currentCluster } = this.props;
+    console.log(currentCluster)
     api.getChart('<token>', {
       namespace: this.state.namespace,
       context: currentCluster,
-      storage: 'secret'
+      storage: StorageType.Secret
     }, { name: this.state.currentChart.name, revision: 0 }, (err: any, res: any) => {
       if (err) {
         console.log(err)
@@ -41,7 +52,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    let { currentCluster } = this.context;
+    let { currentCluster, setSidebar } = this.props;
 
     if (this.state.currentChart) {
       return (
@@ -49,6 +60,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
           currentChart={this.state.currentChart}
           refreshChart={this.refreshChart}
           setCurrentChart={(x: ChartType | null) => this.setState({ currentChart: x })}
+          setSidebar={setSidebar}
         />
       );
     }

dashboard/src/main/home/dashboard/chart/ChartList.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Context } from '../../../../shared/Context';
 import api from '../../../../shared/api';
-import { ChartType } from '../../../../shared/types';
+import { ChartType, StorageType } from '../../../../shared/types';
 
 import Chart from './Chart';
 import Loading from '../../../../components/Loading';
@@ -35,12 +35,12 @@ export default class ChartList extends Component<PropsType, StateType> {
       if (this.state.loading) {
         this.setState({ loading: false, error: true });
       }
-    }, 1000);
+    }, 2000);
 
     api.getCharts('<token>', {
       namespace: this.props.namespace,
       context: currentCluster,
-      storage: 'secret',
+      storage: StorageType.Secret,
       limit: 20,
       skip: 0,
       byDate: false,

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

@@ -2,24 +2,56 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import close from '../../../../assets/close.png';
 
-import { ChartType } from '../../../../shared/types';
+import { ResourceType, ChartType, StorageType } from '../../../../shared/types';
 import { Context } from '../../../../shared/Context';
+import api from '../../../../shared/api';
 
+import TabSelector from '../../../../components/TabSelector';
 import RevisionSection from './RevisionSection';
+import ValuesYaml from './ValuesYaml';
+import GraphSection from './GraphSection';
+import ListSection from './ListSection';
 
 type PropsType = {
   currentChart: ChartType,
   setCurrentChart: (x: ChartType | null) => void,
-  refreshChart: () => void
+  refreshChart: () => void,
+  setSidebar: (x: boolean) => void
 };
 
 type StateType = {
-  showRevisions: boolean
+  showRevisions: boolean,
+  currentTab: string,
+  components: ResourceType[]
 };
 
+const tabOptions = [
+  { label: 'Chart Overview', value: 'graph' },
+  { label: 'Search Chart', value: 'list' },
+  { label: 'Values Editor', value: 'values' }
+]
+
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
-    showRevisions: false
+    showRevisions: false,
+    currentTab: 'graph',
+    components: [] as ResourceType[]
+  }
+
+  componentDidMount() {
+    let { currentCluster, setCurrentError } = this.context;
+    let { currentChart } = this.props;
+    api.getChartComponents('<token>', {
+      namespace: currentChart.namespace,
+      context: currentCluster,
+      storage: StorageType.Secret
+    }, { name: currentChart.name, revision: 0 }, (err: any, res: any) => {
+      if (err) {
+        console.log(err)
+      } else {
+        this.setState({ components: res.data });
+      }
+    });
   }
 
   renderIcon = () => {
@@ -39,75 +71,119 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     return `${time} on ${date}`;
   }
 
+  renderTabContents = () => {
+    let { currentChart, refreshChart, setSidebar} = this.props;
+
+    if (this.state.currentTab === 'graph') {
+      return (
+        <GraphSection
+          components={this.state.components}
+          setSidebar={setSidebar}
+        />
+      );
+    } else if (this.state.currentTab === 'list') {
+      return (
+        <ListSection
+          currentChart={currentChart}
+          components={this.state.components}
+        />
+      );
+    }
+
+    return (
+      <ValuesYaml
+        currentChart={currentChart}
+        refreshChart={refreshChart}
+      />
+    );
+  }
+
   render() {
     let { currentChart, setCurrentChart, refreshChart } = this.props;
     let chart = currentChart;
 
     return ( 
-      <StyledExpandedChart>
-        <TitleSection>
-          <Title>
-            <IconWrapper>
-              {this.renderIcon()}
-            </IconWrapper>
-            {chart.name}
-          </Title>
-          <InfoWrapper>
-            <StatusIndicator>
-              <StatusColor status={chart.info.status} />
-              {chart.info.status}
-            </StatusIndicator>
-
-            <LastDeployed>
-              <Dot>•</Dot>Last deployed {this.readableDate(chart.info.last_deployed)}
-            </LastDeployed>
-          </InfoWrapper>
-
-          <TagWrapper>
-            Namespace
-            <NamespaceTag>
-              {chart.namespace}
-            </NamespaceTag>
-          </TagWrapper>
-        </TitleSection>
-
-        <CloseButton onClick={() => setCurrentChart(null)}>
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <RevisionSection
-          showRevisions={this.state.showRevisions}
-          toggleShowRevisions={() => this.setState({ showRevisions: !this.state.showRevisions })}
-          chart={chart}
-          refreshChart={refreshChart}
-        />
-
-        <ChartSection>
-          <Placeholder>(Under construction)</Placeholder>
-        </ChartSection>
-      </StyledExpandedChart>
+      <div>
+        <CloseOverlay onClick={() => setCurrentChart(null)}/>
+        <StyledExpandedChart>
+          <HeaderWrapper>
+            <TitleSection>
+              <Title>
+                <IconWrapper>
+                  {this.renderIcon()}
+                </IconWrapper>
+                {chart.name}
+              </Title>
+              <InfoWrapper>
+                <StatusIndicator>
+                  <StatusColor status={chart.info.status} />
+                  {chart.info.status}
+                </StatusIndicator>
+
+                <LastDeployed>
+                  <Dot>•</Dot>Last deployed {this.readableDate(chart.info.last_deployed)}
+                </LastDeployed>
+              </InfoWrapper>
+
+              <TagWrapper>
+                Namespace
+              <NamespaceTag>
+                  {chart.namespace}
+                </NamespaceTag>
+              </TagWrapper>
+            </TitleSection>
+
+            <CloseButton onClick={() => setCurrentChart(null)}>
+              <CloseButtonImg src={close} />
+            </CloseButton>
+
+            <RevisionSection
+              showRevisions={this.state.showRevisions}
+              toggleShowRevisions={() => this.setState({ showRevisions: !this.state.showRevisions })}
+              chart={chart}
+              refreshChart={refreshChart}
+            />
+
+            <TabSelector
+              options={tabOptions}
+              currentTab={this.state.currentTab}
+              setCurrentTab={(value: string) => this.setState({ currentTab: value })}
+              tabWidth='120px'
+            />
+          </HeaderWrapper>
+          <ContentSection>
+            {this.renderTabContents()}
+          </ContentSection>
+        </StyledExpandedChart>
+      </div>
     );
   }
 }
 
 ExpandedChart.contextType = Context;
 
-const Placeholder = styled.div`
-  color: #ffffff66;
-  padding-bottom: 30px;
+const CloseOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+const HeaderWrapper = styled.div`
+  margin-bottom: 20px;
 `;
 
-const ChartSection = styled.div`
+const ContentSection = styled.div`
   display: flex;
-  margin-top: 20px;
   border-radius: 5px;
   flex: 1;
   width: 100%;
-  background: #ffffff11;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 13px;
+  overflow-y: auto;
 `;
 
 const StatusColor = styled.div`
@@ -152,13 +228,14 @@ const TagWrapper = styled.div`
   border: 1px solid #ffffff44;
   border-radius: 3px;
   padding-left: 5px;
+  background: #26282E;
 `;
 
 const NamespaceTag = styled.div`
   height: 20px;
   margin-left: 6px;
   color: #aaaabb;
-  background: #ffffff22;
+  background: #43454A;
   border-radius: 3px;
   font-size: 12px;
   display: flex;

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

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { Context } from '../../../../shared/Context';
+import { ResourceType } from '../../../../shared/types';
+
+import GraphDisplay from './graph/GraphDisplay';
+import Loading from '../../../../components/Loading';
+
+type PropsType = {
+  components: ResourceType[],
+  setSidebar: (x: boolean) => void
+};
+
+type StateType = {
+  isExpanded: boolean
+};
+
+export default class GraphSection extends Component<PropsType, StateType> {
+  state = {
+    isExpanded: false
+  }
+
+  renderContents = () => {
+    if (this.props.components && this.props.components.length > 0) {
+      return (
+        <GraphDisplay
+          setSidebar={this.props.setSidebar}
+          components={this.props.components}
+          isExpanded={this.state.isExpanded}
+        />
+      );
+    }
+
+    return <Loading offset='-30px' />;
+  }
+
+  render() {
+    return (
+      <StyledGraphSection>
+        {this.renderContents()}
+      </StyledGraphSection>
+    );
+  }
+}
+
+GraphSection.contextType = Context;
+
+const StyledGraphSection = styled.div`
+  width: 100%;
+  height: 100%;
+  background: #ffffff11;
+`;

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

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import api from '../../../../shared/api';
+
+import { Context } from '../../../../shared/Context';
+import { ResourceType, StorageType, ChartType } from '../../../../shared/types';
+
+import ResourceItem from './ResourceItem';
+import Loading from '../../../../components/Loading';
+
+type PropsType = {
+  currentChart: ChartType,
+  components: ResourceType[]
+};
+
+type StateType = {
+  showKindLabels: boolean
+};
+
+export default class ListSection extends Component<PropsType, StateType> {
+  state = {
+    showKindLabels: true
+  }
+
+  renderResourceList = () => {
+    return this.props.components.map((resource: ResourceType, i: number) => {
+      return (
+        <ResourceItem
+          key={i}
+          resource={resource}
+          toggleKindLabels={() => this.setState({ showKindLabels: !this.state.showKindLabels })}
+          showKindLabels={this.state.showKindLabels}
+        />
+      );
+    });
+  }
+
+  renderContents = () => {
+    if (this.props.components && this.props.components.length > 0) {
+      return (
+        <ResourceList>
+          {this.renderResourceList()}
+        </ResourceList>
+      );
+    }
+
+    return <Loading offset='-30px' />;
+  }
+
+  render() {
+    return (
+      <StyledListSection>
+        {this.renderContents()}
+      </StyledListSection>
+    );
+  }
+}
+
+ListSection.contextType = Context;
+
+const ResourceList = styled.div`
+  width: 100%;
+  overflow-y: auto;
+  padding-bottom: 150px;
+`;
+
+const StyledListSection = styled.div`
+  width: 100%;
+  height: 100%;
+  background: #ffffff11;
+  display: flex;
+  position: relative;
+`;

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

@@ -0,0 +1,163 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { kindToIcon } from '../../../../shared/rosettaStone';
+
+import { ResourceType } from '../../../../shared/types';
+import YamlEditor from '../../../../components/YamlEditor';
+
+
+type PropsType = {
+  resource: ResourceType,
+  toggleKindLabels: () => void,
+  showKindLabels: boolean
+};
+
+type StateType = {
+  expanded: boolean,
+  RawYAML: string
+};
+
+// A single resource block in the expanded chart list view
+export default class ResourceItem extends Component<PropsType, StateType> {
+  state = {
+    expanded: false,
+    RawYAML: JSON.stringify(this.props.resource.RawYAML)
+  }
+
+  renderIcon = (kind: string) => {
+
+    let icon = 'tonality';
+    if (Object.keys(kindToIcon).includes(kind)) {
+      icon = kindToIcon[kind]; 
+    }
+    
+    return (
+      <IconWrapper>
+        <i className="material-icons">{icon}</i>
+      </IconWrapper>
+    );
+  }
+
+  renderExpanded = () => {
+    if (this.state.expanded) {
+      return (
+        <ExpandWrapper>
+          <YamlEditor
+            value={this.state.RawYAML}
+            onChange={(e: any) => this.setState({ RawYAML: e })}
+            height='300px'
+          />
+        </ExpandWrapper>
+      );
+    }
+  }
+
+  render() {
+    let { resource, showKindLabels, toggleKindLabels } = this.props;
+    return (
+      <StyledResourceItem>
+        <ResourceHeader
+          expanded={this.state.expanded}
+          onClick={() => this.setState({ expanded: !this.state.expanded })}
+        >
+          <i className="material-icons">arrow_right</i>
+
+          <ClickWrapper onClick={toggleKindLabels}>
+            {this.renderIcon(resource.Kind)}
+            {showKindLabels ? `${resource.Kind}` : null}
+          </ClickWrapper>
+
+          <ResourceName
+            showKindLabels={showKindLabels}
+          >
+            {resource.Name}
+          </ResourceName>
+        </ResourceHeader>
+        {this.renderExpanded()}
+      </StyledResourceItem>
+    );
+  }
+}
+
+const ExpandWrapper = styled.div`
+  padding: 12px;
+  animation: expandResource 0.3s;
+  animation-timing-function: ease-out;
+  overflow: hidden;
+  @keyframes expandResource {
+    from { height: 0px }
+    to { height: 300px }
+  }
+`;
+
+const StyledResourceItem = styled.div`
+  border-bottom: 1px solid #606166;
+`;
+
+const BigPlaceholder = styled.div`
+  height: 200px;
+  width: 100%;
+  background: blue;
+`;
+
+const ClickWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ResourceName = styled.div`
+  color: #ffffff;
+  margin-left: ${(props: { showKindLabels: boolean }) => props.showKindLabels ? '10px' : ''};
+  text-transform: none;
+`;
+
+const IconWrapper = styled.div`
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > i {
+    font-size: 16px;
+    color: #ffffff;
+    margin-right: 14px;
+  }
+`;
+
+const ResourceHeader = styled.div`
+  width: 100%;
+  height: 60px;
+  display: flex;
+  color: #ffffff66;
+  align-items: center;
+  padding: 15px 13px;
+  text-transform: capitalize;
+  cursor: pointer;
+  background: ${(props: { expanded: boolean }) => props.expanded ? '#ffffff11' : ''};
+  :hover {
+    background: #ffffff18;
+
+    > i {
+      background: #ffffff22;
+    }
+  }
+
+  > i {
+    margin-right: 13px;
+    font-size: 20px;
+    color: #ffffff66;
+    cursor: pointer;
+    border-radius: 20px;
+    background: ${(props: { expanded: boolean }) => props.expanded ? '#ffffff18' : ''};
+    transform: ${(props: { expanded: boolean }) => props.expanded ? 'rotate(180deg)' : ''};
+    animation: ${(props: { expanded: boolean }) => props.expanded ? 'quarterTurn 0.3s' : ''};
+    animation-fill-mode: forwards;
+
+    @keyframes quarterTurn {
+      from { transform: rotate(0deg) }
+      to { transform: rotate(90deg) }
+    }
+  }
+`;

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

@@ -4,7 +4,7 @@ import loading from '../../../../assets/loading.gif';
 
 import api from '../../../../shared/api';
 import { Context } from '../../../../shared/Context';
-import { ChartType } from '../../../../shared/types';
+import { ChartType, StorageType } from '../../../../shared/types';
 import Chart from '../chart/Chart';
 
 type PropsType = {
@@ -33,7 +33,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     api.getRevisions('<token>', {
       namespace: chart.namespace,
       context: this.context.currentCluster,
-      storage: 'secret'
+      storage: StorageType.Secret
     }, { name: chart.name }, (err: any, res: any) => {
       if (err) {
         console.log(err)
@@ -47,6 +47,13 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     this.refreshHistory();
   }
 
+  // Handle update of values.yaml
+  componentDidUpdate(prevProps: PropsType) {
+    if (this.props.chart !== prevProps.chart) {
+      this.refreshHistory();
+    }
+  }
+
   readableDate = (s: string) => {
     let ts = new Date(s);
     let date = ts.toLocaleDateString();
@@ -55,19 +62,22 @@ export default class RevisionSection extends Component<PropsType, StateType> {
   }
 
   handleRollback = () => {
+    let { setCurrentError, currentCluster } = this.context;
+
     let revisionNumber = this.state.rollbackRevision;
     this.setState({ loading: true, rollbackRevision: null });
 
     api.rollbackChart('<token>', {
       namespace: this.props.chart.namespace,
-      context: this.context.currentCluster,
-      storage: 'secret'
-    }, {
-      name: this.props.chart.name,
+      context: currentCluster,
+      storage: StorageType.Secret,
       revision: revisionNumber
+    }, {
+      name: this.props.chart.name
     }, (err: any, res: any) => {
       if (err) {
-        console.log(err)
+        setCurrentError(err.response.data.errors[0]);
+        this.setState({ loading: false });
       } else {
         this.setState({ loading: false });
         this.props.refreshChart();
@@ -301,6 +311,7 @@ const RevisionsTable = styled.table`
   margin-top: 5px;
   padding-left: 32px;
   padding-bottom: 20px;
+  min-width: 500px;
 `;
 
 const Revision = styled.div`
@@ -339,7 +350,7 @@ const StyledRevisionSection = styled.div`
   width: 100%;
   max-height: ${(props: { showRevisions: boolean }) => props.showRevisions ? '255px' : '40px'};
   background: #ffffff11;
-  margin-top: 25px;
+  margin: 25px 0px;
   overflow: hidden;
   border-radius: 5px;
   animation: ${(props: { showRevisions: boolean }) => props.showRevisions ? 'expandRevisions 0.3s' : ''};

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

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import yaml from 'js-yaml';
+
+import { ChartType, StorageType } from '../../../../shared/types';
+import api from '../../../../shared/api';
+import { Context } from '../../../../shared/Context';
+
+import YamlEditor from '../../../../components/YamlEditor';
+import SaveButton from '../../../../components/SaveButton';
+
+type PropsType = {
+  currentChart: ChartType
+  refreshChart: () => void
+};
+
+type StateType = {
+  values: string,
+  saveValuesStatus: string | null
+};
+
+export default class ValuesYaml extends Component<PropsType, StateType> {
+  state = {
+    values: '',
+    saveValuesStatus: null as (string | null)
+  }
+
+  updateValues() {
+    let values = yaml.dump(this.props.currentChart.config);
+    this.setState({ values });
+  }
+
+  componentDidMount() {
+    this.updateValues();
+  }
+
+  componentDidUpdate(prevProps: PropsType) {
+    if (this.props.currentChart !== prevProps.currentChart) {
+      this.updateValues();
+    }
+  }
+
+  handleSaveValues = () => {
+    let { currentCluster, setCurrentError } = this.context;
+    this.setState({ saveValuesStatus: 'loading' });
+
+    api.upgradeChartValues('<token>', {
+      namespace: this.props.currentChart.namespace,
+      context: currentCluster,
+      storage: StorageType.Secret,
+      values: this.state.values
+    }, { name: this.props.currentChart.name }, (err: any, res: any) => {
+      if (err) {
+        setCurrentError(err.response.data.errors[0]);
+        this.setState({ saveValuesStatus: 'error ' });
+      } else {
+        this.setState({ saveValuesStatus: 'successful' });
+        this.props.refreshChart();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <StyledValuesYaml>
+        <Wrapper>
+          <YamlEditor
+            value={this.state.values}
+            onChange={(e: any) => this.setState({ values: e })}
+          />
+        </Wrapper>
+        <SaveButton
+          text='Update Values'
+          onClick={this.handleSaveValues}
+          status={this.state.saveValuesStatus}
+        />
+      </StyledValuesYaml>
+    );
+  }
+}
+
+ValuesYaml.contextType = Context;
+
+const Wrapper = styled.div`
+  overflow: auto;
+  height: calc(100% - 60px);
+  border-radius: 5px;
+  border: 1px solid #ffffff22;
+`;
+
+const StyledValuesYaml = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;

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

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { edgeColors } from '../../../../../shared/rosettaStone';
+import { EdgeType } from '../../../../../shared/types';
+
+const thickness = 12;
+
+type PropsType = {
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  originX: number,
+  originY: number,
+  edge: EdgeType,
+  setCurrentEdge: (edge: EdgeType) => void
+};
+
+type StateType = {
+  showArrowHead: boolean
+};
+
+export default class Edge extends Component<PropsType, StateType> {
+  state = {
+    showArrowHead: true
+  }
+
+  render() {
+    let { originX, originY, edge, setCurrentEdge } = this.props;
+    let x1 = Math.round(originX + this.props.x1);
+    let x2 = Math.round(originX + this.props.x2);
+    let y1 = Math.round(originY - this.props.y1);
+    let y2 = Math.round(originY - this.props.y2);
+    
+    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
+    // center
+    var cx = ((x1 + x2) / 2) - (length / 2);
+    var cy = ((y1 + y2) / 2) - (thickness / 2);
+    // angle
+    var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
+
+    return (
+      <StyledEdge
+        length={length}
+        cx={cx}
+        cy={cy}
+        angle={angle}
+        onMouseEnter={() => setCurrentEdge(edge)}
+        onMouseLeave={() => setCurrentEdge(null)}
+        type={edge.type}
+      >
+        {this.state.showArrowHead ? <ArrowHead color={edgeColors[edge.type]} /> : null}
+        <VisibleLine color={edgeColors[edge.type]} />
+      </StyledEdge>
+    );
+  }
+}
+
+const ArrowHead = styled.div`
+  width: 0; 
+  height: 0;
+  margin-left: 20px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent; 
+  border-right: 10px solid ${(props: { color: string }) => props.color ? props.color : '#ffffff66'};
+`;
+
+const VisibleLine = styled.section`
+  height: 2px;
+  width: 100%;
+  background: ${(props: { color: string }) => props.color ? props.color : '#ffffff66'};
+`;
+
+const StyledEdge: any = styled.div.attrs((props: any) => ({
+  style: {
+    top: props.cy + 'px',
+    left: props.cx + 'px',
+    transform: 'rotate(' + props.angle + 'deg)',
+    width: props.length + 'px'
+  },
+}))`
+  position: absolute;
+  height: ${thickness}px;
+  cursor: pointer;
+  z-index: ${(props: { type: string, color: string }) => props.type == 'ControlRel' ? '1' : '0'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    > section {
+      box-shadow: 0 0 10px #ffffff;
+    }
+  }
+`;

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

@@ -0,0 +1,438 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { ResourceType, NodeType, EdgeType } from '../../../../../shared/types';
+
+import Node from './Node';
+import Edge from './Edge';
+import InfoPanel from './InfoPanel';
+import SelectRegion from './SelectRegion';
+
+const zoomConstant = 0.01;
+const panConstant = 0.8;
+
+type PropsType = {
+  components: ResourceType[],
+  isExpanded: boolean,
+  setSidebar: (x: boolean) => void
+};
+
+type StateType = {
+  nodes: NodeType[],
+  edges: EdgeType[],
+  activeIds: number[], // IDs of all currently selected nodes
+  originX: number | null, 
+  originY: number | null,
+  cursorX: number | null,
+  cursorY: number | null,
+  deltaX: number | null, // Dragging bg x-displacement
+  deltaY: number | null, // Dragging y-displacement
+  panX: number | null, // Two-finger pan x-displacement 
+  panY: number | null, // Two-finger pan y-displacement
+  anchorX: number | null, // Initial cursorX during region select
+  anchorY: number | null, // Initial cursorY during region select
+  dragBg: boolean, // Boolean to track if all nodes should move with mouse (bg drag)
+  preventBgDrag: boolean, // Prevents bg drag when moving selected with mouse down
+  relocateAllowed: boolean, // Suppresses movement of selected when drawing select region
+  scale: number,
+  showKindLabels: boolean,
+  currentNode: NodeType | null,
+  currentEdge: EdgeType | null,
+  isExpanded: boolean
+};
+
+// TODO: region-based unselect, shift-click, multi-region
+export default class GraphDisplay extends Component<PropsType, StateType> {
+  state = {
+    nodes: [] as NodeType[],
+    edges: [] as EdgeType[],
+    activeIds: [] as number[],
+    originX: null as (number | null),
+    originY: null as (number | null),
+    cursorX: null as (number | null),
+    cursorY: null as (number | null),
+    deltaX: null as (number | null),
+    deltaY: null as (number | null),
+    panX: null as (number | null),
+    panY: null as (number | null),
+    anchorX: null as (number | null),
+    anchorY: null as (number | null),
+    dragBg: false,
+    preventBgDrag: false,
+    scale: 0.5,
+    showKindLabels: true,
+    currentNode: null as (NodeType | null),
+    currentEdge: null as (EdgeType | null),
+    relocateAllowed: false,
+    isExpanded: false
+  }
+
+  spaceRef: any = React.createRef();
+
+  componentDidMount() {
+    let { components } = this.props;
+
+    // Initialize origin
+    let height = this.spaceRef.offsetHeight;
+    let width = this.spaceRef.offsetWidth;
+    this.setState({
+      originX: Math.round(width / 2),
+      originY: Math.round(height / 2)
+    });
+
+    // 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, kind: c.Kind, x: 0, y: 0, w: 40, h: 40 };
+    });
+
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+
+    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 });
+  }
+
+  componentWillUnmount() {
+    this.spaceRef.removeEventListener("touchmove", (e: any) => e.preventDefault());
+    this.spaceRef.removeEventListener("mousewheel", (e: any) => e.preventDefault());
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
+  }
+
+  // Handle shift key for multi-select
+  handleKeyDown = (e: any) => {
+    if (e.key === 'Shift') {
+      this.setState({
+        anchorX: this.state.cursorX,
+        anchorY: this.state.cursorY,
+        relocateAllowed: false
+      });
+    }
+  }
+
+  handleKeyUp = (e: any) => {
+    if (e.key === 'Shift') {
+      this.setState({ anchorX: null, anchorY: null });
+    }
+  }
+
+  // Push to activeIds if not already present
+  handleClickNode = (clickedId: number) => {
+    let holding = this.state.activeIds;
+    if (!holding.includes(clickedId)) {
+      holding.push(clickedId);
+    }
+
+    // Track and store offset to grab node from anywhere (must store)
+    this.state.nodes.forEach((node: NodeType) => {
+      if (this.state.activeIds.includes(node.id)) {
+        if (!node.toCursorX && !node.toCursorY) {
+          node.toCursorX = node.x - this.state.cursorX;
+          node.toCursorY = node.y - this.state.cursorY;
+        } else {
+          node.toCursorX = 0;
+          node.toCursorY = 0;
+        }
+      }
+    });
+
+    this.setState({ activeIds: holding, preventBgDrag: true, relocateAllowed: true });
+  }
+
+  handleReleaseNode = () => {
+    this.setState({ activeIds: [], preventBgDrag: false });
+
+    // Only update dot position state on release for all active
+    let { activeIds, nodes} = this.state;
+    for (var i=0; i < activeIds.length; i++) {
+      var a = activeIds[i];
+      nodes[a].toCursorX = 0;
+      nodes[a].toCursorY = 0;
+    }
+  }
+
+  handleMouseMove = (e: any) => {
+    let { originX, originY, dragBg, preventBgDrag, scale, panX, panY, anchorX, anchorY, nodes, activeIds, relocateAllowed } = this.state;
+    
+    // Suppress navigation gestures
+    if (scale !== 1 || panX !== 0 || panY !== 0) {
+      this.setState({ scale: 1, panX: 0, panY: 0 });
+    }
+
+    // Update origin-centered cursor coordinates
+    let bounds = this.spaceRef.getBoundingClientRect();
+    let cursorX = e.clientX - bounds.left - originX;
+    let cursorY = -(e.clientY - bounds.top - originY);
+    this.setState({ cursorX, cursorY });
+
+    // Track delta for dragging background
+    if (dragBg && !preventBgDrag) {
+      this.setState({ deltaX: e.movementX, deltaY: e.movementY });
+    }
+
+    // Check if within select region 
+    if (anchorX && anchorY) {
+      nodes.forEach((node: NodeType) => {
+        if (node.x > Math.min(anchorX, cursorX) && node.x < Math.max(anchorX, cursorX)
+          && node.y > Math.min(anchorY, cursorY) && node.y < Math.max(anchorY, cursorY)
+        ) {
+          activeIds.push(node.id);
+          this.setState({ activeIds });
+        }
+      });
+    } 
+  }
+
+  // Handle pan XOR zoom (two-finger gestures count as onWheel)
+  handleWheel = (e: any) => {
+
+    // Pinch/zoom sets e.ctrlKey to true
+    if (e.ctrlKey) {
+      var scale = 1;
+      scale -= e.deltaY * zoomConstant;
+      this.setState({ scale, panX: 0, panY: 0 });
+    } else {
+      this.setState({ panX: e.deltaX, panY: e.deltaY, scale: 1 });
+    }
+  };
+
+  toggleExpanded = () => {
+    this.setState({ isExpanded: !this.state.isExpanded }, () => {
+      this.props.setSidebar(!this.state.isExpanded);
+
+      // Update origin on expand/collapse
+      let height = this.spaceRef.offsetHeight;
+      let width = this.spaceRef.offsetWidth;
+      let nudge = 0;
+      if (!this.state.isExpanded) {
+        nudge = 100;
+      }
+      this.setState({
+        originX: Math.round(width / 2) - nudge,
+        originY: Math.round(height / 2)
+      });  
+    });
+  }
+
+  // Pass origin to node for offset
+  renderNodes = () => {
+    let { activeIds, originX, originY, cursorX, cursorY, scale, panX, panY, anchorX, anchorY, relocateAllowed } = this.state;
+
+    return this.state.nodes.map((node: NodeType, i: number) => {
+
+      // Update position if not highlighting and active
+      if (activeIds.includes(node.id) && relocateAllowed && !anchorX && !anchorY) {
+        node.x = cursorX + node.toCursorX;
+        node.y = cursorY + node.toCursorY;
+      }
+
+      // Apply movement from dragging background
+      if (this.state.dragBg && !this.state.preventBgDrag) {
+        node.x += this.state.deltaX;
+        node.y -= this.state.deltaY;
+      }
+
+      // Apply cursor-centered zoom
+      if (this.state.scale !== 1) {
+        node.x = cursorX + scale * (node.x - cursorX);
+        node.y = cursorY + scale * (node.y - cursorY);
+      }
+
+      // Apply pan 
+      if (this.state.panX !== 0 || this.state.panY !== 0) {
+        node.x -= panConstant * panX;
+        node.y += panConstant * panY;
+      }
+      
+      return (
+        <Node
+          key={i}
+          node={node}
+          originX={originX}
+          originY={originY}
+          nodeMouseDown={() => this.handleClickNode(node.id)}
+          nodeMouseUp={this.handleReleaseNode}
+          isActive={activeIds.includes(node.id)}
+          showKindLabels={this.state.showKindLabels}
+          setCurrentNode={(node: NodeType) => this.setState({ currentNode: node })}
+        />
+      );
+    });
+  }
+
+  renderEdges = () => {
+    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.source].x}
+          y1={this.state.nodes[edge.source].y}
+          x2={this.state.nodes[edge.target].x}
+          y2={this.state.nodes[edge.target].y}
+          edge={edge}
+          setCurrentEdge={(edge: EdgeType) => this.setState({ currentEdge: edge })}
+        />
+      );
+    });
+  }
+
+  renderSelectRegion = () => {
+    if (this.state.anchorX && this.state.anchorY) {
+      return (
+        <SelectRegion
+          anchorX={this.state.anchorX}
+          anchorY={this.state.anchorY}
+          originX={this.state.originX}
+          originY={this.state.originY}
+          cursorX={this.state.cursorX}
+          cursorY={this.state.cursorY}
+        />
+      );
+    }
+  }
+
+  render() {
+    return (
+      <StyledGraphDisplay
+        isExpanded={this.state.isExpanded}
+        ref={element => this.spaceRef = element}
+        onMouseMove={this.handleMouseMove}
+        onMouseDown={() => this.setState({
+          dragBg: true,
+
+          // Suppress drifting on repeated click
+          deltaX: null,
+          deltaY: null,
+          panX: null,
+          panY: null,
+          scale: 1
+        })}
+        onMouseUp={() => this.setState({ dragBg: false, activeIds: [] })}
+        onWheel={this.handleWheel}
+      >
+        {this.renderNodes()}
+        {this.renderEdges()}
+        {this.renderSelectRegion()}
+
+        <ButtonSection>
+          <ToggleLabel
+            onClick={() => this.setState({ showKindLabels: !this.state.showKindLabels })}
+          >
+            <Checkbox checked={this.state.showKindLabels}>
+                <i className="material-icons">done</i>
+            </Checkbox>
+            Show Type
+          </ToggleLabel>
+          <ExpandButton
+            onClick={this.toggleExpanded}
+          >
+            <i className="material-icons">
+              {this.state.isExpanded ? 'close_fullscreen' : 'open_in_full'}
+            </i>
+          </ExpandButton>
+        </ButtonSection>
+        <InfoPanel
+          currentNode={this.state.currentNode}
+          currentEdge={this.state.currentEdge}
+        />
+      </StyledGraphDisplay>
+    );
+  }
+}
+
+const Checkbox = styled.div`
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ffffff44;
+  margin: 0px 8px 0px 3px;
+  border-radius: 3px;
+  background: ${(props: { checked: boolean }) => props.checked ? '#ffffff22' : ''};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+
+  > i {
+    font-size: 12px;
+    padding-left: 0px;
+    display: ${(props: { checked: boolean }) => props.checked ? '' : 'none'};
+  }
+`;
+
+const ToggleLabel = styled.div`
+  font: 12px 'Work Sans';
+  color: #ffffff;
+  position: relative;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 3px;
+  padding-right: 5px;
+  cursor: pointer;
+  border: 1px solid #ffffff44;
+  :hover {
+    background: #ffffff22;
+
+    > div {
+      background: #ffffff22;
+    }
+  }
+`;
+
+const ButtonSection = styled.div`
+  position: absolute;
+  top: 17px;
+  right: 15px;
+  display: flex;
+  align-items: center;
+`;
+
+const ExpandButton = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid #ffffff44;
+
+  :hover {
+    background: #ffffff44; 
+  }
+
+  > i {
+    font-size: 14px;
+  }
+`;
+
+const StyledGraphDisplay = styled.div`
+  overflow: hidden;
+  cursor: move;
+  width: ${(props: { isExpanded: boolean }) => props.isExpanded ? '100vw' : '100%'};
+  height: ${(props: { isExpanded: boolean }) => props.isExpanded ? '100vh' : '100%'};
+  background: #202227;
+  position: ${(props: { isExpanded: boolean }) => props.isExpanded ? 'fixed' : 'relative'};
+  top: ${(props: { isExpanded: boolean }) => props.isExpanded ? '-25px' : ''};
+  right: ${(props: { isExpanded: boolean }) => props.isExpanded ? '-25px' : ''};
+`;

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

@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { kindToIcon, edgeColors } from '../../../../../shared/rosettaStone';
+import { NodeType, EdgeType} from '../../../../../shared/types';
+
+type PropsType = {
+  currentNode: NodeType,
+  currentEdge: EdgeType
+};
+
+type StateType = {
+};
+
+export default class InfoPanel extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  renderIcon = (kind: string) => {
+
+    let icon = 'tonality';
+    if (Object.keys(kindToIcon).includes(kind)) {
+      icon = kindToIcon[kind]; 
+    }
+    
+    return (
+      <IconWrapper>
+        <i className="material-icons">{icon}</i>
+      </IconWrapper>
+    );
+  }
+
+  renderColorBlock = (type: string) => {
+    return <ColorBlock color={edgeColors[type]} />;
+  }
+
+  renderContents = () => {
+    let { currentNode, currentEdge } = this.props;
+    if (currentNode) {
+      return (
+        <Div>
+          {this.renderIcon(currentNode.kind)}
+          {currentNode.kind}
+          <ResourceName>
+            {currentNode.name}
+          </ResourceName>
+        </Div>
+      );
+    } else if (currentEdge) {
+      return (
+        <EdgeInfo>
+          {this.renderColorBlock(currentEdge.type)}
+          {currentEdge.type}
+        </EdgeInfo>
+      )
+    }
+
+    return (
+      <Div>
+        <IconWrapper>
+          <i className="material-icons">info</i>
+        </IconWrapper>
+        Hover over a node or edge to display info.
+      </Div>
+    )
+  }
+
+  render() {
+    return (
+      <StyledInfoPanel>
+        {this.renderContents()}
+      </StyledInfoPanel>
+    );
+  }
+}
+
+const ColorBlock = styled.div`
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  margin-left: -2px;
+  margin-right: 13px;
+  background: ${(props: { color: string }) => props.color ? props.color : '#ffffff66'};
+`;
+
+const Div = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const EdgeInfo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+`;
+
+const ResourceName = styled.div`
+  color: #ffffff;
+  margin-left: 10px;
+  text-transform: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const IconWrapper = styled.div`
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > i {
+    font-size: 16px;
+    color: #ffffff;
+    margin-right: 14px;
+  }
+`;
+
+const StyledInfoPanel = styled.div`
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  color: #ffffff66;
+  height: 40px;
+  width: 400px;
+  max-width: 600px;
+  background: #44444699;
+  border-radius: 3px;
+  padding-left: 20px;
+  display: inline-block;
+  z-index: 999;
+  padding-top: 7px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-right: 13px;
+`;

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

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { kindToIcon } from '../../../../../shared/rosettaStone';
+import { NodeType } from '../../../../../shared/types';
+
+type PropsType = {
+  node: NodeType,
+  originX: number,
+  originY: number,
+  nodeMouseDown: () => void,
+  nodeMouseUp: () => void,
+  isActive: boolean,
+  showKindLabels: boolean,
+  setCurrentNode: (node: NodeType) => void,
+};
+
+type StateType = {
+};
+
+export default class Node extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    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))}
+        y={Math.round(originY - y - (h / 2))}
+        w={Math.round(w)}
+        h={Math.round(h)}
+        isActive={isActive}
+      >
+        <Kind>
+          {this.props.showKindLabels ? kind : null}
+        </Kind>
+        <NodeBlock 
+          onMouseDown={nodeMouseDown}
+          onMouseUp={nodeMouseUp}
+          onMouseEnter={() => this.props.setCurrentNode(this.props.node)}
+          onMouseLeave={() => this.props.setCurrentNode(null)}
+        >
+          <i className="material-icons">{icon}</i>
+        </NodeBlock>
+        <NodeLabel>
+          {name}
+        </NodeLabel>
+      </StyledNode>
+    );
+  }
+}
+
+const Kind = styled.div`
+  color: #ffffff33;
+  position: absolute;
+  top: -25px;
+  width: 140px;
+  left: -50px;
+  text-align: center;
+  font-size: 13px;
+  font-family: 'Work Sans', sans-serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const NodeLabel = styled.div`
+  position: absolute;
+  bottom: -25px;
+  color: #aaaabb;
+  width: 140px;
+  left: -50px;
+  font-size: 13px;
+  font-family: 'Work Sans', sans-serif;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const NodeBlock = styled.div`
+  background: #444446;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+  cursor: grab;
+  :hover {
+    background: #555556;
+  }
+
+  > i {
+    color: white;
+    font-size: 18px;
+  }
+`;
+
+const StyledNode: any = styled.div.attrs((props: NodeType) => ({
+  style: {
+    top: props.y + 'px',
+    left: props.x + 'px',
+    },
+}))`
+  position: absolute;
+  width: ${(props: NodeType) => props.w + 'px'};;
+  height: ${(props: NodeType) => props.h + 'px'};;
+  box-shadow: ${(props: any) => props.isActive ? '0 0 10px #ffffff66' : '0px 0px 10px 2px #00000022'};
+  color: #ffffff22;
+  border-radius: 100px;
+  z-index: 3;
+`;

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

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+type PropsType = {
+  anchorX: number,
+  anchorY: number,
+  originX: number,
+  originY: number,
+  cursorX: number,
+  cursorY: number
+};
+
+type StateType = {
+};
+
+export default class SelectRegion extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    let { cursorX, cursorY, anchorX, anchorY, originX, originY } = this.props;
+    
+    var x, y, w, h;
+    if (cursorY < anchorY) {
+      y = anchorY;
+    } else {
+      y = cursorY;
+    }
+    if (cursorX < anchorX) {
+      x = cursorX;
+    } else {
+      x = anchorX;
+    }
+
+    w = Math.abs(cursorX - anchorX);
+    h = Math.abs(cursorY - anchorY);
+
+    return (
+      <StyledSelectRegion
+        x={Math.round(originX + x)}
+        y={Math.round(originY - y)}
+        w={w}
+        h={h}
+      />
+    );
+  }
+}
+
+const StyledSelectRegion: any = styled.div.attrs((props: { x: number, y: number, w: number, h: number }) => ({
+  style: {
+    top: props.y + 'px',
+    left: props.x + 'px',
+    width: props.w + 'px',
+    height: props.h + 'px'
+    },
+}))`
+  position: absolute;
+  background: #ffffff22;
+  z-index: 1;
+`;

dashboard/src/main/home/modals/ClusterConfigModal.tsx

@@ -8,6 +8,7 @@ import { KubeContextConfig } from '../../../shared/types';
 
 import YamlEditor from '../../../components/YamlEditor';
 import SaveButton from '../../../components/SaveButton';
+import TabSelector from '../../../components/TabSelector';
 
 type PropsType = {
 };
@@ -20,6 +21,11 @@ type StateType = {
   saveSelectedStatus: string | null
 };
 
+const tabOptions = [
+  { label: 'Raw Kubeconfig', value: 'kubeconfig' },
+  { label: 'Select Clusters', value: 'select' }
+]
+
 export default class ClusterConfigModal extends Component<PropsType, StateType> {
   state = {
     currentTab: 'kubeconfig',
@@ -60,12 +66,6 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
     this.updateChecklist();
   }
 
-  renderLine = (tab: string): JSX.Element | undefined => {
-    if (this.state.currentTab === tab) {
-      return <Highlight />
-    }
-  };
-
   toggleCluster = (i: number): void => {
     let newKubeContexts = this.state.kubeContexts;
     newKubeContexts[i].selected = !newKubeContexts[i].selected;
@@ -160,6 +160,8 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           <YamlEditor 
             value={this.state.rawKubeconfig}
             onChange={(e: any) => this.setState({ rawKubeconfig: e })}
+            height='295px'
+            border={true}
           />
           <UploadButton>
             <i className="material-icons">cloud_upload</i> Upload Kubeconfig
@@ -204,16 +206,12 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
           Manage Clusters
         </Header>
         <ModalTitle>Connect from Kubeconfig</ModalTitle>
-        <TabSelector>
-          <Tab onClick={() => this.setState({ currentTab: 'kubeconfig' })}>
-            Raw Kubeconfig
-            {this.renderLine('kubeconfig')}
-          </Tab>
-          <Tab onClick={() => this.setState({ currentTab: 'select' })}>
-            Select Clusters
-            {this.renderLine('select')}
-          </Tab>
-        </TabSelector>
+        <TabSelector
+          currentTab={this.state.currentTab}
+          options={tabOptions}
+          setCurrentTab={(value: string) => this.setState({ currentTab: value })}
+          tabWidth='120px'
+        />
         {this.renderTabContents()}
       </StyledClusterConfigModal>
     );
@@ -253,10 +251,10 @@ const UploadButton = styled.button`
 `;
 
 const Checkbox = styled.div`
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   border: 1px solid #ffffff44;
-  margin: 0px 15px 0px 12px;
+  margin: 1px 15px 0px 12px;
   border-radius: 3px;
   background: ${(props: { checked: boolean }) => props.checked ? '#ffffff22' : ''};
   display: flex;
@@ -265,7 +263,7 @@ const Checkbox = styled.div`
 
   > i {
     font-size: 12px;
-    padding-left: 1px;
+    padding-left: 0px;
     display: ${(props: { checked: boolean }) => props.checked ? '' : 'none'};
   }
 `;
@@ -319,61 +317,15 @@ const Subtitle = styled.div`
   padding: 15px 0px;
   font-family: 'Work Sans', sans-serif;
   font-size: 13px;
-  color: #aaa;
+  color: #aaaabb;
   margin-top: 8px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
 
-const Highlight = styled.div`
-  width: 80%;
-  height: 1px;
-  margin-top: 5px;
-  background: #949EFFcc;
-
-  opacity: 0;
-  animation: lineEnter 0.5s 0s;
-  animation-fill-mode: forwards;
-  @keyframes lineEnter {
-    from { width: 0%; opacity: 0; }
-    to   { width: 80%; opacity: 1; }
-  }
-`; 
-
-const Tab = styled.div`
-  width: 180px;
-  height: 30px;
-  padding: 0 10px;
-  margin-right: 15px;
-  display: flex;
-  font-family: 'Work Sans', sans-serif;
-  font-size: 13px;
-  user-select: none;
-  color: #949effcc;
-  flex-direction: column;
-  padding-top: 7px;
-  align-items: center;
-  cursor: pointer;
-  white-space: nowrap;
-  
-  :hover {
-    background: #949EFF22;
-    border-radius: 5px;
-  }
-`;
-
-const TabSelector = styled.div`
-  display: flex;
-  width: 260px;
-  max-width: 100%;
-  margin-left: 0px;
-  justify-content: space-between;
-  margin-top: 23px;
-`;
-
 const ModalTitle = styled.div`
-  margin-top: 21px;
+  margin: 21px 2px 23px;
   display: flex;
   flex: 1;
   font-family: 'Assistant';

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -8,7 +8,8 @@ import { Context } from '../../../shared/Context';
 import ClusterSection from './ClusterSection';
 
 type PropsType = {
-  logOut: () => void
+  logOut: () => void,
+  forceSidebar: boolean
 };
 
 type StateType = {
@@ -40,6 +41,13 @@ export default class Sidebar extends Component<PropsType, StateType> {
     document.removeEventListener('keyup', this.handleKeyUp);
   }
 
+  // Need to override showDrawer when the sidebar is closed
+  componentDidUpdate(prevProps: PropsType) {
+    if (prevProps.forceSidebar !== this.props.forceSidebar) {
+      this.setState({ showSidebar: this.props.forceSidebar });
+    }
+  }  
+
   handleKeyDown = (e: KeyboardEvent): void => {
     if (e.key === 'Meta' || e.key === 'Control') {
       this.setState({ pressingCtrl: true });
@@ -165,7 +173,7 @@ const NavButton = styled.div`
 const BottomSection = styled.div`
   position: absolute;
   width: 100%;
-  bottom: 12px;
+  bottom: 10px;
 `;
 
 const LogOutButton = styled(NavButton)`

dashboard/src/shared/api.tsx

@@ -43,19 +43,27 @@ const getContexts = baseApi<{}, { id: number }>('GET', pathParams => {
 const getCharts = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType,
   limit: number,
   skip: number,
   byDate: boolean,
   statusFilter: string[]
-}>('GET', '/api/charts');
+}>('GET', '/api/releases');
 
 const getChart = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType
 }, { name: string, revision: number }>('GET', pathParams => {
-  return `/api/charts/${pathParams.name}/${pathParams.revision}`;
+  return `/api/releases/${pathParams.name}/${pathParams.revision}`;
+});
+
+const getChartComponents = baseApi<{
+  namespace: string,
+  context: string,
+  storage: StorageType
+}, { name: string, revision: number }>('GET', pathParams => {
+  return `/api/releases/${pathParams.name}/${pathParams.revision}/components`;
 });
 
 const getNamespaces = baseApi<{
@@ -65,17 +73,27 @@ const getNamespaces = baseApi<{
 const getRevisions = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType
 }, { name: string }>('GET', pathParams => {
-  return `/api/charts/${pathParams.name}/history`;
+  return `/api/releases/${pathParams.name}/history`;
 });
 
 const rollbackChart = baseApi<{
   namespace: string,
   context: string,
-  storage: string
-}, { name: string, revision: number }>('POST', pathParams => {
-  return `/api/charts/rollback/${pathParams.name}/${pathParams.revision}`;
+  storage: StorageType,
+  revision: number
+}, { name: string }>('POST', pathParams => {
+  return `/api/releases/${pathParams.name}/rollback`;
+});
+
+const upgradeChartValues = baseApi<{
+  namespace: string,
+  context: string,
+  storage: StorageType,
+  values: string
+}, { name: string }>('POST', pathParams => {
+  return `/api/releases/${pathParams.name}/upgrade`;
 });
 
 // Bundle export to allow default api import (api.<method> is more readable)
@@ -89,7 +107,9 @@ export default {
   getContexts,
   getCharts,
   getChart,
+  getChartComponents,
   getNamespaces,
   getRevisions,
-  rollbackChart
+  rollbackChart,
+  upgradeChartValues
 }

dashboard/src/shared/rosettaStone.tsx

@@ -0,0 +1,13 @@
+export const kindToIcon: any = {
+  'Deployment': 'category',
+  'Pod': 'fiber_manual_record',
+  'Service': 'alt_route',
+  'Ingress': 'sensor_door',
+  'StatefulSet': 'location_city',
+  'Secret': 'vpn_key'
+}
+
+export const edgeColors: any = {
+  'LabelRel': '#949EFF',
+  'ControlRel': '#fcb603'
+};

dashboard/src/shared/types.tsx

@@ -25,12 +25,40 @@ export interface ChartType {
       apiVersion: string
     },
   },
+  config: string,
   version: number,
   namespace: string
 }
 
+export interface ResourceType {
+  ID: number,
+  Kind: string,
+  Name: string,
+  RawYAML: Object,
+  Relations: any
+}
+
+export interface NodeType {
+  id: number,
+  name: string,
+  kind: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  toCursorX?: number,
+  toCursorY?: number
+}
+
+export interface EdgeType {
+  type: string,
+  source: number,
+  target: number
+}
+
+
 export enum StorageType {
   Secret = 'secret',
   ConfigMap = 'configmap',
   Memory = 'memory'
-}
+}

internal/helm/grapher/object.go

@@ -0,0 +1,35 @@
+package grapher
+
+// Object contains information about each k8s component in the chart.
+type Object struct {
+	ID        int
+	Kind      string
+	Name      string
+	RawYAML   map[string]interface{}
+	Relations Relations
+}
+
+// ParseObjs parses a k8s object from a single-document yaml
+// and returns an array of objects that includes its children.
+func ParseObjs(objs []map[string]interface{}) []Object {
+	objArr := []Object{}
+
+	for i, obj := range objs {
+		kind := getField(obj, "kind").(string)
+		name := getField(obj, "metadata", "name").(string)
+
+		// First add the object that appears on the YAML
+		parsedObj := Object{
+			ID:      i,
+			Kind:    kind,
+			Name:    name,
+			RawYAML: obj,
+			Relations: Relations{
+				ControlRels: []ControlRel{},
+				LabelRels:   []LabelRel{},
+			},
+		}
+		objArr = append(objArr, parsedObj)
+	}
+	return objArr
+}

internal/helm/grapher/object_test.go

@@ -0,0 +1,151 @@
+package grapher_test
+
+import (
+	"io/ioutil"
+	"testing"
+
+	"github.com/porter-dev/porter/internal/helm/grapher"
+)
+
+// Expected objects for helm Cassandra chart
+var c1 = grapher.Object{
+	Kind: "Secret",
+	Name: "my-release-cassandra",
+}
+
+var c2 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-cassandra-headless",
+	Relations: grapher.Relations{
+		LabelRels: []grapher.LabelRel{
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 1,
+					Target: 4,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 1,
+					Target: 5,
+				},
+			},
+		},
+	},
+}
+
+var c3 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-cassandra",
+	Relations: grapher.Relations{
+		LabelRels: []grapher.LabelRel{
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 2,
+					Target: 4,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 2,
+					Target: 5,
+				},
+			},
+		},
+	},
+}
+
+var c4 = grapher.Object{
+	Kind: "StatefulSet",
+	Name: "my-release-cassandra",
+}
+
+// Expected objects for helm Cassandra chart
+var k1 = grapher.Object{
+	Kind: "ServiceAccount",
+	Name: "my-release-kafka",
+}
+
+var k2 = grapher.Object{
+	Kind: "ConfigMap",
+	Name: "my-release-kafka-scripts",
+}
+
+var k3 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-zookeeper-headless",
+}
+
+var k4 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-zookeeper",
+}
+
+var k5 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-kafka-headless",
+}
+
+var k6 = grapher.Object{
+	Kind: "Service",
+	Name: "my-release-kafka",
+}
+
+var k7 = grapher.Object{
+	Kind: "StatefulSet",
+	Name: "my-release-zookeeper",
+}
+
+var k8 = grapher.Object{
+	Kind: "StatefulSet",
+	Name: "my-release-kafka",
+}
+
+var expObjs1 = []grapher.Object{
+	c1, c2, c3, c4,
+}
+
+var expObjs2 = []grapher.Object{
+	k1, k2, k3, k4,
+	k5, k6, k7, k8,
+}
+
+type k8sObj struct {
+	Expected []grapher.Object
+	FilePath string
+}
+
+func TestParseObj(t *testing.T) {
+	k8sObjs := []k8sObj{
+		k8sObj{
+			Expected: expObjs1,
+			FilePath: "./test_yaml/cassandra.yaml",
+		},
+		k8sObj{
+			Expected: expObjs2,
+			FilePath: "./test_yaml/kafka.yaml",
+		},
+	}
+
+	for _, k8sObj := range k8sObjs {
+		// Load in yaml from test files
+		file, err := ioutil.ReadFile(k8sObj.FilePath)
+
+		if err != nil {
+			t.Errorf("Error reading file %s", k8sObj.FilePath)
+		}
+
+		yamlArr := grapher.ImportMultiDocYAML(file)
+		objects := grapher.ParseObjs(yamlArr)
+
+		for i, o := range objects {
+			if k8sObj.Expected[i].Kind != o.Kind {
+				t.Errorf("Object Kinds are different at position %d. Expected %s, Got %s\n", i, k8sObj.Expected[i].Kind, o.Kind)
+			}
+
+			if k8sObj.Expected[i].Name != o.Name {
+				t.Errorf("Object names are different at position %d. Expected %s, Got %s\n", i, k8sObj.Expected[i].Name, o.Name)
+			}
+		}
+	}
+}

internal/helm/grapher/parser.go

@@ -0,0 +1,70 @@
+package grapher
+
+import (
+	"bytes"
+	"fmt"
+
+	"gopkg.in/yaml.v2"
+)
+
+// ImportMultiDocYAML is a helper function that goes through a yaml file with multiple documents (or objects)
+// separated by '---' or '...' and returns an array of yamls.
+func ImportMultiDocYAML(source []byte) (arr []map[string]interface{}) {
+	dec := yaml.NewDecoder(bytes.NewReader(source))
+
+	for {
+		doc := make(map[interface{}]interface{})
+		if dec.Decode(&doc) != nil {
+			return arr
+		}
+		strmap := recursiveConv(doc).(map[string]interface{})
+		arr = append(arr, strmap)
+	}
+}
+
+// recursive helper function that type asserts each layer of nested interfaces to
+// retrieve child value. Every call of GetField must be accompanied with a type assertion.
+func getField(yaml map[string]interface{}, keys ...string) interface{} {
+	if yaml[keys[0]] == nil {
+		return nil
+	}
+
+	if len(keys) == 1 {
+		return yaml[keys[0]]
+	}
+
+	return getField(yaml[keys[0]].(map[string]interface{}), keys[1:len(keys)]...)
+}
+
+// recursively convert all key values in generic interface{} format into strings.
+// i.e. map[interface{}]interface{} --> map[string]interface{}
+func recursiveConv(m interface{}) interface{} {
+	switch o := m.(type) {
+
+	// quickly skip if object already has strings as keys
+	case map[string]interface{}:
+		for k, v := range o {
+			o[k] = recursiveConv(v)
+		}
+
+	case map[interface{}]interface{}:
+		res := make(map[string]interface{})
+		for k, v := range o {
+			// ✨ sprinkle of efficiency by skipping string keys
+			switch kt := k.(type) {
+			case string:
+				res[kt] = recursiveConv(v)
+			default:
+				res[fmt.Sprint(kt)] = recursiveConv(v)
+			}
+		}
+		m = res
+
+	case []interface{}:
+		for i, v := range o {
+			o[i] = recursiveConv(v)
+		}
+	}
+
+	return m
+}

internal/helm/grapher/relation.go

@@ -0,0 +1,203 @@
+package grapher
+
+import (
+	"strconv"
+)
+
+// Relation describes the relationship between k8s components. Type is one of CostrolRel, LabelRel, AnnotationsRel, SpecRel.
+// Source and Target contains the ID of the k8s component that is either the giver or recipient of a relationship.
+// All relations are bi-directional in that each object contains both the incoming and outbound relationships.
+type Relation struct {
+	Source int
+	Target int
+}
+
+// ControlRel describes the relationship between a controller and its children pod.
+type ControlRel struct {
+	Relation
+	Replicas int
+	Template map[string]interface{}
+}
+
+// LabelRel connects objects with spec.selector with pods that have corresponding metadata.labels.
+type LabelRel struct {
+	Relation
+}
+
+// ParsedObjs has methods GetControlRel and GetLabelRel that updates its objects array.
+type ParsedObjs struct {
+	Objects []Object
+}
+
+// Relations is embedded into the Object struct and contains arrays of the three types of relationships.
+type Relations struct {
+	ControlRels []ControlRel
+	LabelRels   []LabelRel
+}
+
+// MatchLabel is used to match Equality label selector.
+type MatchLabel struct {
+	key   string
+	value string
+}
+
+// MatchExpression is used to match Set-based label selectors.
+type MatchExpression struct {
+	key      string
+	operator string // In, NotIn, Exists, DoesNotExist are valid
+	values   []string
+}
+
+// =============== helpers for parsing relationships from YAML ===============
+
+// GetControlRel generates relationships and children objects for common k8s controller types.
+// Note that this only includes controllers whose children are 1) pods and 2) do not have its own YAML.
+// i.e. Children relies entirely on the parent's template. Controllers like CronJob are excluded because its children are not pods.
+func (parsed *ParsedObjs) GetControlRel() {
+	// First collect all children (Pods) that are not included in the yaml as top-level object.
+	children := []Object{}
+	for i, obj := range parsed.Objects {
+		yaml := obj.RawYAML
+
+		switch kind := getField(yaml, "kind").(string); kind {
+		// Parse for all possible controller types
+		case "Deployment", "StatefulSet", "ReplicaSet", "DaemonSet", "Job":
+			rs := getField(yaml, "spec", "replicas")
+
+			if rs != nil && rs.(int) > 0 {
+				// Add Pods for controller objects
+				template := getField(yaml, "spec", "template").(map[string]interface{})
+				for j := 0; j < rs.(int); j++ {
+					cid := len(parsed.Objects) + len(children)
+					crel := ControlRel{
+						Relation: Relation{
+							Source: obj.ID,
+							Target: cid,
+						},
+						Replicas: rs.(int),
+					}
+
+					pod := Object{
+						ID:      cid,
+						Kind:    "Pod",
+						Name:    obj.Name + "-" + strconv.Itoa(j), // tentative name pre-deploy
+						RawYAML: template,
+						Relations: Relations{
+							ControlRels: []ControlRel{
+								crel,
+							},
+						},
+					}
+
+					children = append(children, pod)
+					obj.Relations.ControlRels = append(obj.Relations.ControlRels, crel)
+					parsed.Objects[i] = obj
+				}
+			}
+		}
+	}
+
+	// add children to the objects array at the end.
+	parsed.Objects = append(parsed.Objects, children...)
+}
+
+// GetLabelRel is generates relationships between objects connected by selector-label.
+// It supports both Equality-based and Set-based operators with MatchLabels and MatchExpressions, respectively.
+func (parsed *ParsedObjs) GetLabelRel() {
+	for i, o := range parsed.Objects {
+		// Skip Pods
+		yaml := o.RawYAML
+		matchLabels := []MatchLabel{}
+		matchExpressions := []MatchExpression{}
+
+		// First check for the outdated syntax (matchLabels were added in recent k8s version)
+		if l := getField(yaml, "spec", "selector"); l != nil {
+			simple := true
+			if ml := getField(yaml, "spec", "selector", "matchLabels"); ml != nil {
+				matchLabels = addMatchLabels(matchLabels, ml.(map[string]interface{}))
+				simple = false
+			}
+
+			if me := getField(yaml, "spec", "selector", "matchExpressions"); me != nil {
+				for _, o := range me.([]interface{}) {
+					ot := o.(map[string]interface{})
+					values := []string{}
+					for _, arg := range ot["values"].([]interface{}) {
+						values = append(values, arg.(string))
+					}
+					matchExpressions = append(matchExpressions, MatchExpression{
+						key:      ot["key"].(string),
+						operator: ot["operator"].(string),
+						values:   values,
+					})
+				}
+				simple = false
+			}
+
+			if simple {
+				matchLabels = addMatchLabels(matchLabels, l.(map[string]interface{}))
+			}
+		}
+
+		// Find ID's of targets that match the label selector
+		targetID := parsed.findLabelsBySelector(o.ID, matchLabels, matchExpressions)
+		lrels := o.Relations.LabelRels
+		for _, tid := range targetID {
+			newrel := LabelRel{
+				Relation{
+					Source: o.ID,
+					Target: tid,
+				},
+			}
+			lrels = append(lrels, newrel)
+		}
+
+		parsed.Objects[i].Relations.LabelRels = lrels
+	}
+}
+
+func addMatchLabels(matchLabels []MatchLabel, ml map[string]interface{}) []MatchLabel {
+	for k, v := range ml {
+		matchLabels = append(matchLabels, MatchLabel{
+			key:   k,
+			value: v.(string),
+		})
+	}
+	return matchLabels
+}
+
+// TODO: Implement MatchExpression for set based operations.
+func (parsed *ParsedObjs) findLabelsBySelector(parentID int, ml []MatchLabel, me []MatchExpression) []int {
+	matchedObjs := []int{}
+	for i, o := range parsed.Objects {
+
+		// Only Pods can be selected by spec.selector
+		if o.Kind != "Pod" {
+			continue
+		}
+
+		// find Pods that match labels
+		labels := getField(o.RawYAML, "metadata", "labels")
+		match := 0
+		for _, l := range ml {
+			if labels.(map[string]interface{})[l.key] == l.value {
+				match++
+			}
+		}
+
+		// Returns only if labels meet all conditions of the selector.
+		if match == len(ml) && match > 0 {
+			newrel := LabelRel{
+				Relation{
+					Source: parentID,
+					Target: o.ID,
+				},
+			}
+
+			// Add bidirectional link from children as well.
+			parsed.Objects[i].Relations.LabelRels = append(parsed.Objects[i].Relations.LabelRels, newrel)
+			matchedObjs = append(matchedObjs, o.ID)
+		}
+	}
+	return matchedObjs
+}

internal/helm/grapher/relation_test.go

@@ -0,0 +1,226 @@
+package grapher_test
+
+import (
+	"io/ioutil"
+	"testing"
+
+	"github.com/porter-dev/porter/internal/helm/grapher"
+)
+
+var c7 = grapher.Object{
+	Kind: "StatefulSet",
+	Relations: grapher.Relations{
+		ControlRels: []grapher.ControlRel{
+			grapher.ControlRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 4,
+				},
+				Replicas: 2,
+			},
+			grapher.ControlRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 5,
+				},
+				Replicas: 2,
+			},
+		},
+		LabelRels: []grapher.LabelRel{
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 4,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 5,
+				},
+			},
+		},
+	},
+}
+
+var c5 = grapher.Object{
+	Kind: "Pod",
+	Relations: grapher.Relations{
+		ControlRels: []grapher.ControlRel{
+			grapher.ControlRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 4,
+				},
+				Replicas: 2,
+			},
+		},
+		LabelRels: []grapher.LabelRel{
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 1,
+					Target: 4,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 2,
+					Target: 4,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 4,
+				},
+			},
+		},
+	},
+}
+
+var c6 = grapher.Object{
+	Kind: "Pod",
+	Relations: grapher.Relations{
+		ControlRels: []grapher.ControlRel{
+			grapher.ControlRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 5,
+				},
+				Replicas: 2,
+			},
+		},
+		LabelRels: []grapher.LabelRel{
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 1,
+					Target: 5,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 2,
+					Target: 5,
+				},
+			},
+			grapher.LabelRel{
+				Relation: grapher.Relation{
+					Source: 3,
+					Target: 5,
+				},
+			},
+		},
+	},
+}
+
+var expControlRels1 = []grapher.Object{
+	c1, c2, c3, c7, c5, c6,
+}
+
+type test struct {
+	Expected []grapher.Object
+	FilePath string
+}
+
+func TestControlRels(t *testing.T) {
+	ts := []test{
+		test{
+			Expected: expControlRels1,
+			FilePath: "./test_yaml/cassandra.yaml",
+		},
+	}
+
+	for _, r := range ts {
+		// Load in yaml from test files
+		file, err := ioutil.ReadFile(r.FilePath)
+
+		if err != nil {
+			t.Errorf("Error reading file %s", r.FilePath)
+		}
+
+		yamlArr := grapher.ImportMultiDocYAML(file)
+		objects := grapher.ParseObjs(yamlArr)
+		parsed := grapher.ParsedObjs{
+			Objects: objects,
+		}
+
+		parsed.GetControlRel()
+
+		for i, o := range parsed.Objects {
+			e := r.Expected[i]
+			if len(e.Relations.ControlRels) != len(o.Relations.ControlRels) {
+				t.Errorf("Number of ControlRel differs for %s of type %s. Expected %d. Got %d",
+					e.Name, e.Kind, len(e.Relations.ControlRels), len(o.Relations.ControlRels))
+			}
+
+			for j, crel := range o.Relations.ControlRels {
+				expCrel := e.Relations.ControlRels[j]
+
+				if expCrel.Relation.Source != crel.Relation.Source {
+					t.Errorf("Source in ControlRel differs for %s of type %s. Expected %d. Got %d",
+						o.Name, o.Kind, expCrel.Relation.Source, crel.Relation.Source)
+				}
+
+				if expCrel.Relation.Target != crel.Relation.Target {
+					t.Errorf("Target in ControlRel differs for %s of type %s. Expected %d. Got %d",
+						o.Name, o.Kind, expCrel.Relation.Target, crel.Relation.Target)
+				}
+
+				if expCrel.Replicas != crel.Replicas {
+					t.Errorf("Number of replicas in ControlRel differs for %s of type %s. Expected %d. Got %d",
+						o.Name, o.Kind, expCrel.Replicas, crel.Replicas)
+				}
+			}
+		}
+	}
+}
+
+func TestLabelRels(t *testing.T) {
+	ts := []test{
+		test{
+			Expected: expControlRels1,
+			FilePath: "./test_yaml/cassandra.yaml",
+		},
+	}
+
+	for _, r := range ts {
+		// Load in yaml from test files
+		file, err := ioutil.ReadFile(r.FilePath)
+
+		if err != nil {
+			t.Errorf("Error reading file %s", r.FilePath)
+		}
+
+		yamlArr := grapher.ImportMultiDocYAML(file)
+		objects := grapher.ParseObjs(yamlArr)
+		parsed := grapher.ParsedObjs{
+			Objects: objects,
+		}
+
+		parsed.GetControlRel()
+		parsed.GetLabelRel()
+
+		for i, o := range parsed.Objects {
+			e := r.Expected[i]
+			if len(e.Relations.LabelRels) != len(o.Relations.LabelRels) {
+				t.Errorf("Number of LabelRel differs for %s of type %s. Expected %d. Got %d",
+					e.Name, e.Kind, len(e.Relations.LabelRels), len(o.Relations.LabelRels))
+			}
+
+			for j, rrel := range o.Relations.LabelRels {
+				expRrel := e.Relations.LabelRels[j]
+
+				if expRrel.Relation.Source != rrel.Relation.Source {
+					t.Errorf("Source in ControlRel differs for %s of type %s. Expected %d. Got %d",
+						o.Name, o.Kind, expRrel.Relation.Source, rrel.Relation.Source)
+				}
+
+				if expRrel.Relation.Target != rrel.Relation.Target {
+					t.Errorf("Target in ControlRel differs for %s of type %s. Expected %d. Got %d",
+						o.Name, o.Kind, expRrel.Relation.Target, rrel.Relation.Target)
+				}
+			}
+		}
+
+	}
+}

internal/helm/grapher/test_yaml/cassandra.yaml

@@ -0,0 +1,234 @@
+---
+# Source: cassandra/templates/cassandra-secret.yaml
+apiVersion: v1
+kind: Secret
+metadata:
+  name: my-release-cassandra
+  namespace: default
+  labels:
+    app.kubernetes.io/name: cassandra
+    helm.sh/chart: cassandra-6.0.1
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+type: Opaque
+data:
+  cassandra-password: "SFVZRzR2VU4zaQ=="
+---
+# Source: cassandra/templates/headless-svc.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-cassandra-headless
+  namespace: default
+  labels:
+    app.kubernetes.io/name: cassandra
+    helm.sh/chart: cassandra-6.0.1
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+spec:
+  clusterIP: None
+  publishNotReadyAddresses: true
+  ports:
+    - name: intra
+      port: 7000
+      targetPort: intra
+    - name: tls
+      port: 7001
+      targetPort: tls
+    - name: jmx
+      port: 7199
+      targetPort: jmx
+    - name: cql
+      port: 9042
+      targetPort: cql
+    - name: thrift
+      port: 9160
+      targetPort: thrift
+  selector:
+    app.kubernetes.io/name: cassandra
+    app.kubernetes.io/instance: my-release
+---
+# Source: cassandra/templates/service.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-cassandra
+  namespace: default
+  labels:
+    app.kubernetes.io/name: cassandra
+    helm.sh/chart: cassandra-6.0.1
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+spec:
+  type: ClusterIP
+  ports:
+    - name: cql
+      port: 9042
+      targetPort: cql
+      nodePort: null
+    - name: thrift
+      port: 9160
+      targetPort: thrift
+      nodePort: null
+    - name: metrics
+      port: 8080
+      nodePort: null
+  selector:
+    app.kubernetes.io/name: cassandra
+    app.kubernetes.io/instance: my-release
+---
+# Source: cassandra/templates/statefulset.yaml
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: my-release-cassandra
+  namespace: default
+  labels:
+    app.kubernetes.io/name: cassandra
+    helm.sh/chart: cassandra-6.0.1
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+spec:
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: cassandra
+      app.kubernetes.io/instance: my-release
+    matchExpressions:
+      - {key: tier, operator: In, values: [cache]}
+      - {key: environment, operator: NotIn, values: [dev]}
+  serviceName: my-release-cassandra-headless
+  podManagementPolicy: OrderedReady
+  replicas: 2
+  updateStrategy:
+    type: RollingUpdate
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: cassandra
+        helm.sh/chart: cassandra-6.0.1
+        app.kubernetes.io/instance: my-release
+        app.kubernetes.io/managed-by: Helm
+    spec:
+      
+      affinity:
+        podAffinity:
+          
+        podAntiAffinity:
+          preferredDuringSchedulingIgnoredDuringExecution:
+            - podAffinityTerm:
+                labelSelector:
+                  matchLabels:
+                    app.kubernetes.io/name: cassandra
+                    app.kubernetes.io/instance: my-release
+                namespaces:
+                  - default
+                topologyKey: kubernetes.io/hostname
+              weight: 1
+        nodeAffinity:
+          
+      securityContext:
+        fsGroup: 1001
+      containers:
+        - name: cassandra
+          command:
+            - bash
+            - -ec
+            - |
+              # Node 0 is the password seeder
+              if [[ $HOSTNAME =~ (.*)-0$ ]]; then
+                  echo "Setting node as password seeder"
+                  export CASSANDRA_PASSWORD_SEEDER=yes
+              else
+                  # Only node 0 will execute the startup initdb scripts
+                  export CASSANDRA_IGNORE_INITDB_SCRIPTS=1
+              fi
+              /opt/bitnami/scripts/cassandra/entrypoint.sh /opt/bitnami/scripts/cassandra/run.sh
+          image: docker.io/bitnami/cassandra:3.11.8-debian-10-r20
+          imagePullPolicy: "IfNotPresent"
+          securityContext:
+            runAsUser: 1001
+          env:
+            - name: BITNAMI_DEBUG
+              value: "false"
+            - name: CASSANDRA_CLUSTER_NAME
+              value: cassandra
+            - name: CASSANDRA_SEEDS
+              value: "my-release-cassandra-0.my-release-cassandra-headless.default.svc.cluster.local"
+            - name: CASSANDRA_PASSWORD
+              valueFrom:
+                secretKeyRef:
+                  name: my-release-cassandra
+                  key: cassandra-password
+            - name: POD_IP
+              valueFrom:
+                fieldRef:
+                  fieldPath: status.podIP
+            - name: CASSANDRA_USER
+              value: "cassandra"
+            - name: CASSANDRA_NUM_TOKENS
+              value: "256"
+            - name: CASSANDRA_DATACENTER
+              value: dc1
+            - name: CASSANDRA_ENDPOINT_SNITCH
+              value: SimpleSnitch
+            - name: CASSANDRA_RACK
+              value: rack1
+            - name: CASSANDRA_ENABLE_RPC
+              value: "true"
+          envFrom:
+          livenessProbe:
+            exec:
+              command:
+                - /bin/bash
+                - -ec
+                - |
+                  nodetool status
+            initialDelaySeconds: 60
+            periodSeconds: 30
+            timeoutSeconds: 5
+            successThreshold: 1
+            failureThreshold: 5
+          readinessProbe:
+            exec:
+              command:
+                - /bin/bash
+                - -ec
+                - |
+                  nodetool status | grep -E "^UN\\s+${POD_IP}"
+            initialDelaySeconds: 60
+            periodSeconds: 10
+            timeoutSeconds: 5
+            successThreshold: 1
+            failureThreshold: 5
+          ports:
+            - name: intra
+              containerPort: 7000
+            - name: tls
+              containerPort: 7001
+            - name: jmx
+              containerPort: 7199
+            - name: cql
+              containerPort: 9042
+            - name: thrift
+              containerPort: 9160
+          resources: 
+            limits: {}
+            requests: {}
+          volumeMounts:
+            - name: data
+              mountPath: /bitnami/cassandra
+            
+      volumes:
+  volumeClaimTemplates:
+    - metadata:
+        name: data
+        labels:
+          app.kubernetes.io/name: cassandra
+          app.kubernetes.io/instance: my-release
+      spec:
+        accessModes:
+          - "ReadWriteOnce"
+        resources:
+          requests:
+            storage: "8Gi"
+

internal/helm/grapher/test_yaml/kafka.yaml

@@ -0,0 +1,446 @@
+---
+# Source: kafka/templates/serviceaccount.yaml
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: my-release-kafka
+  labels:
+    app.kubernetes.io/name: kafka
+    helm.sh/chart: kafka-11.8.6
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: kafka
+---
+# Source: kafka/templates/scripts-configmap.yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: my-release-kafka-scripts
+  labels:
+    app.kubernetes.io/name: kafka
+    helm.sh/chart: kafka-11.8.6
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+data:
+  setup.sh: |-
+    #!/bin/bash
+
+    ID="${MY_POD_NAME#"my-release-kafka-"}"
+    export KAFKA_CFG_BROKER_ID="$ID"
+
+    exec /entrypoint.sh /run.sh
+---
+# Source: kafka/charts/zookeeper/templates/svc-headless.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-zookeeper-headless
+  namespace: default
+  labels:
+    app.kubernetes.io/name: zookeeper
+    helm.sh/chart: zookeeper-5.21.9
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: zookeeper
+spec:
+  type: ClusterIP
+  clusterIP: None
+  publishNotReadyAddresses: true
+  ports:
+    
+    - name: tcp-client
+      port: 2181
+      targetPort: client
+    
+    
+    - name: follower
+      port: 2888
+      targetPort: follower
+    - name: tcp-election
+      port: 3888
+      targetPort: election
+  selector:
+    app.kubernetes.io/name: zookeeper
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/component: zookeeper
+---
+# Source: kafka/charts/zookeeper/templates/svc.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-zookeeper
+  namespace: default
+  labels:
+    app.kubernetes.io/name: zookeeper
+    helm.sh/chart: zookeeper-5.21.9
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: zookeeper
+spec:
+  type: ClusterIP
+  ports:
+    
+    - name: tcp-client
+      port: 2181
+      targetPort: client
+    
+    
+    - name: follower
+      port: 2888
+      targetPort: follower
+    - name: tcp-election
+      port: 3888
+      targetPort: election
+  selector:
+    app.kubernetes.io/name: zookeeper
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/component: zookeeper
+---
+# Source: kafka/templates/svc-headless.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-kafka-headless
+  labels:
+    app.kubernetes.io/name: kafka
+    helm.sh/chart: kafka-11.8.6
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: kafka
+spec:
+  type: ClusterIP
+  clusterIP: None
+  ports:
+    - name: tcp-client
+      port: 9092
+      protocol: TCP
+      targetPort: kafka-client
+    - name: tcp-internal
+      port: 9093
+      protocol: TCP
+      targetPort: kafka-internal
+  selector:
+    app.kubernetes.io/name: kafka
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/component: kafka
+---
+# Source: kafka/templates/svc.yaml
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-release-kafka
+  labels:
+    app.kubernetes.io/name: kafka
+    helm.sh/chart: kafka-11.8.6
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: kafka
+spec:
+  type: ClusterIP
+  ports:
+    - name: tcp-client
+      port: 9092
+      protocol: TCP
+      targetPort: kafka-client
+      nodePort: null
+  selector:
+    app.kubernetes.io/name: kafka
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/component: kafka
+---
+# Source: kafka/charts/zookeeper/templates/statefulset.yaml
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: my-release-zookeeper
+  namespace: default
+  labels:
+    app.kubernetes.io/name: zookeeper
+    helm.sh/chart: zookeeper-5.21.9
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: zookeeper
+    role: zookeeper
+spec:
+  serviceName: my-release-zookeeper-headless
+  replicas: 1
+  podManagementPolicy: Parallel
+  updateStrategy:
+    type: RollingUpdate
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: zookeeper
+      app.kubernetes.io/instance: my-release
+      app.kubernetes.io/component: zookeeper
+  template:
+    metadata:
+      name: my-release-zookeeper
+      labels:
+        app.kubernetes.io/name: zookeeper
+        helm.sh/chart: zookeeper-5.21.9
+        app.kubernetes.io/instance: my-release
+        app.kubernetes.io/managed-by: Helm
+        app.kubernetes.io/component: zookeeper
+    spec:
+      
+      serviceAccountName: default
+      securityContext:
+        fsGroup: 1001
+      containers:
+        - name: zookeeper
+          image: docker.io/bitnami/zookeeper:3.6.2-debian-10-r10
+          imagePullPolicy: "IfNotPresent"
+          securityContext:
+            runAsUser: 1001
+          command:
+            - bash
+            - -ec
+            - |
+                # Execute entrypoint as usual after obtaining ZOO_SERVER_ID based on POD hostname
+                HOSTNAME=`hostname -s`
+                if [[ $HOSTNAME =~ (.*)-([0-9]+)$ ]]; then
+                  ORD=${BASH_REMATCH[2]}
+                  export ZOO_SERVER_ID=$((ORD+1))
+                else
+                  echo "Failed to get index from hostname $HOST"
+                  exit 1
+                fi
+                exec /entrypoint.sh /run.sh
+          resources:
+            requests:
+              cpu: 250m
+              memory: 256Mi
+          env:
+            - name: ZOO_DATA_LOG_DIR
+              value: ""
+            - name: ZOO_PORT_NUMBER
+              value: "2181"
+            - name: ZOO_TICK_TIME
+              value: "2000"
+            - name: ZOO_INIT_LIMIT
+              value: "10"
+            - name: ZOO_SYNC_LIMIT
+              value: "5"
+            - name: ZOO_MAX_CLIENT_CNXNS
+              value: "60"
+            - name: ZOO_4LW_COMMANDS_WHITELIST
+              value: "srvr, mntr, ruok"
+            - name: ZOO_LISTEN_ALLIPS_ENABLED
+              value: "no"
+            - name: ZOO_AUTOPURGE_INTERVAL
+              value: "0"
+            - name: ZOO_AUTOPURGE_RETAIN_COUNT
+              value: "3"
+            - name: ZOO_MAX_SESSION_TIMEOUT
+              value: "40000"
+            - name: ZOO_SERVERS
+              value: my-release-zookeeper-0.my-release-zookeeper-headless.default.svc.cluster.local:2888:3888 
+            - name: ZOO_ENABLE_AUTH
+              value: "no"
+            - name: ZOO_HEAP_SIZE
+              value: "1024"
+            - name: ZOO_LOG_LEVEL
+              value: "ERROR"
+            - name: ALLOW_ANONYMOUS_LOGIN
+              value: "yes"
+            - name: POD_NAME
+              valueFrom:
+                fieldRef:
+                  apiVersion: v1
+                  fieldPath: metadata.name
+          ports:
+            
+            - name: client
+              containerPort: 2181
+            
+            
+            - name: follower
+              containerPort: 2888
+            - name: election
+              containerPort: 3888
+          livenessProbe:
+            exec:
+              command: ['/bin/bash', '-c', 'echo "ruok" | timeout 2 nc -w 2 localhost 2181 | grep imok']
+            initialDelaySeconds: 30
+            periodSeconds: 10
+            timeoutSeconds: 5
+            successThreshold: 1
+            failureThreshold: 6
+          readinessProbe:
+            exec:
+              command: ['/bin/bash', '-c', 'echo "ruok" | timeout 2 nc -w 2 localhost 2181 | grep imok']
+            initialDelaySeconds: 5
+            periodSeconds: 10
+            timeoutSeconds: 5
+            successThreshold: 1
+            failureThreshold: 6
+          volumeMounts:
+            - name: data
+              mountPath: /bitnami/zookeeper
+      volumes:
+  volumeClaimTemplates:
+    - metadata:
+        name: data
+        annotations:
+      spec:
+        accessModes:
+          - "ReadWriteOnce"
+        resources:
+          requests:
+            storage: "8Gi"
+---
+# Source: kafka/templates/statefulset.yaml
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: my-release-kafka
+  labels:
+    app.kubernetes.io/name: kafka
+    helm.sh/chart: kafka-11.8.6
+    app.kubernetes.io/instance: my-release
+    app.kubernetes.io/managed-by: Helm
+    app.kubernetes.io/component: kafka
+spec:
+  podManagementPolicy: Parallel
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: kafka
+      app.kubernetes.io/instance: my-release
+      app.kubernetes.io/component: kafka
+  serviceName: my-release-kafka-headless
+  updateStrategy:
+    type: "RollingUpdate"
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: kafka
+        helm.sh/chart: kafka-11.8.6
+        app.kubernetes.io/instance: my-release
+        app.kubernetes.io/managed-by: Helm
+        app.kubernetes.io/component: kafka
+    spec:      
+      securityContext:
+        fsGroup: 1001
+        runAsUser: 1001
+      serviceAccountName: my-release-kafka
+      containers:
+        - name: kafka
+          image: docker.io/bitnami/kafka:2.6.0-debian-10-r30
+          imagePullPolicy: "IfNotPresent"
+          command:
+            - /scripts/setup.sh
+          env:
+            - name: BITNAMI_DEBUG
+              value: "false"
+            - name: MY_POD_IP
+              valueFrom:
+                fieldRef:
+                  fieldPath: status.podIP
+            - name: MY_POD_NAME
+              valueFrom:
+                fieldRef:
+                  fieldPath: metadata.name
+            - name: KAFKA_CFG_ZOOKEEPER_CONNECT
+              value: "my-release-zookeeper"
+            - name: KAFKA_INTER_BROKER_LISTENER_NAME
+              value: "INTERNAL"
+            - name: KAFKA_CFG_LISTENER_SECURITY_PROTOCOL_MAP
+              value: "INTERNAL:PLAINTEXT,CLIENT:PLAINTEXT"
+            - name: KAFKA_CFG_LISTENERS
+              value: "INTERNAL://:9093,CLIENT://:9092"
+            - name: KAFKA_CFG_ADVERTISED_LISTENERS
+              value: "INTERNAL://$(MY_POD_NAME).my-release-kafka-headless.default.svc.cluster.local:9093,CLIENT://$(MY_POD_NAME).my-release-kafka-headless.default.svc.cluster.local:9092"
+            - name: ALLOW_PLAINTEXT_LISTENER
+              value: "yes"
+            - name: KAFKA_CFG_DELETE_TOPIC_ENABLE
+              value: "false"
+            - name: KAFKA_CFG_AUTO_CREATE_TOPICS_ENABLE
+              value: "true"
+            - name: KAFKA_HEAP_OPTS
+              value: "-Xmx1024m -Xms1024m"
+            - name: KAFKA_CFG_LOG_FLUSH_INTERVAL_MESSAGES
+              value: "10000"
+            - name: KAFKA_CFG_LOG_FLUSH_INTERVAL_MS
+              value: "1000"
+            - name: KAFKA_CFG_LOG_RETENTION_BYTES
+              value: "1073741824"
+            - name: KAFKA_CFG_LOG_RETENTION_CHECK_INTERVALS_MS
+              value: "300000"
+            - name: KAFKA_CFG_LOG_RETENTION_HOURS
+              value: "168"
+            - name: KAFKA_CFG_MESSAGE_MAX_BYTES
+              value: "1000012"
+            - name: KAFKA_CFG_LOG_SEGMENT_BYTES
+              value: "1073741824"
+            - name: KAFKA_CFG_LOG_DIRS
+              value: "/bitnami/kafka/data"
+            - name: KAFKA_CFG_DEFAULT_REPLICATION_FACTOR
+              value: "1"
+            - name: KAFKA_CFG_OFFSETS_TOPIC_REPLICATION_FACTOR
+              value: "1"
+            - name: KAFKA_CFG_TRANSACTION_STATE_LOG_REPLICATION_FACTOR
+              value: "1"
+            - name: KAFKA_CFG_TRANSACTION_STATE_LOG_MIN_ISR
+              value: "1"
+            - name: KAFKA_CFG_NUM_IO_THREADS
+              value: "8"
+            - name: KAFKA_CFG_NUM_NETWORK_THREADS
+              value: "3"
+            - name: KAFKA_CFG_NUM_PARTITIONS
+              value: "1"
+            - name: KAFKA_CFG_NUM_RECOVERY_THREADS_PER_DATA_DIR
+              value: "1"
+            - name: KAFKA_CFG_SOCKET_RECEIVE_BUFFER_BYTES
+              value: "102400"
+            - name: KAFKA_CFG_SOCKET_REQUEST_MAX_BYTES
+              value: "104857600"
+            - name: KAFKA_CFG_SOCKET_SEND_BUFFER_BYTES
+              value: "102400"
+            - name: KAFKA_CFG_ZOOKEEPER_CONNECTION_TIMEOUT_MS
+              value: "6000"
+          ports:
+            - name: kafka-client
+              containerPort: 9092
+            - name: kafka-internal
+              containerPort: 9093
+          livenessProbe:
+            tcpSocket:
+              port: kafka-client
+            initialDelaySeconds: 10
+            timeoutSeconds: 5
+            failureThreshold: 
+            periodSeconds: 
+            successThreshold: 
+          readinessProbe:
+            tcpSocket:
+              port: kafka-client
+            initialDelaySeconds: 5
+            timeoutSeconds: 5
+            failureThreshold: 6
+            periodSeconds: 
+            successThreshold: 
+          resources:
+            limits: {}
+            requests: {}
+          volumeMounts:
+            - name: data
+              mountPath: /bitnami/kafka
+            - name: scripts
+              mountPath: /scripts/setup.sh
+              subPath: setup.sh
+      volumes:
+        - name: scripts
+          configMap:
+            name: my-release-kafka-scripts
+            defaultMode: 0755
+  volumeClaimTemplates:
+    - metadata:
+        name: data
+      spec:
+        accessModes:
+          - "ReadWriteOnce"
+        resources:
+          requests:
+            storage: "8Gi"
+

server/api/release_handler.go

@@ -9,6 +9,7 @@ import (
 	"github.com/go-chi/chi"
 	"github.com/porter-dev/porter/internal/forms"
 	"github.com/porter-dev/porter/internal/helm"
+	"github.com/porter-dev/porter/internal/helm/grapher"
 )
 
 // Enumeration of release API error codes, represented as int64
@@ -97,6 +98,58 @@ func (app *App) HandleGetRelease(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// HandleGetReleaseComponents retrieves a single release based on a name and revision
+func (app *App) HandleGetReleaseComponents(w http.ResponseWriter, r *http.Request) {
+	name := chi.URLParam(r, "name")
+	revision, err := strconv.ParseUint(chi.URLParam(r, "revision"), 0, 64)
+
+	form := &forms.GetReleaseForm{
+		ReleaseForm: &forms.ReleaseForm{
+			Form: &helm.Form{},
+		},
+		Name:     name,
+		Revision: int(revision),
+	}
+
+	agent, err := app.getAgentFromQueryParams(
+		w,
+		r,
+		form.ReleaseForm,
+		form.ReleaseForm.PopulateHelmOptionsFromQueryParams,
+	)
+
+	// errors are handled in app.getAgentFromQueryParams
+	if err != nil {
+		return
+	}
+
+	release, err := agent.GetRelease(form.Name, form.Revision)
+
+	if err != nil {
+		app.sendExternalError(err, http.StatusNotFound, HTTPError{
+			Code:   ErrReleaseReadData,
+			Errors: []string{"release not found"},
+		}, w)
+
+		return
+	}
+
+	yamlArr := grapher.ImportMultiDocYAML([]byte(release.Manifest))
+	objects := grapher.ParseObjs(yamlArr)
+
+	parsed := grapher.ParsedObjs{
+		Objects: objects,
+	}
+
+	parsed.GetControlRel()
+	parsed.GetLabelRel()
+
+	if err := json.NewEncoder(w).Encode(parsed.Objects); err != nil {
+		app.handleErrorFormDecoding(err, ErrReleaseDecode, w)
+		return
+	}
+}
+
 // HandleListReleaseHistory retrieves a history of releases based on a release name
 func (app *App) HandleListReleaseHistory(w http.ResponseWriter, r *http.Request) {
 	name := chi.URLParam(r, "name")

server/router/router.go

@@ -37,6 +37,7 @@ func New(
 
 		// /api/releases routes
 		r.Method("GET", "/releases", auth.BasicAuthenticate(requestlog.NewHandler(a.HandleListReleases, l)))
+		r.Method("GET", "/releases/{name}/{revision}/components", auth.BasicAuthenticate(requestlog.NewHandler(a.HandleGetReleaseComponents, l)))
 		r.Method("GET", "/releases/{name}/history", auth.BasicAuthenticate(requestlog.NewHandler(a.HandleListReleaseHistory, l)))
 		r.Method("POST", "/releases/{name}/upgrade", auth.BasicAuthenticate(requestlog.NewHandler(a.HandleUpgradeRelease, l)))
 		r.Method("GET", "/releases/{name}/{revision}", auth.BasicAuthenticate(requestlog.NewHandler(a.HandleGetRelease, l)))