[ML] refactor date_utils

x-pack/plugins/ml/public/application/util/date_utils.ts → x-pack/plugins/ml/common/util/date_utils.ts

@@ -6,10 +6,11 @@
 
 // utility functions for handling dates
 
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
 import dateMath from '@elastic/datemath';
-import { TimeRange } from '../../../../../../src/plugins/data/common';
+import { formatDate } from '@elastic/eui';
+import { TimeRange } from '../../../../../src/plugins/data/common';
+import { TIME_FORMAT } from '../constants/time_format';
+
 export function formatHumanReadableDate(ts: number) {
   return formatDate(ts, 'MMMM Do YYYY');
 }
@@ -28,3 +29,7 @@ export function validateTimeRange(time?: TimeRange): boolean {
   const momentDateTo = dateMath.parse(time.to);
   return !!(momentDateFrom && momentDateFrom.isValid() && momentDateTo && momentDateTo.isValid());
 }
+
+export const timeFormatter = (value: number) => {
+  return formatDate(value, TIME_FORMAT);
+};

x-pack/plugins/ml/public/application/components/annotations/annotation_description_list/index.tsx

@@ -15,7 +15,7 @@ import { EuiDescriptionList } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { Annotation } from '../../../../../common/types/annotations';
-import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../common/util/date_utils';
 
 interface Props {
   annotation: Annotation;

x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -31,8 +31,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 
-import { formatDate } from '@elastic/eui/lib/services/format';
-
 import { addItemToRecentlyAccessed } from '../../../util/recently_accessed';
 import { ml } from '../../../services/ml_api_service';
 import { mlJobService } from '../../../services/job_service';
@@ -42,7 +40,6 @@ import {
   getLatestDataOrBucketTimestamp,
   isTimeSeriesViewJob,
 } from '../../../../../common/util/job_utils';
-import { TIME_FORMAT } from '../../../../../common/constants/time_format';
 
 import {
   annotation$,
@@ -56,6 +53,7 @@ import {
 import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { ML_APP_URL_GENERATOR, ML_PAGES } from '../../../../../common/constants/ml_url_generator';
 import { PLUGIN_ID } from '../../../../../common/constants/app';
+import { timeFormatter } from '../../../../../common/util/date_utils';
 
 const CURRENT_SERIES = 'current_series';
 /**
@@ -377,10 +375,6 @@ class AnnotationsTableUI extends Component {
       );
     }
 
-    function renderDate(date) {
-      return formatDate(date, TIME_FORMAT);
-    }
-
     const columns = [
       {
         field: 'annotation',
@@ -397,7 +391,7 @@ class AnnotationsTableUI extends Component {
           defaultMessage: 'From',
         }),
         dataType: 'date',
-        render: renderDate,
+        render: timeFormatter,
         sortable: true,
       },
       {
@@ -406,7 +400,7 @@ class AnnotationsTableUI extends Component {
           defaultMessage: 'To',
         }),
         dataType: 'date',
-        render: renderDate,
+        render: timeFormatter,
         sortable: true,
       },
       {
@@ -415,7 +409,7 @@ class AnnotationsTableUI extends Component {
           defaultMessage: 'Last modified date',
         }),
         dataType: 'date',
-        render: renderDate,
+        render: timeFormatter,
         sortable: true,
       },
       {

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js

@@ -16,7 +16,7 @@ import {
   formatHumanReadableDate,
   formatHumanReadableDateTime,
   formatHumanReadableDateTimeSeconds,
-} from '../../util/date_utils';
+} from '../../../../common/util/date_utils';
 
 import { DescriptionCell } from './description_cell';
 import { DetectorCell } from './detector_cell';

x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js

@@ -26,7 +26,7 @@ import {
   EuiTabbedContent,
   EuiText,
 } from '@elastic/eui';
-import { formatHumanReadableDateTimeSeconds } from '../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../common/util/date_utils';
 
 import { EntityCell } from '../entity_cell';
 import {

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js

@@ -26,7 +26,7 @@ import { getFieldTypeFromMapping } from '../../services/mapping_service';
 import { ml } from '../../services/ml_api_service';
 import { mlJobService } from '../../services/job_service';
 import { getUrlForRecord, openCustomUrlWindow } from '../../util/custom_url_utils';
-import { formatHumanReadableDateTimeSeconds } from '../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../common/util/date_utils';
 import { getIndexPatternIdFromName } from '../../util/index_utils';
 import { replaceStringTokens } from '../../util/string_utils';
 import { ML_APP_URL_GENERATOR, ML_PAGES } from '../../../../common/constants/ml_url_generator';

x-pack/plugins/ml/public/application/components/data_grid/common.ts

@@ -37,7 +37,7 @@ import {
   OUTLIER_SCORE,
   TOP_CLASSES,
 } from '../../data_frame_analytics/common/constants';
-import { formatHumanReadableDateTimeSeconds } from '../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../common/util/date_utils';
 import { getNestedProperty } from '../../util/object_utils';
 import { mlFieldFormatService } from '../../services/field_format_service';
 

x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx

@@ -7,14 +7,13 @@
 import React, { FC } from 'react';
 
 import { EuiSpacer, EuiInMemoryTable, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
+
 import { i18n } from '@kbn/i18n';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 
 import { JobMessage } from '../../../../common/types/audit_message';
-import { TIME_FORMAT } from '../../../../common/constants/time_format';
 import { JobIcon } from '../job_message_icon';
+import { timeFormatter } from '../../../../common/util/date_utils';
 
 interface JobMessagesProps {
   messages: JobMessage[];
@@ -55,7 +54,7 @@ export const JobMessages: FC<JobMessagesProps> = ({ messages, loading, error, re
       name: i18n.translate('xpack.ml.jobMessages.timeLabel', {
         defaultMessage: 'Time',
       }),
-      render: (timestamp: number) => formatDate(timestamp, TIME_FORMAT),
+      render: timeFormatter,
       width: '120px',
       sortable: true,
     },

x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx

@@ -13,20 +13,19 @@ import {
   EuiInMemoryTable,
   EuiLoadingSpinner,
   EuiBasicTableColumn,
-  formatDate,
 } from '@elastic/eui';
 
 import { checkPermission } from '../../capabilities/check_capabilities';
 import { EditModelSnapshotFlyout } from './edit_model_snapshot_flyout';
 import { RevertModelSnapshotFlyout } from './revert_model_snapshot_flyout';
 import { ml } from '../../services/ml_api_service';
 import { JOB_STATE, DATAFEED_STATE } from '../../../../common/constants/states';
-import { TIME_FORMAT } from '../../../../common/constants/time_format';
 import { CloseJobConfirm } from './close_job_confirm';
 import {
   ModelSnapshot,
   CombinedJobWithStats,
 } from '../../../../common/types/anomaly_detection_jobs';
+import { timeFormatter } from '../../../../common/util/date_utils';
 
 interface Props {
   job: CombinedJobWithStats;
@@ -138,7 +137,7 @@ export const ModelSnapshotTable: FC<Props> = ({ job, refreshJobList }) => {
         defaultMessage: 'Date created',
       }),
       dataType: 'date',
-      render: renderDate,
+      render: timeFormatter,
       sortable: true,
     },
     {
@@ -147,7 +146,7 @@ export const ModelSnapshotTable: FC<Props> = ({ job, refreshJobList }) => {
         defaultMessage: 'Latest timestamp',
       }),
       dataType: 'date',
-      render: renderDate,
+      render: timeFormatter,
       sortable: true,
     },
     {
@@ -246,10 +245,6 @@ export const ModelSnapshotTable: FC<Props> = ({ job, refreshJobList }) => {
   );
 };
 
-function renderDate(date: number) {
-  return formatDate(date, TIME_FORMAT);
-}
-
 async function getCombinedJobState(jobId: string) {
   const jobs = await ml.jobs.jobs([jobId]);
 

x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx

@@ -32,7 +32,6 @@ import {
   EuiHorizontalRule,
   EuiSuperSelect,
   EuiText,
-  formatDate,
 } from '@elastic/eui';
 
 import {
@@ -47,8 +46,8 @@ import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader';
 import { EventRateChart } from '../../../jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart';
 import { Anomaly } from '../../../jobs/new_job/common/results_loader/results_loader';
 import { parseInterval } from '../../../../../common/util/parse_interval';
-import { TIME_FORMAT } from '../../../../../common/constants/time_format';
 import { CreateCalendar, CalendarEvent } from './create_calendar';
+import { timeFormatter } from '../../../../../common/util/date_utils';
 
 interface Props {
   snapshot: ModelSnapshot;
@@ -255,7 +254,7 @@ export const RevertModelSnapshotFlyout: FC<Props> = ({ snapshot, snapshots, job,
             <FormattedMessage
               id="xpack.ml.newJob.wizard.revertModelSnapshotFlyout.warningCallout.contents"
               defaultMessage="All anomaly detection results after {date} will be deleted."
-              values={{ date: formatDate(currentSnapshot.latest_record_time_stamp, TIME_FORMAT) }}
+              values={{ date: timeFormatter(currentSnapshot.latest_record_time_stamp) }}
             />
           </EuiCallOut>
 

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx

@@ -11,7 +11,7 @@ import { EuiIcon, EuiLoadingSpinner, EuiTabbedContent } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
-import { formatHumanReadableDateTimeSeconds } from '../../../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../../../common/util/date_utils';
 
 import { DataFrameAnalyticsListRow } from './common';
 import { ExpandedRowDetailsPane, SectionConfig, SectionItem } from './expanded_row_details_pane';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx

@@ -26,7 +26,7 @@ import {
 import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { ModelItemFull } from './models_list';
 import { useMlKibana } from '../../../../../contexts/kibana';
-import { timeFormatter } from '../../../../../../../common/util/time_formatter';
+import { timeFormatter } from '../../../../../../../common/util/date_utils';
 
 interface ExpandedRowProps {
   item: ModelItemFull;

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx

@@ -19,15 +19,13 @@ import {
   EuiBadge,
   SearchFilterConfig,
 } from '@elastic/eui';
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
+
 import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/basic_table';
 import { EuiTableSelectionType } from '@elastic/eui/src/components/basic_table/table_types';
 import { Action } from '@elastic/eui/src/components/basic_table/action_types';
 import { StatsBar, ModelsBarStats } from '../../../../../components/stats_bar';
 import { useInferenceApiService } from '../../../../../services/ml_api_service/inference';
 import { ModelsTableToConfigMapping } from './index';
-import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
 import { DeleteModelsModal } from './delete_models_modal';
 import { useMlKibana, useMlUrlGenerator, useNotifications } from '../../../../../contexts/kibana';
 import { ExpandedRow } from './expanded_row';
@@ -46,6 +44,7 @@ import { useTableSettings } from '../analytics_list/use_table_settings';
 import { filterAnalyticsModels, AnalyticsSearchBar } from '../analytics_search_bar';
 import { ML_PAGES } from '../../../../../../../common/constants/ml_url_generator';
 import { DataFrameAnalysisConfigType } from '../../../../../../../common/types/data_frame_analytics';
+import { timeFormatter } from '../../../../../../../common/util/date_utils';
 
 type Stats = Omit<TrainedModelStat, 'model_id'>;
 
@@ -376,7 +375,7 @@ export const ModelsList: FC = () => {
         defaultMessage: 'Created at',
       }),
       dataType: 'date',
-      render: (date: string) => formatDate(date, TIME_FORMAT),
+      render: timeFormatter,
       sortable: true,
     },
     {

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js

@@ -17,7 +17,7 @@ import d3 from 'd3';
 import $ from 'jquery';
 import moment from 'moment';
 
-import { formatHumanReadableDateTime } from '../../util/date_utils';
+import { formatHumanReadableDateTime } from '../../../../common/util/date_utils';
 import { formatValue } from '../../formatters/format_value';
 import { getSeverityColor, getSeverityWithLow } from '../../../../common/util/anomaly_utils';
 import {

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js

@@ -17,7 +17,7 @@ import $ from 'jquery';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 
-import { formatHumanReadableDateTime } from '../../util/date_utils';
+import { formatHumanReadableDateTime } from '../../../../common/util/date_utils';
 import { formatValue } from '../../formatters/format_value';
 import {
   getSeverityColor,

x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx

@@ -19,7 +19,7 @@ import { i18n } from '@kbn/i18n';
 import { Subject, Subscription } from 'rxjs';
 import { TooltipValue } from '@elastic/charts';
 import { htmlIdGenerator } from '@elastic/eui';
-import { formatHumanReadableDateTime } from '../util/date_utils';
+import { formatHumanReadableDateTime } from '../../../common/util/date_utils';
 import { numTicksForDateFormat } from '../util/chart_utils';
 import { getSeverityColor } from '../../../common/util/anomaly_utils';
 import { mlEscape } from '../util/string_utils';

x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { formatHumanReadableDateTime } from '../../../util/date_utils';
+import { formatHumanReadableDateTime } from '../../../../../common/util/date_utils';
 
 import { getDefaultChartsData } from '../../explorer_charts/explorer_charts_container_service';
 import { EXPLORER_ACTION, VIEW_BY_JOB_LABEL } from '../../explorer_constants';