diff --git a/x-pack/plugins/ml/public/application/util/date_utils.test.ts b/x-pack/plugins/ml/common/util/date_utils.test.ts
similarity index 100%
rename from x-pack/plugins/ml/public/application/util/date_utils.test.ts
rename to x-pack/plugins/ml/common/util/date_utils.test.ts
diff --git a/x-pack/plugins/ml/public/application/util/date_utils.ts b/x-pack/plugins/ml/common/util/date_utils.ts
similarity index 78%
rename from x-pack/plugins/ml/public/application/util/date_utils.ts
rename to x-pack/plugins/ml/common/util/date_utils.ts
index 21adc0b4b9c66a..73ac68b2493f3c 100644
--- a/x-pack/plugins/ml/public/application/util/date_utils.ts
+++ b/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);
+};
diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotation_description_list/index.tsx b/x-pack/plugins/ml/public/application/components/annotations/annotation_description_list/index.tsx
index eee2f8dca244d7..156ad72ba9f9f2 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotation_description_list/index.tsx
+++ b/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 ?? '',
     });
   }
 
diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
index 0527b8f6d9f609..7eb280c6247c2e 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
+++ b/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,
       },
       {
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
index 1f8c8633afa476..d2c4122bc1b57e 100644
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js
index cd3875f8cbd2a0..a2a3aea5988aa3 100644
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js
+++ b/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 {
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js b/x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js
index d898734f34c931..079d56da60e5e2 100644
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/common.ts b/x-pack/plugins/ml/public/application/components/data_grid/common.ts
index f252729cc20cd5..36b0573d609d87 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/common.ts
+++ b/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';
 
diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
index 798ceae0f0732f..f60cd61b25cd4b 100644
--- a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
+++ b/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,
     },
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx
index 64fdd97903b60f..5b175eb06a4a39 100644
--- a/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx
@@ -13,7 +13,6 @@ import {
   EuiInMemoryTable,
   EuiLoadingSpinner,
   EuiBasicTableColumn,
-  formatDate,
 } from '@elastic/eui';
 
 import { checkPermission } from '../../capabilities/check_capabilities';
@@ -21,12 +20,12 @@ 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]);
 
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx
index e37efe60f80184..62f5623f679646 100644
--- a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx
+++ b/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>
 
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
index 95204f9ba09fcd..a0bd437a667a21 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
index 7b9329fee783b5..803a2523a55e09 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
@@ -20,16 +20,35 @@ import {
   EuiHorizontalRule,
   EuiFlexGroup,
   EuiTextColor,
+  EuiButtonEmpty,
+  EuiBadge,
 } from '@elastic/eui';
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
+import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { ModelItemFull } from './models_list';
-import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
+import { useMlKibana } from '../../../../../contexts/kibana';
+import { timeFormatter } from '../../../../../../../common/util/date_utils';
 
 interface ExpandedRowProps {
   item: ModelItemFull;
 }
 
+const formatterDictionary: Record<string, (value: any) => JSX.Element | string | undefined> = {
+  tags: (tags: string[]) => {
+    if (tags.length === 0) return;
+    return (
+      <div>
+        {tags.map((tag) => (
+          <EuiBadge key={tag} color="hollow">
+            {tag}
+          </EuiBadge>
+        ))}
+      </div>
+    );
+  },
+  create_time: timeFormatter,
+  timestamp: timeFormatter,
+};
+
 export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
   const {
     inference_config: inferenceConfig,
@@ -57,19 +76,45 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
     license_level,
   };
 
