Merge pull request #1095 from porter-dev/0.8.0-styling-hotfixes

styling hotfixes from staging

dashboard/src/components/Placeholder.tsx

@@ -3,18 +3,27 @@ import styled from "styled-components";
 
 interface Props {
   height?: string;
+  minHeight?: string;
   children: React.ReactNode;
 }
 
-const Placeholder: React.FC<Props> = ({ height, children }) => {
-  return <StyledPlaceholder height={height}>{children}</StyledPlaceholder>;
+const Placeholder: React.FC<Props> = ({ height, minHeight, children }) => {
+  return (
+    <StyledPlaceholder height={height} minHeight={minHeight}>
+      {children}
+    </StyledPlaceholder>
+  );
 };
 
 export default Placeholder;
 
-const StyledPlaceholder = styled.div<{ height: string }>`
+const StyledPlaceholder = styled.div<{
+  height: string;
+  minHeight: string;
+}>`
   width: 100%;
   height: ${(props) => props.height || "100px"};
+  minheight: ${(props) => props.minHeight || ""};
   display: flex;
   align-items: center;
   justify-content: center;

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -183,8 +183,8 @@ const Chart: React.FunctionComponent<Props> = ({
               <>
                 <Dot>•</Dot>
                 <JobStatus status={jobStatus.status}>
-                  {jobStatus.status === "running" ? "Started" : "Last run"} {jobStatus.status} at{" "}
-                  {readableDate(jobStatus.start_time)}
+                  {jobStatus.status === "running" ? "Started" : "Last run"}{" "}
+                  {jobStatus.status} at {readableDate(jobStatus.start_time)}
                 </JobStatus>
               </>
             ) : (
@@ -339,8 +339,9 @@ const Title = styled.div`
 
 const JobStatus = styled.span<{ status?: string }>`
   font-size: 13px;
-  font-weight: ${props => props.status && props.status !== "running" ? "500" : ""};
-  ${props => `
+  font-weight: ${(props) =>
+    props.status && props.status !== "running" ? "500" : ""};
+  ${(props) => `
   color: ${
     props.status === "succeeded"
       ? "rgb(56, 168, 138)"

dashboard/src/main/home/cluster-dashboard/dashboard/Metrics.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useState, useEffect } from "react";
-import { Context } from "../../../../shared/Context";
-import api from "../../../../shared/api";
+import { Context } from "shared/Context";
+import api from "shared/api";
 import styled from "styled-components";
-import Loading from "../../../../components/Loading";
-import settings from "../../../../assets/settings.svg";
-import TabSelector from "../../../../components/TabSelector";
-import CheckboxRow from "../../../../components/form-components/CheckboxRow";
+import Loading from "components/Loading";
+import settings from "assets/settings.svg";
+import TabSelector from "components/TabSelector";
+import Placeholder from "components/Placeholder";
 import ParentSize from "@visx/responsive/lib/components/ParentSize";
 import AreaChart from "../expanded-chart/metrics/AreaChart";
 import {
@@ -258,11 +258,16 @@ const Metrics: React.FC = () => {
     <LoadingWrapper>
       <Loading />
     </LoadingWrapper>
-  ) : !detected ? (
-    <p>
-      This message displays when either there's no ingress controller or nginx
-      is not installed
-    </p>
+  ) : !detected || true ? (
+    <>
+      <br />
+      <br />
+      <Placeholder height="calc(50vh - 50px)" minHeight="400px">
+        Cluster metrics unavailable. Make sure nginx-ingress and Prometheus are
+        installed.
+        <A href="/launch">Go to Launch</A>
+      </Placeholder>
+    </>
   ) : (
     <StyledMetricsSection>
       <Header>
@@ -333,8 +338,13 @@ const Metrics: React.FC = () => {
 
 export default Metrics;
 
+const A = styled.a`
+  margin-left: 5px;
+`;
+
 const LoadingWrapper = styled.div`
-  padding: 30px 0px;
+  padding: 100px 0px;
+  width: 100%;
   display: flex;
   align-items: center;
   font-size: 13px;
@@ -518,7 +528,7 @@ const StyledMetricsSection = styled.div`
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
-  margin-top: 20px;
+  margin-top: 34px;
   @keyframes floatIn {
     from {
       opacity: 0;
@@ -533,6 +543,9 @@ const StyledMetricsSection = styled.div`
 
 const Header = styled.div`
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   color: #aaaabb;
   font-size: 16px;
   margin-bottom: 15px;

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

@@ -161,7 +161,7 @@ const NotificationSettingsSection: React.FC<Props> = (props) => {
               <br />
               <SaveButton
                 onClick={() => saveChanges()}
-                text={"Save"}
+                text="Save Notification Settings"
                 clearPosition={true}
                 statusPosition={"right"}
                 disabled={props.disabled || initLoading || saveLoading}

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

@@ -210,6 +210,20 @@ const SettingsSection: React.FC<PropsType> = ({
             forceExpanded={true}
             disableImageSelect={true}
           />
+          {!loadingWebhookToken && (
+            <>
+              <Br />
+              <Br />
+              <Br />
+              <SaveButton
+                clearPosition={true}
+                statusPosition="right"
+                text="Save Source Settings"
+                status={saveValuesStatus}
+                onClick={handleSubmit}
+              />
+            </>
+          )}
           <Br />
         </>
 
@@ -264,14 +278,6 @@ const SettingsSection: React.FC<PropsType> = ({
       ) : (
         <Loading />
       )}
-      {!loadingWebhookToken && (
-        <SaveButton
-          text={saveButtonText || "Save Config"}
-          status={saveValuesStatus}
-          onClick={handleSubmit}
-          makeFlush={true}
-        />
-      )}
     </Wrapper>
   );
 };

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

@@ -47,8 +47,8 @@ class JobList extends Component<PropsType, StateType> {
                     onNo: () => {
                       this.setState({ deletionCandidate: null });
                       this.context.setCurrentOverlay(null);
-                    }
-                  })
+                    },
+                  });
                 }}
                 deleting={
                   this.state.deletionJob?.metadata?.name == job.metadata?.name
@@ -102,9 +102,7 @@ class JobList extends Component<PropsType, StateType> {
   };
 
   render() {
-    return (
-      <JobListWrapper>{this.renderJobList()}</JobListWrapper>
-    );
+    return <JobListWrapper>{this.renderJobList()}</JobListWrapper>;
   }
 }
 

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

@@ -381,7 +381,11 @@ class AWSFormSection extends Component<PropsType, StateType> {
           <Heading isAtTop={true}>
             AWS Credentials
             <GuideButton
-              onClick={() => window.open("https://docs.getporter.dev/docs/getting-started-with-porter-on-aws")}
+              onClick={() =>
+                window.open(
+                  "https://docs.getporter.dev/docs/getting-started-with-porter-on-aws"
+                )
+              }
             >
               <i className="material-icons-outlined">help</i>
               Guide

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

@@ -332,7 +332,11 @@ class GCPFormSection extends Component<PropsType, StateType> {
           <Heading isAtTop={true}>
             GCP Credentials
             <GuideButton
-              onClick={() => window.open("https://docs.getporter.dev/docs/getting-started-on-gcp")}
+              onClick={() =>
+                window.open(
+                  "https://docs.getporter.dev/docs/getting-started-on-gcp"
+                )
+              }
             >
               <i className="material-icons-outlined">help</i>
               Guide