feat: show cached data on errors

ydb-platform · Jul 31, 2024 · d468f58 · d468f58
1 parent 73c53dd
commit d468f58
Show file tree

Hide file tree

Showing 23 changed files with 228 additions and 208 deletions.
diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
@@ -199,7 +199,7 @@ interface ClusterInfoProps {
 }
 
 export const ClusterInfo = ({
-    cluster = {},
+    cluster,
     versionsValues = [],
     groupsStats = {},
     loading,
@@ -216,7 +216,7 @@ export const ClusterInfo = ({
 
     const {info = [], links = []} = additionalClusterProps;
 
-    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
+    const clusterInfo = getInfo(cluster ?? {}, versionsValues, groupsStats, info, [
         {title: DEVELOPER_UI_TITLE, url: internalLink},
         ...links,
     ]);
@@ -226,15 +226,16 @@ export const ClusterInfo = ({
             return <InfoViewerSkeleton className={b('skeleton')} rows={9} />;
         }
 
-        if (error) {
-            return <ResponseError error={error} className={b('error')} />;
+        if (error && !cluster) {
+            return null;
         }
 
         return <InfoViewer dots={true} info={clusterInfo} />;
     };
 
     return (
         <div className={b()}>
+            {error ? <ResponseError error={error} className={b('error')} /> : null}
             <div className={b('info')}>{getContent()}</div>
         </div>
     );

diff --git a/src/containers/Heatmap/Heatmap.tsx b/src/containers/Heatmap/Heatmap.tsx
@@ -119,6 +119,11 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
     const renderContent = () => {
         const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
 
+        let content;
+        if (!error || currentData) {
+            content = heatmap ? renderHeatmapCanvas() : renderHistogram();
+        }
+
         return (
             <div className={b()}>
                 <div className={b('filters')}>
@@ -158,7 +163,8 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
                         </div>
                     </div>
                 </div>
-                {heatmap ? renderHeatmapCanvas() : renderHistogram()}
+                {error ? <ResponseError error={error} /> : null}
+                {content}
             </div>
         );
     };
@@ -167,9 +173,5 @@ export const Heatmap = ({path, database}: HeatmapProps) => {
         return <Loader />;
     }
 
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
     return renderContent();
 };
diff --git a/src/containers/Node/Node.scss b/src/containers/Node/Node.scss
@@ -53,4 +53,8 @@
         height: 100%;
         padding: 20px;
     }
+
+    &__error {
+        padding: 0 20px;
+    }
 }
diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx
@@ -132,31 +132,33 @@ export function Node(props: NodeProps) {
 
     if (loading) {
         return <Loader size="l" />;
-    } else if (error) {
+    }
+
+    if (node) {
+        return (
+            <div className={b(null, props.className)} ref={container}>
+                <Helmet
+                    titleTemplate={`%s — ${node.Host} — YDB Monitoring`}
+                    defaultTitle={`${node.Host} — YDB Monitoring`}
+                >
+                    <title>{activeTabVerified.title}</title>
+                </Helmet>
+
+                <BasicNodeViewer
+                    node={node}
+                    additionalNodesProps={props.additionalNodesProps}
+                    className={b('header')}
+                />
+                {error ? <ResponseError error={error} className={b('error')} /> : null}
+                {renderTabs()}
+                <div className={b('content')}>{renderTabContent()}</div>
+            </div>
+        );
+    }
+
+    if (error) {
         return <ResponseError error={error} />;
-    } else {
-        if (node) {
-            return (
-                <div className={b(null, props.className)} ref={container}>
-                    <Helmet
-                        titleTemplate={`%s — ${node.Host} — YDB Monitoring`}
-                        defaultTitle={`${node.Host} — YDB Monitoring`}
-                    >
-                        <title>{activeTabVerified.title}</title>
-                    </Helmet>
-
-                    <BasicNodeViewer
-                        node={node}
-                        additionalNodesProps={props.additionalNodesProps}
-                        className={b('header')}
-                    />
-
-                    {renderTabs()}
-
-                    <div className={b('content')}>{renderTabContent()}</div>
-                </div>
-            );
-        }
-        return <div className="error">no node data</div>;
     }
+
+    return <div className="error">no node data</div>;
 }
diff --git a/src/containers/Node/NodeStructure/NodeStructure.scss b/src/containers/Node/NodeStructure/NodeStructure.scss
@@ -10,6 +10,10 @@
     @include flex-container();
     @include body-2-typography();
 
+    &__error {
+        padding: 20px 20px 0;
+    }
+
     &__pdisk {
         display: flex;
         flex-direction: column;

diff --git a/src/containers/Node/NodeStructure/NodeStructure.tsx b/src/containers/Node/NodeStructure/NodeStructure.tsx
@@ -100,14 +100,15 @@ function NodeStructure({nodeId, className}: NodeStructureProps) {
         if (loadingStructure) {
             return <Loader size="m" />;
         }
-        if (error) {
-            return <ResponseError error={error} />;
+        if (error && !currentData) {
+            return null;
         }
         return renderStructure();
     };
 
     return (
         <div className={b()} ref={scrollContainerRef}>
+            {error ? <ResponseError error={error} className={b('error')} /> : null}
             <div className={className}>{renderContent()}</div>
         </div>
     );

diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx
@@ -6,6 +6,7 @@ import {StringParam, useQueryParams} from 'use-query-params';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {AccessDenied} from '../../components/Errors/403';
+import {isAccessError} from '../../components/Errors/PageError/PageError';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Illustration} from '../../components/Illustration';
 import {ProblemFilter} from '../../components/ProblemFilter';
@@ -116,7 +117,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
                 <EntitiesCount
                     total={totalNodes}
-                    current={nodes?.length || 0}
+                    current={nodes.length}
                     label={'Nodes'}
                     loading={isLoading}
                 />
@@ -133,7 +134,7 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
             return {...column, sortable: isSortableNodesProperty(column.name)};
         });
 
-        if (nodes && nodes.length === 0) {
+        if (nodes.length === 0) {
             if (
                 problemFilter !== ProblemFilterValues.ALL ||
                 uptimeFilter !== NodesUptimeFilterValues.All
@@ -156,18 +157,16 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
         );
     };
 
-    if (error) {
-        if ((error as any).status === 403) {
-            return <AccessDenied />;
-        }
-        return <ResponseError error={error} />;
+    if (isAccessError(error)) {
+        return <AccessDenied />;
     }
 
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table loading={isLoading}>
-                {renderTable()}
+                {data ? renderTable() : null}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

diff --git a/src/containers/PDiskPage/PDiskPage.tsx b/src/containers/PDiskPage/PDiskPage.tsx
@@ -10,6 +10,7 @@ import {z} from 'zod';
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {DiskPageTitle} from '../../components/DiskPageTitle/DiskPageTitle';
+import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
 import {PDiskInfo} from '../../components/PDiskInfo/PDiskInfo';
@@ -213,12 +214,20 @@ export function PDiskPage() {
         }
     };
 
+    const renderError = () => {
+        if (!pdiskDataQuery.error) {
+            return null;
+        }
+        return <ResponseError error={pdiskDataQuery.error} />;
+    };
+
     return (
         <div className={pdiskPageCn(null)}>
             {renderHelmet()}
             {renderPageMeta()}
             {renderPageTitle()}
             {renderControls()}
+            {renderError()}
             {renderInfo()}
             {renderTabs()}
             {renderTabsContent()}

diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {ArrayParam, StringParam, useQueryParams, withDefault} from 'use-query-params';
 
 import {AccessDenied} from '../../components/Errors/403';
+import {isAccessError} from '../../components/Errors/PageError/PageError';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
@@ -214,19 +215,16 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         );
     };
 
-    if (error) {
-        if ((error as any).status === 403) {
-            return <AccessDenied position="left" />;
-        }
-
-        return <ResponseError error={error} />;
+    if (isAccessError(error)) {
+        return <AccessDenied position="left" />;
     }
 
     return (
         <TableWithControlsLayout>
             <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table loading={isLoading} className={b('table')}>
-                {renderDataTable()}
+                {currentData ? renderDataTable() : null}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

diff --git a/src/containers/Tablet/Tablet.tsx b/src/containers/Tablet/Tablet.tsx
@@ -88,7 +88,7 @@ export const Tablet = () => {
             return <Loader size="l" />;
         }
 
-        if (error) {
+        if (error && !currentData) {
             return <ResponseError error={error} />;
         }
 
@@ -111,6 +111,7 @@ export const Tablet = () => {
 
         return (
             <div className={b()}>
+                {error ? <ResponseError error={error} /> : null}
                 <div className={b('pane-wrapper')}>
                     <div className={b('left-pane')}>
                         <ul className={b('links')}>{externalLinks.map(renderExternalLinks)}</ul>

diff --git a/src/containers/Tablets/Tablets.tsx b/src/containers/Tablets/Tablets.tsx
@@ -187,18 +187,18 @@ export function Tablets({nodeId, path, className}: TabletsProps) {
     if (loading) {
         return <TableSkeleton />;
     }
-    if (error) {
-        return <ResponseError error={error} />;
-    }
 
     return (
         <div className={b(null, className)}>
-            <ResizeableDataTable
-                columns={columns}
-                data={tablets}
-                settings={DEFAULT_TABLE_SETTINGS}
-                emptyDataMessage={i18n('noTabletsData')}
-            />
+            {error ? <ResponseError error={error} /> : null}
+            {currentData ? (
+                <ResizeableDataTable
+                    columns={columns}
+                    data={tablets}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    emptyDataMessage={i18n('noTabletsData')}
+                />
+            ) : null}
         </div>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx b/src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx
@@ -64,11 +64,7 @@ export const Consumers = ({path, type}: ConsumersProps) => {
         return <Loader size="m" />;
     }
 
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
-    if (!consumers || !consumers.length) {
+    if (!error && (!consumers || !consumers.length)) {
         return <div>{i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`)}</div>;
     }
 
@@ -83,18 +79,21 @@ export const Consumers = ({path, type}: ConsumersProps) => {
                 />
                 {topic && <ConsumersTopicStats data={topic} />}
             </div>
-            <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <ResizeableDataTable
-                        columnsWidthLSKey={CONSUMERS_COLUMNS_WIDTH_LS_KEY}
-                        wrapperClassName={b('table')}
-                        data={dataToRender}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        emptyDataMessage={i18n('table.emptyDataMessage')}
-                    />
+            {error ? <ResponseError error={error} /> : null}
+            {consumers ? (
+                <div className={b('table-wrapper')}>
+                    <div className={b('table-content')}>
+                        <ResizeableDataTable
+                            columnsWidthLSKey={CONSUMERS_COLUMNS_WIDTH_LS_KEY}
+                            wrapperClassName={b('table')}
+                            data={dataToRender}
+                            columns={columns}
+                            settings={DEFAULT_TABLE_SETTINGS}
+                            emptyDataMessage={i18n('table.emptyDataMessage')}
+                        />
+                    </div>
                 </div>
-            </div>
+            ) : null}
         </div>
     );
 };