Hotfix/slice viewer (#225)

* #210: replaced mock slice data with latest response from orhcestrator api * #210: added management ip address display for VM nodes * #210: added mac address display for ports * #221: solved ssh key configuration issue when creating slices in portal * #216: added a common component for input checkboxes * #216: replaced project permissions dropdown options with multi-select checkboxes * #210: added ssh command display and copy function * #216: fixed tags update issue * #216: updated style * #210: replaced mock data with API call for slice viewer * #216: added Select All option * #216: implemented Select All function * #221: updated ssh key str * #210: fixed mac address issue * #210: added helper text for ssh command * #224: Auto pick self-enrollment links for different tiers
fabric-testbed · Oct 6, 2022 · 01c9134 · 01c9134
1 parent 0635f5a
commit 01c9134
Show file tree

Hide file tree

Showing 19 changed files with 306 additions and 17,450 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -12,12 +12,6 @@ import checkPortalType from "../utils/checkPortalType";
 import logo from "../imgs/fabric-brand.png";
 
 class Header extends React.Component {
-  jupyterLinkMap =  {
-    "alpha": portalData.jupyterHubLinks.alpha,
-    "beta": portalData.jupyterHubLinks.beta,
-    "production": portalData.jupyterHubLinks.production
-  }
-
   state = {
     nonAuthNavItems: [
       { name: "Home", path: "/", child: [], exact: true },
@@ -47,7 +41,7 @@ class Header extends React.Component {
       },
       {
         name: "JupyterHub",
-        href: this.jupyterLinkMap[checkPortalType(window.location.href)],
+        href: portalData.jupyterHubLinks[checkPortalType(window.location.href)],
         child: [],
         path: ""
       },

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -18,7 +18,7 @@ class ProjectBasicInfoTable extends Component {
   }
 
   render() {
-    const { project, canUpdate, onDeleteProject } = this.props;
+    const { project, projectTags, canUpdate, onDeleteProject } = this.props;
     return (
       <div className="table-responsive">
         <table className="table table-striped table-bordered mt-4">
@@ -27,7 +27,12 @@ class ProjectBasicInfoTable extends Component {
               <td>Project ID</td>
               <td>
                 <span className="mr-2">{ project.uuid }</span>
-                <CopyButton id={project.uuid} text=""/>
+                <CopyButton
+                  id={project.uuid}
+                  text=""
+                  showCopiedValue={true}
+                  btnStyle={"btn btn-sm btn-primary"}
+                />
               </td>
             </tr>
             <tr>
@@ -39,7 +44,7 @@ class ProjectBasicInfoTable extends Component {
                 </a>
               </td>
               <td>
-                { project.tags.length > 0 ? this.renderTags(project.tags) : "No permissions assigned" }
+                { projectTags.length > 0 ? this.renderTags(projectTags) : "No permissions assigned" }
               </td>
             </tr>
             <tr>

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -52,7 +52,12 @@ class ProjectProfile extends Component {
               <td>Project ID</td>
               <td>
                 <span className="mr-2">{ project.uuid }</span>
-                <CopyButton id={project.uuid} text=""/>
+                <CopyButton
+                  id={project.uuid}
+                  text=""
+                  btnStyle={"btn btn-sm btn-primary"}
+                  showCopiedValue={true}
+                />
               </td>
             </tr>
             <tr>

diff --git a/src/components/Signup/Step1.jsx b/src/components/Signup/Step1.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-
+import checkPortalType from "../../utils/checkPortalType";
 import { default as portalData } from "../../services/portalData.json";
 
 const Step1 = () => {
@@ -25,7 +25,7 @@ const Step1 = () => {
         <i className="fa fa-exclamation-triangle mr-2"></i> Please <b>choose your institution</b> and <b> NOT use the ORCID</b> option from the CILogon page.
         <br></br>(<b>Note</b>: the list may take a moment to populate beyond the default of ORCID).
       </div>
-        <a href={portalData.selfEnrollRequest.link}>
+        <a href={portalData.selfEnrollRequest.links[checkPortalType(window.location.href)]}>
           <button
             className="btn btn-primary mt-2"
           >

diff --git a/src/components/Slice/SlicesTable.jsx b/src/components/Slice/SlicesTable.jsx
@@ -26,6 +26,8 @@ class SlicesTable extends Component {
           <CopyButton
             id={slice.slice_id}
             text={"Slice ID"}
+            btnStyle={"btn btn-sm btn-primary"}
+            showCopiedValue={true}
           />
         ),
       },

diff --git a/src/components/SliceViewer/DetailForm.jsx b/src/components/SliceViewer/DetailForm.jsx
@@ -1,9 +1,29 @@
 import React, { Component } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import CopyButton from "../common/CopyButton";
+import { default as portalData } from "../../services/portalData.json";
 
 export default class DetailForm extends Component {
+  sshCommand = (managementIp, imageRef) => {
+    const usernameOnImageMapping = {
+      "default_centos8_stream": "centos",
+      "default_centos9_stream": "centos",
+      "default_centos_7": "centos",
+      "default_centos_8": "centos",
+      "default_debian_10": "debian",
+      "default_fedora_35": "fedora",
+      "default_rocky_8": "rocky",
+      "default_ubuntu_18": "ubuntu",
+      "default_ubuntu_20": "ubuntu",
+      "default_ubuntu_21": "ubuntu",
+      "default_ubuntu_22": "ubuntu"
+    }
+    const usernameBasedOnImage=usernameOnImageMapping[imageRef.split(",")[0]];
+    return `ssh -F <path to SSH config file> -i <path to private sliver key> ${usernameBasedOnImage}@${managementIp}`
+  }
+
   render() {
     const data = this.props.data;
-
     return (
       <div className="w-100 card ml-4">
         <form>
@@ -33,6 +53,33 @@ export default class DetailForm extends Component {
                   <label>VM Name</label>
                   <input type="text" className="form-control" defaultValue={data.properties.name} disabled/>
                 </div>
+                {
+                  data.properties.MgmtIp &&
+                  <div className="row mb-2">
+                    <label>Management IP Address</label>
+                    <input type="text" className="form-control" defaultValue={data.properties.MgmtIp} disabled/>
+                  </div>
+                }
+                {
+                  data.properties.MgmtIp && data.properties.ImageRef &&
+                  <div className="row mb-2">
+                  <label>SSH Command <a
+                    href={`${portalData.learnArticles.guideToLoginToFabricVMs}#project-permissions`} 
+                    target="_blank" rel="noreferrer" className="ml-1">
+                      <i className="fa fa-question-circle mx-2"></i>
+                    </a>
+                  </label>
+                  <div className="ssh-command">
+                    {this.sshCommand(data.properties.MgmtIp, data.properties.ImageRef)}
+                    <CopyButton
+                      id={this.sshCommand(data.properties.MgmtIp, data.properties.ImageRef)}
+                      btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+                      showCopiedValue={false}
+                      text=""
+                    />
+                  </div>
+                </div>
+                }
                 <div className="row mb-2">
                   <label>Cores</label>
                   <input type="number" className="form-control" defaultValue={data.capacities.core} disabled/>
@@ -80,6 +127,13 @@ export default class DetailForm extends Component {
                   <label>Type</label>
                   <input type="text" className="form-control" defaultValue={data.properties.type} disabled/>
                 </div>
+                {
+                  data.properties.mac &&
+                  <div className="row mb-2">
+                  <label>MAC Address</label>
+                  <input type="text" className="form-control" defaultValue={data.properties.mac} disabled/>
+                  </div>
+                }
               </div>
             }
 

diff --git a/src/components/SshKey/KeyTabs.jsx b/src/components/SshKey/KeyTabs.jsx
@@ -39,7 +39,12 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
       </div>
       <div className="alert alert-primary" role="alert">
         <span className="mr-2"><b>Bastion login</b>: {localStorage.getItem("bastionLogin")}</span>
-        <CopyButton id={localStorage.getItem("bastionLogin")} text=""></CopyButton>
+        <CopyButton
+          id={localStorage.getItem("bastionLogin")}
+          text=""
+          btnStyle={"btn btn-sm btn-primary"}
+          showCopiedValue={true}
+        />
       </div>
       <Tabs activeTab={localStorage.getItem("sshKeyType") === "bastion" ? "Bastion" : "Sliver"}>
         <div label="Sliver" number={sliverKeys.length}>

diff --git a/src/components/common/CopyButton.jsx b/src/components/common/CopyButton.jsx
@@ -14,24 +14,26 @@ class CopyButton extends Component {
   );
 
   render() {
-    const { id, text } = this.props;
+    const { id, text, btnStyle, showCopiedValue } = this.props;
+    const overlayText = showCopiedValue ? `Copied: ${id}` : `Copied!`
     return (
       <OverlayTrigger
         show={this.state.copied}
         placement="right"
         delay={{ show: 100, hide: 300 }}
         overlay={this.renderTooltip(
           `copy-success-${id}`,
-          `Copied: ${id}`
+          overlayText
         )}
       >
         <CopyToClipboard
           text={id}
           onCopy={() => this.setState({ copied: true })}
         >
           <button
-            className="btn btn-sm btn-primary"
+            className={`btn btn-sm btn-${btnStyle}`}
             onMouseLeave={() => this.setState({ copied: false })}
+            onClick={e => e.preventDefault()}
           >
             <i className="fa fa-copy"></i> { text }
           </button>

diff --git a/src/components/common/InputCheckboxes.jsx b/src/components/common/InputCheckboxes.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+const InputCheckboxes = props => {
+  const { allOptions, selectedOptions, onCheck } = props;
+
+  return ( 
+    <div className="w-100 mt-2">
+      <div className="form-check mb-2">
+        <input
+          className="form-check-input"
+          type="checkbox"
+          value=""
+          id={"selectAll"}
+          defaultChecked={selectedOptions.length === allOptions.length}
+          onClick={() => onCheck("all")}
+        />
+        <label className="form-check-label">
+          Select All
+        </label>
+      </div>
+      {
+        allOptions.map(option =>
+        <div className="form-check mb-2" key={option}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            value=""
+            id={option}
+            defaultChecked={selectedOptions.includes(option)}
+            onClick={() => onCheck(option)}
+          />
+          <label className="form-check-label">
+            { option }
+          </label>
+        </div>
+        )
+      }
+    </div>
+  );
+};
+
+export default InputCheckboxes;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -10,6 +10,7 @@ import Topomap from "../components/Resource/Topomap";
 import DetailTable from "../components/Resource/DetailTable";
 import { getResources } from "../services/resourceService.js";
 import { ToastContainer, toast } from "react-toastify";
+import checkPortalType from "../utils/checkPortalType";
 
 class Home extends React.Component {
   state = {
@@ -48,7 +49,7 @@ class Home extends React.Component {
             <ReactModal
               id={portalData.selfEnrollRequest.id}
               title={portalData.selfEnrollRequest.title}
-              link={portalData.selfEnrollRequest.link}
+              link={portalData.selfEnrollRequest.links[checkPortalType(window.location.href)]}
               content={portalData.selfEnrollRequest.content}
             />
           </div>
@@ -104,7 +105,7 @@ class Home extends React.Component {
           <span className="text-lg">This Website Uses Cookies.</span>
           <div className="mt-1 text-sm">
             We require to use cookies to provide you access to FABRIC testbed resources and to personalize the content of this site. We do not share your personal information with anyone, other than providing anonymous aggregate facility usage statistics to our funders.
-            Please accept our Cookie Policy by clicking ‘OK’. For more details, visit the <NavLink className="text-primary-light" to="/cookie-policy"><b>Cookie Policy Page</b></NavLink>.
+            Please accept our Cookie Policy by clicking "OK". For more details, visit the <NavLink className="text-primary-light" to="/cookie-policy"><b>Cookie Policy Page</b></NavLink>.
           </div>
         </CookieConsent>
         <ToastContainer />
@@ -113,4 +114,4 @@ class Home extends React.Component {
   }
 }
 
-export default Home;
+export default Home;
diff --git a/src/pages/NewSliceForm.jsx b/src/pages/NewSliceForm.jsx
@@ -314,6 +314,10 @@ class NewSliceForm extends React.Component {
       </Tooltip>
     );
 
+    const generatePublicKey = (data) => {
+      return `${data.ssh_key_type} ${data.public_key} ${data.comment}`;
+    }
+
     return (
       <div>
         {
@@ -474,8 +478,8 @@ class NewSliceForm extends React.Component {
                                   >
                                     <option value="">Choose...</option>
                                     {
-                                      sliverKeys.map(key => 
-                                        <option value={key.public_key} key={`sliverkey-${key.comment}`}>{key.comment}</option>
+                                      sliverKeys.map(key =>
+                                        <option value={generatePublicKey(key)} key={`sliverkey-${key.comment}`}>{key.comment}</option>
                                       )
                                     }
                                   </select>