Changed x axis notation to display date indicator in zoom mode (#2221)

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

portal-ui/src/common/utils.ts

@@ -553,9 +553,14 @@ export const niceDaysInt = (seconds: number, timeVariant: string = "s") => {
   }`;
 };
 
+const twoDigitsNumberString = (value: number) => {
+  return `${value < 10 ? "0" : ""}${value}`;
+};
+
 export const getTimeFromTimestamp = (
   timestamp: string,
-  fullDate: boolean = false
+  fullDate: boolean = false,
+  simplifiedDate: boolean = false
 ) => {
   const timestampToInt = parseInt(timestamp);
   if (isNaN(timestampToInt)) {
@@ -564,7 +569,15 @@ export const getTimeFromTimestamp = (
   const dateObject = new Date(timestampToInt * 1000);
 
   if (fullDate) {
-    return dateObject.toLocaleString();
+    if (simplifiedDate) {
+      return `${twoDigitsNumberString(
+        dateObject.getMonth() + 1
+      )}/${twoDigitsNumberString(dateObject.getDate())} ${twoDigitsNumberString(
+        dateObject.getHours()
+      )}:${twoDigitsNumberString(dateObject.getMinutes())}`;
+    } else {
+      return dateObject.toLocaleString();
+    }
   }
   return `${dateObject.getHours()}:${String(dateObject.getMinutes()).padStart(
     2,

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LinearGraphWidget.tsx

@@ -54,7 +54,7 @@ interface ILinearGraphWidget {
   apiPrefix: string;
   hideYAxis?: boolean;
   yAxisFormatter?: (item: string) => string;
-  xAxisFormatter?: (item: string) => string;
+  xAxisFormatter?: (item: string, var1: boolean, var2: boolean) => string;
   areaWidget?: boolean;
   zoomActivated?: boolean;
 }
@@ -105,7 +105,7 @@ const LinearGraphWidget = ({
   hideYAxis = false,
   areaWidget = false,
   yAxisFormatter = (item: string) => item,
-  xAxisFormatter = (item: string) => item,
+  xAxisFormatter = (item: string, var1: boolean, var2: boolean) => item,
   zoomActivated = false,
 }: ILinearGraphWidget) => {
   const dispatch = useAppDispatch();
@@ -190,6 +190,12 @@ const LinearGraphWidget = ({
   const theme = useTheme();
   const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
 
+  let dspLongDate = false;
+
+  if (zoomActivated) {
+    dspLongDate = true;
+  }
+
   return (
     <Box className={zoomActivated ? "" : classes.singleValueContainer}>
       {!zoomActivated && (
@@ -257,7 +263,9 @@ const LinearGraphWidget = ({
                   />
                   <XAxis
                     dataKey="name"
-                    tickFormatter={(value: any) => xAxisFormatter(value)}
+                    tickFormatter={(value: any) =>
+                      xAxisFormatter(value, dspLongDate, true)
+                    }
                     interval={intervalCount}
                     tick={{
                       fontSize: "68%",