74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { type Schedule } from "../../services/api";
|
|
import Icon from "../../components/common/Icon";
|
|
|
|
export function ScheduleList({
|
|
schedules,
|
|
selectedScheduleId,
|
|
keyword,
|
|
loading,
|
|
onSelect,
|
|
onContextMenu,
|
|
onKeywordChange,
|
|
}: {
|
|
schedules: Schedule[];
|
|
selectedScheduleId: string | null;
|
|
keyword: string;
|
|
loading: boolean;
|
|
onSelect: (scheduleId: string) => void;
|
|
onContextMenu: (event: React.MouseEvent, schedule: Schedule | null) => void;
|
|
onKeywordChange: (keyword: string) => void;
|
|
}) {
|
|
const filtered = keyword.trim()
|
|
? schedules.filter((item) => item.schedule_name.toLowerCase().includes(keyword.trim().toLowerCase()))
|
|
: schedules;
|
|
|
|
return (
|
|
<section className="schedule-panel schedule-list-panel">
|
|
<div
|
|
className="schedule-panel__title"
|
|
onContextMenu={(event) => onContextMenu(event, null)}
|
|
>
|
|
<div><strong>调度方案</strong><span>{schedules.length}</span></div>
|
|
</div>
|
|
<label className="schedule-search">
|
|
<Icon name="search" size={15} />
|
|
<input
|
|
value={keyword}
|
|
placeholder="搜索调度名称"
|
|
onChange={(event) => onKeywordChange(event.target.value)}
|
|
/>
|
|
</label>
|
|
<div
|
|
className="schedule-list"
|
|
onContextMenu={(event) => onContextMenu(event, null)}
|
|
>
|
|
{loading ? (
|
|
<p className="schedule-empty">正在加载调度方案…</p>
|
|
) : filtered.length ? (
|
|
filtered.map((item) => (
|
|
<button
|
|
className={`schedule-card${
|
|
selectedScheduleId === item.schedule_id ? " schedule-card--active" : ""
|
|
}`}
|
|
key={item.schedule_id}
|
|
type="button"
|
|
onClick={() => onSelect(item.schedule_id)}
|
|
onContextMenu={(event) => onContextMenu(event, item)}
|
|
>
|
|
<span className={`schedule-status${item.enabled ? " is-enabled" : ""}`} />
|
|
<span>
|
|
<strong>{item.schedule_name}</strong>
|
|
<small>
|
|
{item.node_count} 个节点 · {item.enabled ? "已启用" : "未启用"}
|
|
</small>
|
|
</span>
|
|
</button>
|
|
))
|
|
) : (
|
|
<p className="schedule-empty">暂无调度方案</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|