87 lines
4.5 KiB
TypeScript
87 lines
4.5 KiB
TypeScript
import Icon from "../../components/common/Icon";
|
||
import { useAuth } from "../../context/AuthContext";
|
||
|
||
import "../../styles/admin.css";
|
||
import "../../styles/dashboard.css";
|
||
|
||
export function DashboardPage({
|
||
scriptCount,
|
||
online,
|
||
onNavigate,
|
||
}: {
|
||
scriptCount: number;
|
||
online: boolean;
|
||
onNavigate: (page: "scripts" | "schedules" | "system") => void;
|
||
}) {
|
||
const { user, currentWorkspace } = useAuth();
|
||
return (
|
||
<section className="dashboard-page">
|
||
<div className="dashboard-hero">
|
||
<div>
|
||
<span>MODEL DEVELOPMENT PLATFORM</span>
|
||
<h2>下午好，{user?.display_name ?? "用户"}</h2>
|
||
<p>
|
||
当前位于 {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
|
||
，可以继续构建脚本或配置调度。
|
||
</p>
|
||
</div>
|
||
<span className="dashboard-hero__badge">{online ? "服务正常" : "服务连接中"}</span>
|
||
</div>
|
||
<div className="dashboard-metrics">
|
||
<article><Icon name="script" /><span><b>{scriptCount}</b><small>工作副本</small></span></article>
|
||
<article><Icon name="workspace" /><span><b>2</b><small>Workspace</small></span></article>
|
||
<article><Icon name="settings" /><span><b>4</b><small>平台用户</small></span></article>
|
||
<article><Icon name="check" /><span><b>{online ? "正常" : "检查中"}</b><small>平台状态</small></span></article>
|
||
</div>
|
||
<div className="dashboard-actions">
|
||
<button type="button" onClick={() => onNavigate("scripts")}><Icon name="script" />构建脚本</button>
|
||
<button type="button" onClick={() => onNavigate("schedules")}><Icon name="schedule" />调度配置</button>
|
||
<button type="button" onClick={() => onNavigate("system")}><Icon name="settings" />系统管理</button>
|
||
</div>
|
||
<div className="dashboard-grid">
|
||
<section className="dashboard-panel dashboard-panel--trend">
|
||
<header><div><span>运行趋势</span><h3>近 7 天调度执行</h3></div><b>成功率 92.6%</b></header>
|
||
<div className="trend-chart">
|
||
{[38, 55, 44, 73, 61, 86, 78].map((value, index) => (
|
||
<div className="trend-column" key={index}>
|
||
<span className="trend-column__value">{Math.round(value / 7)}</span>
|
||
<i style={{ height: `${value}%` }} />
|
||
<small>{["周一", "周二", "周三", "周四", "周五", "周六", "今天"][index]}</small>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<footer><span><i className="legend-dot is-success" />成功 75</span><span><i className="legend-dot is-failed" />失败 6</span></footer>
|
||
</section>
|
||
<section className="dashboard-panel dashboard-panel--donut">
|
||
<header><div><span>脚本资产</span><h3>类型分布</h3></div></header>
|
||
<div className="donut-layout">
|
||
<div className="donut-chart"><span><b>{scriptCount}</b><small>全部脚本</small></span></div>
|
||
<div className="donut-legend">
|
||
<span><i className="legend-dot is-notebook" /><b>Notebook</b><small>{Math.max(1, Math.round(scriptCount * .67))} 个 · 67%</small></span>
|
||
<span><i className="legend-dot is-python" /><b>Python</b><small>{Math.max(0, scriptCount - Math.round(scriptCount * .67))} 个 · 33%</small></span>
|
||
<span><i className="legend-dot is-version" /><b>稳定版本</b><small>3 个已发布</small></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="dashboard-panel dashboard-panel--activity">
|
||
<header><div><span>ACTIVITY</span><h3>最近平台活动</h3></div><button type="button">查看全部</button></header>
|
||
<div className="activity-table">
|
||
<div className="activity-table__head"><span>操作内容</span><span>执行人</span><span>状态</span><span>时间</span></div>
|
||
{[
|
||
["数据探索.ipynb 发布稳定版本 v3.0", "张三", "成功", "16:42"],
|
||
["每日模型训练流程完成调度运行", "Scheduler", "成功", "15:25"],
|
||
["批量预测.py 更新工作副本", "王五", "已同步", "14:18"],
|
||
["风险验证流程完成 DAG 校验", "李四", "成功", "11:06"],
|
||
].map((row) => (
|
||
<div className="activity-row" key={row[0]}>
|
||
<span><i className="activity-icon"><Icon name="check" size={13} /></i>{row[0]}</span>
|
||
<span>{row[1]}</span><span><b>{row[2]}</b></span><span>{row[3]}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|