Skip to content

Commit

Permalink
ui: add limit and sort to fingerprints pages
Browse files Browse the repository at this point in the history 
This commit adds new knobs to the sql stats
fingerprint pages. Users can now specify a
limit and sort priority with their sql stats
fingerprints requests.

Closes: cockroachdb#97876
Part of: cockroachdb#97875

Release note: None
  • Loading branch information
@xinhaoz @maryliag
xinhaoz authored and maryliag committed Mar 18, 2023
1 parent 84956ac commit 48d6856
Show file tree
Hide file tree
Showing 18 changed files with 409 additions and 83 deletions.
37 changes: 36 additions & 1 deletion pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,46 @@ export type ErrorWithKey = {
key: string;
};

export const SqlStatsSortOptions = cockroach.server.serverpb.StatsSortOptions;
export type SqlStatsSortType = cockroach.server.serverpb.StatsSortOptions;

export const DEFAULT_STATS_REQ_OPTIONS = {
limit: 100,
sort: SqlStatsSortOptions.SERVICE_LAT,
};

// THhe required fields to create a stmts request.
type StmtReqFields = {
limit: number;
sort: SqlStatsSortType;
start: moment.Moment;
end: moment.Moment;
};

export function createCombinedStmtsRequest({
limit,
sort,
start,
end,
}: StmtReqFields): StatementsRequest {
return new cockroach.server.serverpb.StatementsRequest({
combined: true,
start: Long.fromNumber(start.unix()),
end: Long.fromNumber(end.unix()),
limit: Long.fromNumber(limit ?? DEFAULT_STATS_REQ_OPTIONS.limit),
sort,
});
}

