Added api request for time summary data

Adds the time_summary api endpoint
and request to the time_metrics_card
component

ee/app/assets/javascripts/analytics/cycle_analytics/components/time_metrics_card.vue

 <script>
+import Api from 'ee/api';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import { slugify } from '~/lib/utils/text_utility';
 import MetricCard from '../../shared/components/metric_card.vue';
-import { timeMetricsData as mockTimeMetricsData } from '../../../../../../spec/frontend/analytics/cycle_analytics/mock_data';
+import { removeFlash } from '../utils';
 
 export default {
   name: 'TimeMetricsCard',
@@ -34,7 +38,27 @@ export default {
   },
   methods: {
     fetchData() {
-      this.data = mockTimeMetricsData;
+      removeFlash();
+      this.loading = true;
+      return Api.cycleAnalyticsTimeSummaryData(
+        this.groupPath,
+        this.additionalParams ? this.additionalParams : {},
+      )
+        .then(({ data }) => {
+          this.data = data.map(({ title: label, value }) => ({
+            value: value || '-',
+            label,
+            key: slugify(label),
+          }));
+        })
+        .catch(() => {
+          createFlash(
+            __('There was an error while fetching value stream analytics time summary data.'),
+          );
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
   render() {

ee/app/assets/javascripts/api.js

@@ -16,6 +16,7 @@ export default {
   cycleAnalyticsTasksByTypePath: '/groups/:id/-/analytics/type_of_work/tasks_by_type',
   cycleAnalyticsTopLabelsPath: '/groups/:id/-/analytics/type_of_work/tasks_by_type/top_labels',
   cycleAnalyticsSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/summary',
+  cycleAnalyticsTimeSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/time_summary',
   cycleAnalyticsGroupStagesAndEventsPath: '/groups/:id/-/analytics/value_stream_analytics/stages',
   cycleAnalyticsStageEventsPath:
     '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id/records',
@@ -154,6 +155,12 @@ export default {
     return axios.get(url, { params });
   },
 
+  cycleAnalyticsTimeSummaryData(groupId, params = {}) {
+    const url = Api.buildUrl(this.cycleAnalyticsTimeSummaryDataPath).replace(':id', groupId);
+
+    return axios.get(url, { params });
+  },
+
   cycleAnalyticsGroupStagesAndEvents(groupId, params = {}) {
     const url = Api.buildUrl(this.cycleAnalyticsGroupStagesAndEventsPath).replace(':id', groupId);
 

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/time_metrics_card_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimeMetricsCard matches the snapshot 1`] = `
+<div
+  class="card"
+>
+  <!---->
+  <div
+    class="card-header"
+  >
+    <strong>
+      Time
+    </strong>
+  </div>
+  <div
+    class="card-body"
+  >
+    <!---->
+    <!---->
+     
+    <div
+      class="d-flex"
+    >
+      <div
+        class="js-metric-card-item flex-grow text-center"
+      >
+        <h3
+          class="my-2"
+        >
+          3
+        </h3>
+         
+        <p
+          class="text-secondary gl-font-sm mb-2"
+        >
+          New Issues
+        </p>
+      </div>
+      <div
+        class="js-metric-card-item flex-grow text-center"
+      >
+        <h3
+          class="my-2"
+        >
+          -
+        </h3>
+         
+        <p
+          class="text-secondary gl-font-sm mb-2"
+        >
+          Deploys
+        </p>
+      </div>
+      <div
+        class="js-metric-card-item flex-grow text-center"
+      >
+        <h3
+          class="my-2"
+        >
+          -
+        </h3>
+         
+        <p
+          class="text-secondary gl-font-sm mb-2"
+        >
+          Deployment Frequency
+        </p>
+      </div>
+    </div>
+     
+  </div>
+  <!---->
+  <!---->
+</div>
+`;

ee/spec/frontend/analytics/cycle_analytics/components/time_metrics_card_spec.js

@@ -4,6 +4,8 @@ import TimeMetricsCard from 'ee/analytics/cycle_analytics/components/time_metric
 import { group, timeMetricsData } from '../mock_data';
 import Api from 'ee/api';
 
+jest.mock('~/flash');
+
 describe('TimeMetricsCard', () => {
   const { full_path: groupPath } = group;
   let wrapper;
@@ -59,7 +61,7 @@ describe('TimeMetricsCard', () => {
 
     it('should render an error message', () => {
       expect(createFlash).toHaveBeenCalledWith(
-        'There was an error while fetching value stream analytics time metrics data.',
+        'There was an error while fetching value stream analytics time summary data.',
       );
     });
   });

ee/spec/frontend/api_spec.js

@@ -379,6 +379,32 @@ describe('Api', () => {
       });
     });
 
+    describe('cycleAnalyticsTimeSummaryData', () => {
+      it('fetches value stream analytics summary data', done => {
+        const response = [
+          { value: '10.0', title: 'Lead time', unit: 'per day' },
+          { value: '2.0', title: 'Cycle Time', unit: 'per day' },
+        ];
+        const params = {
+          ...defaultParams,
+        };
+
+        const expectedUrl = `${dummyCycleAnalyticsUrlRoot}/-/analytics/value_stream_analytics/time_summary`;
+        mock.onGet(expectedUrl).reply(200, response);
+
+        Api.cycleAnalyticsTimeSummaryData(groupId, params)
+          .then(responseObj =>
+            expectRequestWithCorrectParameters(responseObj, {
+              response,
+              params,
+              expectedUrl,
+            }),
+          )
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+
     describe('cycleAnalyticsGroupStagesAndEvents', () => {
       it('fetches custom stage events and all stages', done => {
         const response = { events: [], stages: [] };