-  function formatToListItems(items: Record<string, any>) {
+  function formatToListItems(items: Record<string, any>): EuiDescriptionListProps['listItems'] {
     return Object.entries(items)
       .map(([title, value]) => {
-        if (title.includes('timestamp')) {
-          value = formatDate(value, TIME_FORMAT);
+        if (title in formatterDictionary) {
+          return {
+            title,
+            description: formatterDictionary[title](value),
+          };
         }
-        return { title, description: typeof value === 'object' ? JSON.stringify(value) : value };
+        return {
+          title,
+          description:
+            typeof value === 'object' ? (
+              <EuiCodeBlock
+                language="json"
+                fontSize="s"
+                paddingSize="s"
+                overflowHeight={300}
+                isCopyable={false}
+              >
+                {JSON.stringify(value, null, 2)}
+              </EuiCodeBlock>
+            ) : (
+              value
+            ),
+        };
       })
       .filter(({ description }) => {
         return description !== undefined;
       });
   }
 
+  const {
+    services: {
+      share,
+      application: { navigateToUrl },
+    },
+  } = useMlKibana();
+
   const tabs = [
     {
       id: 'details',
@@ -323,9 +368,35 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
                     return (
                       <EuiFlexItem key={pipelineName}>
                         <EuiPanel>
-                          <EuiTitle size={'xs'}>
-                            <h5>{pipelineName}</h5>
-                          </EuiTitle>
+                          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+                            <EuiFlexItem grow={false}>
+                              <EuiTitle size={'xs'}>
+                                <h5>{pipelineName}</h5>
+                              </EuiTitle>
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                              <EuiButtonEmpty
+                                onClick={async () => {
+                                  const ingestPipelinesAppUrlGenerator = share.urlGenerators.getUrlGenerator(
+                                    'INGEST_PIPELINES_APP_URL_GENERATOR'
+                                  );
+                                  await navigateToUrl(
+                                    await ingestPipelinesAppUrlGenerator.createUrl({
+                                      page: 'pipeline_edit',
+                                      pipelineId: pipelineName,
+                                      absolute: true,
+                                    })
+                                  );
+                                }}
+                              >
+                                <FormattedMessage
+                                  id="xpack.ml.inference.modelsList.expandedRow.editPipelineLabel"
+                                  defaultMessage="Edit"
+                                />
+                              </EuiButtonEmpty>
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+
                           {description && <EuiText>{description}</EuiText>}
                           <EuiSpacer size={'m'} />
                           <EuiTitle size={'xxs'}>
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx
index dbc7a23f2258ba..d5a7ca6e96c064 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/models_list.tsx
+++ b/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'>;
 
@@ -277,7 +276,7 @@ export const ModelsList: FC = () => {
       description: i18n.translate('xpack.ml.inference.modelsList.viewTrainingDataActionLabel', {
         defaultMessage: 'View training data',
       }),
-      icon: 'list',
+      icon: 'visTable',
       type: 'icon',
       available: (item) => item.metadata?.analytics_config?.id,
       onClick: async (item) => {
@@ -290,6 +289,7 @@ export const ModelsList: FC = () => {
             analysisType: getAnalysisType(
               item.metadata?.analytics_config.analysis
             ) as DataFrameAnalysisConfigType,
+            defaultIsTraining: true,
           },
         });
 
@@ -375,7 +375,7 @@ export const ModelsList: FC = () => {
         defaultMessage: 'Created at',
       }),
       dataType: 'date',
-      render: (date: string) => formatDate(date, TIME_FORMAT),
+      render: timeFormatter,
       sortable: true,
     },
     {
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
index 00aca5d43be85f..994975912cd6ff 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
+++ b/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 {
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
index 0a76211f2e330b..606d1c06904225 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
+++ b/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,
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
index 359dc11ca08d16..569709d648b3ca 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts b/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts
index a38044a8b34254..c5fb0175c54e90 100644
--- a/x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/reducer.ts
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
index b32070fff73aad..44ebde634714ca 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
@@ -16,10 +16,9 @@ import {
   EuiLink,
   EuiLoadingSpinner,
 } from '@elastic/eui';
-import { formatDate, formatNumber } from '@elastic/eui/lib/services/format';
+import { formatNumber } from '@elastic/eui/lib/services/format';
 
 import { FORECAST_REQUEST_STATE } from '../../../../../../../common/constants/states';
-import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
 import { addItemToRecentlyAccessed } from '../../../../../util/recently_accessed';
 import { mlForecastService } from '../../../../../services/forecast_service';
 import { i18n } from '@kbn/i18n';
@@ -34,6 +33,7 @@ import {
   ML_PAGES,
 } from '../../../../../../../common/constants/ml_url_generator';
 import { PLUGIN_ID } from '../../../../../../../common/constants/app';
+import { timeFormatter } from '../../../../../../../common/util/date_utils';
 
 const MAX_FORECASTS = 500;
 
@@ -218,7 +218,7 @@ export class ForecastsTableUI extends Component {
           defaultMessage: 'Created',
         }),
         dataType: 'date',
-        render: (date) => formatDate(date, TIME_FORMAT),
+        render: timeFormatter,
         textOnly: true,
         sortable: true,
         scope: 'row',
@@ -229,7 +229,7 @@ export class ForecastsTableUI extends Component {
           defaultMessage: 'From',
         }),
         dataType: 'date',
-        render: (date) => formatDate(date, TIME_FORMAT),
+        render: timeFormatter,
         textOnly: true,
         sortable: true,
       },
@@ -239,7 +239,7 @@ export class ForecastsTableUI extends Component {
           defaultMessage: 'To',
         }),
         dataType: 'date',
-        render: (date) => formatDate(date, TIME_FORMAT),
+        render: timeFormatter,
         textOnly: true,
         sortable: true,
       },
@@ -277,7 +277,7 @@ export class ForecastsTableUI extends Component {
         name: i18n.translate('xpack.ml.jobsList.jobDetails.forecastsTable.expiresLabel', {
           defaultMessage: 'Expires',
         }),
-        render: (date) => formatDate(date, TIME_FORMAT),
+        render: timeFormatter,
         textOnly: true,
         sortable: true,
       },
@@ -309,7 +309,7 @@ export class ForecastsTableUI extends Component {
             {
               defaultMessage: 'View forecast created at {createdDate}',
               values: {
-                createdDate: formatDate(forecast.forecast_create_timestamp, TIME_FORMAT),
+                createdDate: timeFormatter(forecast.forecast_create_timestamp),
               },
             }
           );
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
index 3fe4f0e5477a20..eff407a41fb0dd 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
@@ -5,10 +5,9 @@
  */
 
 import numeral from '@elastic/numeral';
