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/jobs/ConnectToJobInstructionsModal.tsx

@@ -0,0 +1,49 @@
+import Modal from "main/home/modals/Modal";
+import React from "react";
+import styled from "styled-components";
+
+const ConnectToJobInstructionsModal: React.FC<{
+  show: boolean;
+  onClose: () => void;
+  job: any;
+}> = ({ show, job, onClose }) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Modal
+      onRequestClose={() => onClose()}
+      width="700px"
+      height="300px"
+      title="How to connect to a job"
+    >
+      To connect to this pod you will have to use the Porter CLI, if you don't
+      have it please follow{" "}
+      <a href={"https://docs.porter.run/cli/installation"} target="_blank">
+        this instructions
+      </a>
+      <br />
+      <br />
+      After you have the Porter CLI installed and running. You can run the next
+      line of code. Please remember to change the command to something that your
+      container can run.
+      <Code>porter run {job?.metadata?.name} -- [COMMAND]</Code>
+    </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) => {
@@ -286,6 +290,12 @@ export default class JobResource extends Component<PropsType, StateType> {
               <CommandString>{commandString}</CommandString>
               {this.renderStatus()}
               <MaterialIconTray disabled={false}>
+                <CLIModalIcon
+                  onClick={(e) => {
+                    e.preventDefault();
+                    this.setState({ showConnectionModal: true });
+                  }}
+                />
                 {this.renderStopButton()}
                 {!this.props.readOnly && (
                   <i
@@ -309,6 +319,11 @@ export default class JobResource extends Component<PropsType, StateType> {
           </MainRow>
           {this.renderLogsSection()}
         </StyledJob>
+        <ConnectToJobInstructionsModal
+          show={this.state.showConnectionModal}
+          onClose={() => this.setState({ showConnectionModal: false })}
+          job={this.props.job}
+        />
       </>
     );
   }
@@ -390,6 +405,19 @@ const Icon = styled.img`
   margin-right: 18px;
 `;
 
+const CLIModalIcon = styled(CommandLineIcon)`
+  border-radius: 20px;
+  width: 26px;
+  padding: 5px;
+  margin: 0 5px;
+  :hover {
+    background: #ffffff11;
+  }
+  > path {
+    fill: #ffffff44;
+  }
+`;
+
 const Flex = styled.div`
   display: flex;
   align-items: center;