robbond/pleskSaas
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'feat(ui): add collapsible plesk instances panel with summary view' (#28) from feature/ui-collapse-instances-panel into master

Browse Source 
Reviewed-on: http://gitea.lan:3000/robbond/pleskSaas/pulls/28
This commit was merged in pull request #28.
This commit is contained in:
robbond
2026-03-06 06:50:55 +00:00
parent ad9b6ef7d2 7378b09302
commit f4ff058a8f
1 changed files with 497 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/dashboard/dashboard-controls.tsx
View File

@@ -160,6 +160,23 @@ function getDomainHref(domainName: string) {
return `https://${normalized}`;
}
function getLatestTimestamp(values: Array<string | null | undefined>) {
let latest: string | null = null;
let latestMs = Number.NEGATIVE_INFINITY;
for (const value of values) {
if (!value) continue;
const ms = new Date(value).getTime();
if (Number.isNaN(ms)) continue;
if (ms > latestMs) {
latestMs = ms;
latest = value;
}
}
return latest;
}
export function DashboardControls({
instances,
subscriptions,
@@ -184,6 +201,7 @@ export function DashboardControls({
const [message, setMessage] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [isConnectPanelOpen, setIsConnectPanelOpen] = useState(!hasInstances);
const [isInstancesPanelOpen, setIsInstancesPanelOpen] = useState(true);
useEffect(() => {
if (!hasInstances) {
@@ -217,6 +235,38 @@ export function DashboardControls({
);
}, [hasInstances, isConnectPanelOpen]);
useEffect(() => {
if (!hasInstances) {
setIsInstancesPanelOpen(true);
return;
}
const savedState = window.localStorage.getItem(
"dashboard_instances_panel_open",
);
if (savedState === "true") {
setIsInstancesPanelOpen(true);
return;
}
if (savedState === "false") {
setIsInstancesPanelOpen(false);
return;
}
setIsInstancesPanelOpen(true);
}, [hasInstances]);
useEffect(() => {
if (!hasInstances) return;
window.localStorage.setItem(
"dashboard_instances_panel_open",
isInstancesPanelOpen ? "true" : "false",
);
}, [hasInstances, isInstancesPanelOpen]);
const healthCounts = instances.reduce(
(acc, instance) => {
if (instance.status === "connected") acc.connected += 1;
@@ -245,6 +295,30 @@ export function DashboardControls({
return statusMatches && searchMatches;
});
const instanceHealthSummary = instances.reduce(
(acc, instance) => {
const status = (instance.health_status ?? "unknown").toLowerCase();
if (status === "ok") acc.ok += 1;
else if (status === "degraded") acc.degraded += 1;
else if (status === "down") acc.down += 1;
else acc.unknown += 1;
return acc;
},
{ ok: 0, degraded: 0, down: 0, unknown: 0 },
);
const autoSyncEnabledCount = instances.filter(
(instance) => instance.auto_sync_enabled,
).length;
const latestInstanceSyncAt = getLatestTimestamp(
instances.map((instance) => instance.last_sync_at),
);
const latestInstanceHealthCheckAt = getLatestTimestamp(
instances.map((instance) => instance.health_last_checked_at),
);
async function runRequest(url: string, body?: unknown) {
const response = await fetch(url, {
method: "POST",
@@ -548,8 +622,45 @@ export function DashboardControls({
</div>
<div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
<div className="flex items-center justify-between gap-3">
<h2 className="text-lg font-semibold">Plesk Instances</h2>
{hasInstances ? (
<button
type="button"
onClick={() => setIsInstancesPanelOpen((open) => !open)}
className="rounded border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700"
>
{isInstancesPanelOpen ? "Hide" : "Show"}
</button>
) : null}
</div>
{!isInstancesPanelOpen && hasInstances ? (
<div className="rounded border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-700">
<p className="font-medium text-slate-900">
{instances.length} instance{instances.length === 1 ? "" : "s"}
</p>
<p className="mt-1">
Health — OK: {instanceHealthSummary.ok}, Degraded:{" "}
{instanceHealthSummary.degraded}, Down:{" "}
{instanceHealthSummary.down}, Unknown:{" "}
{instanceHealthSummary.unknown}
</p>
<p className="mt-1">
Auto-sync enabled on {autoSyncEnabledCount} instance
{autoSyncEnabledCount === 1 ? "" : "s"}
</p>
<p className="mt-1">
Last sync: {formatDateTime(latestInstanceSyncAt)}
</p>
<p className="mt-1">
Last health check: {formatDateTime(latestInstanceHealthCheckAt)}
</p>
</div>
) : null}
{isInstancesPanelOpen ? (
<>
<div className="space-y-2">
{instances.length === 0 ? (
<p className="text-sm text-slate-500">
@@ -576,7 +687,8 @@ export function DashboardControls({
: "bg-rose-100 text-rose-700"
}`}
>
Auto-sync {autoSyncByInstance[instance.id].status}
Auto-sync{" "}
{autoSyncByInstance[instance.id].status}
</span>
) : null}
<p className="text-sm font-semibold text-slate-900">
@@ -594,7 +706,9 @@ export function DashboardControls({
<p className="text-xs text-slate-500">
Health:{" "}
<span
title={instance.health_last_error ?? undefined}
title={
instance.health_last_error ?? undefined
}
className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${health.className}`}
>
{health.label}
@@ -602,7 +716,9 @@ export function DashboardControls({
</p>
<p className="text-xs text-slate-500">
Health last checked:{" "}
{formatDateTime(instance.health_last_checked_at)}
{formatDateTime(
instance.health_last_checked_at,
)}
</p>
<p className="text-xs text-slate-500">
Health latency:{" "}
@@ -623,7 +739,8 @@ export function DashboardControls({
className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${
instance.last_sync_status === "success"
? "bg-emerald-100 text-emerald-700"
: instance.last_sync_status === "failed" ||
: instance.last_sync_status ===
"failed" ||
instance.last_sync_status === "error"
? "bg-rose-100 text-rose-700"
: "bg-slate-100 text-slate-600"
@@ -663,8 +780,9 @@ export function DashboardControls({
<p className="text-xs text-slate-500">
Lock status:{" "}
{instance.auto_sync_lock_until &&
new Date(instance.auto_sync_lock_until).getTime() >
Date.now()
new Date(
instance.auto_sync_lock_until,
).getTime() > Date.now()
? "Sync in progress"
: "Idle"}
</p>
@@ -686,10 +804,14 @@ export function DashboardControls({
Last sync error: {instance.last_sync_error}
</p>
) : null}
{autoSyncByInstance[instance.id]?.error_message ? (
{autoSyncByInstance[instance.id]
?.error_message ? (
<p className="mt-1 text-xs text-rose-600">
Auto-sync error:{" "}
{autoSyncByInstance[instance.id].error_message}
{
autoSyncByInstance[instance.id]
.error_message
}
</p>
) : null}
{instance.health_last_error ? (
@@ -709,11 +831,14 @@ export function DashboardControls({
<input
type="checkbox"
checked={instance.auto_sync_enabled}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
onChange={(
e: ChangeEvent<HTMLInputElement>,
) =>
onUpdateAutoSync(instance.id, {
auto_sync_enabled: e.target.checked,
auto_sync_frequency_minutes:
instance.auto_sync_frequency_minutes ?? 60,
instance.auto_sync_frequency_minutes ??
60,
})
}
disabled={loading}
@@ -725,7 +850,8 @@ export function DashboardControls({
)}
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
onUpdateAutoSync(instance.id, {
auto_sync_enabled: instance.auto_sync_enabled,
auto_sync_enabled:
instance.auto_sync_enabled,
auto_sync_frequency_minutes: Number(
e.target.value,
),
@@ -836,7 +962,9 @@ export function DashboardControls({
<td className="px-2 py-1">
{formatDateTime(event.created_at)}
</td>
<td className="px-2 py-1">{event.action}</td>
<td className="px-2 py-1">
{event.action}
</td>
<td className="px-2 py-1">
{mapHealthResult(event.action)}
</td>
@@ -871,7 +999,9 @@ export function DashboardControls({
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Subscription Action</label>
<label className="text-sm font-medium">
Subscription Action
</label>
<select
value={actionSubId}
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
@@ -921,7 +1051,11 @@ export function DashboardControls({
</button>
</div>
{message ? <p className="text-sm text-slate-600">{message}</p> : null}
{message ? (
<p className="text-sm text-slate-600">{message}</p>
) : null}
</>
) : null}
</div>
<div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4 lg:col-span-2">