feat: add Cluster management page and update API response types

frontend/src/components/buckets/ObjectsTable.tsx

@@ -280,7 +280,7 @@ export function ObjectsTable({
                 </div>
               </TableCell>
               <TableCell className="hidden sm:table-cell">
-                {obj.isFolder ? 'Folder' : getFileType(obj.key.replace(currentPath, ''))}
+                {obj.isFolder ? 'Directory' : getFileType(obj.key.replace(currentPath, ''))}
               </TableCell>
               <TableCell className="hidden md:table-cell">
                 {obj.storageClass && (

frontend/src/components/charts/BucketUsageChart.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
-import { PieChart, Pie, Cell, Legend, Tooltip, ResponsiveContainer } from 'recharts';
-import type { BucketUsage } from '@/types';
-import { formatBytes } from '@/lib/utils';
-import { chartColorPalette, getTextColor, getTooltipStyle } from '@/lib/chart-colors';
+import {useEffect, useState} from 'react';
+import {Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip} from 'recharts';
+import type {BucketUsage} from '@/types';
+import {formatBytes} from '@/lib/utils';
+import {chartColorPalette, getTextColor, getTooltipStyle} from '@/lib/chart-colors';
 
 interface BucketUsageChartProps {
   data: BucketUsage[];

frontend/src/components/charts/ClusterHealthChart.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import type { ClusterHealth } from '@/types';
-import { grafanaColors, getTextColor, getGridColor, getTooltipStyle } from '@/lib/chart-colors';
+import {useEffect, useState} from 'react';
+import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
+import type {ClusterHealth} from '@/types';
+import {getGridColor, getTextColor, getTooltipStyle, grafanaColors} from '@/lib/chart-colors';
 
 interface ClusterHealthChartProps {
   data: ClusterHealth;
@@ -32,13 +32,13 @@ export function ClusterHealthChart({ data }: ClusterHealthChartProps) {
   const chartData = [
     {
       metric: 'Nodes',
-      healthy: data.healthyStorageNodes,
-      unhealthy: data.declaredStorageNodes - data.healthyStorageNodes,
+      healthy: data.storageNodesUp,
+      unhealthy: data.storageNodes - data.storageNodesUp,
     },
     {
       metric: 'Partitions',
-      healthy: data.healthyPartitions,
-      unhealthy: data.totalPartitions - data.healthyPartitions,
+      healthy: data.partitionsAllOk,
+      unhealthy: data.partitions - data.partitionsAllOk,
     },
     {
       metric: 'Connected',

frontend/src/components/layout/sidebar.tsx

@@ -1,6 +1,6 @@
 import {Link, useLocation} from 'react-router-dom';
 import {cn} from '@/lib/utils';
-import {Database, Key, LayoutDashboard,} from 'lucide-react';
+import {Database, Key, LayoutDashboard, Server} from 'lucide-react';
 
 interface NavItem {
   title: string;
@@ -19,6 +19,11 @@ const navItems: NavItem[] = [
     href: '/buckets',
     icon: Database,
   },
+  {
+    title: 'Cluster',
+    href: '/cluster',
+    icon: Server,
+  },
   {
     title: 'Access Control',
     href: '/access',
@@ -71,17 +76,17 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
           );
         })}
       </nav>
-      <div className="border-t p-4">
-        <div className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">
-            AD
-          </div>
-          <div className="flex-1 overflow-hidden">
-            <p className="text-sm font-medium truncate">Admin User</p>
-            <p className="text-xs text-muted-foreground truncate">admin@garage.local</p>
-          </div>
-        </div>
-      </div>
+      {/*<div className="border-t p-4">*/}
+      {/*  <div className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2">*/}
+      {/*    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold">*/}
+      {/*      AD*/}
+      {/*    </div>*/}
+      {/*    <div className="flex-1 overflow-hidden">*/}
+      {/*      <p className="text-sm font-medium truncate">Admin User</p>*/}
+      {/*      <p className="text-xs text-muted-foreground truncate">admin@garage.local</p>*/}
+      {/*    </div>*/}
+      {/*  </div>*/}
+      {/*</div>*/}
     </div>
   );
 }