GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-25 00:44:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Fix]: the loading state based on the time interval (#3755)

Browse Source 
* fix: the loading state based on the time interval

* fix: failing of query-range api
This commit is contained in:
Rajat Dabade 2023-11-01 22:36:04 +05:30 committed by GitHub
parent 626da7533e
commit 0400d5378b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
View File

@ -1,4 +1,4 @@
import { Typography } from 'antd';
import { Skeleton, Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import GridPanelSwitch from 'container/GridPanelSwitch';
@ -249,20 +249,23 @@ function WidgetGraphComponent({
isWarning={isWarning}
/>
</div>
<GridPanelSwitch
panelType={widget.panelTypes}
data={data}
isStacked={widget.isStacked}
opacity={widget.opacity}
title={' '}
name={name}
yAxisUnit={widget.yAxisUnit}
onClickHandler={onClickHandler}
onDragSelect={onDragSelect}
panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
query={widget.query}
ref={lineChartRef}
/>
{queryResponse.isLoading && <Skeleton />}
{queryResponse.isSuccess && (
<GridPanelSwitch
panelType={widget.panelTypes}
data={data}
isStacked={widget.isStacked}
opacity={widget.opacity}
title={' '}
name={name}
yAxisUnit={widget.yAxisUnit}
onClickHandler={onClickHandler}
onDragSelect={onDragSelect}
panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
query={widget.query}
ref={lineChartRef}
/>
)}
</span>
);
}

5
frontend/src/container/GridCardLayout/GridCard/index.tsx
View File

@ -1,4 +1,3 @@
import { Skeleton } from 'antd';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
@ -99,10 +98,6 @@ function GridCardGraph({
const isEmptyLayout = widget?.id === PANEL_TYPES.EMPTY_WIDGET;
if (queryResponse.isLoading) {
return <Skeleton />;
}
return (
<span ref={graphRef}>
<WidgetGraphComponent

8
frontend/src/container/MetricsApplication/Tabs/Overview.tsx
View File

@ -92,8 +92,8 @@ function Application(): JSX.Element {
const {
data: topLevelOperations,
isLoading: topLevelOperationsLoading,
error: topLevelOperationsError,
isLoading: topLevelOperationsIsLoading,
isError: topLevelOperationsIsError,
} = useQuery<ServiceDataProps>({
queryKey: [servicename, minTime, maxTime, selectedTags],
@ -199,7 +199,7 @@ function Application(): JSX.Element {
selectedTimeStamp={selectedTimeStamp}
selectedTraceTags={selectedTraceTags}
topLevelOperationsRoute={topLevelOperationsRoute}
topLevelOperationsLoading={topLevelOperationsLoading}
topLevelOperationsIsLoading={topLevelOperationsIsLoading}
/>
</Col>
@ -220,11 +220,11 @@ function Application(): JSX.Element {
handleGraphClick={handleGraphClick}
onDragSelect={onDragSelect}
topLevelOperationsError={topLevelOperationsError}
topLevelOperationsLoading={topLevelOperationsLoading}
topLevelOperationsIsError={topLevelOperationsIsError}
name="operations_per_sec"
widget={operationPerSecWidget}
opName="Rate"
topLevelOperationsIsLoading={topLevelOperationsIsLoading}
/>
</Col>
</Row>
@ -264,11 +264,11 @@ function Application(): JSX.Element {
handleGraphClick={handleGraphClick}
onDragSelect={onDragSelect}
topLevelOperationsError={topLevelOperationsError}
topLevelOperationsLoading={topLevelOperationsLoading}
topLevelOperationsIsError={topLevelOperationsIsError}
name="error_percentage_%"
widget={errorPercentageWidget}
opName="Error"
topLevelOperationsIsLoading={topLevelOperationsIsLoading}
/>
</ColErrorContainer>
</Col>

16
frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
View File

@ -1,4 +1,3 @@
import Spinner from 'components/Spinner';
import { FeatureKeys } from 'constants/features';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
@ -25,7 +24,7 @@ function ServiceOverview({
selectedTraceTags,
selectedTimeStamp,
topLevelOperationsRoute,
topLevelOperationsLoading,
topLevelOperationsIsLoading,
}: ServiceOverviewProps): JSX.Element {
const { servicename } = useParams<IServiceName>();
@ -64,15 +63,8 @@ function ServiceOverview({
[servicename, isSpanMetricEnable, topLevelOperationsRoute, tagFilterItems],
);
const isQueryEnabled = topLevelOperationsRoute.length > 0;
if (topLevelOperationsLoading) {
return (
<Card>
<Spinner height="40vh" tip="Loading..." />
</Card>
);
}
const isQueryEnabled =
!topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0;
return (
<>
@ -109,7 +101,7 @@ interface ServiceOverviewProps {
onDragSelect: (start: number, end: number) => void;
handleGraphClick: (type: string) => ClickHandlerType;
topLevelOperationsRoute: string[];
topLevelOperationsLoading: boolean;
topLevelOperationsIsLoading: boolean;
}
export default ServiceOverview;

23
frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
View File

@ -1,6 +1,5 @@
import { Typography } from 'antd';
import axios from 'axios';
import Spinner from 'components/Spinner';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import Graph from 'container/GridCardLayout/GridCard';
import { Card, GraphContainer } from 'container/MetricsApplication/styles';
@ -13,10 +12,10 @@ function TopLevelOperation({
opName,
topLevelOperationsIsError,
topLevelOperationsError,
topLevelOperationsLoading,
onDragSelect,
handleGraphClick,
widget,
topLevelOperationsIsLoading,
}: TopLevelOperationProps): JSX.Element {
return (
<Card>
@ -28,17 +27,13 @@ function TopLevelOperation({
</Typography>
) : (
<GraphContainer>
{topLevelOperationsLoading && (
<Spinner size="large" tip="Loading..." height="40vh" />
)}
{!topLevelOperationsLoading && (
<Graph
name={name}
widget={widget}
onClickHandler={handleGraphClick(opName)}
onDragSelect={onDragSelect}
/>
)}
<Graph
name={name}
widget={widget}
onClickHandler={handleGraphClick(opName)}
onDragSelect={onDragSelect}
isQueryEnabled={!topLevelOperationsIsLoading}
/>
</GraphContainer>
)}
</Card>
@ -50,10 +45,10 @@ interface TopLevelOperationProps {
opName: string;
topLevelOperationsIsError: boolean;
topLevelOperationsError: unknown;
topLevelOperationsLoading: boolean;
onDragSelect: (start: number, end: number) => void;
handleGraphClick: (type: string) => ClickHandlerType;
widget: Widgets;
topLevelOperationsIsLoading: boolean;
}
export default TopLevelOperation;