feat: add admin state and diagnostics (TASK-WP6-05)
Dada P0-A isolated Windows CI / validate-and-package (push) Successful in 12m4s
Dada P0-A isolated Windows CI / validate-and-package (push) Successful in 12m4s
This commit is contained in:
suyx
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import "./admin-models.css";
|
||||
|
||||
@@ -64,7 +64,7 @@ export function AdminModelsPage() {
|
||||
const priorityRefs = useRef<Record<string, HTMLInputElement | null>>({});
|
||||
const defaultRefs = useRef<Record<string, HTMLInputElement | null>>({});
|
||||
|
||||
async function load() {
|
||||
const load = useCallback(async () => {
|
||||
setLoadingFailed(false);
|
||||
setConflicted(false);
|
||||
try {
|
||||
@@ -80,9 +80,16 @@ export function AdminModelsPage() {
|
||||
} catch {
|
||||
setLoadingFailed(true);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { void load(); }, []);
|
||||
useEffect(() => { void load(); }, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof EventSource === "undefined") return undefined;
|
||||
const source = new EventSource("/api/v1/events");
|
||||
source.onmessage = () => { void load(); };
|
||||
return () => source.close();
|
||||
}, [load]);
|
||||
|
||||
const validation = useMemo(() => {
|
||||
if (!draft) return { valid: false, message: "" };
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
.admin-services-storage { max-width: 1180px; }
|
||||
.admin-services-heading { align-items: end; }
|
||||
.admin-services-heading-actions { align-items: center; display: flex; gap: 16px; }
|
||||
.admin-services-heading-actions button, .admin-diagnostics-section button { background: #111827; border: 0; color: #fff; cursor: pointer; font: inherit; padding: 10px 14px; }
|
||||
.admin-health-section { border-top: 1px solid #d9dde5; margin-top: 26px; padding-top: 22px; }
|
||||
.admin-health-section > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
|
||||
.admin-health-section h3 { margin: 4px 0 0; }
|
||||
.admin-health-section header p { color: #7b8493; font-size: 11px; letter-spacing: .12em; margin: 0; }
|
||||
.admin-safe-note { color: #667085; font-size: 13px; }
|
||||
.admin-service-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.admin-service-card { background: #fff; border: 1px solid #e1e5ea; min-height: 160px; padding: 18px; }
|
||||
.admin-service-card.is-degraded, .admin-service-card.is-paused_quota, .admin-service-card.is-paused_provider, .admin-service-card.is-unavailable { border-color: #e5b6b6; }
|
||||
.admin-service-card-heading { align-items: center; display: flex; justify-content: space-between; }
|
||||
.admin-service-card-heading span, .admin-storage-state { color: #147a50; font-size: 13px; }
|
||||
.admin-service-card.is-degraded .admin-service-card-heading span, .admin-service-card.is-paused_quota .admin-service-card-heading span, .admin-service-card.is-paused_provider .admin-service-card-heading span, .admin-service-card.is-unavailable .admin-service-card-heading span { color: #b42318; }
|
||||
.admin-service-card dl, .admin-storage-details { display: grid; gap: 10px; margin: 18px 0 0; }
|
||||
.admin-service-card dl div, .admin-storage-details div { align-items: baseline; display: flex; justify-content: space-between; }
|
||||
.admin-service-card dt, .admin-storage-details dt { color: #667085; font-size: 12px; }
|
||||
.admin-service-card dd, .admin-storage-details dd { margin: 0; text-align: right; }
|
||||
.admin-storage-state.is-full, .admin-storage-state.is-unavailable { color: #b42318; }
|
||||
.admin-storage-metrics { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.admin-storage-metrics div { background: #f7f8fa; padding: 14px 16px; }
|
||||
.admin-storage-metrics span { color: #667085; display: block; font-size: 12px; }
|
||||
.admin-storage-metrics strong { display: block; font-size: 20px; margin-top: 6px; }
|
||||
.admin-storage-progress { background: #e5e7eb; height: 8px; margin-top: 18px; overflow: hidden; }
|
||||
.admin-storage-progress span { background: #147a50; display: block; height: 100%; }
|
||||
.admin-storage-description { color: #667085; font-size: 13px; line-height: 1.7; max-width: 780px; }
|
||||
.admin-storage-description code { color: #344054; }
|
||||
.admin-diagnostics-section > header button:disabled { background: #98a2b3; cursor: not-allowed; }
|
||||
.admin-diagnostics-section > p { color: #667085; font-size: 13px; }
|
||||
.admin-diagnostics-section pre { background: #111827; color: #d1fadf; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; margin: 16px 0 0; max-height: 280px; overflow: auto; padding: 16px; white-space: pre-wrap; }
|
||||
.admin-services-loading { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
|
||||
.admin-services-loading span, .admin-diagnostics-placeholder { background: #eef1f4; display: block; height: 160px; }
|
||||
.admin-services-failure { align-items: center; background: #fff4f2; color: #b42318; display: flex; gap: 16px; justify-content: space-between; padding: 14px 16px; }
|
||||
.admin-services-failure button { background: transparent; border: 1px solid #b42318; color: #b42318; cursor: pointer; padding: 6px 12px; }
|
||||
@media (max-width: 900px) { .admin-service-grid, .admin-storage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 620px) { .admin-service-grid, .admin-storage-metrics { grid-template-columns: 1fr; } .admin-services-heading-actions { align-items: flex-end; flex-direction: column; gap: 8px; } }
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import type { AdminDiagnosticsResponse, AdminServicesStorageResponse } from "@dada/shared-contracts";
|
||||
|
||||
import "./admin-services-storage.css";
|
||||
|
||||
const serviceLabels: Record<AdminServicesStorageResponse["services"][number]["service_id"], string> = {
|
||||
ai_gateway: "AI 网关",
|
||||
amap: "高德",
|
||||
api: "API",
|
||||
asset_root: "素材根",
|
||||
resend: "Resend",
|
||||
worker: "Worker",
|
||||
};
|
||||
|
||||
const statusLabels: Record<AdminServicesStorageResponse["services"][number]["status"], string> = {
|
||||
active: "正常",
|
||||
degraded: "有异常",
|
||||
disabled: "已停用",
|
||||
paused_provider: "供应商暂停",
|
||||
paused_quota: "额度暂停",
|
||||
unavailable: "不可用",
|
||||
};
|
||||
|
||||
const impactLabels: Record<AdminServicesStorageResponse["services"][number]["impact_scope"], string> = {
|
||||
account: "账户模型",
|
||||
api: "后台接口",
|
||||
authentication: "认证",
|
||||
generation: "生成",
|
||||
location: "定位",
|
||||
model: "单模型",
|
||||
none: "无",
|
||||
storage: "存储",
|
||||
unknown: "未知范围",
|
||||
};
|
||||
|
||||
function formatTime(value: string | null) {
|
||||
if (!value) return "未记录";
|
||||
return new Intl.DateTimeFormat("zh-CN", { dateStyle: "short", timeStyle: "short" }).format(new Date(value));
|
||||
}
|
||||
|
||||
async function getJson<T>(url: string) {
|
||||
const response = await fetch(url, { credentials: "same-origin" });
|
||||
if (response.status === 401) window.dispatchEvent(new Event("dada:session-invalid"));
|
||||
if (!response.ok) throw new Error("admin_state_unavailable");
|
||||
return await response.json() as T;
|
||||
}
|
||||
|
||||
export function AdminServicesStoragePage() {
|
||||
const [state, setState] = useState<AdminServicesStorageResponse>();
|
||||
const [diagnostics, setDiagnostics] = useState<AdminDiagnosticsResponse>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setFailed(false);
|
||||
try {
|
||||
const [nextState, nextDiagnostics] = await Promise.all([
|
||||
getJson<AdminServicesStorageResponse>("/api/v1/admin/services-storage"),
|
||||
getJson<AdminDiagnosticsResponse>("/api/v1/admin/diagnostics"),
|
||||
]);
|
||||
setState(nextState);
|
||||
setDiagnostics(nextDiagnostics);
|
||||
} catch {
|
||||
setFailed(true);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { void load(); }, [load]);
|
||||
|
||||
async function copyDiagnostics() {
|
||||
if (!diagnostics) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(diagnostics.diagnostic_text);
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 1800);
|
||||
} catch {
|
||||
setCopied(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="admin-services-storage" id="admin-main">
|
||||
<header className="admin-page-heading admin-services-heading">
|
||||
<div><p>OPERATIONS / HEALTH</p><h2>服务与存储</h2></div>
|
||||
<div className="admin-services-heading-actions">
|
||||
{state ? <time dateTime={state.generated_at}>更新于 {formatTime(state.generated_at)}</time> : null}
|
||||
<button aria-label="重新读取服务与存储状态" onClick={() => void load()} type="button">重新读取</button>
|
||||
</div>
|
||||
</header>
|
||||
{loading && !state ? <div aria-label="服务与存储状态加载中" className="admin-services-loading"><span /><span /><span /><span /></div> : null}
|
||||
{failed ? <div className="admin-services-failure" role="alert"><span>状态暂时无法读取{state ? `，保留 ${formatTime(state.generated_at)} 的结果` : ""}。</span><button onClick={() => void load()} type="button">重试</button></div> : null}
|
||||
{state ? (
|
||||
<>
|
||||
<section aria-labelledby="admin-services-list-heading" className="admin-health-section">
|
||||
<header><div><p>SERVICE STATUS</p><h3 id="admin-services-list-heading">外部服务与本机组件</h3></div><span className="admin-safe-note">仅显示脱敏状态</span></header>
|
||||
<div className="admin-service-grid">
|
||||
{state.services.map((service) => (
|
||||
<article className={`admin-service-card is-${service.status}`} key={service.service_id}>
|
||||
<div className="admin-service-card-heading"><strong>{serviceLabels[service.service_id]}</strong><span>{statusLabels[service.status]}</span></div>
|
||||
<dl>
|
||||
<div><dt>配置状态</dt><dd>{service.configured ? "已配置" : "未配置"}</dd></div>
|
||||
<div><dt>影响范围</dt><dd>{impactLabels[service.impact_scope]}</dd></div>
|
||||
<div><dt>最近检查</dt><dd>{formatTime(service.checked_at)}</dd></div>
|
||||
{service.pause_reason ? <div><dt>安全原因</dt><dd>{service.pause_reason}</dd></div> : null}
|
||||
</dl>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section aria-labelledby="admin-storage-heading" className="admin-health-section">
|
||||
<header><div><p>LOCAL DATA ROOT</p><h3 id="admin-storage-heading">本机内容容量</h3></div><span className={`admin-storage-state is-${state.storage.status}`}>{state.storage.status === "active" ? "可写" : state.storage.status === "full" ? "已满" : "不可用"}</span></header>
|
||||
<div className="admin-storage-metrics">
|
||||
<div><span>已用内容</span><strong>{(state.storage.managed_content_bytes / 1024 / 1024 / 1024).toFixed(2)} GB</strong></div>
|
||||
<div><span>固定上限</span><strong>{(state.storage.hard_limit_bytes / 1024 / 1024 / 1024).toFixed(2)} GB</strong></div>
|
||||
<div><span>容量提醒</span><strong>{state.storage.capacity_notice_level}</strong></div>
|
||||
<div><span>清理队列</span><strong>{state.storage.cleanup_pending_count}</strong></div>
|
||||
</div>
|
||||
<div className="admin-storage-progress" aria-label={`本机内容容量 ${(state.storage.managed_content_bytes / state.storage.hard_limit_bytes * 100).toFixed(1)}%`}><span style={{ width: `${Math.min(100, state.storage.managed_content_bytes / state.storage.hard_limit_bytes * 100)}%` }} /></div>
|
||||
<p className="admin-storage-description">测试数据仅保存在本机，不自动备份，也不会迁移到正式系统。当前 Windows 用户的 Dada 本机数据目录引用：<code>{state.storage.data_root_ref}</code>。只读规范素材库不计入 5 GB 内容额度。</p>
|
||||
<dl className="admin-storage-details"><div><dt>最后计量</dt><dd>{formatTime(state.storage.last_measured_at)}</dd></div><div><dt>重新计量</dt><dd>{state.storage.remeasurement_required ? "需要完成" : "无需等待"}</dd></div></dl>
|
||||
</section>
|
||||
<section aria-labelledby="admin-diagnostics-heading" className="admin-health-section admin-diagnostics-section">
|
||||
<header><div><p>DIAGNOSTICS</p><h3 id="admin-diagnostics-heading">脱敏诊断</h3></div><button disabled={!diagnostics} onClick={() => void copyDiagnostics()} type="button">{copied ? "已复制" : "复制诊断"}</button></header>
|
||||
<p>诊断内容只包含固定版本、组件状态、逻辑位置和容量计量，不包含密钥、邮箱、绝对路径、提示词、图片或供应商原文。</p>
|
||||
{diagnostics ? <pre aria-label="脱敏诊断内容">{diagnostics.diagnostic_text}</pre> : <div aria-label="诊断加载中" className="admin-diagnostics-placeholder" />}
|
||||
</section>
|
||||
</>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// Generated from openapi/openapi.json. Do not edit by hand.
|
||||
|
||||
import type { CreditAdjustmentResponse, CreditAdjustmentRequest, BrowserSupportSuccess, BrowserSupportRequest, AccountDeletionResponse, AccountDeletionCompleteRequest, AdminLoginCompleteResponse, AdminLoginCompleteRequest, LoginCompleteResponse, LoginCompleteRequest, RegistrationCompleteResponse, RegistrationCompleteRequest, GenerationCreateResponse, AccountSettingsResponse, AdminOverviewResponse, AdminSessionResponse, CreditBalanceResponse, BootstrapResponse, GenerationTaskResponse, SseEvent, ModelConfig, ModelConfigurationResponse, CreditLedgerResponse, ProjectDetailResponse, UserSessionResponse, ProjectListResponse, RecentAssetListResponse, LogoutResponse, ProjectPurgeResponse, RecentAssetRecordResponse, RecentAssetRecordRequest, ProjectRenameResponse, ProjectRenameRequest, ModelConfigUpdateRequest, ProjectRestoreResponse, ReverseGeocodeResponse, ReverseGeocodeRequest, LatestExportSaveResponse, ProjectStateSaveResponse, ProjectEditableState, AccountDeletionSendResponse, RegistrationSendResponse, AdminLoginSendRequest, LoginSendRequest, RegistrationSendRequest, FailedEmptyTrashResponse, FailedEmptyTrashRequest, ProjectTrashResponse, AccountProfileUpdateResponse, AccountProfileUpdateRequest } from "./types.gen.js";
|
||||
import type { CreditAdjustmentResponse, CreditAdjustmentRequest, BrowserSupportSuccess, BrowserSupportRequest, AccountDeletionResponse, AccountDeletionCompleteRequest, AdminLoginCompleteResponse, AdminLoginCompleteRequest, LoginCompleteResponse, LoginCompleteRequest, RegistrationCompleteResponse, RegistrationCompleteRequest, GenerationCreateResponse, AccountSettingsResponse, AdminDiagnosticsResponse, AdminOverviewResponse, AdminServicesStorageResponse, AdminSessionResponse, CreditBalanceResponse, BootstrapResponse, GenerationTaskResponse, SseEvent, ModelConfig, ModelConfigurationResponse, CreditLedgerResponse, ProjectDetailResponse, UserSessionResponse, ProjectListResponse, RecentAssetListResponse, LogoutResponse, ProjectPurgeResponse, RecentAssetRecordResponse, RecentAssetRecordRequest, ProjectRenameResponse, ProjectRenameRequest, ModelConfigUpdateRequest, ProjectRestoreResponse, ReverseGeocodeResponse, ReverseGeocodeRequest, LatestExportSaveResponse, ProjectStateSaveResponse, ProjectEditableState, AccountDeletionSendResponse, RegistrationSendResponse, AdminLoginSendRequest, LoginSendRequest, RegistrationSendRequest, FailedEmptyTrashResponse, FailedEmptyTrashRequest, ProjectTrashResponse, AccountProfileUpdateResponse, AccountProfileUpdateRequest } from "./types.gen.js";
|
||||
|
||||
export interface ClientOptions { baseUrl?: string; fetch?: typeof globalThis.fetch; headers?: HeadersInit; }
|
||||
|
||||
@@ -87,6 +87,13 @@ export async function getAccountSettings(options: ClientOptions = {}): Promise<A
|
||||
return response.json() as Promise<AccountSettingsResponse>;
|
||||
}
|
||||
|
||||
export async function getAdminDiagnostics(options: ClientOptions = {}): Promise<AdminDiagnosticsResponse> {
|
||||
const request = options.fetch ?? globalThis.fetch;
|
||||
const response = await request(`${options.baseUrl ?? ""}/api/v1/admin/diagnostics`, { method: "GET", headers: options.headers ?? {} });
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
return response.json() as Promise<AdminDiagnosticsResponse>;
|
||||
}
|
||||
|
||||
export async function getAdminOverview(options: ClientOptions = {}): Promise<AdminOverviewResponse> {
|
||||
const request = options.fetch ?? globalThis.fetch;
|
||||
const response = await request(`${options.baseUrl ?? ""}/api/v1/admin/overview`, { method: "GET", headers: options.headers ?? {} });
|
||||
@@ -94,6 +101,13 @@ export async function getAdminOverview(options: ClientOptions = {}): Promise<Adm
|
||||
return response.json() as Promise<AdminOverviewResponse>;
|
||||
}
|
||||
|
||||
export async function getAdminServicesStorage(options: ClientOptions = {}): Promise<AdminServicesStorageResponse> {
|
||||
const request = options.fetch ?? globalThis.fetch;
|
||||
const response = await request(`${options.baseUrl ?? ""}/api/v1/admin/services-storage`, { method: "GET", headers: options.headers ?? {} });
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
return response.json() as Promise<AdminServicesStorageResponse>;
|
||||
}
|
||||
|
||||
export async function getAdminSession(options: ClientOptions = {}): Promise<AdminSessionResponse> {
|
||||
const request = options.fetch ?? globalThis.fetch;
|
||||
const response = await request(`${options.baseUrl ?? ""}/api/v1/admin-auth/session`, { method: "GET", headers: options.headers ?? {} });
|
||||
|
||||
@@ -60,6 +60,21 @@ export type AdminCreditParams = {
|
||||
"userId": string;
|
||||
};
|
||||
|
||||
export type AdminDiagnosticsResponse = {
|
||||
"diagnostic_text": string;
|
||||
"generated_at": string;
|
||||
"services": AdminServicesStorageResponse;
|
||||
"system": {
|
||||
"api_status": "ready" | "degraded" | "unavailable";
|
||||
"app_version": string;
|
||||
"browser_support": Array<{
|
||||
"brand": "Google Chrome" | "Microsoft Edge";
|
||||
"major": number;
|
||||
}>;
|
||||
"worker_status": "ready" | "degraded" | "unavailable";
|
||||
};
|
||||
};
|
||||
|
||||
export type AdminLoginCompleteRequest = {
|
||||
"registration_id": string;
|
||||
"verification_code": string;
|
||||
@@ -117,6 +132,29 @@ export type AdminOverviewResponse = {
|
||||
};
|
||||
};
|
||||
|
||||
export type AdminServicesStorageResponse = {
|
||||
"generated_at": string;
|
||||
"services": Array<{
|
||||
"checked_at": string | null;
|
||||
"configured": boolean;
|
||||
"impact_scope": "none" | "authentication" | "location" | "generation" | "storage" | "api" | "model" | "account" | "unknown";
|
||||
"pause_reason": string | null;
|
||||
"service_id": "resend" | "amap" | "ai_gateway" | "worker" | "api" | "asset_root";
|
||||
"status": "active" | "paused_quota" | "paused_provider" | "disabled" | "degraded" | "unavailable";
|
||||
}>;
|
||||
"storage": {
|
||||
"capacity_notice_level": "normal" | "warning" | "critical";
|
||||
"cleanup_pending_count": number;
|
||||
"data_root_ref": "configured_local_data_root";
|
||||
"hard_limit_bytes": number;
|
||||
"last_measured_at": string | null;
|
||||
"managed_content_bytes": number;
|
||||
"remeasurement_required": boolean;
|
||||
"status": "active" | "full" | "unavailable";
|
||||
"storage_backend": "local_filesystem";
|
||||
};
|
||||
};
|
||||
|
||||
export type AdminSessionResponse = {
|
||||
"acknowledged_private_content_notice_version": string | null;
|
||||
"admin": AdminAuthenticatedUser;
|
||||
|
||||
@@ -7,6 +7,7 @@ import { UserAuthPage } from "./user-auth.js";
|
||||
import { AccountSettingsPage } from "./account-settings.js";
|
||||
import { AdminUsersPage } from "./admin-users.js";
|
||||
import { AdminModelsPage } from "./admin-models.js";
|
||||
import { AdminServicesStoragePage } from "./admin-services-storage.js";
|
||||
import { CreditsPage } from "./credits-page.js";
|
||||
import { ProjectDetailPage, ProjectsPage, WorkspacePage } from "./project-pages.js";
|
||||
import { EditorPage } from "./editor-page.js";
|
||||
@@ -45,7 +46,7 @@ function renderAuthenticationEntry() {
|
||||
"/admin/invites": { content: <AdminPlaceholderPage title="邀请码" />, title: "邀请码" },
|
||||
"/admin/models": { content: <AdminModelsPage />, title: "模型" },
|
||||
"/admin/preview": { content: <AdminPlaceholderPage title="内部预览" />, title: "内部预览" },
|
||||
"/admin/services-storage": { content: <AdminPlaceholderPage title="服务与存储" />, title: "服务与存储" },
|
||||
"/admin/services-storage": { content: <AdminServicesStoragePage />, title: "服务与存储" },
|
||||
"/admin/users": { content: <AdminUsersPage />, title: "用户与点数" },
|
||||
};
|
||||
const page = adminPages[window.location.pathname] ?? adminPages["/admin"]!;
|
||||
|
||||
Reference in New Issue
Block a user