Merge #568

568: Ref #405 - Show link to Telemetry r=mythmon a=leplatrem



Co-authored-by: Mathieu Leplatre <mathieu@mozilla.com>
Co-authored-by: Michael Cooper <mythmon@gmail.com>
Co-authored-by: Mike Cooper <mythmon@gmail.com>

Author: 3 people

content/components/pages/RecipeDetailsPage.tsx

@@ -43,11 +43,13 @@ const RecipeDetailsPage: React.FC = () => {
       );
 
       setExperimenterData({
+        normandySlug: data.normandy_slug,
         publicDescription: data.public_description,
         proposedStartDate,
         proposedDuration: data.proposed_duration,
         proposedEndDate,
         startDate: data.start_date && new Date(data.start_date),
+        status: data.status && data.status.toLowerCase(),
         endDate: data.end_date && new Date(data.end_date),
         variants: data.variants.reduce((acc, v) => {
           acc[v.slug] = v.description;

content/components/recipes/details/DetailsHeader.js

@@ -2,10 +2,12 @@ import React from "react";
 import { useHistory, useParams } from "react-router-dom";
 import { Alert, Button, Icon, IconButton, Popover, Whisper } from "rsuite";
 
+import TelemetryLink from "devtools/components/recipes/details/TelemetryLink";
 import {
   useSelectedEnvironmentState,
   useSelectedNormandyEnvironmentAPI,
 } from "devtools/contexts/environment";
+import { useExperimenterDetailsData } from "devtools/contexts/experimenterDetails";
 import {
   ACTION_UPDATE_DATA,
   useRecipeDetailsData,
@@ -147,6 +149,11 @@ export default function DetailsHeader() {
     );
   }
 
+  let telemetryLink = null;
+  if (environment.experimenterUrl && data.experimenter_slug) {
+    telemetryLink = <TelemetryLink {...useExperimenterDetailsData()} />;
+  }
+
   let requestApprovalButton = null;
   let statusToggleButton = null;
   if (!revisionId) {
@@ -234,6 +241,7 @@ export default function DetailsHeader() {
       </div>
       <div className="d-flex align-items-center text-right">
         {viewExperimentButton}
+        {telemetryLink}
         {pauseButton}
         {requestApprovalButton}
         {statusToggleButton}

content/components/recipes/details/TelemetryLink.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Icon, IconButton } from "rsuite";
+
+const MONITORING_URL = "https://grafana.telemetry.mozilla.org";
+const DASHBOARD_ID = "XspgvdxZz";
+
+interface TelemetryLinkProps {
+  endDate?: Date;
+  normandySlug: string;
+  startDate?: Date;
+  status: string;
+}
+
+const TelemetryLink: React.FC<TelemetryLinkProps> = ({
+  startDate,
+  endDate,
+  normandySlug,
+  status,
+}) => {
+  let from = "";
+  let to = "";
+
+  if (startDate && ["live", "complete"].includes(status)) {
+    from = `${startDate.getTime() - 24 * 3600 * 1000}`;
+  }
+
+  if (endDate && status === "complete") {
+    to = `${endDate.getTime() + 2 * 24 * 3600 * 1000}`;
+  }
+
+  const url = `${MONITORING_URL}/d/${DASHBOARD_ID}/experiment-enrollment?orgId=1&var-experiment_id=${normandySlug}&from=${from}&to=${to}`;
+  return (
+    <IconButton
+      appearance="subtle"
+      componentClass="a"
+      href={url}
+      icon={<Icon icon="external-link" />}
+      target="_blank"
+    >
+      View Telemetry
+    </IconButton>
+  );
+};
+
+export default TelemetryLink;

content/contexts/experimenterDetails.tsx

@@ -8,6 +8,8 @@ interface ExperimenterData {
   startDate?: Date;
   endDate?: Date;
   variants: Record<string, string>;
+  status: string;
+  normandySlug: string;
 }
 
 interface ExperimenterState {

content/tests/components/recipes/details/TelemetryLink.test.tsx

@@ -0,0 +1,34 @@
+import { render, cleanup } from "@testing-library/react";
+import React from "react";
+
+import TelemetryLink from "devtools/components/recipes/details/TelemetryLink";
+
+afterEach(async () => {
+  jest.clearAllMocks();
+  await cleanup();
+});
+
+describe("TelemetryLink", () => {
+  it("should includes dates for complete experiments", () => {
+    const day = 24 * 3600 * 1000;
+    const start = new Date(600000000);
+    const end = new Date(800000000);
+
+    const doc = render(
+      <TelemetryLink
+        endDate={end}
+        normandySlug="abc"
+        startDate={start}
+        status="complete"
+      />,
+    );
+
+    const url = doc.baseElement
+      .getElementsByTagName("a")[0]
+      .getAttribute("href");
+
+    expect(url).toContain("abc");
+    expect(url).toContain(`${600000000 - 1 * day}`);
+    expect(url).toContain(`${800000000 + 2 * day}`);
+  });
+});

content/tests/factories/experiments.ts

@@ -5,10 +5,11 @@ import { ExperimenterResponse } from "devtools/types/experimenterApi";
 
 export const experimenterResponseFactory = Factory.fromFields<
   ExperimenterResponse,
-  { generateVariantsCount: number }
+  { generateVariantsCount: number; status: string }
 >({
   name: faker.lorem.words(4),
   normandy_id: faker.random.number(),
+  normandy_slug: faker.lorem.word(),
   public_description: faker.lorem.sentence(),
   proposed_start_date: faker.date.past().getTime(),
   proposed_enrollment: faker.random.number(),
@@ -21,4 +22,5 @@ export const experimenterResponseFactory = Factory.fromFields<
       slug: faker.lorem.word(),
       description: faker.lorem.sentence(),
     })),
+  status: status || "Complete",
 });

content/types/experimenterApi.ts

@@ -6,11 +6,13 @@ interface Variant {
 export interface ExperimenterResponse {
   name: string;
   normandy_id: number;
+  normandy_slug: string;
   proposed_start_date: number;
   proposed_duration: number;
   proposed_enrollment: number;
   public_description: string;
   start_date?: number;
   end_date?: number;
   variants: Variant[];
+  status: string;
 }