From a5d1ed8516cd9eb8f913506214689d5008cbb172 Mon Sep 17 00:00:00 2001
From: Azhng <archer.xn@gmail.com>
Date: Thu, 21 Oct 2021 17:39:21 -0400
Subject: [PATCH] ui: add reload button for Loading component

Resolves #68602

Release note (ui change): when an error is encoutered in the statement/
transaction/session page, user can now click on reload button to reload
the page.
---
 .../cluster-ui/src/loading/loading.spec.tsx   | 16 ++++++++
 .../cluster-ui/src/loading/loading.tsx        |  7 +++-
 .../src/sessions/sessionDetails.tsx           |  6 +++
 .../cluster-ui/src/sessions/sessionsPage.tsx  |  6 +++
 .../src/sqlActivity/errorComponent.tsx        | 41 +++++++++++++++++++
 .../src/sqlActivity/sqlActivity.module.scss   |  5 +++
 .../src/statementDetails/statementDetails.tsx |  6 +++
 .../src/statementsPage/statementsPage.tsx     |  6 +++
 .../transactionDetails/transactionDetails.tsx |  6 +++
 .../src/transactionsPage/transactionsPage.tsx |  6 +++
 10 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx

diff --git a/pkg/ui/workspaces/cluster-ui/src/loading/loading.spec.tsx b/pkg/ui/workspaces/cluster-ui/src/loading/loading.spec.tsx
index b83240f802dd..25194c9aa602 100644
--- a/pkg/ui/workspaces/cluster-ui/src/loading/loading.spec.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/loading/loading.spec.tsx
@@ -15,6 +15,7 @@ import { Spinner, InlineAlert } from "@cockroachlabs/ui-components";
 import { Loading } from "./loading";
 
 const SomeComponent = () => <div>Hello, world!</div>;
+const SomeCustomErrorComponent = () => <div>Custom Error</div>;
 
 describe("<Loading>", () => {
   describe("when error is null", () => {
@@ -73,8 +74,23 @@ describe("<Loading>", () => {
         );
         assert.isFalse(wrapper.find(SomeComponent).exists());
         assert.isFalse(wrapper.find(Spinner).exists());
+        assert.isFalse(wrapper.find(SomeCustomErrorComponent).exists());
         assert.isTrue(wrapper.find(InlineAlert).exists());
       });
+
+      it("render custom error when provided", () => {
+        const wrapper = mount(
+          <Loading
+            loading={true}
+            error={Error("some error message")}
+            render={() => <SomeComponent />}
+            renderError={() => <SomeCustomErrorComponent />}
+          />,
+        );
+        assert.isFalse(wrapper.find(SomeComponent).exists());
+        assert.isFalse(wrapper.find(Spinner).exists());
+        assert.isTrue(wrapper.find(SomeCustomErrorComponent).exists());
+      });
     });
   });
 
diff --git a/pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx b/pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx
index ec0fcf42f262..a7bea32f5585 100644
--- a/pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx
@@ -29,6 +29,7 @@ interface LoadingProps {
   render: () => any;
   errorClassName?: string;
   loadingClassName?: string;
+  renderError?: () => React.ReactElement;
 }
 
 const cx = classNames.bind(styles);
@@ -81,7 +82,11 @@ export const Loading: React.FC<LoadingProps> = props => {
         } else {
           return {
             intent: "danger",
-            description: <span>{error.message}</span>,
+            description: props.renderError ? (
+              props.renderError()
+            ) : (
+              <span>{error.message}</span>
+            ),
           };
         }
       })
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
index 40450d93799d..bfe61db5ac4b 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -19,6 +19,7 @@ import { Link, RouteComponentProps } from "react-router-dom";
 import { SessionInfo } from "./sessionsTable";
 
 import { SummaryCard, SummaryCardItem } from "../summaryCard";
+import SQLActivityError from "../sqlActivity/errorComponent";
 
 import { TimestampToMoment } from "src/util/convert";
 import { Bytes, DATE_FORMAT } from "src/util/format";
@@ -207,6 +208,11 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
             loading={_.isNil(this.props.session)}
             error={this.props.sessionError}
             render={this.renderContent}
+            renderError={() =>
+              SQLActivityError({
+                statsType: "sessions",
+              })
+            }
           />
         </section>
         <TerminateSessionModal
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
index dc317b232fb2..8669ba0e211c 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -24,6 +24,7 @@ import classNames from "classnames/bind";
 import { sessionsTable } from "src/util/docs";
 
 import emptyTableResultsIcon from "../assets/emptyState/empty-table-results.svg";
