Merge pull request #653 from porter-dev/master

Log newjob on staging

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

@@ -72,19 +72,16 @@ const InputWrapper = styled.div`
   align-items: center;
 `;
 
-const Input = styled.input<{ disabled: boolean, width: string }>`
+const Input = styled.input<{ disabled: boolean; width: string }>`
   outline: none;
   border: none;
   font-size: 13px;
   background: #ffffff11;
   border: 1px solid #ffffff55;
-  cursor: ${props =>
-    props.disabled ? "not-allowed" : ""};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
   border-radius: 3px;
-  width: ${props =>
-    props.width ? props.width : "270px"};
-  color: ${props =>
-    props.disabled ? "#ffffff44" : "white"};
+  width: ${(props) => (props.width ? props.width : "270px")};
+  color: ${(props) => (props.disabled ? "#ffffff44" : "white")};
   padding: 5px 10px;
   height: 35px;
 `;

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

@@ -54,7 +54,9 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
       // If no name is assigned use values.yaml variable as identifier
       let key = item.name || item.variable;
-      let isDisabled = item.settings?.disableAfterLaunch && !this.props.externalValues?.isLaunch;
+      let isDisabled =
+        item.settings?.disableAfterLaunch &&
+        !this.props.externalValues?.isLaunch;
       isDisabled = isDisabled || this.props.disabled;
 
       switch (item.type) {

dashboard/src/main/home/Home.tsx

@@ -221,8 +221,8 @@ class Home extends Component<PropsType, StateType> {
 
     // Initialize Highlight
     if (
-      window.location.href.includes("dashboard.getporter.dev")
-      && !user.email.includes("@getporter.dev")
+      window.location.href.includes("dashboard.getporter.dev") &&
+      !user.email.includes("@getporter.dev")
     ) {
       H.init("y2d13lgr");
       H.identify(user.email, { id: user.id });

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

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import yaml from "js-yaml";
 import close from "assets/close.png";
 import _ from "lodash";
+import loading from "assets/loading.gif";
 
 import { ChartType, StorageType, ClusterType } from "shared/types";
 import { Context } from "shared/Context";
@@ -15,6 +16,7 @@ import TabRegion from "components/TabRegion";
 import JobList from "./jobs/JobList";
 import SettingsSection from "./SettingsSection";
 import FormWrapper from "components/values-form/FormWrapper";
+import { PlaceHolder } from "brace";
 
 type PropsType = {
   namespace: string;
@@ -26,6 +28,7 @@ type PropsType = {
 
 type StateType = {
   currentChart: ChartType;
+  imageIsPlaceholder: boolean;
   loading: boolean;
   jobs: any[];
   tabOptions: any[];
@@ -42,6 +45,7 @@ type StateType = {
 export default class ExpandedJobChart extends Component<PropsType, StateType> {
   state = {
     currentChart: this.props.currentChart,
+    imageIsPlaceholder: false,
     loading: true,
     jobs: [] as any[],
     tabOptions: [] as any[],
@@ -76,9 +80,23 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({ currentChart: res.data, loading: false }, () => {
-          this.updateTabs();
-        });
+        let image = res.data?.config?.image?.repository;
+        if (image === "porterdev/hello-porter-job") {
+          this.setState(
+            {
+              currentChart: res.data,
+              loading: false,
+              imageIsPlaceholder: true,
+            },
+            () => {
+              this.updateTabs();
+            }
+          );
+        } else {
+          this.setState({ currentChart: res.data, loading: false }, () => {
+            this.updateTabs();
+          });
+        }
       })
       .catch(console.log);
   };
@@ -86,6 +104,8 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   refreshChart = () => this.getChartData(this.state.currentChart);
 
   mergeNewJob = (newJob: any) => {
+    console.log("newJob", newJob);
+    console.log("image?", newJob.values?.image?.repository);
     let jobs = this.state.jobs;
     let exists = false;
     jobs.forEach((job: any, i: number, self: any[]) => {
@@ -239,6 +259,19 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   renderTabContents = (currentTab: string) => {
     switch (currentTab) {
       case "jobs":
+        if (this.state.imageIsPlaceholder) {
+          return (
+            <Placeholder>
+              <TextWrap>
+                <Header>
+                  <Spinner src={loading} /> This job is currently being deployed
+                </Header>
+                Navigate to the "Actions" tab of your GitHub repo to view live
+                build logs.
+              </TextWrap>
+            </Placeholder>
+          );
+        }
         return (
           <TabWrapper>
             <JobList jobs={this.state.jobs} />
@@ -326,7 +359,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
-    let { currentCluster, currentProject } = this.context;
     let { currentChart } = this.state;
 
     window.analytics.track("Opened Chart", {
@@ -413,6 +445,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
 
           <BodyWrapper>
             <FormWrapper
+              isReadOnly={this.state.imageIsPlaceholder}
               valuesToOverride={this.state.valuesToOverride}
               clearValuesToOverride={() =>
                 this.setState({ valuesToOverride: {} })
@@ -434,6 +467,34 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
 
 ExpandedJobChart.contextType = Context;
 
+const TextWrap = styled.div``;
+
+const Header = styled.div`
+  font-weight: 500;
+  color: #aaaabb;
+  font-size: 16px;
+  margin-bottom: 15px;
+`;
+
+const Placeholder = styled.div`
+  height: 100%;
+  padding: 30px;
+  padding-bottom: 70px;
+  font-size: 13px;
+  color: #ffffff44;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Spinner = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 12px;
+  margin-bottom: -2px;
+`;
+
 const BodyWrapper = styled.div`
   width: 100%;
   height: 100%;

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

