fixes sorting in profiler storage explorer (#212583)

## Summary
fixes #197448
replaces `LabelWithHint` with new built-in `nameTooltip` prop
Also updated sorting function for hostName column, as the default
sorting doesn't take into account `host.id` when `host.name` is empty.


https://github.com/user-attachments/assets/4e3632bf-61d0-4045-babd-2917fa7a204a



### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Bryce Buchanan 2025-02-27 07:53:44 -08:00 committed by GitHub
parent 2704a71452
commit 6ce38c3c1b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -19,7 +19,6 @@ import { i18n } from '@kbn/i18n';
import { asDynamicBytes, asAbsoluteDateTime } from '@kbn/observability-plugin/common';
import React, { useMemo, useState } from 'react';
import type { StorageExplorerHostDetails } from '../../../../common/storage_explorer';
import { LabelWithHint } from '../../../components/label_with_hint';
import { useProfilingParams } from '../../../hooks/use_profiling_params';
import { useProfilingRouter } from '../../../hooks/use_profiling_router';
@ -90,20 +89,15 @@ export function HostsTable({ data = [], hasDistinctProbabilisticValues }: Props)
},
{
field: 'hostName',
name: (
<LabelWithHint
label={i18n.translate('xpack.profiling.storageExplorer.hostsTable.host', {
defaultMessage: 'Host',
})}
hint={i18n.translate('xpack.profiling.storageExplorer.hostsTable.host.hint', {
defaultMessage: 'host.name[host.id]',
})}
labelSize="xs"
labelStyle={{ fontWeight: 700 }}
iconSize="s"
/>
),
sortable: true,
name: i18n.translate('xpack.profiling.storageExplorer.hostsTable.host', {
defaultMessage: 'Host',
}),
nameTooltip: {
content: i18n.translate('xpack.profiling.storageExplorer.hostsTable.host.hint', {
defaultMessage: 'host.name[host.id]',
}),
},
sortable: (item) => `${item.hostName} [${item.hostId}]`,
render: (_, item) => {
return (
<EuiLink
@ -174,19 +168,14 @@ export function HostsTable({ data = [], hasDistinctProbabilisticValues }: Props)
},
{
field: 'totalSize',
name: (
<LabelWithHint
label={i18n.translate('xpack.profiling.storageExplorer.hostsTable.totalData', {
defaultMessage: 'Total data',
})}
hint={i18n.translate('xpack.profiling.storageExplorer.hostsTable.totalData.hint', {
defaultMessage: 'The combined value of Universal Profiling metrics and samples.',
})}
labelSize="xs"
labelStyle={{ fontWeight: 700 }}
iconSize="s"
/>
),
name: i18n.translate('xpack.profiling.storageExplorer.hostsTable.totalData', {
defaultMessage: 'Total data',
}),
nameTooltip: {
content: i18n.translate('xpack.profiling.storageExplorer.hostsTable.totalData.hint', {
defaultMessage: 'The combined value of Universal Profiling metrics and samples.',
}),
},
sortable: true,
width: '200',
render: (size: StorageExplorerHostDetails['totalSize']) => asDynamicBytes(size),