feat(web): add backup page and reorganize admin navigation
Move workflow backup/restore to a dedicated page, rename Ops to Manage, and group sidebar links into Automate, Platform, and Admin sections. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -21,6 +21,7 @@ import { UsersPage } from "./pages/UsersPage.jsx";
|
||||
import { SecretsPage } from "./pages/SecretsPage.jsx";
|
||||
import { VariablesPage } from "./pages/VariablesPage.jsx";
|
||||
import { OpsPage } from "./pages/OpsPage.jsx";
|
||||
import { BackupPage } from "./pages/BackupPage.jsx";
|
||||
|
||||
export function App() {
|
||||
const qc = useQueryClient();
|
||||
@@ -74,13 +75,17 @@ export function App() {
|
||||
<>
|
||||
<Route path="/users" element={<UsersPage />} />
|
||||
<Route path="/secrets" element={<SecretsPage />} />
|
||||
<Route path="/ops" element={<OpsPage />} />
|
||||
<Route path="/manage" element={<OpsPage />} />
|
||||
<Route path="/ops" element={<Navigate to="/manage" replace />} />
|
||||
<Route path="/backup" element={<BackupPage />} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Route path="/users" element={<Navigate to="/" replace />} />
|
||||
<Route path="/secrets" element={<Navigate to="/" replace />} />
|
||||
<Route path="/manage" element={<Navigate to="/" replace />} />
|
||||
<Route path="/ops" element={<Navigate to="/" replace />} />
|
||||
<Route path="/backup" element={<Navigate to="/" replace />} />
|
||||
</>
|
||||
)}
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { Fragment } from "react";
|
||||
import { Link, NavLink, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
LuActivity,
|
||||
LuArchive,
|
||||
LuCode,
|
||||
LuDatabase,
|
||||
LuFileText,
|
||||
@@ -20,17 +22,50 @@ import { useLogout, useOpsStatus } from "../api/hooks.js";
|
||||
import { brandMark } from "../theme/brand.js";
|
||||
import { useTheme } from "../theme.jsx";
|
||||
|
||||
const links = [
|
||||
{ to: "/", label: "Home", icon: LuHouse, end: true },
|
||||
{ to: "/scripts", label: "Scripts", icon: LuCode },
|
||||
const navSections = [
|
||||
{
|
||||
items: [{ to: "/", label: "Home", icon: LuHouse, end: true }],
|
||||
},
|
||||
{
|
||||
title: "Automate",
|
||||
items: [
|
||||
{ to: "/workflows", label: "Workflows", icon: LuGitBranch },
|
||||
{ to: "/scripts", label: "Scripts", icon: LuCode },
|
||||
{ to: "/events", label: "Events", icon: LuActivity },
|
||||
{ to: "/kv", label: "KV", icon: LuDatabase },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{ to: "/variables", label: "Variables", icon: LuTags },
|
||||
{ to: "/kv", label: "KV", icon: LuDatabase },
|
||||
{ to: "/auth", label: "Auth", icon: LuShield },
|
||||
{ to: "/responses", label: "Responses", icon: LuFileText },
|
||||
{ to: "/secrets", label: "Secrets", icon: LuKey, admin: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Admin",
|
||||
admin: true,
|
||||
items: [
|
||||
{ to: "/manage", label: "Manage", icon: LuServer },
|
||||
{ to: "/backup", label: "Backup", icon: LuArchive },
|
||||
{ to: "/users", label: "Users", icon: LuUsers },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function visibleSections(role) {
|
||||
const isAdmin = role === "admin";
|
||||
return navSections
|
||||
.filter((s) => !s.admin || isAdmin)
|
||||
.map((s) => ({
|
||||
...s,
|
||||
items: s.items.filter((item) => !item.admin || isAdmin),
|
||||
}))
|
||||
.filter((s) => s.items.length > 0);
|
||||
}
|
||||
|
||||
export function Layout({ user, children }) {
|
||||
const { theme, toggle } = useTheme();
|
||||
const logout = useLogout();
|
||||
@@ -38,17 +73,6 @@ export function Layout({ user, children }) {
|
||||
const ops = useOpsStatus(user.role === "admin");
|
||||
const restartNeeded = Boolean(ops.data?.desired?.restartNeeded);
|
||||
|
||||
const navItems = [
|
||||
...links,
|
||||
...(user.role === "admin"
|
||||
? [
|
||||
{ to: "/secrets", label: "Secrets", icon: LuKey },
|
||||
{ to: "/users", label: "Users", icon: LuUsers },
|
||||
{ to: "/ops", label: "Ops", icon: LuServer },
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
function closeDrawer() {
|
||||
const el = document.getElementById("nav-drawer");
|
||||
if (el) el.checked = false;
|
||||
@@ -101,8 +125,8 @@ export function Layout({ user, children }) {
|
||||
? ` (${ops.data.desired.restartReason})`
|
||||
: ""}
|
||||
.{" "}
|
||||
<Link to="/ops" className="link font-medium">
|
||||
Drain restart from Ops
|
||||
<Link to="/manage" className="link font-medium">
|
||||
Drain restart from Manage
|
||||
</Link>{" "}
|
||||
to apply on HTTP + workers.
|
||||
</span>
|
||||
@@ -120,7 +144,12 @@ export function Layout({ user, children }) {
|
||||
<span className="text-base font-semibold text-base-content">JerapahFlow</span>
|
||||
</div>
|
||||
</li>
|
||||
{navItems.map(({ to, label, icon: Icon, end }) => (
|
||||
{visibleSections(user.role).map((section) => (
|
||||
<Fragment key={section.title ?? "overview"}>
|
||||
{section.title ? (
|
||||
<li className="menu-title">{section.title}</li>
|
||||
) : null}
|
||||
{section.items.map(({ to, label, icon: Icon, end }) => (
|
||||
<li key={to}>
|
||||
<NavLink to={to} end={end} onClick={closeDrawer}>
|
||||
<Icon className="size-4" />
|
||||
@@ -128,6 +157,8 @@ export function Layout({ user, children }) {
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useState } from "react";
|
||||
import { LuDownload, LuUpload } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDownloadWorkflowBackup,
|
||||
useRestoreWorkflowBackup,
|
||||
} from "../api/hooks.js";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
export function BackupPage() {
|
||||
const backup = useDownloadWorkflowBackup();
|
||||
const restoreBackup = useRestoreWorkflowBackup();
|
||||
const { notify } = useNotifications();
|
||||
const [restoreMode, setRestoreMode] = useState("merge");
|
||||
const [pendingFile, setPendingFile] = useState(null);
|
||||
|
||||
function download() {
|
||||
backup.mutate(undefined, {
|
||||
onSuccess: () => notify.success("Backup downloaded"),
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
});
|
||||
}
|
||||
|
||||
function restore(file, mode) {
|
||||
restoreBackup.mutate(
|
||||
{ file, mode },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
notify.success("Backup restored");
|
||||
if (data.warnings?.length) {
|
||||
notify.warning(data.warnings.join("; "));
|
||||
}
|
||||
},
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
onSettled: () => setPendingFile(null),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function onPickFile(e) {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
if (restoreMode === "replace") {
|
||||
setPendingFile(file);
|
||||
return;
|
||||
}
|
||||
restore(file, restoreMode);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Backup</h1>
|
||||
<p className="text-sm opacity-70">
|
||||
Download or restore workflows and installed plugins as a zip archive.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section className="card bg-base-100 border border-base-300">
|
||||
<div className="card-body gap-3">
|
||||
<h2 className="card-title text-base">Download</h2>
|
||||
<p className="text-sm opacity-70">
|
||||
Includes workflow YAML and installed plugins. Use this to copy the
|
||||
setup to another machine or keep a snapshot before a restore.
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={backup.isPending}
|
||||
onClick={download}
|
||||
>
|
||||
{backup.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuDownload className="size-4" />
|
||||
)}
|
||||
Download backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card bg-base-100 border border-base-300">
|
||||
<div className="card-body gap-3">
|
||||
<h2 className="card-title text-base">Restore</h2>
|
||||
<p className="text-sm opacity-70">
|
||||
Merge keeps existing files and overwrites matches from the zip.
|
||||
Replace deletes current workflows and plugins first.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<select
|
||||
className="select select-bordered select-sm"
|
||||
value={restoreMode}
|
||||
onChange={(e) => setRestoreMode(e.target.value)}
|
||||
aria-label="Restore mode"
|
||||
>
|
||||
<option value="merge">Merge</option>
|
||||
<option value="replace">Replace</option>
|
||||
</select>
|
||||
<label
|
||||
className={`btn btn-sm ${restoreBackup.isPending ? "btn-disabled" : ""}`}
|
||||
>
|
||||
{restoreBackup.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuUpload className="size-4" />
|
||||
)}
|
||||
Restore from zip
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
className="hidden"
|
||||
disabled={restoreBackup.isPending}
|
||||
onChange={onPickFile}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{pendingFile ? (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold">Replace with this backup?</h3>
|
||||
<p className="mt-2 text-sm opacity-70">
|
||||
Current workflows and plugins will be deleted, then{" "}
|
||||
<span className="font-mono">{pendingFile.name}</span> will be
|
||||
restored. This cannot be undone from this page.
|
||||
</p>
|
||||
<div className="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost"
|
||||
onClick={() => setPendingFile(null)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-error"
|
||||
disabled={restoreBackup.isPending}
|
||||
onClick={() => restore(pendingFile, "replace")}
|
||||
>
|
||||
Replace
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={() => setPendingFile(null)}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -55,7 +55,7 @@ export function OpsPage() {
|
||||
if (unavailable) {
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
<h1 className="text-2xl font-semibold">Ops</h1>
|
||||
<h1 className="text-2xl font-semibold">Manage</h1>
|
||||
<div className="alert alert-warning">
|
||||
<span>
|
||||
Control plane is not reachable on <code>/ops</code>. Use{" "}
|
||||
@@ -74,14 +74,10 @@ export function OpsPage() {
|
||||
const children = data?.children;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div className="mx-auto space-y-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Ops</h1>
|
||||
<p className="text-sm opacity-70">
|
||||
Process control via PM2. Pause stops workers from opening jobs;
|
||||
cron/HTTP can still enqueue. Restart drains active jobs unless forced.
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold">Manage</h1>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -4,8 +4,6 @@ import { LuActivity, LuCopy, LuPencil, LuPlay, LuPlus, LuRefreshCw, LuTrash2, Lu
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteWorkflow,
|
||||
useDownloadWorkflowBackup,
|
||||
useRestoreWorkflowBackup,
|
||||
useReregisterWorkflows,
|
||||
useRunWorkflow,
|
||||
useSetWorkflowEnabled,
|
||||
@@ -14,7 +12,6 @@ import {
|
||||
import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
|
||||
import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
|
||||
import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
export function WorkflowsPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -28,10 +25,6 @@ export function WorkflowsPage() {
|
||||
const run = useRunWorkflow();
|
||||
const setEnabled = useSetWorkflowEnabled();
|
||||
const reregister = useReregisterWorkflows();
|
||||
const backup = useDownloadWorkflowBackup();
|
||||
const restoreBackup = useRestoreWorkflowBackup();
|
||||
const { notify } = useNotifications();
|
||||
const [restoreMode, setRestoreMode] = useState("merge");
|
||||
|
||||
if (editParam) {
|
||||
const slash = editParam.indexOf("/");
|
||||
@@ -113,56 +106,6 @@ export function WorkflowsPage() {
|
||||
<p className="text-error text-sm">{errorMessage(setEnabled.error)}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
disabled={backup.isPending}
|
||||
onClick={() =>
|
||||
backup.mutate(undefined, {
|
||||
onSuccess: () => notify.success("Backup downloaded"),
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
})
|
||||
}
|
||||
>
|
||||
Download backup
|
||||
</button>
|
||||
<label className="btn btn-ghost btn-xs cursor-pointer">
|
||||
Restore backup
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
restoreBackup.mutate(
|
||||
{ file, mode: restoreMode },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
notify.success("Backup restored");
|
||||
if (data.warnings?.length) {
|
||||
notify.warning(data.warnings.join("; "));
|
||||
}
|
||||
},
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
},
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<select
|
||||
className="select select-xs"
|
||||
value={restoreMode}
|
||||
onChange={(e) => setRestoreMode(e.target.value)}
|
||||
aria-label="Restore mode"
|
||||
>
|
||||
<option value="merge">Merge restore</option>
|
||||
<option value="replace">Replace restore</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user