@@ -179,20 +179,6 @@ export default class SettingsSection extends Component<PropsType, StateType> {
             Delete {this.props.currentChart.name}
           </Button>
         </StyledSettingsSection>
-        <SaveButton
-          text="Save Settings"
-          onClick={() =>
-            this.redeployWithNewImage(
-              this.state.selectedImageUrl,
-              this.state.selectedTag
-            )
-          }
-          status={this.state.saveValuesStatus}
-          makeFlush={true}
-          disabled={
-            this.state.selectedImageUrl && this.state.selectedTag ? false : true
-          }
-        />
       </Wrapper>
     );
   }
@@ -286,7 +272,7 @@ const Wrapper = styled.div`
 
 const StyledSettingsSection = styled.div`
   width: 100%;
-  height: calc(100% - 65px);
+  height: calc(100%);
   background: #ffffff11;
   padding: 0 35px;
   padding-bottom: 50px;

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

@@ -130,7 +130,7 @@ export default class JobResource extends Component<PropsType, StateType> {
       envArray.forEach((env: any, i: number) => {
         envObject[env.name] = env.value;
       });
-    
+
     // Handle no config to show
     if (!commandString && _.isEmpty(envObject)) {
       return;
@@ -155,13 +155,13 @@ export default class JobResource extends Component<PropsType, StateType> {
             Hide Job Config
           </ExpandConfigBar>
           <ConfigSection>
-            {
-              commandString ? (
-                <>Command: <Command>{commandString}</Command></>
-              ) : (
-                <DarkMatter size="-18px" />
-              )
-            }
+            {commandString ? (
+              <>
+                Command: <Command>{commandString}</Command>
+              </>
+            ) : (
+              <DarkMatter size="-18px" />
+            )}
             {!_.isEmpty(envObject) && (
               <>
                 <KeyValueArray
@@ -273,7 +273,7 @@ JobResource.contextType = Context;
 
 const DarkMatter = styled.div<{ size?: string }>`
   width: 100%;
-  margin-bottom: ${props => props.size || "-13px"};
+  margin-bottom: ${(props) => props.size || "-13px"};
 `;
 
 const Command = styled.span`

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

@@ -770,12 +770,6 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 LaunchTemplate.contextType = Context;
 export default withRouter(LaunchTemplate);
 
-const Bold = styled.div`
-  font-weight: bold;
-  color: white;
-  margin-right: 5px;
-`;
-
 const CloseButton = styled.div`
   position: absolute;
   display: block;
@@ -997,12 +991,6 @@ const Polymer = styled.div`
   }
 `;
 
-const Template = styled.div`
-  display: flex;
-  align-items: center;
-  margin-right: 13px;
-`;
-
 const ClusterSection = styled.div`
   display: flex;
   align-items: center;
@@ -1020,22 +1008,6 @@ const ClusterSection = styled.div`
   }
 `;
 
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-
-  > i {
-    cursor: pointer;
-    font-size 24px;
-    color: #969Fbbaa;
-    padding: 3px;
-    border-radius: 100px;
-    :hover {
-      background: #ffffff11;
-    }
-  }
-`;
-
 const StyledLaunchTemplate = styled.div`
   width: 100%;
   padding-bottom: 150px;