fix: replace EntityStatus with StatusIcon where possible (#1518)

Author: artemmufazalov

src/components/PDiskInfo/PDiskInfo.tsx

@@ -9,11 +9,11 @@ import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters
 import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import type {PreparedPDisk} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
-import {EntityStatus} from '../EntityStatus/EntityStatus';
 import type {InfoViewerItem} from '../InfoViewer';
 import {InfoViewer} from '../InfoViewer/InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {StatusIcon} from '../StatusIcon/StatusIcon';
 
 import {pDiskInfoKeyset} from './i18n';
 
@@ -92,13 +92,13 @@ function getPDiskInfo<T extends PreparedPDisk>({
     if (valueIsDefined(Device)) {
         statusInfo.push({
             label: pDiskInfoKeyset('device'),
-            value: <EntityStatus status={Device} />,
+            value: <StatusIcon status={Device} />,
         });
     }
     if (valueIsDefined(Realtime)) {
         statusInfo.push({
             label: pDiskInfoKeyset('realtime'),
-            value: <EntityStatus status={Realtime} />,
+            value: <StatusIcon status={Realtime} />,
         });
     }
 

src/components/StatusIcon/StatusIcon.scss

@@ -37,6 +37,7 @@
 
     &__status-color,
     &__status-icon {
+        display: inline-flex;
         flex-shrink: 0;
 
         border-radius: 3px;

src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -5,10 +5,10 @@ import {valueIsDefined} from '../../utils';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {formatToMs} from '../../utils/timeParsers';
 import {bytesToSpeed} from '../../utils/utils';
-import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {StatusIcon} from '../StatusIcon/StatusIcon';
 
 import {storageGroupInfoKeyset} from './i18n';
 
@@ -70,7 +70,7 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
     if (valueIsDefined(Overall)) {
         storageGroupInfoFirstColumn.push({
             label: storageGroupInfoKeyset('overall'),
-            value: <EntityStatus status={Overall} />,
+            value: <StatusIcon status={Overall} />,
         });
     }
     if (valueIsDefined(State)) {
@@ -113,13 +113,13 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
     if (valueIsDefined(DiskSpace)) {
         storageGroupInfoSecondColumn.push({
             label: storageGroupInfoKeyset('disk-space'),
-            value: <EntityStatus status={DiskSpace} />,
+            value: <StatusIcon status={DiskSpace} />,
         });
     }
     if (valueIsDefined(Latency)) {
         storageGroupInfoSecondColumn.push({
             label: storageGroupInfoKeyset('latency'),
-            value: <EntityStatus status={Latency} />,
+            value: <StatusIcon status={Latency} />,
         });
     }
     if (valueIsDefined(LatencyPutTabletLogMs)) {

src/components/VDiskInfo/VDiskInfo.tsx

@@ -15,6 +15,7 @@ import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {StatusIcon} from '../StatusIcon/StatusIcon';
 
 import {vDiskInfoKeyset} from './i18n';
 
@@ -106,25 +107,25 @@ export function VDiskInfo<T extends PreparedVDisk>({
     if (valueIsDefined(DiskSpace)) {
         vdiskInfo.push({
             label: vDiskInfoKeyset('space-status'),
-            value: <EntityStatus status={DiskSpace} />,
+            value: <StatusIcon status={DiskSpace} />,
         });
     }
     if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) {
         vdiskInfo.push({
             label: vDiskInfoKeyset('fresh-rank-satisfaction'),
-            value: <EntityStatus status={SatisfactionRank?.FreshRank?.Flag} />,
+            value: <StatusIcon status={SatisfactionRank?.FreshRank?.Flag} />,
         });
     }
     if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) {
         vdiskInfo.push({
             label: vDiskInfoKeyset('level-rank-satisfaction'),
-            value: <EntityStatus status={SatisfactionRank?.LevelRank?.Flag} />,
+            value: <StatusIcon status={SatisfactionRank?.LevelRank?.Flag} />,
         });
     }
     if (valueIsDefined(FrontQueues)) {
         vdiskInfo.push({
             label: vDiskInfoKeyset('front-queues'),
-            value: <EntityStatus status={FrontQueues} />,
+            value: <StatusIcon status={FrontQueues} />,
         });
     }
     if (valueIsDefined(HasUnreadableBlobs)) {

src/containers/Node/NodeStructure/Pdisk.tsx

@@ -6,9 +6,9 @@ import type {Column} from '@gravity-ui/react-data-table';
 import {ArrowToggle, Button, Icon, Popover} from '@gravity-ui/uikit';
 import isEmpty from 'lodash/isEmpty';
 
-import {EntityStatus} from '../../../components/EntityStatus/EntityStatus';
 import {PDiskInfo} from '../../../components/PDiskInfo/PDiskInfo';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {StatusIcon} from '../../../components/StatusIcon/StatusIcon';
 import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
 import type {
     PreparedStructurePDisk,
@@ -107,7 +107,7 @@ function getColumns({
             width: 70,
             render: ({row}) => {
                 return (
-                    <EntityStatus
+                    <StatusIcon
                         status={row.VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red}
                     />
                 );
@@ -220,7 +220,7 @@ export function PDisk({
         <div className={b('pdisk')} id={id}>
             <div className={b('pdisk-header')}>
                 <div className={b('pdisk-title-wrapper')}>
-                    <EntityStatus status={Device} />
+                    <StatusIcon status={Device} />
                     <PDiskTitleBadge
                         label="PDiskID"
                         value={PDiskId}

src/containers/Storage/StorageGroups/columns/columns.tsx

@@ -5,8 +5,8 @@ import DataTable from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {CellWithPopover} from '../../../../components/CellWithPopover/CellWithPopover';
-import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../../components/InternalLink';
+import {StatusIcon} from '../../../../components/StatusIcon/StatusIcon';
 import {UsageLabel} from '../../../../components/UsageLabel/UsageLabel';
 import {VDiskWithDonorsStack} from '../../../../components/VDisk/VDiskWithDonorsStack';
 import {getStorageGroupPath} from '../../../../routes';
@@ -171,9 +171,9 @@ const limitColumn: StorageGroupsColumn = {
 const usedSpaceFlagColumn: StorageGroupsColumn = {
     name: STORAGE_GROUPS_COLUMNS_IDS.DiskSpace,
     header: STORAGE_GROUPS_COLUMNS_TITLES.DiskSpace,
-    width: 110,
+    width: 70,
     render: ({row}) => {
-        return <EntityStatus status={row.DiskSpace} />;
+        return <StatusIcon status={row.DiskSpace} />;
     },
     align: DataTable.CENTER,
 };