fix types & better variable names

Author: Jamesbarford

site/frontend/src/pages/status_new/collector.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import {computed} from "vue";
-import {BenchmarkRequest} from "./data";
+import {CollectorConfigAndWork, CollectorConfig} from "./data";
 
 const props = defineProps<{
   collector: CollectorConfigAndWork;
 }>();
 
+/* trick typescript into thinking props is used. We _have_ to define it else
+ * `collector` in the below code is untyped and thus fails to compile */
+<any>props;
+
 function statusClass(c: CollectorConfig): string {
   return c.isActive ? "active" : "inactive";
 }

site/frontend/src/pages/status_new/data.ts

@@ -191,10 +191,10 @@ export function createCollectorJobMap(
   collectorConfigs: CollectorConfig[],
   inProgress: StatusResponseInProgress[]
 ): CollectorJobMap {
-  const ht: CollectorJobMap = {};
+  const collectorJobMap: CollectorJobMap = {};
 
   for (const collectorConfig of collectorConfigs) {
-    ht[collectorConfig.name] = {
+    collectorJobMap[collectorConfig.name] = {
       request: null,
       jobs: [],
       config: collectorConfig,
@@ -216,13 +216,13 @@ export function createCollectorJobMap(
           backend: j.backend,
           dequeCounter: j.dequeCounter,
         };
-        if (ht[j.status.collectorName].request == null) {
-          ht[j.status.collectorName].request = simpleReq;
+        if (collectorJobMap[j.status.collectorName].request == null) {
+          collectorJobMap[j.status.collectorName].request = simpleReq;
         }
         /* There will be one in_progress job and a few success/failures*/
-        ht[j.status.collectorName].jobs.push(simpleJob);
+        collectorJobMap[j.status.collectorName].jobs.push(simpleJob);
       }
     }
   }
-  return ht;
+  return collectorJobMap;
 }

site/frontend/src/pages/status_new/page.vue

@@ -6,25 +6,27 @@ import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
 import {
   StatusResponse,
-  CollectorConfig,
+  CollectorJobMap,
   BenchmarkRequestType,
   ReleaseCommit,
   createCollectorJobMap,
 } from "./data";
-import Collector from "./collector";
+import Collector from "./collector.vue";
 
 async function loadStatusNew(loading: Ref<boolean>) {
   dataNew.value = await withLoading(loading, async () => {
-    let d = await getJson<StatusResponse>(STATUS_DATA_NEW_URL);
+    let d: StatusResponse = await getJson<StatusResponse>(STATUS_DATA_NEW_URL);
     return {
       ...d,
-      ht: createCollectorJobMap(d.collectorConfigs, d.inProgress),
+      collectorJobMap: createCollectorJobMap(d.collectorConfigs, d.inProgress),
     };
   });
 }
 
 const loading = ref(true);
-const dataNew: Ref<StatusResponse | null> = ref(null);
+const dataNew: Ref<
+  (StatusResponse & {collectorJobMap: CollectorJobMap}) | null
+> = ref(null);
 
 function pullRequestUrlAsHtml(reqType: BenchmarkRequestType): string {
   if (reqType.type === ReleaseCommit) {
@@ -113,7 +115,7 @@ loadStatusNew(loading);
       </span>
       <h1>Collectors</h1>
       <div class="grid">
-        <div :key="cc[0]" v-for="cc in Object.entries(dataNew.ht)">
+        <div :key="cc[0]" v-for="cc in Object.entries(dataNew.collectorJobMap)">
           <Collector :collector="cc[1]" />
         </div>
       </div>