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"))
+ : ""}
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 {vl};
+ };
+
if (splittedText.length !== 2) {
- return {val};
+ return singleValue();
}
if (!units.includes(splittedText[1])) {
- return {val};
+ return singleValue();
}
return (