expandable resource

dashboard/src/components/ExpandableResource.tsx

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import api from '../shared/api';
+import { Context } from '../shared/Context';
+
+import ResourceTab from './ResourceTab';
+
+type PropsType = {
+  resource: any,
+  handleClick?: () => void,
+  selected?: boolean,
+  isLast?: boolean,
+  roundAllCorners?: boolean,
+};
+
+type StateType = any;
+
+export default class ExpandableResource extends Component<PropsType, StateType> {
+  render() {
+    let { resource } = this.props;
+    return (
+      <ResourceTab
+        label={resource.label}
+        name={resource.name}
+        status={{ label: resource.status }}
+      >
+        <ExpandedWrapper>
+          <StatusSection>
+            <StatusHeader>
+              <Status>
+                <Key>Status:</Key> {resource.status}
+              </Status>
+              <Timestamp>Updated {resource.timestamp}</Timestamp>
+            </StatusHeader>
+            {resource.message}
+          </StatusSection>
+          {
+            Object.keys(this.props.resource.data).map((key: string, i: number) => {
+              return (
+                <Pair key={i}>
+                  <Key>{key}:</Key> 
+                  {this.props.resource.data[key]}
+                </Pair>
+              )
+            })
+          }
+        </ExpandedWrapper>
+      </ResourceTab>
+    );
+  }
+}
+
+ExpandableResource.contextType = Context;
+
+const Timestamp = styled.div`
+  font-size: 12px;
+  color: #ffffff44;
+`;
+
+const StatusHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+`;
+
+const Status = styled.div`
+  display: flex;
+  align-items: center;
+  color: #aaaabb;
+`;
+
+const StatusSection = styled.div`
+  border-radius: 5px;
+  background: #ffffff11;
+  font-size: 13px;
+  padding: 20px 20px 25px;
+`;
+
+const ExpandedWrapper = styled.div`
+  padding: 20px 20px 25px;
+`;
+
+const Pair = styled.div`  
+  margin-top: 20px;
+  font-size: 13px;
+  padding: 0 5px;
+  color: #aaaabb;
+  display: flex;
+  align-items: center;
+`;
+
+const Key = styled.div`
+  font-weight: bold;
+  color: #ffffff;
+  margin-right: 8px;
+`;

dashboard/src/components/ResourceTab.tsx

@@ -9,6 +9,7 @@ type PropsType = {
   handleClick?: () => void,
   selected?: boolean,
   isLast?: boolean,
+  roundAllCorners?: boolean,
   status?: {
     label: string,
     available?: number,
@@ -91,11 +92,12 @@ export default class ResourceTab extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { label, name, children, isLast, handleClick } = this.props;
+    let { label, name, children, isLast, handleClick, roundAllCorners } = this.props;
     return (
       <StyledResourceTab 
         isLast={isLast}
         onClick={() => handleClick && handleClick()}
+        roundAllCorners={roundAllCorners}
       >
         <ResourceHeader
           hasChildren={this.props.children && true}
@@ -133,7 +135,8 @@ const StyledResourceTab = styled.div`
   width: 100%;
   margin-bottom: 2px;
   background: #ffffff11;
-  border-bottom-left-radius: ${(props: { isLast: boolean }) => props.isLast ? '5px' : ''};
+  border-bottom-left-radius: ${(props: { isLast: boolean, roundAllCorners: boolean }) => props.isLast ? '5px' : ''};
+  border-bottom-right-radius: ${(props: { isLast: boolean, roundAllCorners: boolean }) => props.roundAllCorners && props.isLast ? '5px' : ''};
 `;
 
 const Tooltip = styled.div`
@@ -170,6 +173,7 @@ const ResourceHeader = styled.div`
   width: 100%;
   height: 50px;
   display: flex;
+  font-size: 13px;
   align-items: center;
   justify-content: space-between;
   color: #ffffff66;

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

@@ -11,7 +11,7 @@ import InputRow from './InputRow';
 import SelectRow from './SelectRow';
 import Helper from './Helper';
 import Heading from './Heading';
-import ResourceTab from '../ResourceTab';
+import ExpandableResource from '../ExpandableResource';
 
 type PropsType = {
   sections?: Section[],
@@ -22,9 +22,6 @@ type PropsType = {
 type StateType = any;
 
 export default class ValuesForm extends Component<PropsType, StateType> {
-  componentDidMount() {
-    console.log('hola senorita')
-  }
   getInputValue = (item: FormElement) => {
     let key = item.name || item.variable;
     let value = this.props.metaState[key];
@@ -50,10 +47,11 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               {
                 item.value.map((resource: any, i: number) => {
                   return (
-                    <ResourceTab
-                      label={resource.label}
-                      name={resource.name}
-                      status={{ label: resource.status }}
+                    <ExpandableResource
+                      key={i}
+                      resource={resource}
+                      isLast={i === item.value.length - 1}
+                      roundAllCorners={true}
                     />
                   );
                 })
@@ -156,6 +154,8 @@ ValuesForm.contextType = Context;
 const ResourceList = styled.div`
   margin-bottom: 15px;
   margin-top: 20px;
+  border-radius: 5px;
+  overflow: hidden;
 `;
 
 const DarkMatter = styled.div`

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

@@ -11,6 +11,7 @@ type PropsType = {
   disabled?: boolean,
   saveValuesStatus?: string | null,
   isInModal?: boolean,
+  currentTab?: string, // For resetting state when flipping b/w tabs in ExpandedChart
 };
 
 type StateType = any;
@@ -22,8 +23,6 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
   requiredFields: string[] = [];
 
   updateFormState() {
-    console.log('here')
-    console.log(this.props.formTabs)
     let metaState: any = {};
     this.props.formTabs.forEach((tab: any, i: number) => {
 
@@ -69,7 +68,9 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
   }
 
   componentDidUpdate(prevProps: PropsType) {
-    if (this.props.formTabs !== prevProps.formTabs) {
+    if (this.props.formTabs !== prevProps.formTabs || 
+      this.props.currentTab !== prevProps.currentTab
+    ) {
       this.updateFormState();
     }
   }

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

@@ -17,7 +17,6 @@ import StatusSection from './status/StatusSection';
 import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
 import ValuesForm from '../../../../components/values-form/ValuesForm';
 import SettingsSection from './SettingsSection';
-import { NavLink } from 'react-router-dom';
 
 type PropsType = {
   namespace: string,
@@ -220,6 +219,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               onSubmit={this.onSubmit}
               saveValuesStatus={this.state.saveValuesStatus}
               isInModal={true}
+              currentTab={currentTab}
             >
               {
                 (metaState: any, setMetaState: any) => {
@@ -228,11 +228,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
                     // If tab is current, render
                     if (tab.value === currentTab) {
                       return (
-                        <ValuesFormWrapper>
+                        <ValuesFormWrapper key={i}>
                           <ValuesForm
                             metaState={metaState}
                             setMetaState={setMetaState}
-                            key={i}
                             sections={tab.sections} 
                           />
                         </ValuesFormWrapper>

dashboard/src/shared/types.tsx

@@ -98,7 +98,7 @@ export interface Section {
 export interface FormElement {
   type: string,
   label: string,
-  required: boolean,
+  required?: boolean,
   name?: string,
   variable?: string,
   value?: any,