(ui): Adjust MetricsView to new API response shape

ui/src/api.ts

@@ -77,10 +77,18 @@ export interface QueueLocation {
 }
 
 export interface MetricsResponse {
-  data: MetricsResult;
+  queue_size: PrometheusMetricsResponse;
+}
+
+export interface PrometheusMetricsResponse {
+  status: "success" | "error";
+  data?: MetricsResult; // present if status === "success"
+  error?: string; // present if status === "error"
+  errorType?: string; // present if status === "error"
 }
 
 export interface MetricsResult {
+  resultType: string;
   result: Metrics[];
 }
 
@@ -93,8 +101,10 @@ export interface MetricsInfo {
   __name__: string;
   instance: string;
   job: string;
-  queue: string;
+
-  state: string;
+  // labels (may or may not be present depending on metrics)
+  queue?: string;
+  state?: string;
 }
 
 // Return value from redis INFO command.

ui/src/components/QueueSizeMetricsChart.tsx

@@ -35,7 +35,10 @@ function toChartData(metrics: Metrics[]): ChartData[] {
       if (!byTimestamp[ts]) {
         byTimestamp[ts] = { timestamp: ts };
       }
-      byTimestamp[ts][x.metric.queue] = parseFloat(val);
+      const qname = x.metric.queue;
+      if (qname) {
+        byTimestamp[ts][qname] = parseFloat(val);
+      }
     }
   }
   return Object.values(byTimestamp);

ui/src/views/MetricsView.tsx

@@ -98,8 +98,9 @@ function MetricsView(props: Props) {
         </Grid>
         <Grid item xs={12}>
           <Typography>Queue Size</Typography>
+          {/* TODO: show error message if data.queue_size.status === "error" */}
           <QueueSizeMetricsChart
-            data={data?.data.result || []}
+            data={data?.queue_size.data?.result || []}
             endTime={endTimeSec}
             startTime={endTimeSec - durationSec}
           />