Timefilter should return strings instead of moments (#25625)

* fix timefilter to return strings instead of moment objects

* add functional test

* remove unused functions

src/ui/public/filter_bar/lib/__tests__/change_time_filter.test.js

@@ -36,31 +36,30 @@ jest.mock('ui/chrome',
     },
   }), { virtual: true });
 
-import moment from 'moment';
 import expect from 'expect.js';
 import { changeTimeFilter } from '../change_time_filter';
 import { timefilter } from 'ui/timefilter';
 
 describe('changeTimeFilter()', function () {
+  const gt = 1388559600000;
+  const lt = 1388646000000;
 
   test('should change the timefilter to match the range gt/lt', function () {
-    const filter = { range: { '@timestamp': { gt: 1388559600000, lt: 1388646000000 } } };
+    const filter = { range: { '@timestamp': { gt, lt } } };
     changeTimeFilter(filter);
-    expect(timefilter.getTime().mode).to.be('absolute');
-    expect(moment.isMoment(timefilter.getTime().to)).to.be(true);
-    expect(timefilter.getTime().to.isSame('2014-01-02'));
-    expect(moment.isMoment(timefilter.getTime().from)).to.be(true);
-    expect(timefilter.getTime().from.isSame('2014-01-01'));
+    const { mode, to, from } = timefilter.getTime();
+    expect(mode).to.be('absolute');
+    expect(to).to.be(new Date(lt).toISOString());
+    expect(from).to.be(new Date(gt).toISOString());
   });
 
   test('should change the timefilter to match the range gte/lte', function () {
-    const filter = { range: { '@timestamp': { gte: 1388559600000, lte: 1388646000000 } } };
+    const filter = { range: { '@timestamp': { gte: gt, lte: lt } } };
     changeTimeFilter(filter);
-    expect(timefilter.getTime().mode).to.be('absolute');
-    expect(moment.isMoment(timefilter.getTime().to)).to.be(true);
-    expect(timefilter.getTime().to.isSame('2014-01-02'));
-    expect(moment.isMoment(timefilter.getTime().from)).to.be(true);
-    expect(timefilter.getTime().from.isSame('2014-01-01'));
+    const { mode, to, from } = timefilter.getTime();
+    expect(mode).to.be('absolute');
+    expect(to).to.be(new Date(lt).toISOString());
+    expect(from).to.be(new Date(gt).toISOString());
   });
 
 });

src/ui/public/timefilter/timefilter.js

@@ -37,7 +37,12 @@ class Timefilter extends SimpleEmitter {
   }
 
   getTime = () => {
-    return _.clone(this._time);
+    const { from, to } = this._time;
+    return {
+      ...this._time,
+      from: moment.isMoment(from) ? from.toISOString() : from,
+      to: moment.isMoment(to) ? to.toISOString() : to
+    };
   }
 
   /**

src/ui/public/timefilter/timefilter.test.js

@@ -48,6 +48,7 @@ jest.mock('ui/timefilter/lib/parse_querystring',
 
 import sinon from 'sinon';
 import expect from 'expect.js';
+import moment from 'moment';
 import { timefilter } from './timefilter';
 
 function stubNowTime(nowTime) {
@@ -101,6 +102,17 @@ describe('setTime', () => {
     expect(update.called).to.be(true);
     expect(fetch.called).to.be(true);
   });
+
+  test('should return strings and not moment objects', () => {
+    const from = moment().subtract(15, 'minutes');
+    const to = moment();
+    timefilter.setTime({ to, from, mode: 'absolute' });
+    expect(timefilter.getTime()).to.eql({
+      from: from.toISOString(),
+      to: to.toISOString(),
+      mode: 'absolute'
+    });
+  });
 });
 
 describe('setRefreshInterval', () => {

src/ui/public/utils/__tests__/brush_event.test.js

@@ -38,7 +38,6 @@ jest.mock('ui/chrome',
 
 import _ from 'lodash';
 import expect from 'expect.js';
-import moment from 'moment';
 import { onBrushEvent } from '../brush_event';
 import { timefilter } from 'ui/timefilter';
 
@@ -102,17 +101,12 @@ describe('brushEvent', () => {
         const event = _.cloneDeep(dateEvent);
         event.range = [JAN_01_2014, JAN_01_2014 + DAY_IN_MS];
         onBrushEvent(event, $state);
-        expect(timefilter.getTime().mode).to.be('absolute');
-        expect(moment.isMoment(timefilter.getTime().from))
-          .to.be(true);
+        const { mode, from, to } = timefilter.getTime();
+        expect(mode).to.be('absolute');
         // Set to a baseline timezone for comparison.
-        expect(timefilter.getTime().from.utcOffset(0).format('YYYY-MM-DD'))
-          .to.equal('2014-01-01');
-        expect(moment.isMoment(timefilter.getTime().to))
-          .to.be(true);
+        expect(from).to.be(new Date(JAN_01_2014).toISOString());
         // Set to a baseline timezone for comparison.
-        expect(timefilter.getTime().to.utcOffset(0).format('YYYY-MM-DD'))
-          .to.equal('2014-01-02');
+        expect(to).to.be(new Date(JAN_01_2014 + DAY_IN_MS).toISOString());
       });
     });
 

test/functional/apps/discover/_discover.js

@@ -125,6 +125,11 @@ export default function ({ getService, getPageObjects }) {
         expect(actualTimeString).to.be(expectedTimeString);
       });
 
+      it('should show bars in the correct time zone', async function () {
+        const ticks = await PageObjects.discover.getBarChartXTicks();
+        expect(ticks).to.eql(['2015-09-20 00:00', '2015-09-21 00:00', '2015-09-22 00:00', '2015-09-23 00:00']);
+      });
+
       it('should show correct initial chart interval of Auto', async function () {
         const actualInterval = await PageObjects.discover.getChartInterval();
 
@@ -404,5 +409,15 @@ export default function ({ getService, getPageObjects }) {
         });
       });
     });
+
+    describe('time zone switch', () => {
+      it('should show bars in the correct time zone after switching', async function () {
+        await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'America/Phoenix' });
+        await remote.refresh();
+        await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        const ticks = await PageObjects.discover.getBarChartXTicks();
+        expect(ticks).to.eql(['2015-09-19 17:00', '2015-09-20 17:00', '2015-09-21 17:00', '2015-09-22 17:00']);
+      });
+    });
   });
 }

test/functional/page_objects/discover_page.js

@@ -125,6 +125,12 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       return await testSubjects.getVisibleText('discoverCurrentQuery');
     }
 
+    async getBarChartXTicks() {
+      return getRemote()
+        .findAllByCssSelector('.x.axis.CategoryAxis-1 > .tick > text')
+        .getVisibleText();
+    }
+
     getBarChartData() {
       let yAxisLabel = 0;
       let yAxisHeight;