From 5c47160deb395c9632662b97c2b821bb55d4a946 Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov <and.vorobiov@gmail.com> Date: Tue, 31 Mar 2020 13:54:54 +0300 Subject: [PATCH] ui: Default sort by Execution Count column for Statements Before, default sorting was set to Latency column in Statements page that was unintuitive. Now it is sorted by Execution count column. Release note (admin ui change): Change default sorting column on Statements page to Execution Count Release justification: bug fixes and low-risk updates to new functionality --- .../views/statements/statementsPage.spec.tsx | 34 +++++++++++++++++++ .../src/views/statements/statementsPage.tsx | 12 ++++--- 2 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 pkg/ui/src/views/statements/statementsPage.spec.tsx diff --git a/pkg/ui/src/views/statements/statementsPage.spec.tsx b/pkg/ui/src/views/statements/statementsPage.spec.tsx new file mode 100644 index 000000000000..59b2c044c64c --- /dev/null +++ b/pkg/ui/src/views/statements/statementsPage.spec.tsx @@ -0,0 +1,34 @@ +// Copyright 2018 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 { assert } from "chai"; +import { ReactWrapper } from "enzyme"; + +import { connectedMount } from "src/test-utils"; +import StatementsPageConnected, { + StatementsPage, + StatementsPageProps, + StatementsPageState, +} from "src/views/statements/statementsPage"; + +describe("StatementsPage", () => { + describe("Statements table", () => { + it("sorts data by Execution Count DESC as default option", () => { + const rootWrapper = connectedMount(() => <StatementsPageConnected />); + + const statementsPageWrapper: ReactWrapper<StatementsPageProps, StatementsPageState> = rootWrapper.find(StatementsPage).first(); + const statementsPageInstance = statementsPageWrapper.instance(); + + assert.equal(statementsPageInstance.state.sortSetting.sortKey, 3); + assert.equal(statementsPageInstance.state.sortSetting.ascending, false); + }); + }); +}); diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx index e1ae62197262..3e45d7ad5dac 100644 --- a/pkg/ui/src/views/statements/statementsPage.tsx +++ b/pkg/ui/src/views/statements/statementsPage.tsx @@ -47,7 +47,7 @@ import "./statements.styl"; type ICollectedStatementStatistics = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics; -interface StatementsPageProps { +interface OwnProps { statements: AggregateStatistics[]; statementsError: Error | null; apps: string[]; @@ -62,20 +62,22 @@ type PaginationSettings = { current: number; }; -interface StatementsPageState { +export interface StatementsPageState { sortSetting: SortSetting; pagination: PaginationSettings; search?: string; } -export class StatementsPage extends React.Component<StatementsPageProps & RouteComponentProps<any>, StatementsPageState> { +export type StatementsPageProps = OwnProps & RouteComponentProps<any>; + +export class StatementsPage extends React.Component<StatementsPageProps, StatementsPageState> { activateDiagnosticsRef: React.RefObject<ActivateDiagnosticsModalRef>; - constructor(props: StatementsPageProps & RouteComponentProps<any>) { + constructor(props: StatementsPageProps) { super(props); const defaultState = { sortSetting: { - sortKey: 6, // Latency column is default for sorting + sortKey: 3, // Sort by Execution Count column as default option ascending: false, }, pagination: {