component integrated

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

@@ -36,6 +36,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
   // Allows rollback to update the top-level chart
   refreshChart = () => {
     let { currentCluster } = this.props;
+    console.log(currentCluster)
     api.getChart('<token>', {
       namespace: this.state.namespace,
       context: currentCluster,

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

@@ -59,6 +59,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         <OverviewSection
           toggleExpanded={() => this.setState({ isExpanded: !this.state.isExpanded })}
           isExpanded={this.state.isExpanded}
+          currentChart={currentChart}
         />
       );
     }

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

@@ -1,18 +1,22 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import api from '../../../../shared/api';
 
-import { ResourceType } from '../../../../shared/types';
+import { Context } from '../../../../shared/Context';
+import { ResourceType, StorageType, ChartType } from '../../../../shared/types';
 
 import ResourceItem from './ResourceItem';
 
 type PropsType = {
   toggleExpanded: () => void,
-  isExpanded: boolean
+  isExpanded: boolean,
+  currentChart: ChartType
 };
 
 type StateType = {
   viewMode: string,
-  showKindLabels: boolean
+  showKindLabels: boolean,
+  components: ResourceType[]
 };
 
 const dummyObjects = [
@@ -52,11 +56,30 @@ const dummyObjects = [
 export default class OverviewSection extends Component<PropsType, StateType> {
   state = {
     viewMode: 'graph',
-    showKindLabels: true
+    showKindLabels: true,
+    components: [] as ResourceType[],
+  }
+
+  componentDidMount() {
+    let { currentCluster, setCurrentError } = this.context;
+    let { currentChart } = this.props;
+    console.log(currentCluster)
+    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 {
+        console.log(res.data)
+        this.setState({components: res.data})
+      }
+    });
   }
 
   renderResourceList = () => {
-    return dummyObjects.map((resource: ResourceType, i: number) => {
+    return this.state.components.map((resource: ResourceType, i: number) => {
       return (
         <ResourceItem
           key={i}
@@ -113,6 +136,8 @@ export default class OverviewSection extends Component<PropsType, StateType> {
   }
 }
 
+OverviewSection.contextType = Context;
+
 const ResourceList = styled.div`
   width: 100%;
   overflow-y: auto;

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

@@ -5,12 +5,12 @@ import { ResourceType } from '../../../../shared/types';
 import YamlEditor from '../../../../components/YamlEditor';
 
 const kindToIcon: any = {
-  'deployment': 'category',
-  'pod': 'fiber_manual_record',
-  'service': 'alt_route',
-  'ingress': 'sensor_door',
-  'statefulset': 'location_city',
-  'secret': 'vpn_key',
+  'Deployment': 'category',
+  'Pod': 'fiber_manual_record',
+  'Service': 'alt_route',
+  'Ingress': 'sensor_door',
+  'StatefulSet': 'location_city',
+  'Secret': 'vpn_key',
 }
 
 type PropsType = {
@@ -21,14 +21,14 @@ type PropsType = {
 
 type StateType = {
   expanded: boolean,
-  rawYaml: string
+  RawYAML: string
 };
 
 // A single resource block in the expanded chart list view
 export default class ResourceItem extends Component<PropsType, StateType> {
   state = {
     expanded: false,
-    rawYaml: '# this is placeholder yaml'
+    RawYAML: JSON.stringify(this.props.resource.RawYAML)
   }
 
   renderIcon = (kind: string) => {
@@ -50,8 +50,8 @@ export default class ResourceItem extends Component<PropsType, StateType> {
       return (
         <ExpandWrapper>
           <YamlEditor
-            value={this.state.rawYaml}
-            onChange={(e: any) => this.setState({ rawYaml: e })}
+            value={this.state.RawYAML}
+            onChange={(e: any) => this.setState({ RawYAML: e })}
             height='300px'
           />
         </ExpandWrapper>
@@ -70,14 +70,14 @@ export default class ResourceItem extends Component<PropsType, StateType> {
           <i className="material-icons">arrow_right</i>
 
           <ClickWrapper onClick={toggleKindLabels}>
-            {this.renderIcon(resource.kind)}
-            {showKindLabels ? `${resource.kind}` : null}
+            {this.renderIcon(resource.Kind)}
+            {showKindLabels ? `${resource.Kind}` : null}
           </ClickWrapper>
 
           <ResourceName
             showKindLabels={showKindLabels}
           >
-            {resource.name}
+            {resource.Name}
           </ResourceName>
         </ResourceHeader>
         {this.renderExpanded()}

dashboard/src/shared/api.tsx

@@ -58,6 +58,14 @@ const getChart = baseApi<{
   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<{
   context: string
 }>('GET', '/api/k8s/namespaces');
@@ -99,6 +107,7 @@ export default {
   getContexts,
   getCharts,
   getChart,
+  getChartComponents,
   getNamespaces,
   getRevisions,
   rollbackChart,

dashboard/src/shared/types.tsx

@@ -31,9 +31,9 @@ export interface ChartType {
 }
 
 export interface ResourceType {
-  kind: string,
-  name: string,
-  rawYaml: Object
+  Kind: string,
+  Name: string,
+  RawYAML: Object
 }
 
 export enum StorageType {

server/api/release_handler.go

@@ -2,6 +2,7 @@ package api
 
 import (
 	"encoding/json"
+	"fmt"
 	"net/http"
 	"net/url"
 	"strconv"
@@ -9,6 +10,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 +99,60 @@ 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
+	}
+
+	fmt.Println(release.Manifest)
+
+	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

@@ -29,6 +29,7 @@ func New(a *api.App, store sessions.Store, cookieName string) *chi.Mux {
 
 		// /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)))