From 6b1ca52374e2bb964c69c69fe9c80b629e503b74 Mon Sep 17 00:00:00 2001 From: Azhng Date: Thu, 30 Sep 2021 13:23:06 -0400 Subject: [PATCH] ui: prevent statement/transaction page from sending infinite API requests when the API requests fails Previously, Statement Page and Transaction Page issues API requests in conmponentDidUpdate() React lifecycle hook. However, when the backend API returns an error, this lifecycle hook is constantly triggered which resulted in infinite loop. This crashes the entire frontend application. This commit removes API calls from within the componentDidUpdate() hooks. Resolves #68602 Release note: None --- .../cluster-ui/src/statementsPage/statementsPage.tsx | 4 ---- .../src/store/utils/sagaEffects/throttleWithReset.ts | 2 +- .../cluster-ui/src/transactionsPage/transactionsPage.tsx | 3 --- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx index f3dcddfb2192..125bc3559a08 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx @@ -264,10 +264,6 @@ export class StatementsPage extends React.Component< if (this.state.search && this.state.search !== prevState.search) { this.props.onSearchComplete(this.filteredStatementsData()); } - this.refreshStatements(); - if (!this.props.isTenant) { - this.props.refreshStatementDiagnosticsRequests(); - } }; componentWillUnmount(): void { diff --git a/pkg/ui/workspaces/cluster-ui/src/store/utils/sagaEffects/throttleWithReset.ts b/pkg/ui/workspaces/cluster-ui/src/store/utils/sagaEffects/throttleWithReset.ts index bd5fd03a8239..e1ea989988cd 100644 --- a/pkg/ui/workspaces/cluster-ui/src/store/utils/sagaEffects/throttleWithReset.ts +++ b/pkg/ui/workspaces/cluster-ui/src/store/utils/sagaEffects/throttleWithReset.ts @@ -25,7 +25,7 @@ import { Action } from "redux"; * Extended version of default `redux-saga/effects/throttle` effect implementation * with ability to provide actions that trigger reset on delay timer. * - * For example, `initRequest` sata has to be throttled by specified amount of time and + * For example, `initRequest` saga has to be throttled by specified amount of time and * also `initRequest` call when specific action dispatched (even if timeout doesn't * occur). * diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx index 0817e397c7f5..7e9844e25d62 100644 --- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx @@ -146,9 +146,6 @@ export class TransactionsPage extends React.Component< componentDidMount(): void { this.refreshData(); } - componentDidUpdate(): void { - this.refreshData(); - } syncHistory = (params: Record) => { const { history } = this.props;