[ML] Model management UI fixes and enhancements

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;
@@ -61,7 +61,7 @@ export const AnnotationDescriptionList = ({ annotation, detectorDescription }: P
           defaultMessage: 'Created by',
         }
       ),
-      description: annotation.create_username,
+      description: annotation.create_username ?? '',
     });
     listItems.push({
       title: i18n.translate(
@@ -79,7 +79,7 @@ export const AnnotationDescriptionList = ({ annotation, detectorDescription }: P
           defaultMessage: 'Modified by',
         }
       ),
-      description: annotation.modified_username,
+      description: annotation.modified_username ?? '',
     });
   }
   if (detectorDescription !== undefined) {
@@ -94,19 +94,19 @@ export const AnnotationDescriptionList = ({ annotation, detectorDescription }: P
   if (annotation.partition_field_name !== undefined) {
     listItems.push({
       title: annotation.partition_field_name,
-      description: annotation.partition_field_value,
+      description: annotation.partition_field_value ?? '',
     });
   }
   if (annotation.over_field_name !== undefined) {
     listItems.push({
       title: annotation.over_field_name,
-      description: annotation.over_field_value,
+      description: annotation.over_field_value ?? '',
     });
   }
   if (annotation.by_field_name !== undefined) {
     listItems.push({
       title: annotation.by_field_name,
-      description: annotation.by_field_value,
+      description: annotation.by_field_value ?? '',
     });
   }
 

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';