Add error screen.

This commit is contained in:
Kia Lam
2022-02-17 13:26:03 -08:00
parent 8993dc706a
commit 0d1898e72d

View File

@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, useState } from 'react';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { PageSection, Card, CardBody } from '@patternfly/react-core'; import { PageSection, Card, CardBody } from '@patternfly/react-core';
import ContentError from 'components/ContentError';
import useRequest from 'hooks/useRequest'; import useRequest from 'hooks/useRequest';
import { MeshAPI } from 'api'; import { MeshAPI } from 'api';
import Header from './Header'; import Header from './Header';
@@ -12,7 +13,7 @@ function TopologyView() {
const { const {
isLoading, isLoading,
result: { meshData }, result: { meshData },
// error: fetchInitialError, error: fetchInitialError,
request: fetchMeshVisualizer, request: fetchMeshVisualizer,
} = useRequest( } = useRequest(
useCallback(async () => { useCallback(async () => {
@@ -72,7 +73,6 @@ function TopologyView() {
.duration(750) .duration(750)
.call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale)); .call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
}; };
return ( return (
<> <>
<Header <Header
@@ -84,15 +84,29 @@ function TopologyView() {
zoomFit={zoomFit} zoomFit={zoomFit}
resetZoom={resetZoom} resetZoom={resetZoom}
/> />
<PageSection> {fetchInitialError ? (
<Card style={{ height: '100%' }}> <PageSection>
<CardBody> <Card>
{!isLoading && ( <CardBody>
<MeshGraph data={meshData} showLegend={showLegend} zoom={zoom} /> <ContentError error={fetchInitialError} />
)} </CardBody>
</CardBody> </Card>
</Card> </PageSection>
</PageSection> ) : (
<PageSection>
<Card style={{ height: '100%' }}>
<CardBody>
{!isLoading && (
<MeshGraph
data={meshData}
showLegend={showLegend}
zoom={zoom}
/>
)}
</CardBody>
</Card>
</PageSection>
)}
</> </>
); );
} }