Skip to content

Commit

Permalink
[ML] update expanded row
Browse files Browse the repository at this point in the history
  • Loading branch information
@darnautov
darnautov committed Aug 14, 2020
1 parent 4ce85fb commit 41a8a10
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 82 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/common/types/inference.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,5 +59,5 @@ export interface ModelConfigResponse {
model_id: string;
tags: string;
version: string;
inference_config: any;
inference_config?: Record<string, any>;
}
176 changes: 95 additions & 81 deletions ..._frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,17 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
license_level,
};

function formatToListItems(items: Record<string, any>) {
return Object.entries(items)
.map(([title, value]) => ({
title,
description: typeof value === 'object' ? JSON.stringify(value) : value,
}))
.filter(({ description }) => {
return description !== undefined;
});
}

const tabs = [
{
id: 'details',
Expand All @@ -57,38 +68,6 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
defaultMessage="Details"
/>
),
content: (
<>
<EuiSpacer size={'m'} />
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.detailsTitle"
defaultMessage="Details"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
type="column"
listItems={Object.entries(details).map(([title, value]) => ({
title,
description: typeof value === 'object' ? JSON.stringify(value) : value,
}))}
/>
</EuiPanel>
</>
),
},
{
id: 'config',
name: (
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.configTabLabel"
defaultMessage="Config"
/>
),
content: (
<>
<EuiSpacer size={'m'} />
Expand All @@ -98,51 +77,84 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.inferenceConfigTitle"
defaultMessage="Inference configuration"
id="xpack.ml.inference.modelsList.expandedRow.detailsTitle"
defaultMessage="Details"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
compressed={true}
type="column"
listItems={Object.entries(inferenceConfig[Object.keys(inferenceConfig)[0]]).map(
([title, value]) => ({
title,
description:
typeof value === 'object' ? JSON.stringify(value) : (value as any),
})
)}
listItems={formatToListItems(details)}
/>
</EuiPanel>
</EuiFlexItem>
{metadata?.analytics_config && (
<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.analyticsConfigTitle"
defaultMessage="Analytics configuration"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
type="column"
listItems={Object.entries(metadata?.analytics_config).map(([title, value]) => ({
title,
description:
typeof value === 'object' ? JSON.stringify(value) : (value as any),
}))}
/>
</EuiPanel>
</EuiFlexItem>
)}
</EuiFlexGrid>
</>
),
},
...(inferenceConfig
? [
{
id: 'config',
name: (
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.configTabLabel"
defaultMessage="Config"
/>
),
content: (
<>
<EuiSpacer size={'m'} />
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.inferenceConfigTitle"
defaultMessage="Inference configuration"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
compressed={true}
type="column"
listItems={formatToListItems(
inferenceConfig[Object.keys(inferenceConfig)[0]]
)}
/>
</EuiPanel>
</EuiFlexItem>
{metadata?.analytics_config && (
<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.analyticsConfigTitle"
defaultMessage="Analytics configuration"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
compressed={true}
type="column"
listItems={formatToListItems(metadata?.analytics_config)}
/>
</EuiPanel>
</EuiFlexItem>
)}
</EuiFlexGrid>
</>
),
},
]
: []),

{
id: 'stats',
name: (
Expand All @@ -154,24 +166,26 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
content: (
<>
<EuiSpacer size={'m'} />
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.statsTitle"
defaultMessage="Inference Stats"
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiPanel>
<EuiTitle size={'xs'}>
<h5>
<FormattedMessage
id="xpack.ml.inference.modelsList.expandedRow.statsTitle"
defaultMessage="Inference Stats"
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
compressed={true}
type="column"
listItems={formatToListItems(stats.inference_stats)}
/>
</h5>
</EuiTitle>
<EuiSpacer size={'m'} />
<EuiDescriptionList
type="column"
listItems={Object.entries(stats.inference_stats).map(([title, value]) => ({
title,
description: typeof value === 'object' ? JSON.stringify(value) : value,
}))}
/>
</EuiPanel>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGrid>
</>
),
},
Expand Down

0 comments on commit 41a8a10

Please sign in to comment.