From ebaa1947de0f20ae24af202168bc92d82fc73779 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Mon, 11 Oct 2021 14:32:27 -0500
Subject: [PATCH] Changed number representations in Prometheus dashboard
 (#1101)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 portal-ui/src/common/utils.ts                 | 26 +++++++++++++++++++
 .../Prometheus/Widgets/SingleRepWidget.tsx    | 10 +++++--
 .../Console/Dashboard/Prometheus/utils.tsx    | 19 ++++++++++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/portal-ui/src/common/utils.ts b/portal-ui/src/common/utils.ts
index f6e7205a4..66a1b9e3f 100644
--- a/portal-ui/src/common/utils.ts
+++ b/portal-ui/src/common/utils.ts
@@ -559,3 +559,29 @@ export const prettyNumber = (usage: number | undefined) => {
 
   return usage.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
+
+export const representationNumber = (number: number | undefined) => {
+  if (number === undefined) {
+    return "0";
+  }
+
+  let returnValue = number.toString();
+  let unit = "";
+
+  if (number > 999 && number < 1000000) {
+    returnValue = (number / 1000).toFixed(1); // convert to K, numbers > 999
+    unit = "K";
+  } else if (number >= 1000000 && number < 1000000000) {
+    returnValue = (number / 1000000).toFixed(1); // convert to M, numbers >= 1 million
+    unit = "M";
+  } else if (number >= 1000000000) {
+    returnValue = (number / 1000000000).toFixed(1); // convert to B, numbers >= 1 billion
+    unit = "B";
+  }
+
+  if (returnValue.endsWith(".0")) {
+    returnValue = returnValue.slice(0, -2);
+  }
+
+  return `${returnValue}${unit}`;
+};
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
index eeb067194..8c91b9b90 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx
@@ -27,6 +27,10 @@ import { widgetDetailsToPanel } from "../utils";
 import { CircularProgress } from "@material-ui/core";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import api from "../../../../../common/api";
+import {
+  prettyNumber,
+  representationNumber,
+} from "../../../../../common/utils";
 
 interface ISingleRepWidget {
   classes: any;
@@ -144,10 +148,12 @@ const SingleRepWidget = ({
                 textAnchor="start"
                 dominantBaseline="auto"
                 fontWeight={700}
-                fontSize={70}
+                fontSize={65}
                 fill={"#07193E"}
               >
-                {result ? result.innerLabel : ""}
+                {result
+                  ? representationNumber(parseInt(result.innerLabel || "0"))
+                  : ""}
               </text>
             </AreaChart>
           </ResponsiveContainer>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/utils.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/utils.tsx
index 829f940a8..27cdd538f 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/utils.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/utils.tsx
@@ -21,6 +21,7 @@ import {
   getTimeFromTimestamp,
   niceBytes,
   niceDays,
+  representationNumber,
   textToRGBColor,
   units,
 } from "../../../../common/utils";
@@ -792,15 +793,29 @@ export const widgetDetailsToPanel = (
   return panelItem;
 };
 
+const verifyNumeric = (item: string) => {
+  return !isNaN(parseFloat(item));
+};
+
 export const splitSizeMetric = (val: string) => {
   const splittedText = val.split(" ");
   // Value is not a size metric, we return as common string
+
+  const singleValue = () => {
+    let vl = val;
+
+    if (verifyNumeric(val)) {
+      vl = representationNumber(parseFloat(val));
+    }
+    return <Fragment>{vl}</Fragment>;
+  };
+
   if (splittedText.length !== 2) {
-    return <Fragment>{val}</Fragment>;
+    return singleValue();
   }
 
   if (!units.includes(splittedText[1])) {
-    return <Fragment>{val}</Fragment>;
+    return singleValue();
   }
 
   return (