Feature/add measuring monitoring tool links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabric-portal",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",

src/components/Resource/ToolLinks.jsx

@@ -0,0 +1,57 @@
+import InfrastructureMetrics from '../../imgs/toolLinks/InfrastructureMetrics.png';
+import PublicMetrics from '../../imgs/toolLinks/PublicMetrics.png';
+import OpticalData from '../../imgs/toolLinks/OpticalData.png';
+import Parser from 'html-react-parser';
+
+const ToolLinks = ()=> {
+  const toolsData = [
+    {
+      "title": "Public Metrics",
+      "image": PublicMetrics,
+      "content": "This site contains basic metrics concerning FABRIC network. These metrics are available to anyone. Anyone is allowed anonymous access to Grafana.",
+      "link": "https://public-metrics.fabric-testbed.net/grafana/"
+    },
+    {
+      "title": "Infrastructure Metrics",
+      "image": InfrastructureMetrics,
+      "content": "This site contains enhanced metrics concerning FABRIC site usage and availability. These metrics are available to any FABRIC user. Logon is available as an anonymous Grafana user to anyone with a FABRIC account.",
+      "link": "https://infrastructure-metrics.fabric-testbed.net/grafana/"
+    },
+    {
+      "title": "Optical Data",
+      "image": OpticalData,
+      "content": "This is a space where ESnet shares public Grafana dashboards of targeted data sets. It complements the data found at the <a href='https://my.es.net/'target='_blank' rel='noreferrer'>my.es.net portal</a>. The data comes primarily from ESnet's Stardust system and provides a flexible way to show interesting views of the data.",
+      "link": "https://public.stardust.es.net/dashboards/f/fdhq1z6q5smwwb/?orgId=2"
+    }
+  ]
+  return (
+    <div className="mt-3">
+      {
+        toolsData.map((tool, index) =>
+        <div className="tool-link-block px-3 mb-5">
+          <h3 className="text-primary">
+            {tool.title}
+          </h3>
+          <div className="row mt-3" key={`tool-link-${index}`}>
+            <div className="col-12 col-md-6">
+              <img src={tool.image} alt={`tool-link-${tool.title}`}/>
+            </div>
+            <div className="col-12 col-md-6 d-flex flex-column">
+              <p>{Parser(tool.content)}</p>
+              <a href={tool.link} target="_blank" rel="noreferrer">
+                <button
+                  className="btn btn-sm btn-outline-primary mt-2"
+                >
+                  <i className="fa fa-sign-in mr-2"></i> Open Tool
+                </button>
+              </a>
+            </div>
+          </div>
+        </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default ToolLinks;

src/pages/ProjectForm.jsx

@@ -19,6 +19,7 @@ import checkGlobalRoles from "../utils/checkGlobalRoles";
 import SpinnerFullPage from "../components/common/SpinnerFullPage";
 import Slices from "../components/Experiment/Slices";
 import moment from 'moment';
+import utcToLocalTimeParser from "../utils/utcToLocalTimeParser.js";
 import {
   getProjectById,
   getProjectTags,
@@ -665,7 +666,7 @@ class ProjectForm extends Form {
             >
               <div>
                 <i className="fa fa-exclamation-triangle mr-2"></i>
-                This project is going to expire in a month. 
+                This project is going to expire in a month on {utcToLocalTimeParser(data.expired)}. 
                 {
                   canUpdate ? <span>Please submit a ticket to renew the project.</span> : 
                   <span>Please contact your project owner to request project renewal.</span>

src/pages/Resources.jsx

@@ -5,7 +5,9 @@ import DetailTable from "../components/Resource/DetailTable";
 import Pagination from "../components/common/Pagination";
 import SearchBox from "../components/common/SearchBox";
 import SummaryTable from "../components/Resource/SummaryTable";
+import ToolLinks from "../components/Resource/ToolLinks.jsx";
 import withRouter from "../components/common/withRouter.jsx";
+import Tabs from "../components/common/Tabs";
 import { sitesNameMapping } from "../data/sites";
 import sitesParser from "../services/parser/sitesParser";
 import { getResources } from "../services/resourceService.js";
@@ -137,46 +139,53 @@ class Resources extends Component {
     return (
       <div className="container">
         <h1>Resources</h1>
-        <div className="row my-2">
-          <TestbedTable sum={this.getResourcesSum(this.state.resources)} />
-        </div>
-        <div className="row my-2">
-          <div className="col-9">
-            <Topomap
-              onChange={this.handleActiveDetailChange}
-              siteColorMapping={this.state.siteColorMapping}
-            />
+        <Tabs activeTab={"Testbed Resources"}>
+          <div label="Testbed Resources">
+            <div className="row my-2 px-3">
+              <TestbedTable sum={this.getResourcesSum(this.state.resources)} />
+            </div>
+            <div className="row my-2 px-3">
+              <div className="col-9">
+                <Topomap
+                  onChange={this.handleActiveDetailChange}
+                  siteColorMapping={this.state.siteColorMapping}
+                />
+              </div>
+              <div className="col-3">
+                <DetailTable
+                  name={activeDetailName}
+                  resource={this.getResourceByName(this.state.resources, sitesNameMapping.shortNameToAcronym[activeDetailName])}
+                  parent="resources"
+                />
+              </div>
+            </div>
+            <div className="row my-2 px-3">
+              <div className="col-12">
+                <SearchBox
+                  value={searchQuery}
+                  placeholder={"Search Resources by Site Name..."}
+                  onChange={this.handleSearch}
+                  className="my-0"
+                />
+                <p>Showing resource availability of <b>{totalCount}</b> sites.</p> 
+                <SummaryTable
+                  resources={data}
+                  sortColumn={sortColumn}
+                  onSort={this.handleSort}
+                />
+                <Pagination
+                  itemsCount={totalCount}
+                  pageSize={pageSize}
+                  currentPage={currentPage}
+                  onPageChange={this.handlePageChange}
+                />
+              </div>
+            </div>
           </div>
-          <div className="col-3">
-            <DetailTable
-              name={activeDetailName}
-              resource={this.getResourceByName(this.state.resources, sitesNameMapping.shortNameToAcronym[activeDetailName])}
-              parent="resources"
-            />
+          <div label="Measuring and Monitoring Tools">
+            <ToolLinks />
           </div>
-        </div>
-        <div className="row my-2">
-          <div className="col-12">
-            <SearchBox
-              value={searchQuery}
-              placeholder={"Search Resources by Site Name..."}
-              onChange={this.handleSearch}
-              className="my-0"
-            />
-            <p>Showing resource availability of <b>{totalCount}</b> sites.</p> 
-            <SummaryTable
-              resources={data}
-              sortColumn={sortColumn}
-              onSort={this.handleSort}
-            />
-            <Pagination
-              itemsCount={totalCount}
-              pageSize={pageSize}
-              currentPage={currentPage}
-              onPageChange={this.handlePageChange}
-            />
-          </div>
-        </div>
+        </Tabs>
       </div>
     );
   }

src/services/portalData.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.4",
+  "version": "1.6.5",
   "defaultFacility": "FABRIC",
   "facilityOptions": ["FABRIC"],
   "keyLimit": 10,

src/styles/App.scss

@@ -1165,4 +1165,13 @@ ul,
 
 .resource-detail-table td {
   padding: 0.5rem 0.75rem !important;
+}
+
+.tool-link-block img {
+  width: 100%;
+  border-radius: 2%;
+}
+
+.tool-link-block p {
+  line-height: 200%;
 }