deploy from expanded chart with new image and tag

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -14,7 +14,9 @@ import TagList from './TagList';
 type PropsType = {
   forceExpanded?: boolean,
   selectedImageUrl: string | null,
+  selectedTag: string | null,
   setSelectedImageUrl: (x: string) => void
+  setSelectedTag: (x: string) => void
 };
 
 type StateType = {
@@ -43,7 +45,8 @@ export default class ImageSelector extends Component<PropsType, StateType> {
       if (err) {
         console.log(err);
       } else {
-        res.data.forEach(async (registry: any, i: number) => {
+        let registries = res.data;
+        registries.forEach(async (registry: any, i: number) => {
           await new Promise((nextController: (res?: any) => void) => {           
             api.getImageRepos('<token>', {}, 
               { 
@@ -59,14 +62,16 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                     source: img.name
                   }
                 })
-                this.setState({
-                  images: [...images, ...newImg],
-                  registryId: registry.id,
-                  loading: false,
-                  error: false,
-                }, () => {
-                  nextController()
-                })
+                images.push(...newImg)
+                if (i == registries.length - 1) {
+                  this.setState({
+                    images,
+                    registryId: registry.id,
+                    loading: false,
+                    error: false,
+                  })
+                }
+                nextController()
               }
             });    
           })
@@ -123,7 +128,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
   }
 
   renderExpanded = () => {
-    let { selectedImageUrl, setSelectedImageUrl } = this.props;
+    let { selectedTag, selectedImageUrl, setSelectedTag } = this.props;
     if (!this.state.clickedImage) {
       return (
         <div>
@@ -138,8 +143,9 @@ export default class ImageSelector extends Component<PropsType, StateType> {
         <div>
           <ExpandedWrapper>
             <TagList
+              selectedTag={selectedTag}
               selectedImageUrl={selectedImageUrl}
-              setSelectedImageUrl={setSelectedImageUrl}
+              setSelectedTag={setSelectedTag}
               registryId={this.state.registryId}
             />
           </ExpandedWrapper>

dashboard/src/components/image-selector/TagList.tsx

@@ -9,7 +9,8 @@ import { Context } from '../../shared/Context';
 import Loading from '../Loading';
 
 type PropsType = {
-  setSelectedImageUrl: (x: string) => void,
+  setSelectedTag: (x: string) => void,
+  selectedTag: string,
   selectedImageUrl: string,
   registryId: number,
 };
@@ -38,6 +39,7 @@ export default class TagList extends Component<PropsType, StateType> {
         repo_name: this.props.selectedImageUrl,
       }, (err: any, res: any) => {
       if (err) {
+        console.log(err)
         this.setState({ loading: false, error: true });
       } else {
         let tags = res.data.map((tag: any, i: number) => {
@@ -49,18 +51,8 @@ export default class TagList extends Component<PropsType, StateType> {
   }
 
   setTag = (tag: string) => {
-    let { selectedImageUrl, setSelectedImageUrl} = this.props;
-    let splits = selectedImageUrl.split(':');
-    if (splits[splits.length - 1] === this.state.currentTag) {
-      selectedImageUrl = splits.reduce((acc: string, curr: string) => {
-        if (curr !== this.state.currentTag) {
-          return acc + ':' + curr;
-        } else {
-          return acc;
-        }
-      });
-    }
-    setSelectedImageUrl(selectedImageUrl + ':' + tag);
+    let { selectedTag, setSelectedTag } = this.props;
+    setSelectedTag(tag);
     this.setState({ currentTag: tag });
   }
 

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

@@ -173,7 +173,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       },
       {
         value: 'settings', component: (
-          <SettingsSection /> 
+          <SettingsSection
+            currentChart={chart}
+            refreshChart={refreshChart}
+          /> 
         ),
       },
       {

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -1,21 +1,62 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import api from '../../../../shared/api';
+import yaml from 'js-yaml';
 
-import { RepoType } from '../../../../shared/types';
+import { ChartType, RepoType, StorageType } from '../../../../shared/types';
+import { Context } from '../../../../shared/Context';
 
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
 import SaveButton from '../../../../components/SaveButton';
 
 type PropsType = {
+  currentChart: ChartType
+  refreshChart: () => void
 };
 
 type StateType = {
   selectedImageUrl: string | null,
+  selectedTag: string | null,
+  saveValuesStatus: string | null,
+  values: string,
 };
 
 export default class SettingsSection extends Component<PropsType, StateType> {
   state = {
     selectedImageUrl: '',
+    selectedTag: '',
+    values: '',
+    saveValuesStatus: null as (string | null),
+  }
+
+  redeployWithNewImage = (img: string, tag: string) => {
+    let { currentCluster, currentProject } = this.context;
+    console.log(img, tag)
+    let image = {
+      image: {
+        repository: img,
+        tag: tag,
+      }
+    }
+
+    let values = yaml.dump(image);
+    api.upgradeChartValues('<token>', {
+      namespace: this.props.currentChart.namespace,
+      storage: StorageType.Secret,
+      values,
+    }, {
+      id: currentProject.id, 
+      name: this.props.currentChart.name,
+      cluster_id: currentCluster.id,
+    }, (err: any, res: any) => {
+      if (err) {
+        console.log(err)
+        this.setState({ saveValuesStatus: 'error' });
+      } else {
+        this.setState({ saveValuesStatus: 'successful' });
+        this.props.refreshChart();
+      }
+    });
   }
 
   render() {
@@ -25,14 +66,16 @@ export default class SettingsSection extends Component<PropsType, StateType> {
           <Subtitle>Connected source</Subtitle>
           <ImageSelector
             selectedImageUrl={this.state.selectedImageUrl}
+            selectedTag={this.state.selectedTag}
             setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
+            setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
             forceExpanded={true}
           />
         </StyledSettingsSection>
         <SaveButton
           text='Save Settings'
-          onClick={() => console.log(this.state)}
-          status={null}
+          onClick={() => this.redeployWithNewImage(this.state.selectedImageUrl, this.state.selectedTag)}
+          status={this.state.saveValuesStatus}
           makeFlush={true}
         />
       </Wrapper>
@@ -40,6 +83,8 @@ export default class SettingsSection extends Component<PropsType, StateType> {
   }
 }
 
+SettingsSection.contextType = Context;
+
 const Subtitle = styled.div`
   color: #aaaabb;
   font-size: 13px;

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -20,6 +20,7 @@ type StateType = {
   clusterOptions: { label: string, value: string }[],
   selectedCluster: string,
   selectedImageUrl: string | null,
+  selectedTag: string | null,
   tabOptions: ChoiceType[],
   tabContents: any
 };
@@ -30,6 +31,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     clusterOptions: [] as { label: string, value: string }[],
     selectedCluster: this.context.currentCluster.name,
     selectedImageUrl: '' as string | null,
+    selectedTag: '' as string | null,
     tabOptions: [] as ChoiceType[],
     tabContents: [] as any,
   };
@@ -144,8 +146,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         <Subtitle>Select the container image you would like to connect to this template.</Subtitle>
         <Br />
         <ImageSelector
+          selectedTag={this.state.selectedTag}
           selectedImageUrl={this.state.selectedImageUrl}
           setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
+          setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
           forceExpanded={true}
         />
 

dashboard/src/shared/api.tsx

@@ -14,7 +14,7 @@ import { StorageType } from './types';
 const checkAuth = baseApi('GET', '/api/auth/check');
 
 const registerUser = baseApi<{ 
-  email: string, 
+  email: string,
   password: string
 }>('POST', '/api/users');