Skip to content

feat: move some pages to rtk query #799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 22, 2024
Merged

feat: move some pages to rtk query #799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f57b4f2
feat: move some pages to rtk query
ValeraS Apr 18, 2024
b005333
fix: use default polling interval
ValeraS Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Illustration/Illustration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,5 @@ export const Illustration = ({name, className, ...props}: IllustrationProps) =>
}
}, [srcGetter]);

return <img alt={name} src={src} className={b(null, className)} {...props} />;
return src ? <img alt={name} src={src} className={b(null, className)} {...props} /> : null;
};
44 changes: 17 additions & 27 deletions src/containers/Cluster/Cluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {Redirect, Route, Switch, useLocation, useRouteMatch} from 'react-router'
import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
import {InternalLink} from '../../components/InternalLink';
import routes, {getLocationObjectFromHref} from '../../routes';
import {getClusterInfo, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster';
import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
import {clusterApi, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster';
import {clusterNodesApi} from '../../store/reducers/clusterNodes/clusterNodes';
import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
import type {
AdditionalClusterProps,
Expand All @@ -18,8 +18,8 @@ import type {
AdditionalVersionsProps,
} from '../../types/additionalProps';
import {cn} from '../../utils/cn';
import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
import {useAutofetcher, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {CLUSTER_DEFAULT_TITLE, DEFAULT_POLLING_INTERVAL} from '../../utils/constants';
import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
import {NodesWrapper} from '../Nodes/NodesWrapper';
import {StorageWrapper} from '../Storage/StorageWrapper';
Expand Down Expand Up @@ -57,34 +57,24 @@ function Cluster({
const queryParams = qs.parse(location.search, {
ignoreQueryPrefix: true,
});
const {clusterName} = queryParams;
const {clusterName, backend} = queryParams;

const {
data: cluster = {},
loading: clusterLoading,
wasLoaded: clusterWasLoaded,
error: clusterError,
groupsStats,
} = useTypedSelector((state) => state.cluster);
const {
nodes,
loading: nodesLoading,
wasLoaded: nodesWasLoaded,
} = useTypedSelector((state) => state.clusterNodes);
data: {clusterData: cluster = {}, groupsStats} = {},
isLoading: isClusterLoading,
error,
} = clusterApi.useGetClusterInfoQuery(clusterName ? String(clusterName) : undefined, {
pollingInterval: DEFAULT_POLLING_INTERVAL,
});

const {Name} = cluster;
const clusterError = error && typeof error === 'object' ? error : undefined;
Copy link
Contributor

@Raubzeug Raubzeug Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it possible to make types for error on RTQ level so it wouldn't be unknown?

Copy link
Collaborator Author

@ValeraS ValeraS Apr 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's possible, but error is really unknown)


const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
const {data: nodes = [], isLoading: isNodesLoading} =
clusterNodesApi.useGetClusterNodesQuery(undefined);

React.useEffect(() => {
dispatch(getClusterNodes());
}, [dispatch]);
const infoLoading = isClusterLoading || isNodesLoading;

useAutofetcher(
() => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)),
[dispatch, clusterName],
true,
);
const {Name} = cluster;

React.useEffect(() => {
dispatch(setHeaderBreadcrumbs('cluster', {}));
Expand Down Expand Up @@ -138,7 +128,7 @@ function Cluster({
activeTab={activeTabId}
items={clusterTabs}
wrapTo={({id}, node) => {
const path = getClusterPath(id as ClusterTab, queryParams);
const path = getClusterPath(id as ClusterTab, {clusterName, backend});
return (
<InternalLink
to={path}
Expand Down
12 changes: 4 additions & 8 deletions src/containers/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import {useHistory, useLocation} from 'react-router';
import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
import {parseQuery} from '../../routes';
import {backend, customBackend} from '../../store';
import {getClusterInfo} from '../../store/reducers/cluster/cluster';
import {clusterApi} from '../../store/reducers/cluster/cluster';
import {cn} from '../../utils/cn';
import {DEVELOPER_UI_TITLE} from '../../utils/constants';
import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {useTypedSelector} from '../../utils/hooks';

import type {RawBreadcrumbItem} from './breadcrumbs';
import {getBreadcrumbs} from './breadcrumbs';
Expand All @@ -31,24 +31,20 @@ interface HeaderProps {
}

function Header({mainPage}: HeaderProps) {
const dispatch = useTypedDispatch();
const history = useHistory();
const location = useLocation();

const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
const {data} = useTypedSelector((state) => state.cluster);

const queryParams = parseQuery(location);

const clusterNameFromQuery = queryParams.clusterName?.toString();
const {currentData: {clusterData: data} = {}} =
clusterApi.useGetClusterInfoQuery(clusterNameFromQuery);

const clusterNameFinal = data?.Name || clusterNameFromQuery;

React.useEffect(() => {
dispatch(getClusterInfo(clusterNameFromQuery));
}, [dispatch, clusterNameFromQuery]);

const breadcrumbItems = React.useMemo(() => {
const rawBreadcrumbs: RawBreadcrumbItem[] = [];
let options = pageBreadcrumbsOptions;
Expand Down
92 changes: 43 additions & 49 deletions src/containers/Nodes/Nodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';

import DataTable from '@gravity-ui/react-data-table';
import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
import {skipToken} from '@reduxjs/toolkit/query';

import {EntitiesCount} from '../../components/EntitiesCount';
import {AccessDenied} from '../../components/Errors/403';
Expand All @@ -12,28 +13,24 @@ import {Search} from '../../components/Search';
import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
import {UptimeFilter} from '../../components/UptimeFIlter';
import {
getComputeNodes,
getNodes,
resetNodesState,
setDataWasNotLoaded,
setNodesUptimeFilter,
nodesApi,
setInitialState,
setSearchValue,
setSort,
setUptimeFilter,
} from '../../store/reducers/nodes/nodes';
import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
import {filterNodes} from '../../store/reducers/nodes/selectors';
import type {NodesSortParams} from '../../store/reducers/nodes/types';
import {ProblemFilterValues, changeFilter} from '../../store/reducers/settings/settings';
import type {ProblemFilterValue} from '../../store/reducers/settings/types';
import type {AdditionalNodesProps} from '../../types/additionalProps';
import {cn} from '../../utils/cn';
import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
import {
useAutofetcher,
useSetting,
useTableSort,
useTypedDispatch,
useTypedSelector,
} from '../../utils/hooks';
DEFAULT_POLLING_INTERVAL,
DEFAULT_TABLE_SETTINGS,
USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
} from '../../utils/constants';
import {useSetting, useTableSort, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {
NodesUptimeFilterValues,
isSortableNodesProperty,
Expand All @@ -57,47 +54,28 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {

const isClusterNodes = !path;

// Since Nodes component is used in several places,
// we need to reset filters, searchValue and loading state
// in nodes reducer when path changes
React.useEffect(() => {
dispatch(resetNodesState());
}, [dispatch, path]);

const {
wasLoaded,
loading,
error,
nodesUptimeFilter,
uptimeFilter,
searchValue,
sortOrder = ASCENDING,
sortValue = 'NodeId',
totalNodes,
} = useTypedSelector((state) => state.nodes);
const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
const {autorefresh} = useTypedSelector((state) => state.schema);

const nodes = useTypedSelector(selectFilteredNodes);

const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);

const fetchNodes = React.useCallback(
(isBackground: boolean) => {
if (!isBackground) {
dispatch(setDataWasNotLoaded());
}
const useAutoRefresh = isClusterNodes ? true : autorefresh;
// If there is no path, it's cluster Nodes tab
const useGetComputeNodes = path && !useNodesEndpoint;
const nodesQuery = nodesApi.useGetNodesQuery(useGetComputeNodes ? skipToken : {path}, {
pollingInterval: useAutoRefresh ? DEFAULT_POLLING_INTERVAL : 0,
});
const computeQuery = nodesApi.useGetComputeNodesQuery(useGetComputeNodes ? {path} : skipToken, {
pollingInterval: useAutoRefresh ? DEFAULT_POLLING_INTERVAL : 0,
});

// If there is no path, it's cluster Nodes tab
if (path && !useNodesEndpoint) {
dispatch(getComputeNodes({path}));
} else {
dispatch(getNodes({path}));
}
},
[dispatch, path, useNodesEndpoint],
);

useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
const {currentData: data, isLoading, error} = useGetComputeNodes ? computeQuery : nodesQuery;

const [sort, handleSort] = useTableSort({sortValue, sortOrder}, (sortParams) =>
dispatch(setSort(sortParams as NodesSortParams)),
Expand All @@ -112,9 +90,25 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
};

const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
dispatch(setNodesUptimeFilter(value));
dispatch(setUptimeFilter(value));
};

// Since Nodes component is used in several places,
// we need to reset filters, searchValue
// in nodes reducer when path changes
React.useEffect(() => {
return () => {
// Clean data on component unmount
dispatch(setInitialState());
};
}, [dispatch, path]);

const nodes = React.useMemo(() => {
return filterNodes(data?.Nodes, {searchValue, uptimeFilter, problemFilter});
}, [data, searchValue, uptimeFilter, problemFilter]);

const totalNodes = data?.TotalNodes || 0;

const renderControls = () => {
return (
<React.Fragment>
Expand All @@ -125,12 +119,12 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
value={searchValue}
/>
<ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
<UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
<UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
<EntitiesCount
total={totalNodes}
current={nodes?.length || 0}
label={'Nodes'}
loading={loading && !wasLoaded}
loading={isLoading}
/>
</React.Fragment>
);
Expand All @@ -148,7 +142,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
if (nodes && nodes.length === 0) {
if (
problemFilter !== ProblemFilterValues.ALL ||
nodesUptimeFilter !== NodesUptimeFilterValues.All
uptimeFilter !== NodesUptimeFilterValues.All
) {
return <Illustration name="thumbsUp" width="200" />;
}
Expand All @@ -169,7 +163,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
};

if (error) {
if (error.status === 403) {
if ((error as any).status === 403) {
return <AccessDenied />;
}
return <ResponseError error={error} />;
Expand All @@ -178,7 +172,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
return (
<TableWithControlsLayout>
<TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
<TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
<TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
{renderTable()}
</TableWithControlsLayout.Table>
</TableWithControlsLayout>
Expand Down
Loading