Moment.js replaced with Dayjs (#1738)

## Which problem is this PR solving?
- Resolves #1736 

## Description of the changes
- I've removed `moment.js` and replaced it with `dayjs` packages
- I've fixed all the failing tests
- Tested all dates and time formatting

## How was this change tested?
- All the test cases are passing
- All the pages that got impacted were tested visually by me
- Including the `Monitor` tab, `Span` and `Trace` view, `Search` page,
all the charts, etc.

The UI was checked between `jaeger-all-in-one` and changes of this
commit

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: Prathamesh Mutkure <pmutkure009@gmail.com>

packages/jaeger-ui/package.json

@@ -60,6 +60,7 @@
     "cytoscape": "^3.2.1",
     "cytoscape-dagre": "^2.0.0",
     "dagre": "^0.8.5",
+    "dayjs": "^1.11.9",
     "deep-freeze": "^0.0.1",
     "drange": "^2.0.0",
     "global": "^4.3.2",
@@ -71,7 +72,6 @@
     "lru-memoize": "^1.1.0",
     "match-sorter": "^6.3.1",
     "memoize-one": "^6.0.0",
-    "moment": "^2.18.1",
     "object-hash": "^3.0.0",
     "prop-types": "^15.5.10",
     "query-string": "^8.1.0",

packages/jaeger-ui/src/api/jaeger.js

@@ -13,11 +13,14 @@
 // limitations under the License.
 
 import fetch from 'isomorphic-fetch';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import _duration from 'dayjs/plugin/duration';
 import queryString from 'query-string';
 
 import prefixUrl from '../utils/prefix-url';
 
+dayjs.extend(_duration);
+
 // export for tests
 export function getMessageFromError(errData, status) {
   if (errData.code != null && errData.msg != null) {
@@ -78,7 +81,7 @@ function getJSON(url, options = {}) {
 
 export const DEFAULT_API_ROOT = prefixUrl('/api/');
 export const ANALYTICS_ROOT = prefixUrl('/analytics/');
-export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMilliseconds();
+export const DEFAULT_DEPENDENCY_LOOKBACK = dayjs.duration(1, 'weeks').asMilliseconds();
 
 const JaegerAPI = {
   apiRoot: DEFAULT_API_ROOT,

packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx

@@ -20,7 +20,7 @@ import { Input, Button, Popover, Select, Row, Col } from 'antd';
 import _get from 'lodash/get';
 import logfmtParser from 'logfmt/lib/logfmt_parser';
 import { stringify as logfmtStringify } from 'logfmt/lib/stringify';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import memoizeOne from 'memoize-one';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
@@ -50,8 +50,8 @@ export function getUnixTimeStampInMSFromForm({ startDate, startDateTime, endDate
   const start = `${startDate} ${startDateTime}`;
   const end = `${endDate} ${endDateTime}`;
   return {
-    start: `${moment(start, 'YYYY-MM-DD HH:mm').valueOf()}000`,
-    end: `${moment(end, 'YYYY-MM-DD HH:mm').valueOf()}000`,
+    start: `${dayjs(start, 'YYYY-MM-DD HH:mm').valueOf()}000`,
+    end: `${dayjs(end, 'YYYY-MM-DD HH:mm').valueOf()}000`,
   };
 }
 
@@ -73,7 +73,7 @@ export function convTagsLogfmt(tags) {
 
 export function lookbackToTimestamp(lookback, from) {
   const unit = lookback.substr(-1);
-  return moment(from).subtract(parseInt(lookback, 10), unit).valueOf() * 1000;
+  return dayjs(from).subtract(parseInt(lookback, 10), unit).valueOf() * 1000;
 }
 
 const lookbackOptions = [
@@ -538,7 +538,7 @@ export function mapStateToProps(state) {
     traceID: traceIDParams,
   } = queryString.parse(state.router.location.search);
 
-  const nowInMicroseconds = moment().valueOf() * 1000;
+  const nowInMicroseconds = dayjs().valueOf() * 1000;
   const today = formatDate(nowInMicroseconds);
   const currentTime = formatTime(nowInMicroseconds);
   const lastSearch = store.get('lastSearch');

packages/jaeger-ui/src/components/SearchTracePage/SearchForm.test.js

@@ -17,7 +17,7 @@ jest.mock('store');
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import queryString from 'query-string';
 import store from 'store';
 
@@ -87,19 +87,16 @@ describe('conversion utils', () => {
 
   describe('convertQueryParamsToFormDates()', () => {
     it('converts correctly', () => {
-      const startMoment = moment().subtract(1, 'day');
-      const endMoment = moment();
-      const params = {
-        start: `${startMoment.valueOf()}000`,
-        end: `${endMoment.valueOf()}000`,
-      };
-
       const { queryStartDate, queryStartDateTime, queryEndDate, queryEndDateTime } =
-        convertQueryParamsToFormDates(params);
-      expect(queryStartDate).toBe(startMoment.format(DATE_FORMAT));
-      expect(queryStartDateTime).toBe(startMoment.format(TIME_FORMAT));
-      expect(queryEndDate).toBe(endMoment.format(DATE_FORMAT));
-      expect(queryEndDateTime).toBe(endMoment.format(TIME_FORMAT));
+        convertQueryParamsToFormDates({
+          start: '946720800000000', // Jan 1, 2000 10:00 AM
+          end: '946807200000000', // Jan 2, 2000 10:00 AM
+        });
+
+      expect(queryStartDate).toBe('2000-01-01');
+      expect(queryStartDateTime).toBe('10:00');
+      expect(queryEndDate).toBe('2000-01-02');
+      expect(queryEndDateTime).toBe('10:00');
     });
   });
 
@@ -298,7 +295,7 @@ describe('submitForm()', () => {
     function getCalledDuration(mock) {
       const { start, end } = mock.calls[0][0];
       const diffMs = (Number(end) - Number(start)) / 1000;
-      return moment.duration(diffMs);
+      return dayjs.duration(diffMs);
     }
 
     it('subtracts `lookback` from `fields.end`', () => {

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx

@@ -18,7 +18,8 @@ import { LocationDescriptor } from 'history';
 import { Link } from 'react-router-dom';
 
 import { sortBy } from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { IoAlert } from 'react-icons/io5';
 
@@ -32,6 +33,8 @@ import { KeyValuePair, Trace } from '../../../types/trace';
 
 import './ResultItem.css';
 
+dayjs.extend(relativeTime);
+
 type Props = {
   durationPercent: number;
   isInDiffCohort: boolean;
@@ -57,7 +60,7 @@ export default class ResultItem extends React.PureComponent<Props, State> {
     super(props, state);
     const { startTime, spans } = props.trace;
 
-    const mDate = moment(startTime / 1000);
+    const startTimeDayjs = dayjs(startTime / 1000);
 
     const erroredServices: Set<string> = new Set<string>();
 
@@ -71,8 +74,8 @@ export default class ResultItem extends React.PureComponent<Props, State> {
 
     this.state = {
       numSpans: spans.length,
-      timeStr: mDate.format('h:mm:ss a'),
-      fromNow: mDate.fromNow(),
+      timeStr: startTimeDayjs.format('h:mm:ss a'),
+      fromNow: startTimeDayjs.fromNow(),
       numErredSpans,
       erroredServices,
     };

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { useRef, useState, useLayoutEffect } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 import { XYPlot, XAxis, YAxis, MarkSeries, Hint } from 'react-vis';
 
@@ -68,7 +68,7 @@ export default function ScatterPlot(props) {
           <XAxis
             title="Time"
             tickTotal={4}
-            tickFormat={t => moment(t / ONE_MILLISECOND).format('hh:mm:ss a')}
+            tickFormat={t => dayjs(t / ONE_MILLISECOND).format('hh:mm:ss a')}
           />
           <YAxis title="Duration" tickTotal={3} tickFormat={t => formatDuration(t)} />
           <MarkSeries

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.tsx

@@ -15,7 +15,7 @@
 
 import React, { Component } from 'react';
 import { Row, Col, Table, Button, Select } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { ColumnProps } from 'antd/es/table';
 import { Form } from '@ant-design/compatible';
 import './index.css';
@@ -172,7 +172,7 @@ export default class TraceSpanView extends Component<Props, State> {
         dataIndex: 'startTime',
         sorter: (a, b) => a.startTime - b.startTime,
         render: (cell: number) => {
-          return moment(cell / 1000).format('DD MMM YYYY hh:mm A');
+          return dayjs(cell / 1000).format('DD MMM YYYY hh:mm A');
         },
       },
     ];

packages/jaeger-ui/src/components/common/RelativeDate.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import { formatRelativeDate } from '../../utils/date';
 
@@ -26,7 +26,7 @@ type Props = {
 // https://github.com/Microsoft/TypeScript/issues/21699
 export default function RelativeDate(props: Props): any {
   const { value, includeTime, fullMonthName } = props;
-  const m = moment.isMoment(value) ? value : moment(value);
+  const m = dayjs.isDayjs(value) ? value : dayjs(value);
   const dateStr = formatRelativeDate(m, Boolean(fullMonthName));
   const timeStr = includeTime ? `, ${m.format('h:mm:ss a')}` : '';
   return `${dateStr}${timeStr}`;

packages/jaeger-ui/src/utils/date.test.js

@@ -24,6 +24,11 @@ import {
   ONE_MINUTE,
   ONE_HOUR,
   ONE_DAY,
+  formatDate,
+  formatTime,
+  formatDatetime,
+  formatMillisecondTime,
+  formatSecondTime,
 } from './date.tsx';
 
 describe('formatDuration', () => {
@@ -184,6 +189,10 @@ describe('convertToTimeUnit', () => {
     const input = 172800000000;
     expect(convertToTimeUnit(input, 'days')).toBe(2);
   });
+  it('convert duration to days', () => {
+    const input = 172800000000;
+    expect(convertToTimeUnit(input, 'days')).toBe(2);
+  });
 });
 
 describe('formatRelativeDate', () => {
@@ -218,3 +227,33 @@ describe('formatRelativeDate', () => {
     expect(formatRelativeDate(input)).toBe(output);
   });
 });
+
+describe('format microseconds', () => {
+  const dateStr = 'January 1 2000, 10:00:00.000';
+  const dateInMilliseconds = Date.parse(dateStr);
+
+  it('formateDate formats microseconds to date', () => {
+    const dateInMicroseconds = dateInMilliseconds * ONE_MILLISECOND;
+    expect(formatDate(dateInMicroseconds)).toBe('2000-01-01');
+  });
+
+  it('formatTime formats microseconds to time', () => {
+    const dateInMicroseconds = dateInMilliseconds * ONE_MILLISECOND;
+    expect(formatTime(dateInMicroseconds)).toBe('10:00');
+  });
+
+  it('formatDateTime formats microseconds to standard date format', () => {
+    const dateInMicroseconds = dateInMilliseconds * ONE_MILLISECOND;
+    expect(formatDatetime(dateInMicroseconds)).toBe('January 1 2000, 10:00:00.000');
+  });
+
+  it('formatMillisecondTime formats microseconds to milliseconds', () => {
+    const durationInMicroseconds = 1000 * ONE_MILLISECOND;
+    expect(formatMillisecondTime(durationInMicroseconds)).toBe('1000ms');
+  });
+
+  it('formatSecondTime formats microseconds to seconds', () => {
+    const durationInMicroseconds = 1000 * ONE_MILLISECOND;
+    expect(formatSecondTime(durationInMicroseconds)).toBe('1s');
+  });
+});