feat(resource-group-queue-metrics): support multiple time periods

access-ci-org · Jul 17, 2024 · b3a4b5f · b3a4b5f
1 parent 6f4da60
commit b3a4b5f
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 24 deletions.
diff --git a/.../api/resource-groups/1/queue-metrics.json → ...i/resource-groups/1/queue-metrics/30.json b/.../api/resource-groups/1/queue-metrics.json → ...i/resource-groups/1/queue-metrics/30.json
@@ -4,27 +4,27 @@
       "resourceId": 1,
       "name": "Bridges-2 Regular Memory",
       "resourceRepositoryKey": 2900,
-      "waitTime": 5.909166,
-      "wallTime": 2.007403,
-      "expansionFactor": 5.3611,
+      "waitTime": 11.97372,
+      "wallTime": 3.080251,
+      "expansionFactor": 5.794,
       "order": 1
     },
     {
       "resourceId": 2,
       "name": "Bridges-2 Extreme Memory",
       "resourceRepositoryKey": 2903,
-      "waitTime": 5.233983,
-      "wallTime": 6.61043,
-      "expansionFactor": 1.7911,
+      "waitTime": 4.266471,
+      "wallTime": 5.40701,
+      "expansionFactor": 1.7939,
       "order": 2
     },
     {
       "resourceId": 3,
       "name": "Bridges-2 GPU",
       "resourceRepositoryKey": 2902,
-      "waitTime": 19.670669,
-      "wallTime": 2.072165,
-      "expansionFactor": 10.4929,
+      "waitTime": 57.526596,
+      "wallTime": 2.376414,
+      "expansionFactor": 25.0903,
       "order": 3
     }
   ]

diff --git a/public/api/resource-groups/1/queue-metrics/365.json b/public/api/resource-groups/1/queue-metrics/365.json
@@ -0,0 +1,31 @@
+{
+  "queueMetrics": [
+    {
+      "resourceId": 1,
+      "name": "Bridges-2 Regular Memory",
+      "resourceRepositoryKey": 2900,
+      "waitTime": 7.820775,
+      "wallTime": 1.699045,
+      "expansionFactor": 6.1959,
+      "order": 1
+    },
+    {
+      "resourceId": 2,
+      "name": "Bridges-2 Extreme Memory",
+      "resourceRepositoryKey": 2903,
+      "waitTime": 9.848182,
+      "wallTime": 6.751228,
+      "expansionFactor": 2.4567,
+      "order": 2
+    },
+    {
+      "resourceId": 3,
+      "name": "Bridges-2 GPU",
+      "resourceRepositoryKey": 2902,
+      "waitTime": 14.737766,
+      "wallTime": 2.025538,
+      "expansionFactor": 8.2869,
+      "order": 3
+    }
+  ]
+}
diff --git a/public/api/resource-groups/1/queue-metrics/90.json b/public/api/resource-groups/1/queue-metrics/90.json
@@ -0,0 +1,31 @@
+{
+  "queueMetrics": [
+    {
+      "resourceId": 1,
+      "name": "Bridges-2 Regular Memory",
+      "resourceRepositoryKey": 2900,
+      "waitTime": 12.564133,
+      "wallTime": 2.7384,
+      "expansionFactor": 7.684,
+      "order": 1
+    },
+    {
+      "resourceId": 2,
+      "name": "Bridges-2 Extreme Memory",
+      "resourceRepositoryKey": 2903,
+      "waitTime": 5.413989,
+      "wallTime": 6.426771,
+      "expansionFactor": 1.839,
+      "order": 2
+    },
+    {
+      "resourceId": 3,
+      "name": "Bridges-2 GPU",
+      "resourceRepositoryKey": 2902,
+      "waitTime": 44.75172,
+      "wallTime": 2.512934,
+      "expansionFactor": 18.7756,
+      "order": 3
+    }
+  ]
+}
diff --git a/src/content.css b/src/content.css
@@ -107,10 +107,19 @@ p {
 .table tbody th {
   text-align: right;
 }
-input {
+input,
+select {
   border: 1px solid var(--contrast-8);
   border-radius: 0;
   color: var(--contrast);
   font-size: 1rem;
   padding: 6px 12px;
 }
+select {
+  appearance: none;
+  background-color: white;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  padding: 6px 36px 6px 12px;
+}
diff --git a/src/resource-group-queue-metrics.jsx b/src/resource-group-queue-metrics.jsx
@@ -1,3 +1,4 @@
+import { useState } from "preact/hooks";
 import { useJSON } from "./utils";
 
 import Grid from "./grid";
@@ -25,8 +26,9 @@ export default function ResourceGroupQueueMetrics({
   baseUri,
   resourceGroupId,
 }) {
+  const [days, setDays] = useState(30);
   const data = useJSON(
-    `${baseUri}/api/resource-groups/${resourceGroupId}/queue-metrics.json`,
+    `${baseUri}/api/resource-groups/${resourceGroupId}/queue-metrics/${days}.json`,
     null
   );
   if (!data || data.error) return;
@@ -55,7 +57,8 @@ export default function ResourceGroupQueueMetrics({
     {
       key: "expansionFactor",
       name: "Expansion Factor",
-      format: (value) => value.toFixed(2),
+      format: (_value, row) =>
+        ((row.waitTime + row.wallTime) / row.wallTime).toFixed(2),
       formatHeader: formatHeaderTip(
         'Expansion factor is the ratio of the total time (wait time and wall time) to the wall time. It measures how much waiting in the queue "expands" the total time taken to complete a job relative to its length.'
       ),
@@ -64,10 +67,20 @@ export default function ResourceGroupQueueMetrics({
 
   return (
     <>
-      <h2>
-        <Icon name="clock" />
-        Queue Metrics
-      </h2>
+      <div class="flex-header">
+        <h2>
+          <Icon name="clock" />
+          Queue Metrics
+        </h2>
+        <select
+          value={days}
+          onChange={(e) => setDays(parseInt(e.target.value))}
+        >
+          <option value="30">Last 30 days</option>
+          <option value="90">Last 90 days</option>
+          <option value="365">Last year</option>
+        </select>
+      </div>
       <Grid columns={columns} rows={data.queueMetrics} />
     </>
   );

diff --git a/src/utils.js b/src/utils.js
@@ -36,15 +36,8 @@ export const useJSON = (uri, defaultValue) => {
           setValue(data);
         }
       })();
-  }, []);
+  }, [uri]);
   return value;
 };
 
 export const sortOn = (prop) => (a, b) => a[prop] < b[prop] ? -1 : 1;
-
-// export const useActiveIds = (initial = []) => {
-//   const [ids, setIds] = useState(initial);
-//   const toggle = (id) => setIds(id in ids ? ids.filter((x) => x != id) : [...ids, id]);
-//   const clear = () => setIds([]);
-
-// }