Merge pull request #634 from porter-dev/master

Highlight integration

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

@@ -330,7 +330,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;
     });

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/ExpandedJobChart.tsx

@@ -400,11 +400,12 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
           <BodyWrapper>
             <FormWrapper
               formData={this.state.formData}
-              isReadOnly={true}
               tabOptions={this.state.tabOptions}
               isInModal={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>",