play with styles

dashboard/src/main/home/app-dashboard/expanded-app/metrics/MetricsSection.tsx

@@ -53,18 +53,44 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
   }, [currentChart, currentCluster, currentProject]);
 
   return (
-    <MetricsBase
-      services={controllerOptions.map((c) => ({
-        name: c.metadata.name,
-        kind: c.kind,
-        namespace: c.metadata.namespace,
-      }))}
-      timeRangeOptions={["1H", "6H", "1D", "1M"]}
-      initialMetricsOptions={["cpu", "memory", "network"]}
-      autoscaling_enabled={currentChart?.config?.autoscaling?.enabled}
-      project_id={currentProject ? currentProject.id : 0}
-      cluster_id={currentCluster ? currentCluster.id : 0}
-    />
+    <>
+      <MetricsBase
+        services={controllerOptions.map((c) => ({
+          name: c.metadata.name,
+          kind: c.kind,
+          namespace: c.metadata.namespace,
+        }))}
+        timeRangeOptions={["1H", "6H", "1D"]}
+        initialMetricsOptions={["cpu", "memory", "network"]}
+        autoscaling_enabled={currentChart?.config?.autoscaling?.enabled}
+        project_id={currentProject ? currentProject.id : 0}
+        cluster_id={currentCluster ? currentCluster.id : 0}
+      />
+      <MetricsBase
+        services={controllerOptions.map((c) => ({
+          name: c.metadata.name,
+          kind: c.kind,
+          namespace: c.metadata.namespace,
+        }))}
+        timeRangeOptions={["1H", "6H", "1D"]}
+        initialMetricsOptions={["memory", "network", "cpu"]}
+        autoscaling_enabled={currentChart?.config?.autoscaling?.enabled}
+        project_id={currentProject ? currentProject.id : 0}
+        cluster_id={currentCluster ? currentCluster.id : 0}
+      />
+      <MetricsBase
+        services={controllerOptions.map((c) => ({
+          name: c.metadata.name,
+          kind: c.kind,
+          namespace: c.metadata.namespace,
+        }))}
+        timeRangeOptions={["1H", "6H", "1D"]}
+        initialMetricsOptions={["network", "cpu", "memory"]}
+        autoscaling_enabled={currentChart?.config?.autoscaling?.enabled}
+        project_id={currentProject ? currentProject.id : 0}
+        cluster_id={currentCluster ? currentCluster.id : 0}
+      />
+    </>
   );
 };
 

dashboard/src/main/home/app-dashboard/expanded-app/metrics/styles.tsx

@@ -75,6 +75,10 @@ export const MetricsHeader = styled.div`
   align-items: center;
   overflow: visible;
   justify-content: space-between;
+  background: ${(props) => props.theme.clickable.bg};
+  border: 1px solid #494b4f;
+  border-radius: 5px;
+  padding: 20px;
 `;
 
 export const DropdownOverlay = styled.div`
@@ -172,6 +176,11 @@ export const StyledMetricsSection = styled.div`
   width: 100%;
   min-height: 480px;
   height: calc(100vh - 350px);
+  border: 2px solid #ffffff15;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  background: ${(props) => props.theme.fg};
   display: flex;
   flex-direction: column;
   position: relative;