feat(FR-833): Improve metric label formatting in user session history page (#3500)

resolves #3499 (FR-833)
<!-- replace NNN, MMM with the GitHub issue number and the corresponding Jira issue number. -->

### Modify the mertric label formatting for proper notation.

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: ironAiken2

react/src/components/SessionMetricGraph.tsx

@@ -2,6 +2,7 @@ import {
   convertBinarySizeUnit,
   toFixedFloorWithoutTrailingZeros,
 } from '../helper';
+import { useResourceSlotsDetails } from '../hooks/backendai';
 import BAICard from './BAICard';
 import {
   SessionMetricGraphQuery,
@@ -68,6 +69,7 @@ const SessionMetricGraph: React.FC<PrometheusMetricGraphProps> = ({
 }) => {
   const { token } = theme.useToken();
   const { styles } = useStyle();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
 
   const { capacity_metric, current_metric } =
     useLazyLoadQuery<SessionMetricGraphQuery>(
@@ -142,9 +144,22 @@ const SessionMetricGraph: React.FC<PrometheusMetricGraphProps> = ({
     dayDiff < 7 ? '5m' : dayDiff < 30 ? '1h' : '1d',
   );
 
+  const getMetricTitle = () => {
+    const [key, ...rest] = _.split(metricName, '_');
+    const restLabel = _.startCase(rest.join(' '));
+
+    if (_.has(mergedResourceSlots, key)) {
+      return `${mergedResourceSlots[key]?.human_readable_name} ${restLabel}`;
+    }
+    if (_.includes(metricName, 'io')) {
+      return `${_.upperCase(key)} ${restLabel}`;
+    }
+    return `${_.startCase(metricName.replaceAll('_', ' '))}`;
+  };
+
   return (
     <BAICard
-      title={_.startCase(metricName.replaceAll('_', ' '))}
+      title={getMetricTitle()}
       type="inner"
       styles={{
         body: {

react/src/pages/StatisticsPage.tsx

@@ -8,8 +8,6 @@ import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-type TabKey = 'allocation-history' | 'prometheus-metrics';
-
 interface ResourcesPageProps {}
 
 const tabParam = withDefault(StringParam, 'allocation-history');
@@ -26,14 +24,14 @@ const ResourcesPage: React.FC<ResourcesPageProps> = (props) => {
   return (
     <BAICard
       activeTabKey={curTabKey}
-      onTabChange={(key) => setCurTabKey(key as TabKey)}
+      onTabChange={(key) => setCurTabKey(key)}
       tabList={filterEmptyItem([
         {
           key: 'allocation-history',
           tab: t('webui.menu.UsageHistory'),
         },
         baiClient?.supports('user-metrics') && {
-          key: 'prometheus-metrics',
+          key: 'user-session-history',
           tab: t('webui.menu.UserSessionHistory'),
         },
       ])}
@@ -57,7 +55,7 @@ const ResourcesPage: React.FC<ResourcesPageProps> = (props) => {
           <AllocationHistory />
         </Suspense>
       ) : null}
-      {curTabKey === 'prometheus-metrics' ? (
+      {curTabKey === 'user-session-history' ? (
         <Suspense
           fallback={
             <Skeleton