diff --git a/web/src/pages/Cluster/components/index_metric.jsx b/web/src/pages/Cluster/components/index_metric.jsx
index a4533966..19619721 100644
--- a/web/src/pages/Cluster/components/index_metric.jsx
+++ b/web/src/pages/Cluster/components/index_metric.jsx
@@ -72,10 +72,12 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   );
 
   const metrics = React.useMemo(() => {
-    return _.groupBy(value?.metrics, "group");
-    // return Object.values(value?.metrics || {}).sort(
-    //   (a, b) => a.order - b.order
-    // );
+    const grpMetrics = _.groupBy(value?.metrics, "group");
+    let metrics = {};
+    Object.keys(grpMetrics).forEach((k) => {
+      metrics[k] = (grpMetrics[k] || []).sort((a, b) => a.order - b.order);
+    });
+    return metrics;
   }, [value]);
 
   const chartRefs = React.useRef();
diff --git a/web/src/pages/Cluster/components/node_metric.jsx b/web/src/pages/Cluster/components/node_metric.jsx
index 271ef782..2399c137 100644
--- a/web/src/pages/Cluster/components/node_metric.jsx
+++ b/web/src/pages/Cluster/components/node_metric.jsx
@@ -80,10 +80,12 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
   );
 
   const metrics = React.useMemo(() => {
-    return _.groupBy(value?.metrics, "group");
-    // return Object.values(value?.metrics || {}).sort(
-    //   (a, b) => a.order - b.order
-    // );
+    const grpMetrics = _.groupBy(value?.metrics, "group");
+    let metrics = {};
+    Object.keys(grpMetrics).forEach((k) => {
+      metrics[k] = (grpMetrics[k] || []).sort((a, b) => a.order - b.order);
+    });
+    return metrics;
   }, [value]);
 
   const chartRefs = React.useRef();