[ML] Overview tab for ML (elastic#45864)

* show overview tab with main tabs * wip:add overview dir with initial components * convert and move AnalyticsTable and types to MlInMemoryTable components dir * create analytics table for overview * add stats bar to analytics panel * wip: adds anomaly detection table * adds actions column to anomaly detection table * add stats bar to anomaly detection panel * add max anomaly score to table * update score display. * add refresh button to panels * create scss files for styles * update functional nav tests * fix functional test failure * fix anomalyDetection for when there are no jobs * add translations and update jobList types * add maxAnomalyScore endpoint * fix types and update tab testSub * fix transforms use of inMemoryTable
brianseeders · Sep 23, 2019 · dce008b · dce008b
1 parent d16dfa8
commit dce008b
Show file tree

Hide file tree

Showing 52 changed files with 1,502 additions and 123 deletions.
diff --git a/x-pack/legacy/plugins/ml/common/types/jobs.ts b/x-pack/legacy/plugins/ml/common/types/jobs.ts
@@ -39,6 +39,30 @@ export interface MlJob {
   state: string;
 }
 
+export interface MlSummaryJob {
+  id: string;
+  description: string;
+  groups: string[];
+  processed_record_count: number;
+  memory_status?: string;
+  jobState: string;
+  hasDatafeed: boolean;
+  datafeedId?: string;
+  datafeedIndices: any[];
+  datafeedState?: string;
+  latestTimestampMs: number;
+  earliestTimestampMs?: number;
+  latestResultsTimestampMs: number;
+  isSingleMetricViewerJob: boolean;
+  nodeName?: string;
+  deleting?: boolean;
+  fullJob?: any;
+  auditMessage?: any;
+  latestTimestampSortValue?: number;
+}
+
+export type MlSummaryJobs = MlSummaryJob[];
+
 export function isMlJob(arg: any): arg is MlJob {
   return typeof arg.job_id === 'string';
 }

diff --git a/x-pack/legacy/plugins/ml/public/app.js b/x-pack/legacy/plugins/ml/public/app.js
@@ -19,6 +19,7 @@ import 'plugins/ml/components/transition/transition';
 import 'plugins/ml/components/modal/modal';
 import 'plugins/ml/access_denied';
 import 'plugins/ml/jobs';
+import 'plugins/ml/overview';
 import 'plugins/ml/services/calendar_service';
 import 'plugins/ml/components/messagebar';
 import 'plugins/ml/data_frame';
@@ -43,5 +44,5 @@ if (typeof uiRoutes.enable === 'function') {
 
 uiRoutes
   .otherwise({
-    redirectTo: '/jobs'
+    redirectTo: '/overview'
   });
diff --git a/x-pack/legacy/plugins/ml/public/components/ml_in_memory_table/index.ts b/x-pack/legacy/plugins/ml/public/components/ml_in_memory_table/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ProgressBar, MlInMemoryTable } from './ml_in_memory_table';
+export * from './types';
diff --git a/...onents/analytics_list/analytics_table.tsx → ...ml_in_memory_table/ml_in_memory_table.tsx b/...onents/analytics_list/analytics_table.tsx → ...ml_in_memory_table/ml_in_memory_table.tsx
@@ -71,9 +71,9 @@ const getInitialSorting = (columns: any, sorting: any) => {
   };
 };
 
-import { MlInMemoryTable } from '../../../../../../common/types/eui/in_memory_table';
+import { MlInMemoryTableBasic } from './types';
 
