Feature/static content update (#321)

* #319: updated leadership page * #319: updated cite fabric page * #317: added clarification on available/ total info on resource map * #319: updated homepage style for responsive layout * #319: updated Cite FABRIC page
fabric-testbed · Mar 15, 2024 · e3adcef · e3adcef
1 parent dd0bb1e
commit e3adcef
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fabric-portal",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",

diff --git a/src/components/Home/CapabilityIcons.jsx b/src/components/Home/CapabilityIcons.jsx
@@ -71,15 +71,16 @@ const CapabilityIcons = () => {
                     index === tabIndex ? 
                     "homepage-icon-heading-active" : 
                     "homepage-icon-heading"}
-                  >
-                    {capability.title} 
-                  </div>
+                  key={`capability-icon-${index}`}
+                >
+                  {capability.title} 
+                </div>
               )
             }
           )
         }
       </div>
-      <div className="w-75 d-flex flex-row justify-content-between mt-4 px-5">
+      <div className="fabric-capability-button">
         <Link to="/about/about-fabric">
           <button className="btn homepage-icon-btn">
             About FABRIC

diff --git a/src/components/Home/Carousel.jsx b/src/components/Home/Carousel.jsx
@@ -62,7 +62,10 @@ class Carousel extends React.Component {
         <div className="carousel-inner">
         {
           items && items.length > 0 && items.map((item, index) =>
-          <div className={`carousel-item ${index === 0? "active" : ""}`}>
+          <div
+            className={`carousel-item ${index === 0? "active" : ""}`}
+            key={`carousel-item-${index}`}
+          >
             {
               index === 0 ? 
               <img src={bg1} alt={`FABRIC Portal Homepage Slide ${index}`} className="d-block w-100"/> :

diff --git a/src/components/Resource/DetailTable.jsx b/src/components/Resource/DetailTable.jsx
@@ -57,7 +57,7 @@ const DetailTable = props => {
 
   return (
     <div>
-      <table className="table">
+      <table className="table resource-detail-table">
         <thead>
           <tr>
             <th scope="col" colSpan="2" className="text-center">
@@ -85,11 +85,21 @@ const DetailTable = props => {
               {
                 resource && parent === "sitepage" && !sitesNameMapping.acronymToShortName[name] && name
               }
+              {
+                resource &&
+                <span
+                  className={`badge badge-pill badge-${statusMapping[resource.status.state].colorName} px-2 ml-2`}
+                >
+                  { statusMapping[resource.status.state].state }
+                </span>
+              }
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr>
+        {
+            !resource &&
+            <tr>
             <td>Status</td>
             <td className="align-middle text-center">
               {
@@ -108,6 +118,16 @@ const DetailTable = props => {
               }
             </td>
           </tr>
+        }
+          {
+            resource &&
+            <tr>
+              <td className="text-md-size"><b>Resource</b></td>
+              <td className="align-middle w-75 text-md-size text-center">
+                <b>available / total</b>
+              </td>
+            </tr>
+          }
           {
             resource && rows.map((row, index) => {
               return (

diff --git a/src/imgs/leadership/bryttany-todd.jpg b/src/imgs/leadership/bryttany-todd.jpg
diff --git a/src/pages/static/AboutFABRIC.jsx b/src/pages/static/AboutFABRIC.jsx
@@ -12,7 +12,7 @@ import { default as portalData } from "../../services/portalData.json";
 const nsfAwardNumbers = [1935966, 2029176, 2029200, 2029235, 2029260, 2029261, 2330891];
 const teamMembers = [
   {
-    name: "Ilya Baldin",
+    name: "Paul Ruth",
     org: "RENCI",
     link: "https://renci.org/"
   },

diff --git a/src/pages/static/Leadership.jsx b/src/pages/static/Leadership.jsx
@@ -8,13 +8,14 @@ import TomLehman from "../../imgs/leadership/tom-lehman.jpg";
 import PaulRuth from "../../imgs/leadership/paul-ruth.jpg";
 import ZongmingFei from "../../imgs/leadership/zongming-fei.jpg";
 import DaleCarder from "../../imgs/leadership/dale-carder.jpg";
+import BryttanyTodd from "../../imgs/leadership/bryttany-todd.jpg";
 import BackgroundImage from "../../imgs/network-bg.svg";
 
 const leadershipMembers = [
   {
-    "name": "Ilya Baldin",
-    "photo": IlyaBaldin ,
-    "description": "Ilya Baldin leads RENCI’s network research and infrastructure group (NRIG). He is a networking researcher with a wide range of interests, including high-speed optical network architectures, cross-layer interactions, novel signaling schemes, and network security. He was a co-PI for the ExoGENI project – part of the GENI testbed and is now the PI and Project Director for the new FABRIC testbed. Before coming to RENCI, Baldin was the principal scientist at the Center for Advanced Network Research at the Research Triangle Institute and a network research engineer at the Advanced Network Research group at MCNC, where he was a team member and a leader of a number of federally funded research efforts. He holds PhD and MS degrees in computer science from North Carolina State University."
+    "name": "Paul Ruth",
+    "photo": PaulRuth,
+    "description": "Paul Ruth is an Assistant Director of the Network Research and Infrastructure Group at RENCI, UNC-Chapel Hill. His research interests include building and using dynamic cloud computing and network testbeds targeting computational and data-driven scientific workflows. He is a long-time contributor to several large system and networking testbeds, including GENI (ExoGENI) and Chameleon, and is now the PI and Project Director for the FABRIC testbed. He earned his Ph.D. degree in Computer Science from Purdue University in 2007."
   },
   {
     "name": "Anita Nikolich",
@@ -41,11 +42,6 @@ const leadershipMembers = [
     "photo": TomLehman,
     "description": "Tom Lehman is currently a Research Scientist for Virnao. His research interests include technologies and systems which facilitate the orchestration of high-performance network, computation, and storage resources in service of big data driven domain science application workflows. He was previously the Director of Research at the University of Maryland Mid-Atlantic Crossroads where he was responsible for leading advanced cyberinfrastructure systems research and development. Prior to joining the University of Maryland, he was a Computer Scientist and Project Leader at the University of Southern California, Information Science Institute. He received a B.S. from Virginia Tech and a M.S. in Electrical Engineering from The Johns Hopkins University."
   },
-  {
-    "name": "Paul Ruth",
-    "photo": PaulRuth,
-    "description": "Paul Ruth is a Senior Research Scientist at RENCI, UNC-Chapel Hill. He is a researcher in the network research and infrastructure (NRIG). His research interests include building and using dynamic cloud computing and network testbeds for software-defined exchanges targeted at data-driven scientific workflows. He earned his Ph.D. degree in Computer Science from Purdue University in 2007."
-  },
   {
     "name": "Zongming Fei",
     "photo": ZongmingFei,
@@ -55,6 +51,11 @@ const leadershipMembers = [
     "name": "Dale Carder",
     "photo": DaleCarder,
     "description": "Dale Carder is a Network Engineer at Lawrence Berkeley National Laboratory working on ESnet. He builds large-scale, complex, resilient, next-generation long-haul networks for International science projects such as the Large Hadron Collider (LHC). His expertise lies in the areas of dynamic provisioning, global traffic engineering and control frameworks. He comfortably works at the intersection of software, network, compute, application workflows, and systems engineering and has run R&E networks for 20 years."
+  },
+  {
+    "name": "Bryttany Todd",
+    "photo": BryttanyTodd,
+    "description": "Bryttany Todd is the Acting Assistant Director of Research at RENCI, UNC-Chapel Hill. Her interests include developing and executing project and program management strategy and operational needs . She currently manages various research projects and RENCI programs including FABRIC, MERIF, and RENCI's internship program."
   }  
 ]
 
@@ -80,6 +81,22 @@ const Leadership = () => {
         </div>
         )
       }
+      <h2>
+        Past Collaborators
+      </h2>
+      <div className="row my-5">
+          <div className="col-3">
+            <img src={IlyaBaldin} alt={`FABRIC Leadership Ilya`} className="member-photo-round"/>
+          </div>
+          <div className="col-9">
+            <h3 className="text-primary mb-3">
+              Ilya Baldin
+            </h3>
+            <p>
+              Ilya Baldin is the former leader of RENCI’s network research and infrastructure group (NRIG). He is currently working for DOE Jefferson Lab as a Data Fabric Integration Architect for the High-Performance Data Facility (HPDF). Ilya is a networking researcher with a wide range of interests, including high-speed optical network architectures, cross-layer interactions, novel signaling schemes, and network security. He was a co-PI for the ExoGENI project – part of the GENI testbed and was the PI and Project Director for the FABRIC testbed from 2019-2023 during its construction phase. Before coming to RENCI, Baldin was the principal scientist at the Center for Advanced Network Research at the Research Triangle Institute and a network research engineer at the Advanced Network Research group at MCNC, where he was a team member and a leader of a number of federally funded research efforts. He holds PhD and MS degrees in computer science from North Carolina State University.
+            </p>
+          </div>
+        </div>
     </div>
   );
 };

diff --git a/src/pages/static/Publications.jsx b/src/pages/static/Publications.jsx
@@ -1,12 +1,66 @@
 import React from "react";
 import BackgroundImage from "../../imgs/network-bg.svg";
+import CopyButton from "../../components/common/CopyButton";
 
 const Publications = () => {
   return (
     <div className="container static-page pb-5">
       <img src={BackgroundImage} alt={`static page background`} className="static-page-bg"/>
       <h1 className="mb-4">Cite FABRIC</h1>
-      <h2 className="text-primary mb-4">
+      <p>
+        When publishing a paper that utilized FABRIC to obtain the results please cite the following paper:
+      </p>
+      <div className="cite-fabric-copy">
+        {
+          `
+          Baldin, Ilya, Anita Nikolich, James Griffioen, Indermohan Inder S. Monga, Kuang-Ching Wang, Tom Lehman, and Paul Ruth. “FABRIC: A national-scale programmable experimental network infrastructure.” IEEE Internet Computing 23, no. 6 (2019): 38-47.
+          `
+        }
+        <CopyButton
+          id={
+            `Baldin, Ilya, Anita Nikolich, James Griffioen, Indermohan Inder S. Monga, Kuang-Ching Wang, Tom Lehman, and Paul Ruth. “FABRIC: A national-scale programmable experimental network infrastructure.” IEEE Internet Computing 23, no. 6 (2019): 38-47.`
+          }
+          btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+          showCopiedValue={false}
+          text=""
+        />
+      </div>
+      <p>or using <b>BibTeX</b> below:</p>
+      <div className="cite-fabric-copy">
+        {
+          `
+            @article{fabric-2019,
+              title={{FABRIC: A national-scale programmable experimental network infrastructure}},
+              author={Baldin, Ilya and Nikolich, Anita and Griffioen, James and Monga, Indermohan Inder S and Wang, Kuang-Ching and Lehman, Tom and Ruth, Paul},
+              journal={IEEE Internet Computing},
+              volume={23},
+              number={6},
+              pages={38--47},
+              publisher={IEEE}
+            }
+          `
+        }
+        <CopyButton
+          id={
+            `
+            @article{fabric-2019,
+              title={{FABRIC: A national-scale programmable experimental network infrastructure}},
+              author={Baldin, Ilya and Nikolich, Anita and Griffioen, James and Monga, Indermohan Inder S and Wang, Kuang-Ching and Lehman, Tom and Ruth, Paul},
+              journal={IEEE Internet Computing},
+              volume={23},
+              number={6},
+              pages={38--47},
+              publisher={IEEE}
+            }`
+          }
+          btnStyle={"btn btn-sm btn-secondary ml-2 py-0 px-1"}
+          showCopiedValue={false}
+          text=""
+        />
+      </div>
+      <p>This helps us track publications related to FABRIC especially when it comes to justifying continuing support for FABRIC to the funding agencies.</p>
+      <h2 className="mt-5 mb-4">Publication</h2>
+      <h3 className="text-primary mb-4">
         <u>
           <a
             href="https://ieeexplore.ieee.org/document/8972790"
@@ -16,18 +70,20 @@ const Publications = () => {
             FABRIC: A National-Scale Programmable Experimental Network Infrastructure
           </a>
         </u>
-      </h2>
+      </h3>
       <p>
       Ilya Baldin, Anita Nikolich, James Griffioen, Indermohan Inder S. Monga, Kuang-Ching Wang, Tom Lehman, Paul Ruth <br></br>
-      <u>
-        <a
-          href="https://ieeexplore.ieee.org/document/8972790"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          DOI: 10.1109/MIC.2019.2958545
-        </a>
-      </u>
+      <div className="d-flex align-items-center">
+        <u>
+          <a
+            href="https://ieeexplore.ieee.org/document/8972790"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            DOI: 10.1109/MIC.2019.2958545
+          </a>
+        </u>
+      </div>
       </p>
       <p>
         <b>Abstract:</b><br></br>

diff --git a/src/services/portalData.json b/src/services/portalData.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.6.2",
+  "version": "1.6.3",
   "defaultFacility": "FABRIC",
   "facilityOptions": ["FABRIC"],
   "keyLimit": 10,

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -89,6 +89,14 @@ h1, h2, h3, h4, h5, h6 {
   justify-content: center;
 }
 
+.fabric-capability-button {
+  width: 60%;
+  margin-top: 2.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .app-footer {
   /* Make App Footer always on top of the main-body background image */
   position: relative;
@@ -191,14 +199,14 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-@media only screen and (min-width: 1250px) {
-  .homepage-card {
-    height: 33rem;
-    max-height: 33rem;
-    min-height: 33rem;
-    overflow: scroll;
-  }
+.homepage-card {
+  height: 33rem;
+  max-height: 33rem;
+  min-height: 33rem;
+  overflow: scroll;
+}
 
+@media only screen and (min-width: 1250px) {
   .carousel-caption {
     width: 45%;
     font-size: 1.25rem; 
@@ -260,7 +268,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .static-page-bg {
-  opacity: 0.2;
+  opacity: 0.1;
   position: fixed;
   z-index: -1;
   left: 0;
@@ -816,6 +824,15 @@ ul,
   padding: 3px;
 }
 
+.cite-fabric-copy {
+  padding: 1rem 0.5rem;
+  width: 100%;
+  font-size: 90%;
+  color: rgb(77, 77, 77);
+  background-color: #f5f5f5;
+  border-radius: 5px;
+}
+
 .slice-form-element {
   width: 100%;
   background-color: #e9ecef;
@@ -1144,4 +1161,8 @@ ul,
   font-size: 85%;
   border-radius: 5px;
   padding: 0.15rem 0.5rem;
+}
+
+.resource-detail-table td {
+  padding: 0.5rem 0.75rem !important;
 }