Skip to content

Commit

Permalink
ui: save sort settings and view type on cache for Database Details page
Browse files Browse the repository at this point in the history 
Previously, sort setting and the View type on Databases Details page were not
being stored. With this commits we save the info about sort settings and the
view type so the value is the same when the user goes back to those pages.
This commit also updates the value on query params and that value
take priority over the cached valued.

Partially addresses cockroachdb#68199

Release note: None
  • Loading branch information
@maryliag
maryliag committed Dec 15, 2021
1 parent f116a74 commit 5aea457
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 28 deletions.
61 changes: 61 additions & 0 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,68 @@ import {
import {
DatabaseDetailsPage,
DatabaseDetailsPageProps,
ViewMode,
} from "./databaseDetailsPage";

import * as H from "history";
const history = H.createHashHistory();

const withLoadingIndicator: DatabaseDetailsPageProps = {
loading: true,
loaded: false,
name: randomName(),
tables: [],
viewMode: ViewMode.Tables,
sortSettingTables: {
ascending: false,
columnTitle: "name",
},
sortSettingGrants: {
ascending: false,
columnTitle: "name",
},
onSortingTablesChange: () => {},
onSortingGrantsChange: () => {},
refreshDatabaseDetails: () => {},
refreshTableDetails: () => {},
refreshTableStats: () => {},
location: history.location,
history,
match: {
url: "",
path: history.location.pathname,
isExact: false,
params: {},
},
};

const withoutData: DatabaseDetailsPageProps = {
loading: false,
loaded: true,
name: randomName(),
tables: [],
viewMode: ViewMode.Tables,
sortSettingTables: {
ascending: false,
columnTitle: "name",
},
sortSettingGrants: {
ascending: false,
columnTitle: "name",
},
onSortingTablesChange: () => {},
onSortingGrantsChange: () => {},
refreshDatabaseDetails: () => {},
refreshTableDetails: () => {},
refreshTableStats: () => {},
location: history.location,
history,
match: {
url: "",
path: history.location.pathname,
isExact: false,
params: {},
},
};

const withData: DatabaseDetailsPageProps = {
Expand Down Expand Up @@ -77,9 +119,28 @@ const withData: DatabaseDetailsPageProps = {
},
};
}),
viewMode: ViewMode.Tables,
sortSettingTables: {
ascending: false,
columnTitle: "name",
},
sortSettingGrants: {
ascending: false,
columnTitle: "name",
},
onSortingTablesChange: () => {},
onSortingGrantsChange: () => {},
refreshDatabaseDetails: () => {},
refreshTableDetails: () => {},
refreshTableStats: () => {},
location: history.location,
history,
match: {
url: "",
path: history.location.pathname,
isExact: false,
params: {},
},
};

storiesOf("Database Details Page", module)
Expand Down
120 changes: 95 additions & 25 deletions pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
// licenses/APL.txt.

import React from "react";
import { Link } from "react-router-dom";
import { Link, RouteComponentProps } from "react-router-dom";
import { Tooltip } from "antd";
import classNames from "classnames/bind";
import _ from "lodash";
Expand All @@ -28,6 +28,7 @@ import {
SortedTable,
} from "src/sortedtable";
import * as format from "src/util/format";
import { syncHistory } from "../util";

import styles from "./databaseDetailsPage.module.scss";
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
Expand All @@ -52,6 +53,9 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
// loading: boolean;
// loaded: boolean;
// name: string;
// sortSettingTables: SortSetting;
// sortSettingGrants: SortSetting;
// viewMode: ViewMode;
// tables: { // DatabaseDetailsPageDataTable[]
// name: string;
// details: { // DatabaseDetailsPageDataTableDetails
Expand All @@ -77,6 +81,9 @@ export interface DatabaseDetailsPageData {
loaded: boolean;
name: string;
tables: DatabaseDetailsPageDataTable[];
sortSettingTables: SortSetting;
sortSettingGrants: SortSetting;
viewMode: ViewMode;
showNodeRegionsColumn?: boolean;
}

Expand Down Expand Up @@ -108,20 +115,22 @@ export interface DatabaseDetailsPageActions {
refreshDatabaseDetails: (database: string) => void;
refreshTableDetails: (database: string, table: string) => void;
refreshTableStats: (database: string, table: string) => void;
onSortingTablesChange?: (columnTitle: string, ascending: boolean) => void;
onSortingGrantsChange?: (columnTitle: string, ascending: boolean) => void;
onViewModeChange?: (viewMode: ViewMode) => void;
}

export type DatabaseDetailsPageProps = DatabaseDetailsPageData &
DatabaseDetailsPageActions;
DatabaseDetailsPageActions &
RouteComponentProps<unknown>;

