From b68baf5529a438b63bfda58ff4162bc31cb92ed9 Mon Sep 17 00:00:00 2001 From: Marylia Gutierrez Date: Thu, 16 Jun 2022 19:32:45 -0400 Subject: [PATCH] ui: add period label to SQL Activity pages This commit adds the period label with information about the period to which we're showing information from. The label is added to Statement, Statement Details, Transaction and Transaction Details pages. Partially addresses #82914 Fixes #74523 This commit also removed the tab Exec Stats from the Statement Details page. Fixes #74526 Release note (ui change): Add period label to pages Statement, Statement Details and Transaction, with information about the period to which we're showing information from. Removal of exec stats tab under Statement Details page. --- .../src/pageConfig/pageConfig.module.scss | 2 +- .../src/statementDetails/statementDetails.tsx | 259 ++---------------- .../statementsPage/statementsPage.module.scss | 7 +- .../src/statementsPage/statementsPage.tsx | 4 + .../src/tableStatistics/tableStatistics.tsx | 29 +- .../timeScaleDropdown/timeScale.module.scss | 22 ++ .../cluster-ui/src/timeScaleDropdown/utils.ts | 16 ++ .../transactionDetails/transactionDetails.tsx | 10 + .../src/transactionsPage/transactionsPage.tsx | 4 + 9 files changed, 109 insertions(+), 244 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss index 15a11d5e6d73..205e8038662d 100644 --- a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss +++ b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss @@ -9,7 +9,7 @@ // it's fixed during scrolling, but not when the page // is scrolled to the top. This combination of padding // and negative margins achieves that. - padding-bottom: 10px; + padding-bottom: 5px; padding-top: 10px; margin-bottom: -10px; margin-top: -10px; diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx index 6456f73610ac..c56f84f9339b 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx @@ -16,7 +16,6 @@ import { ArrowLeft } from "@cockroachlabs/icons"; import { Location } from "history"; import _ from "lodash"; import Long from "long"; -import { format as d3Format } from "d3-format"; import { Helmet } from "react-helmet"; import { Link, RouteComponentProps } from "react-router-dom"; import classNames from "classnames/bind"; @@ -26,12 +25,7 @@ import { AxisUnits } from "../graphs"; import { AlignedData, Options } from "uplot"; import { - NumericStat, intersperse, - Bytes, - Duration, - FixLong, - stdDev, unique, queryByName, appAttr, @@ -42,13 +36,11 @@ import { Loading } from "src/loading"; import { Button } from "src/button"; import { SqlBox, SqlBoxSize } from "src/sql"; import { SortSetting } from "src/sortedtable"; -import { Tooltip } from "@cockroachlabs/ui-components"; import { PlanDetails } from "./planDetails"; import { SummaryCard } from "src/summaryCard"; -import { latencyBreakdown, genericBarChart } from "src/barCharts"; import { DiagnosticsView } from "./diagnostics/diagnosticsView"; -import sortedTableStyles from "src/sortedtable/sortedtable.module.scss"; import summaryCardStyles from "src/summaryCard/summaryCard.module.scss"; +import timeScaleStyles from "src/timeScaleDropdown/timeScale.module.scss"; import styles from "./statementDetails.module.scss"; import { commonStyles } from "src/common"; import { NodeSummaryStats } from "../nodes"; @@ -58,6 +50,7 @@ import { StatementDetailsRequest } from "src/api/statementsApi"; import { TimeScale, TimeScaleDropdown, + timeScaleToString, toRoundedDateRange, } from "../timeScaleDropdown"; import SQLActivityError from "../sqlActivity/errorComponent"; @@ -93,25 +86,6 @@ export interface StatementDetailsState { currentTab?: string; } -interface NumericStatRow { - name: string; - value: NumericStat; - bar?: () => ReactNode; - summary?: boolean; - // You can override the table's formatter on a per-row basis with this format - // method. - format?: (v: number) => string; -} - -interface NumericStatTableProps { - title?: string; - description?: string; - measure: string; - rows: NumericStatRow[]; - count: number; - format?: (v: number) => string; -} - export type NodesSummary = { nodeStatuses: cockroach.server.status.statuspb.INodeStatus[]; nodeIDs: string[]; @@ -170,8 +144,8 @@ export type StatementDetailsOwnProps = StatementDetailsDispatchProps & StatementDetailsStateProps; const cx = classNames.bind(styles); -const sortableTableCx = classNames.bind(sortedTableStyles); const summaryCardStylesCx = classNames.bind(summaryCardStyles); +const timeScaleStylesCx = classNames.bind(timeScaleStyles); function getStatementDetailsRequest( timeScale: TimeScale, @@ -191,7 +165,6 @@ function AppLink(props: { app: string }) { if (!props.app) { return (unset); } - const searchParams = new URLSearchParams({ [appAttr]: props.app }); return ( @@ -222,87 +195,6 @@ function renderTransactionType(implicitTxn: boolean) { return "Explicit"; } -class NumericStatTable extends React.Component { - static defaultProps = { - format: (v: number) => `${v}`, - }; - - render() { - const { rows } = this.props; - return ( - - - - - - - - - - {rows.map((row: NumericStatRow, idx) => { - let { format } = this.props; - if (row.format) { - format = row.format; - } - const className = sortableTableCx( - "sort-table__row", - "sort-table__row--body", - { - "sort-table__row--summary": row.summary, - }, - ); - return ( - - - - - - ); - })} - -
- {this.props.title} - - Mean {this.props.measure} - - Standard Deviation -
- {row.name} - - {row.bar ? row.bar() : null} - - {format(stdDev(row.value, this.props.count))} -
- ); - } -} - export class StatementDetails extends React.Component< StatementDetailsProps, StatementDetailsState @@ -492,8 +384,8 @@ export class StatementDetails extends React.Component< renderTabs = (): React.ReactElement => { const { currentTab } = this.state; const { stats } = this.props.statementDetails.statement; - const hasData = Number(stats.count) > 0; + const period = timeScaleToString(this.props.timeScale); return ( - {this.renderOverviewTabContent(hasData)} + {this.renderOverviewTabContent(hasData, period)} - {this.renderExplainPlanTabContent(hasData)} + {this.renderExplainPlanTabContent(hasData, period)} {!this.props.isTenant && !this.props.hasViewActivityRedactedRole && ( )} - - {this.renderExecutionStatsTabContent(hasData)} - ); }; @@ -566,7 +451,10 @@ export class StatementDetails extends React.Component< ); - renderOverviewTabContent = (hasData: boolean): React.ReactElement => { + renderOverviewTabContent = ( + hasData: boolean, + period: string, + ): React.ReactElement => { if (!hasData) { return this.renderNoDataWithTimeScaleAndSqlBoxTabContent(); } @@ -672,6 +560,10 @@ export class StatementDetails extends React.Component< /> +

+ Showing aggregated stats from{" "} + {period} +

@@ -794,7 +686,10 @@ export class StatementDetails extends React.Component< ); }; - renderExplainPlanTabContent = (hasData: boolean): React.ReactElement => { + renderExplainPlanTabContent = ( + hasData: boolean, + period: string, + ): React.ReactElement => { if (!hasData) { return this.renderNoDataWithTimeScaleAndSqlBoxTabContent(); } @@ -810,6 +705,10 @@ export class StatementDetails extends React.Component< /> +

+ Showing explain plans from{" "} + {period} +

@@ -844,118 +743,4 @@ export class StatementDetails extends React.Component< /> ); }; - - renderExecutionStatsTabContent = (hasData: boolean): React.ReactElement => { - if (!hasData) { - return this.renderNoDataTabContent(); - } - const { stats } = this.props.statementDetails.statement; - - const count = FixLong(stats.count).toInt(); - const { statement } = this.props.statementDetails; - const { - parseBarChart, - planBarChart, - runBarChart, - overheadBarChart, - overallBarChart, - } = latencyBreakdown(statement); - return ( - <> - -

- Execution Latency By Phase -
- -
-
i
-
- -
-

- Duration(v * 1e9)} - rows={[ - { name: "Parse", value: stats.parse_lat, bar: parseBarChart }, - { name: "Plan", value: stats.plan_lat, bar: planBarChart }, - { name: "Run", value: stats.run_lat, bar: runBarChart }, - { - name: "Overhead", - value: stats.overhead_lat, - bar: overheadBarChart, - }, - { - name: "Overall", - summary: true, - value: stats.service_lat, - bar: overallBarChart, - }, - ]} - /> - - -

- Other Execution Statistics -

- - - - ); - }; } diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss index c0697df4a4f2..aa2b70da75c8 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss +++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss @@ -1,5 +1,9 @@ @import "src/core/index.module"; +cl-table-container { + padding-top: 10px; +} + .cl-table-statistic { display: flex; justify-content: space-between; @@ -15,8 +19,9 @@ padding: 0px; margin: 0px; color: $colors--neutral-6; - line-height: 1.57; + line-height: $line-height--large; letter-spacing: 0.1px; + display: flex; .label { font-family: $font-family--bold; color: $colors--neutral-7; diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx index fd8f5c856ddf..4f6477cfe137 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx @@ -74,6 +74,7 @@ import { TimeScaleDropdown, TimeScale, toDateRange, + timeScaleToString, } from "../timeScaleDropdown"; import { commonStyles } from "../common"; @@ -556,6 +557,8 @@ export class StatementsPage extends React.Component< isSelectedColumn(userSelectedColumnsToShow, c), ); + const period = timeScaleToString(this.props.timeScale); + return (
@@ -570,6 +573,7 @@ export class StatementsPage extends React.Component< totalCount={totalCount} arrayItemName="statements" activeFilters={activeFilters} + period={period} onClearFilters={this.onClearFilters} />
diff --git a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx index 1bf27b539b86..e29f53eb78ed 100644 --- a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx @@ -13,8 +13,11 @@ import { statisticsClasses } from "../transactionsPage/transactionsPageClasses"; import { ISortedTablePagination } from "../sortedtable"; import { Button } from "src/button"; import { ResultsPerPageLabel } from "src/pagination"; +import classNames from "classnames/bind"; +import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss"; const { statistic, countTitle } = statisticsClasses; +const timeScaleStylesCx = classNames.bind(timeScaleStyles); interface TableStatistics { pagination: ISortedTablePagination; @@ -23,6 +26,7 @@ interface TableStatistics { activeFilters: number; search?: string; onClearFilters?: () => void; + period?: string; } // TableStatistics shows statistics about the results being @@ -37,18 +41,33 @@ export const TableStatistics: React.FC = ({ arrayItemName, onClearFilters, activeFilters, + period, }) => { + const periodLabel = ( + <> +    |   +

+ Showing aggregated stats from{" "} + {period} +

+ + ); + const resultsPerPageLabel = ( - + <> + + {period && periodLabel} + ); const resultsCountAndClear = ( <> {totalCount} {totalCount === 1 ? "result" : "results"} + {period && periodLabel}    |