@gadmin2n/schematics 0.0.72 → 0.0.74

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/instance-detail.tsx

@@ -0,0 +1,343 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Descriptions,
+  message,
+  Popconfirm,
+  Space,
+  Spin,
+  Steps,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  LoadingOutlined,
+  ReloadOutlined,
+  StopOutlined,
+} from '@ant-design/icons';
+import { useNavigate, useParams } from 'react-router-dom';
+import { customRequest } from 'helpers/http';
+
+const { Title, Text } = Typography;
+
+const STATUS_TAG: Record<
+  string,
+  { color: string; label: string; icon: React.ReactNode }
+> = {
+  PENDING: { color: 'gold', label: 'Pending', icon: <ClockCircleOutlined /> },
+  RUNNING: { color: 'blue', label: 'Running', icon: <LoadingOutlined /> },
+  COMPLETED: {
+    color: 'green',
+    label: 'Completed',
+    icon: <CheckCircleOutlined />,
+  },
+  FAILED: { color: 'red', label: 'Failed', icon: <CloseCircleOutlined /> },
+  CANCELLED: { color: 'default', label: 'Cancelled', icon: <StopOutlined /> },
+};
+
+interface NodeExecution {
+  id: string;
+  nodeId: string;
+  nodeType: string;
+  nodeLabel: string | null;
+  status: string;
+  input: any;
+  output: any;
+  error: any;
+  startedAt: string | null;
+  finishedAt: string | null;
+}
+
+interface InstanceDetail {
+  id: string;
+  workflowId: string;
+  status: string;
+  context: any;
+  result: any;
+  temporalRunId: string | null;
+  startedAt: string | null;
+  finishedAt: string | null;
+  creator: string;
+  createdAt: string;
+  workflow: { name: string };
+  nodeExecutions: NodeExecution[];
+}
+
+function formatDuration(start: string | null, end: string | null): string {
+  if (!start) return '—';
+  const endTime = end ? new Date(end).getTime() : Date.now();
+  const ms = endTime - new Date(start).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
+}
+
+function getStepStatus(
+  status: string,
+): 'wait' | 'process' | 'finish' | 'error' {
+  switch (status) {
+    case 'COMPLETED':
+      return 'finish';
+    case 'RUNNING':
+      return 'process';
+    case 'FAILED':
+      return 'error';
+    default:
+      return 'wait';
+  }
+}
+
+export default function WorkflowInstanceDetailPage() {
+  const { instanceId } = useParams<{ instanceId: string }>();
+  const navigate = useNavigate();
+  const [data, setData] = useState<InstanceDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    if (!instanceId) return;
+    try {
+      const res = await customRequest<InstanceDetail>(
+        `workflow/instance/${instanceId}`,
+        'GET',
+      );
+      setData(res);
+    } catch (e: any) {
+      message.error(e?.message || 'Failed to load instance');
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Auto-refresh for running instances
+  useEffect(() => {
+    if (data?.status === 'RUNNING' || data?.status === 'PENDING') {
+      const interval = setInterval(fetchData, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [data?.status, fetchData]);
+
+  const handleCancel = async () => {
+    setActionLoading(true);
+    try {
+      await customRequest(`workflow/instance/${instanceId}/cancel`, 'POST');
+      message.success('Instance cancelled');
+      fetchData();
+    } catch (e: any) {
+      message.error(e?.message || 'Failed to cancel');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleRetry = async () => {
+    setActionLoading(true);
+    try {
+      const res = await customRequest<{ instanceId: string }>(
+        `workflow/instance/${instanceId}/retry`,
+        'POST',
+      );
+      message.success('Retry started');
+      navigate(`/admin/workflow/instance/show/${res.instanceId}`);
+    } catch (e: any) {
+      message.error(e?.message || 'Failed to retry');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleApprove = async (nodeId: string, approved: boolean) => {
+    setActionLoading(true);
+    try {
+      await customRequest(`workflow/instance/${instanceId}/signal`, 'POST', {
+        signalName: 'approval',
+        payload: { nodeId, approved, approvedBy: 'current_user', comment: '' },
+      });
+      message.success(approved ? 'Approved' : 'Rejected');
+      fetchData();
+    } catch (e: any) {
+      message.error(e?.message || 'Failed to send signal');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+        }}
+      >
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const statusCfg = STATUS_TAG[data.status] || STATUS_TAG.PENDING;
+
+  return (
+    <div
+      style={{
+        background: '#f0f2f5',
+        minHeight: 'calc(100vh - 64px)',
+        padding: 0,
+      }}
+    >
+      {/* Header */}
+      <Card style={{ marginBottom: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Space>
+            <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              onClick={() => navigate(-1)}
+            >
+              Back
+            </Button>
+            <Title level={4} style={{ margin: 0 }}>
+              {data.workflow.name} — Instance #{data.id}
+            </Title>
+            <Tag color={statusCfg.color} icon={statusCfg.icon}>
+              {statusCfg.label}
+            </Tag>
+          </Space>
+          <Space>
+            <Button icon={<ReloadOutlined />} onClick={fetchData}>
+              Refresh
+            </Button>
+            {(data.status === 'RUNNING' || data.status === 'PENDING') && (
+              <Popconfirm
+                title="Cancel this workflow execution?"
+                onConfirm={handleCancel}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button danger loading={actionLoading} icon={<StopOutlined />}>
+                  Cancel
+                </Button>
+              </Popconfirm>
+            )}
+            {data.status === 'FAILED' && (
+              <Button
+                type="primary"
+                loading={actionLoading}
+                onClick={handleRetry}
+              >
+                Retry
+              </Button>
+            )}
+          </Space>
+        </div>
+      </Card>
+
+      {/* Instance Info */}
+      <Card style={{ marginBottom: 16 }} title="Execution Details">
+        <Descriptions column={3} size="small">
+          <Descriptions.Item label="Instance ID">{data.id}</Descriptions.Item>
+          <Descriptions.Item label="Temporal Run ID">
+            <Text copyable style={{ fontSize: 12 }}>
+              {data.temporalRunId || '—'}
+            </Text>
+          </Descriptions.Item>
+          <Descriptions.Item label="Creator">{data.creator}</Descriptions.Item>
+          <Descriptions.Item label="Started">
+            {data.startedAt ? new Date(data.startedAt).toLocaleString() : '—'}
+          </Descriptions.Item>
+          <Descriptions.Item label="Finished">
+            {data.finishedAt ? new Date(data.finishedAt).toLocaleString() : '—'}
+          </Descriptions.Item>
+          <Descriptions.Item label="Duration">
+            {formatDuration(data.startedAt, data.finishedAt)}
+          </Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      {/* Node Execution Timeline */}
+      <Card title="Node Execution Timeline">
+        {data.nodeExecutions.length === 0 ? (
+          <Text type="secondary">No node executions recorded yet.</Text>
+        ) : (
+          <Steps
+            direction="vertical"
+            size="small"
+            current={-1}
+            items={data.nodeExecutions.map((ne) => {
+              const isApprovalPending =
+                ne.nodeType === 'approval' && ne.status === 'RUNNING';
+              return {
+                title: (
+                  <Space>
+                    <span>{ne.nodeLabel || ne.nodeId}</span>
+                    <Tag style={{ fontSize: 11 }}>{ne.nodeType}</Tag>
+                    {isApprovalPending && (
+                      <Space size={4}>
+                        <Button
+                          size="small"
+                          type="primary"
+                          onClick={() => handleApprove(ne.nodeId, true)}
+                          loading={actionLoading}
+                        >
+                          Approve
+                        </Button>
+                        <Button
+                          size="small"
+                          danger
+                          onClick={() => handleApprove(ne.nodeId, false)}
+                          loading={actionLoading}
+                        >
+                          Reject
+                        </Button>
+                      </Space>
+                    )}
+                  </Space>
+                ),
+                description: (
+                  <div style={{ fontSize: 12, color: '#666' }}>
+                    <span>
+                      Duration: {formatDuration(ne.startedAt, ne.finishedAt)}
+                    </span>
+                    {ne.error && (
+                      <div style={{ color: '#ff4d4f', marginTop: 4 }}>
+                        Error:{' '}
+                        {typeof ne.error === 'object'
+                          ? JSON.stringify(ne.error)
+                          : String(ne.error)}
+                      </div>
+                    )}
+                  </div>
+                ),
+                status: getStepStatus(ne.status),
+                icon: ne.status === 'RUNNING' ? <LoadingOutlined /> : undefined,
+              };
+            })}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { customRequest } from 'helpers/http';
+
+const { Title } = Typography;
+const PAGE_SIZE = 20;
+
+const STATUS_TAG: Record<string, { color: string; label: string }> = {
+  PENDING: { color: 'gold', label: 'Pending' },
+  RUNNING: { color: 'blue', label: 'Running' },
+  COMPLETED: { color: 'green', label: 'Completed' },
+  FAILED: { color: 'red', label: 'Failed' },
+  CANCELLED: { color: 'default', label: 'Cancelled' },
+};
+
+interface WorkflowInstanceItem {
+  id: string;
+  status: string;
+  startedAt: string | null;
+  finishedAt: string | null;
+  creator: string;
+  createdAt: string;
+}
+
+function formatDuration(start: string | null, end: string | null): string {
+  if (!start || !end) return '—';
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
+}
+
+export default function WorkflowInstancesPage() {
+  const { workflowId } = useParams<{ workflowId: string }>();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const filterStatus = searchParams.get('status') || undefined;
+  const page = Number(searchParams.get('page')) || 1;
+
+  const [items, setItems] = useState<WorkflowInstanceItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [workflowName, setWorkflowName] = useState('');
+
+  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],
+  );
+
+  useEffect(() => {
+    if (!workflowId) return;
+    customRequest<{ name: string }>(`workflow/${workflowId}`, 'GET')
+      .then((wf) => setWorkflowName(wf.name))
+      .catch(() => {});
+  }, [workflowId]);
+
+  const fetchData = useCallback(async () => {
+    if (!workflowId) return;
+    setLoading(true);
+    try {
+      const params: Record<string, any> = {
+        skip: (page - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      };
+      if (filterStatus) params.status = filterStatus;
+
+      const res = await customRequest<{
+        items: WorkflowInstanceItem[];
+        total: number;
+      }>(`workflow/${workflowId}/instances`, 'GET', params);
+      setItems(res.items);
+      setTotal(res.total);
+    } catch {
+      // handled silently
+    } finally {
+      setLoading(false);
+    }
+  }, [workflowId, page, filterStatus]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      width: 80,
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      width: 110,
+      render: (status: string) => {
+        const cfg = STATUS_TAG[status] || { color: 'default', label: status };
+        return <Tag color={cfg.color}>{cfg.label}</Tag>;
+      },
+    },
+    {
+      title: 'Started',
+      dataIndex: 'startedAt',
+      key: 'startedAt',
+      width: 160,
+      render: (v: string | null) =>
+        v ? (
+          <Tooltip title={new Date(v).toLocaleString()}>
+            <span>{new Date(v).toLocaleString()}</span>
+          </Tooltip>
+        ) : (
+          <span style={{ color: '#d9d9d9' }}>—</span>
+        ),
+    },
+    {
+      title: 'Finished',
+      dataIndex: 'finishedAt',
+      key: 'finishedAt',
+      width: 160,
+      render: (v: string | null) =>
+        v ? (
+          <Tooltip title={new Date(v).toLocaleString()}>
+            <span>{new Date(v).toLocaleString()}</span>
+          </Tooltip>
+        ) : (
+          <span style={{ color: '#d9d9d9' }}>—</span>
+        ),
+    },
+    {
+      title: 'Duration',
+      key: 'duration',
+      width: 100,
+      render: (_: any, record: WorkflowInstanceItem) =>
+        formatDuration(record.startedAt, record.finishedAt),
+    },
+    {
+      title: 'Creator',
+      dataIndex: 'creator',
+      key: 'creator',
+      width: 150,
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      width: 100,
+      render: (_: any, record: WorkflowInstanceItem) => (
+        <Button
+          type="link"
+          size="small"
+          onClick={() => navigate(`/admin/workflow/instance/show/${record.id}`)}
+        >
+          Detail
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
+      <Card style={{ marginBottom: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Space>
+            <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              onClick={() => navigate('/admin/workflow')}
+            >
+              Back
+            </Button>
+            <Title level={4} style={{ margin: 0 }}>
+              {workflowName || 'Workflow'} — Execution History
+            </Title>
+          </Space>
+          <Select
+            placeholder="All Statuses"
+            allowClear
+            value={filterStatus}
+            onChange={(v) => updateParams({ status: v, page: undefined })}
+            style={{ width: 140 }}
+            options={[
+              { value: 'PENDING', label: 'Pending' },
+              { value: 'RUNNING', label: 'Running' },
+              { value: 'COMPLETED', label: 'Completed' },
+              { value: 'FAILED', label: 'Failed' },
+              { value: 'CANCELLED', label: 'Cancelled' },
+            ]}
+          />
+        </div>
+      </Card>
+
+      <Card>
+        <Table
+          rowKey="id"
+          loading={loading}
+          columns={columns}
+          dataSource={items}
+          pagination={{
+            current: page,
+            pageSize: PAGE_SIZE,
+            total,
+            onChange: (p) =>
+              updateParams({ page: p > 1 ? String(p) : undefined }),
+            showTotal: (t) => `Total ${t}`,
+          }}
+          size="small"
+        />
+      </Card>
+    </div>
+  );
+}