661 lines
25 KiB
TypeScript
661 lines
25 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Auth } from "@/ui/Desktop/Authentication/Auth.tsx";
|
|
import { UpdateLog } from "@/ui/Desktop/Apps/Dashboard/Apps/UpdateLog.tsx";
|
|
import { AlertManager } from "@/ui/Desktop/Apps/Dashboard/Apps/Alerts/AlertManager.tsx";
|
|
import { Button } from "@/components/ui/button.tsx";
|
|
import {
|
|
getUserInfo,
|
|
getDatabaseHealth,
|
|
getCookie,
|
|
getUptime,
|
|
getVersionInfo,
|
|
getSSHHosts,
|
|
getTunnelStatuses,
|
|
getCredentials,
|
|
getRecentActivity,
|
|
resetRecentActivity,
|
|
getServerMetricsById,
|
|
type RecentActivityItem,
|
|
} from "@/ui/main-axios.ts";
|
|
import { useSidebar } from "@/components/ui/sidebar.tsx";
|
|
import { Separator } from "@/components/ui/separator.tsx";
|
|
import { useTabs } from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
|
|
import {
|
|
ChartLine,
|
|
Clock,
|
|
Database,
|
|
FastForward,
|
|
History,
|
|
Key,
|
|
Network,
|
|
Server,
|
|
UserPlus,
|
|
Settings,
|
|
User,
|
|
} from "lucide-react";
|
|
import { Status } from "@/components/ui/shadcn-io/status";
|
|
import { BsLightning } from "react-icons/bs";
|
|
|
|
interface DashboardProps {
|
|
onSelectView: (view: string) => void;
|
|
isAuthenticated: boolean;
|
|
authLoading: boolean;
|
|
onAuthSuccess: (authData: {
|
|
isAdmin: boolean;
|
|
username: string | null;
|
|
userId: string | null;
|
|
}) => void;
|
|
isTopbarOpen: boolean;
|
|
}
|
|
|
|
export function Dashboard({
|
|
isAuthenticated,
|
|
authLoading,
|
|
onAuthSuccess,
|
|
isTopbarOpen,
|
|
onSelectView,
|
|
}: DashboardProps): React.ReactElement {
|
|
const [loggedIn, setLoggedIn] = useState(isAuthenticated);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [, setUsername] = useState<string | null>(null);
|
|
const [userId, setUserId] = useState<string | null>(null);
|
|
const [dbError, setDbError] = useState<string | null>(null);
|
|
|
|
// Dashboard data state
|
|
const [uptime, setUptime] = useState<string>("0d 0h 0m");
|
|
const [versionStatus, setVersionStatus] = useState<
|
|
"up_to_date" | "requires_update"
|
|
>("up_to_date");
|
|
const [versionText, setVersionText] = useState<string>("v1.8.0");
|
|
const [dbHealth, setDbHealth] = useState<"healthy" | "error">("healthy");
|
|
const [totalServers, setTotalServers] = useState<number>(0);
|
|
const [totalTunnels, setTotalTunnels] = useState<number>(0);
|
|
const [totalCredentials, setTotalCredentials] = useState<number>(0);
|
|
const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
|
|
[],
|
|
);
|
|
const [serverStats, setServerStats] = useState<
|
|
Array<{ id: number; name: string; cpu: number | null; ram: number | null }>
|
|
>([]);
|
|
|
|
const { addTab, setCurrentTab, tabs: tabList } = useTabs();
|
|
|
|
let sidebarState: "expanded" | "collapsed" = "expanded";
|
|
try {
|
|
const sidebar = useSidebar();
|
|
sidebarState = sidebar.state;
|
|
} catch {}
|
|
|
|
const topMarginPx = isTopbarOpen ? 74 : 26;
|
|
const leftMarginPx = sidebarState === "collapsed" ? 26 : 8;
|
|
const bottomMarginPx = 8;
|
|
|
|
useEffect(() => {
|
|
setLoggedIn(isAuthenticated);
|
|
}, [isAuthenticated]);
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
if (getCookie("jwt")) {
|
|
getUserInfo()
|
|
.then((meRes) => {
|
|
setIsAdmin(!!meRes.is_admin);
|
|
setUsername(meRes.username || null);
|
|
setUserId(meRes.userId || null);
|
|
setDbError(null);
|
|
})
|
|
.catch((err) => {
|
|
setIsAdmin(false);
|
|
setUsername(null);
|
|
setUserId(null);
|
|
|
|
const errorCode = err?.response?.data?.code;
|
|
if (errorCode === "SESSION_EXPIRED") {
|
|
console.warn("Session expired - please log in again");
|
|
setDbError("Session expired - please log in again");
|
|
} else {
|
|
setDbError(null);
|
|
}
|
|
});
|
|
|
|
getDatabaseHealth()
|
|
.then(() => {
|
|
setDbError(null);
|
|
})
|
|
.catch((err) => {
|
|
if (err?.response?.data?.error?.includes("Database")) {
|
|
setDbError(
|
|
"Could not connect to the database. Please try again later.",
|
|
);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, [isAuthenticated]);
|
|
|
|
// Fetch dashboard data
|
|
useEffect(() => {
|
|
if (!loggedIn) return;
|
|
|
|
const fetchDashboardData = async () => {
|
|
try {
|
|
// Fetch uptime
|
|
const uptimeInfo = await getUptime();
|
|
setUptime(uptimeInfo.formatted);
|
|
|
|
// Fetch version info
|
|
const versionInfo = await getVersionInfo();
|
|
setVersionText(`v${versionInfo.localVersion}`);
|
|
setVersionStatus(versionInfo.status || "up_to_date");
|
|
|
|
// Fetch database health
|
|
try {
|
|
await getDatabaseHealth();
|
|
setDbHealth("healthy");
|
|
} catch {
|
|
setDbHealth("error");
|
|
}
|
|
|
|
// Fetch total counts
|
|
const hosts = await getSSHHosts();
|
|
setTotalServers(hosts.length);
|
|
|
|
// Count total tunnels across all hosts
|
|
let totalTunnelsCount = 0;
|
|
for (const host of hosts) {
|
|
if (host.tunnelConnections) {
|
|
try {
|
|
const tunnelConnections = JSON.parse(host.tunnelConnections);
|
|
if (Array.isArray(tunnelConnections)) {
|
|
totalTunnelsCount += tunnelConnections.length;
|
|
}
|
|
} catch {
|
|
// Ignore parse errors
|
|
}
|
|
}
|
|
}
|
|
setTotalTunnels(totalTunnelsCount);
|
|
|
|
const credentials = await getCredentials();
|
|
setTotalCredentials(credentials.length);
|
|
|
|
// Fetch recent activity (35 items)
|
|
const activity = await getRecentActivity(35);
|
|
setRecentActivity(activity);
|
|
|
|
// Fetch server stats for first 5 servers
|
|
const serversWithStats = await Promise.all(
|
|
hosts.slice(0, 5).map(async (host: { id: number; name: string }) => {
|
|
try {
|
|
const metrics = await getServerMetricsById(host.id);
|
|
return {
|
|
id: host.id,
|
|
name: host.name || `Host ${host.id}`,
|
|
cpu: metrics.cpu.percent,
|
|
ram: metrics.memory.percent,
|
|
};
|
|
} catch {
|
|
return {
|
|
id: host.id,
|
|
name: host.name || `Host ${host.id}`,
|
|
cpu: null,
|
|
ram: null,
|
|
};
|
|
}
|
|
}),
|
|
);
|
|
setServerStats(serversWithStats);
|
|
} catch (error) {
|
|
console.error("Failed to fetch dashboard data:", error);
|
|
}
|
|
};
|
|
|
|
fetchDashboardData();
|
|
|
|
// Refresh every 30 seconds
|
|
const interval = setInterval(fetchDashboardData, 30000);
|
|
return () => clearInterval(interval);
|
|
}, [loggedIn]);
|
|
|
|
// Handler for resetting recent activity
|
|
const handleResetActivity = async () => {
|
|
try {
|
|
await resetRecentActivity();
|
|
setRecentActivity([]);
|
|
} catch (error) {
|
|
console.error("Failed to reset activity:", error);
|
|
}
|
|
};
|
|
|
|
// Handler for opening a recent activity item
|
|
const handleActivityClick = (item: RecentActivityItem) => {
|
|
// Find the host and open appropriate tab
|
|
getSSHHosts().then((hosts) => {
|
|
const host = hosts.find((h: { id: number }) => h.id === item.hostId);
|
|
if (!host) return;
|
|
|
|
if (item.type === "terminal") {
|
|
addTab({
|
|
type: "terminal",
|
|
title: item.hostName,
|
|
hostConfig: host,
|
|
});
|
|
} else if (item.type === "file_manager") {
|
|
addTab({
|
|
type: "file_manager",
|
|
title: item.hostName,
|
|
hostConfig: host,
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// Quick Actions handlers
|
|
const handleAddHost = () => {
|
|
const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
|
|
if (sshManagerTab) {
|
|
setCurrentTab(sshManagerTab.id);
|
|
} else {
|
|
const id = addTab({
|
|
type: "ssh_manager",
|
|
title: "Host Manager",
|
|
initialTab: "add_host",
|
|
});
|
|
setCurrentTab(id);
|
|
}
|
|
};
|
|
|
|
const handleAddCredential = () => {
|
|
const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
|
|
if (sshManagerTab) {
|
|
setCurrentTab(sshManagerTab.id);
|
|
} else {
|
|
const id = addTab({
|
|
type: "ssh_manager",
|
|
title: "Host Manager",
|
|
initialTab: "add_credential",
|
|
});
|
|
setCurrentTab(id);
|
|
}
|
|
};
|
|
|
|
const handleOpenAdminSettings = () => {
|
|
const adminTab = tabList.find((t) => t.type === "admin");
|
|
if (adminTab) {
|
|
setCurrentTab(adminTab.id);
|
|
} else {
|
|
const id = addTab({ type: "admin", title: "Admin Settings" });
|
|
setCurrentTab(id);
|
|
}
|
|
};
|
|
|
|
const handleOpenUserProfile = () => {
|
|
const userProfileTab = tabList.find((t) => t.type === "user_profile");
|
|
if (userProfileTab) {
|
|
setCurrentTab(userProfileTab.id);
|
|
} else {
|
|
const id = addTab({ type: "user_profile", title: "User Profile" });
|
|
setCurrentTab(id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{!loggedIn ? (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Auth
|
|
setLoggedIn={setLoggedIn}
|
|
setIsAdmin={setIsAdmin}
|
|
setUsername={setUsername}
|
|
setUserId={setUserId}
|
|
loggedIn={loggedIn}
|
|
authLoading={authLoading}
|
|
dbError={dbError}
|
|
setDbError={setDbError}
|
|
onAuthSuccess={onAuthSuccess}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden flex"
|
|
style={{
|
|
marginLeft: leftMarginPx,
|
|
marginRight: 17,
|
|
marginTop: topMarginPx,
|
|
marginBottom: bottomMarginPx,
|
|
height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
|
|
}}
|
|
>
|
|
<div className="flex flex-col relative z-10 w-full h-full">
|
|
<div className="flex flex-row items-center justify-between w-full px-3 mt-3">
|
|
<div className="text-2xl text-white font-semibold">Dashboard</div>
|
|
<div className="flex flex-row gap-3">
|
|
<Button
|
|
className="font-semibold"
|
|
variant="outline"
|
|
onClick={() =>
|
|
window.open(
|
|
"https://github.com/Termix-SSH/Termix",
|
|
"_blank",
|
|
)
|
|
}
|
|
>
|
|
GitHub
|
|
</Button>
|
|
<Button
|
|
className="font-semibold"
|
|
variant="outline"
|
|
onClick={() =>
|
|
window.open(
|
|
"https://github.com/Termix-SSH/Support/issues/new",
|
|
"_blank",
|
|
)
|
|
}
|
|
>
|
|
Support
|
|
</Button>
|
|
<Button
|
|
className="font-semibold"
|
|
variant="outline"
|
|
onClick={() =>
|
|
window.open(
|
|
"https://discord.com/invite/jVQGdvHDrf",
|
|
"_blank",
|
|
)
|
|
}
|
|
>
|
|
Discord
|
|
</Button>
|
|
<Button
|
|
className="font-semibold"
|
|
variant="outline"
|
|
onClick={() =>
|
|
window.open("https://github.com/sponsors/LukeGus", "_blank")
|
|
}
|
|
>
|
|
Donate
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="mt-3 p-0.25" />
|
|
|
|
<div className="flex flex-col flex-1 my-5 mx-5 gap-4 min-h-0">
|
|
<div className="flex flex-row flex-1 gap-4 min-h-0">
|
|
<div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
|
|
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
|
|
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
|
|
<Server className="mr-3" />
|
|
Server Overview
|
|
</p>
|
|
<div className="bg-dark-bg w-full h-auto border-2 border-dark-border rounded-md px-3 py-3">
|
|
<div className="flex flex-row items-center justify-between mb-3">
|
|
<div className="flex flex-row items-center">
|
|
<History
|
|
size={20}
|
|
color="#FFFFFF"
|
|
className="shrink-0"
|
|
/>
|
|
<p className="ml-2 leading-none">Version</p>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center">
|
|
<p className="leading-none text-muted-foreground">
|
|
{versionText}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={`ml-2 text-sm border-1 border-dark-border ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
|
|
>
|
|
{versionStatus === "up_to_date"
|
|
? "Up to Date"
|
|
: "Update Available"}
|
|
</Button>
|
|
<UpdateLog loggedIn={loggedIn} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center justify-between mb-5">
|
|
<div className="flex flex-row items-center">
|
|
<Clock
|
|
size={20}
|
|
color="#FFFFFF"
|
|
className="shrink-0"
|
|
/>
|
|
<p className="ml-2 leading-none">Uptime</p>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center">
|
|
<p className="leading-none text-muted-foreground">
|
|
{uptime}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center justify-between">
|
|
<div className="flex flex-row items-center">
|
|
<Database
|
|
size={20}
|
|
color="#FFFFFF"
|
|
className="shrink-0"
|
|
/>
|
|
<p className="ml-2 leading-none">Database</p>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center">
|
|
<p
|
|
className={`leading-none ${dbHealth === "healthy" ? "text-green-400" : "text-red-400"}`}
|
|
>
|
|
{dbHealth}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
|
|
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
|
|
<div className="flex flex-row items-center">
|
|
<Server
|
|
size={16}
|
|
color="#FFFFFF"
|
|
className="mr-3 shrink-0"
|
|
/>
|
|
<p className="m-0 leading-none">Total Servers</p>
|
|
</div>
|
|
<p className="m-0 leading-none text-muted-foreground font-semibold">
|
|
{totalServers}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
|
|
<div className="flex flex-row items-center">
|
|
<Network
|
|
size={16}
|
|
color="#FFFFFF"
|
|
className="mr-3 shrink-0"
|
|
/>
|
|
<p className="m-0 leading-none">Total Tunnels</p>
|
|
</div>
|
|
<p className="m-0 leading-none text-muted-foreground font-semibold">
|
|
{totalTunnels}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
|
|
<div className="flex flex-row items-center justify-between bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
|
|
<div className="flex flex-row items-center">
|
|
<Key
|
|
size={16}
|
|
color="#FFFFFF"
|
|
className="mr-3 shrink-0"
|
|
/>
|
|
<p className="m-0 leading-none">Total Credentials</p>
|
|
</div>
|
|
<p className="m-0 leading-none text-muted-foreground font-semibold">
|
|
{totalCredentials}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
|
|
<div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
|
|
<div className="flex flex-row items-center justify-between mb-3 mt-1">
|
|
<p className="text-xl font-semibold flex flex-row items-center">
|
|
<Clock className="mr-3" />
|
|
Recent Activity
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-2 !border-dark-border h-7"
|
|
onClick={handleResetActivity}
|
|
>
|
|
Reset
|
|
</Button>
|
|
</div>
|
|
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
|
|
{recentActivity.length === 0 ? (
|
|
<p className="text-muted-foreground text-sm">
|
|
No recent activity
|
|
</p>
|
|
) : (
|
|
recentActivity.map((item) => (
|
|
<Button
|
|
key={item.id}
|
|
variant="outline"
|
|
className="border-2 !border-dark-border bg-dark-bg"
|
|
onClick={() => handleActivityClick(item)}
|
|
>
|
|
<Server size={20} className="shrink-0" />
|
|
<p className="truncate ml-2 font-semibold">
|
|
{item.hostName}
|
|
</p>
|
|
</Button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row flex-1 gap-4 min-h-0">
|
|
<div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
|
|
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
|
|
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
|
|
<FastForward className="mr-3" />
|
|
Quick Actions
|
|
</p>
|
|
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
|
|
<Button
|
|
variant="outline"
|
|
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
|
|
onClick={handleAddHost}
|
|
>
|
|
<Server
|
|
className="shrink-0"
|
|
style={{ width: "40px", height: "40px" }}
|
|
/>
|
|
<span className="font-semibold text-sm mt-2">
|
|
Add Host
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
|
|
onClick={handleAddCredential}
|
|
>
|
|
<Key
|
|
className="shrink-0"
|
|
style={{ width: "40px", height: "40px" }}
|
|
/>
|
|
<span className="font-semibold text-sm mt-2">
|
|
Add Credential
|
|
</span>
|
|
</Button>
|
|
{isAdmin && (
|
|
<Button
|
|
variant="outline"
|
|
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
|
|
onClick={handleOpenAdminSettings}
|
|
>
|
|
<Settings
|
|
className="shrink-0"
|
|
style={{ width: "40px", height: "40px" }}
|
|
/>
|
|
<span className="font-semibold text-sm mt-2">
|
|
Admin Settings
|
|
</span>
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
|
|
onClick={handleOpenUserProfile}
|
|
>
|
|
<User
|
|
className="shrink-0"
|
|
style={{ width: "40px", height: "40px" }}
|
|
/>
|
|
<span className="font-semibold text-sm mt-2">
|
|
User Profile
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
|
|
<div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
|
|
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
|
|
<ChartLine className="mr-3" />
|
|
Server Stats
|
|
</p>
|
|
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
|
|
{serverStats.length === 0 ? (
|
|
<p className="text-muted-foreground text-sm">
|
|
No server data available
|
|
</p>
|
|
) : (
|
|
serverStats.map((server) => (
|
|
<Button
|
|
key={server.id}
|
|
variant="outline"
|
|
className="border-2 !border-dark-border bg-dark-bg h-auto p-3"
|
|
>
|
|
<div className="flex flex-col w-full">
|
|
<div className="flex flex-row items-center mb-2">
|
|
<Server size={20} className="shrink-0" />
|
|
<p className="truncate ml-2 font-semibold">
|
|
{server.name}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-row justify-between text-xs text-muted-foreground">
|
|
<span>
|
|
CPU:{" "}
|
|
{server.cpu !== null
|
|
? `${server.cpu}%`
|
|
: "N/A"}
|
|
</span>
|
|
<span>
|
|
RAM:{" "}
|
|
{server.ram !== null
|
|
? `${server.ram}%`
|
|
: "N/A"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<AlertManager userId={userId} loggedIn={loggedIn} />
|
|
</>
|
|
);
|
|
}
|