@gadmin2n/schematics 0.0.70 → 0.0.72

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/agenda/index.tsx

@@ -0,0 +1,536 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  Col,
+  Input,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+  Statistic,
+  Switch,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+  message,
+} from 'antd';
+import {
+  DeleteOutlined,
+  PlayCircleOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { customRequest } from 'helpers/http';
+
+const { Title } = Typography;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface JobItem {
+  id: string;
+  name: string;
+  module: string | null;
+  state: string;
+  runs: { queued: number; success: number; running: number; failed: number };
+  nextRunAt: string | null;
+  lastRunAt: string | null;
+  lastFinishedAt: string | null;
+  failReason: string | null;
+  failedAt: string | null;
+  repeatInterval: string | null;
+  data: Record<string, any> | null;
+  lockedAt: string | null;
+  disabled: boolean;
+}
+
+interface Overview {
+  running: number;
+  scheduled: number;
+  queued: number;
+  completed: number;
+  failed: number;
+  repeating: number;
+  paused: number;
+  active: number;
+}
+
+interface JobsResponse {
+  overview: Overview;
+  modules: string[];
+  jobs: JobItem[];
+  total: number;
+  totalPages: number;
+}
+
+// ─── State badge helpers ───────────────────────────────────────────────────────
+
+const STATE_COLOR: Record<string, string> = {
+  running: 'processing',
+  scheduled: 'default',
+  queued: 'warning',
+  completed: 'success',
+  failed: 'error',
+  repeating: 'purple',
+  paused: 'default',
+};
+
+function StateTag({ state }: { state: string }) {
+  return <Badge status={STATE_COLOR[state] as any} text={state} />;
+}
+
+/** 圆圈指示器：有数量时显示彩色圆圈+内嵌数字，无数量时显示灰色空心圆 */
+function RunDot({
+  count,
+  color,
+  label,
+}: {
+  count: number;
+  color: string;
+  label: string;
+}) {
+  const size = 28;
+  const hasCount = count > 0;
+  return (
+    <Tooltip title={`${label}: ${count}`}>
+      <span
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          verticalAlign: 'middle',
+          width: size,
+          height: size,
+          borderRadius: '50%',
+          border: `2.5px solid ${hasCount ? color : '#d9d9d9'}`,
+          fontSize: 11,
+          fontWeight: 600,
+          color: hasCount ? color : '#d9d9d9',
+          cursor: 'default',
+          lineHeight: 1,
+        }}
+      >
+        {hasCount ? count : ''}
+      </span>
+    </Tooltip>
+  );
+}
+
+// ─── AgendaJobsPage ───────────────────────────────────────────────────────────
+
+export default function AgendaJobsPage() {
+  const navigate = useNavigate();
+  const [jobs, setJobs] = useState<JobItem[]>([]);
+  const [overview, setOverview] = useState<Overview | null>(null);
+  const [modules, setModules] = useState<string[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // Filters — synced with URL search params
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filterState = searchParams.get('state') || undefined;
+  const filterToggle = searchParams.get('toggle') || undefined;
+  const filterName = searchParams.get('name') || undefined;
+  const filterModule = searchParams.get('module') || undefined;
+  const page = Number(searchParams.get('page')) || 1;
+  const PAGE_SIZE = 20;
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | undefined>) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          for (const [k, v] of Object.entries(updates)) {
+            if (v) next.set(k, v);
+            else next.delete(k);
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const setFilterState = useCallback(
+    (v: string | undefined) => updateParams({ state: v, page: undefined }),
+    [updateParams],
+  );
+  const setFilterToggle = useCallback(
+    (v: string | undefined) => updateParams({ toggle: v, page: undefined }),
+    [updateParams],
+  );
+  const setFilterName = useCallback(
+    (v: string | undefined) => updateParams({ name: v, page: undefined }),
+    [updateParams],
+  );
+  const setFilterModule = useCallback(
+    (v: string | undefined) => updateParams({ module: v, page: undefined }),
+    [updateParams],
+  );
+  const setPage = useCallback(
+    (p: number) => updateParams({ page: p > 1 ? String(p) : undefined }),
+    [updateParams],
+  );
+
+  // Auto-refresh
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fetchJobs = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, any> = {
+        skip: (page - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      };
+      if (filterState) params.state = filterState;
+      if (filterToggle) params.toggle = filterToggle;
+      if (filterName) params.q = filterName;
+      if (filterModule) params.module = filterModule;
+
+      const res = await customRequest<JobsResponse>(
+        'agenda/jobs',
+        'GET',
+        params,
+      );
+      setJobs(res.jobs);
+      setOverview(res.overview);
+      setModules(res.modules);
+      setTotal(res.total);
+    } catch (e: any) {
+      message.error(e?.message ?? 'Failed to fetch jobs');
+    } finally {
+      setLoading(false);
+    }
+  }, [page, filterState, filterToggle, filterName, filterModule]);
+
+  // Initial fetch + auto-refresh every 5s
+  useEffect(() => {
+    fetchJobs();
+    timerRef.current = setInterval(fetchJobs, 5000);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [fetchJobs]);
+
+  // ─── Row actions ───────────────────────────────────────────────────────────
+
+  async function handleAction(
+    action: 'requeue' | 'delete' | 'disable' | 'enable',
+    ids: string[],
+  ) {
+    try {
+      const res = await customRequest<{ affected: number }>(
+        `agenda/${action}`,
+        'POST',
+        { jobIds: ids },
+      );
+      message.success(`操作成功，影响 ${res.affected} 条任务`);
+      fetchJobs();
+    } catch (e: any) {
+      message.error(e?.message ?? '操作失败');
+    }
+  }
+
+  // ─── Overview cards ────────────────────────────────────────────────────────
+
+  const OVERVIEW_ITEMS: {
+    key: keyof Overview;
+    label: string;
+    color: string;
+  }[] = [
+    { key: 'running', label: 'Running', color: '#1677ff' },
+    { key: 'scheduled', label: 'Scheduled', color: '#595959' },
+    { key: 'queued', label: 'Queued', color: '#faad14' },
+    { key: 'completed', label: 'Completed', color: '#52c41a' },
+    { key: 'failed', label: 'Failed', color: '#ff4d4f' },
+    { key: 'repeating', label: 'Repeating', color: '#722ed1' },
+    { key: 'paused', label: 'Paused', color: '#8c8c8c' },
+  ];
+
+  // ─── Table columns ─────────────────────────────────────────────────────────
+
+  const columns = [
+    {
+      title: '',
+      key: 'toggle',
+      width: 50,
+      render: (_: any, record: JobItem) => (
+        <Popconfirm
+          title={record.disabled ? '确定恢复此任务？' : '确定暂停此任务？'}
+          okText="确认"
+          cancelText="取消"
+          onConfirm={() =>
+            handleAction(record.disabled ? 'enable' : 'disable', [record.id])
+          }
+        >
+          <Switch size="small" checked={!record.disabled} />
+        </Popconfirm>
+      ),
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (_: string, record: JobItem) => (
+        <div>
+          <a
+            onClick={() => navigate(`show/${encodeURIComponent(record.name)}`)}
+            style={{
+              display: 'block',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            title={record.name}
+          >
+            {record.name}
+          </a>
+          {record.module && (
+            <Tag color="cyan" style={{ marginTop: 4 }}>
+              {record.module}
+            </Tag>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'State',
+      dataIndex: 'state',
+      key: 'state',
+      width: 100,
+      render: (state: string) => <StateTag state={state} />,
+    },
+    {
+      title: 'Schedule',
+      dataIndex: 'repeatInterval',
+      key: 'repeatInterval',
+      width: 110,
+      render: (v: string | null) => (v ? <Tag color="purple">{v}</Tag> : '—'),
+    },
+    {
+      title: 'Last Run',
+      dataIndex: 'lastRunAt',
+      key: 'lastRunAt',
+      width: 120,
+      render: (v: string | null) =>
+        v ? (
+          <Tooltip title={new Date(v).toLocaleString()}>
+            <span>
+              {new Date(v).toLocaleString(undefined, {
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </span>
+          </Tooltip>
+        ) : (
+          '—'
+        ),
+    },
+    {
+      title: 'Next Run',
+      dataIndex: 'nextRunAt',
+      key: 'nextRunAt',
+      width: 120,
+      render: (v: string | null) =>
+        v ? (
+          <Tooltip title={new Date(v).toLocaleString()}>
+            <span>
+              {new Date(v).toLocaleString(undefined, {
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </span>
+          </Tooltip>
+        ) : (
+          '—'
+        ),
+    },
+    {
+      title: 'Runs',
+      key: 'runs',
+      width: 170,
+      render: (_: any, record: JobItem) => (
+        <Space size={6}>
+          <RunDot count={record.runs.queued} color="#faad14" label="Queued" />
+          <RunDot count={record.runs.success} color="#006d32" label="Success" />
+          <RunDot count={record.runs.running} color="#52c41a" label="Running" />
+          <RunDot count={record.runs.failed} color="#ff4d4f" label="Failed" />
+        </Space>
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_: any, record: JobItem) => (
+        <Space>
+          <Popconfirm
+            title="确定立即执行此任务？"
+            okText="确认"
+            cancelText="取消"
+            onConfirm={() => handleAction('requeue', [record.id])}
+          >
+            <Tooltip title="Trigger: 立即执行一次">
+              <Button size="small" icon={<PlayCircleOutlined />} />
+            </Tooltip>
+          </Popconfirm>
+          <Popconfirm
+            title="确定删除此任务？"
+            description="删除后无法恢复，请谨慎操作。"
+            okText="确认删除"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+            onConfirm={() => handleAction('delete', [record.id])}
+          >
+            <Tooltip title="Delete">
+              <Button size="small" danger icon={<DeleteOutlined />} />
+            </Tooltip>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  // ─── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
+      {/* Header */}
+      <Card style={{ marginBottom: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Title level={4} style={{ margin: 0 }}>
+            Cron Jobs
+          </Title>
+          <Button icon={<ReloadOutlined />} onClick={fetchJobs}></Button>
+        </div>
+      </Card>
+
+      {/* Overview cards */}
+      {overview && (
+        <Row gutter={12} style={{ marginBottom: 16 }}>
+          {OVERVIEW_ITEMS.map(({ key, label, color }) => (
+            <Col key={key} flex="1">
+              <Card
+                size="small"
+                hoverable
+                onClick={() =>
+                  setFilterState(filterState === key ? undefined : key)
+                }
+                style={{
+                  borderColor: filterState === key ? color : undefined,
+                  cursor: 'pointer',
+                }}
+              >
+                <Statistic
+                  title={label}
+                  value={overview[key]}
+                  valueStyle={{ color }}
+                />
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      )}
+
+      {/* Filters */}
+      <Card style={{ marginBottom: 16 }}>
+        <Space wrap>
+          <Space size={0}>
+            {[
+              {
+                key: undefined,
+                label: 'All',
+                count: overview ? overview.active + overview.paused : 0,
+              },
+              { key: 'active', label: 'Active', count: overview?.active ?? 0 },
+              { key: 'paused', label: 'Paused', count: overview?.paused ?? 0 },
+            ].map(({ key, label, count }) => {
+              const selected = filterToggle === key;
+              return (
+                <Button
+                  key={label}
+                  type={selected ? 'primary' : 'default'}
+                  onClick={() => setFilterToggle(key)}
+                  style={{
+                    borderRadius: 0,
+                    ...(label === 'All'
+                      ? { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }
+                      : {}),
+                    ...(label === 'Paused'
+                      ? { borderTopRightRadius: 6, borderBottomRightRadius: 6 }
+                      : {}),
+                  }}
+                >
+                  {label}{' '}
+                  <Badge
+                    count={count}
+                    showZero
+                    style={{
+                      marginLeft: 6,
+                      backgroundColor: selected
+                        ? 'rgba(255,255,255,0.3)'
+                        : '#8c8c8c',
+                    }}
+                  />
+                </Button>
+              );
+            })}
+          </Space>
+          <Select
+            placeholder="模块筛选"
+            allowClear
+            value={filterModule}
+            onChange={(v) => setFilterModule(v)}
+            style={{ width: 160 }}
+            options={modules.map((m) => ({ value: m, label: m }))}
+          />
+          <Input
+            placeholder="按名称过滤"
+            allowClear
+            defaultValue={filterName}
+            onChange={(e) => {
+              const v = e.target.value;
+              if (debounceRef.current) clearTimeout(debounceRef.current);
+              debounceRef.current = setTimeout(
+                () => setFilterName(v || undefined),
+                300,
+              );
+            }}
+            style={{ width: 220 }}
+          />
+        </Space>
+      </Card>
+
+      {/* Jobs table */}
+      <Card>
+        <Table
+          rowKey="id"
+          loading={loading}
+          columns={columns}
+          dataSource={jobs}
+          pagination={{
+            current: page,
+            pageSize: PAGE_SIZE,
+            total,
+            onChange: (p) => setPage(p),
+            showTotal: (t) => `共 ${t} 条`,
+          }}
+          size="small"
+        />
+      </Card>
+    </div>
+  );
+}