-import { formatDate } from '@elastic/eui/lib/services/format';
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { toLocaleString } from '../../../../util/string_utils';
-import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
+import { timeFormatter } from '../../../../../../common/util/date_utils';
 
 const DATA_FORMAT = '0.0 b';
 
@@ -29,7 +28,7 @@ export function formatValues([key, value]) {
     case 'latest_empty_bucket_timestamp':
     case 'latest_sparse_bucket_timestamp':
     case 'latest_bucket_timestamp':
-      value = formatDate(value, TIME_FORMAT);
+      value = timeFormatter(value);
       break;
 
     // data
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
index a35c2d9c833a86..8ad359251b0298 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx
@@ -5,12 +5,10 @@
  */
 
 import React, { FC } from 'react';
-// @ts-ignore
-import { formatDate } from '@elastic/eui/lib/services/format';
 import { EuiIcon } from '@elastic/eui';
 import { RectAnnotation, LineAnnotation, AnnotationDomainTypes } from '@elastic/charts';
 import { LineChartPoint } from '../../../../common/chart_loader';
-import { TIME_FORMAT } from '../../../../../../../../common/constants/time_format';
+import { timeFormatter } from '../../../../../../../../common/util/date_utils';
 
 interface Props {
   overlayKey: number;
@@ -70,9 +68,7 @@ export const OverlayRange: FC<Props> = ({
                 <div style={{ textAlign: 'center' }}>
                   <EuiIcon type="arrowUp" />
                 </div>
-                <div style={{ fontWeight: 'normal', color: '#343741' }}>
-                  {formatDate(start, TIME_FORMAT)}
-                </div>
+                <div style={{ fontWeight: 'normal', color: '#343741' }}>{timeFormatter(start)}</div>
               </div>
             </>
           ) : undefined
diff --git a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
index fc0645a0e9498d..4b469a0f5874d2 100644
--- a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
+++ b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
@@ -23,7 +23,7 @@ import {
   getTaskStateBadge,
   progressColumn,
 } from '../../../data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns';
-import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../common/util/date_utils';
 
 import { ViewLink } from './actions';
 
diff --git a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx
index 8515431d49b17c..b95aed01ebae81 100644
--- a/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx
+++ b/x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/table.tsx
@@ -20,7 +20,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../common/util/date_utils';
 import { ExplorerLink } from './actions';
 import { getJobsFromGroup } from './utils';
 import { GroupsDictionary, Group } from './anomaly_detection_panel';
diff --git a/x-pack/plugins/ml/public/application/services/job_service.js b/x-pack/plugins/ml/public/application/services/job_service.js
index 939ad34e77a395..0971b47605135d 100644
--- a/x-pack/plugins/ml/public/application/services/job_service.js
+++ b/x-pack/plugins/ml/public/application/services/job_service.js
@@ -15,7 +15,7 @@ import { isWebUrl } from '../util/url_utils';
 import { ML_DATA_PREVIEW_COUNT } from '../../../common/util/job_utils';
 import { TIME_FORMAT } from '../../../common/constants/time_format';
 import { parseInterval } from '../../../common/util/parse_interval';
-import { validateTimeRange } from '../util/date_utils';
+import { validateTimeRange } from '../../../common/util/date_utils';
 
 let jobs = [];
 let datafeedIds = {};
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js
index cbc2c324a8bc67..2378d8c835ce98 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasts_list.js
@@ -13,7 +13,7 @@ import React from 'react';
 
 import { EuiButtonIcon, EuiIcon, EuiInMemoryTable, EuiText, EuiToolTip } from '@elastic/eui';
 
-import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../common/util/date_utils';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 1d166b7be9bc16..4c87c3b374ff36 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -33,7 +33,7 @@ import {
   showMultiBucketAnomalyMarker,
   showMultiBucketAnomalyTooltip,
 } from '../../../util/chart_utils';
-import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
+import { formatHumanReadableDateTimeSeconds } from '../../../../../common/util/date_utils';
 import { getTimeBucketsFromCache } from '../../../util/time_buckets';
 import { mlTableService } from '../../../services/table_service';
 import { ContextChartMask } from '../context_chart_mask';
diff --git a/x-pack/plugins/ml/public/shared.ts b/x-pack/plugins/ml/public/shared.ts
index ec884bfac5351c..62b8179c9d5b2b 100644
--- a/x-pack/plugins/ml/public/shared.ts
+++ b/x-pack/plugins/ml/public/shared.ts
@@ -20,4 +20,4 @@ export * from '../common/util/validators';
 export * from './application/formatters/metric_change_description';
 export * from './application/components/data_grid';
 export * from './application/data_frame_analytics/common';
-export * from './application/util/date_utils';
+export * from '../common/util/date_utils';