ui: ui improvements

This commits makes ui improvements: - Change order of tabs on Statement Details and change Explain Plan to plural - Use one decimal point on Plans Table - Update Text on Statement Diagnostics Modal - Fix radio button selection on Statement Diagnostic Modal Partially Adresses #77982 Fixes #78364 Fixes #78369 Release note: None
cockroachdb · Apr 1, 2022 · b001bb2 · b001bb2
1 parent 4d591d4
commit b001bb2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx
@@ -134,6 +134,7 @@ export function makeExplainPlanColumns(
   handleDetails: (plan: PlanHashStats) => void,
 ): ColumnDescriptor<PlanHashStats>[] {
   const duration = (v: number) => Duration(v * 1e9);
+  const count = (v: number) => v.toFixed(1);
   return [
     {
       name: "planID",
@@ -170,8 +171,10 @@ export function makeExplainPlanColumns(
     {
       name: "avgRowsRead",
       title: planDetailsTableTitles.avgRowsRead(),
-      cell: (item: PlanHashStats) => longToInt(item.stats.rows_read.mean),
-      sort: (item: PlanHashStats) => longToInt(item.stats.rows_read.mean),
+      cell: (item: PlanHashStats) =>
+        formatNumberForDisplay(item.stats.rows_read.mean, count),
+      sort: (item: PlanHashStats) =>
+        formatNumberForDisplay(item.stats.rows_read.mean, count),
     },
     {
       name: "fullScan",

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -750,6 +750,15 @@ export class StatementDetails extends React.Component<
             </Col>
           </Row>
         </TabPane>
+        <TabPane tab="Explain Plans" key="explain-plan">
+          <Row gutter={24}>
+            <Col className="gutter-row" span={24}>
+              <SqlBox value={formatted_query} size={SqlBoxSize.small} />
+            </Col>
+          </Row>
+          <p className={summaryCardStylesCx("summary--card__divider")} />
+          <PlanDetails plans={statement_statistics_per_plan_hash} />
+        </TabPane>
         {!isTenant && !hasViewActivityRedactedRole && (
           <TabPane
             tab={`Diagnostics ${
@@ -772,15 +781,6 @@ export class StatementDetails extends React.Component<
             />
           </TabPane>
         )}
-        <TabPane tab="Explain Plan" key="explain-plan">
-          <Row gutter={24}>
-            <Col className="gutter-row" span={24}>
-              <SqlBox value={formatted_query} size={SqlBoxSize.small} />
-            </Col>
-          </Row>
-          <p className={summaryCardStylesCx("summary--card__divider")} />
-          <PlanDetails plans={statement_statistics_per_plan_hash} />
-        </TabPane>
         <TabPane
           tab="Execution Stats"
           key="execution-stats"

diff --git a/...ui/workspaces/cluster-ui/src/statementsDiagnostics/activateStatementDiagnosticsModal.scss b/...ui/workspaces/cluster-ui/src/statementsDiagnostics/activateStatementDiagnosticsModal.scss
@@ -12,18 +12,30 @@
     display: flex;
     flex-direction: column;
 
+    .ant-radio {
+      top: 0;
+    }
+
     /* Overriding radio button colors. */
     .ant-radio-checked .ant-radio-inner {
       border-color: $colors--primary-blue-3;
-    }
 
-    .ant-radio-checked .ant-radio-inner:after{
-      background-color: $colors--primary-blue-3;
+      &:after {
+        background-color: white;
+        top: 4px;
+        left: 4px;
+        margin-left: 0;
+        margin-top: 0;
+      }
     }
 
     .ant-radio:hover .ant-radio-inner {
       border-color: $colors--primary-blue-3;
     }
+
+    .ant-checkbox-checked .ant-checkbox-inner {
+      background-color: $colors--primary-blue-3;
+    }
   }
 
   &__heading {

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsDiagnostics/activateStatementDiagnosticsModal.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsDiagnostics/activateStatementDiagnosticsModal.tsx
@@ -116,30 +116,28 @@ export const ActivateStatementDiagnosticsModal = React.forwardRef(
       >
         <Text>
           Diagnostics will be collected for the next execution that matches this{" "}
-          <Anchor href={statementsSql}>statement fingerprint</Anchor>, or
-          according to the latency threshold set below. The request is cancelled
-          when a single bundle is captured.{" "}
+          <Anchor href={statementsSql}>statement fingerprint</Anchor>, or when
+          the execution of the statement fingerprint exceeds a specified
+          latency. The request is cancelled when a single bundle is captured.{" "}
           <Anchor href={statementDiagnostics}>Learn more</Anchor>
         </Text>
         <div className={cx("diagnostic__options-container")}>
-          <Text className={cx("diagnostic__heading")}>
-            Collect Diagnostics:
-          </Text>
+          <Text className={cx("diagnostic__heading")}>Collect diagnostics</Text>
           <Radio.Group value={conditional}>
             <Button.Group className={cx("diagnostic__btn-group")}>
               <Radio
                 value={false}
                 className={cx("diagnostic__radio-btn")}
                 onChange={() => setConditional(false)}
               >
-                On the next instance of the statement
+                On the next execution
               </Radio>
               <Radio
                 value={true}
                 className={cx("diagnostic__radio-btn")}
                 onChange={() => setConditional(true)}
               >
-                On the next instance of the statement that runs longer than:
+                On the next execution where the latency exceeds
                 <div className={cx("diagnostic__conditional-container")}>
                   <div className={cx("diagnostic__min-latency-container")}>
                     <Input