-export class AnalyticsTable extends MlInMemoryTable {
+export class MlInMemoryTable extends MlInMemoryTableBasic {
   static getDerivedStateFromProps(nextProps: any, prevState: any) {
     const derivedState = {
       ...prevState.prevProps,

diff --git a/...ns/ml/common/types/eui/in_memory_table.ts → ...ic/components/ml_in_memory_table/types.ts b/...ns/ml/common/types/eui/in_memory_table.ts → ...ic/components/ml_in_memory_table/types.ts
@@ -30,6 +30,7 @@ export interface FieldDataColumnType {
   truncateText?: boolean;
   render?: RenderFunc;
   footer?: string | ReactElement | FooterFunc;
+  textOnly?: boolean;
 }
 
 export interface ComputedColumnType {
@@ -191,6 +192,6 @@ interface ComponentWithConstructor<T> extends Component {
   new (): Component<T>;
 }
 
-export const MlInMemoryTable = (EuiInMemoryTable as any) as ComponentWithConstructor<
+export const MlInMemoryTableBasic = (EuiInMemoryTable as any) as ComponentWithConstructor<
   EuiInMemoryTableProps
 >;
diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/main_tabs.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/main_tabs.tsx
@@ -23,13 +23,13 @@ interface Props {
 
 function getTabs(disableLinks: boolean): Tab[] {
   return [
-    // {
-    //   id: 'overview',
-    //   name: i18n.translate('xpack.ml.navMenu.overviewTabLinkText', {
-    //     defaultMessage: 'Overview',
-    //   }),
-    //   disabled: disableLinks,
-    // },
+    {
+      id: 'overview',
+      name: i18n.translate('xpack.ml.navMenu.overviewTabLinkText', {
+        defaultMessage: 'Overview',
+      }),
+      disabled: disableLinks,
+    },
     {
       id: 'anomaly_detection',
       name: i18n.translate('xpack.ml.navMenu.anomalyDetectionTabLinkText', {
@@ -66,7 +66,7 @@ interface TabData {
 }
 
 const TAB_DATA: Record<TabId, TabData> = {
-  // overview: { testSubject: 'mlTabOverview', pathId: 'overview' },
+  overview: { testSubject: 'mlMainTab overview', pathId: 'overview' },
   anomaly_detection: { testSubject: 'mlMainTab anomalyDetection', pathId: 'jobs' },
   data_frames: { testSubject: 'mlMainTab dataFrames' },
   data_frame_analytics: { testSubject: 'mlMainTab dataFrameAnalytics' },

diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx
@@ -18,7 +18,7 @@ export type TabId = string;
 type TabSupport = Record<TabId, string | null>;
 
 const tabSupport: TabSupport = {
-  // overview: null,
+  overview: null,
   jobs: 'anomaly_detection',
   settings: 'anomaly_detection',
   data_frames: null,

diff --git a/...y/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js b/...y/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js
@@ -11,8 +11,6 @@ import ReactDOM from 'react-dom';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-import 'ui/directives/kbn_href';
-
 import { NavigationMenu } from './navigation_menu';
 
 module.directive('mlNavMenu', function () {

diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/tabs.tsx
@@ -19,7 +19,7 @@ interface Props {
 
 export function getTabs(tabId: TabId, disableLinks: boolean): Tab[] {
   const TAB_MAP: Partial<Record<TabId, Tab[]>> = {
-    // overview: [],
+    overview: [],
     datavisualizer: [],
     data_frames: [],
     data_frame_analytics: [],
@@ -59,7 +59,7 @@ export function getTabs(tabId: TabId, disableLinks: boolean): Tab[] {
 }
 
 enum TAB_TEST_SUBJECT {
-  // overview = 'mlOverview',
+  overview = 'mlOverview',
   jobs = 'mlSubTab jobManagement',
   explorer = 'mlSubTab anomalyExplorer',
   timeseriesexplorer = 'mlSubTab singleMetricViewer',

diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts b/x-pack/legacy/plugins/ml/public/components/stats_bar/index.ts
@@ -4,4 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { StatsBar, TransformStatsBarStats } from './stats_bar';
+export {
+  StatsBar,
+  TransformStatsBarStats,
+  AnalyticStatsBarStats,
+  JobStatsBarStats,
+} from './stats_bar';
diff --git a/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx b/x-pack/legacy/plugins/ml/public/components/stats_bar/stats_bar.tsx
@@ -7,24 +7,29 @@
 import React, { FC } from 'react';
 import { Stat, StatsBarStat } from './stat';
 
-interface JobStatsBarStats {
-  activeNodes: StatsBarStat;
+interface Stats {
   total: StatsBarStat;
-  open: StatsBarStat;
   failed: StatsBarStat;
+}
+export interface JobStatsBarStats extends Stats {
+  activeNodes: StatsBarStat;
+  open: StatsBarStat;
   closed: StatsBarStat;
   activeDatafeeds: StatsBarStat;
 }
 
-export interface TransformStatsBarStats {
-  total: StatsBarStat;
+export interface TransformStatsBarStats extends Stats {
   batch: StatsBarStat;
   continuous: StatsBarStat;
-  failed: StatsBarStat;
   started: StatsBarStat;
 }
 
-type StatsBarStats = TransformStatsBarStats | JobStatsBarStats;
+export interface AnalyticStatsBarStats extends Stats {
+  started: StatsBarStat;
+  stopped: StatsBarStat;
+}
+
+type StatsBarStats = TransformStatsBarStats | JobStatsBarStats | AnalyticStatsBarStats;
 type StatsKey = keyof StatsBarStats;
 
 interface StatsBarProps {

diff --git a/...frame/pages/data_frame_new_pivot/components/source_index_preview/source_index_preview.tsx b/...frame/pages/data_frame_new_pivot/components/source_index_preview/source_index_preview.tsx
@@ -30,10 +30,10 @@ import {
 
 import {
   ColumnType,
-  MlInMemoryTable,
+  MlInMemoryTableBasic,
   SortingPropType,
   SORT_DIRECTION,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 
 import { KBN_FIELD_TYPES } from '../../../../../../common/constants/field_types';
 import { Dictionary } from '../../../../../../common/types/common';
@@ -405,7 +405,7 @@ export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, que
         <EuiProgress size="xs" color="accent" max={1} value={0} />
       )}
       {clearTable === false && columns.length > 0 && sorting !== false && (
-        <MlInMemoryTable
+        <MlInMemoryTableBasic
           allowNeutralSort={false}
           compressed
           items={tableItems}

diff --git a/.../ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/pivot_preview.tsx b/.../ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/pivot_preview.tsx
@@ -23,9 +23,9 @@ import {
 
 import {
   ColumnType,
-  MlInMemoryTable,
+  MlInMemoryTableBasic,
   SORT_DIRECTION,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 import { dictionaryToArray } from '../../../../../../common/types/common';
 import { ES_FIELD_TYPES } from '../../../../../../common/constants/field_types';
 import { formatHumanReadableDateTimeSeconds } from '../../../../../util/date_utils';
@@ -284,7 +284,7 @@ export const PivotPreview: SFC<PivotPreviewProps> = React.memo(({ aggs, groupBy,
         <EuiProgress size="xs" color="accent" max={1} value={0} />
       )}
       {dataFramePreviewData.length > 0 && clearTable === false && columns.length > 0 && (
-        <MlInMemoryTable
+        <MlInMemoryTableBasic
           allowNeutralSort={false}
           compressed
           items={dataFramePreviewData}

diff --git a/...ins/ml/public/data_frame/pages/transform_management/components/transform_list/columns.tsx b/...ins/ml/public/data_frame/pages/transform_management/components/transform_list/columns.tsx
@@ -22,7 +22,7 @@ import {
   ComputedColumnType,
   ExpanderColumnType,
   FieldDataColumnType,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 
 import {
   getTransformProgress,

diff --git a/..._frame/pages/transform_management/components/transform_list/expanded_row_preview_pane.tsx b/..._frame/pages/transform_management/components/transform_list/expanded_row_preview_pane.tsx
@@ -11,7 +11,7 @@ import {
   SortDirection,
   SORT_DIRECTION,
   FieldDataColumnType,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 
 import { ml } from '../../../../../services/ml_api_service';
 

diff --git a/...public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx b/...public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx
@@ -22,7 +22,7 @@ import {
   OnTableChangeArg,
   SortDirection,
   SORT_DIRECTION,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 
 import {
   DataFrameTransformId,

diff --git a/...ublic/data_frame/pages/transform_management/components/transform_list/transform_table.tsx b/...ublic/data_frame/pages/transform_management/components/transform_list/transform_table.tsx
@@ -11,7 +11,7 @@ import React, { Fragment } from 'react';
 
 import { EuiProgress } from '@elastic/eui';
 
-import { MlInMemoryTable } from '../../../../../../common/types/eui/in_memory_table';
+import { MlInMemoryTableBasic } from '../../../../../components/ml_in_memory_table';
 
 // The built in loading progress bar of EuiInMemoryTable causes a full DOM replacement
 // of the table and doesn't play well with auto-refreshing. That's why we're displaying
@@ -73,7 +73,7 @@ const getInitialSorting = (columns: any, sorting: any) => {
   };
 };
 
-export class TransformTable extends MlInMemoryTable {
+export class TransformTable extends MlInMemoryTableBasic {
   static getDerivedStateFromProps(nextProps: any, prevState: any) {
     const derivedState = {
       ...prevState.prevProps,

diff --git a/...c/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx b/...c/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx
@@ -32,11 +32,11 @@ import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
 
 import {
   ColumnType,
-  MlInMemoryTable,
+  MlInMemoryTableBasic,
   OnTableChangeArg,
   SortingPropType,
   SORT_DIRECTION,
-} from '../../../../../../common/types/eui/in_memory_table';
+} from '../../../../../components/ml_in_memory_table';
 
 import { useUiChromeContext } from '../../../../../contexts/ui/use_ui_chrome_context';
 
@@ -466,7 +466,7 @@ export const Exploration: FC<Props> = React.memo(({ jobId }) => {
         <EuiProgress size="xs" color="accent" max={1} value={0} />
       )}
       {clearTable === false && columns.length > 0 && sortField !== '' && (
-        <MlInMemoryTable
+        <MlInMemoryTableBasic
           allowNeutralSort={false}
           className="mlDataFrameAnalyticsExploration"
           columns={columns}

diff --git a/...ta_frame_analytics/pages/analytics_exploration/components/exploration/use_explore_data.ts b/...ta_frame_analytics/pages/analytics_exploration/components/exploration/use_explore_data.ts
@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react';
 
 import { SearchResponse } from 'elasticsearch';
 
-import { SortDirection, SORT_DIRECTION } from '../../../../../../common/types/eui/in_memory_table';
+import { SortDirection, SORT_DIRECTION } from '../../../../../components/ml_in_memory_table';
 
 import { ml } from '../../../../../services/ml_api_service';
 import { getNestedProperty } from '../../../../../util/object_utils';

diff --git a/...lic/data_frame_analytics/pages/analytics_management/components/analytics_list/actions.tsx b/...lic/data_frame_analytics/pages/analytics_management/components/analytics_list/actions.tsx
@@ -21,31 +21,33 @@ import { stopAnalytics } from '../../services/analytics_service';
 import { StartAction } from './action_start';
 import { DeleteAction } from './action_delete';
 
+export const AnalyticsViewAction = {
+  isPrimary: true,
+  render: (item: DataFrameAnalyticsListRow) => {
+    return (
+      <EuiButtonEmpty
+        disabled={!isOutlierAnalysis(item.config.analysis)}
+        onClick={() => (window.location.href = getResultsUrl(item.id))}
+        size="xs"
+        color="text"
+        iconType="visTable"
+        aria-label={i18n.translate('xpack.ml.dataframe.analyticsList.viewAriaLabel', {
+          defaultMessage: 'View',
+        })}
+      >
+        {i18n.translate('xpack.ml.dataframe.analyticsList.viewActionName', {
+          defaultMessage: 'View',
+        })}
+      </EuiButtonEmpty>
+    );
+  },
+};
+
 export const getActions = () => {
   const canStartStopDataFrameAnalytics: boolean = checkPermission('canStartStopDataFrameAnalytics');
 
   return [
-    {
-      isPrimary: true,
-      render: (item: DataFrameAnalyticsListRow) => {
-        return (
-          <EuiButtonEmpty
-            disabled={!isOutlierAnalysis(item.config.analysis)}
-            onClick={() => (window.location.href = getResultsUrl(item.id))}
-            size="xs"
-            color="text"
-            iconType="visTable"
-            aria-label={i18n.translate('xpack.ml.dataframe.analyticsList.viewAriaLabel', {
-              defaultMessage: 'View',
-            })}
-          >
-            {i18n.translate('xpack.ml.dataframe.analyticsList.viewActionName', {
-              defaultMessage: 'View',
-            })}
-          </EuiButtonEmpty>
-        );
-      },
-    },
+    AnalyticsViewAction,
     {
       render: (item: DataFrameAnalyticsListRow) => {
         if (!isDataFrameAnalyticsRunning(item.stats)) {