resourcelist support

dashboard/src/components/ResourceTab.tsx

@@ -4,15 +4,15 @@ import styled from 'styled-components';
 import { kindToIcon } from '../shared/rosettaStone';
 
 type PropsType = {
-  kind: string,
+  label: string,
   name: string,
   handleClick?: () => void,
   selected?: boolean,
   isLast?: boolean,
   status?: {
     label: string,
-    available: number,
-    total: number,
+    available?: number,
+    total?: number,
   } | null
 };
 
@@ -58,13 +58,23 @@ export default class ResourceTab extends Component<PropsType, StateType> {
     }
   }
 
+  getStatusText = () => {
+    let { status } = this.props;
+    if (status.available && status.total) {
+      return `${status.available}/${status.total}`;
+    } else if (status.label) {
+      return status.label;
+    }
+  }
+
   renderStatus = () => {
     let { status } = this.props;
     if (status) {
       return (
         <Status>
+          {this.getStatusText()}
+
           <StatusColor status={status.label} />
-          {status.available}/{status.total}
         </Status>
       );
     }
@@ -81,11 +91,11 @@ export default class ResourceTab extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { kind, name, children, isLast } = this.props;
+    let { label, name, children, isLast, handleClick } = this.props;
     return (
       <StyledResourceTab 
         isLast={isLast}
-        onClick={() => this.props.handleClick && this.props.handleClick()}
+        onClick={() => handleClick && handleClick()}
       >
         <ResourceHeader
           hasChildren={this.props.children && true}
@@ -96,11 +106,11 @@ export default class ResourceTab extends Component<PropsType, StateType> {
             }
           }}
         >
-          {this.renderDropdownIcon()}
           <Info>
+            {this.renderDropdownIcon()}
             <Metadata>
-              {this.renderIcon(kind)}
-              {kind}
+              {this.renderIcon(label)}
+              {label}
               <ResourceName
                 showKindLabels={true}
                 onMouseOver={() => { this.setState({ showTooltip: true }) }}
