Changed number representations in Prometheus dashboard (#1101)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

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}`;
+};

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>

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 (