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 all 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'}
/>
);
};
96 changes: 54 additions & 42 deletions ...ck/plugins/ml/public/application/trained_models/models_management/pipelines/pipelines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { ProcessorsStats } from './expanded_row';
export type IngestStatsResponse = Exclude<ModelItem['stats'], undefined>['ingest'];

interface ModelPipelinesProps {
pipelines: Exclude<ModelItem['pipelines'], null | undefined>;
pipelines: ModelItem['pipelines'];
ingestStats: IngestStatsResponse;
}

Expand All @@ -32,11 +32,18 @@ export const ModelPipelines: FC<ModelPipelinesProps> = ({ pipelines, ingestStats
services: { share },
} = useMlKibana();

const pipelineNames = Object.keys(pipelines ?? ingestStats?.pipelines ?? {});

if (!pipelineNames.length) return null;

return (
<>
{Object.entries(pipelines).map(([pipelineName, pipelineDefinition], i) => {
{pipelineNames.map((pipelineName, i) => {
// Expand first 3 pipelines by default
const initialIsOpen = i <= 2;

const pipelineDefinition = pipelines?.[pipelineName];

return (
<>
<EuiAccordion
Expand All @@ -48,31 +55,34 @@ export const ModelPipelines: FC<ModelPipelinesProps> = ({ pipelines, ingestStats
</EuiTitle>
}
extraAction={
<EuiButtonEmpty
onClick={() => {
const locator = share.url.locators.get('INGEST_PIPELINES_APP_LOCATOR');
if (!locator) return;
locator.navigate({
page: 'pipeline_edit',
pipelineId: pipelineName,
absolute: true,
});
}}
iconType={'documentEdit'}
iconSide="left"
>
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.editPipelineLabel"
defaultMessage="Edit"
/>
</EuiButtonEmpty>
pipelineDefinition ? (
<EuiButtonEmpty
data-test-subj={`mlTrainedModelPipelineEditButton_${pipelineName}`}
onClick={() => {
const locator = share.url.locators.get('INGEST_PIPELINES_APP_LOCATOR');
if (!locator) return;
locator.navigate({
page: 'pipeline_edit',
pipelineId: pipelineName,
absolute: true,
});
}}
iconType={'documentEdit'}
iconSide="left"
>
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.editPipelineLabel"
defaultMessage="Edit"
/>
</EuiButtonEmpty>
) : undefined
}
paddingSize="l"
initialIsOpen={initialIsOpen}
>
<EuiFlexGrid columns={2}>
{ingestStats?.pipelines ? (
<EuiFlexItem>
<EuiFlexItem data-test-subj={`mlTrainedModelPipelineIngestStats_${pipelineName}`}>
<EuiPanel>
<EuiTitle size={'xxs'}>
<h6>
Expand All @@ -88,27 +98,29 @@ export const ModelPipelines: FC<ModelPipelinesProps> = ({ pipelines, ingestStats
</EuiFlexItem>
) : null}

<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xxs'}>
<h6>
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.processorsTitle"
defaultMessage="Definition"
/>
</h6>
</EuiTitle>
<EuiCodeBlock
language="json"
fontSize="m"
paddingSize="m"
overflowHeight={300}
isCopyable
>
{JSON.stringify(pipelineDefinition, null, 2)}
</EuiCodeBlock>
</EuiPanel>
</EuiFlexItem>
{pipelineDefinition ? (
<EuiFlexItem data-test-subj={`mlTrainedModelPipelineDefinition_${pipelineName}`}>
<EuiPanel>
<EuiTitle size={'xxs'}>
<h6>
<FormattedMessage
id="xpack.ml.trainedModels.modelsList.expandedRow.processorsTitle"
defaultMessage="Definition"
/>
</h6>
</EuiTitle>
<EuiCodeBlock
language="json"
fontSize="m"
paddingSize="m"
overflowHeight={300}
isCopyable
>
{JSON.stringify(pipelineDefinition, null, 2)}
</EuiCodeBlock>
</EuiPanel>
</EuiFlexItem>
) : null}
</EuiFlexGrid>
</EuiAccordion>
</>
Expand Down
Loading