feat: show warning if a metric for a bucket is missing (#5369)

* feat: show warning if a metric for a bucket is missing

Author: ilayda-cp

static/js/publisher/components/PublisherMetrics/PublisherMetrics.tsx

@@ -16,6 +16,8 @@ function PublisherMetrics({ snaps }: { snaps: ISnap[] }): React.JSX.Element {
     }
   }, [metricsData]);
 
+  const daysWithoutDataExist =
+    metricsData && metricsData.daysWithoutData.length > 0;
   return (
     <Strip
       className="u-no-padding--top"
@@ -28,6 +30,12 @@ function PublisherMetrics({ snaps }: { snaps: ISnap[] }): React.JSX.Element {
           size={12}
           className="snap-installs-container snapcraft-metrics__graph snapcraft-metrics__active-devices"
         >
+          {daysWithoutDataExist && (
+            <Notification severity="caution">
+              Metrics for the most recent days may be incomplete or missing.
+              They will be updated and accurate within a few hours.
+            </Notification>
+          )}
           <svg width="100%" height="240"></svg>
           {metricsData && metricsData.buckets.length === 0 && (
             <div className="p-snap-list__metrics-empty-message">

static/js/publisher/hooks/__tests__/useActiveDeviceMetrics.test.tsx

@@ -55,6 +55,7 @@ describe("useActiveDeviceMetrics", () => {
                 },
               ],
             },
+            days_without_data: [],
             latest_active_devices: 4,
             total_page_num: 1,
           }),
@@ -88,6 +89,7 @@ describe("useActiveDeviceMetrics", () => {
         ],
         series: [{ name: "1.0", values: [5, 5, 0, 4, 4] }],
       },
+      daysWithoutData: [],
     });
     (global.fetch as Mock).mockRestore();
   });
@@ -113,6 +115,7 @@ describe("useActiveDeviceMetrics", () => {
                 },
               ],
             },
+            days_without_data: [],
             latest_active_devices: 4,
             total_page_num: 1,
           }),

static/js/publisher/hooks/useActiveDeviceMetrics.ts

@@ -77,6 +77,8 @@ function useActiveDeviceMetrics({
     const buckets = [];
     const series = new Map();
 
+    const daysWithoutData = [];
+
     let seriesThatAreAddedBefore = 0;
 
     for (const result of results.reverse()) {
@@ -110,6 +112,10 @@ function useActiveDeviceMetrics({
       }
 
       seriesThatAreAddedBefore += activeDeviceBuckets.length;
+
+      if (data.days_without_data) {
+        daysWithoutData.push(...data.days_without_data);
+      }
     }
 
     const resultArray = Array.from(series.entries()).map(([key, value]) => ({
@@ -122,6 +128,7 @@ function useActiveDeviceMetrics({
         buckets,
         series: resultArray,
       },
+      daysWithoutData,
     };
   };
 

static/js/publisher/hooks/useFetchPublishedSnapMetrics.ts

@@ -9,6 +9,7 @@ type Series = {
 type SnapMetrics = {
   series: Array<Series>;
   buckets: Array<string>;
+  daysWithoutData: Array<string>;
 };
 
 function useFetchPublishedSnapMetrics(snaps: ISnap[]) {
@@ -40,6 +41,7 @@ function useFetchPublishedSnapMetrics(snaps: ISnap[]) {
       const metrics: SnapMetrics = {
         series: [],
         buckets: data.buckets,
+        daysWithoutData: data.days_without_data,
       };
 
       data.snaps.forEach((snap: { series: Array<Series>; name: string }) => {

static/js/publisher/pages/Metrics/ActiveDeviceMetrics.tsx

@@ -1,5 +1,11 @@
 import { useParams, useSearchParams } from "react-router-dom";
-import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
+import {
+  Row,
+  Col,
+  Spinner,
+  CodeSnippet,
+  Notification,
+} from "@canonical/react-components";
 
 import { useEffect } from "react";
 import { renderActiveDevicesMetrics } from "./metrics/metrics";
@@ -55,10 +61,17 @@ function ActiveDeviceMetrics({
       return searchParams;
     });
   };
+  const daysWithoutDataExist = data && data.daysWithoutData.length > 0;
 
   return (
     <section className={`p-strip is-shallow ${isEmpty ? "is-empty" : ""}`}>
       <Row>
+        {daysWithoutDataExist && (
+          <Notification severity="caution">
+            Metrics for the most recent days may be incomplete or missing. They
+            will be updated and accurate within a few hours.
+          </Notification>
+        )}
         <Col size={12} key="activeServices">
           <h4 className="u-float-left">Weekly active devices</h4>
           <div className="p-heading--4 u-float-right u-no-margin--top">

static/js/publisher/pages/Metrics/__tests__/ActiveDeviceMetrics.test.tsx

@@ -62,7 +62,9 @@ describe("ActiveDeviceMetrics", () => {
       }
       return {
         status: "success",
-        data: {},
+        data: {
+          daysWithoutData: [],
+        },
       };
     });
 
@@ -73,6 +75,11 @@ describe("ActiveDeviceMetrics", () => {
       expect(screen.getByText("5")).toBeInTheDocument();
       expect(screen.getByText("Past 30 days")).toBeInTheDocument();
       expect(screen.getByText("By version")).toBeInTheDocument();
+      expect(
+        screen.queryByText(
+          "Metrics for the most recent days may be incomplete or missing. They will be updated and accurate within a few hours.",
+        ),
+      ).toBeNull();
     });
   });
 
@@ -97,13 +104,16 @@ describe("ActiveDeviceMetrics", () => {
               buckets: [],
               name: "annotations",
               series: [],
+              daysWithoutData: [],
             },
           };
         }
       }
       return {
         status: "success",
-        data: {},
+        data: {
+          daysWithoutData: [],
+        },
       };
     });
 
@@ -137,13 +147,16 @@ describe("ActiveDeviceMetrics", () => {
               buckets: [],
               name: "annotations",
               series: [],
+              daysWithoutData: [],
             },
           };
         }
       }
       return {
         status: "success",
-        data: {},
+        data: {
+          daysWithoutData: [],
+        },
       };
     });
 
