[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
This commit is contained in:
Melissa Alvarez 2020-09-02 14:22:55 -04:00 committed by GitHub
parent 1d4a56f705
commit de3ddbc6e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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',