Add DORA metrics dashboard MvC

What does this MR do and why?

This MR:

• Adds the dora_metrics_dashboard WIP feature flag
• Renames the dora_metrics_over_time data source to dora_metrics
• Extends the data source to query for either time series data or a single value (uses the Bucketing interval parameter) !180012 (merged)
• Adds time series chart visualizations for the four DORA metrics
• Adds a DORA metrics dashboard to test out the tiles + charts (optional)

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

• MvC - DORA metrics charts dashboard (#514864)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Dashboard	Dashboard list

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Seed data for Dora Metrics https://docs.gitlab.com/ee/development/development_seed_files.html
2. Enable the feature flags in rails console:

   Feature.enable(:dora_metrics_dashboard)

3. Navigate to Analytics Dashboard Editor for a group or project
4. Select Dora metric charts
5. Compare the data in the charts with the CI/CD analytics page

ee/spec/frontend/analytics/analytics_dashboards/components/data_sources/dora_metrics_over_time_spec.js

+import { mockDoraMetricsResponseData } from 'jest/analytics/shared/mock_data';
+import fetch from 'ee/analytics/analytics_dashboards/data_sources/dora_metrics';
+import { defaultClient } from 'ee/analytics/analytics_dashboards/graphql/client';
+import { LAST_WEEK, LAST_180_DAYS } from 'ee/dora/components/static_data/shared';
+
+describe('Dora Metrics Data Source', () => {
+  let res;
+
+  const query = { metric: 'lead_time_for_changes', date_range: LAST_180_DAYS };
+  const namespace = 'cool namespace';
+  const defaultParams = {
+    namespace,
+    query,
+  };
+
+  const mockResolvedQuery = (dora = mockDoraMetricsResponseData) =>
+    jest.spyOn(defaultClient, 'query').mockResolvedValueOnce({ data: { group: { dora } } });
+
+  const expectQueryWithVariables = (variables) =>
+    expect(defaultClient.query).toHaveBeenCalledWith(
+      expect.objectContaining({
+        variables: expect.objectContaining(variables),
+      }),
+    );
+
+  describe('fetch', () => {
+    describe('default', () => {
+      beforeEach(async () => {
+        mockResolvedQuery();
+        res = await fetch({ namespace, query });
+      });
+
+      it('returns a single value', () => {
+        expect(res).toBe('0.2721');
+      });
+
+      it('correctly applies query parameters', () => {
+        expectQueryWithVariables({
+          startDate: new Date('2020-01-09'),
+          endDate: new Date('2020-07-07'),
+          fullPath: 'cool namespace',
+          interval: 'ALL',
+        });
+      });
+    });
+
+    describe('queryOverrides', () => {
+      it('can override the date range', async () => {
+        mockResolvedQuery();
+        res = await fetch({
+          ...defaultParams,
+          queryOverrides: { date_range: LAST_WEEK },
+        });
+
+        expectQueryWithVariables({
+          startDate: new Date('2020-06-30'),
+          endDate: new Date('2020-07-07'),
+          fullPath: 'cool namespace',
+          interval: 'ALL',
+        });
+      });
+
+      it('can override the namespace', async () => {
+        mockResolvedQuery();
+        res = await fetch({
+          ...defaultParams,
+          queryOverrides: { date_range: LAST_WEEK, namespace: 'cool-namespace/sub-namespace' },
+        });
+
+        expectQueryWithVariables({
+          startDate: new Date('2020-06-30'),
+          endDate: new Date('2020-07-07'),
+          fullPath: 'cool-namespace/sub-namespace',
+          interval: 'ALL',
+        });
+      });
+    });
+  });
+});