Added a copy icon for the alert's ID in Graphs View.

tests/ui/mock/performance_summary.json

@@ -54,6 +54,14 @@
         "push_timestamp": "2019-08-11T09:56:40",
         "push_id": 530521,
         "revision": "e8fe8b0af1a7a0c64d28b4e08a9c5509d916759f"
+      },
+      {
+        "job_id": 260895769,
+        "id": 887279309,
+        "value": 211.24042970178886,
+        "push_timestamp": "2019-08-09T21:57:48",
+        "push_id": 477720,
+        "revision": "3afb892abb74c6d281f3e66431408cbb2e16b8c5"
       }
     ]
   }

tests/ui/perfherder/graphs-view/graphs_view_test.jsx

@@ -6,6 +6,7 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
 
@@ -17,6 +18,7 @@ import {
 import GraphsViewControls from '../../../../ui/perfherder/graphs/GraphsViewControls';
 import repos from '../../mock/repositories';
 import testData from '../../mock/performance_summary.json';
+import alertSummaries from '../../mock/alert_summaries.json';
 import changelogData from '../../mock/infra_changelog.json';
 import seriesData from '../../mock/performance_signature_formatted.json';
 import seriesData2 from '../../mock/performance_signature_formatted2.json';
@@ -33,7 +35,7 @@ fetchMock.mock(`begin:${getApiUrl(endpoints.changelog)}`, changelogData);
 
 const graphData = createGraphData(
   testData,
-  [],
+  alertSummaries,
   [...graphColors],
   [...graphSymbols],
   [...commonAlerts],
@@ -76,37 +78,40 @@ const graphsViewControls = (
   hasNoData = true,
   replicates = false,
   handleUpdateStateParams,
+  selectedDataPoint = {
+    signature_id: testData[0].signature_id,
+    dataPointId: testData[0].data[1].id,
+  },
 ) => {
   const updateStateParams = () => {};
 
   return render(
-    <GraphsViewControls
-      updateStateParams={handleUpdateStateParams || updateStateParams}
-      highlightAlerts={false}
-      highlightChangelogData
-      highlightedRevisions={['', '']}
-      updateTimeRange={() => {}}
-      hasNoData={hasNoData}
-      frameworks={frameworks}
-      projects={repos}
-      timeRange={{ value: 172800, text: 'Last two days' }}
-      options={{}}
-      getTestData={() => {}}
-      testData={data}
-      getInitialData={() => ({
-        platforms,
-      })}
-      getSeriesData={mockGetSeriesData}
-      showModal={Boolean(mockShowModal)}
-      toggle={mockShowModal}
-      selectedDataPoint={{
-        signature_id: testData[0].signature_id,
-        dataPointId: testData[0].data[1].id,
-      }}
-      user={{ isStaff: true }}
-      updateData={() => {}}
-      replicates={replicates}
-    />,
+    <Router>
+      <GraphsViewControls
+        updateStateParams={handleUpdateStateParams || updateStateParams}
+        highlightAlerts={false}
+        highlightChangelogData
+        highlightedRevisions={['', '']}
+        updateTimeRange={() => {}}
+        hasNoData={hasNoData}
+        frameworks={frameworks}
+        projects={repos}
+        timeRange={{ value: 172800, text: 'Last two days' }}
+        options={{}}
+        getTestData={() => {}}
+        testData={data}
+        getInitialData={() => ({
+          platforms,
+        })}
+        getSeriesData={mockGetSeriesData}
+        showModal={Boolean(mockShowModal)}
+        toggle={mockShowModal}
+        selectedDataPoint={selectedDataPoint}
+        user={{ isStaff: true }}
+        updateData={() => {}}
+        replicates={replicates}
+      />
+    </Router>,
   );
 };
 afterEach(cleanup);
@@ -216,6 +221,42 @@ test('Using select query param displays tooltip for correct datapoint', async ()
   expect(platform).toHaveTextContent(testData[0].platform);
 });
 
+test("Alert's ID can be copied to clipboard from tooltip", async () => {
+  const selectedDataPoint = {
+    signature_id: testData[0].signature_id,
+    dataPointId: testData[0].data[5].id,
+  };
+
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: jest.fn(),
+    },
+  });
+  const { getByTestId, queryByTitle } = graphsViewControls(
+    graphData,
+    false,
+    undefined,
+    undefined,
+    selectedDataPoint,
+  );
+
+  const graphContainer = await waitFor(() => getByTestId('graphContainer'));
+  expect(graphContainer).toBeInTheDocument();
+
+  const graphTooltip = await waitFor(() => getByTestId('graphTooltip'));
+  expect(graphTooltip).toBeInTheDocument();
+
+  const copyIdButton = await waitFor(() =>
+    queryByTitle('Copy Alert Summary id'),
+  );
+  expect(copyIdButton).toBeInTheDocument();
+
+  fireEvent.click(copyIdButton);
+
+  const alertID = alertSummaries[0].id;
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith(`${alertID}`);
+});
+
 test('Using select query param displays tooltip for correct datapoint with replicates', async () => {
   const { getByTestId, getByText } = graphsViewControls(graphData, false, true);
 

ui/perfherder/graphs/GraphTooltip.jsx

@@ -276,6 +276,11 @@ const GraphTooltip = ({
                     </span>
                   )}
                 </span>
+                <Clipboard
+                  text={dataPointDetails.alertSummary.id.toString()}
+                  description="Alert Summary id"
+                  outline
+                />
               </p>
             )}
             {isCommonAlert && !dataPointDetails.alertSummary && (
@@ -292,6 +297,11 @@ const GraphTooltip = ({
                   {` Alert # ${datum.commonAlert.id}`}
                 </Link>
                 <span className="text-muted">{` - ${commonAlertStatus} `}</span>
+                <Clipboard
+                  text={datum.commonAlert.id.toString()}
+                  description="Alert Summary id"
+                  outline
+                />
                 <p className="small text-danger">Common alert</p>
               </p>
             )}