export const getCombinedStatements = (
req: StatementsRequest,
): Promise<cockroach.server.serverpb.StatementsResponse> => {
): Promise<SqlStatsResponse> => {
const queryStr = propsToQueryString({
start: req.start.toInt(),
end: req.end.toInt(),
fetch_mode: cockroach.server.serverpb.StatsFetchMode.StmtStatsOnly,
limit: req.limit.toInt(),
sort: req.sort,
});
return fetchData(
cockroach.server.serverpb.StatementsResponse,
Expand All @@ -65,6 +98,8 @@ export const getFlushedTxnStatsApi = (
end: req.end.toInt(),
combined: true,
fetch_mode: cockroach.server.serverpb.StatsFetchMode.TxnStatsOnly,
limit: req.limit.toInt(),
sort: req.sort,
});
return fetchData(
cockroach.server.serverpb.StatementsResponse,
Expand Down
5 changes: 5 additions & 0 deletions pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { StatementDiagnosticsReport } from "../api";
import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
import ILatencyInfo = cockroach.sql.ILatencyInfo;
import { AggregateStatistics } from "src/statementsTable";
import { DEFAULT_STATS_REQ_OPTIONS } from "../api/statementsApi";

type IStatementStatistics = protos.cockroach.sql.IStatementStatistics;
type IExecStats = protos.cockroach.sql.IExecStats;
Expand Down Expand Up @@ -587,6 +588,8 @@ const statementsPagePropsFixture: StatementsPageProps = {
// Aggregate key values in these statements will need to change if implementation
// of 'statementKey' in appStats.ts changes.
statementsError: null,
limit: DEFAULT_STATS_REQ_OPTIONS.limit,
reqSortSetting: DEFAULT_STATS_REQ_OPTIONS.sort,
timeScale: {
windowSize: moment.duration(5, "day"),
sampleSize: moment.duration(5, "minutes"),
Expand Down Expand Up @@ -615,6 +618,8 @@ const statementsPagePropsFixture: StatementsPageProps = {
onColumnsChange: noop,
onSortingChange: noop,
onFilterChange: noop,
onChangeLimit: noop,
onChangeReqSort: noop,
};

export const statementsPagePropsWithRequestError: StatementsPageProps = {
Expand Down
105 changes: 80 additions & 25 deletions pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,16 @@ import {
import { ISortedTablePagination } from "../sortedtable";
import styles from "./statementsPage.module.scss";
import { EmptyStatementsPlaceholder } from "./emptyStatementsPlaceholder";
import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
import { InlineAlert } from "@cockroachlabs/ui-components";
import sortableTableStyles from "src/sortedtable/sortedtable.module.scss";
import ColumnsSelector from "../columnsSelector/columnsSelector";
import { SelectOption } from "../multiSelectCheckbox/multiSelectCheckbox";
import { UIConfigState } from "../store";
import { StatementsRequest } from "src/api/statementsApi";
import Long from "long";
import {
SqlStatsSortType,
StatementsRequest,
createCombinedStmtsRequest,
} from "src/api/statementsApi";
import ClearStats from "../sqlActivity/clearStats";
import LoadingError from "../sqlActivity/errorComponent";
import {
Expand All @@ -78,7 +80,14 @@ import {
StatementDiagnosticsReport,
} from "../api";
import { filteredStatementsData } from "../sqlActivity/util";
import { STATS_LONG_LOADING_DURATION } from "../util/constants";
import { Dropdown } from "src/dropdown";
import {
STATS_LONG_LOADING_DURATION,
limitOptions,
requestSortOptions,
getSortLabel,
} from "src/util/sqlActivityConstants";
import { Button } from "src/button";

const cx = classNames.bind(styles);
const sortableTableCx = classNames.bind(sortableTableStyles);
Expand Down Expand Up @@ -114,14 +123,17 @@ export interface StatementsPageDispatchProps {
onStatementClick?: (statement: string) => void;
onColumnsChange?: (selectedColumns: string[]) => void;
onTimeScaleChange: (ts: TimeScale) => void;
onChangeLimit: (limit: number) => void;
onChangeReqSort: (sort: SqlStatsSortType) => void;
}

export interface StatementsPageStateProps {
statements: AggregateStatistics[];
isDataValid: boolean;
isReqInFlight: boolean;
lastUpdated: moment.Moment | null;
timeScale: TimeScale;
limit: number;
reqSortSetting: SqlStatsSortType;
statementsError: Error | null;
apps: string[];
databases: string[];
Expand All @@ -141,17 +153,27 @@ export interface StatementsPageState {
pagination: ISortedTablePagination;
filters?: Filters;
activeFilters?: number;
timeScale: TimeScale;
limit: number;
reqSortSetting: SqlStatsSortType;
}

export type StatementsPageProps = StatementsPageDispatchProps &
StatementsPageStateProps &
RouteComponentProps<unknown>;

function stmtsRequestFromTimeScale(ts: TimeScale): StatementsRequest {
const [start, end] = toRoundedDateRange(ts);
return new cockroach.server.serverpb.CombinedStatementsStatsRequest({
start: Long.fromNumber(start.unix()),
end: Long.fromNumber(end.unix()),
type RequestParams = Pick<
StatementsPageState,
"limit" | "reqSortSetting" | "timeScale"
>;

function stmtsRequestFromParams(params: RequestParams): StatementsRequest {
const [start, end] = toRoundedDateRange(params.timeScale);
return createCombinedStmtsRequest({
start,
end,
limit: params.limit,
sort: params.reqSortSetting,
});
}

Expand Down Expand Up @@ -191,6 +213,9 @@ export class StatementsPage extends React.Component<
pageSize: 20,
current: 1,
},
limit: this.props.limit,
timeScale: this.props.timeScale,
reqSortSetting: this.props.reqSortSetting,
};
const stateFromHistory = this.getStateFromHistory();
this.state = merge(defaultState, stateFromHistory);
Expand Down Expand Up @@ -250,9 +275,17 @@ export class StatementsPage extends React.Component<
};

changeTimeScale = (ts: TimeScale): void => {
if (this.props.onTimeScaleChange) {
this.props.onTimeScaleChange(ts);
}
this.setState(prevState => ({
...prevState,
timeScale: ts,
}));
};

updateRequestParams = (): void => {
this.props.onChangeLimit(this.state.limit);
this.props.onChangeReqSort(this.state.reqSortSetting);
this.props.onTimeScaleChange(this.state.timeScale);
this.refreshStatements();
};

resetPagination = (): void => {
Expand All @@ -267,7 +300,7 @@ export class StatementsPage extends React.Component<
};

refreshStatements = (): void => {
const req = stmtsRequestFromTimeScale(this.props.timeScale);
const req = stmtsRequestFromParams(this.state);
this.props.refreshStatements(req);
};

Expand Down Expand Up @@ -336,21 +369,14 @@ export class StatementsPage extends React.Component<
);
}

componentDidUpdate = (prevProps: StatementsPageProps): void => {
componentDidUpdate = (): void => {
this.updateQueryParams();
if (!this.props.isTenant) {
this.props.refreshNodes();
if (!this.props.hasViewActivityRedactedRole) {
this.props.refreshStatementDiagnosticsRequests();
}
}

if (
prevProps.timeScale !== this.props.timeScale ||
(prevProps.isDataValid && !this.props.isDataValid)
) {
this.refreshStatements();
}
};

componentWillUnmount(): void {
Expand All @@ -359,8 +385,11 @@ export class StatementsPage extends React.Component<

onChangePage = (current: number): void => {
const { pagination } = this.state;
this.setState({ pagination: { ...pagination, current } });
this.props.onPageChanged != null && this.props.onPageChanged(current);
this.setState(prevState => ({
...prevState,
pagination: { ...pagination, current },
}));
this.props.onPageChanged(current);
};

onSubmitSearchField = (search: string): void => {
Expand Down Expand Up @@ -440,6 +469,14 @@ export class StatementsPage extends React.Component<
);
};

onChangeLimit = (newLimit: number): void => {
this.setState(prevState => ({ ...prevState, limit: newLimit }));
};

onChangeReqSort = (newSort: SqlStatsSortType): void => {
this.setState(prevState => ({ ...prevState, reqSortSetting: newSort }));
};

renderStatements = (regions: string[]): React.ReactElement => {
const { pagination, filters, activeFilters } = this.state;
const {
Expand Down Expand Up @@ -612,12 +649,30 @@ export class StatementsPage extends React.Component<
/>
</PageConfigItem>
<PageConfigItem className={commonStyles("separator")}>
<Dropdown items={limitOptions} onChange={this.onChangeLimit}>
Limit: {this.state.limit ?? "N/A"}
</Dropdown>
</PageConfigItem>
<PageConfigItem>
<Dropdown
items={requestSortOptions}
onChange={this.onChangeReqSort}
>
Sort By: {getSortLabel(this.state.reqSortSetting)}
</Dropdown>
</PageConfigItem>
<PageConfigItem>
<TimeScaleDropdown
options={timeScale1hMinOptions}
currentScale={this.props.timeScale}
currentScale={this.state.timeScale}
setTimeScale={this.changeTimeScale}
/>
</PageConfigItem>
<PageConfigItem>
<Button size="small" onClick={this.updateRequestParams}>
Submit Request
</Button>
</PageConfigItem>
{hasAdminRole && (
<PageConfigItem
className={`${commonStyles("separator")} ${cx(
Expand Down
20 changes: 17 additions & 3 deletions pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ import { Dispatch } from "redux";
import { AppState, uiConfigActions } from "src/store";
import { actions as statementDiagnosticsActions } from "src/store/statementDiagnostics";
import { actions as analyticsActions } from "src/store/analytics";
import { actions as localStorageActions } from "src/store/localStorage";
import {
actions as localStorageActions,
updateStmtsPageLimitAction,
updateStmsPageReqSortAction,
} from "src/store/localStorage";
import { actions as sqlStatsActions } from "src/store/sqlStats";
import { actions as databasesListActions } from "src/store/databasesList";
import { actions as nodesActions } from "../store/nodes";
Expand All @@ -38,14 +42,18 @@ import {
selectSearch,
selectStatementsLastUpdated,
} from "./statementsPage.selectors";
import { selectTimeScale } from "../store/utils/selectors";
import {
selectTimeScale,
selectStmtsPageLimit,
selectStmtsPageReqSort,
} from "../store/utils/selectors";
import {
selectIsTenant,
selectHasViewActivityRedactedRole,
selectHasAdminRole,
} from "../store/uiConfig";
import { nodeRegionsByIDSelector } from "../store/nodes";
import { StatementsRequest } from "src/api/statementsApi";
import { SqlStatsSortType, StatementsRequest } from "src/api/statementsApi";
import { TimeScale } from "../timeScaleDropdown";
import {
StatementsPageRoot,
Expand Down Expand Up @@ -102,6 +110,8 @@ export const ConnectedStatementsPage = withRouter(
lastUpdated: selectStatementsLastUpdated(state),
statementsError: selectStatementsLastError(state),
totalFingerprints: selectTotalFingerprints(state),
limit: selectStmtsPageLimit(state),
reqSortSetting: selectStmtsPageReqSort(state),
},
activePageProps: mapStateToRecentStatementsPageProps(state),
}),
Expand Down Expand Up @@ -241,6 +251,10 @@ export const ConnectedStatementsPage = withRouter(
selectedColumns.length === 0 ? " " : selectedColumns.join(","),
}),
),
onChangeLimit: (limit: number) =>
dispatch(updateStmtsPageLimitAction(limit)),
onChangeReqSort: (sort: SqlStatsSortType) =>
dispatch(updateStmsPageReqSortAction(sort)),
},
activePageProps: mapDispatchToRecentStatementsPageProps(dispatch),
}),
Expand Down
Loading

0 comments on commit 48d6856

Please sign in to comment.