fix: use Storage on all pages

Author: artemmufazalov

src/containers/PDiskPage/PDiskGroups/PDiskGroups.tsx

@@ -24,10 +24,10 @@ import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
 import {getPDiskId, getSeverityColor} from '../../utils/disks/helpers';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {Storage} from '../Storage/Storage';
 
 import {DecommissionButton} from './DecommissionButton/DecommissionButton';
 import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel';
-import {PDiskGroups} from './PDiskGroups/PDiskGroups';
 import {PDiskSpaceDistribution} from './PDiskSpaceDistribution/PDiskSpaceDistribution';
 import {pDiskPageKeyset} from './i18n';
 
@@ -37,7 +37,7 @@ const pdiskPageCn = cn('ydb-pdisk-page');
 
 const PDISK_TABS_IDS = {
     diskDistribution: 'diskDistribution',
-    groups: 'groups',
+    storage: 'storage',
 } as const;
 
 const PDISK_PAGE_TABS = [
@@ -48,9 +48,9 @@ const PDISK_PAGE_TABS = [
         },
     },
     {
-        id: PDISK_TABS_IDS.groups,
+        id: PDISK_TABS_IDS.storage,
         get title() {
-            return pDiskPageKeyset('groups');
+            return pDiskPageKeyset('storage');
         },
     },
 ];
@@ -237,10 +237,8 @@ export function PDiskPage() {
                     </div>
                 ) : null;
             }
-            case 'groups': {
-                return pDiskParamsDefined ? (
-                    <PDiskGroups nodeId={nodeId} pDiskId={pDiskId} />
-                ) : null;
+            case 'storage': {
+                return pDiskParamsDefined ? <Storage nodeId={nodeId} pDiskId={pDiskId} /> : null;
             }
             default:
                 return null;

src/containers/PDiskPage/PDiskGroups/utils.ts

@@ -3,7 +3,7 @@
   "pdisk": "PDisk",
   "node": "Node",
 
-  "groups": "Groups",
+  "storage": "Storage",
   "disk-distribution": "Disk distribution",
 
   "empty-slot": "Empty slot",

src/containers/PDiskPage/PDiskPage.tsx

@@ -60,9 +60,11 @@ const UsageFilterParam = withDefault(
 interface StorageProps {
     database?: string;
     nodeId?: string | number;
+    groupId?: string | number;
+    pDiskId?: string | number;
 }
 
-export const Storage = ({database, nodeId}: StorageProps) => {
+export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
     const {balancer} = useClusterBaseInfo();
     const additionalNodesProps = useAdditionalNodeProps({balancer});
 
@@ -115,14 +117,21 @@ export const Storage = ({database, nodeId}: StorageProps) => {
     } = useStorageGroupsSelectedColumns(visibleEntities);
 
     const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
-        {database, with: visibleEntities, node_id: nodeId},
+        {database, with: visibleEntities, node_id: nodeId, group_id: groupId},
         {
             skip: !isNodes,
             pollingInterval: autoRefreshInterval,
         },
     );
     const groupsQuery = storageApi.useGetStorageGroupsInfoQuery(
-        {database, with: visibleEntities, nodeId, shouldUseGroupsHandler: groupsHandlerAvailable},
+        {
+            database,
+            with: visibleEntities,
+            nodeId,
+            groupId,
+            pDiskId,
+            shouldUseGroupsHandler: groupsHandlerAvailable,
+        },
         {
             skip: !isGroups || !capabilitiesLoaded,
             pollingInterval: autoRefreshInterval,

src/containers/PDiskPage/i18n/en.json

@@ -11,7 +11,7 @@
     &__meta,
     &__title,
     &__info,
-    &__tabs {
+    &__storage-title {
         position: sticky;
         left: 0;
 
@@ -26,15 +26,12 @@
         margin-bottom: 60px;
     }
 
-    &__tabs {
+    &__storage-title {
         margin-bottom: 0;
+        @include header-1-typography();
     }
 
     &__info {
         margin-top: var(--g-spacing-10);
     }
-
-    &__tabs {
-        @include tabs-wrapper-styles();
-    }
 }