[#7233] Fix data format for slow query top sql statement data cells

Summary:
Fix total_time number from overlapping with bar plot by changing time units if large enough. The time units consist of milliseconds, seconds, hours, and (however unlikely) hours in scientific notation.
Decrease total width of bar and whiskers plot to account for padding, preventing the graph from
"touching" the adjacent data cell.

Test Plan:
Go to portal and click a universe with an active workload. Scroll down and check the
units under "Total Exec Time" and confirm the spacing.
{F15064}

Reviewers: sshevchenko, mjoshi, ssutar

Reviewed By: ssutar

Subscribers: ui

Differential Revision: https://phabricator.dev.yugabyte.com/D10616

managed/ui/src/components/metrics/MetricsPanel/QueryDisplayPanel.js

@@ -8,7 +8,7 @@ import { useSlowQueriesApi } from '../../queries/queriesHelper';
 import { Highlighter } from '../../../helpers/Highlighter';
 import './MetricsPanel.scss';
 
-const GRAPH_COL_WIDTH = 200;
+const GRAPH_COL_WIDTH = 192;
 export const QueryDisplayPanel = ({ universeUUID }) => {
   const { ysqlQueries, loading, errors } = useSlowQueriesApi({
     universeUUID
@@ -22,9 +22,17 @@ export const QueryDisplayPanel = ({ universeUUID }) => {
   const highestMaxTime = maxBy(topQueries, 'max_time')?.max_time;
 
   const getTimeBarFormat = (num) => {
+    let timeStr = `${num.toFixed(1)} ms`;
+    if (num > 36000000000) { // Ten thousand hours
+      timeStr = `${(num / 3600000.0).toExponential(3)} h`;
+    } else if (num > 3600000) {
+      timeStr = `${(num / 3600000.0).toFixed(2)} h`;
+    } else if (num > 10000) {
+      timeStr = `${(num / 1000.0).toFixed(2)} s`;
+    }
     return (
       <div>
-        {num.toFixed(1)} ms
+        {timeStr}
         <span className="metric-bar" style={{ width: num / highestExecTime * GRAPH_COL_WIDTH }}></span>
       </div>
     );
@@ -33,9 +41,15 @@ export const QueryDisplayPanel = ({ universeUUID }) => {
   const getMeanBarWhiskersFormat = (num, row) => {
     const leftPixel = (row.min_time / highestMaxTime * GRAPH_COL_WIDTH) + 100;
     const widthPixel = (row.max_time - row.min_time) / highestMaxTime * GRAPH_COL_WIDTH;
+    let timeStr = `${num.toFixed(1)} ms`;
+    if (num > 3600000) {
+      timeStr = `${(num / 3600000.0).toFixed(2)} h`;
+    } else if (num > 10000) {
+      timeStr = `${(num / 1000.0).toFixed(2)} s`;
+    }
     return (
       <div>
-        {num.toFixed(1)} ms
+        {timeStr}
         <span className="metric-bar" style={{ width: num / highestMaxTime * GRAPH_COL_WIDTH }}></span>
         <div className="whiskers-plot" style={{ width: `${widthPixel}px`, left: `${leftPixel}px`}}><span className="line"></span></div>
       </div>