fix: use UsageLabel in top groups by usage table (#572)

Author: krosy1337

src/components/UsageLabel/UsageLabel.tsx

@@ -2,6 +2,8 @@ import cn from 'bem-cn-lite';
 
 import {Label, type LabelProps} from '@gravity-ui/uikit';
 
+import './UsageLabel.scss';
+
 const b = cn('ydb-usage-label');
 
 interface UsageLabelProps extends LabelProps {

src/containers/Storage/StorageGroups/StorageGroups.scss

@@ -31,12 +31,6 @@
         width: 230px;
     }
 
-    &__usage-label {
-        &_overload {
-            color: var(--yc-color-text-light-primary);
-            background-color: var(--yc-color-base-danger-heavy);
-        }
-    }
     &__group-id {
         font-weight: 500;
     }

src/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx

@@ -13,6 +13,7 @@ import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {Stack} from '../../../components/Stack/Stack';
 import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover';
+import {UsageLabel} from '../../../components/UsageLabel/UsageLabel';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 import i18n from './i18n';
@@ -128,12 +129,7 @@ const usageColumn: Column<PreparedStorageGroup> = {
         // without a limit the usage can be evaluated as 0,
         // but the absence of a value is more clear
         return row.Limit ? (
-            <Label
-                theme={getUsageSeverityForStorageGroup(row.Usage)}
-                className={b('usage-label', {overload: row.Usage >= 90})}
-            >
-                {row.Usage}%
-            </Label>
+            <UsageLabel value={row.Usage} theme={getUsageSeverityForStorageGroup(row.Usage)} />
         ) : (
             '-'
         );