fixes sorting in profiler storage explorer (elastic#212583)

## Summary
fixes elastic#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)

x-pack/solutions/observability/plugins/profiling/public/views/storage_explorer/host_breakdown/hosts_table.tsx

@@ -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),