From d77e06d68808a4232046dc5e683ea8f54ebbaa94 Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Tue, 14 Jun 2022 17:12:51 -0400
Subject: [PATCH] ui: fix contention chart on Statement Details page

This commit adds the proper multiplication factor to
contention value.

It also fixes two small spacing issues.

Release note (bug fix): Use proper multiplying factor to
contention value on Statement Details page.
---
 .../cluster-ui/src/sortedtable/sortedtable.module.scss         | 2 +-
 .../cluster-ui/src/statementDetails/statementDetails.tsx       | 3 ++-
 .../cluster-ui/src/statementDetails/timeseriesUtils.ts         | 2 +-
 .../cluster-ui/src/statementsPage/statementsPage.module.scss   | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.module.scss b/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.module.scss
index 6b47ad81d292..4d0f5c827ae5 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/sortedtable/sortedtable.module.scss
@@ -102,7 +102,7 @@
 }
 
 .cl-table-container {
-  padding: 18px 24px 18px 0px;
+  padding: 20px 24px 18px 0px;
 }
 .cl-table-wrapper {
   padding: 9.55px 20px 17px;
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 6456f73610ac..dae19973f066 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -603,6 +603,7 @@ export class StatementDetails extends React.Component<
         available until the statement is sampled.
       </div>
     );
+    const noSamples = statementSampled ? "" : " (no samples)";
 
     const db = databases ? (
       <Text>{databases}</Text>
@@ -781,7 +782,7 @@ export class StatementDetails extends React.Component<
           <Row gutter={24}>
             <Col className="gutter-row" span={12}>
               <BarGraphTimeSeries
-                title="Contention"
+                title={`Contention${noSamples}`}
                 alignedData={contentionTimeseries}
                 uPlotOptions={contentionOps}
                 tooltip={unavailableTooltip}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts b/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
index f25e6f5f0676..70b522a890e9 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/timeseriesUtils.ts
@@ -86,7 +86,7 @@ export function generateContentionTimeseries(
 
   stats.forEach(function (stat: statementStatisticsPerAggregatedTs) {
     ts.push(TimestampToNumber(stat.aggregated_ts) * 1e3);
-    count.push(stat.stats.exec_stats.contention_time.mean);
+    count.push(stat.stats.exec_stats.contention_time.mean * 1e9);
   });
 
   return [ts, count];
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..de6dc09a9fb7 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
@@ -49,7 +49,7 @@
 .table-area {
   position: relative;
   overflow-x: scroll;
-  min-height: 480px;
+  min-height: 590px;
 }
 
 .reset-btn-area {