Skip to content

Commit d38f0f0

Browse files
ValeraSValeraS
authored
feat: show cached data on errors (#1095)
1 parent d0ef39c commit d38f0f0

File tree

23 files changed

+228
-208
lines changed

23 files changed

+228
-208
lines changed

‎src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ interface ClusterInfoProps {
199199
}
200200

201201
export const ClusterInfo = ({
202-
cluster = {},
202+
cluster,
203203
versionsValues = [],
204204
groupsStats = {},
205205
loading,
@@ -216,7 +216,7 @@ export const ClusterInfo = ({
216216

217217
const {info = [], links = []} = additionalClusterProps;
218218

219-
const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
219+
const clusterInfo = getInfo(cluster ?? {}, versionsValues, groupsStats, info, [
220220
{title: DEVELOPER_UI_TITLE, url: internalLink},
221221
...links,
222222
]);
@@ -226,15 +226,16 @@ export const ClusterInfo = ({
226226
return <InfoViewerSkeleton className={b('skeleton')} rows={9} />;
227227
}
228228

229-
if (error) {
230-
return <ResponseError error={error} className={b('error')} />;
229+
if (error && !cluster) {
230+
return null;
231231
}
232232

233233
return <InfoViewer dots={true} info={clusterInfo} />;
234234
};
235235

236236
return (
237237
<div className={b()}>
238+
{error ? <ResponseError error={error} className={b('error')} /> : null}
238239
<div className={b('info')}>{getContent()}</div>
239240
</div>
240241
);

‎src/containers/Heatmap/Heatmap.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,11 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
119119
const renderContent = () => {
120120
const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
121121

122+
let content;
123+
if (!error || currentData) {
124+
content = heatmap ? renderHeatmapCanvas() : renderHistogram();
125+
}
126+
122127
return (
123128
<div className={b()}>
124129
<div className={b('filters')}>
@@ -158,7 +163,8 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
158163
</div>
159164
</div>
160165
</div>
161-
{heatmap ? renderHeatmapCanvas() : renderHistogram()}
166+
{error ? <ResponseError error={error} /> : null}
167+
{content}
162168
</div>
163169
);
164170
};
@@ -167,9 +173,5 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
167173
return <Loader />;
168174
}
169175

170-
if (error) {
171-
return <ResponseError error={error} />;
172-
}
173-
174176
return renderContent();
175177
};

‎src/containers/Node/Node.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,8 @@
5353
height: 100%;
5454
padding: 20px;
5555
}
56+
57+
&__error {
58+
padding: 0 20px;
59+
}
5660
}

‎src/containers/Node/Node.tsx

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -132,31 +132,33 @@ export function Node(props: NodeProps) {
132132

133133
if (loading) {
134134
return <Loader size="l" />;
135-
} else if (error) {
135+
}
136+
137+
if (node) {
138+
return (
139+
<div className={b(null, props.className)} ref={container}>
140+
<Helmet
141+
titleTemplate={`%s — ${node.Host} — YDB Monitoring`}
142+
defaultTitle={`${node.Host} — YDB Monitoring`}
143+
>
144+
<title>{activeTabVerified.title}</title>
145+
</Helmet>
146+
147+
<BasicNodeViewer
148+
node={node}
149+
additionalNodesProps={props.additionalNodesProps}
150+
className={b('header')}
151+
/>
152+
{error ? <ResponseError error={error} className={b('error')} /> : null}
153+
{renderTabs()}
154+
<div className={b('content')}>{renderTabContent()}</div>
155+
</div>
156+
);
157+
}
158+
159+
if (error) {
136160
return <ResponseError error={error} />;
137-
} else {
138-
if (node) {
139-
return (
140-
<div className={b(null, props.className)} ref={container}>
141-
<Helmet
142-
titleTemplate={`%s — ${node.Host} — YDB Monitoring`}
143-
defaultTitle={`${node.Host} — YDB Monitoring`}
144-
>
145-
<title>{activeTabVerified.title}</title>
146-
</Helmet>
147-
148-
<BasicNodeViewer
149-
node={node}
150-
additionalNodesProps={props.additionalNodesProps}
151-
className={b('header')}
152-
/>
153-
154-
{renderTabs()}
155-
156-
<div className={b('content')}>{renderTabContent()}</div>
157-
</div>
158-
);
159-
}
160-
return <div className="error">no node data</div>;
161161
}
162+
163+
return <div className="error">no node data</div>;
162164
}

‎src/containers/Node/NodeStructure/NodeStructure.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
@include flex-container();
1111
@include body-2-typography();
1212

13+
&__error {
14+
padding: 20px 20px 0;
15+
}
16+
1317
&__pdisk {
1418
display: flex;
1519
flex-direction: column;

‎src/containers/Node/NodeStructure/NodeStructure.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,15 @@ function NodeStructure({nodeId, className}: NodeStructureProps) {
100100
if (loadingStructure) {
101101
return <Loader size="m" />;
102102
}
103-
if (error) {
104-
return <ResponseError error={error} />;
103+
if (error && !currentData) {
104+
return null;
105105
}
106106
return renderStructure();
107107
};
108108

109109
return (
110110
<div className={b()} ref={scrollContainerRef}>
111+
{error ? <ResponseError error={error} className={b('error')} /> : null}
111112
<div className={className}>{renderContent()}</div>
112113
</div>
113114
);

‎src/containers/Nodes/Nodes.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {StringParam, useQueryParams} from 'use-query-params';
66

77
import {EntitiesCount} from '../../components/EntitiesCount';
88
import {AccessDenied} from '../../components/Errors/403';
9+
import {isAccessError} from '../../components/Errors/PageError/PageError';
910
import {ResponseError} from '../../components/Errors/ResponseError';
1011
import {Illustration} from '../../components/Illustration';
1112
import {ProblemFilter} from '../../components/ProblemFilter';
@@ -116,7 +117,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
116117
<UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
117118
<EntitiesCount
118119
total={totalNodes}
119-
current={nodes?.length || 0}
120+
current={nodes.length}
120121
label={'Nodes'}
121122
loading={isLoading}
122123
/>
@@ -133,7 +134,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
133134
return {...column, sortable: isSortableNodesProperty(column.name)};
134135
});
135136

136-
if (nodes && nodes.length === 0) {
137+
if (nodes.length === 0) {
137138
if (
138139
problemFilter !== ProblemFilterValues.ALL ||
139140
uptimeFilter !== NodesUptimeFilterValues.All
@@ -156,18 +157,16 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
156157
);
157158
};
158159

159-
if (error) {
160-
if ((error as any).status === 403) {
161-
return <AccessDenied />;
162-
}
163-
return <ResponseError error={error} />;
160+
if (isAccessError(error)) {
161+
return <AccessDenied />;
164162
}
165163

166164
return (
167165
<TableWithControlsLayout>
168166
<TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
167+
{error ? <ResponseError error={error} /> : null}
169168
<TableWithControlsLayout.Table loading={isLoading}>
170-
{renderTable()}
169+
{data ? renderTable() : null}
171170
</TableWithControlsLayout.Table>
172171
</TableWithControlsLayout>
173172
);

‎src/containers/PDiskPage/PDiskPage.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {z} from 'zod';
1010
import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
1111
import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
1212
import {DiskPageTitle} from '../../components/DiskPageTitle/DiskPageTitle';
13+
import {ResponseError} from '../../components/Errors/ResponseError';
1314
import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
1415
import {InternalLink} from '../../components/InternalLink/InternalLink';
1516
import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
@@ -206,12 +207,20 @@ export function PDiskPage() {
206207
}
207208
};
208209

210+
const renderError = () => {
211+
if (!pdiskDataQuery.error) {
212+
return null;
213+
}
214+
return <ResponseError error={pdiskDataQuery.error} />;
215+
};
216+
209217
return (
210218
<div className={pdiskPageCn(null)}>
211219
{renderHelmet()}
212220
{renderPageMeta()}
213221
{renderPageTitle()}
214222
{renderControls()}
223+
{renderError()}
215224
{renderInfo()}
216225
{renderTabs()}
217226
{renderTabsContent()}

‎src/containers/Storage/Storage.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import {ArrayParam, StringParam, useQueryParams, withDefault} from 'use-query-params';
44

55
import {AccessDenied} from '../../components/Errors/403';
6+
import {isAccessError} from '../../components/Errors/PageError/PageError';
67
import {ResponseError} from '../../components/Errors/ResponseError';
78
import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
89
import type {NodesSortParams} from '../../store/reducers/nodes/types';
@@ -214,19 +215,16 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
214215
);
215216
};
216217

217-
if (error) {
218-
if ((error as any).status === 403) {
219-
return <AccessDenied position="left" />;
220-
}
221-
222-
return <ResponseError error={error} />;
218+
if (isAccessError(error)) {
219+
return <AccessDenied position="left" />;
223220
}
224221

225222
return (
226223
<TableWithControlsLayout>
227224
<TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
225+
{error ? <ResponseError error={error} /> : null}
228226
<TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
229-
{renderDataTable()}
227+
{currentData ? renderDataTable() : null}
230228
</TableWithControlsLayout.Table>
231229
</TableWithControlsLayout>
232230
);

‎src/containers/Tablet/Tablet.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const Tablet = () => {
8888
return <Loader size="l" />;
8989
}
9090

91-
if (error) {
91+
if (error && !currentData) {
9292
return <ResponseError error={error} />;
9393
}
9494

@@ -111,6 +111,7 @@ export const Tablet = () => {
111111

112112
return (
113113
<div className={b()}>
114+
{error ? <ResponseError error={error} /> : null}
114115
<div className={b('pane-wrapper')}>
115116
<div className={b('left-pane')}>
116117
<ul className={b('links')}>{externalLinks.map(renderExternalLinks)}</ul>

0 commit comments

Comments
 (0)