@@ -191,4 +204,51 @@ describe("ActiveDeviceMetrics", () => {
       expect(screen.getByText("No data found.")).toBeInTheDocument();
     });
   });
+
+  test("renders the warning", async () => {
+    // @ts-expect-error mocks
+    useQuery.mockImplementation((params) => {
+      if (params) {
+        if (params.queryKey[0] === "activeDeviceMetrics") {
+          const mock = {
+            ...mockActiveDeviceMetrics,
+            daysWithoutData: ["2024-08-27"],
+          };
+          return {
+            status: "success",
+            data: mock,
+          };
+        } else if (params.queryKey[0] === "latestActiveDevicesMetric") {
+          return {
+            status: "success",
+            data: 5,
+          };
+        } else {
+          return {
+            status: "success",
+            data: {
+              buckets: [],
+              name: "annotations",
+              series: [],
+              daysWithoutData: [],
+            },
+          };
+        }
+      }
+      return {
+        status: "success",
+        data: {},
+      };
+    });
+
+    renderComponent(false);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          "Metrics for the most recent days may be incomplete or missing. They will be updated and accurate within a few hours.",
+        ),
+      ).toBeInTheDocument();
+    });
+  });
 });

static/js/publisher/pages/Metrics/__tests__/Metrics.test.tsx

@@ -60,6 +60,7 @@ const handlers = [
         name: "weekly_installed_base_by_version",
         series: [],
       },
+      days_without_data: [],
       latest_archive_devices: 0,
       total_page_num: 1,
     });

static/js/publisher/test-utils/mockActiveDeviceMetrics.ts

@@ -44,5 +44,6 @@ export const mockActiveDeviceMetrics = {
       },
     ],
   },
+  daysWithoutData: [],
   latest_active_devices: 5,
 };

tests/publisher/tests_account_snaps_metrics.py

@@ -58,6 +58,7 @@ def test_metrics(self):
 
         expected_response = {
             "buckets": ["2018-04-13", "2018-04-20"],
+            "days_without_data": [],
             "snaps": [
                 {
                     "id": "1",
@@ -113,3 +114,50 @@ def test_metrics_bad_id_payload(self):
 
         self.assertEqual(500, response.status_code)
         self.assertEqual(expected_response, response.json)
+
+    @responses.activate
+    def test_metrics_with_empty_data(self):
+        metrics_payload = {
+            "metrics": [
+                {
+                    "snap_id": "1",
+                    "status": "OK",
+                    "series": [
+                        {"values": [0, 3, None], "name": "new"},
+                        {"values": [2, 3, None], "name": "lost"},
+                        {"values": [9, 6, None], "name": "continued"},
+                    ],
+                    "buckets": ["2018-04-13", "2018-04-20", "2018-04-21"],
+                },
+            ]
+        }
+
+        responses.add(
+            responses.POST, self.api_url, json=metrics_payload, status=200
+        )
+
+        payload = {"1": "test1"}
+        headers = {"content-type": "application/json"}
+        response = self.client.post(
+            self.endpoint_url, data=json.dumps(payload), headers=headers
+        )
+
+        expected_response = {
+            "buckets": ["2018-04-13", "2018-04-20", "2018-04-21"],
+            "days_without_data": ["2018-04-21"],
+            "snaps": [
+                {
+                    "id": "1",
+                    "name": None,
+                    "series": [
+                        {"name": "new", "values": [0, 3, None]},
+                        {"name": "lost", "values": [2, 3, None]},
+                        {"name": "continued", "values": [9, 6, None]},
+                    ],
+                }
+            ],
+        }
+
+        self.assertEqual(200, response.status_code)
+        self.assertEqual(expected_response, response.json)
+        self.assertEqual(1, len(responses.calls))

webapp/metrics/helper.py

@@ -152,6 +152,20 @@ def build_snap_installs_metrics_query(snaps, get_filter=get_filter):
     return metrics_query
 
 
+def get_days_without_data(metrics_response):
+    days_without_data = set()
+    for metric in metrics_response["metrics"]:
+        if metric["status"] == "OK":
+            for series in metric["series"]:
+                none_indexes = [
+                    i for i, val in enumerate(series["values"]) if val is None
+                ]
+                days_without_data.update(
+                    metric["buckets"][i] for i in none_indexes
+                )
+    return list(days_without_data)
+
+
 def transform_metrics(metrics, metrics_response, snaps):
     """Transforms an API response from the publisher metrics
 
@@ -172,7 +186,7 @@ def transform_metrics(metrics, metrics_response, snaps):
                 {"id": snap_id, "name": snap_name, "series": metric["series"]}
             )
             metrics["buckets"] = metric["buckets"]
-
+    metrics["days_without_data"] = get_days_without_data(metrics_response)
     return metrics