helm charts integrated w/ basic info

dashboard/package-lock.json

@@ -420,6 +420,11 @@
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
+    "@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=="
+    },
     "@types/react": {
       "version": "16.9.49",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz",
@@ -1281,6 +1286,12 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
         }
       }
     },
@@ -2683,6 +2694,12 @@
           "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
           "dev": true
         },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+          "dev": true
+        },
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -5275,10 +5292,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-      "dev": true
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
     },
     "querystring": {
       "version": "0.2.0",

dashboard/package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/qs": "^6.9.5",
     "ace-builds": "^1.4.12",
     "axios": "^0.20.0",
     "dotenv": "^8.2.0",
+    "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-ace": "^9.1.3",
     "react-dom": "^16.13.1",

dashboard/src/main/Main.tsx

@@ -30,7 +30,6 @@ export default class Main extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let { setUserId } = this.context;
-    console.log('how')
     api.checkAuth('', {}, {}, (err: any, res: any) => {
       if (res.data) {
         setUserId(res.data.id)

dashboard/src/main/home/Home.tsx

@@ -40,7 +40,6 @@ export default class Home extends Component<PropsType, StateType> {
   }
 
   render() {
-    console.log(this.context)
     return (
       <StyledHome>
         <ReactModal

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

@@ -4,119 +4,48 @@ import gradient from '../../../assets/gradient.jpg';
 
 import { Context } from '../../../shared/Context';
 import api from '../../../shared/api';
+import { ChartType } from '../../../shared/types';
 
 import Chart from './chart/Chart';
 
-const dummyCharts = [
-  {
-    name: 'happy-lil-tree',
-    info: {
-      last_deployed: 'Yesterday at 2:00PM',
-      deleted: '',
-      description: 'This is the release description',
-      status: 'deployed'
-    },
-    chart: {
-      metadata: {
-        name: 'mychart',
-        home: 'https://github.com/foo/bar',
-        sources: '',
-        version: '1.10.0',
-        description: 'This is the chart description.',
-        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
-        apiVersion: 'v2'
-      },
-    },
-    version: '9',
-    namespace: 'my-namespace'
-  },
-  {
-    name: 'jolly-tiny-sprout',
-    info: {
-      last_deployed: 'Yesterday at 2:00PM',
-      deleted: '',
-      description: 'This is the release description',
-      status: 'deployed'
-    },
-    chart: {
-      metadata: {
-        name: 'mychart',
-        home: 'https://github.com/foo/bar',
-        sources: '',
-        version: '1.10.0',
-        description: 'This is the chart description.',
-        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
-        apiVersion: 'v2'
-      },
-    },
-    version: '9',
-    namespace: 'my-namespace'
-  },
-  {
-    name: 'ecstatic-puny-seed',
-    info: {
-      last_deployed: 'Yesterday at 2:00PM',
-      deleted: '',
-      description: 'This is the release description',
-      status: 'deployed'
-    },
-    chart: {
-      metadata: {
-        name: 'mychart',
-        home: 'https://github.com/foo/bar',
-        sources: '',
-        version: '1.10.0',
-        description: 'This is the chart description.',
-        icon: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
-        apiVersion: 'v2'
-      },
-    },
-    version: '9',
-    namespace: 'my-namespace'
-  }
-];
-
 type PropsType = {
 };
 
 type StateType = {
+  charts: ChartType[]
 };
 
 export default class Dashboard extends Component<PropsType, StateType> {
+  state = {
+    charts: [] as ChartType[]
+  }
 
   componentDidMount() {
     let { userId, setCurrentError, currentCluster } = this.context;
-
-    console.log(currentCluster);
     
     api.getCharts('<token>', {
-      user_id: userId,
-      helm: {
-        namespace: '',
-        context: currentCluster,
-        storage: 'memory',
-      },
-      filter: {
-        namespace: '',
-        limit: 10,
-        skip: 0,
-        byDate: false,
-        statusFilter: ['deployed']
-      }
+      namespace: '',
+      context: currentCluster,
+      storage: 'secret',
+      limit: 20,
+      skip: 0,
+      byDate: false,
+      statusFilter: ['deployed']
     }, {}, (err: any, res: any) => {
-      if (err) {
+        if (err) {
         setCurrentError(JSON.stringify(err));
       } else {
-        
-        console.log(res);
+        if (res.data) {
+          this.setState({ charts: res.data });
+        }
       }
     });
   }
 
   renderChartList = () => {
-    return dummyCharts.map((x: any, i: number) => {
+    return this.state.charts.map((x: ChartType, i: number) => {
       return (
-        <Chart name={x.name} />
+        <Chart key={i} chart={x} />
       )
     })
   }

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

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+import { ChartType } from '../../../../shared/types';
+
 type PropsType = {
-  name: string
+  chart: ChartType
 };
 
 type StateType = {
@@ -14,6 +16,7 @@ export default class Chart extends Component<PropsType, StateType> {
   }
 
   render() {
+    let { chart } = this.props;
     return ( 
       <StyledChart
         onMouseEnter={() => this.setState({ grow: true })}
@@ -22,11 +25,11 @@ export default class Chart extends Component<PropsType, StateType> {
       >
         <Title>
           <i className="material-icons">polymer</i>
-          {this.props.name}
+          {chart.name}
         </Title>
         <StatusIndicator>
           <StatusColor status={'Running'} />
-          Deployed
+          {chart.info.status}
         </StatusIndicator>
       </StyledChart>
     );
@@ -41,6 +44,7 @@ const StatusIndicator = styled.div`
   font-size: 13px;
   margin-top: 10px;
   flex-direction: row;
+  text-transform: capitalize;
   align-items: center;
   font-family: 'Hind Siliguri', sans-serif;
   margin-left: 20px;
@@ -102,7 +106,7 @@ const Title = styled.div`
 `;
 
 const StyledChart = styled.div`
-  background: #23252a;
+  background: #26282f;
   cursor: pointer;
   margin-bottom: 25px;
   padding: 1px;

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

@@ -36,7 +36,6 @@ export default class ClusterSection extends Component<PropsType, StateType> {
       if (err) {
         setCurrentError('Could not read clusters: ' + JSON.stringify(err));
       } else {
-        console.log(res);
 
         // TODO: handle uninitialized kubeconfig
         if (res.data) {

dashboard/src/shared/api.tsx

@@ -41,19 +41,13 @@ const getContexts = baseApi<{}, { id: number }>('GET', pathParams => {
 });
 
 const getCharts = baseApi<{
-  user_id: number,
-  helm: {
-    namespace: string,
-    context: string,
-    storage: string
-  },
-  filter: {
-    namespace: string,
-    limit: number,
-    skip: number,
-    byDate: boolean,
-    statusFilter: string[]
-  }
+  namespace: string,
+  context: string,
+  storage: string
+  limit: number,
+  skip: number,
+  byDate: boolean,
+  statusFilter: string[]
 }>('GET', '/api/charts');
 
 // Bundle export to allow default api import (api.<method> is more readable)

dashboard/src/shared/baseApi.tsx

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import qs from 'qs';
 
 // Partial function that accepts a generic params type and returns an api method
 export const baseApi = <T extends {}, S = {}>(requestType: string, endpoint: ((pathParams: S) => string) | string) => {
@@ -39,7 +40,10 @@ export const baseApi = <T extends {}, S = {}>(requestType: string, endpoint: ((p
       });
     } else {
       axios.get(endpointString, {
-        params
+        params,
+        paramsSerializer: function(params) {
+          return qs.stringify(params, { arrayFormat: 'repeat' })
+        }
       })
       .then(res => {
         callback && callback(null, res);

dashboard/src/shared/types.tsx

@@ -6,7 +6,7 @@ export interface KubeContextConfig {
   user: string
 }
 
-export interface Chart {
+export interface ChartType {
   name: string,
   info: {
     last_deployed: string,