Skip to content

Commit 4299f6b

Browse files
RaubzeugRaubzeug
committed
fix(Cluster): show loader if capabilities not loaded
1 parent d590f05 commit 4299f6b

File tree

2 files changed

+119
-98
lines changed

2 files changed

+119
-98
lines changed

‎src/components/LoaderWrapper/LoaderWrapper.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@ interface LoaderWrapperProps {
99
size?: LoaderSize;
1010
className?: string;
1111
children: React.ReactNode;
12+
delay?: number;
1213
}
1314

14-
export function LoaderWrapper({loading, size = 'm', className, children}: LoaderWrapperProps) {
15+
export function LoaderWrapper({
16+
loading,
17+
size = 'm',
18+
className,
19+
children,
20+
delay,
21+
}: LoaderWrapperProps) {
1522
if (loading) {
16-
return <Loader size={size} className={className} />;
23+
return <Loader size={size} className={className} delay={delay} />;
1724
}
1825
return children;
1926
}

‎src/containers/Cluster/Cluster.tsx‎

Lines changed: 110 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@ import {StringParam, useQueryParams} from 'use-query-params';
88
import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
99
import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
1010
import {InternalLink} from '../../components/InternalLink';
11+
import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
1112
import routes, {getLocationObjectFromHref} from '../../routes';
12-
import {useClusterDashboardAvailable} from '../../store/reducers/capabilities/hooks';
13+
import {
14+
useCapabilitiesLoaded,
15+
useClusterDashboardAvailable,
16+
} from '../../store/reducers/capabilities/hooks';
1317
import {
1418
clusterApi,
1519
selectClusterTabletsWithFqdn,
@@ -56,6 +60,7 @@ export function Cluster({
5660
additionalVersionsProps,
5761
}: ClusterProps) {
5862
const container = React.useRef<HTMLDivElement>(null);
63+
const capabilitiesLoaded = useCapabilitiesLoaded();
5964
const isClusterDashboardAvailable = useClusterDashboardAvailable();
6065

6166
const dispatch = useTypedDispatch();
@@ -119,107 +124,116 @@ export function Cluster({
119124
);
120125

121126
return (
122-
<div className={b()} ref={container}>
123-
<Helmet
124-
defaultTitle={`${clusterTitle} — YDB Monitoring`}
125-
titleTemplate={`%s — ${clusterTitle} — YDB Monitoring`}
126-
>
127-
{activeTab ? <title>{activeTab.title}</title> : null}
128-
</Helmet>
129-
<div className={b('header')}>{getClusterTitle()}</div>
130-
<div className={b('sticky-wrapper')}>
131-
<AutoRefreshControl className={b('auto-refresh-control')} />
132-
</div>
133-
{isClusterDashboardAvailable && (
134-
<ClusterDashboard
135-
cluster={cluster}
136-
groupStats={groupsStats}
137-
loading={infoLoading}
138-
error={clusterError || cluster?.error}
139-
/>
140-
)}
141-
<div className={b('tabs-sticky-wrapper')}>
142-
<Tabs
143-
size="l"
144-
allowNotSelected={true}
145-
activeTab={activeTabId}
146-
items={clusterTabs}
147-
wrapTo={({id}, node) => {
148-
const path = getClusterPath(id as ClusterTab, {clusterName, backend});
149-
return (
150-
<InternalLink
151-
to={path}
152-
key={id}
153-
onClick={() => {
154-
dispatch(updateDefaultClusterTab(id));
155-
}}
156-
>
157-
{node}
158-
</InternalLink>
159-
);
160-
}}
161-
/>
162-
</div>
163-
<Switch>
164-
<Route
165-
path={
166-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.overview)).pathname
167-
}
127+
<LoaderWrapper loading={!capabilitiesLoaded} size="l" delay={0}>
128+
<div className={b()} ref={container}>
129+
<Helmet
130+
defaultTitle={`${clusterTitle} — YDB Monitoring`}
131+
titleTemplate={`%s — ${clusterTitle} — YDB Monitoring`}
168132
>
169-
<ClusterInfo
133+
{activeTab ? <title>{activeTab.title}</title> : null}
134+
</Helmet>
135+
<div className={b('header')}>{getClusterTitle()}</div>
136+
<div className={b('sticky-wrapper')}>
137+
<AutoRefreshControl className={b('auto-refresh-control')} />
138+
</div>
139+
{isClusterDashboardAvailable && (
140+
<ClusterDashboard
170141
cluster={cluster}
171-
versionToColor={versionToColor}
142+
groupStats={groupsStats}
172143
loading={infoLoading}
173-
error={clusterError}
174-
additionalClusterProps={additionalClusterProps}
144+
error={clusterError || cluster?.error}
175145
/>
176-
</Route>
177-
<Route
178-
path={
179-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets)).pathname
180-
}
181-
>
182-
<div className={b('tablets')}>
183-
<TabletsTable
146+
)}
147+
<div className={b('tabs-sticky-wrapper')}>
148+
<Tabs
149+
size="l"
150+
allowNotSelected={true}
151+
activeTab={activeTabId}
152+
items={clusterTabs}
153+
wrapTo={({id}, node) => {
154+
const path = getClusterPath(id as ClusterTab, {clusterName, backend});
155+
return (
156+
<InternalLink
157+
to={path}
158+
key={id}
159+
onClick={() => {
160+
dispatch(updateDefaultClusterTab(id));
161+
}}
162+
>
163+
{node}
164+
</InternalLink>
165+
);
166+
}}
167+
/>
168+
</div>
169+
<Switch>
170+
<Route
171+
path={
172+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.overview))
173+
.pathname
174+
}
175+
>
176+
<ClusterInfo
177+
cluster={cluster}
178+
versionToColor={versionToColor}
184179
loading={infoLoading}
185-
tablets={clusterTablets}
186-
className={b('tablets-table')}
180+
error={clusterError}
181+
additionalClusterProps={additionalClusterProps}
187182
/>
188-
</div>
189-
</Route>
190-
<Route
191-
path={
192-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants)).pathname
193-
}
194-
>
195-
<Tenants additionalTenantsProps={additionalTenantsProps} />
196-
</Route>
197-
<Route
198-
path={getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname}
199-
>
200-
<Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
201-
</Route>
202-
<Route
203-
path={
204-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname
205-
}
206-
>
207-
<PaginatedStorage parentRef={container} />
208-
</Route>
209-
<Route
210-
path={
211-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname
212-
}
213-
>
214-
<Versions versionToColor={versionToColor} cluster={cluster} />
215-
</Route>
216-
<Route
217-
render={() => (
218-
<Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
219-
)}
220-
/>
221-
</Switch>
222-
</div>
183+
</Route>
184+
<Route
185+
path={
186+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
187+
.pathname
188+
}
189+
>
190+
<div className={b('tablets')}>
191+
<TabletsTable
192+
loading={infoLoading}
193+
tablets={clusterTablets}
194+
className={b('tablets-table')}
195+
/>
196+
</div>
197+
</Route>
198+
<Route
199+
path={
200+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
201+
.pathname
202+
}
203+
>
204+
<Tenants additionalTenantsProps={additionalTenantsProps} />
205+
</Route>
206+
<Route
207+
path={
208+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
209+
}
210+
>
211+
<Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
212+
</Route>
213+
<Route
214+
path={
215+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
216+
.pathname
217+
}
218+
>
219+
<PaginatedStorage parentRef={container} />
220+
</Route>
221+
<Route
222+
path={
223+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
224+
.pathname
225+
}
226+
>
227+
<Versions versionToColor={versionToColor} cluster={cluster} />
228+
</Route>
229+
<Route
230+
render={() => (
231+
<Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
232+
)}
233+
/>
234+
</Switch>
235+
</div>
236+
</LoaderWrapper>
223237
);
224238
}
225239

0 commit comments

Comments
 (0)