Merge branch 'master' of https://github.com/porter-dev/porter

mergin

dashboard/package-lock.json

@@ -4054,6 +4054,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "highlight.run": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/highlight.run/-/highlight.run-1.4.3.tgz",
+      "integrity": "sha512-J3sLrvmS7wNBFhAKeGonapKFFdXAkEa4zplLL6EaZLDi1Vx7OsIvh2RVNNKDjjw11aq9I1LmTIXkXp222EyxPA=="
+    },
     "history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",

dashboard/package.json

@@ -29,6 +29,7 @@
     "d3-array": "^2.11.0",
     "d3-time-format": "^3.0.0",
     "dotenv": "^8.2.0",
+    "highlight.run": "^1.4.3",
     "ini": ">=1.3.6",
     "js-base64": "^3.6.0",
     "js-yaml": "^3.14.0",

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -295,7 +295,6 @@ export default class ContentsList extends Component<PropsType, StateType> {
                 this.state.processes &&
                 Object.keys(this.state.processes).length > 0
               ) {
-                console.log("setting procfile");
                 this.props.setProcfilePath("./Procfile");
               }
             }}

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

@@ -258,6 +258,10 @@ export default class FormWrapper extends Component<PropsType, StateType> {
   };
 
   isDisabled = () => {
+    if (this.props.saveValuesStatus == "loading") {
+      return true;
+    }
+
     let requiredMissing = false;
     this.state.requiredFields.forEach((requiredKey: string, i: number) => {
       if (!this.isSet(this.state.metaState[requiredKey]?.value)) {
@@ -330,7 +334,20 @@ export default class FormWrapper extends Component<PropsType, StateType> {
       return false;
     }
 
-    // Check if current tab is among non-form tab options{
+    let tabs = this.props.formData?.tabs;
+    if (tabs) {
+      let matchedTab = null as any;
+      tabs.forEach((tab: any, i: number) => {
+        if (tab?.name === this.state.currentTab) {
+          matchedTab = tab;
+        }
+      });
+      if (matchedTab) {
+        return true;
+      }
+    }
+
+    // Check if current tab is among non-form tab options
     let nonFormTabValues = this.props.tabOptions?.map((tab: any, i: number) => {
       return tab.value;
     });
@@ -358,7 +375,7 @@ export default class FormWrapper extends Component<PropsType, StateType> {
             text="Deploy"
             onClick={this.handleSubmit}
             status={
-              this.isDisabled()
+              this.isDisabled() && this.props.saveValuesStatus != "loading"
                 ? "Missing required fields"
                 : this.props.saveValuesStatus
             }

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

@@ -12,10 +12,10 @@ export default class RangeSelector extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledInputRow>
-        <Label>asdfasdf</Label>
+        <Label>XYZ</Label>
         <Slider
           value={12}
-          onChange={() => console.log("huh")}
+          onChange={() => console.log("xyz")}
           valueLabelDisplay="auto"
           aria-labelledby="range-slider"
         />

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

@@ -145,7 +145,6 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               type="text"
               value={this.getInputValue(item)}
               setValue={(x: string) => {
-                console.log("dafuq");
                 if (
                   item.settings &&
                   item.settings.unit &&
@@ -199,7 +198,6 @@ export default class ValuesForm extends Component<PropsType, StateType> {
                 }
 
                 // Convert to string if unit is set
-                console.log("huh", item);
                 if (
                   item.settings &&
                   item.settings.unit &&

dashboard/src/main/Main.tsx

@@ -59,7 +59,6 @@ export default class Main extends Component<PropsType, StateType> {
     api
       .getCapabilities("", {}, {})
       .then((res) => {
-        console.log(res.data);
         this.setState({ local: !res.data?.provisioner });
       })
       .catch((err) => console.log(err));

dashboard/src/main/home/Home.tsx

@@ -3,6 +3,7 @@ import { RouteComponentProps, withRouter } from "react-router";
 import styled from "styled-components";
 
 import api from "shared/api";
+import { H } from "highlight.run";
 import { Context } from "shared/Context";
 import { PorterUrl } from "shared/routing";
 import { ClusterType, ProjectType } from "shared/types";
@@ -89,7 +90,6 @@ class Home extends Component<PropsType, StateType> {
     api
       .getCapabilities("<token>", {}, {})
       .then((res) => {
-        console.log(res.data);
         this.context.setCapabilities(res.data);
       })
       .catch((err) => {
@@ -217,6 +217,14 @@ class Home extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+    let { user } = this.context;
+
+    // Initialize Highlight
+    if (window.location.href.includes("dashboard.getporter.dev")) {
+      H.init("y2d13lgr");
+      H.identify(user.email, { id: user.id });
+    }
+
     // Handle redirect from DO
     let queryString = window.location.search;
     let urlParams = new URLSearchParams(queryString);

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -514,6 +514,7 @@ const StyledExpandedChart = styled.div`
   position: absolute;
   top: 25px;
   left: 25px;
+  overflow: hidden;
   border-radius: 10px;
   background: #26272f;
   box-shadow: 0 5px 12px 4px #00000033;

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

@@ -876,6 +876,7 @@ const Title = styled.div`
   font-weight: 500;
   display: flex;
   align-items: center;
+  user-select: text;
 `;
 
 const TitleSection = styled.div`

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

@@ -400,11 +400,13 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           <BodyWrapper>
             <FormWrapper
               formData={this.state.formData}
-              isReadOnly={true}
               tabOptions={this.state.tabOptions}
               isInModal={true}
+              isReadOnly={true}
               renderTabContents={this.renderTabContents}
               tabOptionsOnly={true}
+              onSubmit={this.handleSaveValues}
+              saveValuesStatus={this.state.saveValuesStatus}
             />
           </BodyWrapper>
         </StyledExpandedChart>

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobList.tsx

@@ -24,7 +24,7 @@ export default class JobList extends Component<PropsType, StateType> {
       return (
         <>
           {this.props.jobs.map((job: any, i: number) => {
-            return <JobResource key={i} job={job} />;
+            return <JobResource key={job?.metadata?.name} job={job} />;
           })}
         </>
       );

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -150,7 +150,7 @@ export default class JobResource extends Component<PropsType, StateType> {
             <MaterialIconTray disabled={false}>
               {/* <i className="material-icons"
               onClick={this.editButtonOnClick}>mode_edit</i> */}
-              <i className="material-icons" onClick={this.expandJob}>
+              <i className="material-icons">
                 {this.state.expanded ? "expand_less" : "expand_more"}
               </i>
             </MaterialIconTray>
@@ -231,6 +231,7 @@ const MainRow = styled.div`
 
 const MaterialIconTray = styled.div`
   max-width: 60px;
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -29,10 +29,14 @@ export default class Logs extends Component<PropsType, StateType> {
     if (smooth) {
       this.parentRef.current.lastElementChild.scrollIntoView({
         behavior: "smooth",
+        block: "nearest",
+        inline: "start",
       });
     } else {
       this.parentRef.current.lastElementChild.scrollIntoView({
         behavior: "auto",
+        block: "nearest",
+        inline: "start",
       });
     }
   };

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

@@ -270,8 +270,6 @@ class LaunchTemplate extends Component<PropsType, StateType> {
       }
     }
 
-    console.log("VALUES ARE", values);
-
     api
       .deployTemplate(
         "<token>",

dashboard/src/main/home/provisioner/ProvisionerLogs.tsx

@@ -46,18 +46,18 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
       return <Message>Please select a resource.</Message>;
     }
 
-    if (selectedInfra.status == "destroyed") {
-      return (
-        <Message>
-          This resource has been auto-destroyed due to an error during
-          provisioning.
-          <div>
-            Please check with your cloud provider to make sure all resources
-            have been properly destroyed.
-          </div>
-        </Message>
-      );
-    }
+    // if (selectedInfra.status == "destroyed") {
+    //   return (
+    //     <Message>
+    //       This resource has been auto-destroyed due to an error during
+    //       provisioning.
+    //       <div>
+    //         Please check with your cloud provider to make sure all resources
+    //         have been properly destroyed.
+    //       </div>
+    //     </Message>
+    //   );
+    // }
 
     if (logs.length == 0) {
       switch (selectedInfra.status) {