#333: added latency monitor tool and the badge for tab header

fabric-testbed · Jun 18, 2024 · 35e6f4d · 35e6f4d
1 parent eb840d9
commit 35e6f4d
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 31 deletions.
diff --git a/src/components/Resource/ToolLinks.jsx b/src/components/Resource/ToolLinks.jsx
@@ -1,6 +1,7 @@
 import InfrastructureMetrics from '../../imgs/toolLinks/InfrastructureMetrics.png';
 import PublicMetrics from '../../imgs/toolLinks/PublicMetrics.png';
 import OpticalData from '../../imgs/toolLinks/OpticalData.png';
+import LatencyMonitor from '../../imgs/toolLinks/LatencyMonitor.png';
 import Parser from 'html-react-parser';
 
 const ToolLinks = ()=> {
@@ -22,6 +23,13 @@ const ToolLinks = ()=> {
       "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"
+    },
+    {
+      "title": "FABRIC Latency Monitor",
+      "image": LatencyMonitor,
+      "content": "",
+      "link": "https://public-metrics.fabric-testbed.net/latency/"
+
     }
   ]
   return (

diff --git a/src/components/SshKey/KeyTabs.jsx b/src/components/SshKey/KeyTabs.jsx
@@ -48,7 +48,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
         />
       </div>
       <Tabs activeTab={localStorage.getItem("sshKeyType") === "Bastion" ? "Bastion" : "Sliver"}>
-        <div label="Sliver" number={sliverKeys? sliverKeys.length : 0}>
+        <div label="Sliver" badge={sliverKeys? sliverKeys.length : 0} color={"primary"}>
           <div className="alert alert-primary" role="alert">
             Currently the sliver keys here are only used when you build a slice via the Portal. JupyterHub uses locally-generated sliver keys.
           </div>
@@ -83,7 +83,7 @@ const KeyTabs = ({ sliverKeys, bastionKeys, disableKeyDelete, styleProp, parent
             </div>
           }
         </div>
-        <div label="Bastion" number={bastionKeys? bastionKeys.length : 0}>
+        <div label="Bastion" badge={bastionKeys? bastionKeys.length : 0} color={"primary"}>
             <div>
               {
                 bastionKeys.length > 0 &&

diff --git a/src/components/common/Tab.jsx b/src/components/common/Tab.jsx
@@ -5,7 +5,8 @@ class Tab extends Component {
   static propTypes = {
     activeTab: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    number: PropTypes.string.isRequired,
+    badge: PropTypes.string,
+    color: PropTypes.string,
     onClick: PropTypes.func.isRequired,
   };
 
@@ -20,7 +21,8 @@ class Tab extends Component {
       props: {
         activeTab,
         label,
-        number
+        badge,
+        color
       },
     } = this;
 
@@ -31,15 +33,17 @@ class Tab extends Component {
     }
 
     return (
-      <li
-        className={className}
+      <div
+        className={`${className}`}
         onClick={onClick}
       >
-        <span>{label}</span>
-        {
-          Number.isInteger(number) && <span className="tab-label-number">{number}</span>
-        }
-      </li>
+        <div className="d-flex">
+          <span>{label}</span>
+          {
+            badge && <span className={`badge badge-${color} ml-2 align-self-center`}>{badge}</span>
+          }
+        </div>
+      </div>
     );
   }
 }

diff --git a/src/components/common/Tabs.jsx b/src/components/common/Tabs.jsx
@@ -32,21 +32,21 @@ class Tabs extends Component {
 
     return (
       <div className="tabs">
-        <ol className="tab-list">
+        <div className="tab-list">
           {children.map((child) => {
-            const { label, number } = child.props;
-
+            const { label, badge, color } = child.props;
             return (
               <Tab
                 activeTab={activeTab}
                 key={label}
                 label={label}
-                number={number}
+                badge={badge}
+                color={color}
                 onClick={onClickTabItem}
               />
             );
           })}
-        </ol>
+        </div>
         <div className="tab-content">
           {children.map((child) => {
             if (child.props.label !== activeTab) return undefined;

diff --git a/src/imgs/toolLinks/LatencyMonitor.png b/src/imgs/toolLinks/LatencyMonitor.png
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
@@ -190,7 +190,11 @@ class Resources extends Component {
               </div>
             </div>
           </div>
-          <div label="Measuring and Monitoring Tools">
+          <div 
+            label="Measuring and Monitoring Tools"
+            badge={"NEW"}
+            color={"success"}
+          >
             <ToolLinks />
           </div>
         </Tabs>

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -633,20 +633,6 @@ ul,
   padding: 1rem 0.5rem 0 0.5rem;
 }
 
-.tab-label-number {
-  display: inline-block;
-  margin-left: 0.5rem;
-  min-width: 20px;
-  padding: 0 6px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 15px;
-  text-align: center;
-  background-color: #dee2e6;
-  border: 1px solid #dee2e6;
-  border-radius: 2em;
-}
-
 /* Tabs style */
 .tab-list {
   border-bottom: 1px solid #dee2e6;
@@ -661,6 +647,7 @@ ul,
   padding: 0.5rem 0.75rem;
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
+  cursor: pointer
 }
 
 .tab-list-active {