better half-screen expanded chart render + StorageType enum

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';
@@ -39,7 +39,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
     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)

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';
@@ -40,7 +40,7 @@ export default class ChartList extends Component<PropsType, StateType> {
     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

@@ -147,18 +147,29 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     let chart = currentChart;
 
     return ( 
-      <StyledExpandedChart>
-        {this.renderInfo()}
-        <ContentSection>
-          {this.renderTabContents()}
-        </ContentSection>
-      </StyledExpandedChart>
+      <div>
+        <CloseOverlay onClick={() => setCurrentChart(null)}/>
+        <StyledExpandedChart>
+          {this.renderInfo()}
+          <ContentSection>
+            {this.renderTabContents()}
+          </ContentSection>
+        </StyledExpandedChart>
+      </div>
     );
   }
 }
 
 ExpandedChart.contextType = Context;
 
+const CloseOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
 const HeaderWrapper = styled.div`
   margin-bottom: 20px;
 `;
@@ -217,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/OverviewSection.tsx

@@ -123,7 +123,7 @@ const RadioOption = styled.div`
   width: 80px;
   padding-right: 5px;
   height: 22px;
-  background: ${(props: { selected: boolean, nudge?: boolean }) => props.selected ? '#ffffff44' : '#ffffff11'};
+  background: ${(props: { selected: boolean, nudge?: boolean }) => props.selected ? '#6A6C70' : '#424349'};
   display: flex;
   align-items: center;
   cursor: pointer;

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)
@@ -70,7 +70,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     api.rollbackChart('<token>', {
       namespace: this.props.chart.namespace,
       context: currentCluster,
-      storage: 'secret',
+      storage: StorageType.Secret,
       revision: revisionNumber
     }, {
       name: this.props.chart.name

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
 
-import { ChartType } from '../../../../shared/types';
+import { ChartType, StorageType } from '../../../../shared/types';
 import api from '../../../../shared/api';
 import { Context } from '../../../../shared/Context';
 
@@ -47,7 +47,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
     api.upgradeChartValues('<token>', {
       namespace: this.props.currentChart.namespace,
       context: currentCluster,
-      storage: 'secret',
+      storage: StorageType.Secret,
       values: this.state.values
     }, { name: this.props.currentChart.name }, (err: any, res: any) => {
       if (err) {

dashboard/src/shared/api.tsx

@@ -43,7 +43,7 @@ const getContexts = baseApi<{}, { id: number }>('GET', pathParams => {
 const getCharts = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType,
   limit: number,
   skip: number,
   byDate: boolean,
@@ -53,7 +53,7 @@ const getCharts = baseApi<{
 const getChart = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType
 }, { name: string, revision: number }>('GET', pathParams => {
   return `/api/releases/${pathParams.name}/${pathParams.revision}`;
 });
@@ -65,7 +65,7 @@ const getNamespaces = baseApi<{
 const getRevisions = baseApi<{
   namespace: string,
   context: string,
-  storage: string
+  storage: StorageType
 }, { name: string }>('GET', pathParams => {
   return `/api/releases/${pathParams.name}/history`;
 });
@@ -73,7 +73,7 @@ const getRevisions = baseApi<{
 const rollbackChart = baseApi<{
   namespace: string,
   context: string,
-  storage: string,
+  storage: StorageType,
   revision: number
 }, { name: string }>('POST', pathParams => {
   return `/api/releases/${pathParams.name}/rollback`;
@@ -82,7 +82,7 @@ const rollbackChart = baseApi<{
 const upgradeChartValues = baseApi<{
   namespace: string,
   context: string,
-  storage: string,
+  storage: StorageType,
   values: string
 }, { name: string }>('POST', pathParams => {
   return `/api/releases/${pathParams.name}/upgrade`;