@@ -110,8 +120,8 @@ export default class ResourceTab extends Component<PropsType, StateType> {
               </ResourceName>
               {this.renderTooltip(name)}
             </Metadata>
-            {this.renderStatus()}
           </Info>
+          {this.renderStatus()}
         </ResourceHeader>
         {this.renderExpanded()}
       </StyledResourceTab>
@@ -161,18 +171,18 @@ const ResourceHeader = styled.div`
   height: 50px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   color: #ffffff66;
   user-select: none;
   padding: 8px 18px;
   padding-left: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '10px' : '22px'};
-  text-transform: capitalize;
-  cursor: pointer;
+  cursor: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? 'pointer' : ''};
   background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.expanded ? '#ffffff11' : ''};
   :hover {
-    background: #ffffff18;
+    background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '#ffffff18' : ''};
 
     > i {
-      background: #ffffff22;
+      background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '#ffffff22' : ''};
     }
   }
 `;
@@ -180,9 +190,8 @@ const ResourceHeader = styled.div`
 const Info = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  width: calc(100% - 30px);
+  width: calc(100% - 50px);
   height: 100%;
 `;
 
@@ -195,7 +204,6 @@ const Metadata = styled.div`
 
 const Status = styled.div`
   display: flex;
-  width: 50px;
   font-size: 12px;
   text-transform: capitalize;
   justify-content: flex-end;
@@ -210,11 +218,11 @@ const Status = styled.div`
 `;
 
 const StatusColor = styled.div`
-  margin-right: 7px;
-  width: 7px;
-  min-width: 7px;
-  height: 7px;
-  background: ${(props: { status: string }) => (props.status === 'running' ? '#4797ff' : props.status === 'failed' ? "#ed5f85" : "#f5cb42")};
+  margin-left: 12px;
+  width: 8px;
+  min-width: 8px;
+  height: 8px;
+  background: ${(props: { status: string }) => (props.status === 'running' || props.status === 'Ready' ? '#4797ff' : props.status === 'failed' ? "#ed5f85" : "#f5cb42")};
   border-radius: 20px;
 `;
 

dashboard/src/components/values-form/ValuesForm.tsx

@@ -12,6 +12,7 @@ import InputRow from './InputRow';
 import SelectRow from './SelectRow';
 import Helper from './Helper';
 import Heading from './Heading';
+import ResourceTab from '../ResourceTab';
 
 type PropsType = {
   onSubmit: (formValues: any) => void,
@@ -34,13 +35,6 @@ export default class ValuesForm extends Component<PropsType, StateType> {
         
         let def = (item.value && item.value[0]) || (item.settings && item.settings.default);
 
-        /* Set default value from chart config if available
-        if (this.props.config) {
-          let retrievedValue = _.get(this.props.config, key)
-          retrievedValue ? def = retrievedValue : null;
-        }
-        */
-
         switch (item.type) {
           case 'checkbox':
             formState[key] = def ? def : false;
@@ -53,6 +47,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
             break;
           case 'select':
             formState[key] = def ? def : item.settings.options[0].value;
+            break;
           default:
         }
       });
@@ -78,9 +73,25 @@ export default class ValuesForm extends Component<PropsType, StateType> {
       let key = item.name || item.variable;
       switch (item.type) {
         case 'heading':
-          return <Heading key={i}>{item.label}</Heading>
+          return <Heading key={i}>{item.label}</Heading>;
         case 'subtitle':
-          return <Helper key={i}>{item.label}</Helper>
+          return <Helper key={i}>{item.label}</Helper>;
+        case 'resource-list':
+          return (
+            <ResourceList>
+              {
+                item.value.map((resource: any, i: number) => {
+                  return (
+                    <ResourceTab
+                      label={resource.label}
+                      name={resource.name}
+                      status={{ label: resource.status }}
+                    />
+                  );
+                })
+              }
+            </ResourceList>
+          );
         case 'checkbox':
           return (
             <CheckboxRow
@@ -168,6 +179,11 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
 ValuesForm.contextType = Context;
 
+const ResourceList = styled.div`
+  margin-bottom: 15px;
+  margin-top: 20px;
+`;
+
 const DarkMatter = styled.div`
   margin-top: 0px;
 `;

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

@@ -41,14 +41,6 @@ type StateType = {
   forceRefreshRevisions: boolean, // Update revisions after upgrading values
 };
 
-/*
-  TODO: consolidate revisionPreview and currentChart (currentChart can just be the initial state)
-  In general, tab management for ExpandedChart should be refactored. Cases to handle:
-  - Hiding logs, deploy, and settings tabs when previewing old charts
-  - Toggling additional DevOps tabs
-  - Handling the currently selected tab becoming hidden (for both preview and DevOps)
-  As part of consolidating currentChart and revisionPreview, can add an isPreview bool.
-*/
 export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
     loading: true,
@@ -229,7 +221,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               return (
                 <ValuesFormWrapper key={i}>
                   <ValuesForm 
-                    sections={tab.sections} 
+                    sections={tab.sections}
                     onSubmit={this.onSubmit}
                     saveValuesStatus={saveValuesStatus}
                   />
@@ -251,7 +243,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         tabOptions.push({ value: '@' + tab.name, label: tab.label, sections: tab.sections });
       });
     }
-    console.log('1', tabOptions)
+
     // Append universal tabs
     tabOptions.push(
       { label: 'Status', value: 'status' },
@@ -259,7 +251,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       { label: 'Chart Overview', value: 'graph' },
       { label: 'Settings', value: 'settings' },
     );
-    console.log('2', tabOptions)
 
     if (this.state.devOpsMode) {
       tabOptions.push(
@@ -268,14 +259,11 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       );
     }
 
-    console.log('3', tabOptions)
-
     // Filter tabs if previewing an old revision
     if (this.state.isPreview) {
       let liveTabs = ['status', 'settings', 'deploy'];
       tabOptions = tabOptions.filter((tab: any) => !liveTabs.includes(tab.value));
     }
-    console.log('4', tabOptions)
 
     this.setState({ tabOptions });
   }

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

@@ -48,7 +48,7 @@ export default class ListSection extends Component<PropsType, StateType> {
           key={i}
           handleClick={() => this.setState({ yaml: rawYaml })}
           selected={this.state.yaml === rawYaml}
-          kind={resource.Kind}
+          label={resource.Kind}
           name={resource.Name}
           isLast={i === this.props.components.length - 1}
         />

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

@@ -1,172 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import yaml from 'js-yaml';
-
-import { kindToIcon } from '../../../../shared/rosettaStone';
-import { ResourceType } from '../../../../shared/types';
-import YamlEditor from '../../../../components/YamlEditor';
-
-
-type PropsType = {
-  resource: ResourceType,
-  toggleKindLabels: () => void,
-  showKindLabels: boolean
-};
-
-type StateType = {
-  expanded: boolean,
-  RawYAML: string
-};
-
-// A single resource block in the expanded chart list view
-export default class ResourceItem extends Component<PropsType, StateType> {
-  state = {
-    expanded: false,
-    RawYAML: yaml.dump(this.props.resource.RawYAML)
-  }
-
-  // Handle previewing old revisions
-  componentDidUpdate(prevProps: PropsType) {
-    if (prevProps.resource.RawYAML !== this.props.resource.RawYAML) {
-      this.setState({ RawYAML: yaml.dump(this.props.resource.RawYAML) });
-    }
-  }
-
-  renderIcon = (kind: string) => {
-
-    let icon = 'tonality';
-    if (Object.keys(kindToIcon).includes(kind)) {
-      icon = kindToIcon[kind]; 
-    }
-    
-    return (
-      <IconWrapper>
-        <i className="material-icons">{icon}</i>
-      </IconWrapper>
-    );
-  }
-
-  renderExpanded = () => {
-    if (this.state.expanded) {
-      return (
-        <ExpandWrapper>
-          <YamlEditor
-            value={this.state.RawYAML}
-            onChange={(e: any) => this.setState({ RawYAML: e })}
-            height='300px'
-            border={true}
-            readOnly={true}
-          />
-        </ExpandWrapper>
-      );
-    }
-  }
-
-  render() {
-    let { resource, showKindLabels, toggleKindLabels } = this.props;
-    return (
-      <StyledResourceItem>
-        <ResourceHeader
-          expanded={this.state.expanded}
-          onClick={() => this.setState({ expanded: !this.state.expanded })}
-        >
-          <i className="material-icons">arrow_right</i>
-
-          <ClickWrapper onClick={toggleKindLabels}>
-            {this.renderIcon(resource.Kind)}
-            {showKindLabels ? `${resource.Kind}` : null}
-          </ClickWrapper>
-
-          <ResourceName
-            showKindLabels={showKindLabels}
-          >
-            {resource.Name}
-          </ResourceName>
-        </ResourceHeader>
-        {this.renderExpanded()}
-      </StyledResourceItem>
-    );
-  }
-}
-
-const ExpandWrapper = styled.div`
-  padding: 12px;
-  animation: expandResource 0.3s;
-  animation-timing-function: ease-out;
-  overflow: hidden;
-  @keyframes expandResource {
-    from { height: 0px }
-    to { height: 300px }
-  }
-`;
-
-const StyledResourceItem = styled.div`
-  border-bottom: 1px solid #606166;
-`;
-
-const BigPlaceholder = styled.div`
-  height: 200px;
-  width: 100%;
-  background: blue;
-`;
-
-const ClickWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const ResourceName = styled.div`
-  color: #ffffff;
-  margin-left: ${(props: { showKindLabels: boolean }) => props.showKindLabels ? '10px' : ''};
-  text-transform: none;
-`;
-
-const IconWrapper = styled.div`
-  width: 25px;
-  height: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > i {
-    font-size: 16px;
-    color: #ffffff;
-    margin-right: 14px;
-  }
-`;
-
-const ResourceHeader = styled.div`
-  width: 100%;
-  height: 60px;
-  display: flex;
-  color: #ffffff66;
-  align-items: center;
-  padding: 15px 13px;
-  text-transform: capitalize;
-  cursor: pointer;
-  background: ${(props: { expanded: boolean }) => props.expanded ? '#ffffff11' : ''};
-  :hover {
-    background: #ffffff18;
-
-    > i {
-      background: #ffffff22;
-    }
-  }
-
-  > i {
-    margin-right: 13px;
-    font-size: 20px;
-    color: #ffffff66;
-    cursor: pointer;
-    border-radius: 20px;
-    background: ${(props: { expanded: boolean }) => props.expanded ? '#ffffff18' : ''};
-    transform: ${(props: { expanded: boolean }) => props.expanded ? 'rotate(180deg)' : ''};
-    animation: ${(props: { expanded: boolean }) => props.expanded ? 'quarterTurn 0.3s' : ''};
-    animation-fill-mode: forwards;
-
-    @keyframes quarterTurn {
-      from { transform: rotate(0deg) }
-      to { transform: rotate(90deg) }
-    }
-  }
-`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -109,7 +109,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     let status = (available == total) ? 'running' : 'waiting'
     return (
       <ResourceTab
-        kind={controller.kind}
+        label={controller.kind}
         name={controller.metadata.name}
         status={{ label: status, available, total }}
         isLast={isLast}