ui: prevent statement/transaction page from sending infinite API

[Azhng]

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

[cockroach-teamcity]

This change is 

[maryliag]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @Azhng and @maryliag)

---

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx, line 267 at r1 (raw file):

      this.props.onSearchComplete(this.filteredStatementsData());
    }
    this.refreshStatements();

the data keeps getting refreshed so we get the latest data, removing this means we will might have stale data. What is the reason for removing this here?

[xinhaoz]

---

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx, line 267 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

the data keeps getting refreshed so we get the latest data, removing this means we will might have stale data. What is the reason for removing this here?

Ah it seems like because we receive an error the data is considered invalid, so we'll continue to refresh the data instead of adhering to the caching period..... what is the expected behaviour when we get an API error? Endlessly fetching until we get a valid result doesn't seem quite right.