enum ViewMode {
export enum ViewMode {
Tables = "Tables",
Grants = "Grants",
}

interface DatabaseDetailsPageState {
pagination: ISortedTablePagination;
sortSetting: SortSetting;
viewMode: ViewMode;
}

class DatabaseSortedTable extends SortedTable<DatabaseDetailsPageDataTable> {}
Expand All @@ -132,28 +141,62 @@ export class DatabaseDetailsPage extends React.Component<
> {
constructor(props: DatabaseDetailsPageProps) {
super(props);

this.state = {
pagination: {
current: 1,
pageSize: 20,
},
sortSetting: {
ascending: true,
},
viewMode: ViewMode.Tables,
};

const { history } = this.props;
const searchParams = new URLSearchParams(history.location.search);

// View Mode.
const view = searchParams.get("viewMode") || undefined;
let viewMode = ViewMode.Tables;
if (view == ViewMode.Grants.toString()) {
viewMode = ViewMode.Grants;
}
if (
this.props.onViewModeChange &&
view &&
viewMode != this.props.viewMode
) {
this.props.onViewModeChange(viewMode);
}

// Sort Settings.
const ascending = (searchParams.get("ascending") || undefined) === "true";
const columnTitle = searchParams.get("columnTitle") || undefined;
const sortSetting =
viewMode == ViewMode.Tables
? this.props.sortSettingTables
: this.props.sortSettingGrants;
const onSortingChange =
viewMode == ViewMode.Tables
? this.props.onSortingTablesChange
: this.props.onSortingGrantsChange;

if (
onSortingChange &&
columnTitle &&
(sortSetting.columnTitle != columnTitle ||
sortSetting.ascending != ascending)
) {
onSortingChange(columnTitle, ascending);
}
}

componentDidMount() {
componentDidMount(): void {
this.refresh();
}

componentDidUpdate() {
componentDidUpdate(): void {
this.refresh();
}

private refresh() {
private refresh(): void {
console.log("VIEW ", this.props.viewMode);
if (!this.props.loaded && !this.props.loading) {
return this.props.refreshDatabaseDetails(this.props.name);
}
Expand All @@ -173,22 +216,44 @@ export class DatabaseDetailsPage extends React.Component<
this.setState({ pagination: { ...this.state.pagination, current } });
}

private changeSortSetting(sortSetting: SortSetting) {
this.setState({ sortSetting });
}
changeSortSetting = (ss: SortSetting): void => {
syncHistory(
{
ascending: ss.ascending.toString(),
columnTitle: ss.columnTitle,
},
this.props.history,
);
const onSortingChange =
this.props.viewMode == ViewMode.Tables
? this.props.onSortingTablesChange
: this.props.onSortingGrantsChange;

if (onSortingChange) {
onSortingChange(ss.columnTitle, ss.ascending);
}
};

private changeViewMode(viewMode: ViewMode) {
this.setState({ viewMode });
syncHistory(
{
viewMode: viewMode.toString(),
},
this.props.history,
);
if (this.props.onViewModeChange) {
this.props.onViewModeChange(viewMode);
}
}

private columns(): ColumnDescriptor<DatabaseDetailsPageDataTable>[] {
switch (this.state.viewMode) {
switch (this.props.viewMode) {
case ViewMode.Tables:
return this.columnsForTablesViewMode();
case ViewMode.Grants:
return this.columnsForGrantsViewMode();
default:
throw new Error(`Unknown view mode ${this.state.viewMode}`);
throw new Error(`Unknown view mode ${this.props.viewMode}`);
}
}

Expand Down Expand Up @@ -349,7 +414,7 @@ export class DatabaseDetailsPage extends React.Component<
];
}

private viewOptions(): DropdownOption<ViewMode>[] {
private static viewOptions(): DropdownOption<ViewMode>[] {
return [
{
name: "Tables",
Expand All @@ -362,7 +427,12 @@ export class DatabaseDetailsPage extends React.Component<
];
}

render() {
render(): React.ReactElement {
const sortSetting =
this.props.viewMode == ViewMode.Tables
? this.props.sortSettingTables
: this.props.sortSettingGrants;

return (
<div className="root table-area">
<section className={baseHeadingClasses.wrapper}>
Expand All @@ -389,10 +459,10 @@ export class DatabaseDetailsPage extends React.Component<
<PageConfig>
<PageConfigItem>
<Dropdown
items={this.viewOptions()}
items={DatabaseDetailsPage.viewOptions()}
onChange={this.changeViewMode.bind(this)}
>
View: {this.state.viewMode}
View: {this.props.viewMode}
</Dropdown>
</PageConfigItem>
</PageConfig>
Expand All @@ -414,8 +484,8 @@ export class DatabaseDetailsPage extends React.Component<
className={cx("database-table")}
data={this.props.tables}
columns={this.columns()}
sortSetting={this.state.sortSetting}
onChangeSortSetting={this.changeSortSetting.bind(this)}
sortSetting={sortSetting}
onChangeSortSetting={this.changeSortSetting}
pagination={this.state.pagination}
loading={this.props.loading}
renderNoResult={
Expand Down
7 changes: 7 additions & 0 deletions pkg/ui/workspaces/db-console/src/views/databases/databaseDetailsPage/redux.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
DatabaseDetailsPageData,
DatabaseDetailsPageDataTableDetails,
DatabaseDetailsPageDataTableStats,
ViewMode,
} from "@cockroachlabs/cluster-ui";

import { AdminUIState, createAdminUIStore } from "src/redux/state";
Expand Down Expand Up @@ -125,6 +126,9 @@ describe("Database Details Page", function() {
loaded: false,
name: "things",
showNodeRegionsColumn: false,
viewMode: ViewMode.Tables,
sortSettingTables: { ascending: true, columnTitle: "name" },
sortSettingGrants: { ascending: true, columnTitle: "name" },
tables: [],
});
});
Expand All @@ -141,6 +145,9 @@ describe("Database Details Page", function() {
loaded: true,
name: "things",
showNodeRegionsColumn: false,
viewMode: ViewMode.Tables,
sortSettingTables: { ascending: true, columnTitle: "name" },
sortSettingGrants: { ascending: true, columnTitle: "name" },
tables: [
{
name: "foo",
Expand Down
Loading

0 comments on commit 5aea457

Please sign in to comment.