-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: add new search criteria to SQL Activity page
Create new Search Criteria component, and add to Statements and Transactions page. This commit also updates the UI, with the new position of filters and reset sql stats. Part Of #98891 Release note (ui change): Add Search Criteria to Statements and Transactions pages, updates UX with improvements.
- Loading branch information
Showing
24 changed files
with
519 additions
and
322 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // Copyright 2023 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. | ||
|
|
||
| export * from "./searchCriteria"; |
29 changes: 29 additions & 0 deletions
29
pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @import "../core/index.module"; | ||
|
|
||
| .search-area { | ||
| border: 1px solid $colors--neutral-3; | ||
| border-radius: 3px; | ||
| margin-bottom: 10px; | ||
| margin-right: 10px; | ||
| padding: 20px; | ||
| background-color: white; | ||
| } | ||
|
|
||
| .top-area { | ||
| z-index: 5; | ||
| background-color: white; | ||
| } | ||
|
|
||
| .timescale-small { | ||
| width: 455px; | ||
| } | ||
|
|
||
| .label { | ||
| color: $colors--neutral-6; | ||
| font-family: $font-family--semi-bold; | ||
| font-size: $font-size--medium; | ||
| } | ||
|
|
||
| .margin-top-btn { | ||
| margin-top: 22px; | ||
| } |
126 changes: 126 additions & 0 deletions
126
pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| // Copyright 2023 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 "./searchCriteria.module.scss"; | ||
| import { | ||
| Button, | ||
| commonStyles, | ||
| PageConfig, | ||
| PageConfigItem, | ||
| selectCustomStyles, | ||
| TimeScale, | ||
| timeScale1hMinOptions, | ||
| TimeScaleDropdown, | ||
| } from "src"; | ||
| import { applyBtn } from "../queryFilter/filterClasses"; | ||
| import Select from "react-select"; | ||
| import { limitOptions } from "../util/sqlActivityConstants"; | ||
| import { SqlStatsSortType } from "src/api/statementsApi"; | ||
| const cx = classNames.bind(styles); | ||
|
|
||
| type SortOption = { | ||
| label: string; | ||
| value: SqlStatsSortType; | ||
| }; | ||
| export interface SearchCriteriaProps { | ||
| sortOptions: SortOption[]; | ||
| currentScale: TimeScale; | ||
| topValue: number; | ||
| byValue: SqlStatsSortType; | ||
| onChangeTimeScale: (ts: TimeScale) => void; | ||
| onChangeTop: (top: number) => void; | ||
| onChangeBy: (by: SqlStatsSortType) => void; | ||
| onApply: () => void; | ||
| } | ||
|
|
||
| export function SearchCriteria(props: SearchCriteriaProps): React.ReactElement { | ||
| const { | ||
| topValue, | ||
| byValue, | ||
| currentScale, | ||
| onChangeTop, | ||
| onChangeBy, | ||
| onChangeTimeScale, | ||
| sortOptions, | ||
| } = props; | ||
| const customStyles = { ...selectCustomStyles }; | ||
| customStyles.indicatorSeparator = (provided: any) => ({ | ||
| ...provided, | ||
| display: "none", | ||
| }); | ||
|
|
||
| const customStylesTop = { ...customStyles }; | ||
| customStylesTop.container = (provided: any) => ({ | ||
| ...provided, | ||
| width: "80px", | ||
| border: "none", | ||
| }); | ||
|
|
||
| const customStylesBy = { ...customStyles }; | ||
| customStylesBy.container = (provided: any) => ({ | ||
| ...provided, | ||
| width: "170px", | ||
| border: "none", | ||
| }); | ||
|
|
||
| return ( | ||
| <div className={cx("search-area")}> | ||
| <h5 className={commonStyles("base-heading")}>Search Criteria</h5> | ||
| <PageConfig className={cx("top-area")}> | ||
| <PageConfigItem> | ||
| <label> | ||
| <span className={cx("label")}>Top</span> | ||
| <Select | ||
| options={limitOptions} | ||
| value={limitOptions.filter(top => top.value === topValue)} | ||
| onChange={event => onChangeTop(event.value)} | ||
| styles={customStylesTop} | ||
| /> | ||
| </label> | ||
| </PageConfigItem> | ||
| <PageConfigItem> | ||
| <label> | ||
| <span className={cx("label")}>By</span> | ||
| <Select | ||
| options={sortOptions} | ||
| value={sortOptions.filter( | ||
| (top: SortOption) => top.value === byValue, | ||
| )} | ||
| onChange={event => onChangeBy(event.value as SqlStatsSortType)} | ||
| styles={customStylesBy} | ||
| /> | ||
| </label> | ||
| </PageConfigItem> | ||
| <PageConfigItem> | ||
| <label> | ||
| <span className={cx("label")}>Time Range</span> | ||
| <TimeScaleDropdown | ||
| options={timeScale1hMinOptions} | ||
| currentScale={currentScale} | ||
| setTimeScale={onChangeTimeScale} | ||
| className={cx("timescale-small")} | ||
| /> | ||
| </label> | ||
| </PageConfigItem> | ||
| <PageConfigItem> | ||
| <Button | ||
| className={`${applyBtn.btn} ${cx("margin-top-btn")}`} | ||
| textAlign="center" | ||
| onClick={props.onApply} | ||
| > | ||
| Apply | ||
| </Button> | ||
| </PageConfigItem> | ||
| </PageConfig> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.