init project
This commit is contained in:
94
src/pages/StatefulSets.tsx
Normal file
94
src/pages/StatefulSets.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
export default function StatefulSets() {
|
||||
const statefulSets = [
|
||||
{
|
||||
name: 'redis-master',
|
||||
namespace: 'default',
|
||||
ready: '1/1',
|
||||
current: 1,
|
||||
updated: 1,
|
||||
age: '1d',
|
||||
image: 'redis:6.2',
|
||||
serviceName: 'redis-master'
|
||||
},
|
||||
{
|
||||
name: 'postgres',
|
||||
namespace: 'default',
|
||||
ready: '1/1',
|
||||
current: 1,
|
||||
updated: 1,
|
||||
age: '3h',
|
||||
image: 'postgres:13',
|
||||
serviceName: 'postgres'
|
||||
},
|
||||
{
|
||||
name: 'elasticsearch',
|
||||
namespace: 'monitoring',
|
||||
ready: '3/3',
|
||||
current: 3,
|
||||
updated: 3,
|
||||
age: '2d',
|
||||
image: 'elasticsearch:7.17',
|
||||
serviceName: 'elasticsearch'
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">StatefulSets</h1>
|
||||
<p className="text-sm text-gray-600">Manage stateful applications with persistent storage.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-lg shadow-sm">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">StatefulSet List</h2>
|
||||
<button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
|
||||
Create StatefulSet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Namespace</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ready</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Updated</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Name</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{statefulSets.map((sts) => (
|
||||
<tr key={sts.name} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-gray-900">{sts.name}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.namespace}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.ready}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.current}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.updated}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.age}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.image}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sts.serviceName}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<button className="text-blue-600 hover:text-blue-900 mr-3">View</button>
|
||||
<button className="text-green-600 hover:text-green-900 mr-3">Scale</button>
|
||||
<button className="text-orange-600 hover:text-orange-900 mr-3">Rollout</button>
|
||||
<button className="text-red-600 hover:text-red-900">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user