#328: added Artifact Manager to Experiments page

fabric-testbed · Jul 11, 2024 · c56cb5d · c56cb5d
1 parent 9b721e8
commit c56cb5d
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 53 deletions.
diff --git a/src/components/Experiment/ArtifactManager.jsx b/src/components/Experiment/ArtifactManager.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { default as portalData } from "../../services/portalData.json";
+import { default as config } from "../../config.json";
+
+class ArtifactManager extends React.Component {
+  render() {
+    return (
+      <div className="col-9">
+        <div>
+          <h1 className="mb-4">Artifact Manager</h1>
+          <div className="alert alert-primary mb-2" role="alert">
+            Please consult &nbsp;
+            <a
+              href={portalData.learnArticles.guideToUseArtifactManager}
+              target="_blank"
+              rel="noreferrer"
+            >
+              this guide
+            </a>&nbsp;
+            for FABRIC Artifact Manager.
+          </div>
+          <a
+            href={config.artifactManagerManagerAppUrl}
+            className="btn btn-outline-primary my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <i className="fa fa-sign-in mr-2"></i>
+            Open Artifact Manager
+          </a>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ArtifactManager;
diff --git a/src/components/Experiment/Projects.jsx b/src/components/Experiment/Projects.jsx
@@ -147,9 +147,6 @@ class Projects extends React.Component {
       projectsCount, searchQuery } = this.state;
     const { globalRoles } = this.props;
 
-    console.log("Projects");
-    console.log(globalRoles);
-
     return (
       <div className="col-9">
         <div className="d-flex flex-row justify-content-between">

diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
@@ -33,44 +33,31 @@ class Slices extends React.Component {
     sortColumn: { path: "name", order: "asc" },
     showSpinner: false,
     spinnerText: "",
-    radioBtnValues: [
-      { display: "My Slices", value: "mySlices", isActive: true },
-      { display: "Project Slices", value: "projectSlices", isActive: false },
-    ],
+    showAllSlices: false
   };
 
   async componentDidMount() {
     // Show loading spinner and when waiting API response
     this.setState({ showSpinner: true, spinnerText: "Loading slices..." });
     try {
       if (window.location.href.includes("/projects")) {
-        if(!localStorage.getItem("idToken")) {
-          // call credential manager to generate tokens
-          autoCreateTokens("all").then(async () => {
-            const { data: res } = await getMySlices("mySlices");
-            const slices = res.data.filter(s => s.project_id === this.props.projectId);
-            this.setState({ slices, showSpinner: false, spinnerText: "" });
-          });
-        } else {
-            const { data: res } = await getMySlices("mySlices");
-            const slices = res.data.filter(s => s.project_id === this.props.projectId);
-            this.setState({ slices, showSpinner: false, spinnerText: "" });
-        }
+        // call credential manager to generate project based tokens
+        autoCreateTokens(this.props.projectId).then(async () => {
+          // as_self: true
+          const { data: res } = await getMySlices("mySlices", true);
+          this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
+        });
       } else {
         // call PR first to check if the user has project.
         const { data: res } = await getProjects("myProjects", 0, 200);
         if (res.results.length === 0) {
           this.setState({ hasProject: false, showSpinner: false, spinnerText: "" });
-        } else if(!localStorage.getItem("idToken")) {
+        } else{
           // call credential manager to generate tokens
           autoCreateTokens("all").then(async () => {
-              const { data: res } = await getMySlices("allSlices");
-              this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
-            });
-          }
-        else {
-          const { data: res } = await getMySlices("allSlices");
-          this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
+            const { data: res } = await getMySlices("allSlices");
+            this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
+          });
         }
       }
     } catch (err) {
@@ -107,6 +94,18 @@ class Slices extends React.Component {
     this.setState( { includeDeadSlices: !currentChoice });
   }
 
+  handleShowAllSlices = async () => {
+    const currentChoice = this.state.showAllSlices;
+    this.setState( { showAllSlice: !currentChoice, showSpinner: true, spinnerText: "Loading Slices..." });
+
+    try {
+      const { data: res } = await getMySlices("mySlices", currentChoice);
+      this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
+    } catch(err) {
+      toast.error("Failed to load slices. Please try again.")
+    }
+  }
+
   handleDeleteAllSlices = async () => {
     try {
       this.setState({
@@ -303,6 +302,14 @@ class Slices extends React.Component {
                 isChecked={includeDeadSlices}
                 onCheck={this.handleIncludeDeadSlices}
               />
+              {
+                this.props.parent === "Projects" && <Checkbox
+                  label={"Show All Project Slices"}
+                  id={"checkbox-show-all-slices"}
+                  isChecked={showAllSlices}
+                  onCheck={this.handleShowAllSlices}
+                />
+              }
               {/* {
                 this.props.parent === "Projects" && totalCount > 0 && !includeDeadSlices &&
                 <DeleteModal

diff --git a/src/components/Project/Community/Funding.jsx b/src/components/Project/Community/Funding.jsx
@@ -66,8 +66,6 @@ class Funding extends React.Component {
   }
 
   parseFundingStr = (funding) => {
-    console.log("funding parser");
-    console.log(funding);
     if (funding.agency === "Other") {
       return `${funding.agency_other} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
     } else if (funding.agency === "NSF") {
@@ -82,8 +80,6 @@ class Funding extends React.Component {
     const { agency, directorate, award_number, 
       award_amount, agency_options, directorate_options, agency_other } = this.state;
     const { fundings } = this.props;
-    console.log("Funding.jsx");
-    console.log(fundings);
     return (
       <div className="border-top mt-4 pt-2">
         <h5 className="mt-2">Funding Information</h5>

diff --git a/src/components/Project/Personnel/ProjectUserTable.jsx b/src/components/Project/Personnel/ProjectUserTable.jsx
@@ -65,7 +65,6 @@ class ProjectUserTable extends Component {
     ];
 
   // handleCheckAll = () => {
-  //   console.log("the checked all is clicked");
   //   if (this.state.checkedAll) {
   //     this.setState({ checkedAll: false, checkedUserIDs: [] });
   //   } else {

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -30,6 +30,17 @@ class ProjectProfile extends Component {
     ]
   }
 
+  parseFundingStr = (funding) => {
+    if (funding.agency === "Other") {
+      return `${funding.agency_other} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    } else if (funding.agency === "NSF") {
+      return `${funding.agency} | ${funding.directorate ? funding.directorate : ""} |
+      ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    } else {
+      return `${funding.agency} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    }
+  }
+
   render() {
     const { basicInfoRows, projectPersonnelColumns } = this.state;
     const { project } = this.props;
@@ -135,9 +146,7 @@ class ProjectProfile extends Component {
                           className="my-2"
                           key={`project-funding-${index}`}
                         >
-                          {
-                            `${funding.agency} | ${funding.directorate} | ${funding.award_number} | ${funding.award_amount}`
-                          }
+                          { this.parseFundingStr(funding) }
                         </li>
                     })
                   }

diff --git a/src/components/Project/Public/PublicProjectProfile.jsx b/src/components/Project/Public/PublicProjectProfile.jsx
@@ -25,6 +25,17 @@ class PublicProjectProfile extends Component {
     }
   }
 
+  parseFundingStr = (funding) => {
+    if (funding.agency === "Other") {
+      return `${funding.agency_other} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    } else if (funding.agency === "NSF") {
+      return `${funding.agency} | ${funding.directorate ? funding.directorate : ""} |
+      ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    } else {
+      return `${funding.agency} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+    }
+  }
+
   render() {
     const { project } = this.state;
     return (
@@ -48,9 +59,7 @@ class PublicProjectProfile extends Component {
                           className="my-2"
                           key={`project-funding-${index}`}
                         >
-                          {
-                            `${funding.agency} | ${funding.directorate} | ${funding.award_number} | ${funding.award_amount}`
-                          }
+                          { this.parseFundingStr(funding) }
                         </li>
                     })
                   }

diff --git a/src/components/Resource/DetailTable.jsx b/src/components/Resource/DetailTable.jsx
@@ -81,7 +81,7 @@ const DetailTable = props => {
               {
                 resource && parent !== "sitepage" && 
                 <Link
-                  to={`/sites/${resource.id}`}
+                  to={`/sites/${resource.name}`}
                   state={{ data: resource }}
                 >
                   {`${sitesNameMapping.shortNameToAcronym[name]} (${sitesNameMapping.shortToLongName[name]})`}

diff --git a/src/components/common/CalendarDateTime.jsx b/src/components/common/CalendarDateTime.jsx
@@ -10,7 +10,7 @@ function CalendarDateTime({ id, name, parent, onTimeChange, time }) {
         onChange={(value) => {onChange(value); onTimeChange(value);}}
         value={value}
         disableClock={true}
-        minDate={new Date()}
+        // minDate={new Date()}
         required={true}
         format="yyyy-MM-dd HH:mm:ss"
       />

diff --git a/src/pages/Experiments.jsx b/src/pages/Experiments.jsx
@@ -5,6 +5,7 @@ import Slices from "../components/Experiment/Slices";
 import Projects from "../components/Experiment/Projects";
 import Tokens from "../components/Experiment/Tokens";
 import Keys from "../components/Experiment/Keys";
+import ArtifactManager from "../components/Experiment/ArtifactManager";
 
 class Experiments extends React.Component {
   state = {
@@ -13,11 +14,12 @@ class Experiments extends React.Component {
       { name: "MY SLICES", active: false },
       { name: "MANAGE TOKENS", active: false },
       { name: "MANAGE SSH KEYS", active: false },
+      { name: "Artifact Manager", active: false },
     ],
     user: {},
     people: {},
     activeIndex: 0,
-    componentNames: [Projects, Slices, Tokens, Keys],
+    componentNames: [Projects, Slices, Tokens, Keys, ArtifactManager],
   };
 
   async componentDidMount() {
@@ -28,6 +30,7 @@ class Experiments extends React.Component {
       "#slices": 1,
       "#tokens": 2,
       "#sshKeys": 3,
+      "#artifacts": 4
     }
 
     if (hash) {
@@ -37,6 +40,7 @@ class Experiments extends React.Component {
         { name: "MY SLICES", active: hash === "#slices" },
         { name: "MANAGE TOKENS", active: hash === "#tokens" },
         { name: "MANAGE SSH KEYS", active: hash === "#sshKeys" },
+        { name: "Artifact Manager", active: hash === "#artifacts" },
       ]})
     }
   }
@@ -47,13 +51,15 @@ class Experiments extends React.Component {
       1: "#slices",
       2: "#tokens",
       3: "#sshKeys",
+      4: "#artifacts"
     }
     this.setState({ activeIndex: newIndex,
       SideNavItems: [
         { name: "PROJECTS & SLICES", active: newIndex === 0 },
         { name: "MY SLICES", active: newIndex === 1 },
         { name: "MANAGE TOKENS", active: newIndex === 2 },
         { name: "MANAGE SSH KEYS", active: newIndex === 3 },
+        { name: "Artifact Manager", active: newIndex === 4 },
       ]
     });
     this.props.navigate(`/experiments${indexToHash[newIndex]}`);

diff --git a/src/pages/ProjectForm.jsx b/src/pages/ProjectForm.jsx
@@ -338,12 +338,9 @@ class ProjectForm extends Form {
   }
 
   handleUpdateFunding = (operation, funding) => {
-    console.log("Project Form");
-    console.log(funding);
     if (operation === "add") {
       const fundings = this.state.projectFunding;
       fundings.push(funding);
-      console.log(fundings);
       this.setState({ projectFunding: fundings });
     } else if (operation === "remove") {
       const newFundings = [];
@@ -373,7 +370,6 @@ class ProjectForm extends Form {
   }
 
   handleUpdateMatrix = (e) => {
-    console.log("matrix" + e.target.value);
     this.setState({ fabricMatrix:  e.target.value });
   }
 

diff --git a/src/services/portalData.json b/src/services/portalData.json
@@ -84,7 +84,8 @@
     "guideToStartExperiment": "https://learn.fabric-testbed.net/knowledge-base/creating-your-first-experiment-in-jupyter-hub/",
     "guideToInstallPythonAPI": "https://learn.fabric-testbed.net/knowledge-base/install-the-python-api/",
     "guideToSliceManager": "https://learn.fabric-testbed.net/knowledge-base/fabrictestbed-slice_manager/",
-    "guideToSliceEditor": "https://learn.fabric-testbed.net/knowledge-base/slice-editor/"
+    "guideToSliceEditor": "https://learn.fabric-testbed.net/knowledge-base/slice-editor/",
+    "guideToUseArtifactManager": "https://learn.fabric-testbed.net/"
   },
   "usernameOnImageMapping": {
     "default_centos8_stream": "centos",

diff --git a/src/services/sliceService.js b/src/services/sliceService.js
@@ -4,11 +4,16 @@ import { default as config } from "../config.json";
 const apiEndpoint = `${config.orchestratorApiUrl}/slices`;
 const poasEndpoint = `${config.orchestratorApiUrl}/poas`;
 
-export function getMySlices(type) {
-  if (type === "projectSlices") {}
-  return http.get(apiEndpoint + "?as_self=true&states=All&limit=200&offset=0", {
-    headers: {'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
-  });
+export function getMySlices(type, as_self) {
+  if (type === "projectSlices") {
+    return http.get(`${apiEndpoint}?as_self=${as_self}&states=All&limit=200&offset=0`, {
+      headers: {'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
+    });
+  } else {
+    return http.get(apiEndpoint + "?as_self=true&states=All&limit=200&offset=0", {
+      headers: {'Authorization': `Bearer ${localStorage.getItem("idToken")}`}
+    });
+  }
 }
 
 export function getSliceById(id) {
@@ -23,8 +28,6 @@ export function createSlice(slice) {
     lease_end_time: slice.leaseEndTime,
     lease_start_time: slice.leaseStartTime
   }).toString();
-
-  console.log("create slice query str: " + query);
 
   const requestBody = {
     "graph_model": slice.json,