+import SQLActivityError from "../sqlActivity/errorComponent";
 
 import { Pagination, ResultsPerPageLabel } from "src/pagination";
 import { SortSetting, ISortedTablePagination } from "src/sortedtable";
@@ -220,6 +221,11 @@ export class SessionsPage extends React.Component<
           loading={isNil(this.props.sessions)}
           error={this.props.sessionsError}
           render={this.renderSessions}
+          renderError={() =>
+            SQLActivityError({
+              statsType: "sessions",
+            })
+          }
         />
         <TerminateSessionModal
           ref={this.terminateSessionRef}
diff --git a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx
new file mode 100644
index 000000000000..dc8056f937f8
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx
@@ -0,0 +1,41 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import classNames from "classnames/bind";
+import styles from "./sqlActivity.module.scss";
+
+const cx = classNames.bind(styles);
+
+interface SQLActivityErrorProps {
+  statsType: string;
+}
+
+const SQLActivityError: React.FC<SQLActivityErrorProps> = props => {
+  return (
+    <div className={cx("row")}>
+      <span>
+        This page had an unexpected error while loading
+        {" " + props.statsType}.
+      </span>
+      &nbsp;
+      <a
+        className={cx("action")}
+        onClick={() => {
+          window.location.reload();
+        }}
+      >
+        Reload this page
+      </a>
+    </div>
+  );
+};
+
+export default SQLActivityError;
diff --git a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss
index 30b9152d3332..3854eff0b538 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss
@@ -13,3 +13,8 @@
     text-decoration: underline;
   }
 }
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 4d8bfd9475d7..63337ca34c55 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -66,6 +66,7 @@ import { NodeSummaryStats } from "../nodes";
 import { UIConfigState } from "../store";
 import moment, { Moment } from "moment";
 import { StatementsRequest } from "src/api/statementsApi";
+import SQLActivityError from "../sqlActivity/errorComponent";
 
 const { TabPane } = Tabs;
 
@@ -418,6 +419,11 @@ export class StatementDetails extends React.Component<
             loading={_.isNil(this.props.statement)}
             error={this.props.statementsError}
             render={this.renderContent}
+            renderError={() =>
+              SQLActivityError({
+                statsType: "statements",
+              })
+            }
           />
         </section>
       </div>
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
index b9be2351ca80..9b0752c40a0a 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -65,6 +65,7 @@ import { UIConfigState } from "../store";
 import { StatementsRequest } from "src/api/statementsApi";
 import Long from "long";
 import ClearStats from "../sqlActivity/clearStats";
+import SQLActivityError from "../sqlActivity/errorComponent";
 import { commonStyles } from "../common";
 
 const cx = classNames.bind(styles);
@@ -578,6 +579,11 @@ export class StatementsPage extends React.Component<
           loading={isNil(this.props.statements)}
           error={this.props.statementsError}
           render={this.renderStatements}
+          renderError={() =>
+            SQLActivityError({
+              statsType: "statements",
+            })
+          }
         />
         <ActivateStatementDiagnosticsModal
           ref={this.activateDiagnosticsRef}
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
index f6818c9c0a77..e1a633897768 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
@@ -31,6 +31,7 @@ import { Loading } from "../loading";
 import { SummaryCard } from "../summaryCard";
 import { Bytes, Duration, formatNumberForDisplay } from "src/util";
 import { UIConfigState } from "../store";
+import SQLActivityError from "../sqlActivity/errorComponent";
 
 import summaryCardStyles from "../summaryCard/summaryCard.module.scss";
 import transactionDetailsStyles from "./transactionDetails.modules.scss";
@@ -306,6 +307,11 @@ export class TransactionDetails extends React.Component<
               </React.Fragment>
             );
           }}
+          renderError={() =>
+            SQLActivityError({
+              statsType: "transactions",
+            })
+          }
         />
       </div>
     );
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
index 7c6c7e74c83c..154476b65f54 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -59,6 +59,7 @@ import {
   StatisticTableColumnKeys,
 } from "../statsTableUtil/statsTableUtil";
 import ClearStats from "../sqlActivity/clearStats";
+import SQLActivityError from "../sqlActivity/errorComponent";
 import { commonStyles } from "../common";
 
 type IStatementsResponse = protos.cockroach.server.serverpb.IStatementsResponse;
@@ -449,6 +450,11 @@ export class TransactionsPage extends React.Component<
               </>
             );
           }}
+          renderError={() =>
+            SQLActivityError({
+              statsType: "transactions",
+            })
+          }
         />
       </div>
     );