Merge cockroachdb#71846

71846: ui: add reload button for Loading component r=maryliag a=Azhng Resolves cockroachdb#68602 https://user-images.githubusercontent.com/9267198/138362614-96f15559-9761-4c4b-8a47-2843cad7978d.mov 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. Co-authored-by: Azhng <[email protected]>
ajwerner · Oct 23, 2021 · 31ccb1c · 31ccb1c
2 parents 054decc + a5d1ed8
commit 31ccb1c
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
     );