fix: Correct time conversion in ProfileOverview component

frontend/package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^18.3.0",
     "antd": "^5.19.1",
     "lodash-es": "^4.17.21",
+    "pretty-ms": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

frontend/src/components/ProfileOverview.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import prettyMilliseconds from 'pretty-ms';
 
 import { IOverview } from '../types/ProfileGraphDashboard';
-import { filterMillisecond } from '../utills';
+
 interface ProfileOverviewProps {
   overviewInfo?: IOverview;
   queryDuration?: number;
@@ -21,7 +22,7 @@ const ProfileOverview: React.FC<ProfileOverviewProps> = ({
       <div className="expensive-nodes-node">
         <div className="expensive-nodes-node-name">Total Execution Time</div>
         <div className="expensive-nodes-node-percentage">
-          ({filterMillisecond(Math.floor(queryDuration/1000/60/24))})
+          ({prettyMilliseconds(Math.floor(queryDuration/1000/60/24))})
           {overviewInfo?.totalTimePercent}
         </div>
       </div>

frontend/src/utills/index.ts

@@ -14,36 +14,6 @@ export function getPercent(numerator: number, denominator: number): string {
   return `${percent.toFixed(1)}%`;
 }
 
-/**
- * Formats a given millisecond value into a human-readable time format.
- * @param {number} milliseconds - The value in milliseconds to be formatted.
- * @returns {string} - The formatted time string.
- */
-export function filterMillisecond(milliseconds: number): string {
-  if (typeof milliseconds !== 'number' || isNaN(milliseconds) || milliseconds < 0) {
-    return "Invalid Input"; // Return error message for invalid input
-  }
-
-  if (milliseconds < 1000) {
-    // Less than 1 second, show in milliseconds
-    return `${milliseconds} ms`;
-  } else if (milliseconds < 60000) {
-    // Less than 1 minute, show in seconds (up to two decimal places)
-    const seconds = (milliseconds / 1000).toFixed(2);
-    return `${seconds} s`;
-  } else if (milliseconds < 3600000) {
-    // Less than 1 hour, show in minutes and seconds
-    const minutes = Math.floor(milliseconds / 60000);
-    const seconds = ((milliseconds % 60000) / 1000).toFixed(2);
-    return `${minutes} min ${seconds} s`;
-  } else {
-    // More than 1 hour, show in hours, minutes, and seconds
-    const hours = Math.floor(milliseconds / 3600000);
-    const minutes = Math.floor((milliseconds % 3600000) / 60000);
-    const seconds = ((milliseconds % 60000) / 1000).toFixed(2);
-    return `${hours} h ${minutes} min ${seconds} s`;
-  }
-}
 
 /**
  * Transforms the errors array by extracting the error type and merging it with the error details.