Initial commit: PilotVault multi-service project
Add API Server (Go/PocketBase), Web App (Go BFF + Vue), Fly App (Flutter/DJI MSDK), Adobe Plugin, and Docker/Docker AIO deployment configs. Design assets and build artifacts are gitignored. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
tajniak81andClaude Opus 4.8 committed
commit
afc6952eda
172 files changed
+24591
No files matched your search
@@ -0,0 +1,807 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { theme, toggleTheme } from "./theme";
|
||||
import EndpointTable from "./components/EndpointTable.vue";
|
||||
|
||||
// ---- Auth gate: this panel is restricted to superadmins ------------------
|
||||
// The token is kept only for this browser (localStorage). Login proxies through
|
||||
// the API Server to PocketBase; the caller's role is then confirmed via /api/me,
|
||||
// and anyone who is not a superadmin is refused.
|
||||
const TOKEN_KEY = "pv_panel_token";
|
||||
const token = ref(localStorage.getItem(TOKEN_KEY) || "");
|
||||
const me = ref(null); // { email, role } once verified as superadmin
|
||||
const authed = ref(false);
|
||||
const booting = ref(true);
|
||||
|
||||
const form = ref({ email: "", password: "" });
|
||||
const loginErr = ref("");
|
||||
const busy = ref(false);
|
||||
|
||||
// Console tabs.
|
||||
const tab = ref("overview");
|
||||
const TABS = [
|
||||
{ id: "overview", label: "Overview" },
|
||||
{ id: "pocketbase", label: "PocketBase" },
|
||||
{ id: "plugins", label: "Plugins" },
|
||||
];
|
||||
|
||||
// Verify a token resolves to a superadmin. Returns true when access is granted.
|
||||
async function verify(tok) {
|
||||
try {
|
||||
const r = await fetch("/api/me", { headers: { Authorization: tok } });
|
||||
if (!r.ok) return false;
|
||||
const who = await r.json();
|
||||
if (who.role !== "superadmin") return false;
|
||||
me.value = { email: who.email, role: who.role };
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function grant(tok) {
|
||||
token.value = tok;
|
||||
localStorage.setItem(TOKEN_KEY, tok);
|
||||
authed.value = true;
|
||||
startPolling();
|
||||
loadPbConfig();
|
||||
loadPlugins();
|
||||
}
|
||||
|
||||
async function doLogin() {
|
||||
loginErr.value = "";
|
||||
const email = form.value.email.trim().toLowerCase();
|
||||
if (!email || !form.value.password) {
|
||||
loginErr.value = "Enter your email and password.";
|
||||
return;
|
||||
}
|
||||
busy.value = true;
|
||||
try {
|
||||
const r = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, password: form.value.password }),
|
||||
});
|
||||
const body = await r.json().catch(() => ({}));
|
||||
if (!r.ok || !body.token) {
|
||||
loginErr.value = "Invalid email or password.";
|
||||
return;
|
||||
}
|
||||
// Authenticated — now enforce the superadmin-only rule.
|
||||
if (!(await verify(body.token))) {
|
||||
loginErr.value = "Access to this panel is restricted to superadmins.";
|
||||
return;
|
||||
}
|
||||
form.value.password = "";
|
||||
await grant(body.token);
|
||||
} catch {
|
||||
loginErr.value = "Cannot reach the API server.";
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
stopPolling();
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
token.value = "";
|
||||
me.value = null;
|
||||
authed.value = false;
|
||||
}
|
||||
|
||||
// ---- PocketBase connection settings (superadmin) -------------------------
|
||||
const pb = ref(null); // { url, adminEmail, adminConfigured, probe }
|
||||
const pbForm = ref({ url: "", adminEmail: "", adminPassword: "" });
|
||||
const pbProbe = ref(null); // most recent test/save probe result
|
||||
const pbMsg = ref("");
|
||||
const pbErr = ref("");
|
||||
const pbBusy = ref(false);
|
||||
const pbTesting = ref(false);
|
||||
|
||||
function authHeaders(json) {
|
||||
const h = { Authorization: token.value };
|
||||
if (json) h["Content-Type"] = "application/json";
|
||||
return h;
|
||||
}
|
||||
|
||||
async function loadPbConfig() {
|
||||
try {
|
||||
const r = await fetch("/api/admin/pb-config", { headers: authHeaders() });
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
pb.value = d;
|
||||
pbForm.value = { url: d.url || "", adminEmail: d.adminEmail || "", adminPassword: "" };
|
||||
pbProbe.value = d.probe || null;
|
||||
} catch {
|
||||
/* leave settings unloaded; the card shows a retry */
|
||||
}
|
||||
}
|
||||
|
||||
async function testPbConfig() {
|
||||
pbMsg.value = "";
|
||||
pbErr.value = "";
|
||||
pbTesting.value = true;
|
||||
try {
|
||||
const r = await fetch("/api/admin/pb-config/test", {
|
||||
method: "POST",
|
||||
headers: authHeaders(true),
|
||||
body: JSON.stringify(pbForm.value),
|
||||
});
|
||||
pbProbe.value = await r.json();
|
||||
} catch {
|
||||
pbErr.value = "Could not run the test.";
|
||||
} finally {
|
||||
pbTesting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function savePbConfig() {
|
||||
pbMsg.value = "";
|
||||
pbErr.value = "";
|
||||
if (!pbForm.value.url.trim()) {
|
||||
pbErr.value = "A PocketBase URL is required.";
|
||||
return;
|
||||
}
|
||||
pbBusy.value = true;
|
||||
try {
|
||||
const r = await fetch("/api/admin/pb-config", {
|
||||
method: "PUT",
|
||||
headers: authHeaders(true),
|
||||
body: JSON.stringify(pbForm.value),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
pbErr.value = d.error || "Could not save the connection.";
|
||||
return;
|
||||
}
|
||||
pb.value = d.config;
|
||||
pbProbe.value = d.config?.probe || null;
|
||||
pbForm.value = { url: d.config.url, adminEmail: d.config.adminEmail, adminPassword: "" };
|
||||
pbMsg.value = d.warning || "Connection saved.";
|
||||
} catch {
|
||||
pbErr.value = "Could not reach the API server.";
|
||||
} finally {
|
||||
pbBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Plugins (external-service integrations, superadmin) ------------------
|
||||
const plugins = ref([]); // [{ name, provider, version, kind, capabilities, authType, configFields, enabled, config, baseURL, health }]
|
||||
const pluginsErr = ref("");
|
||||
const pluginsMsg = ref("");
|
||||
const editingPlugin = ref(""); // name whose config form is expanded
|
||||
const editConfig = ref({}); // working copy of the expanded plugin's config
|
||||
const busyPlugin = ref(""); // name of a plugin with an in-flight action
|
||||
const newExt = ref({ name: "", baseURL: "", provider: "" });
|
||||
const newExtErr = ref("");
|
||||
const newExtBusy = ref(false);
|
||||
|
||||
// Plugins are grouped into category tabs (mirrors the Web App's Integrations tabs).
|
||||
// A plugin's server-side `category` picks its tab; an unset category falls back to APIs — External.
|
||||
const PLUGIN_CATEGORIES = [
|
||||
{ id: "apis-external", label: "APIs — External" },
|
||||
{ id: "drives-external", label: "Drives — External" },
|
||||
{ id: "drives-local", label: "Drives — Local" },
|
||||
];
|
||||
const pluginTab = ref("apis-external");
|
||||
function pluginCategory(p) {
|
||||
return p.category || "apis-external";
|
||||
}
|
||||
function pluginsInCategory(id) {
|
||||
return plugins.value.filter((p) => pluginCategory(p) === id);
|
||||
}
|
||||
const activePlugins = computed(() => pluginsInCategory(pluginTab.value));
|
||||
|
||||
const kindBadge = {
|
||||
builtin: "bg-success-tint text-success",
|
||||
external: "bg-warning-tint text-warning",
|
||||
};
|
||||
const healthBadge = {
|
||||
ok: "bg-success-tint text-success",
|
||||
degraded: "bg-warning-tint text-warning",
|
||||
down: "bg-danger-tint text-danger",
|
||||
};
|
||||
|
||||
async function loadPlugins() {
|
||||
pluginsErr.value = "";
|
||||
try {
|
||||
const r = await fetch("/api/admin/plugins", { headers: authHeaders() });
|
||||
if (!r.ok) {
|
||||
pluginsErr.value = "Could not load plugins.";
|
||||
return;
|
||||
}
|
||||
const d = await r.json();
|
||||
plugins.value = d.plugins || [];
|
||||
// Populate health (and live credit usage) for enabled plugins that don't have
|
||||
// it yet — e.g. right after a server restart. Cached server-side afterwards,
|
||||
// so this probes at most once per plugin per server run.
|
||||
for (const p of plugins.value) {
|
||||
if (p.enabled && !p.health) autoCheckHealth(p.name);
|
||||
}
|
||||
} catch {
|
||||
pluginsErr.value = "Could not reach the API server.";
|
||||
}
|
||||
}
|
||||
|
||||
async function autoCheckHealth(name) {
|
||||
try {
|
||||
const r = await fetch(`/api/admin/plugins/${encodeURIComponent(name)}/health`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (r.ok && d.health) {
|
||||
const t = pluginBy(name);
|
||||
if (t) t.health = d.health;
|
||||
}
|
||||
} catch {
|
||||
/* leave health unset */
|
||||
}
|
||||
}
|
||||
|
||||
function pluginBy(name) {
|
||||
return plugins.value.find((p) => p.name === name);
|
||||
}
|
||||
|
||||
async function togglePlugin(p) {
|
||||
busyPlugin.value = p.name;
|
||||
pluginsMsg.value = "";
|
||||
try {
|
||||
const r = await fetch(`/api/admin/plugins/${encodeURIComponent(p.name)}`, {
|
||||
method: "PUT",
|
||||
headers: authHeaders(true),
|
||||
body: JSON.stringify({ enabled: !p.enabled }),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
pluginsMsg.value = d.error || "Could not update the plugin.";
|
||||
} else if (d.warning) {
|
||||
pluginsMsg.value = `${p.name}: ${d.warning}`;
|
||||
}
|
||||
await loadPlugins();
|
||||
} finally {
|
||||
busyPlugin.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function startPluginEdit(p) {
|
||||
editingPlugin.value = editingPlugin.value === p.name ? "" : p.name;
|
||||
const cfg = { ...(p.config || {}) };
|
||||
// Preselect each field's effective default when nothing is stored yet.
|
||||
for (const f of p.configFields || []) {
|
||||
if ((cfg[f.key] === undefined || cfg[f.key] === "") && f.default) cfg[f.key] = f.default;
|
||||
}
|
||||
editConfig.value = cfg;
|
||||
}
|
||||
|
||||
async function savePluginConfig(p) {
|
||||
busyPlugin.value = p.name;
|
||||
pluginsMsg.value = "";
|
||||
try {
|
||||
const r = await fetch(`/api/admin/plugins/${encodeURIComponent(p.name)}`, {
|
||||
method: "PUT",
|
||||
headers: authHeaders(true),
|
||||
body: JSON.stringify({ config: editConfig.value }),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
pluginsMsg.value = d.error || "Could not save the configuration.";
|
||||
} else {
|
||||
pluginsMsg.value = d.warning ? `${p.name}: ${d.warning}` : "Configuration saved.";
|
||||
editingPlugin.value = "";
|
||||
}
|
||||
await loadPlugins();
|
||||
} finally {
|
||||
busyPlugin.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function checkPlugin(p) {
|
||||
busyPlugin.value = p.name;
|
||||
pluginsMsg.value = "";
|
||||
try {
|
||||
const r = await fetch(`/api/admin/plugins/${encodeURIComponent(p.name)}/health`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (r.ok && d.health) {
|
||||
const t = pluginBy(p.name);
|
||||
if (t) t.health = d.health;
|
||||
} else {
|
||||
pluginsMsg.value = d.error || "Health check failed.";
|
||||
}
|
||||
} finally {
|
||||
busyPlugin.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function removePlugin(p) {
|
||||
if (p.kind !== "external") return;
|
||||
busyPlugin.value = p.name;
|
||||
try {
|
||||
const r = await fetch(`/api/admin/plugins/${encodeURIComponent(p.name)}`, {
|
||||
method: "DELETE",
|
||||
headers: authHeaders(),
|
||||
});
|
||||
if (!r.ok) {
|
||||
const d = await r.json().catch(() => ({}));
|
||||
pluginsMsg.value = d.error || "Could not remove the plugin.";
|
||||
}
|
||||
await loadPlugins();
|
||||
} finally {
|
||||
busyPlugin.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function registerExternal() {
|
||||
newExtErr.value = "";
|
||||
if (!newExt.value.name.trim() || !newExt.value.baseURL.trim()) {
|
||||
newExtErr.value = "Name and base URL are required.";
|
||||
return;
|
||||
}
|
||||
newExtBusy.value = true;
|
||||
try {
|
||||
const r = await fetch("/api/admin/plugins", {
|
||||
method: "POST",
|
||||
headers: authHeaders(true),
|
||||
body: JSON.stringify(newExt.value),
|
||||
});
|
||||
const d = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
newExtErr.value = d.error || "Could not register the plugin.";
|
||||
return;
|
||||
}
|
||||
newExt.value = { name: "", baseURL: "", provider: "" };
|
||||
pluginsMsg.value = "External plugin registered.";
|
||||
await loadPlugins();
|
||||
} catch {
|
||||
newExtErr.value = "Could not reach the API server.";
|
||||
} finally {
|
||||
newExtBusy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Live health poll against this server's aggregate /api/status, which probes
|
||||
// PocketBase and the Web App server-side (the browser only talks to the API).
|
||||
const checkedAt = ref(null);
|
||||
const devices = ref(null);
|
||||
const svc = ref({
|
||||
apiServer: { status: "checking", detail: "" },
|
||||
pocketBase: { status: "checking", detail: "" },
|
||||
webApp: { status: "checking", detail: "" },
|
||||
});
|
||||
let timer = null;
|
||||
|
||||
const rows = [
|
||||
{ key: "apiServer", label: "API server" },
|
||||
{ key: "pocketBase", label: "PocketBase" },
|
||||
{ key: "webApp", label: "Web App" },
|
||||
];
|
||||
|
||||
const badge = {
|
||||
checking: { label: "checking", cls: "bg-sunken text-secondary" },
|
||||
ok: { label: "operational", cls: "bg-success-tint text-success" },
|
||||
down: { label: "unreachable", cls: "bg-danger-tint text-danger" },
|
||||
unreachable: { label: "unreachable", cls: "bg-danger-tint text-danger" },
|
||||
};
|
||||
|
||||
function meta(h) {
|
||||
const bits = [];
|
||||
if (typeof h.latencyMs === "number") bits.push(h.latencyMs + "ms");
|
||||
if (h.httpStatus) bits.push("HTTP " + h.httpStatus);
|
||||
if (h.url) bits.push(h.url);
|
||||
return bits.join(" · ");
|
||||
}
|
||||
|
||||
async function check() {
|
||||
try {
|
||||
const r = await fetch("/api/status");
|
||||
if (!r.ok) throw new Error("status " + r.status);
|
||||
const b = await r.json();
|
||||
const api = b.apiServer || {};
|
||||
devices.value = api.devices ?? 0;
|
||||
svc.value = {
|
||||
apiServer: { status: "ok", detail: "" },
|
||||
pocketBase: { status: b.pocketBase?.status === "ok" ? "ok" : "down", detail: meta(b.pocketBase || {}) },
|
||||
webApp: { status: b.webApp?.status === "ok" ? "ok" : "down", detail: meta(b.webApp || {}) },
|
||||
};
|
||||
} catch {
|
||||
// The API server itself is unreachable → status of everything is unknown.
|
||||
devices.value = null;
|
||||
svc.value = {
|
||||
apiServer: { status: "unreachable", detail: "" },
|
||||
pocketBase: { status: "unreachable", detail: "" },
|
||||
webApp: { status: "unreachable", detail: "" },
|
||||
};
|
||||
}
|
||||
checkedAt.value = new Date();
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
check();
|
||||
clearInterval(timer);
|
||||
timer = setInterval(check, 10000);
|
||||
}
|
||||
function stopPolling() {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Resume a previous superadmin session if the stored token still checks out.
|
||||
if (token.value && (await verify(token.value))) {
|
||||
authed.value = true;
|
||||
startPolling();
|
||||
loadPbConfig();
|
||||
loadPlugins();
|
||||
} else if (token.value) {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
token.value = "";
|
||||
}
|
||||
booting.value = false;
|
||||
});
|
||||
onUnmounted(() => stopPolling());
|
||||
|
||||
// Client / dashboard API — used by the Web App and the API Web Panel.
|
||||
const clientApi = [
|
||||
{ method: "POST", path: "/api/auth/login", desc: "Exchange email + password for a session (via PocketBase)" },
|
||||
{ method: "GET", path: "/api/auth/validate", desc: "Validate the current session token" },
|
||||
{ method: "GET", path: "/api/me", desc: "Caller's id, email, role, and organization from their token" },
|
||||
{ method: "GET", path: "/api/preferences", desc: "Read the caller's saved settings blob" },
|
||||
{ method: "PUT", path: "/api/preferences", desc: "Persist the caller's settings onto their user record" },
|
||||
{ method: "GET", path: "/api/devices", desc: "List connected devices and last-known state" },
|
||||
{ method: "GET", path: "/api/devices/{id}/track", desc: "GPS track history for a device" },
|
||||
{ method: "POST", path: "/api/devices/{id}/command", desc: "Send a command down to a device" },
|
||||
{ method: "DELETE", path: "/api/devices/{id}", desc: "Forget a device's stored state" },
|
||||
{ method: "GET", path: "/ws/ui", desc: "Live telemetry stream (WebSocket)" },
|
||||
];
|
||||
|
||||
// Management API — user + organization management. Requires a manager
|
||||
// (admin or superadmin) token; admins are scoped to their own organization,
|
||||
// superadmins span all of them.
|
||||
const managementApi = [
|
||||
{ method: "GET", path: "/api/users", desc: "List users (admin: own org · superadmin: all)" },
|
||||
{ method: "POST", path: "/api/users", desc: "Create a user {email, password, role, organization?}" },
|
||||
{ method: "PATCH", path: "/api/users/{id}", desc: "Edit a user (role/org changes are scope-checked)" },
|
||||
{ method: "DELETE", path: "/api/users/{id}", desc: "Delete a user (not self; admins in-org only)" },
|
||||
{ method: "GET", path: "/api/orgs", desc: "List organizations (admin: own · superadmin: all)" },
|
||||
{ method: "POST", path: "/api/orgs", desc: "Create an organization {name} (superadmin)" },
|
||||
{ method: "PATCH", path: "/api/orgs/{id}", desc: "Rename an organization (superadmin)" },
|
||||
{ method: "DELETE", path: "/api/orgs/{id}", desc: "Delete an empty organization (superadmin)" },
|
||||
{ method: "GET", path: "/api/admin/pb-config", desc: "Read the PocketBase connection + live probe (superadmin)" },
|
||||
{ method: "POST", path: "/api/admin/pb-config/test", desc: "Test a candidate connection without applying (superadmin)" },
|
||||
{ method: "PUT", path: "/api/admin/pb-config", desc: "Update + persist the PocketBase connection (superadmin)" },
|
||||
{ method: "GET", path: "/api/admin/plugins", desc: "List plugins + state + last health (superadmin)" },
|
||||
{ method: "POST", path: "/api/admin/plugins", desc: "Register an external plugin {name, baseURL} (superadmin)" },
|
||||
{ method: "PUT", path: "/api/admin/plugins/{name}", desc: "Enable/disable + configure a plugin (superadmin)" },
|
||||
{ method: "DELETE", path: "/api/admin/plugins/{name}", desc: "Remove an external plugin (superadmin)" },
|
||||
{ method: "POST", path: "/api/admin/plugins/{name}/health", desc: "Run a plugin health check (superadmin)" },
|
||||
];
|
||||
|
||||
// Device API — used by the Fly App running on the drone/controller.
|
||||
const deviceApi = [
|
||||
{ method: "GET", path: "/ws/device?id={id}", desc: "Device telemetry uplink (WebSocket)" },
|
||||
{ method: "POST", path: "/api/telemetry?id={id}", desc: "Push a single telemetry event over HTTP" },
|
||||
{ method: "GET", path: "/healthz", desc: "Readiness probe" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto flex max-w-5xl flex-col gap-6 px-6 pt-12 pb-16">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<svg width="32" height="32" viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
||||
<g stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="8,30 19,17 30,30" stroke="var(--brand)" />
|
||||
<polyline points="18,33 29,20 40,33" stroke="currentColor" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="leading-tight text-primary">
|
||||
<div class="font-display text-lg font-bold tracking-tight">PilotVault</div>
|
||||
<span class="pv-eyebrow">API server</span>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<span v-if="authed && me" class="pv-eyebrow hidden truncate sm:inline">{{ me.email }}</span>
|
||||
<button v-if="authed" class="pv-btn-sec pv-btn-sm" @click="logout">Sign out</button>
|
||||
<button
|
||||
class="pv-btn-sec pv-btn-sm"
|
||||
:title="theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<!-- sun (shown in dark mode) -->
|
||||
<svg v-if="theme === 'dark'" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
||||
</svg>
|
||||
<!-- moon (shown in light mode) -->
|
||||
<svg v-else class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
Theme
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Booting: resolving a stored session -->
|
||||
<div v-if="booting" class="rounded-lg border border-subtle bg-card px-5 py-10 text-center shadow-sm">
|
||||
<span class="pv-eyebrow">Checking session…</span>
|
||||
</div>
|
||||
|
||||
<!-- Login gate — superadmin only -->
|
||||
<div v-else-if="!authed" class="mx-auto w-full max-w-sm rounded-lg border border-subtle bg-card shadow-sm">
|
||||
<div class="border-b border-subtle px-5 py-4">
|
||||
<div class="text-base font-semibold text-primary">Sign in</div>
|
||||
<span class="pv-eyebrow">Superadmin access only</span>
|
||||
</div>
|
||||
<form class="flex flex-col gap-3 px-5 py-5" @submit.prevent="doLogin">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">Email</span>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
autocomplete="username"
|
||||
class="pv-input"
|
||||
placeholder="superadmin@pilotvault.local"
|
||||
/>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">Password</span>
|
||||
<input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
class="pv-input"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</label>
|
||||
<p v-if="loginErr" class="rounded-sm bg-danger-tint px-3 py-2 text-xs font-medium text-danger">
|
||||
{{ loginErr }}
|
||||
</p>
|
||||
<button type="submit" class="pv-btn mt-1" :disabled="busy">
|
||||
{{ busy ? "Signing in…" : "Sign in" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Console — visible only to an authenticated superadmin -->
|
||||
<template v-else>
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-1 self-start rounded-lg border border-subtle bg-card p-1 shadow-sm">
|
||||
<button
|
||||
v-for="t in TABS"
|
||||
:key="t.id"
|
||||
class="rounded-md px-3.5 py-1.5 text-sm font-semibold transition"
|
||||
:class="tab === t.id ? 'bg-brand text-on-brand' : 'text-secondary hover:text-primary'"
|
||||
@click="tab = t.id"
|
||||
>
|
||||
{{ t.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Overview tab -->
|
||||
<div v-show="tab === 'overview'" class="flex flex-col gap-6">
|
||||
<!-- Status -->
|
||||
<div class="rounded-lg border border-subtle bg-card shadow-sm">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div class="text-base font-semibold text-primary">Status</div>
|
||||
<span class="pv-eyebrow">{{ checkedAt ? "checked " + checkedAt.toLocaleTimeString() : "—" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="row.key"
|
||||
class="flex items-center justify-between gap-3 border-t border-subtle px-5 py-3.5 first:border-t-0"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-semibold text-primary">{{ row.label }}</div>
|
||||
<div v-if="svc[row.key].detail" class="truncate font-mono text-xs text-secondary">{{ svc[row.key].detail }}</div>
|
||||
</div>
|
||||
<span
|
||||
class="inline-flex shrink-0 items-center gap-1.5 rounded-sm px-2.5 py-1 font-mono text-xs font-medium"
|
||||
:class="badge[svc[row.key].status].cls"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{{ badge[svc[row.key].status].label }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Devices metric -->
|
||||
<div class="flex items-center justify-between gap-3 border-t border-subtle px-5 py-3.5">
|
||||
<div class="text-sm font-semibold text-primary">Devices</div>
|
||||
<span class="font-mono text-xs text-secondary">
|
||||
{{ devices === null ? "—" : devices + " online" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EndpointTable title="Client API" auth="PocketBase session" :endpoints="clientApi" />
|
||||
<EndpointTable title="Management API" auth="Admin · superadmin" :endpoints="managementApi" />
|
||||
<EndpointTable title="Device API" auth="Device uplink" :endpoints="deviceApi" />
|
||||
</div>
|
||||
|
||||
<!-- PocketBase tab -->
|
||||
<div v-show="tab === 'pocketbase'" class="flex flex-col gap-6">
|
||||
<!-- PocketBase connection settings -->
|
||||
<div class="rounded-lg border border-subtle bg-card shadow-sm">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-semibold text-primary">PocketBase connection</div>
|
||||
<span class="pv-eyebrow">Settings</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="pbProbe"
|
||||
class="inline-flex shrink-0 items-center gap-1.5 rounded-sm px-2.5 py-1 font-mono text-xs font-medium"
|
||||
:class="pbProbe.reachable ? (pbProbe.superuser ? 'bg-success-tint text-success' : 'bg-warning-tint text-warning') : 'bg-danger-tint text-danger'"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{{ pbProbe.reachable ? (pbProbe.superuser ? "connected" : "reachable") : "unreachable" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 px-5 py-5">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">PocketBase URL</span>
|
||||
<input v-model="pbForm.url" class="pv-input" placeholder="http://10.2.1.10:8026" spellcheck="false" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">Service account email</span>
|
||||
<input v-model="pbForm.adminEmail" class="pv-input" placeholder="admin@pilotvault.local" autocomplete="off" spellcheck="false" />
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">Service account password</span>
|
||||
<input
|
||||
v-model="pbForm.adminPassword"
|
||||
type="password"
|
||||
class="pv-input"
|
||||
autocomplete="new-password"
|
||||
:placeholder="pb && pb.adminConfigured ? 'leave blank to keep current' : 'set a password'"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div v-if="pbProbe" class="font-mono text-[11px] text-muted">
|
||||
health: {{ pbProbe.reachable ? "ok" : "down" }}<span v-if="pbProbe.latencyMs"> · {{ pbProbe.latencyMs }}ms</span>
|
||||
· superuser auth: {{ pbProbe.superuser ? "ok" : "—" }}<span v-if="pbProbe.detail"> · {{ pbProbe.detail }}</span>
|
||||
</div>
|
||||
|
||||
<p v-if="pbErr" class="rounded-sm bg-danger-tint px-3 py-2 text-xs font-medium text-danger">{{ pbErr }}</p>
|
||||
<p v-else-if="pbMsg" class="rounded-sm bg-success-tint px-3 py-2 text-xs font-medium text-success">{{ pbMsg }}</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button class="pv-btn" :disabled="pbBusy" @click="savePbConfig">{{ pbBusy ? "Saving…" : "Save connection" }}</button>
|
||||
<button class="pv-btn-sec" :disabled="pbTesting" @click="testPbConfig">{{ pbTesting ? "Testing…" : "Test connection" }}</button>
|
||||
</div>
|
||||
<p class="text-[11px] text-muted">
|
||||
The service account is used only for user & organization management. Changing the URL
|
||||
repoints the whole API Server at a new PocketBase and may sign you out.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Plugins tab -->
|
||||
<div v-show="tab === 'plugins'" class="flex flex-col gap-6">
|
||||
<!-- Plugins -->
|
||||
<div class="rounded-lg border border-subtle bg-card shadow-sm">
|
||||
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
||||
<div>
|
||||
<div class="text-base font-semibold text-primary">Plugins</div>
|
||||
<span class="pv-eyebrow">External integrations</span>
|
||||
</div>
|
||||
<button class="pv-btn-sec pv-btn-sm" @click="loadPlugins">Refresh</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<p v-if="pluginsErr" class="px-5 py-3 text-xs font-medium text-danger">{{ pluginsErr }}</p>
|
||||
<p v-if="pluginsMsg" class="border-b border-subtle bg-sunken px-5 py-2.5 font-mono text-xs text-secondary">{{ pluginsMsg }}</p>
|
||||
<p v-if="!plugins.length && !pluginsErr" class="px-5 py-6 text-sm text-secondary">No plugins registered yet.</p>
|
||||
|
||||
<!-- category tabs -->
|
||||
<div v-if="plugins.length" class="flex gap-1 overflow-x-auto overflow-y-hidden border-b border-subtle px-3 pt-1">
|
||||
<button
|
||||
v-for="t in PLUGIN_CATEGORIES"
|
||||
:key="t.id"
|
||||
class="-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-semibold transition"
|
||||
:class="pluginTab === t.id ? 'border-brand text-primary' : 'border-transparent text-secondary hover:text-primary'"
|
||||
@click="pluginTab = t.id"
|
||||
>
|
||||
{{ t.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- per-tab empty state -->
|
||||
<p v-if="plugins.length && !activePlugins.length" class="px-5 py-6 text-sm text-secondary">No plugins in this category.</p>
|
||||
|
||||
<!-- plugin rows -->
|
||||
<div v-for="p in activePlugins" :key="p.name" class="border-t border-subtle px-5 py-4 first:border-t-0">
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-semibold text-primary">{{ p.name }}</span>
|
||||
<span class="rounded-sm px-1.5 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wider" :class="kindBadge[p.kind]">{{ p.kind }}</span>
|
||||
<span
|
||||
v-if="p.health"
|
||||
class="inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 font-mono text-[10px] font-medium"
|
||||
:class="healthBadge[p.health.status]"
|
||||
:title="p.health.detail || ''"
|
||||
>
|
||||
<span class="h-1 w-1 rounded-full bg-current"></span>{{ p.health.status }}<span v-if="p.health.latencyMs"> · {{ p.health.latencyMs }}ms</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-0.5 font-mono text-xs text-secondary">{{ p.provider }} · v{{ p.version }} · {{ p.authType }}</div>
|
||||
<div v-if="p.health && p.health.detail" class="mt-0.5 text-[11px] text-secondary">{{ p.health.detail }}</div>
|
||||
<div v-if="p.capabilities && p.capabilities.length" class="mt-2 flex flex-col gap-1.5">
|
||||
<div class="pv-eyebrow">Capabilities</div>
|
||||
<div v-for="c in p.capabilities" :key="c.id" class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
|
||||
<span class="rounded-sm bg-sunken px-1.5 py-0.5 font-mono text-[10px] text-secondary">{{ c.id }}</span>
|
||||
<span v-if="c.method || c.endpoint" class="font-mono text-[10px] text-muted">{{ c.method }} {{ c.endpoint }}</span>
|
||||
<span v-if="c.description" class="w-full text-[11px] text-secondary sm:w-auto">{{ c.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="p.baseURL" class="mt-1 truncate font-mono text-[11px] text-muted">{{ p.baseURL }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
class="pv-btn-sec pv-btn-sm"
|
||||
:disabled="busyPlugin === p.name"
|
||||
:class="p.enabled ? '!border-transparent !bg-success-tint !text-success' : ''"
|
||||
@click="togglePlugin(p)"
|
||||
>
|
||||
<span class="h-1.5 w-1.5 rounded-full" :class="p.enabled ? 'bg-success' : 'bg-muted'"></span>
|
||||
{{ p.enabled ? "Enabled" : "Disabled" }}
|
||||
</button>
|
||||
<button v-if="p.configFields && p.configFields.length" class="pv-btn-sec pv-btn-sm" @click="startPluginEdit(p)">Configure</button>
|
||||
<button class="pv-btn-sec pv-btn-sm" :disabled="busyPlugin === p.name" @click="checkPlugin(p)">Check</button>
|
||||
<button v-if="p.kind === 'external'" class="pv-btn-sec pv-btn-sm !text-danger" :disabled="busyPlugin === p.name" @click="removePlugin(p)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- config form -->
|
||||
<div v-if="editingPlugin === p.name" class="mt-3 flex flex-col gap-2 rounded-md border border-subtle bg-sunken px-4 py-4">
|
||||
<label v-for="f in p.configFields" :key="f.key" class="flex flex-col gap-1">
|
||||
<span class="pv-eyebrow">{{ f.label }}<span v-if="f.required" class="text-danger"> *</span></span>
|
||||
<select v-if="f.type === 'select'" v-model="editConfig[f.key]" class="pv-input">
|
||||
<option v-for="o in f.options" :key="o.value" :value="o.value">{{ o.label }}</option>
|
||||
</select>
|
||||
<input
|
||||
v-else
|
||||
v-model="editConfig[f.key]"
|
||||
:type="f.secret || f.type === 'password' ? 'password' : f.type === 'number' ? 'number' : 'text'"
|
||||
class="pv-input"
|
||||
autocomplete="off"
|
||||
:placeholder="f.help || ''"
|
||||
/>
|
||||
<span v-if="f.help" class="text-[11px] text-muted">{{ f.help }}</span>
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="pv-btn pv-btn-sm" :disabled="busyPlugin === p.name" @click="savePluginConfig(p)">Save configuration</button>
|
||||
<button class="pv-btn-sec pv-btn-sm" @click="editingPlugin = ''">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- register external plugin -->
|
||||
<div class="border-t border-subtle px-5 py-4">
|
||||
<div class="pv-eyebrow mb-2">Register external plugin</div>
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<input v-model="newExt.name" class="pv-input sm:w-40" placeholder="name" autocomplete="off" spellcheck="false" />
|
||||
<input v-model="newExt.baseURL" class="pv-input flex-1" placeholder="https://plugin.example.com" autocomplete="off" spellcheck="false" />
|
||||
<button class="pv-btn" :disabled="newExtBusy" @click="registerExternal">{{ newExtBusy ? "Adding…" : "Add" }}</button>
|
||||
</div>
|
||||
<p v-if="newExtErr" class="mt-2 text-xs font-medium text-danger">{{ newExtErr }}</p>
|
||||
<p class="mt-2 text-[11px] text-muted">
|
||||
A remote service that answers <span class="font-mono">GET /health</span> and
|
||||
<span class="font-mono">GET /manifest</span> — added at runtime, no rebuild.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="text-center font-mono text-[11px] text-muted">
|
||||
PilotVault — live drone telemetry, command & control.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user