Skip to content

Commit

Permalink
[ML] Fix Trained Model stats and pipelines tab (elastic#125382)
Browse files Browse the repository at this point in the history 
(cherry picked from commit 67fb388)
  • Loading branch information
@darnautov @kibanamachine
darnautov authored and kibanamachine committed Feb 11, 2022
1 parent d48a431 commit c434260
Show file tree
Hide file tree
Showing 4 changed files with 281 additions and 127 deletions.
45 changes: 36 additions & 9 deletions x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx
View file
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
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

0 comments on commit c434260

Please sign in to comment.