From 5eb673312691f6bb6c2d9771fcd412a0876bc7d2 Mon Sep 17 00:00:00 2001
From: Eric <menwe@amazon.com>
Date: Tue, 5 Nov 2024 07:32:23 +0000
Subject: [PATCH] initial kubernetes dashboards skeleton

Signed-off-by: Eric <menwe@amazon.com>
---
 public/components/app.tsx                     |   2 +
 .../kubernetes/cluster/overview.tsx           |   4 +
 .../kubernetes/common/gourp_dashboards.tsx    | 196 ++++++++++++++++++
 public/components/kubernetes/home.tsx         |  11 +
 4 files changed, 213 insertions(+)
 create mode 100644 public/components/kubernetes/cluster/overview.tsx
 create mode 100644 public/components/kubernetes/common/gourp_dashboards.tsx
 create mode 100644 public/components/kubernetes/home.tsx

diff --git a/public/components/app.tsx b/public/components/app.tsx
index 6ccf017fc7..4dc7c759ef 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -23,6 +23,7 @@ import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 import { Home as GettingStartedHome } from './getting_started/home';
 import { Home as OverviewHome } from './overview/home';
+import { Home as KubernetesHome } from './kubernetes/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
@@ -56,6 +57,7 @@ const pages = {
   dataconnections: DataConnectionsHome,
   gettingStarted: GettingStartedHome,
   overview: OverviewHome,
+  kubernetes: KubernetesHome,
 };
 
 export const App = ({
diff --git a/public/components/kubernetes/cluster/overview.tsx b/public/components/kubernetes/cluster/overview.tsx
new file mode 100644
index 0000000000..a850c1690e
--- /dev/null
+++ b/public/components/kubernetes/cluster/overview.tsx
@@ -0,0 +1,4 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
diff --git a/public/components/kubernetes/common/gourp_dashboards.tsx b/public/components/kubernetes/common/gourp_dashboards.tsx
new file mode 100644
index 0000000000..11d7f298f8
--- /dev/null
+++ b/public/components/kubernetes/common/gourp_dashboards.tsx
@@ -0,0 +1,196 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPanel, EuiText, EuiFlexItem } from '@elastic/eui';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+// import MetricCard from '../common/MetricCard';
+// import TimeSeriesChart from '../common/TimeSeriesChart';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+export const GroupDashboards = () => {
+  // Define layouts for different breakpoints
+  const layouts = {
+    lg: [
+      { i: 'globalCPUUsage', x: 0, y: 0, w: 2, h: 1 },
+      { i: 'globalRAMUsage', x: 2, y: 0, w: 2, h: 1 },
+      { i: 'nodes', x: 4, y: 0, w: 1, h: 1 },
+      { i: 'namespaces', x: 5, y: 0, w: 1, h: 1 },
+      { i: 'runningPods', x: 6, y: 0, w: 1, h: 1 },
+
+      { i: 'clusterCPUUtilization', x: 0, y: 1, w: 3, h: 1 },
+      { i: 'clusterMemoryUtilization', x: 3, y: 1, w: 4, h: 1 },
+
+      { i: 'cpuUsage', x: 0, y: 2, w: 3, h: 1 },
+      { i: 'ramUsage', x: 3, y: 2, w: 4, h: 1 },
+
+      { i: 'networkTraffic', x: 0, y: 3, w: 4, h: 2 },
+      { i: 'diskIO', x: 4, y: 3, w: 3, h: 2 },
+
+      { i: 'cpuUsageByNamespace', x: 0, y: 5, w: 4, h: 2 },
+      { i: 'memoryUsageByNamespace', x: 4, y: 5, w: 3, h: 2 },
+    ],
+    md: [
+      { i: 'globalCPUUsage', x: 0, y: 0, w: 2, h: 1 },
+      { i: 'globalRAMUsage', x: 2, y: 0, w: 2, h: 1 },
+      { i: 'nodes', x: 4, y: 0, w: 1, h: 1 },
+      { i: 'namespaces', x: 5, y: 0, w: 1, h: 1 },
+      { i: 'runningPods', x: 6, y: 0, w: 1, h: 1 },
+
+      { i: 'clusterCPUUtilization', x: 0, y: 1, w: 3, h: 1 },
+      { i: 'clusterMemoryUtilization', x: 3, y: 1, w: 4, h: 1 },
+
+      { i: 'cpuUsage', x: 0, y: 2, w: 3, h: 1 },
+      { i: 'ramUsage', x: 3, y: 2, w: 4, h: 1 },
+
+      { i: 'networkTraffic', x: 0, y: 3, w: 4, h: 2 },
+      { i: 'diskIO', x: 4, y: 3, w: 3, h: 2 },
+
+      { i: 'cpuUsageByNamespace', x: 0, y: 5, w: 4, h: 2 },
+      { i: 'memoryUsageByNamespace', x: 4, y: 5, w: 3, h: 2 },
+    ],
+    sm: [
+      { i: 'globalCPUUsage', x: 0, y: 0, w: 2, h: 1 },
+      { i: 'globalRAMUsage', x: 0, y: 1, w: 2, h: 1 },
+      { i: 'nodes', x: 0, y: 2, w: 1, h: 1 },
+      { i: 'namespaces', x: 1, y: 2, w: 1, h: 1 },
+      { i: 'runningPods', x: 0, y: 3, w: 2, h: 1 },
+
+      { i: 'clusterCPUUtilization', x: 0, y: 4, w: 2, h: 1 },
+      { i: 'clusterMemoryUtilization', x: 0, y: 5, w: 2, h: 1 },
+
+      { i: 'cpuUsage', x: 0, y: 6, w: 2, h: 1 },
+      { i: 'ramUsage', x: 0, y: 7, w: 2, h: 1 },
+
+      { i: 'networkTraffic', x: 0, y: 8, w: 2, h: 2 },
+      { i: 'diskIO', x: 0, y: 10, w: 2, h: 2 },
+
+      { i: 'cpuUsageByNamespace', x: 0, y: 12, w: 2, h: 2 },
+      { i: 'memoryUsageByNamespace', x: 0, y: 14, w: 2, h: 2 },
+    ],
+  };
+
+  return (
+    <ResponsiveGridLayout
+      className="layout"
+      layouts={layouts}
+      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+      cols={{ lg: 7, md: 7, sm: 2, xs: 1, xxs: 1 }}
+      rowHeight={200} // Increased row height for more vertical space
+      isDraggable={true}
+      isResizable={true}
+      width={window.innerWidth}
+    >
+      {/* Define each panel as in previous code with adjusted layout keys */}
+
+      <EuiFlexItem key="globalCPUUsage">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Global CPU Usage</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="globalRAMUsage">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Global RAM Usage</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="nodes">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Nodes</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="namespaces">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Namespaces</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="runningPods">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Running Pods</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="clusterCPUUtilization">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Cluster CPU Utilization</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="clusterMemoryUtilization">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Cluster Memory Utilization</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="cpuUsage">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>CPU Usage</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="ramUsage">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>RAM Usage</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="networkTraffic">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Total Network Traffic</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="diskIO">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Disk I/O</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="cpuUsageByNamespace">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>CPU Utilization by Namespace</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+
+      <EuiFlexItem key="memoryUsageByNamespace">
+        <EuiPanel paddingSize="m">
+          <EuiText>
+            <h3>Memory Utilization by Namespace</h3>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+    </ResponsiveGridLayout>
+  );
+};
diff --git a/public/components/kubernetes/home.tsx b/public/components/kubernetes/home.tsx
new file mode 100644
index 0000000000..c6f0d01e37
--- /dev/null
+++ b/public/components/kubernetes/home.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { GroupDashboards } from './common/gourp_dashboards';
+
+export const Home = () => {
+  return <GroupDashboards metricsData={{}} />;
+};