fix: use skipPollingIfUnfocused

astandrik · astandrik · commit 61cd16810707 · 2025-04-11T18:04:45.000+03:00
diff --git a/src/components/MetricChart/MetricChart.tsx b/src/components/MetricChart/MetricChart.tsx
@@ -146,7 +146,7 @@ export const MetricChart = ({
             timeFrame,
             maxDataPoints: width / 2,
         },
-        {pollingInterval: autorefresh},
+        {pollingInterval: autorefresh, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && !currentData;
diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx
@@ -73,6 +73,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     tableDataApi.useFetchTableChunkQuery(queryParams, {
         skip: isTimeoutActive || !isActive,
         pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
     });
 
     const {currentData, error} = tableDataApi.endpoints.fetchTableChunk.useQueryState(queryParams);
diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx
@@ -40,6 +40,7 @@ export function Clusters() {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const query = clustersApi.useGetClustersListQuery(undefined, {
         pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
     });
 
     const dispatch = useTypedDispatch();
diff --git a/src/containers/Heatmap/Heatmap.tsx b/src/containers/Heatmap/Heatmap.tsx
@@ -34,7 +34,7 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
 
     const {currentData, isFetching, error} = heatmapApi.useGetHeatmapTabletsInfoQuery(
         {path, database},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx
@@ -58,7 +58,10 @@ export function Node() {
         currentData: node,
         isLoading,
         error,
-    } = nodeApi.useGetNodeInfoQuery(params, {pollingInterval: autoRefreshInterval});
+    } = nodeApi.useGetNodeInfoQuery(params, {
+        pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
+    });
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const isDiskPagesAvailable = useDiskPagesAvailable();
diff --git a/src/containers/Node/NodeStructure/NodeStructure.tsx b/src/containers/Node/NodeStructure/NodeStructure.tsx
@@ -31,7 +31,7 @@ function NodeStructure({nodeId, className}: NodeStructureProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = nodeApi.useGetNodeStructureQuery(
         {nodeId},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loadingStructure = isFetching && currentData === undefined;
diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx
@@ -235,6 +235,7 @@ function GroupedNodesComponent({
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
@@ -29,6 +29,7 @@ export function Operations({database}: OperationsProps) {
         {database, kind, page_size: pageSize, page_token: pageToken},
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/PDiskPage/PDiskPage.tsx b/src/containers/PDiskPage/PDiskPage.tsx
@@ -83,6 +83,7 @@ export function PDiskPage() {
     const params = pDiskParamsDefined ? {nodeId, pDiskId} : skipToken;
     const pdiskDataQuery = pDiskApi.useGetPdiskInfoQuery(params, {
         pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
     });
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
     const pDiskData = pdiskDataQuery.currentData;
diff --git a/src/containers/Storage/PaginatedStorageGroups.tsx b/src/containers/Storage/PaginatedStorageGroups.tsx
@@ -129,6 +129,7 @@ function GroupedStorageGroupsComponent({
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/Storage/PaginatedStorageNodes.tsx b/src/containers/Storage/PaginatedStorageNodes.tsx
@@ -132,6 +132,7 @@ function GroupedStorageNodesComponent({
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/StorageGroupPage/StorageGroupPage.tsx b/src/containers/StorageGroupPage/StorageGroupPage.tsx
@@ -46,6 +46,7 @@ export function StorageGroupPage() {
             : skipToken,
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
             skip: !capabilitiesLoaded,
         },
     );
diff --git a/src/containers/Tablet/Tablet.tsx b/src/containers/Tablet/Tablet.tsx
@@ -69,7 +69,7 @@ export function Tablet() {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
         {id, database: queryDatabase ?? undefined, followerId: queryFollowerId ?? undefined},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
@@ -222,6 +222,7 @@ function Channels({id, hiveId}: {id: string; hiveId: string}) {
         {id, hiveId},
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx
@@ -26,6 +26,7 @@ export function Tablets({nodeId, path, database}: TabletsProps) {
         Object.keys(params).length === 0 ? skipToken : params,
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/containers/Tenant/Diagnostics/Configs/Configs.tsx b/src/containers/Tenant/Diagnostics/Configs/Configs.tsx
@@ -93,7 +93,10 @@ export const Configs = ({database}: ConfigsProps) => {
         currentData = [],
         isLoading,
         error,
-    } = tenantApi.useGetClusterConfigQuery({database}, {pollingInterval: autoRefreshInterval});
+    } = tenantApi.useGetClusterConfigQuery(
+        {database},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
+    );
 
     const onChange = (value: string) => {
         setSearch(value || undefined, 'replaceIn');
diff --git a/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx b/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx
@@ -39,7 +39,7 @@ export const Consumers = ({path, database, type}: ConsumersProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path, database},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const loading = isFetching && currentData === undefined;
     const consumers = useTypedSelector((state) =>
diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx
@@ -69,6 +69,7 @@ export function HotKeys({path, database}: HotKeysProps) {
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
     const keyColumnsIds = schemaData?.PathDescription?.Table?.KeyColumnNames;
diff --git a/src/containers/Tenant/Diagnostics/Network/Network.tsx b/src/containers/Tenant/Diagnostics/Network/Network.tsx
@@ -41,6 +41,7 @@ export function Network({tenantName}: NetworkProps) {
 
     const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(tenantName, {
         pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
     });
     const loading = isFetching && currentData === undefined;
 
diff --git a/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx b/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx
@@ -75,7 +75,7 @@ export const TopicStats = ({path, database}: {path: string; database: string}) =
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = topicApi.useGetTopicQuery(
         {path, database},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const loading = isFetching && currentData === undefined;
     const data = useTypedSelector((state) => selectPreparedTopicStats(state, path, database));
diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx
@@ -66,7 +66,10 @@ export const Partitions = ({path, database}: PartitionsProps) => {
         currentData: partitionsData,
         isFetching: partitionsIsFetching,
         error: partitionsError,
-    } = partitionsApi.useGetPartitionsQuery(params, {pollingInterval: autoRefreshInterval});
+    } = partitionsApi.useGetPartitionsQuery(params, {
+        pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
+    });
     const partitionsLoading = partitionsIsFetching && partitionsData === undefined;
     const rawPartitions = partitionsData;
 
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx
@@ -59,6 +59,7 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
         {
             //FIXME https://github.com/ydb-platform/ydb-embedded-ui/issues/1889
             pollingInterval: healthcheckPreviewDisabled ? undefined : autoRefreshInterval,
+            skipPollingIfUnfocused: true,
             skip: healthcheckPreviewDisabled,
         },
     );
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx
@@ -67,7 +67,7 @@ export function TopNodesByCpu({tenantName, additionalNodesProps}: TopNodesByCpuP
             tablets: false,
             fieldsRequired,
         },
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx
@@ -72,7 +72,7 @@ export function TopNodesByLoad({tenantName, additionalNodesProps}: TopNodesByLoa
             tablets: false,
             fieldsRequired,
         },
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
@@ -49,7 +49,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
 
     const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
         {database: tenantName, timeFrame: 'hour', limit: TENANT_OVERVIEW_TABLES_LIMIT},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx
@@ -31,7 +31,7 @@ export const TopShards = ({tenantName, path}: TopShardsProps) => {
 
     const {currentData, isFetching, error} = topShardsApi.useGetTopShardsQuery(
         {database: tenantName, path},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx
@@ -73,7 +73,7 @@ export function TopNodesByMemory({tenantName, additionalNodesProps}: TopNodesByM
             limit: TENANT_OVERVIEW_TABLES_LIMIT,
             fieldsRequired,
         },
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const loading = isFetching && currentData === undefined;
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -40,6 +40,7 @@ export function TenantOverview({
         {path: tenantName},
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
     const tenantLoading = isFetching && tenant === undefined;
@@ -54,6 +55,7 @@ export function TenantOverview({
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
     const {Tables, Topics} =
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx
@@ -56,6 +56,7 @@ export function TopGroups({tenant}: TopGroupsProps) {
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
             skip: !capabilitiesLoaded,
         },
     );
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx
@@ -27,7 +27,7 @@ export function TopTables({database}: TopTablesProps) {
 
     const {currentData, error, isFetching} = topTablesApi.useGetTopTablesQuery(
         {database},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const loading = isFetching && currentData === undefined;
 
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts b/src/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.ts
@@ -30,6 +30,7 @@ export const useHealthcheck = (
         {database: tenantName},
         {
             pollingInterval: autorefresh,
+            skipPollingIfUnfocused: true,
         },
     );
     const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
@@ -76,7 +76,7 @@ export const TopQueriesData = ({
             sortOrder: backendSort,
             timeFrame,
         },
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
 
     const handleRowClick = (row: KeyValueRow) => {
diff --git a/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx b/src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx
@@ -82,7 +82,7 @@ export const TopShards = ({tenantName, path}: TopShardsProps) => {
             sortOrder: backendSort,
             filters,
         },
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const loading = isFetching && result === undefined;
     const data = result?.resultSets?.[0]?.result || [];
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
@@ -64,7 +64,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tenantsApi.useGetTenantsInfoQuery(
         {clusterName},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const loading = isFetching && currentData === undefined;
 
diff --git a/src/containers/VDiskPage/VDiskPage.tsx b/src/containers/VDiskPage/VDiskPage.tsx
@@ -58,6 +58,7 @@ export function VDiskPage() {
         error,
     } = vDiskApi.useGetVDiskDataQuery(params, {
         pollingInterval: autoRefreshInterval,
+        skipPollingIfUnfocused: true,
     });
     const loading = isFetching && vDiskData === undefined;
     const {NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId} = vDiskData;
diff --git a/src/containers/Versions/Versions.tsx b/src/containers/Versions/Versions.tsx
@@ -30,7 +30,7 @@ export function VersionsContainer({cluster, loading}: VersionsContainerProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isLoading: isNodesLoading} = nodesApi.useGetNodesQuery(
         {tablets: false, fieldsRequired: ['SystemState', 'SubDomainKey']},
-        {pollingInterval: autoRefreshInterval},
+        {pollingInterval: autoRefreshInterval, skipPollingIfUnfocused: true},
     );
     const versionToColor = useVersionToColorMap();
 
diff --git a/src/store/defaultStore.ts b/src/store/defaultStore.ts
@@ -1,7 +1,12 @@
+import {setupListeners} from '@reduxjs/toolkit/query';
+
 import {configureStore} from './configureStore';
 
 export const {store, history} = configureStore();
 
+// Set up listeners for RTK Query - required for features like skipPollingIfUnfocused
+setupListeners(store.dispatch);
+
 export type GetState = typeof store.getState;
 export type RootState = ReturnType<GetState>;
 export type AppDispatch = typeof store.dispatch;
diff --git a/src/store/reducers/overview/overview.ts b/src/store/reducers/overview/overview.ts
@@ -111,6 +111,7 @@ export function useGetMultiOverviewQuery({
         },
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
@@ -122,6 +123,7 @@ export function useGetMultiOverviewQuery({
         additionalPaths.length ? {paths: additionalPaths, database} : skipToken,
         {
             pollingInterval: autoRefreshInterval,
+            skipPollingIfUnfocused: true,
         },
     );
 
diff --git a/src/utils/hooks/useAutoRefreshInterval.ts b/src/utils/hooks/useAutoRefreshInterval.ts

Original file line number	Diff line number	Diff line change
`@@ -235,6 +235,7 @@ function GroupedNodesComponent({`
`235`	`235`	`},`
`236`	`236`	`{`
`237`	`237`	`pollingInterval: autoRefreshInterval,`
	`238`	`+ skipPollingIfUnfocused: true,`
`238`	`239`	`},`
`239`	`240`	`);`
`240`	`241`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ export function Operations({database}: OperationsProps) {`
`29`	`29`	`{database, kind, page_size: pageSize, page_token: pageToken},`
`30`	`30`	`{`
`31`	`31`	`pollingInterval: autoRefreshInterval,`
	`32`	`+ skipPollingIfUnfocused: true,`
`32`	`33`	`},`
`33`	`34`	`);`
`34`	`35`
Original file line number	Diff line number	Diff line change
`@@ -129,6 +129,7 @@ function GroupedStorageGroupsComponent({`
`129`	`129`	`},`
`130`	`130`	`{`
`131`	`131`	`pollingInterval: autoRefreshInterval,`
	`132`	`+ skipPollingIfUnfocused: true,`
`132`	`133`	`},`
`133`	`134`	`);`
`134`	`135`