Patch/rel1.7.1 (#345)

* #339: updated image list for slice builder * #339: added conditional rendering for site detail page & added dropdown menu for resources page * #339: divided resources page into two independent pages * #339: added a short intro to Atifact Manager * #339: shortened previewed project description * #339: updated static info on user profile page * #339: added option to receive promotion emails * #344: added KNIT item to the navbar * #339: updated disabled style for project detail page
fabric-testbed · Aug 6, 2024 · 8312b5d · 8312b5d
1 parent 0163e1a
commit 8312b5d
Show file tree

Hide file tree

Showing 27 changed files with 234 additions and 148 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import checkGlobalRoles from "./utils/checkGlobalRoles";
 import { default as portalData } from "./services/portalData.json";
 import Home from "./pages/Home";
 import Resources from "./pages/Resources";
+import MeasurementMetrics from "./pages/static/MeasurementMetrics.jsx";
 import ProjectForm from "./pages/ProjectForm";
 import Signup from "./pages/static/Signup";
 import AUP from "./pages/static/AUP";
@@ -195,7 +196,9 @@ class App extends React.Component {
             <Route path="/community/publications" element={<Publications />} />
             <Route path="/branding" element={<Branding />} />
             <Route path="/signup/:id" element={<Signup />} />
-            <Route path="/resources/:id" element={<Resources />} />
+            <Route path="/resources" element={<Resources />} />
+            <Route path="/resources/overview" element={<Resources />} />
+            <Route path="/resources/tools" element={<MeasurementMetrics />} />
             <Route path="/help" element={<Help />} />
             <Route path="/check-cookie" element={<CheckCookie />} />
             <Route path="/slice-editor" element={<SliceEditor />} />

diff --git a/src/components/Experiment/ArtifactManager.jsx b/src/components/Experiment/ArtifactManager.jsx
@@ -8,7 +8,9 @@ class ArtifactManager extends React.Component {
       <div className="col-9">
         <div>
           <h1 className="mb-4">Artifact Manager</h1>
-          <div className="alert alert-primary mb-2" role="alert">
+          <div className="alert alert-primary mb-4" role="alert">
+            Artifact Manager is a platform for sharing and reproducing FABRIC research artifacts. It also provides a REST API for use by various clients.&nbsp;
+            An artifact consists of one or more files organized into a single directory in TGZ format (.tgz or .tar.gz).&nbsp;
             Please consult &nbsp;
             <a
               href={portalData.learnArticles.guideToUseArtifactManager}

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -13,7 +13,20 @@ import ProfileModal from './ProfileModal';
 
 const Header = (props) => {
   const navItems = (props.globalRoles && !props.globalRoles.isJupterhubUser) ? [
-    { name: "Resources", path: "/resources/all", child: [] },
+    { 
+      name: "Resources",
+      path: "/resources",
+      child: [
+        {
+          name: "Testbed Resources",
+          path: "/resources/overview"
+        },
+        {
+          name: "Measurement Metrics",
+          path: "/resources/tools"
+        }
+      ]
+    },
     {
       name: "Experiments",
       path: "/experiments",
@@ -56,6 +69,10 @@ const Header = (props) => {
           name: "News",
           href: portalData.knowledgeBaseNewsLink,
         },
+        {
+          name: "KNIT",
+          href: portalData.KNITWebsiteLink,
+        },
         {
           name: "Events",
           href: portalData.knowledgeBaseEventsLink,
@@ -84,7 +101,20 @@ const Header = (props) => {
       path: "/community"
     }
   ] : [
-    { name: "Resources", path: "/resources/all", child: [] },
+    { 
+      name: "Resources",
+      path: "/resources",
+      child: [
+        {
+          name: "Resources Overview",
+          path: "/resources/overview"
+        },
+        {
+          name: "Measuring and Monitoring Tools",
+          path: "/resources/tools"
+        }
+      ]
+    },
     {
       name: "Experiments",
       path: "/experiments",
@@ -128,6 +158,10 @@ const Header = (props) => {
           name: "News",
           href: portalData.knowledgeBaseNewsLink,
         },
+        {
+          name: "KNIT",
+          href: portalData.KNITWebsiteLink,
+        },
         {
           name: "Events",
           href: portalData.knowledgeBaseEventsLink,

diff --git a/src/components/Home/DynamicMetrics.jsx b/src/components/Home/DynamicMetrics.jsx
@@ -16,7 +16,7 @@ class DynamicMetrics extends React.Component {
         count: 0
       },
       {
-        name: "Active Users",
+        name: "Total Users",
         count: 0
       },
       {
@@ -52,7 +52,7 @@ class DynamicMetrics extends React.Component {
 
     // active users' count and total project
     metricsItems.push({
-      name: "Active Users",
+      name: "Total Users",
       count: coreMetrics.users.active_cumulative
     });
     metricsItems.push({

diff --git a/src/components/Project/Community/CommunityTags.jsx b/src/components/Project/Community/CommunityTags.jsx
@@ -34,11 +34,12 @@ class Community extends React.Component {
 
   render() {
     const { domain_options, subdomain_options, selected_domain, selected_subdomain } = this.state;
-    const { communities } = this.props;
+    const { communities, canUpdate } = this.props;
     return (
-      <div className="border-top mt-4">
+      <div>
         <h5 className="mt-2">Community</h5>
-        <div className="form-row">
+        {
+          canUpdate &&         <div className="form-row">
           <div className="form-group slice-builder-form-group col-md-4">
             <label htmlFor="inputCommunityAgency" className="slice-builder-label">
               Science Domain
@@ -84,7 +85,9 @@ class Community extends React.Component {
               Add
             </button>
           </div>
-          <div className="ml-1">
+        </div>
+        }
+        <div className="ml-1">
             <ul className="input-tag__tags">
               {
                 communities.length > 0 &&
@@ -94,17 +97,27 @@ class Community extends React.Component {
                   className="mr-2 my-2"
                 >
                   {community}
-                <i
-                  className="fa fa-times ml-2"
-                  onClick={() => {
-                    this.props.onCommunityUpdate("remove", community);
-                  }}
-                ></i>
+                  {
+                    canUpdate &&          <i
+                    className="fa fa-times ml-2"
+                    onClick={() => {
+                      this.props.onCommunityUpdate("remove", community);
+                    }}
+                  ></i>
+                  }
               </li>)
               }
             </ul>
-          </div>
         </div>
+        {
+          communities.length === 0 && !canUpdate &&
+          <div
+            className="alert alert-primary mb-2" 
+            role="alert"
+          >
+            This project has no community tag added yet.
+          </div>
+        }
       </div>
     )
   }

diff --git a/src/components/Project/Community/Funding.jsx b/src/components/Project/Community/Funding.jsx
@@ -67,23 +67,23 @@ class Funding extends React.Component {
 
   parseFundingStr = (funding) => {
     if (funding.agency === "Other") {
-      return `${funding.agency_other} | ${funding.award_number ? funding.award_number : ""} | ${funding.award_amount ? funding.award_amount : ""}`;
+      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 : ""}`;
+      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 : ""}`;
+      return `${funding.agency} ${funding.award_number ? `| ${funding.award_number}` : ""} ${funding.award_amount ? `| ${funding.award_amount}` : ""}`;
     }
   }
 
   render() {
     const { agency, directorate, award_number, 
       award_amount, agency_options, directorate_options, agency_other } = this.state;
-    const { fundings } = this.props;
+    const { fundings, canUpdate } = this.props;
     return (
-      <div className="border-top mt-4 pt-2">
+      <div className="pt-2">
         <h5 className="mt-2">Funding Information</h5>
-        <div className="form-row">
+        {
+          canUpdate &&         <div className="form-row">
           <div className="form-group slice-builder-form-group col-md-2">
             <label htmlFor="inputFundingAgency" className="slice-builder-label">
               Funding Agency*
@@ -157,6 +157,7 @@ class Funding extends React.Component {
             </button>
           </div>
         </div>
+        }
         <div className="ml-1">
             <ul className="input-tag__tags">
               {
@@ -167,14 +168,26 @@ class Funding extends React.Component {
                   className="mr-2 my-2"
                 >
                   { this.parseFundingStr(funding) }
-                <i
-                  className="fa fa-times ml-2"
-                  onClick={() => {this.props.onFundingUpdate("remove", funding);}}
-                ></i>
+                  {
+                    canUpdate && 
+                    <i
+                      className="fa fa-times ml-2"
+                      onClick={() => {this.props.onFundingUpdate("remove", funding);}}
+                    ></i>
+                  }
               </li>)
               }
             </ul>
+        </div>
+        {
+          fundings.length === 0 && !canUpdate &&
+          <div
+            className="alert alert-primary mb-2" 
+            role="alert"
+          >
+            This project has no funding added yet.
           </div>
+        }
       </div>
     )
   }

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -91,6 +91,7 @@ class ProjectBasicInfoTable extends Component {
             className="form-control"
             value={fabricMatrix}
             onChange={this.props.onMatrixUpdate}
+            disabled={!canUpdate}
           />
         </div>
         <Funding
@@ -106,7 +107,7 @@ class ProjectBasicInfoTable extends Component {
         {
           canUpdate && 
           <button
-            className="btn btn-md btn-outline-primary mt-3"
+            className="btn btn-md btn-primary mt-3"
             onClick={this.props.onUpdateProject}
           >
             Save

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -32,12 +32,11 @@ 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 : ""}`;
+      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 : ""}`;
+      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 : ""}`;
+      return `${funding.agency} ${funding.award_number ? `| ${funding.award_number}` : ""} ${funding.award_amount ? `| ${funding.award_amount}` : ""}`;
     }
   }
 

diff --git a/src/components/Project/ProjectsTable.jsx b/src/components/Project/ProjectsTable.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import Table from "../common/Table";
 import _ from "lodash";
-import Parser from 'html-react-parser';
+import shortenStr from "../../utils/shortenStr";
 
 class ProjectsTable extends Component {
   columns = {
@@ -19,7 +19,7 @@ class ProjectsTable extends Component {
         label: "Description",
         content: (project) => (
           <span>
-            {Parser(project.description)}
+            {shortenStr(this.getTextfromHTML(project.description), 200)}
           </span>
         )
       },
@@ -60,7 +60,7 @@ class ProjectsTable extends Component {
         label: "Description",
         content: (project) => (
           <span>
-            {Parser(project.description)}
+          {shortenStr(this.getTextfromHTML(project.description), 200)}
           </span>
         )
       },
@@ -92,6 +92,12 @@ class ProjectsTable extends Component {
     ]
   }
 
+  getTextfromHTML = (htmlStr) => {
+    return new DOMParser()
+    .parseFromString(htmlStr, "text/html")
+    .documentElement.textContent;
+  }
+
   render() {
     const { projects, isPublic } = this.props;
 

diff --git a/src/components/Project/Public/PublicProjectProfile.jsx b/src/components/Project/Public/PublicProjectProfile.jsx
@@ -27,12 +27,11 @@ 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 : ""}`;
+      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 : ""}`;
+      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 : ""}`;
+      return `${funding.agency} ${funding.award_number ? `| ${funding.award_number}` : ""} ${funding.award_amount ? `| ${funding.award_amount}` : ""}`;
     }
   }
 

diff --git a/src/components/Resource/SiteDetailPage.jsx b/src/components/Resource/SiteDetailPage.jsx
@@ -152,7 +152,7 @@ class SiteDetailPage extends React.Component {
         data.status && <div className="container">
         <div className="d-flex flex-row justify-content-between">
          <h1>Site - {data.name}</h1>
-         <Link to="/resources/all">
+         <Link to="/resources/overview">
            <button
              className="btn btn-sm btn-outline-primary my-3"
            >
@@ -220,7 +220,7 @@ class SiteDetailPage extends React.Component {
              </tr>
            }
            {
-             data.location && 
+             data.location && localStorage.getItem("userStatus") === "active" &&
              <tr>
                <th>Rack Location</th>
                <td>{ JSON.parse(data.location).postal }</td>
@@ -266,6 +266,17 @@ class SiteDetailPage extends React.Component {
 
        <div className="my-5">
          <h3>Resource Information</h3>
+         {
+          localStorage.getItem("userStatus") !== "active" &&
+          <div
+            className="alert alert-primary mb-2 d-flex flex-row justify-content-between align-items-center" 
+            role="alert"
+          >
+            Please log in to access resources filtering by time frame.
+          </div>
+         }
+         {
+          localStorage.getItem("userStatus") === "active" && 
           <div className="d-flex flex-row justify-content-center align-items-center">
             <span className="mr-2">From</span>
             <CalendarDateTime
@@ -296,6 +307,7 @@ class SiteDetailPage extends React.Component {
               Reset
             </button>
           </div>
+         }
           {
             showSpinner &&
             <div className="d-flex flex-column justify-content-center align-items-center mt-5">