feat: use rtk query (#795)

Author: ValeraS

src/components/Errors/ResponseError/ResponseError.tsx

@@ -1,8 +1,7 @@
-import type {IResponseError} from '../../../types/api/error';
 import i18n from '../i18n';
 
 interface ResponseErrorProps {
-    error?: IResponseError;
+    error?: unknown;
     className?: string;
     defaultMessage?: string;
 }
@@ -12,5 +11,13 @@ export const ResponseError = ({
     className,
     defaultMessage = i18n('responseError.defaultMessage'),
 }: ResponseErrorProps) => {
-    return <div className={`error ${className}`}>{error?.statusText || defaultMessage}</div>;
+    let statusText = '';
+    if (error && typeof error === 'object') {
+        if ('statusText' in error && typeof error.statusText === 'string') {
+            statusText = error.statusText;
+        } else if ('message' in error && typeof error.message === 'string') {
+            statusText = error.message;
+        }
+    }
+    return <div className={`error ${className}`}>{statusText || defaultMessage}</div>;
 };

src/containers/AppWithClusters/useClusterData.ts

@@ -1,28 +1,25 @@
+import React from 'react';
+
 import {useLocation} from 'react-router';
 
 import {parseQuery} from '../../routes';
-import {selectClusterInfo} from '../../store/reducers/clusters/selectors';
+import {clustersApi} from '../../store/reducers/clusters/clusters';
 import {getAdditionalNodesProps} from '../../utils/additionalProps';
 import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
-import {useClustersList} from '../Clusters/useClustersList';
+import {useSetting} from '../../utils/hooks';
 
 export function useClusterData() {
-    useClustersList();
     const location = useLocation();
+    const {clusterName} = parseQuery(location);
 
-    const queryParams = parseQuery(location);
+    const {data} = clustersApi.useGetClustersListQuery(undefined);
 
-    const {clusterName} = queryParams;
+    const info = React.useMemo(() => {
+        const clusters = data || [];
+        return clusters.find((cluster) => cluster.name === clusterName);
+    }, [data, clusterName]);
 
-    const {
-        solomon: monitoring,
-        balancer,
-        versions,
-        cluster,
-    } = useTypedSelector((state) =>
-        selectClusterInfo(state, typeof clusterName === 'string' ? clusterName : ''),
-    );
+    const {solomon: monitoring, balancer, versions, cluster} = info || {};
 
     const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
 

src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -123,11 +123,12 @@ const getInfo = (
     }
 
     if (cluster.SystemTablets) {
+        const tablets = cluster.SystemTablets.slice(0).sort(compareTablets);
         info.push({
             label: i18n('tablets'),
             value: (
                 <div className={b('system-tablets')}>
-                    {cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (
+                    {tablets.map((tablet, tabletIndex) => (
                         <Tablet key={tabletIndex} tablet={tablet} />
                     ))}
                 </div>
@@ -226,7 +227,7 @@ export const ClusterInfo = ({
         }
 
         if (error) {
-            <ResponseError error={error} className={b('error')} />;
+            return <ResponseError error={error} className={b('error')} />;
         }
 
         return <InfoViewer dots={true} info={clusterInfo} />;

src/containers/Clusters/Clusters.scss

@@ -1,12 +1,12 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .clusters {
     overflow: auto;
 
     padding-top: 15px;
 
-    @include body-2-typography();
-    @include flex-container();
+    @include mixins.body-2-typography();
+    @include mixins.flex-container();
 
     &__cluster {
         display: flex;
@@ -128,7 +128,7 @@
 
     &__text {
         color: var(--g-color-text-primary);
-        @include body-2-typography();
+        @include mixins.body-2-typography();
 
         &::first-letter {
             color: var(--g-color-text-danger);
@@ -145,13 +145,13 @@
         overflow: auto;
 
         padding-left: 5px;
-        @include flex-container();
+        @include mixins.flex-container();
     }
 
     &__table-content {
         overflow: auto;
 
-        @include freeze-nth-column(1);
+        @include mixins.freeze-nth-column(1);
     }
     &__balancer-cell {
         display: flex;
@@ -173,4 +173,9 @@
         display: flex;
         align-items: center;
     }
+
+    &__error {
+        margin-left: 15px;
+        @include mixins.body-2-typography();
+    }
 }

src/containers/Clusters/Clusters.tsx

@@ -4,22 +4,21 @@ import DataTable from '@gravity-ui/react-data-table';
 import {Select, TableColumnSetup} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
+import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
 import {Search} from '../../components/Search';
-import {changeClustersFilters, fetchClustersList} from '../../store/reducers/clusters/clusters';
+import {changeClustersFilters, clustersApi} from '../../store/reducers/clusters/clusters';
 import {
+    aggregateClustersInfo,
+    filterClusters,
     selectClusterNameFilter,
-    selectClustersAggregation,
-    selectClustersList,
-    selectFilteredClusters,
-    selectLoadingFlag,
     selectServiceFilter,
     selectStatusFilter,
     selectVersionFilter,
-    selectVersions,
 } from '../../store/reducers/clusters/selectors';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {getMinorVersion} from '../../utils/versions';
 
 import {ClustersStatistics} from './ClustersStatistics';
 import {CLUSTERS_COLUMNS} from './columns';
@@ -37,23 +36,16 @@ import {useSelectedColumns} from './useSelectedColumns';
 import './Clusters.scss';
 
 export function Clusters() {
+    const query = clustersApi.useGetClustersListQuery(undefined, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+
     const dispatch = useTypedDispatch();
 
-    const loading = useTypedSelector(selectLoadingFlag);
-    const clusters = useTypedSelector(selectClustersList);
-    const filteredClusters = useTypedSelector(selectFilteredClusters);
-    const aggregation = useTypedSelector(selectClustersAggregation);
     const clusterName = useTypedSelector(selectClusterNameFilter);
     const status = useTypedSelector(selectStatusFilter);
     const service = useTypedSelector(selectServiceFilter);
     const version = useTypedSelector(selectVersionFilter);
-    const versions = useTypedSelector(selectVersions);
-
-    const fetchData = React.useCallback(() => {
-        dispatch(fetchClustersList());
-    }, [dispatch]);
-
-    useAutofetcher(fetchData, [fetchData], true);
 
     const changeStatus = (value: string[]) => {
         dispatch(changeClustersFilters({status: value}));
@@ -76,24 +68,41 @@ export function Clusters() {
         [COLUMNS_NAMES.TITLE],
     );
 
-    const servicesToSelect = React.useMemo(() => {
+    const clusters = query.data;
+
+    const {servicesToSelect, versions} = React.useMemo(() => {
         const clustersServices = new Set<string>();
+        const uniqVersions = new Set<string>();
 
-        clusters.forEach((cluster) => {
+        const clusterList = clusters ?? [];
+        clusterList.forEach((cluster) => {
             if (cluster.service) {
                 clustersServices.add(cluster.service);
             }
+            cluster.cluster?.Versions?.forEach((v) => {
+                uniqVersions.add(getMinorVersion(v));
+            });
         });
 
-        return Array.from(clustersServices).map((clusterService) => {
-            return {
-                value: clusterService,
-                content: clusterService,
-            };
-        });
+        return {
+            servicesToSelect: Array.from(clustersServices).map((value) => ({
+                value,
+                content: value,
+            })),
+            versions: Array.from(uniqVersions).map((value) => ({value, content: value})),
+        };
     }, [clusters]);
 
-    if (loading && !clusters.length) {
+    const filteredClusters = React.useMemo(() => {
+        return filterClusters(clusters ?? [], {clusterName, status, service, version});
+    }, [clusterName, clusters, service, status, version]);
+
+    const aggregation = React.useMemo(
+        () => aggregateClustersInfo(filteredClusters),
+        [filteredClusters],
+    );
+
+    if (query.isLoading) {
         return <Loader size="l" />;
     }
 
@@ -162,6 +171,7 @@ export function Clusters() {
                     />
                 </div>
             </div>
+            {query.isError ? <ResponseError error={query.error} className={b('error')} /> : null}
             <div className={b('table-wrapper')}>
                 <div className={b('table-content')}>
                     <DataTable

src/containers/Clusters/useClustersList.ts

@@ -513,8 +513,10 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     }
 
     // used if not single cluster mode
-    getClustersList() {
-        return this.get<MetaClusters>(`${META_BACKEND || ''}/meta/clusters`, null);
+    getClustersList(_?: never, {signal}: {signal?: AbortSignal} = {}) {
+        return this.get<MetaClusters>(`${META_BACKEND || ''}/meta/clusters`, null, {
+            requestConfig: {signal},
+        });
     }
 }
 

src/services/api.ts

@@ -1,5 +1,5 @@
 import {configureStore as configureReduxStore} from '@reduxjs/toolkit';
-import type {Action, Reducer, UnknownAction} from '@reduxjs/toolkit';
+import type {Action, Dispatch, Middleware, Reducer, UnknownAction} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {createBrowserHistory} from 'history';
 import {listenForHistoryChange} from 'redux-location-state';
@@ -8,16 +8,18 @@ import {createApi} from '../services/api';
 
 import {getUrlData} from './getUrlData';
 import rootReducer from './reducers';
+import {api as storeApi} from './reducers/api';
 import {UPDATE_REF} from './reducers/tooltip';
 import getLocationMiddleware from './state-url-mapping';
 
 export let backend: string | undefined, basename: string, clusterName: string | undefined;
 
-function _configureStore<S = any, A extends Action = UnknownAction, P = S>(
-    aRootReducer: Reducer<S, A, P>,
-    history: History,
-    preloadedState: P,
-) {
+function _configureStore<
+    S = any,
+    A extends Action = UnknownAction,
+    P = S,
+    M extends Middleware<{}, S, Dispatch> = any,
+>(aRootReducer: Reducer<S, A, P>, history: History, preloadedState: P, middleware: M[]) {
     const {locationMiddleware, reducersWithLocation} = getLocationMiddleware(history, aRootReducer);
 
     const store = configureReduxStore({
@@ -30,7 +32,7 @@ function _configureStore<S = any, A extends Action = UnknownAction, P = S>(
                     ignoredPaths: ['tooltip.currentHoveredRef'],
                     ignoredActions: [UPDATE_REF],
                 },
-            }).concat(locationMiddleware),
+            }).concat(locationMiddleware, ...middleware),
     });
 
     return store;
@@ -54,7 +56,9 @@ export function configureStore({
     }));
     const history = createBrowserHistory({basename});
 
-    const store = _configureStore(aRootReducer, history, {singleClusterMode});
+    const store = _configureStore(aRootReducer, history, {singleClusterMode}, [
+        storeApi.middleware,
+    ]);
     listenForHistoryChange(store, history);
 
     // Interceptor to process OIDC auth

src/store/configureStore.ts

@@ -0,0 +1,28 @@
+import type {BaseQueryFn} from '@reduxjs/toolkit/query';
+import {createApi} from '@reduxjs/toolkit/query/react';
+
+export const api = createApi({
+    baseQuery: fakeBaseQuery(),
+    /**
+     * This api has endpoints injected in adjacent files,
+     * which is why no endpoints are shown below.
+     */
+    endpoints: () => ({}),
+});
+
+export const _NEVER = Symbol();
+type NEVER = typeof _NEVER;
+
+/**
+ * Creates a "fake" baseQuery to be used if your api *only* uses the `queryFn` definition syntax.
+ * This also allows you to specify a specific error type to be shared by all your `queryFn` definitions.
+ *
+ * Can't use fakeBaseQuery from @reduxjs/toolkit/query, because of error
+ */
+function fakeBaseQuery<ErrorType>(): BaseQueryFn<void, NEVER, ErrorType, {}> {
+    return function () {
+        throw new Error(
+            'When using `fakeBaseQuery`, all queries & mutations must use the `queryFn` definition syntax.',
+        );
+    };
+}