feat(autoRefresh): move auto refresh to separate reducer (#943)

Author: ValeraS

src/containers/Heatmap/Heatmap.tsx

@@ -4,6 +4,7 @@ import {Checkbox, Select} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
+import {selectAutoRefreshInterval} from '../../store/reducers/autoRefreshControl';
 import {heatmapApi, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import type {IHeatmapMetricValue} from '../../types/store/heatmap';
@@ -29,11 +30,11 @@ export const Heatmap = ({path}: HeatmapProps) => {
 
     const itemsContainer = React.createRef<HTMLDivElement>();
 
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
 
     const {currentData, isFetching, error} = heatmapApi.useGetHeatmapTabletsInfoQuery(
         {path},
-        {pollingInterval: autorefresh},
+        {pollingInterval: autoRefreshInterval},
     );
 
     const loading = isFetching && currentData === undefined;

src/containers/Nodes/Nodes.tsx

@@ -13,6 +13,7 @@ import {ResizeableDataTable} from '../../components/ResizeableDataTable/Resizeab
 import {Search} from '../../components/Search';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {UptimeFilter} from '../../components/UptimeFIlter';
+import {selectAutoRefreshInterval} from '../../store/reducers/autoRefreshControl';
 import {nodesApi} from '../../store/reducers/nodes/nodes';
 import {filterNodes} from '../../store/reducers/nodes/selectors';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
@@ -58,7 +59,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
     const isClusterNodes = !path;
 
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autorefresh = useTypedSelector(selectAutoRefreshInterval);
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 

src/containers/Storage/Storage.tsx

@@ -5,6 +5,7 @@ import {ArrayParam, StringParam, useQueryParams, withDefault} from 'use-query-pa
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {selectAutoRefreshInterval} from '../../store/reducers/autoRefreshControl';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants';
@@ -62,7 +63,7 @@ interface StorageProps {
 }
 
 export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) => {
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autorefresh = useTypedSelector(selectAutoRefreshInterval);
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,

src/containers/Tablets/Tablets.tsx

@@ -10,6 +10,7 @@ import {InternalLink} from '../../components/InternalLink';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import routes, {createHref} from '../../routes';
+import {selectAutoRefreshInterval} from '../../store/reducers/autoRefreshControl';
 import {selectTabletsWithFqdn, tabletsApi} from '../../store/reducers/tablets';
 import {ETabletState} from '../../types/api/tablet';
 import type {TTabletStateInfo} from '../../types/api/tablet';
@@ -145,7 +146,7 @@ interface TabletsProps {
 }
 
 export function Tablets({nodeId, path, className}: TabletsProps) {
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
 
     let params: TabletsApiRequestParams = {};
     const node = nodeId === undefined ? undefined : String(nodeId);
@@ -157,7 +158,7 @@ export function Tablets({nodeId, path, className}: TabletsProps) {
     const {currentData, isFetching, error} = tabletsApi.useGetTabletsInfoQuery(
         Object.keys(params).length === 0 ? skipToken : params,
         {
-            pollingInterval: autorefresh,
+            pollingInterval: autoRefreshInterval,
         },
     );
 

src/containers/Tenant/Diagnostics/Autorefresh/AutorefreshControl.tsx

@@ -2,7 +2,10 @@ import {ArrowsRotateLeft} from '@gravity-ui/icons';
 import {Button, Select} from '@gravity-ui/uikit';
 
 import {api} from '../../../../store/reducers/api';
-import {setAutorefreshInterval} from '../../../../store/reducers/schema/schema';
+import {
+    selectAutoRefreshInterval,
+    setAutoRefreshInterval,
+} from '../../../../store/reducers/autoRefreshControl';
 import {cn} from '../../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 
@@ -18,7 +21,7 @@ interface AutorefreshControlProps {
 
 export function AutorefreshControl({className}: AutorefreshControlProps) {
     const dispatch = useTypedDispatch();
-    const autorefresh = useTypedSelector((state) => state.schema.autorefresh);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
     return (
         <div className={b(null, className)}>
             <Button
@@ -33,9 +36,9 @@ export function AutorefreshControl({className}: AutorefreshControlProps) {
                 </Button.Icon>
             </Button>
             <Select
-                value={[String(autorefresh)]}
+                value={[String(autoRefreshInterval)]}
                 onUpdate={(v) => {
-                    dispatch(setAutorefreshInterval(Number(v)));
+                    dispatch(setAutoRefreshInterval(Number(v)));
                 }}
                 width={85}
             >

src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -6,6 +6,7 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {Loader} from '../../../../components/Loader';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../../../components/Search';
+import {selectAutoRefreshInterval} from '../../../../store/reducers/autoRefreshControl';
 import {
     selectPreparedConsumersData,
     selectPreparedTopicStats,
@@ -35,10 +36,10 @@ export const Consumers = ({path, type}: ConsumersProps) => {
 
     const [searchValue, setSearchValue] = React.useState('');
 
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path},
-        {pollingInterval: autorefresh},
+        {pollingInterval: autoRefreshInterval},
     );
     const loading = isFetching && currentData === undefined;
     const consumers = useTypedSelector((state) => selectPreparedConsumersData(state, path));

src/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -4,6 +4,7 @@ import {shallowEqual} from 'react-redux';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {Loader} from '../../../../components/Loader';
+import {selectAutoRefreshInterval} from '../../../../store/reducers/autoRefreshControl';
 import {describeApi} from '../../../../store/reducers/describe';
 import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
 import type {EPathType} from '../../../../types/api/schema';
@@ -24,7 +25,8 @@ interface IDescribeProps {
 }
 
 const Describe = ({tenant, type}: IDescribeProps) => {
-    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
 
@@ -41,7 +43,7 @@ const Describe = ({tenant, type}: IDescribeProps) => {
         paths = [path, ...mergedChildrenPaths];
     }
     const {currentData, isFetching, error} = describeApi.useGetDescribeQuery(paths, {
-        pollingInterval: autorefresh,
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
     const currentDescribe = currentData;

src/containers/Tenant/Diagnostics/Network/Network.tsx

@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {Illustration} from '../../../../components/Illustration';
 import {ProblemFilter} from '../../../../components/ProblemFilter';
+import {selectAutoRefreshInterval} from '../../../../store/reducers/autoRefreshControl';
 import {networkApi} from '../../../../store/reducers/network/network';
 import {
     ProblemFilterValues,
@@ -31,7 +32,7 @@ interface NetworkProps {
     path: string;
 }
 export function Network({path}: NetworkProps) {
-    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
     const filter = useTypedSelector(selectProblemFilter);
     const dispatch = useTypedDispatch();
 
@@ -40,7 +41,7 @@ export function Network({path}: NetworkProps) {
     const [showRacks, setShowRacks] = React.useState(false);
 
     const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(path, {
-        pollingInterval: autorefresh,
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
 

src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -6,6 +6,7 @@ import {shallowEqual} from 'react-redux';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
 import {Loader} from '../../../../components/Loader';
+import {selectAutoRefreshInterval} from '../../../../store/reducers/autoRefreshControl';
 import {olapApi} from '../../../../store/reducers/olapStats';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
@@ -31,14 +32,15 @@ interface OverviewProps {
 }
 
 function Overview({type, tenantName}: OverviewProps) {
-    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
 
     const schemaPath = currentSchemaPath || tenantName;
     const olapParams =
         isTableType(type) && isColumnEntityType(type) ? {path: schemaPath} : skipToken;
     const {currentData: olapData, isFetching: olapIsFetching} = olapApi.useGetOlapStatsQuery(
         olapParams,
-        {pollingInterval: autorefresh},
+        {pollingInterval: autoRefreshInterval},
     );
     const olapStatsLoading = olapIsFetching && olapData === undefined;
     const {result: olapStats} = olapData || {result: undefined};
@@ -65,7 +67,7 @@ function Overview({type, tenantName}: OverviewProps) {
         isFetching,
         error: overviewError,
     } = overviewApi.useGetOverviewQuery(paths, {
-        pollingInterval: autorefresh,
+        pollingInterval: autoRefreshInterval,
     });
     const overviewLoading = isFetching && currentData === undefined;
     const {data: rawData, additionalData} = currentData || {};

src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -5,6 +5,7 @@ import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
 import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 import {Loader} from '../../../../../components/Loader';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {selectAutoRefreshInterval} from '../../../../../store/reducers/autoRefreshControl';
 import {selectPreparedTopicStats, topicApi} from '../../../../../store/reducers/topic';
 import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 import {cn} from '../../../../../utils/cn';
@@ -70,10 +71,11 @@ const prepareBytesWrittenInfo = (data: IPreparedTopicStats): Array<InfoViewerIte
 };
 
 export const TopicStats = () => {
-    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const {currentSchemaPath} = useTypedSelector((state) => state.schema);
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path: currentSchemaPath},
-        {pollingInterval: autorefresh},
+        {pollingInterval: autoRefreshInterval},
     );
     const loading = isFetching && currentData === undefined;
     const data = useTypedSelector((state) => selectPreparedTopicStats(state, currentSchemaPath));