Skip to content

Commit 1a7fe35

Browse files
darnautovdarnautov
committed
[ML] stats rendering as a description list
1 parent 6f546b8 commit 1a7fe35

File tree

1 file changed

+120
-107
lines changed
  • x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management

1 file changed

+120
-107
lines changed

‎x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx‎

Lines changed: 120 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@ import {
1717
EuiFlexItem,
1818
EuiCodeBlock,
1919
EuiText,
20+
EuiHorizontalRule,
2021
EuiFlexGroup,
21-
EuiStat,
2222
} from '@elastic/eui';
23+
// @ts-ignore
24+
import { formatDate } from '@elastic/eui/lib/services/format';
2325
import { ModelItemFull } from './models_list';
26+
import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
2427

2528
interface ExpandedRowProps {
2629
item: ModelItemFull;
@@ -55,10 +58,12 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
5558

5659
function formatToListItems(items: Record<string, any>) {
5760
return Object.entries(items)
58-
.map(([title, value]) => ({
59-
title,
60-
description: typeof value === 'object' ? JSON.stringify(value) : value,
61-
}))
61+
.map(([title, value]) => {
62+
if (title.includes('timestamp')) {
63+
value = formatDate(value, TIME_FORMAT);
64+
}
65+
return { title, description: typeof value === 'object' ? JSON.stringify(value) : value };
66+
})
6267
.filter(({ description }) => {
6368
return description !== undefined;
6469
});
@@ -170,117 +175,125 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
170175
content: (
171176
<>
172177
<EuiSpacer size={'m'} />
173-
{stats.inference_stats && (
174-
<>
175-
<EuiPanel>
176-
<EuiTitle size={'xs'}>
177-
<h5>
178-
<FormattedMessage
179-
id="xpack.ml.inference.modelsList.expandedRow.inferenceStatsTitle"
180-
defaultMessage="Inference stats"
181-
/>
182-
</h5>
183-
</EuiTitle>
184-
<EuiSpacer size={'m'} />
185-
<EuiFlexGroup>
186-
{formatToListItems(stats.inference_stats).map(({ title, description }) => (
187-
<EuiFlexItem key={title}>
188-
<EuiStat title={description} description={title} titleSize={'s'} />
189-
</EuiFlexItem>
190-
))}
191-
</EuiFlexGroup>
192-
</EuiPanel>
193-
<EuiSpacer size={'m'} />
194-
</>
195-
)}
196-
{stats.ingest?.total && (
197-
<EuiPanel>
198-
<EuiTitle size={'xs'}>
199-
<h5>
200-
<FormattedMessage
201-
id="xpack.ml.inference.modelsList.expandedRow.ingestStatsTitle"
202-
defaultMessage="Ingest stats"
203-
/>
204-
</h5>
205-
</EuiTitle>
206-
<EuiSpacer size={'m'} />
207-
<EuiFlexGroup>
208-
{formatToListItems(stats.ingest.total).map(({ title, description }) => (
209-
<EuiFlexItem key={title}>
210-
<EuiStat title={description} description={title} titleSize={'s'} />
211-
</EuiFlexItem>
212-
))}
213-
</EuiFlexGroup>
214-
215-
{stats.ingest?.pipelines && (
216-
<>
178+
<EuiFlexGrid columns={2}>
179+
{stats.inference_stats && (
180+
<EuiFlexItem>
181+
<EuiPanel>
182+
<EuiTitle size={'xs'}>
183+
<h5>
184+
<FormattedMessage
185+
id="xpack.ml.inference.modelsList.expandedRow.inferenceStatsTitle"
186+
defaultMessage="Inference stats"
187+
/>
188+
</h5>
189+
</EuiTitle>
217190
<EuiSpacer size={'m'} />
191+
<EuiDescriptionList
192+
compressed={true}
193+
type="column"
194+
listItems={formatToListItems(stats.inference_stats)}
195+
/>
196+
</EuiPanel>
197+
</EuiFlexItem>
198+
)}
199+
{stats.ingest?.total && (
200+
<EuiFlexItem>
201+
<EuiPanel style={{ maxHeight: '400px', overflow: 'auto' }}>
218202
<EuiTitle size={'xs'}>
219203
<h5>
220204
<FormattedMessage
221-
id="xpack.ml.inference.modelsList.expandedRow.ingestStatsByPipelineTitle"
222-
defaultMessage="Stats by pipeline"
205+
id="xpack.ml.inference.modelsList.expandedRow.ingestStatsTitle"
206+
defaultMessage="Ingest stats"
223207
/>
224208
</h5>
225209
</EuiTitle>
226-
{Object.entries(stats.ingest.pipelines).map(
227-
([pipelineName, { processors, ...pipelineStats }]) => {
228-
return (
229-
<Fragment key={pipelineName}>
230-
<EuiTitle size={'xs'}>
231-
<h5>{pipelineName}</h5>
232-
</EuiTitle>
233-
<EuiSpacer size={'m'} />
234-
<EuiFlexGroup>
235-
{formatToListItems(pipelineStats).map(({ title, description }) => (
236-
<EuiFlexItem key={title}>
237-
<EuiStat title={description} description={title} titleSize={'xs'} />
238-
</EuiFlexItem>
239-
))}
240-
</EuiFlexGroup>
241-
<EuiSpacer size={'m'} />
242-
<EuiTitle size={'xxs'}>
243-
<h6>
244-
<FormattedMessage
245-
id="xpack.ml.inference.modelsList.expandedRow.processorsStatsTitle"
246-
defaultMessage="Stats by processor"
210+
<EuiSpacer size={'m'} />
211+
<EuiDescriptionList
212+
compressed={true}
213+
type="column"
214+
listItems={formatToListItems(stats.ingest.total)}
215+
/>
216+
217+
{stats.ingest?.pipelines && (
218+
<>
219+
<EuiSpacer size={'m'} />
220+
<EuiTitle size={'xs'}>
221+
<h5>
222+
<FormattedMessage
223+
id="xpack.ml.inference.modelsList.expandedRow.byPipelineTitle"
224+
defaultMessage="By pipeline"
225+
/>
226+
</h5>
227+
</EuiTitle>
228+
<EuiSpacer size={'s'} />
229+
{Object.entries(stats.ingest.pipelines).map(
230+
([pipelineName, { processors, ...pipelineStats }], i) => {
231+
return (
232+
<Fragment key={pipelineName}>
233+
<EuiFlexGroup>
234+
<EuiFlexItem grow={false}>
235+
<EuiTitle size={'xs'}>
236+
<h5>
237+
{i + 1}. {pipelineName}
238+
</h5>
239+
</EuiTitle>
240+
</EuiFlexItem>
241+
<EuiFlexItem>
242+
<EuiHorizontalRule size={'full'} margin={'s'} />
243+
</EuiFlexItem>
244+
</EuiFlexGroup>
245+
<EuiSpacer size={'m'} />
246+
<EuiDescriptionList
247+
compressed={true}
248+
type="column"
249+
listItems={formatToListItems(pipelineStats)}
247250
/>
248-
</h6>
249-
</EuiTitle>
250-
{processors.map((processor) => {
251-
const name = Object.keys(processor)[0];
252-
const { stats: processorStats } = processor[name];
253-
return (
254-
<Fragment key={name}>
255-
<EuiTitle size={'xxs'}>
256-
<h6>{name}</h6>
257-
</EuiTitle>
258-
<EuiFlexGroup>
259-
{formatToListItems(processorStats).map(
260-
({ title, description }) => (
261-
<EuiFlexItem key={title}>
262-
<EuiStat
263-
title={description}
264-
description={title}
265-
titleSize={'xxs'}
266-
/>
267-
</EuiFlexItem>
268-
)
269-
)}
270-
</EuiFlexGroup>
271-
<EuiSpacer size={'m'} />
272-
</Fragment>
273-
);
274-
})}
275-
<EuiSpacer size={'m'} />
276-
</Fragment>
277-
);
278-
}
251+
<EuiSpacer size={'m'} />
252+
<EuiTitle size={'xxs'}>
253+
<h6>
254+
<FormattedMessage
255+
id="xpack.ml.inference.modelsList.expandedRow.processorsTitle"
256+
defaultMessage="By processor"
257+
/>
258+
</h6>
259+
</EuiTitle>
260+
<EuiSpacer size={'s'} />
261+
<>
262+
{processors.map((processor) => {
263+
const name = Object.keys(processor)[0];
264+
const { stats: processorStats } = processor[name];
265+
return (
266+
<Fragment key={name}>
267+
<EuiFlexGroup>
268+
<EuiFlexItem grow={false}>
269+
<EuiTitle size={'xxs'}>
270+
<h6>{name}</h6>
271+
</EuiTitle>
272+
</EuiFlexItem>
273+
<EuiFlexItem>
274+
<EuiHorizontalRule size={'full'} margin={'s'} />
275+
</EuiFlexItem>
276+
</EuiFlexGroup>
277+
<EuiSpacer size={'m'} />
278+
<EuiDescriptionList
279+
compressed={true}
280+
type="column"
281+
listItems={formatToListItems(processorStats)}
282+
/>
283+
</Fragment>
284+
);
285+
})}
286+
</>
287+
</Fragment>
288+
);
289+
}
290+
)}
291+
</>
279292
)}
280-
</>
281-
)}
282-
</EuiPanel>
283-
)}
293+
</EuiPanel>
294+
</EuiFlexItem>
295+
)}
296+
</EuiFlexGrid>
284297
</>
285298
),
286299
},

0 commit comments

Comments
 (0)