Merge pull request #629 from porter-dev/master

show job start command

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

@@ -6,6 +6,7 @@ type PropsType = {
   checked: boolean;
   toggle: () => void;
   isRequired?: boolean;
+  disabled?: boolean;
 };
 
 type StateType = {};
@@ -14,7 +15,10 @@ export default class CheckboxRow extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledCheckboxRow>
-        <CheckboxWrapper onClick={this.props.toggle}>
+        <CheckboxWrapper
+          disabled={this.props.disabled}
+          onClick={!this.props.disabled && this.props.toggle}
+        >
           <Checkbox checked={this.props.checked}>
             <i className="material-icons">done</i>
           </Checkbox>
@@ -31,10 +35,10 @@ const Required = styled.section`
   color: #fc4976;
 `;
 
-const CheckboxWrapper = styled.div`
+const CheckboxWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
-  cursor: pointer;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   font-size: 13px;
   :hover {
     > div {
@@ -43,14 +47,13 @@ const CheckboxWrapper = styled.div`
   }
 `;
 
-const Checkbox = styled.div`
+const Checkbox = styled.div<{ checked: boolean }>`
   width: 16px;
   height: 16px;
   border: 1px solid #ffffff55;
   margin: 1px 10px 0px 1px;
   border-radius: 3px;
-  background: ${(props: { checked: boolean }) =>
-    props.checked ? "#ffffff22" : "#ffffff11"};
+  background: ${(props) => (props.checked ? "#ffffff22" : "#ffffff11")};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,7 +61,7 @@ const Checkbox = styled.div`
   > i {
     font-size: 12px;
     padding-left: 0px;
-    display: ${(props: { checked: boolean }) => (props.checked ? "" : "none")};
+    display: ${(props) => (props.checked ? "" : "none")};
   }
 `;
 

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

@@ -62,7 +62,7 @@ export default class FormWrapper extends Component<PropsType, StateType> {
       let tabs = this.props.formData?.tabs;
       let requiredFields = [] as string[];
       let metaState: any = {};
-      if (tabs && !this.props.tabOptionsOnly) {
+      if (tabs) {
         tabs.forEach((tab: any, i: number) => {
           if (tab?.name && tab.label) {
             // If a tab is valid, extract state
@@ -146,7 +146,9 @@ export default class FormWrapper extends Component<PropsType, StateType> {
                 }
               });
             });
-            tabOptions.push({ value: tab.name, label: tab.label });
+            if (!this.props.tabOptionsOnly) {
+              tabOptions.push({ value: tab.name, label: tab.label });
+            }
           }
         });
       }

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

@@ -81,6 +81,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           return (
             <CheckboxRow
               key={key}
+              disabled={this.props.disabled}
               isRequired={item.required}
               checked={this.props.metaState[key]?.value}
               toggle={() =>

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

@@ -919,6 +919,7 @@ const StyledExpandedChart = styled.div`
   animation-fill-mode: forwards;
   padding: 25px;
   display: flex;
+  overflow: hidden;
   flex-direction: column;
 
   @keyframes floatIn {

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

@@ -230,9 +230,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
 
       return date2.getTime() - date1.getTime();
     });
-
-    console.log("JOBS ARE", jobs);
-
     this.setState({ jobs });
   };
 
@@ -408,11 +405,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
               isInModal={true}
               renderTabContents={this.renderTabContents}
               tabOptionsOnly={true}
-              onSubmit={(values: any) => {
-                alert("Check console output.");
-                console.log("Raw submission values:");
-                console.log(values);
-              }}
             />
           </BodyWrapper>
         </StyledExpandedChart>
@@ -610,6 +602,7 @@ const StyledExpandedChart = styled.div`
   animation-fill-mode: forwards;
   padding: 25px;
   display: flex;
+  overflow: hidden;
   flex-direction: column;
 
   @keyframes floatIn {