Merge cockroachdb#92765

92765: ui: ux improvements r=maryliag a=maryliag This commit adds UX improvements, such as: - Add spacing on Table Details page Before <img width="1219" alt="Screen Shot 2022-11-30 at 2 24 03 PM" src="https://user-images.githubusercontent.com/1017486/204894284-6a055ee1-9c58-4be6-be7d-35caf363a38b.png"> After <img width="1372" alt="Screen Shot 2022-11-30 at 2 36 29 PM" src="https://user-images.githubusercontent.com/1017486/204894309-fa88995d-cfa2-4c9d-beec-5074144937db.png"> - Add spacing on Index Details page and change the sql box size Before <img width="1214" alt="Screen Shot 2022-11-30 at 2 39 09 PM" src="https://user-images.githubusercontent.com/1017486/204894331-897826f1-dfd7-4105-a1ce-ab3d217d751d.png"> After <img width="1179" alt="Screen Shot 2022-11-30 at 2 41 56 PM" src="https://user-images.githubusercontent.com/1017486/204894372-c6e9a309-4af5-4f58-85a5-eaa393b8831e.png"> - Rename `Statement Execution and Planning Time` chart on Statement Details page to `Statement Times` Before <img width="774" alt="Screen Shot 2022-11-30 at 2 50 34 PM" src="https://user-images.githubusercontent.com/1017486/204894645-2d1c3d66-fd41-405d-b071-b13600a969eb.png"> After <img width="752" alt="Screen Shot 2022-11-30 at 2 50 01 PM" src="https://user-images.githubusercontent.com/1017486/204894667-500d25dc-59dc-4dd0-bda4-a198190bd42a.png"> Epic: None Release note (ui change): Rename chart on Statement Details page from `Statement Execution and Planning Time` to `Statement Times`. Co-authored-by: maryliag <[email protected]>
healthy-pod · Nov 30, 2022 · 7e04319 · 7e04319
2 parents 5ae6412 + 4579f82
commit 7e04319
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
@@ -76,7 +76,7 @@
     padding-right: 9px;
     padding-left: 9px;
     margin-right: -9px;
-    margin-left: -9px;
+    margin-left: 9px;
   }
 
   &__header {
@@ -157,3 +157,7 @@
   font-weight: $font-weight--extra-bold;
   color: $colors--neutral-8;
 }
+
+.row-spaced {
+  margin-top: 20px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -621,7 +621,7 @@ export class DatabaseTablePage extends React.Component<
                         </SummaryCard>
                       </Col>
                     </Row>
-                    <Row gutter={18}>
+                    <Row gutter={18} className={cx("row-spaced")}>
                       <SummaryCard
                         className={cx(
                           "summary-card",

diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss
@@ -73,6 +73,7 @@
   &--row {
     background-color: $adminui-white;
     letter-spacing: 0.33px;
+    margin-left: 1px;
   }
   &--label {
     font-family: $font-family--semi-bold;
@@ -136,3 +137,8 @@
     text-decoration: underline;
   }
 }
+
+.row-spaced {
+  margin-top: 20px;
+}
+
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
@@ -17,7 +17,7 @@ import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses
 import { CaretRight } from "../icon/caretRight";
 import { BreadcrumbItem, Breadcrumbs } from "../breadcrumbs";
 import { Caution, Search as IndexIcon } from "@cockroachlabs/icons";
-import { SqlBox } from "src/sql";
+import { SqlBox, SqlBoxSize } from "src/sql";
 import { Col, Row, Tooltip } from "antd";
 import "antd/lib/col/style";
 import "antd/lib/row/style";
@@ -257,7 +257,10 @@ export class IndexDetailsPage extends React.Component<
           <section className={baseHeadingClasses.wrapper}>
             <Row gutter={18}>
               <Col className="gutter-row" span={18}>
-                <SqlBox value={this.props.details.createStatement} />
+                <SqlBox
+                  value={this.props.details.createStatement}
+                  size={SqlBoxSize.custom}
+                />
               </Col>
             </Row>
             <Row gutter={18}>
@@ -306,7 +309,7 @@ export class IndexDetailsPage extends React.Component<
                 </SummaryCard>
               </Col>
             </Row>
-            <Row gutter={18}>
+            <Row gutter={18} className={cx("row-spaced")}>
               <Col className="gutter-row" span={18}>
                 <SummaryCard className={cx("summary-card--row")}>
                   <Heading type="h5">Index recommendations</Heading>

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -689,7 +689,7 @@ export class StatementDetails extends React.Component<
           <Row gutter={24}>
             <Col className="gutter-row" span={12}>
               <BarGraphTimeSeries
-                title="Statement Execution and Planning Time"
+                title="Statement Times"
                 alignedData={executionAndPlanningTimeseries}
                 uPlotOptions={executionAndPlanningOps}
                 yAxisUnits={AxisUnits.Duration}