1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
import { useEffect, useState } from 'react';
import { EKSClient, DescribeClusterCommand } from '@aws-sdk/client-eks';
import axios from 'axios';
// Configure AWS SDK v3
const region = 'us-east-1'; // Change to your region
// Create an Axios instance
const axiosInstance = axios.create();
// Add a request interceptor
axiosInstance.interceptors.request.use(config => {
config.headers['Access-Control-Allow-Origin'] = '*';
return config;
}, error => {
return Promise.reject(error);
});
const eksClient = new EKSClient({
region,
credentials: {
accessKeyId: "AKIA3X4DCJJWHYF5M42F",
secretAccessKey: "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",
},
});
const Header = () => {
return (
<header className="bg-gray-900 text-white py-4 px-6">
<h1 className="text-2xl font-bold">Kubernetes Dashboard</h1>
</header>
);
};
const Card = ({ title, children, className = "" }) => {
return (
<div className={`bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 ${className}`}>
<h2 className="text-lg font-bold mb-4 dark:text-white">{title}</h2>
{children}
</div>
);
};
const StatusItem = ({ value, label }) => {
return (
<div className="bg-gray-200 dark:bg-gray-800 rounded-lg p-4">
<p className="text-4xl font-bold dark:text-white">{value}</p>
<p className="text-gray-500 dark:text-gray-400">{label}</p>
</div>
);
};
const StatusTable = ({ headers, rows }) => {
return (
<div className="overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr className="bg-gray-200 dark:bg-gray-800">
{headers.map((header, index) => (
<th key={index} className="px-4 py-2 text-left dark:text-white">{header}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row, rowIndex) => (
<tr key={rowIndex} className="border-b border-gray-200 dark:border-gray-800">
{row.map((cell, cellIndex) => (
<td key={cellIndex} className={`px-4 py-2 ${cellIndex >= headers.length - 2 ? 'text-right' : 'text-left'} dark:text-white`}>
{cell}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
const Dashboard = ({ clusterName }) => {
const [clusterOverview, setClusterOverview] = useState({});
const [nodes, setNodes] = useState([]);
const [pods, setPods] = useState([]);
useEffect(() => {
const fetchClusterData = async () => {
try {
const clusterData = await eksClient.send(new DescribeClusterCommand({ name: clusterName }));
const endpoint = clusterData.cluster.endpoint;
console.log(endpoint)
const nodeCount = await getNodeCount(endpoint);
const podCount = await getPodCount(endpoint);
const serviceCount = await getServiceCount(endpoint);
setClusterOverview({
nodes: nodeCount,
pods: podCount,
services: serviceCount,
});
const nodesData = await getNodeStatuses(endpoint);
setNodes(nodesData);
const podsData = await getPodStatuses(endpoint);
setPods(podsData);
} catch (error) {
console.error('Error fetching data from AWS:', error);
}
};
fetchClusterData();
}, [clusterName]);
const getNodeCount = async (endpoint) => {
const response = await axiosInstance.get(`${endpoint}/api/v1/nodes`);
return response.data.items.length;
};
const getPodCount = async (endpoint) => {
const response = await axiosInstance.get(`${endpoint}/api/v1/pods`);
return response.data.items.length;
};
const getServiceCount = async (endpoint) => {
const response = await axiosInstance.get(`${endpoint}/api/v1/services`);
return response.data.items.length;
};
const getNodeStatuses = async (endpoint) => {
const response = await axiosInstance.get(`${endpoint}/api/v1/nodes`);
return response.data.items.map(node => ({
name: node.metadata.name,
status: node.status.conditions.find(condition => condition.type === 'Ready').status === 'True' ? 'Running' : 'NotReady',
cpu: `${Math.round((node.status.allocatable.cpu / node.status.capacity.cpu) * 100)}%`,
memory: `${Math.round((node.status.allocatable.memory / node.status.capacity.memory) * 100)}%`,
}));
};
const getPodStatuses = async (endpoint) => {
const response = await axiosInstance.get(`${endpoint}/api/v1/pods`);
return response.data.items.map(pod => ({
name: pod.metadata.name,
status: pod.status.phase,
image: pod.spec.containers[0].image,
}));
};
return (
<div className="flex flex-col h-screen dark:bg-gray-900">
<Header />
<main className="flex-1 bg-gray-100 dark:bg-gray-800 p-6">
<div className="grid grid-cols-1 gap-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card title="Cluster Overview">
<div className="grid grid-cols-3 gap-4">
<StatusItem value={clusterOverview.nodes} label="Nodes" />
<StatusItem value={clusterOverview.pods} label="Pods" />
<StatusItem value={clusterOverview.services} label="Services" />
</div>
</Card>
<Card title="Node Status" className="md:col-span-2">
<StatusTable
headers={['Name', 'Status', 'CPU', 'Memory']}
rows={nodes.map(node => [node.name, node.status, node.cpu, node.memory])}
/>
</Card>
</div>
<Card title="Pod Status">
<StatusTable
headers={['Name', 'Status', 'Image']}
rows={pods.map(pod => [pod.name, pod.status, pod.image])}
/>
</Card>
</div>
</main>
</div>
);
};
export default Dashboard;
|
