74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { DashboardCard } from "@/components/card";
|
|
import { NoDataOverlay } from "@/components/noDataOverlay";
|
|
import { status, Status, clanStatus } from "@/data/dashboardData";
|
|
import {
|
|
Chip,
|
|
Divider,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
const statusColorMap: Record<
|
|
Status,
|
|
"default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
|
|
> = {
|
|
online: "info",
|
|
offline: "error",
|
|
pending: "default",
|
|
};
|
|
|
|
const MAX_OTHERS = 5;
|
|
|
|
export const NetworkOverview = () => {
|
|
const { self, other } = clanStatus;
|
|
|
|
const firstOthers = other.slice(0, MAX_OTHERS);
|
|
return (
|
|
<DashboardCard title="Clan Overview">
|
|
<List>
|
|
<ListItem>
|
|
<ListItemText primary={self.name} secondary={self.status} />
|
|
<ListItemIcon>
|
|
<Chip
|
|
label={status[self.status]}
|
|
color={statusColorMap[self.status]}
|
|
/>
|
|
</ListItemIcon>
|
|
</ListItem>
|
|
<Divider flexItem />
|
|
{!other.length && (
|
|
<div className="my-3 flex h-full w-full justify-center align-middle">
|
|
<NoDataOverlay
|
|
label={
|
|
<ListItemText
|
|
primary="No other nodes"
|
|
secondary={<Link href="/nodes">Add devices</Link>}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
{firstOthers.map((o) => (
|
|
<ListItem key={o.id}>
|
|
<ListItemText primary={o.name} secondary={o.status} />
|
|
<ListItemIcon>
|
|
<Chip label={status[o.status]} color={statusColorMap[o.status]} />
|
|
</ListItemIcon>
|
|
</ListItem>
|
|
))}
|
|
{other.length > MAX_OTHERS && (
|
|
<ListItem>
|
|
<ListItemText
|
|
secondary={` ${other.length - MAX_OTHERS} more ...`}
|
|
/>
|
|
</ListItem>
|
|
)}
|
|
</List>
|
|
</DashboardCard>
|
|
);
|
|
};
|