From de3ddbc6e1a986229ad2033b24af7bba6b353497 Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Wed, 2 Sep 2020 14:22:55 -0400
Subject: [PATCH] [ML] DF Analytics jobs list: improve job details analysis
 stats view in expanded row (#76196)

* move analysis stats to own section in expanded row

* fix type errors

* move stats to separate tab in expanded row

* handle parameters and hyperparameters not defined
---
 .../analytics_list/expanded_row.tsx           | 78 ++++++++++++++++---
 1 file changed, 68 insertions(+), 10 deletions(-)

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 645c6c276a6f..95204f9ba09f 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
@@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
 import { formatHumanReadableDateTimeSeconds } from '../../../../../util/date_utils';
 
 import { DataFrameAnalyticsListRow } from './common';
-import { ExpandedRowDetailsPane, SectionConfig } from './expanded_row_details_pane';
+import { ExpandedRowDetailsPane, SectionConfig, SectionItem } from './expanded_row_details_pane';
 import { ExpandedRowJsonPane } from './expanded_row_json_pane';
 import { ProgressBar } from './progress_bar';
 import {
@@ -28,6 +28,7 @@ import { getTaskStateBadge } from './use_columns';
 import { getDataFrameAnalyticsProgressPhase, isCompletedAnalyticsJob } from './common';
 import {
   isRegressionAnalysis,
+  getAnalysisType,
   ANALYSIS_CONFIG_TYPE,
   REGRESSION_STATS,
   isRegressionEvaluateResponse,
@@ -76,6 +77,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
   const resultsField = item.config.dest.results_field;
   const jobIsCompleted = isCompletedAnalyticsJob(item.stats);
   const isRegressionJob = isRegressionAnalysis(item.config.analysis);
+  const analysisType = getAnalysisType(item.config.analysis);
 
   const loadData = async () => {
     setIsLoadingGeneralization(true);
@@ -160,25 +162,34 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
 
   const stateValues: any = { ...item.stats };
 
+  const analysisStatsValues = stateValues.analysis_stats
+    ? stateValues.analysis_stats[`${analysisType}_stats`]
+    : undefined;
+
   if (item.config?.description) {
     stateValues.description = item.config.description;
   }
   delete stateValues.progress;
 
-  const state: SectionConfig = {
-    title: i18n.translate('xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettings.state', {
-      defaultMessage: 'State',
-    }),
-    items: Object.entries(stateValues).map(([stateKey, stateValue]) => {
+  const stateItems = Object.entries(stateValues)
+    .map(([stateKey, stateValue]) => {
       const title = stateKey.toString();
       if (title === 'state') {
         return {
           title,
           description: getTaskStateBadge(getItemDescription(stateValue)),
         };
+      } else if (title !== 'analysis_stats') {
+        return { title, description: getItemDescription(stateValue) };
       }
-      return { title, description: getItemDescription(stateValue) };
+    })
+    .filter((stateItem) => stateItem !== undefined);
+
+  const state: SectionConfig = {
+    title: i18n.translate('xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettings.state', {
+      defaultMessage: 'State',
     }),
+    items: stateItems as SectionItem[],
     position: 'left',
   };
 
@@ -204,7 +215,7 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
         };
       }),
     ],
-    position: 'left',
+    position: 'right',
   };
 
   const stats: SectionConfig = {
@@ -221,9 +232,39 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       { title: 'model_memory_limit', description: item.config.model_memory_limit },
       { title: 'version', description: item.config.version },
     ],
-    position: 'right',
+    position: 'left',
   };
 
+  const analysisStats: SectionConfig | undefined = analysisStatsValues
+    ? {
+        title: i18n.translate(
+          'xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettings.analysisStats',
+          {
+            defaultMessage: 'Analysis stats',
+          }
+        ),
+        items: [
+          {
+            title: 'timestamp',
+            description: formatHumanReadableDateTimeSeconds(
+              moment(analysisStatsValues.timestamp).unix() * 1000
+            ),
+          },
+          {
+            title: 'timing_stats',
+            description: getItemDescription(analysisStatsValues.timing_stats),
+          },
+          ...Object.entries(
+            analysisStatsValues.parameters || analysisStatsValues.hyperparameters || {}
+          ).map(([stateKey, stateValue]) => {
+            const title = stateKey.toString();
+            return { title, description: getItemDescription(stateValue) };
+          }),
+        ],
+        position: 'right',
+      }
+    : undefined;
+
   if (jobIsCompleted && isRegressionJob) {
     stats.items.push(
       {
@@ -309,13 +350,30 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     );
   }
 
+  const detailsSections: SectionConfig[] = [state, progress];
+  const statsSections: SectionConfig[] = [stats];
+
+  if (analysisStats !== undefined) {
+    statsSections.push(analysisStats);
+  }
+
   const tabs = [
     {
       id: 'ml-analytics-job-details',
       name: i18n.translate('xpack.ml.dataframe.analyticsList.expandedRow.tabs.jobSettingsLabel', {
         defaultMessage: 'Job details',
       }),
-      content: <ExpandedRowDetailsPane sections={[state, progress, stats]} />,
+      content: <ExpandedRowDetailsPane sections={detailsSections} />,
+    },
+    {
+      id: 'ml-analytics-job-stats',
+      name: i18n.translate(
+        'xpack.ml.dataframe.analyticsList.analyticsDetails.tabs.analyticsStatsLabel',
+        {
+          defaultMessage: 'Job stats',
+        }
+      ),
+      content: <ExpandedRowDetailsPane sections={statsSections} />,
     },
     {
       id: 'ml-analytics-job-json',