Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ML] Fix Trained Model stats and pipelines tab #125382

Merged
merged 6 commits into from
Feb 11, 2022
Merged

[ML] Fix Trained Model stats and pipelines tab #125382

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bdea918
tabs validation
darnautov Feb 8, 2022
6264a63
fix stats content, assert tabs content
darnautov Feb 11, 2022
db31a03
fix condition for pipelines tab
darnautov Feb 11, 2022
a1ff53d
tests for ml viewer
darnautov Feb 11, 2022
d9df7aa
fix pipelines tab
darnautov Feb 11, 2022
fddd690
test pipelines tab content
darnautov Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 36 additions & 9 deletions x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
EuiSpacer,
EuiTabbedContent,
EuiTitle,
EuiTabbedContentTab,
} from '@elastic/eui';
import type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
import { FormattedMessage } from '@kbn/i18n-react';
Expand Down Expand Up @@ -151,17 +152,18 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
[stats.deployment_stats]
);

const tabs = [
const tabs: EuiTabbedContentTab[] = [
{
id: 'details',
'data-test-subj': 'mlTrainedModelDetails',
name: (
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.detailsTabLabel"
defaultMessage="Details"
/>
),
content: (
<>
<div data-test-subj={'mlTrainedModelDetailsContent'}>
<EuiSpacer size={'s'} />
<EuiFlexGrid columns={2} gutterSize={'m'}>
<EuiFlexItem>
Expand Down Expand Up @@ -203,21 +205,22 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
</EuiFlexItem>
) : null}
</EuiFlexGrid>
</>
</div>
),
},
...(inferenceConfig
? [
{
id: 'config',
'data-test-subj': 'mlTrainedModelInferenceConfig',
name: (
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.configTabLabel"
defaultMessage="Config"
/>
),
content: (
<>
<div data-test-subj={'mlTrainedModelInferenceConfigContent'}>
<EuiSpacer size={'s'} />
<EuiFlexGrid columns={2} gutterSize={'m'}>
<EuiFlexItem>
Expand Down Expand Up @@ -261,7 +264,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
</EuiFlexItem>
)}
</EuiFlexGrid>
</>
</div>
),
},
]
Expand All @@ -270,14 +273,15 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
? [
{
id: 'stats',
'data-test-subj': 'mlTrainedModelStats',
name: (
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.statsTabLabel"
defaultMessage="Stats"
/>
),
content: (
<>
<div data-test-subj={'mlTrainedModelStatsContent'}>
<EuiSpacer size={'s'} />

<EuiFlexGrid columns={2} gutterSize={'m'}>
Expand Down Expand Up @@ -317,8 +321,29 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
</EuiPanel>
</EuiFlexItem>
) : null}
{isPopulatedObject(stats.model_size_stats) &&
!isPopulatedObject(stats.inference_stats) ? (
<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.modelSizeStatsTitle"
defaultMessage="Model size stats"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
compressed={true}
type="column"
listItems={formatToListItems(stats.model_size_stats)}
/>
</EuiPanel>
</EuiFlexItem>
) : null}
</EuiFlexGrid>
</>
</div>
),
},
]
Expand All @@ -327,6 +352,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
? [
{
id: 'pipelines',
'data-test-subj': 'mlTrainedModelPipelines',
name: (
<>
<FormattedMessage
Expand All @@ -337,10 +363,10 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
</>
),
content: (
<>
<div data-test-subj={'mlTrainedModelPipelinesContent'}>
<EuiSpacer size={'s'} />
<ModelPipelines pipelines={pipelines!} ingestStats={stats.ingest} />
</>
</div>
),
},
]
Expand All @@ -355,6 +381,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
initialSelectedTab={tabs[0]}
autoFocus="selected"
onTabClick={(tab) => {}}
data-test-subj={'mlTrainedModelRowDetails'}
/>
);
};
16 changes: 16 additions & 0 deletions x-pack/test/functional/apps/ml/model_management/model_list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,22 @@ export default function ({ getService }: FtrProviderContext) {
await ml.trainedModels.assertRowsNumberPerPage(10);
});

it('renders expanded row content correctly for model with pipelines', async () => {
await ml.trainedModelsTable.ensureRowIsExpanded(modelWithPipelineData.modelId);
await ml.trainedModelsTable.assertDetailsTabContent();
await ml.trainedModelsTable.assertInferenceConfigTabContent();
await ml.trainedModelsTable.assertStatsTabContent();
await ml.trainedModelsTable.assertPipelinesTabContent();
});

it('renders expanded row content correctly for model without pipelines', async () => {
await ml.trainedModelsTable.ensureRowIsExpanded(modelWithoutPipelineData.modelId);
await ml.trainedModelsTable.assertDetailsTabContent();
await ml.trainedModelsTable.assertInferenceConfigTabContent();
await ml.trainedModelsTable.assertStatsTabContent();
await ml.trainedModelsTable.assertPipelinesTabContent(false);
});

it('displays the built-in model and no actions are enabled', async () => {
await ml.testExecution.logTestStep('should display the model in the table');
await ml.trainedModelsTable.filterWithSearchString(builtInModelData.modelId, 1);
Expand Down
44 changes: 44 additions & 0 deletions x-pack/test/functional/services/ml/trained_models_table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import expect from '@kbn/expect';
import { ProvidedType } from '@kbn/test';
import { upperFirst } from 'lodash';

import { WebElementWrapper } from 'test/functional/services/lib/web_element_wrapper';
import { FtrProviderContext } from '../../ftr_provider_context';
Expand Down Expand Up @@ -208,5 +209,48 @@ export function TrainedModelsTableProvider({ getService }: FtrProviderContext) {
await testSubjects.click(this.rowSelector(modelId, 'mlModelsTableRowDeleteAction'));
await this.assertDeleteModalExists();
}

public async ensureRowIsExpanded(modelId: string) {
await this.filterWithSearchString(modelId);
await retry.tryForTime(10 * 1000, async () => {
if (!(await testSubjects.exists('mlTrainedModelRowDetails'))) {
await testSubjects.click(`${this.rowSelector(modelId)} > mlModelsTableRowDetailsToggle`);
await testSubjects.existOrFail('mlTrainedModelRowDetails', { timeout: 1000 });
}
});
}

public async assertTabContent(
type: 'details' | 'stats' | 'inferenceConfig' | 'pipelines',
expectVisible = true
) {
const tabTestSubj = `mlTrainedModel${upperFirst(type)}`;
const tabContentTestSubj = `mlTrainedModel${upperFirst(type)}Content`;

if (!expectVisible) {
await testSubjects.missingOrFail(tabTestSubj);
return;
}

await testSubjects.existOrFail(tabTestSubj);
await testSubjects.click(tabTestSubj);
await testSubjects.existOrFail(tabContentTestSubj);
}

public async assertDetailsTabContent(expectVisible = true) {
await this.assertTabContent('details', expectVisible);
}

public async assertInferenceConfigTabContent(expectVisible = true) {
await this.assertTabContent('inferenceConfig', expectVisible);
}

public async assertStatsTabContent(expectVisible = true) {
await this.assertTabContent('stats', expectVisible);
}

public async assertPipelinesTabContent(expectVisible = true) {
await this.assertTabContent('stats', expectVisible);
}
})();
}