Jelajahi Sumber

fixed image selector and number input type issues

jusrhee 5 tahun lalu
induk
melakukan
2812b8635f

+ 16 - 1
dashboard/src/components/image-selector/ImageSelector.tsx

@@ -50,6 +50,8 @@ export default class ImageSelector extends Component<PropsType, StateType> {
         if (registries.length === 0) {
           this.setState({ loading: false });
         }
+
+        // Loop over connected image registries
         registries.forEach(async (registry: any, i: number) => {
           await new Promise((nextController: (res?: any) => void) => {           
             api.getImageRepos('<token>', {}, 
@@ -60,10 +62,23 @@ export default class ImageSelector extends Component<PropsType, StateType> {
               if (err) {
                 errors.push(1);
               } else {
+
+                // Loop over found image repositories
                 let newImg = res.data.map((img: any) => {
+                  if (this.props.selectedImageUrl === img.uri) {
+                    this.setState({ 
+                      clickedImage: {
+                        kind: registry.service,
+                        source: img.uri,
+                        name: img.name,
+                        registryId: registry.id,
+                      }
+                    });
+                  }
                   return {
                     kind: registry.service, 
-                    source: img.name,
+                    source: img.uri,
+                    name: img.name,
                     registryId: registry.id,
                   }
                 })

+ 4 - 2
dashboard/src/components/image-selector/TagList.tsx

@@ -27,16 +27,18 @@ export default class TagList extends Component<PropsType, StateType> {
     loading: true,
     error: false,
     tags: [] as string[],
-    currentTag: null as string | null,
+    currentTag: this.props.selectedTag,
   }
 
   componentDidMount() {
     const { currentProject } = this.context;
+    let splits = this.props.selectedImageUrl.split('/');
+    let repoName = splits[splits.length - 1];
     api.getImageTags('<token>', {}, 
       { 
         project_id: currentProject.id,
         registry_id: this.props.registryId,
-        repo_name: this.props.selectedImageUrl,
+        repo_name: repoName,
       }, (err: any, res: any) => {
       if (err) {
         console.log(err)

+ 8 - 3
dashboard/src/components/values-form/ValuesForm.tsx

@@ -114,12 +114,17 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               type='number'
               value={this.getInputValue(item)}
               setValue={(x: number) => {
-                let val = x.toString();
+                let val: string | number = x;
                 if (Number.isNaN(x)) {
-                  val = '';
-                } else if (item.settings && item.settings.unit) {
+                  val = ''
+                }
+
+                // Convert to string if unit is set
+                if (item.settings && item.settings.unit) {
+                  val = x.toString();
                   val = val + item.settings.unit;
                 }
+                
                 this.props.setMetaState({ [key]: val });
               }}
               label={item.label}

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

@@ -48,7 +48,7 @@ type StateType = {
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
     loading: true,
-    showRevisions: true,
+    showRevisions: false,
     components: [] as ResourceType[],
     podSelectors: [] as string[],
     isPreview: false,
@@ -78,9 +78,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       id: currentProject.id
     }, (err: any, res: any) => {
       if (err) {
-        console.log('big oof')
+        console.log(err)
       } else {
-        console.log('did succeed!')
         setCurrentChart(res.data);
         this.setState({ loading: false });
 
@@ -676,7 +675,7 @@ const StyledExpandedChart = styled.div`
   top: 25px;
   left: 25px;
   border-radius: 10px;
-  background: #26282f;
+  background: #26272F;
   box-shadow: 0 5px 12px 4px #00000033;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;

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

@@ -30,10 +30,14 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     saveValuesStatus: null as (string | null),
   }
 
+  // TODO: read in set image from form context instead of config
   componentDidMount() {
     let image = this.props.currentChart.config?.image;
-    if (image?.repository) {
-      this.setState({ selectedImageUrl: image.repository });
+    if (image?.repository && image.tag) {
+      this.setState({ 
+        selectedImageUrl: image.repository, 
+        selectedTag: image.tag 
+      });
     }
   }
 

+ 0 - 1
dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -98,7 +98,6 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     let nodes = [] as NodeType[];
     let edges = [] as EdgeType[];
     if (!graph) {
-      console.log('nada')
       nodes = this.createNodes(components);
       edges = this.createEdges(components);
       this.setState({ nodes, edges });

+ 3 - 7
dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -49,16 +49,12 @@ export default class Dashboard extends Component<PropsType, StateType> {
 
           <LineBreak />
 
-          <PipelinesSection />
+          <Placeholder>
+            🚀 Pipelines coming soon.
+          </Placeholder>
         </div>
       );
     }
-
-    /*
-      <Placeholder>
-        🚀 Pipelines coming soon.
-      </Placeholder>
-    */
   }
 
   render() {

+ 1 - 1
dashboard/src/main/home/integrations/Integrations.tsx

@@ -58,7 +58,7 @@ export default class Integrations extends Component<PropsType, StateType> {
           if (err) {
             console.log(err);
           } else {
-            console.log(res.data);
+            // console.log(res.data);
           }
         });
         break;

+ 0 - 1
dashboard/src/main/home/templates/expanded-template/ExpandedTemplate.tsx

@@ -44,7 +44,6 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
       if (err) {
         this.setState({ loading: false, error: true });
       } else {
-        console.log(res.data)
         let { form, values, markdown, metadata } = res.data;
         let keywords = metadata.keywords;
         this.setState({ form, values, markdown, keywords, loading: false, error: false });

+ 1 - 0
dashboard/src/shared/types.tsx

@@ -139,4 +139,5 @@ export interface ImageType {
   kind: string,
   source: string,
   registryId: number,
+  name: string,
 }