feat(autoRefresh): use user settings to store auto refresh interval (#956)

Author: ValeraS

src/containers/Heatmap/Heatmap.tsx

@@ -4,13 +4,12 @@ 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';
 import {cn} from '../../utils/cn';
 import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
-import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
@@ -30,7 +29,7 @@ export const Heatmap = ({path}: HeatmapProps) => {
 
     const itemsContainer = React.createRef<HTMLDivElement>();
 
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {currentData, isFetching, error} = heatmapApi.useGetHeatmapTabletsInfoQuery(
         {path},

src/containers/Nodes/Nodes.tsx

@@ -13,7 +13,6 @@ 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';
@@ -30,7 +29,13 @@ import {
     DEFAULT_TABLE_SETTINGS,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
-import {useSetting, useTableSort, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {
+    useAutoRefreshInterval,
+    useSetting,
+    useTableSort,
+    useTypedDispatch,
+    useTypedSelector,
+} from '../../utils/hooks';
 import {
     NodesUptimeFilterValues,
     isSortableNodesProperty,
@@ -63,7 +68,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
     const isClusterNodes = !path;
 
     const problemFilter = useTypedSelector(selectProblemFilter);
-    const autorefresh = useTypedSelector(selectAutoRefreshInterval);
+    const [autorefresh] = useAutoRefreshInterval();
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 

src/containers/Storage/Storage.tsx

@@ -5,7 +5,6 @@ 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';
@@ -24,6 +23,7 @@ import type {
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {
+    useAutoRefreshInterval,
     useNodesRequestParams,
     useStorageRequestParams,
     useTableSort,
@@ -63,7 +63,7 @@ interface StorageProps {
 }
 
 export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) => {
-    const autorefresh = useTypedSelector(selectAutoRefreshInterval);
+    const [autorefresh] = useAutoRefreshInterval();
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,

src/containers/Tablets/Tablets.tsx

@@ -10,15 +10,14 @@ 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';
 import type {TabletsApiRequestParams} from '../../types/store/tablets';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
-import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {mapTabletStateToLabelTheme} from '../../utils/tablet';
 import {getDefaultNodePath} from '../Node/NodePages';
 
@@ -146,7 +145,7 @@ interface TabletsProps {
 }
 
 export function Tablets({nodeId, path, className}: TabletsProps) {
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
 
     let params: TabletsApiRequestParams = {};
     const node = nodeId === undefined ? undefined : String(nodeId);

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

@@ -2,12 +2,8 @@ import {ArrowsRotateLeft} from '@gravity-ui/icons';
 import {Button, Select} from '@gravity-ui/uikit';
 
 import {api} from '../../../../store/reducers/api';
-import {
-    selectAutoRefreshInterval,
-    setAutoRefreshInterval,
-} from '../../../../store/reducers/autoRefreshControl';
 import {cn} from '../../../../utils/cn';
-import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedDispatch} from '../../../../utils/hooks';
 
 import i18n from './i18n';
 
@@ -21,7 +17,7 @@ interface AutorefreshControlProps {
 
 export function AutorefreshControl({className}: AutorefreshControlProps) {
     const dispatch = useTypedDispatch();
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval, setAutoRefreshInterval] = useAutoRefreshInterval();
     return (
         <div className={b(null, className)}>
             <Button
@@ -38,7 +34,7 @@ export function AutorefreshControl({className}: AutorefreshControlProps) {
             <Select
                 value={[String(autoRefreshInterval)]}
                 onUpdate={(v) => {
-                    dispatch(setAutoRefreshInterval(Number(v)));
+                    setAutoRefreshInterval(Number(v));
                 }}
                 width={85}
             >

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

@@ -6,7 +6,6 @@ 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,
@@ -15,7 +14,7 @@ import {
 import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {isCdcStreamEntityType} from '../../utils/schema';
 
 import {ConsumersTopicStats} from './TopicStats';
@@ -36,7 +35,7 @@ export const Consumers = ({path, type}: ConsumersProps) => {
 
     const [searchValue, setSearchValue] = React.useState('');
 
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path},
         {pollingInterval: autoRefreshInterval},

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

@@ -4,12 +4,11 @@ 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';
 import {cn} from '../../../../utils/cn';
-import {useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {isEntityWithMergedImplementation} from '../../utils/schema';
 
 import './Describe.scss';
@@ -25,7 +24,7 @@ interface IDescribeProps {
 }
 
 const Describe = ({path, type}: IDescribeProps) => {
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
 

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

@@ -6,7 +6,6 @@ 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,
@@ -16,7 +15,7 @@ import {
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import type {TNetNodeInfo, TNetNodePeerInfo} from '../../../../types/api/netInfo';
 import {cn} from '../../../../utils/cn';
-import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import {NodeNetwork} from './NodeNetwork/NodeNetwork';
@@ -32,7 +31,7 @@ interface NetworkProps {
     tenantName: string;
 }
 export function Network({tenantName}: NetworkProps) {
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const filter = useTypedSelector(selectProblemFilter);
     const dispatch = useTypedDispatch();
 

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

@@ -6,12 +6,11 @@ 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 {schemaApi, selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
 import {EPathType} from '../../../../types/api/schema';
-import {useTypedSelector} from '../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {ExternalDataSourceInfo} from '../../Info/ExternalDataSource/ExternalDataSource';
 import {ExternalTableInfo} from '../../Info/ExternalTable/ExternalTable';
 import {ViewInfo} from '../../Info/View/View';
@@ -32,7 +31,7 @@ interface OverviewProps {
 }
 
 function Overview({type, path}: OverviewProps) {
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const olapParams = isTableType(type) && isColumnEntityType(type) ? {path} : skipToken;
     const {currentData: olapData, isFetching: olapIsFetching} = olapApi.useGetOlapStatsQuery(

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

@@ -5,12 +5,11 @@ 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';
 import {formatBps, formatBytes} from '../../../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../../../utils/hooks';
+import {useAutoRefreshInterval, useTypedSelector} from '../../../../../utils/hooks';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
 
 import i18n from './i18n';
@@ -71,7 +70,7 @@ const prepareBytesWrittenInfo = (data: IPreparedTopicStats): Array<InfoViewerIte
 };
 
 export const TopicStats = ({path}: {path: string}) => {
-    const autoRefreshInterval = useTypedSelector(selectAutoRefreshInterval);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path},
         {pollingInterval: autoRefreshInterval},