Merge pull request #1677 from porter-dev/nico/jobs-overhaul-add-cli-instructions

[feat] Implement modal to connect to a job through the CLI

dashboard/src/assets/command-line-icon.tsx

@@ -0,0 +1,35 @@
+import React, { SVGProps } from "react";
+import styled from "styled-components";
+
+function CommandLineIcon(props: SVGProps<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0"
+      y="0"
+      version="1.1"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+      className={props.className}
+      onClick={props.onClick}
+    >
+      <linearGradient
+        x1="825.344"
+        x2="825.344"
+        y1="-528.502"
+        y2="-529.502"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#656565"></stop>
+        <stop offset="0.618" stopColor="#1b1b1b"></stop>
+        <stop offset="0.629" stopColor="#545454"></stop>
+        <stop offset="0.983" stopColor="#3e3e3e"></stop>
+      </linearGradient>
+      <path d="M3.2 17.3L2 15.9c-.2-.2-.2-.6.1-.7l5.4-4.5c.3-.2.3-.6 0-.8L2 5.4c-.2-.2-.2-.5 0-.8l1.2-1.5c.2-.1.5-.2.7 0l7.6 6.3c.5.4.5 1.3 0 1.7l-7.6 6.3c-.2.2-.5.2-.7-.1zM21.6 21H9.4c-.3 0-.6-.2-.6-.5v-1.9c0-.3.2-.5.6-.5h12.2c.3 0 .6.2.6.5v1.9c-.1.3-.3.5-.6.5z"></path>
+    </svg>
+  );
+}
+
+export default CommandLineIcon;
+
+const SVG = styled.svg``;

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

@@ -54,6 +54,7 @@ type StateType = {
   upgradeVersion: string;
   expandedJobRun: any;
   pods: any;
+  showConnectionModal: boolean;
 };
 
 class ExpandedJobChart extends Component<PropsType, StateType> {
@@ -76,6 +77,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
 
     expandedJobRun: null as any,
     pods: null as any,
+    showConnectionModal: false,
   };
 
   getPods = (job: any, callback?: () => void) => {
@@ -592,6 +594,7 @@ class ExpandedJobChart extends Component<PropsType, StateType> {
               isAuthorized={this.props.isAuthorized}
               saveValuesStatus={this.state.saveValuesStatus}
               expandJob={(job: any) => this.setJobRun(job)}
+              chartName={this.state.currentChart?.name}
             />
           </TabWrapper>
         );

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

@@ -0,0 +1,52 @@
+import Modal from "main/home/modals/Modal";
+import React from "react";
+import { ChartType } from "shared/types";
+import styled from "styled-components";
+
+const ConnectToJobInstructionsModal: React.FC<{
+  show: boolean;
+  onClose: () => void;
+  chartName: string;
+}> = ({ show, chartName, onClose }) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Modal
+      onRequestClose={() => onClose()}
+      width="700px"
+      height="300px"
+      title="Shell Access Instructions"
+    >
+      To get shell access to this job run, make sure you have the Porter CLI
+      installed (installation instructions&nbsp;
+      <a href={"https://docs.porter.run/cli/installation"} target="_blank">
+        here
+      </a>
+      ).
+      <br />
+      <br />
+      Run the following line of code, and make sure to change the command to
+      something your container can run:
+      <Code>porter run {chartName || "[APP-NAME]"} -- [COMMAND]</Code>
+      Note that this will create a copy of the most recent job run for this
+      template.
+    </Modal>
+  );
+};
+
+export default ConnectToJobInstructionsModal;
+
+const Code = styled.div`
+  background: #181b21;
+  padding: 10px 15px;
+  border: 1px solid #ffffff44;
+  border-radius: 5px;
+  margin: 10px 0px 15px;
+  color: #ffffff;
+  font-size: 13px;
+  user-select: text;
+  line-height: 1em;
+  font-family: monospace;
+`;

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

@@ -8,6 +8,8 @@ import Logs from "../status/Logs";
 import plus from "assets/plus.svg";
 import closeRounded from "assets/close-rounded.png";
 import KeyValueArray from "components/form-components/KeyValueArray";
+import CommandLineIcon from "assets/command-line-icon";
+import ConnectToJobInstructionsModal from "./ConnectToJobInstructionsModal";
 
 type PropsType = {
   job: any;
@@ -21,6 +23,7 @@ type StateType = {
   expanded: boolean;
   configIsExpanded: boolean;
   pods: any[];
+  showConnectionModal: boolean;
 };
 
 export default class JobResource extends Component<PropsType, StateType> {
@@ -28,6 +31,7 @@ export default class JobResource extends Component<PropsType, StateType> {
     expanded: false,
     configIsExpanded: false,
     pods: [] as any[],
+    showConnectionModal: false,
   };
 
   expandJob = (event: MouseEvent) => {

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

@@ -4,6 +4,8 @@ import styled from "styled-components";
 import { PorterFormContext } from "components/porter-form/PorterFormContextProvider";
 import JobList from "./JobList";
 import SaveButton from "components/SaveButton";
+import CommandLineIcon from "assets/command-line-icon";
+import ConnectToJobInstructionsModal from "./ConnectToJobInstructionsModal";
 
 interface Props {
   isAuthorized: any;
@@ -12,6 +14,7 @@ interface Props {
   jobs: any;
   handleSaveValues: any;
   expandJob: any;
+  chartName: string;
 }
 
 /**
@@ -20,6 +23,7 @@ interface Props {
  */
 const TempJobList: React.FC<Props> = (props) => {
   const { getSubmitValues } = useContext(PorterFormContext);
+  const [showConnectionModal, setShowConnectionModal] = useState(false);
   const [searchInput, setSearchInput] = useState("");
 
   let saveButton = (
@@ -36,6 +40,15 @@ const TempJobList: React.FC<Props> = (props) => {
       >
         <i className="material-icons">play_arrow</i> Run Job
       </SaveButton>
+      <CLIModalIconWrapper
+        onClick={(e) => {
+          e.preventDefault();
+          setShowConnectionModal(true);
+        }}
+      >
+        <CLIModalIcon />
+        Shell Access
+      </CLIModalIconWrapper>
     </ButtonWrapper>
   );
 
@@ -51,6 +64,11 @@ const TempJobList: React.FC<Props> = (props) => {
         setJobs={props.setJobs}
         expandJob={props.expandJob}
       />
+      <ConnectToJobInstructionsModal
+        show={showConnectionModal}
+        onClose={() => setShowConnectionModal(false)}
+        chartName={props.chartName}
+      />
     </>
   );
 };
@@ -58,5 +76,46 @@ const TempJobList: React.FC<Props> = (props) => {
 export default TempJobList;
 
 const ButtonWrapper = styled.div`
+  display: flex;
   margin: 5px 0 35px;
+  justify-content: space-between;
+`;
+
+const CLIModalIconWrapper = styled.div`
+  height: 35px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: "Work Sans", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 20px 6px 10px;
+  text-align: left;
+  border: 1px solid #ffffff55;
+  border-radius: 8px;
+  background: #ffffff11;
+  color: #ffffffdd;
+  cursor: pointer;
+
+  :hover {
+    cursor: pointer;
+    background: #ffffff22;
+    > path {
+      fill: #ffffff77;
+    }
+  }
+
+  > path {
+    fill: #ffffff99;
+  }
+`;
+
+const CLIModalIcon = styled(CommandLineIcon)`
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+
+  > path {
+    fill: #ffffff99;
+  }
 `;