Merge branch '62973-specify-time-frame-in-shareable-link-for-embedding-metrics' into 'master'

Specify time frame in metrics page See merge request gitlab-org/gitlab-ce!31283

Merge branch '62973-specify-time-frame-in-shareable-link-for-embedding-metrics' into 'master'
Specify time frame in metrics page See merge request gitlab-org/gitlab-ce!31283
c5495b52 · Mike Greiling · eec1ed52 · 055a7b97 · c5495b52 · c5495b52
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -2,8 +2,8 @@ import { join as joinPaths } from 'path';

 // Returns an array containing the value(s) of the
 // of the key passed as an argument
-export function getParameterValues(sParam) {
-  const sPageURL = decodeURIComponent(window.location.search.substring(1));
+export function getParameterValues(sParam, url = window.location) {
+  const sPageURL = decodeURIComponent(new URL(url).search.substring(1));

  return sPageURL.split('&').reduce((acc, urlParam) => {
    const sParameterName = urlParam.split('=');

--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -18,8 +18,8 @@ import MonitorSingleStatChart from './charts/single_stat.vue';
 import PanelType from './panel_type.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
-import { sidebarAnimationDuration, timeWindows, timeWindowsKeyNames } from '../constants';
-import { getTimeDiff } from '../utils';
+import { sidebarAnimationDuration, timeWindows } from '../constants';
+import { getTimeDiff, getTimeWindow } from '../utils';

 let sidebarMutationObserver;

@@ -147,6 +147,7 @@ export default {
      selectedTimeWindow: '',
      selectedTimeWindowKey: '',
      formIsValid: null,
+      timeWindows: {},
    };
  },
  computed: {
@@ -184,17 +185,6 @@ export default {
      currentDashboard: this.currentDashboard,
      projectPath: this.projectPath,
    });
-
-    this.timeWindows = timeWindows;
-    this.selectedTimeWindowKey =
-      _.escape(getParameterValues('time_window')[0]) || timeWindowsKeyNames.eightHours;
-
-    // Set default time window if the selectedTimeWindowKey is bogus
-    if (!Object.keys(this.timeWindows).includes(this.selectedTimeWindowKey)) {
-      this.selectedTimeWindowKey = timeWindowsKeyNames.eightHours;
-    }
-
-    this.selectedTimeWindow = this.timeWindows[this.selectedTimeWindowKey];
  },
  beforeDestroy() {
    if (sidebarMutationObserver) {
@@ -205,7 +195,20 @@ export default {
    if (!this.hasMetrics) {
      this.setGettingStartedEmptyState();
    } else {
-      this.fetchData(getTimeDiff(this.selectedTimeWindow));
+      const defaultRange = getTimeDiff();
+      const start = getParameterValues('start')[0] || defaultRange.start;
+      const end = getParameterValues('end')[0] || defaultRange.end;
+
+      const range = {
+        start,
+        end,
+      };
+
+      this.timeWindows = timeWindows;
+      this.selectedTimeWindowKey = getTimeWindow(range);
+      this.selectedTimeWindow = this.timeWindows[this.selectedTimeWindowKey];
+
+      this.fetchData(range);

      sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
      sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
@@ -259,7 +262,8 @@ export default {
      return this.timeWindows[key] === this.selectedTimeWindow;
    },
    setTimeWindowParameter(key) {
-      return `?time_window=${key}`;
+      const { start, end } = getTimeDiff(key);
+      return `?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`;
    },
    groupHasData(group) {
      return this.chartsWithData(group.metrics).length > 0;

--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
 <script>
 import { mapActions, mapState } from 'vuex';
+import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import GraphGroup from './graph_group.vue';
 import MonitorAreaChart from './charts/area.vue';
-import { sidebarAnimationDuration, timeWindowsKeyNames, timeWindows } from '../constants';
+import { sidebarAnimationDuration } from '../constants';
 import { getTimeDiff } from '../utils';

 let sidebarMutationObserver;
@@ -19,10 +20,17 @@ export default {
    },
  },
  data() {
+    const defaultRange = getTimeDiff();
+    const start = getParameterValues('start', this.dashboardUrl)[0] || defaultRange.start;
+    const end = getParameterValues('end', this.dashboardUrl)[0] || defaultRange.end;
+
+    const params = {
+      start,
+      end,
+    };
+
    return {
-      params: {
-        ...getTimeDiff(timeWindows[timeWindowsKeyNames.eightHours]),
-      },
+      params,
      elWidth: 0,
    };
  },
@@ -73,7 +81,7 @@ export default {
        prometheusEndpointEnabled: true,
      });
      this.setEndpoints({
-        dashboardEndpoint: this.dashboardUrl,
+        dashboardEndpoint: removeParams(['start', 'end'], this.dashboardUrl),
      });
      this.setShowErrorBanner(false);
    },

--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -21,11 +21,19 @@ export const timeWindows = {
  oneWeek: __('1 week'),
 };

-export const timeWindowsKeyNames = {
-  thirtyMinutes: 'thirtyMinutes',
-  threeHours: 'threeHours',
-  eightHours: 'eightHours',
-  oneDay: 'oneDay',
-  threeDays: 'threeDays',
-  oneWeek: 'oneWeek',
+export const secondsIn = {
+  thirtyMinutes: 60 * 30,
+  threeHours: 60 * 60 * 3,
+  eightHours: 60 * 60 * 8,
+  oneDay: 60 * 60 * 24 * 1,
+  threeDays: 60 * 60 * 24 * 3,
+  oneWeek: 60 * 60 * 24 * 7 * 1,
 };
+
+export const timeWindowsKeyNames = Object.keys(secondsIn).reduce(
+  (otherTimeWindows, timeWindow) => ({
+    ...otherTimeWindows,
+    [timeWindow]: timeWindow,
+  }),
+  {},
+);
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -151,7 +151,7 @@ function fetchPrometheusResult(prometheusEndpoint, params) {
 */
 export const fetchPrometheusMetric = ({ commit }, { metric, params }) => {
  const { start, end } = params;
-  const timeDiff = end - start;
+  const timeDiff = (new Date(end) - new Date(start)) / 1000;

  const minStep = 60;
  const queryDataPoints = 600;

--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
-import { timeWindows } from './constants';
+import { secondsIn, timeWindowsKeyNames } from './constants';

-/**
- * method that converts a predetermined time window to minutes
- * defaults to 8 hours as the default option
- * @param {String} timeWindow - The time window to convert to minutes
- * @returns {number} The time window in minutes
- */
-const getTimeDifferenceSeconds = timeWindow => {
-  switch (timeWindow) {
-    case timeWindows.thirtyMinutes:
-      return 60 * 30;
-    case timeWindows.threeHours:
-      return 60 * 60 * 3;
-    case timeWindows.oneDay:
-      return 60 * 60 * 24 * 1;
-    case timeWindows.threeDays:
-      return 60 * 60 * 24 * 3;
-    case timeWindows.oneWeek:
-      return 60 * 60 * 24 * 7 * 1;
-    default:
-      return 60 * 60 * 8;
-  }
-};
+export const getTimeDiff = timeWindow => {
+  const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds
+  const difference = secondsIn[timeWindow] || secondsIn.eightHours;
+  const start = end - difference;

-export const getTimeDiff = selectedTimeWindow => {
-  const end = Date.now() / 1000; // convert milliseconds to seconds
-  const start = end - getTimeDifferenceSeconds(selectedTimeWindow);
-
-  return { start, end };
+  return {
+    start: new Date(start * 1000).toISOString(),
+    end: new Date(end * 1000).toISOString(),
+  };
 };

+export const getTimeWindow = ({ start, end }) =>
+  Object.entries(secondsIn).reduce((acc, [timeRange, value]) => {
+    if (end - start === value) {
+      return timeRange;
+    }
+    return acc;
+  }, timeWindowsKeyNames.eightHours);
+
 /**
 * This method is used to validate if the graph data format for a chart component
 * that needs a time series as a response from a prometheus query (query_range) is

--- a/changelogs/unreleased/62973-specify-time-frame-in-shareable-link-for-embedding-metrics.yml
+++ b/changelogs/unreleased/62973-specify-time-frame-in-shareable-link-for-embedding-metrics.yml
+---
+title: Allow links to metrics dashboard at a specific time
+merge_request: 31283
+author:
+type: added
--- a/spec/frontend/lib/utils/url_utility_spec.js
+++ b/spec/frontend/lib/utils/url_utility_spec.js
@@ -34,6 +34,41 @@ describe('URL utility', () => {
    });
  });

+  describe('getParameterValues', () => {
+    beforeEach(() => {
+      setWindowLocation({
+        href: 'https://gitlab.com?test=passing&multiple=1&multiple=2',
+        // make our fake location act like real window.location.toString
+        // URL() (used in getParameterValues) does this if passed an object
+        toString() {
+          return this.href;
+        },
+      });
+    });
+
+    it('returns empty array for no params', () => {
+      expect(urlUtils.getParameterValues()).toEqual([]);
+    });
+
+    it('returns empty array for non-matching params', () => {
+      expect(urlUtils.getParameterValues('notFound')).toEqual([]);
+    });
+
+    it('returns single match', () => {
+      expect(urlUtils.getParameterValues('test')).toEqual(['passing']);
+    });
+
+    it('returns multiple matches', () => {
+      expect(urlUtils.getParameterValues('multiple')).toEqual(['1', '2']);
+    });
+
+    it('accepts url as second arg', () => {
+      const url = 'https://gitlab.com?everything=works';
+      expect(urlUtils.getParameterValues('everything', url)).toEqual(['works']);
+      expect(urlUtils.getParameterValues('test', url)).toEqual([]);
+    });
+  });
+
  describe('mergeUrlParams', () => {
    it('adds w', () => {
      expect(urlUtils.mergeUrlParams({ w: 1 }, '#frag')).toBe('?w=1#frag');

--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -307,7 +307,7 @@ describe('Dashboard', () => {
      });

      spyOn(component.$store, 'dispatch').and.stub();
-      const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff');
+      const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff').and.callThrough();

      component.$store.commit(
        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
@@ -319,7 +319,7 @@ describe('Dashboard', () => {
      Vue.nextTick()
        .then(() => {
          expect(component.$store.dispatch).toHaveBeenCalled();
-          expect(getTimeDiffSpy).toHaveBeenCalledWith(component.selectedTimeWindow);
+          expect(getTimeDiffSpy).toHaveBeenCalled();

          done();
        })
@@ -327,7 +327,17 @@ describe('Dashboard', () => {
    });

    it('shows a specific time window selected from the url params', done => {
-      spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
+      const start = 1564439536;
+      const end = 1564441336;
+      spyOnDependency(Dashboard, 'getTimeDiff').and.returnValue({
+        start,
+        end,
+      });
+      spyOnDependency(Dashboard, 'getParameterValues').and.callFake(param => {
+        if (param === 'start') return [start];
+        if (param === 'end') return [end];
+        return [];
+      });

      component = new DashboardComponent({
        el: document.querySelector('.prometheus-graphs'),

--- a/spec/javascripts/monitoring/store/actions_spec.js
+++ b/spec/javascripts/monitoring/store/actions_spec.js
@@ -313,8 +313,8 @@ describe('Monitoring store actions', () => {
    it('commits prometheus query result', done => {
      const commit = jasmine.createSpy();
      const params = {
-        start: '1557216349.469',
-        end: '1557218149.469',
+        start: '2019-08-06T12:40:02.184Z',
+        end: '2019-08-06T20:40:02.184Z',
      };
      const metric = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics[0];
      const state = storeState();

--- a/spec/javascripts/monitoring/utils_spec.js
+++ b/spec/javascripts/monitoring/utils_spec.js
@@ -3,28 +3,38 @@ import { timeWindows } from '~/monitoring/constants';
 import { graphDataPrometheusQuery, graphDataPrometheusQueryRange } from './mock_data';

 describe('getTimeDiff', () => {
+  function secondsBetween({ start, end }) {
+    return (new Date(end) - new Date(start)) / 1000;
+  }
+
+  function minutesBetween(timeRange) {
+    return secondsBetween(timeRange) / 60;
+  }
+
+  function hoursBetween(timeRange) {
+    return minutesBetween(timeRange) / 60;
+  }
+
  it('defaults to an 8 hour (28800s) difference', () => {
    const params = getTimeDiff();

-    expect(params.end - params.start).toEqual(28800);
+    expect(hoursBetween(params)).toEqual(8);
  });

  it('accepts time window as an argument', () => {
-    const params = getTimeDiff(timeWindows.thirtyMinutes);
+    const params = getTimeDiff('thirtyMinutes');

-    expect(params.end - params.start).not.toEqual(28800);
+    expect(minutesBetween(params)).toEqual(30);
  });

  it('returns a value for every defined time window', () => {
    const nonDefaultWindows = Object.keys(timeWindows).filter(window => window !== 'eightHours');

-    nonDefaultWindows.forEach(window => {
-      const params = getTimeDiff(timeWindows[window]);
-      const diff = params.end - params.start;
+    nonDefaultWindows.forEach(timeWindow => {
+      const params = getTimeDiff(timeWindow);

-      // Ensure we're not returning the default, 28800 (the # of seconds in 8 hrs)
-      expect(diff).not.toEqual(28800);
-      expect(typeof diff).toEqual('number');
+      // Ensure we're not returning the default
+      expect(hoursBetween(params)).not.toEqual(8);
    });
  });
 });