refactor: migrate storage reducer to ts (#450)

Author: artemmufazalov

src/containers/Storage/PDisk/PDisk.tsx

@@ -5,9 +5,8 @@ import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
+import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
@@ -58,11 +57,7 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
-    const vdisks: TVDiskStateInfo[] | undefined = useTypedSelector((state) =>
-        // @ts-expect-error selector is correct, but js infers broken type
-        // unignore after rewriting reducer in ts
-        getVDisksForPDisk(state, nodeId, data.PDiskId),
-    );
+    const vdisks = useTypedSelector((state) => selectVDisksForPDisk(state, nodeId, data.PDiskId));
 
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);

src/containers/Storage/Storage.js

@@ -16,17 +16,20 @@ import {EntitiesCount} from '../../components/EntitiesCount';
 import {
     getStorageInfo,
     setInitialState,
-    getFilteredEntities,
     setVisibleEntities,
     setStorageFilter,
     setUsageFilter,
     setStorageType,
     setNodesUptimeFilter,
     setDataWasNotLoaded,
-    getStoragePoolsGroupsCount,
-    getStorageNodesCount,
-    getUsageFilterOptions,
 } from '../../store/reducers/storage/storage';
+import {
+    selectFilteredGroups,
+    selectFilteredNodes,
+    selectStorageNodesCount,
+    selectStorageGroupsCount,
+    selectUsageFilterOptions,
+} from '../../store/reducers/storage/selectors';
 import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
 import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
@@ -54,7 +57,8 @@ class Storage extends React.Component {
         database: PropTypes.bool,
         getStorageInfo: PropTypes.func,
         setInitialState: PropTypes.func,
-        flatListStorageEntities: PropTypes.array,
+        storageNodes: PropTypes.array,
+        storageGroups: PropTypes.array,
         groupsCount: PropTypes.object,
         nodesCount: PropTypes.object,
         setStorageFilter: PropTypes.func,
@@ -166,7 +170,8 @@ class Storage extends React.Component {
 
     renderDataTable() {
         const {
-            flatListStorageEntities,
+            storageNodes,
+            storageGroups,
             visibleEntities,
             nodesUptimeFilter,
             nodes,
@@ -179,7 +184,7 @@ class Storage extends React.Component {
                 {storageType === STORAGE_TYPES.groups && (
                     <StorageGroups
                         visibleEntities={visibleEntities}
-                        data={flatListStorageEntities}
+                        data={storageGroups}
                         tableSettings={tableSettings}
                         nodes={nodes}
                         onShowAll={() => this.onGroupVisibilityChange(VISIBLE_ENTITIES.all)}
@@ -189,7 +194,7 @@ class Storage extends React.Component {
                     <StorageNodes
                         visibleEntities={visibleEntities}
                         nodesUptimeFilter={nodesUptimeFilter}
-                        data={flatListStorageEntities}
+                        data={storageNodes}
                         tableSettings={tableSettings}
                         onShowAll={this.onShowAllNodes}
                         additionalNodesInfo={additionalNodesInfo}
@@ -219,18 +224,27 @@ class Storage extends React.Component {
     };
 
     renderEntitiesCount() {
-        const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
-            this.props;
+        const {
+            storageType,
+            groupsCount,
+            nodesCount,
+            storageGroups,
+            storageNodes,
+            loading,
+            wasLoaded,
+        } = this.props;
 
         const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
         const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
+        const current =
+            storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
 
         return (
             <EntitiesCount
                 label={entityName}
                 loading={loading && !wasLoaded}
                 total={count.total}
-                current={flatListStorageEntities.length}
+                current={current}
             />
         );
     }
@@ -318,11 +332,12 @@ function mapStateToProps(state) {
     } = state.storage;
 
     return {
-        flatListStorageEntities: getFilteredEntities(state),
-        groupsCount: getStoragePoolsGroupsCount(state),
+        storageNodes: selectFilteredNodes(state),
+        storageGroups: selectFilteredGroups(state),
+        nodesCount: selectStorageNodesCount(state),
+        groupsCount: selectStorageGroupsCount(state),
         autorefresh: state.schema.autorefresh,
         nodes: selectNodesMap(state),
-        nodesCount: getStorageNodesCount(state),
         loading,
         wasLoaded,
         error,
@@ -331,7 +346,7 @@ function mapStateToProps(state) {
         filter,
         usageFilter,
         nodesUptimeFilter,
-        usageFilterOptions: getUsageFilterOptions(state),
+        usageFilterOptions: selectUsageFilterOptions(state),
     };
 }
 

src/store/reducers/nodes/nodes.ts

@@ -192,8 +192,8 @@ const filterNodesByProblemsStatus = (
     });
 };
 
-export const filterNodesByUptime = (
-    nodesList: NodesPreparedEntity[] = [],
+export const filterNodesByUptime = <T extends {StartTime?: string}>(
+    nodesList: T[] = [],
     nodesUptimeFilter: NodesUptimeFilterValues,
 ) => {
     if (nodesUptimeFilter === NodesUptimeFilterValues.All) {