Avoid mutating global moment object (#17341)

* Clone the moment object before using it to generate reporting data
so that calling .utc() doesn't mutate global state.

* fix tests

* do less work on each digest cycle

src/ui/public/timepicker/__tests__/toggle.js

@@ -2,16 +2,23 @@ import moment from 'moment';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import $ from 'jquery';
+import sinon from 'sinon';
 
 describe('kbnGlobalTimepicker', function () {
+  const sandbox = sinon.sandbox.create();
+
   let compile;
   let scope;
 
   beforeEach(() => {
     ngMock.module('kibana');
-    ngMock.inject(($compile, $rootScope) => {
+    ngMock.inject(($compile, $rootScope, timefilter) => {
       scope = $rootScope.$new();
-      compile = () => {
+      compile = (timefilterStubProperties = {}) => {
+        Object.keys(timefilterStubProperties).forEach((key) => {
+          sandbox.stub(timefilter, key, timefilterStubProperties[key]);
+        });
+
         const $el = $('<kbn-global-timepicker></kbn-global-timepicker>');
         $el.data('$kbnTopNavController', {}); // Mock the kbnTopNav
         $compile($el)(scope);
@@ -20,6 +27,11 @@ describe('kbnGlobalTimepicker', function () {
       };
     });
   });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
   it('injects the timepicker into the DOM', () => {
     const $el = compile();
     expect($el.attr('data-test-subj')).to.be('globalTimepicker');
@@ -32,13 +44,13 @@ describe('kbnGlobalTimepicker', function () {
       min: moment(minString),
       max: moment(maxString),
     };
-    scope.timefilter = {
+    const timefilter = {
       isAutoRefreshSelectorEnabled: true,
       isTimeRangeSelectorEnabled: false,
       getBounds: () => bounds
     };
 
-    const $el = compile();
+    const $el = compile(timefilter);
 
     expect($el.attr('data-shared-timefilter-from')).to.eql(minString);
     expect($el.attr('data-shared-timefilter-to')).to.eql(maxString);
@@ -51,13 +63,13 @@ describe('kbnGlobalTimepicker', function () {
       min: moment(minString),
       max: moment(maxString),
     };
-    scope.timefilter = {
+    const timefilter = {
       isAutoRefreshSelectorEnabled: false,
       isTimeRangeSelectorEnabled: true,
       getBounds: () => bounds
     };
 
-    const $el = compile();
+    const $el = compile(timefilter);
 
     expect($el.attr('data-shared-timefilter-from')).to.eql(minString);
     expect($el.attr('data-shared-timefilter-to')).to.eql(maxString);
@@ -70,13 +82,13 @@ describe('kbnGlobalTimepicker', function () {
       min: moment(minString),
       max: moment(maxString),
     };
-    scope.timefilter = {
+    const timefilter = {
       isAutoRefreshSelectorEnabled: false,
       isTimeRangeSelectorEnabled: false,
       getBounds: () => bounds
     };
 
-    const $el = compile();
+    const $el = compile(timefilter);
 
     expect($el.attr('data-shared-timefilter-from')).to.eql('');
     expect($el.attr('data-shared-timefilter-to')).to.eql('');

src/ui/public/timepicker/kbn_global_timepicker.html

@@ -1,7 +1,7 @@
 <div
   ng-show="timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled"
-  data-shared-timefilter-from="{{timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled ? timefilter.getBounds().min.utc().format() : null }}"
-  data-shared-timefilter-to="{{timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled ? timefilter.getBounds().max.utc().format() : null }}"
+  data-shared-timefilter-from="{{ getSharedTimeFilterFromDate() }}"
+  data-shared-timefilter-to="{{ getSharedTimeFilterToDate() }}"
   class="kuiLocalMenu"
   data-test-subj="globalTimepicker"
 >

src/ui/public/timepicker/kbn_global_timepicker.js

@@ -45,6 +45,18 @@ uiModules
           timefilter.refreshInterval = interval;
           kbnTopNav.close('interval');
         };
+
+        $scope.getSharedTimeFilterFromDate = function () {
+          return (timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled)
+            ? timefilter.getBounds().min.clone().utc().format()
+            : null;
+        };
+
+        $scope.getSharedTimeFilterToDate = function () {
+          return (timefilter.isAutoRefreshSelectorEnabled || timefilter.isTimeRangeSelectorEnabled)
+            ? timefilter.getBounds().max.clone().utc().format()
+            : null;
+        };
       },
     };
   });