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