Fix lint issues

Author: git-hulk

webui/src/app/globals.css

@@ -46,10 +46,8 @@
     --lin-warning: #f2c94c;
 
     --lin-shadow-card: 0 1px 2px 0 rgba(15, 17, 22, 0.04);
-    --lin-shadow-popover:
-        0 4px 12px -2px rgba(15, 17, 22, 0.08), 0 0 0 1px rgba(15, 17, 22, 0.06);
-    --lin-shadow-overlay:
-        0 8px 32px -8px rgba(15, 17, 22, 0.16), 0 0 0 1px rgba(15, 17, 22, 0.08);
+    --lin-shadow-popover: 0 4px 12px -2px rgba(15, 17, 22, 0.08), 0 0 0 1px rgba(15, 17, 22, 0.06);
+    --lin-shadow-overlay: 0 8px 32px -8px rgba(15, 17, 22, 0.16), 0 0 0 1px rgba(15, 17, 22, 0.08);
 
     --lin-topbar-height: 56px;
     --lin-sidebar-width: 260px;
@@ -78,10 +76,8 @@
     --lin-accent-muted: rgba(112, 121, 224, 0.18);
 
     --lin-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
-    --lin-shadow-popover:
-        0 4px 12px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
-    --lin-shadow-overlay:
-        0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
+    --lin-shadow-popover: 0 4px 12px -2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
+    --lin-shadow-overlay: 0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
 html {

webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx

@@ -61,18 +61,18 @@ interface ShardData {
 }
 
 type FilterOption =
-    | "all"
-    | "with-migration"
-    | "no-migration"
-    | "with-slots"
-    | "no-slots"
-    | "with-importing";
+    "all" | "with-migration" | "no-migration" | "with-slots" | "no-slots" | "with-importing";
 type SortOption = "index-asc" | "index-desc" | "nodes-desc" | "nodes-asc";
 
 const isActive = (value: string | null | undefined) =>
     value !== null && value !== undefined && value !== "" && value !== "-1";
 
-function summarise(shards: any[]): { data: ShardData[]; nodes: number; withSlots: number; migrating: number } {
+function summarise(shards: any[]): {
+    data: ShardData[];
+    nodes: number;
+    withSlots: number;
+    migrating: number;
+} {
     let nodes = 0;
     let withSlots = 0;
     let migrating = 0;

webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/nodes/[node]/page.tsx

@@ -31,15 +31,7 @@ import { NodeSidebar } from "@/app/ui/sidebar";
 import { LoadingSpinner } from "@/app/ui/loadingSpinner";
 import { PageHeader, PageShell } from "@/app/ui/pageChrome";
 
-function CopyableField({
-    label,
-    value,
-    mono,
-}: {
-    label: string;
-    value: string;
-    mono?: boolean;
-}) {
+function CopyableField({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
     const [copied, setCopied] = useState(false);
     const copy = () => {
         navigator.clipboard.writeText(value);
@@ -121,7 +113,9 @@ export default function NodePage(props: {
     const current = nodes[parseInt(node)];
     if (!current) {
         return (
-            <PageShell sidebar={<NodeSidebar namespace={namespace} cluster={cluster} shard={shard} />}>
+            <PageShell
+                sidebar={<NodeSidebar namespace={namespace} cluster={cluster} shard={shard} />}
+            >
                 <div className="p-8">
                     <Alert severity="error" variant="outlined">
                         Node not found.

webui/src/app/namespaces/[namespace]/page.tsx

@@ -75,12 +75,7 @@ const isActiveSlot = (value: unknown): value is string =>
     typeof value === "string" && value.length > 0 && value !== "-1";
 
 type FilterOption =
-    | "all"
-    | "with-migration"
-    | "no-migration"
-    | "with-slots"
-    | "no-slots"
-    | "with-importing";
+    "all" | "with-migration" | "no-migration" | "with-slots" | "no-slots" | "with-importing";
 type SortOption =
     | "name-asc"
     | "name-desc"
@@ -127,16 +122,16 @@ async function buildClusterData(namespace: string): Promise<{
 
                 const shards = ((clusterInfo as any).shards as any[]) || [];
                 const nodeLists = await Promise.all(
-                    shards.map((_, i) => listNodes(namespace, cluster, i.toString())),
+                    shards.map((_, i) => listNodes(namespace, cluster, i.toString()))
                 );
                 const nodeCount = nodeLists.reduce(
                     (acc, nodes) => acc + (Array.isArray(nodes) ? nodes.length : 0),
-                    0,
+                    0
                 );
 
                 const slotCount = shards.reduce(
                     (acc: number, s: any) => acc + parseSlotCount(s?.slot_ranges),
-                    0,
+                    0
                 );
                 const slotRanges: string[] = shards
                     .flatMap((s: any) => (Array.isArray(s?.slot_ranges) ? s.slot_ranges : []))
@@ -164,7 +159,7 @@ async function buildClusterData(namespace: string): Promise<{
                 console.error(`Failed to load cluster ${cluster}:`, error);
                 return null;
             }
-        }),
+        })
     );
 
     return {
@@ -183,9 +178,7 @@ function formatSummary(clusters: number, shards: number, nodes: number, coverage
     return parts.join(" · ");
 }
 
-export default function NamespacePage(props: {
-    params: Promise<{ namespace: string }>;
-}) {
+export default function NamespacePage(props: { params: Promise<{ namespace: string }> }) {
     const params = use(props.params);
     const [rows, setRows] = useState<ClusterData[]>([]);
     const [totals, setTotals] = useState({ shards: 0, nodes: 0, slots: 0 });
@@ -485,11 +478,11 @@ function ActivityStrip({
     const bits: string[] = [];
     if (migrating.length > 0)
         bits.push(
-            `${migrating.length} ${migrating.length === 1 ? "cluster" : "clusters"} migrating`,
+            `${migrating.length} ${migrating.length === 1 ? "cluster" : "clusters"} migrating`
         );
     if (importing.length > 0)
         bits.push(
-            `${importing.length} ${importing.length === 1 ? "cluster" : "clusters"} importing`,
+            `${importing.length} ${importing.length === 1 ? "cluster" : "clusters"} importing`
         );
 
     const active = [
@@ -586,10 +579,7 @@ function ClusterRow({
             className="group grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4 px-6 py-4 transition-colors hover:bg-surface-hover dark:hover:bg-surface-dark-hover md:grid-cols-[auto_minmax(0,1fr)_auto_auto]"
             aria-label={`${cluster.name}, ${stateLabel.toLowerCase()}`}
         >
-            <span
-                className={`h-2 w-2 shrink-0 rounded-full ${dotClass}`}
-                aria-hidden
-            />
+            <span className={`h-2 w-2 shrink-0 rounded-full ${dotClass}`} aria-hidden />
 
             <div className="min-w-0">
                 <div className="flex items-center gap-2">
@@ -654,7 +644,7 @@ function ClusterRow({
                 </div>
                 <div className="mt-1 flex items-center justify-between text-2xs text-text-muted dark:text-text-dark-muted">
                     <span>{stateLabel}</span>
-                    <span className="font-medium text-text-secondary tabular-nums dark:text-text-dark-secondary">
+                    <span className="font-medium tabular-nums text-text-secondary dark:text-text-dark-secondary">
                         {coverage}%
                     </span>
                 </div>

webui/src/app/namespaces/page.tsx

@@ -29,13 +29,7 @@ import DnsIcon from "@mui/icons-material/Dns";
 import DeviceHubIcon from "@mui/icons-material/DeviceHub";
 
 import { NamespaceSidebar } from "../ui/sidebar";
-import {
-    deleteNamespace,
-    fetchClusters,
-    fetchNamespaces,
-    listNodes,
-    listShards,
-} from "../lib/api";
+import { deleteNamespace, fetchClusters, fetchNamespaces, listNodes, listShards } from "../lib/api";
 import { LoadingSpinner } from "../ui/loadingSpinner";
 import EmptyState from "../ui/emptyState";
 import {
@@ -59,12 +53,7 @@ interface NamespaceData {
 
 type FilterOption = "all" | "with-clusters" | "no-clusters";
 type SortOption =
-    | "name-asc"
-    | "name-desc"
-    | "clusters-desc"
-    | "clusters-asc"
-    | "nodes-desc"
-    | "nodes-asc";
+    "name-asc" | "name-desc" | "clusters-desc" | "clusters-asc" | "nodes-desc" | "nodes-asc";
 
 export default function Namespaces() {
     const [rows, setRows] = useState<NamespaceData[]>([]);
@@ -93,7 +82,7 @@ export default function Namespaces() {
                         shardCount: 0,
                         nodeCount: 0,
                         loading: true,
-                    })),
+                    }))
                 );
                 setTotals({ namespaces: namespaces.length, clusters: 0, shards: 0, nodes: 0 });
                 setLoading(false);
@@ -103,7 +92,7 @@ export default function Namespaces() {
                         try {
                             const clusters = await fetchClusters(namespace);
                             const shardLists = await Promise.all(
-                                clusters.map((cluster) => listShards(namespace, cluster)),
+                                clusters.map((cluster) => listShards(namespace, cluster))
                             );
 
                             let shardCount = 0;
@@ -114,16 +103,16 @@ export default function Namespaces() {
                                     shardCount += shards.length;
                                     shards.forEach((_, i) =>
                                         nodePromises.push(
-                                            listNodes(namespace, cluster, i.toString()),
-                                        ),
+                                            listNodes(namespace, cluster, i.toString())
+                                        )
                                     );
                                 }
                             });
 
                             const nodeLists = await Promise.all(nodePromises);
                             const nodeCount = nodeLists.reduce(
                                 (acc, nodes) => acc + (Array.isArray(nodes) ? nodes.length : 0),
-                                0,
+                                0
                             );
 
                             if (cancelled) return;
@@ -138,8 +127,8 @@ export default function Namespaces() {
                                               nodeCount,
                                               loading: false,
                                           }
-                                        : n,
-                                ),
+                                        : n
+                                )
                             );
                             setTotals((prev) => ({
                                 namespaces: prev.namespaces,
@@ -152,12 +141,12 @@ export default function Namespaces() {
                             if (!cancelled) {
                                 setRows((prev) =>
                                     prev.map((n) =>
-                                        n.name === namespace ? { ...n, loading: false } : n,
-                                    ),
+                                        n.name === namespace ? { ...n, loading: false } : n
+                                    )
                                 );
                             }
                         }
-                    }),
+                    })
                 );
             } catch (error) {
                 console.error("Error fetching namespaces data:", error);

webui/src/app/page.tsx

@@ -109,7 +109,7 @@ export default function Home() {
     const router = useRouter();
 
     return (
-        <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-16 px-6 py-16 lin-fade-in">
+        <div className="lin-fade-in mx-auto flex w-full max-w-[1200px] flex-col gap-16 px-6 py-16">
             <section className="grid grid-cols-1 items-center gap-10 md:grid-cols-2">
                 <div className="space-y-5">
                     <span className="lin-eyebrow inline-flex items-center gap-2">

webui/src/app/ui/failoverDialog.tsx

@@ -152,10 +152,7 @@ export const FailoverDialog: React.FC<FailoverDialogProps> = ({
                         <div className="mb-4">
                             <div className="lin-eyebrow mb-1.5">Current master</div>
                             <div className="flex items-center gap-3 rounded-md border border-success/30 bg-success/5 px-3 py-2">
-                                <CheckCircleIcon
-                                    sx={{ fontSize: 14 }}
-                                    className="text-success"
-                                />
+                                <CheckCircleIcon sx={{ fontSize: 14 }} className="text-success" />
                                 <div className="min-w-0 flex-1">
                                     <div className="truncate text-sm font-medium text-text-primary dark:text-text-dark-primary">
                                         {masterNode.addr}

webui/src/app/ui/footer.tsx

@@ -29,7 +29,11 @@ import { footerConfig } from "../../../config";
 import { footerColumn, footerColumnItem } from "../lib/definitions";
 
 const socials = [
-    { icon: <GitHubIcon sx={{ fontSize: 15 }} />, href: "https://github.com/apache", label: "GitHub" },
+    {
+        icon: <GitHubIcon sx={{ fontSize: 15 }} />,
+        href: "https://github.com/apache",
+        label: "GitHub",
+    },
     { icon: <TwitterIcon sx={{ fontSize: 15 }} />, href: "https://x.com/TheASF", label: "Twitter" },
     {
         icon: <LinkedInIcon sx={{ fontSize: 15 }} />,

webui/src/app/ui/formDialog.tsx

@@ -253,9 +253,7 @@ const FormDialog: React.FC<FormDialogProps> = ({
                             size="small"
                             disabled={submitting}
                             startIcon={
-                                submitting ? (
-                                    <CircularProgress size={12} color="inherit" />
-                                ) : null
+                                submitting ? <CircularProgress size={12} color="inherit" /> : null
                             }
                         >
                             {submitting ? "Working…" : submitButtonLabel}

webui/src/app/ui/pageChrome.tsx

@@ -36,7 +36,7 @@ export function PageShell({ sidebar, children }: PageShellProps) {
     return (
         <div className="mx-auto flex w-full max-w-[1440px] items-stretch">
             {sidebar}
-            <div className="min-w-0 flex-1 lin-fade-in">{children}</div>
+            <div className="lin-fade-in min-w-0 flex-1">{children}</div>
         </div>
     );
 }
@@ -204,11 +204,7 @@ export function FilterSortMenu<T extends string>({
             >
                 {groups.map((group, gi) => [
                     group.title ? (
-                        <li
-                            key={`g-${gi}`}
-                            className="lin-eyebrow px-3 pb-1 pt-2"
-                            aria-hidden
-                        >
+                        <li key={`g-${gi}`} className="lin-eyebrow px-3 pb-1 pt-2" aria-hidden>
                             {group.title}
                         </li>
                     ) : null,
@@ -223,10 +219,7 @@ export function FilterSortMenu<T extends string>({
                         >
                             <span className="flex-1">{opt.label}</span>
                             {opt.value === value && (
-                                <CheckIcon
-                                    sx={{ fontSize: 13, ml: 1 }}
-                                    className="text-primary"
-                                />
+                                <CheckIcon sx={{ fontSize: 13, ml: 1 }} className="text-primary" />
                             )}
                         </MenuItem>
                     )),