@gadmin2n/schematics 0.0.143 → 0.0.145

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

@@ -13,7 +13,6 @@ import {
   Typography,
 } from 'antd';
 import {
-  ArrowLeftOutlined,
   CheckCircleOutlined,
   ClockCircleOutlined,
   CloseCircleOutlined,
@@ -23,10 +22,14 @@ import {
   StopOutlined,
 } from '@ant-design/icons';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useGetIdentity } from '@refinedev/core';
 import { customRequest } from 'helpers/http';
 import { EnhancedFlowRenderer } from './components/EnhancedFlowRenderer';
+import { WorkflowWorkspaceHeader } from './components/WorkflowWorkspaceHeader';
+import { WorkflowCodeEditor } from './components/WorkflowCodeEditor';
 import type { WorkflowDSL } from './types';
+import { formatWorkflowUtcDateTime } from './utils/workflowDateTime';
+import { useTranslation } from 'react-i18next';
+import './workflow-ui.css';
 
 const { Title, Text } = Typography;
 
@@ -58,6 +61,13 @@ interface NodeExecution {
   finishedAt: string | null;
 }
 
+interface RetryAttempt {
+  id: string;
+  status: string;
+  retryFromNodeId: string | null;
+  createdAt: string;
+}
+
 interface InstanceDetail {
   id: string;
   workflowId: string;
@@ -71,6 +81,12 @@ interface InstanceDetail {
   createdAt: string;
   workflow: { name: string };
   nodeExecutions: NodeExecution[];
+  approvableNodeIds: string[];
+  retryableNodeIds: string[];
+  retryAttempts: RetryAttempt[];
+  reusedNodeIds: string[];
+  retryOfInstanceId: string | null;
+  retryFromNodeId: string | null;
   dsl?: WorkflowDSL;
 }
 
@@ -96,15 +112,17 @@ function getStepStatus(
       return 'process';
     case 'FAILED':
       return 'error';
+    case 'CANCELLED':
+      return 'error';
     default:
       return 'wait';
   }
 }
 
 export default function WorkflowInstanceDetailPage() {
+  const { t } = useTranslation('workflow');
   const { instanceId } = useParams<{ instanceId: string }>();
   const navigate = useNavigate();
-  const { data: identity } = useGetIdentity<{ id: string }>();
   const [data, setData] = useState<InstanceDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState(false);
@@ -165,7 +183,7 @@ export default function WorkflowInstanceDetailPage() {
         `workflow/instance/${instanceId}/retry`,
         'POST',
       );
-      message.success('Retry started');
+      message.success(t('instanceDetail.retryAllStarted'));
       navigate(`/admin/workflow/instance/show/${res.instanceId}`);
     } catch (e: any) {
       message.error(e?.message || 'Failed to retry');
@@ -174,6 +192,23 @@ export default function WorkflowInstanceDetailPage() {
     }
   };
 
+  const handleRetryFromNode = async (nodeId: string) => {
+    setActionLoading(true);
+    try {
+      const res = await customRequest<{ instanceId: string }>(
+        `workflow/instance/${instanceId}/retry-from-node`,
+        'POST',
+        { nodeId },
+      );
+      message.success(t('instanceDetail.retryFromNodeStarted'));
+      navigate(`/admin/workflow/instance/show/${res.instanceId}`);
+    } catch (e: any) {
+      message.error(e?.message || t('instanceDetail.retryFromNodeFailed'));
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
   const handleApprove = async (nodeId: string, approved: boolean) => {
     setActionLoading(true);
     try {
@@ -215,38 +250,33 @@ export default function WorkflowInstanceDetailPage() {
     selectedNodeId && data.dsl
       ? data.dsl.nodes.find((n) => n.id === selectedNodeId)
       : null;
+  const selectedNodeWasReused = selectedNodeId
+    ? data.reusedNodeIds.includes(selectedNodeId)
+    : false;
+  const latestRetryAttempt = data.retryAttempts[0];
+  const selectedRetryAttempt = selectedNodeId
+    ? data.retryAttempts.find(
+        (attempt) => attempt.retryFromNodeId === selectedNodeId,
+      )
+    : undefined;
 
   return (
-    <div
-      style={{
-        background: 'var(--ant-color-bg-layout)',
-        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)}
-            ></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>
+    <div className="workflow-page-stack">
+      <WorkflowWorkspaceHeader
+        eyebrow={t('instanceDetail.eyebrow')}
+        title={t('instanceDetail.title', {
+          name: data.workflow.name,
+          id: data.id,
+        })}
+        status={
+          <Tag color={statusCfg.color} icon={statusCfg.icon}>
+            {statusCfg.label}
+          </Tag>
+        }
+        onBack={() => navigate(-1)}
+        backLabel={t('common.back')}
+        actions={
+          <Space wrap={false}>
             <Tooltip
               title={
                 data.temporalRunId
@@ -273,7 +303,7 @@ export default function WorkflowInstanceDetailPage() {
                   );
                 }}
               >
-                在 Temporal 中查看
+                {t('instanceDetail.openTemporal')}
               </Button>
             </Tooltip>
             {(data.status === 'RUNNING' || data.status === 'PENDING') && (
@@ -284,27 +314,45 @@ export default function WorkflowInstanceDetailPage() {
                 cancelText="No"
               >
                 <Button danger loading={actionLoading} icon={<StopOutlined />}>
-                  Cancel
+                  {t('instanceDetail.cancel')}
+                </Button>
+              </Popconfirm>
+            )}
+            {data.status === 'FAILED' && !latestRetryAttempt && (
+              <Popconfirm
+                title={t('instanceDetail.retryAllConfirm')}
+                description={t('instanceDetail.retryAllDescription')}
+                onConfirm={handleRetry}
+                okText={t('instanceDetail.retryAll')}
+                cancelText={t('common.cancel')}
+              >
+                <Button loading={actionLoading}>
+                  {t('instanceDetail.retryAll')}
                 </Button>
               </Popconfirm>
             )}
-            {data.status === 'FAILED' && (
+            {data.status === 'FAILED' && latestRetryAttempt && (
               <Button
-                type="primary"
-                loading={actionLoading}
-                onClick={handleRetry}
+                icon={<LinkOutlined />}
+                onClick={() =>
+                  navigate(
+                    `/admin/workflow/instance/show/${latestRetryAttempt.id}`,
+                  )
+                }
               >
-                Retry
+                {t('instanceDetail.viewRetryAttempt', {
+                  id: latestRetryAttempt.id,
+                })}
               </Button>
             )}
             <Button icon={<ReloadOutlined />} onClick={fetchData}>
-              Refresh
+              {t('common.refresh')}
             </Button>
           </Space>
-        </div>
-      </Card>
+        }
+      />
       {/* Instance Info */}
-      <Card style={{ marginBottom: 16 }} title="Execution Details">
+      <Card title={t('instanceDetail.executionDetails')}>
         <Descriptions column={3} size="small">
           <Descriptions.Item label="Instance ID">{data.id}</Descriptions.Item>
           <Descriptions.Item label="Temporal Run ID">
@@ -314,18 +362,56 @@ export default function WorkflowInstanceDetailPage() {
           </Descriptions.Item>
           <Descriptions.Item label="Creator">{data.creator}</Descriptions.Item>
           <Descriptions.Item label="Started">
-            {data.startedAt ? new Date(data.startedAt).toLocaleString() : '—'}
+            {formatWorkflowUtcDateTime(data.startedAt)}
           </Descriptions.Item>
           <Descriptions.Item label="Finished">
-            {data.finishedAt ? new Date(data.finishedAt).toLocaleString() : '—'}
+            {formatWorkflowUtcDateTime(data.finishedAt)}
           </Descriptions.Item>
           <Descriptions.Item label="Duration">
             {formatDuration(data.startedAt, data.finishedAt)}
           </Descriptions.Item>
+          {data.retryOfInstanceId && (
+            <Descriptions.Item label={t('instanceDetail.retrySource')}>
+              <Button
+                type="link"
+                size="small"
+                style={{ padding: 0 }}
+                onClick={() =>
+                  navigate(
+                    `/admin/workflow/instance/show/${data.retryOfInstanceId}`,
+                  )
+                }
+              >
+                #{data.retryOfInstanceId}
+              </Button>
+            </Descriptions.Item>
+          )}
+          {data.reusedNodeIds.length > 0 && (
+            <Descriptions.Item label={t('instanceDetail.reusedResults')}>
+              {t('instanceDetail.reusedResultsCount', {
+                count: data.reusedNodeIds.length,
+              })}
+            </Descriptions.Item>
+          )}
         </Descriptions>
+        {data.result !== null && data.result !== undefined && (
+          <div style={{ marginTop: 16 }}>
+            <Text strong style={{ display: 'block', marginBottom: 8 }}>
+              {t('instanceDetail.result')}
+            </Text>
+            <WorkflowCodeEditor
+              language="json"
+              value={JSON.stringify(data.result, null, 2)}
+              readOnly
+              height={220}
+              ariaLabel={t('instanceDetail.result')}
+            />
+          </div>
+        )}
       </Card>
       {/* Node Execution Timeline / Canvas View */}
       <Card
+        style={{ flex: 1 }}
         title={
           viewMode === 'timeline'
             ? 'Node Execution Timeline'
@@ -370,15 +456,17 @@ export default function WorkflowInstanceDetailPage() {
                   size="small"
                   current={-1}
                   items={data.nodeExecutions.map((ne) => {
-                    const approverIds: string[] =
-                      (ne.input as any)?.approvers || [];
-                    const canApprove =
-                      !!identity?.id && approverIds.includes(identity.id);
                     const isApprovalPending =
                       ne.nodeType === 'approval' &&
                       ne.status === 'RUNNING' &&
-                      canApprove;
+                      data.approvableNodeIds.includes(ne.nodeId);
                     const isSelected = selectedNodeId === ne.nodeId;
+                    const canRetryFromNode =
+                      ne.status === 'FAILED' &&
+                      data.retryableNodeIds.includes(ne.nodeId);
+                    const retryAttempt = data.retryAttempts.find(
+                      (attempt) => attempt.retryFromNodeId === ne.nodeId,
+                    );
                     return {
                       title: (
                         <Space
@@ -417,6 +505,46 @@ export default function WorkflowInstanceDetailPage() {
                               </Button>
                             </Space>
                           )}
+                          {canRetryFromNode && (
+                            <Popconfirm
+                              title={t('instanceDetail.retryFromNodeConfirm', {
+                                name: ne.nodeLabel || ne.nodeType,
+                              })}
+                              description={t(
+                                'instanceDetail.retryFromNodeDescription',
+                              )}
+                              onConfirm={() => handleRetryFromNode(ne.nodeId)}
+                              okText={t('instanceDetail.retryFromNode')}
+                              cancelText={t('common.cancel')}
+                            >
+                              <Button
+                                size="small"
+                                type="primary"
+                                icon={<ReloadOutlined />}
+                                loading={actionLoading}
+                                onClick={(event) => event.stopPropagation()}
+                              >
+                                {t('instanceDetail.retryFromNode')}
+                              </Button>
+                            </Popconfirm>
+                          )}
+                          {retryAttempt && (
+                            <Button
+                              size="small"
+                              type="link"
+                              icon={<LinkOutlined />}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                navigate(
+                                  `/admin/workflow/instance/show/${retryAttempt.id}`,
+                                );
+                              }}
+                            >
+                              {t('instanceDetail.viewRetryAttempt', {
+                                id: retryAttempt.id,
+                              })}
+                            </Button>
+                          )}
                         </Space>
                       ),
                       description: (
@@ -448,6 +576,8 @@ export default function WorkflowInstanceDetailPage() {
                       icon:
                         ne.status === 'RUNNING' ? (
                           <LoadingOutlined />
+                        ) : ne.status === 'CANCELLED' ? (
+                          <StopOutlined style={{ color: '#8c8c8c' }} />
                         ) : undefined,
                     };
                   })}
@@ -476,7 +606,9 @@ export default function WorkflowInstanceDetailPage() {
                           ? 'blue'
                           : selectedExecution.status === 'FAILED'
                             ? 'red'
-                            : 'gold'
+                            : selectedExecution.status === 'CANCELLED'
+                              ? 'default'
+                              : 'gold'
                     }
                   >
                     {selectedExecution.status}
@@ -492,14 +624,10 @@ export default function WorkflowInstanceDetailPage() {
                     {selectedExecution.nodeType}
                   </Descriptions.Item>
                   <Descriptions.Item label="Started">
-                    {selectedExecution.startedAt
-                      ? new Date(selectedExecution.startedAt).toLocaleString()
-                      : '—'}
+                    {formatWorkflowUtcDateTime(selectedExecution.startedAt)}
                   </Descriptions.Item>
                   <Descriptions.Item label="Finished">
-                    {selectedExecution.finishedAt
-                      ? new Date(selectedExecution.finishedAt).toLocaleString()
-                      : '—'}
+                    {formatWorkflowUtcDateTime(selectedExecution.finishedAt)}
                   </Descriptions.Item>
                   <Descriptions.Item label="Duration">
                     {formatDuration(
@@ -509,45 +637,47 @@ export default function WorkflowInstanceDetailPage() {
                   </Descriptions.Item>
                 </Descriptions>
 
-                {selectedExecution.input && (
-                  <div style={{ marginBottom: 12 }}>
-                    <Text strong style={{ fontSize: 12 }}>
-                      Input:
-                    </Text>
-                    <pre
-                      style={{
-                        background: 'var(--ant-color-fill-quaternary)',
-                        padding: 8,
-                        borderRadius: 4,
-                        fontSize: 11,
-                        maxHeight: 150,
-                        overflow: 'auto',
-                      }}
-                    >
-                      {JSON.stringify(selectedExecution.input, null, 2)}
-                    </pre>
-                  </div>
-                )}
+                {selectedExecution.input !== null &&
+                  selectedExecution.input !== undefined && (
+                    <div style={{ marginBottom: 12 }}>
+                      <Text strong style={{ fontSize: 12 }}>
+                        Input:
+                      </Text>
+                      <pre
+                        style={{
+                          background: 'var(--ant-color-fill-quaternary)',
+                          padding: 8,
+                          borderRadius: 4,
+                          fontSize: 11,
+                          maxHeight: 150,
+                          overflow: 'auto',
+                        }}
+                      >
+                        {JSON.stringify(selectedExecution.input, null, 2)}
+                      </pre>
+                    </div>
+                  )}
 
-                {selectedExecution.output && (
-                  <div style={{ marginBottom: 12 }}>
-                    <Text strong style={{ fontSize: 12 }}>
-                      Output:
-                    </Text>
-                    <pre
-                      style={{
-                        background: 'var(--ant-color-fill-quaternary)',
-                        padding: 8,
-                        borderRadius: 4,
-                        fontSize: 11,
-                        maxHeight: 150,
-                        overflow: 'auto',
-                      }}
-                    >
-                      {JSON.stringify(selectedExecution.output, null, 2)}
-                    </pre>
-                  </div>
-                )}
+                {selectedExecution.output !== null &&
+                  selectedExecution.output !== undefined && (
+                    <div style={{ marginBottom: 12 }}>
+                      <Text strong style={{ fontSize: 12 }}>
+                        Output:
+                      </Text>
+                      <pre
+                        style={{
+                          background: 'var(--ant-color-fill-quaternary)',
+                          padding: 8,
+                          borderRadius: 4,
+                          fontSize: 11,
+                          maxHeight: 150,
+                          overflow: 'auto',
+                        }}
+                      >
+                        {JSON.stringify(selectedExecution.output, null, 2)}
+                      </pre>
+                    </div>
+                  )}
 
                 {selectedExecution.error && (
                   <div style={{ marginBottom: 12 }}>
@@ -587,6 +717,7 @@ export default function WorkflowInstanceDetailPage() {
                     showExecutionStatus={true}
                     selectedNodeId={selectedNodeId}
                     readonly={true}
+                    reusedNodeIds={data.reusedNodeIds}
                     onNodeClick={(nodeId) => setSelectedNodeId(nodeId)}
                   />
                 </div>
@@ -632,18 +763,14 @@ export default function WorkflowInstanceDetailPage() {
                             {selectedExecution.nodeType}
                           </Descriptions.Item>
                           <Descriptions.Item label="Started">
-                            {selectedExecution.startedAt
-                              ? new Date(
-                                  selectedExecution.startedAt,
-                                ).toLocaleString()
-                              : '—'}
+                            {formatWorkflowUtcDateTime(
+                              selectedExecution.startedAt,
+                            )}
                           </Descriptions.Item>
                           <Descriptions.Item label="Finished">
-                            {selectedExecution.finishedAt
-                              ? new Date(
-                                  selectedExecution.finishedAt,
-                                ).toLocaleString()
-                              : '—'}
+                            {formatWorkflowUtcDateTime(
+                              selectedExecution.finishedAt,
+                            )}
                           </Descriptions.Item>
                           <Descriptions.Item label="Duration">
                             {formatDuration(
@@ -653,49 +780,57 @@ export default function WorkflowInstanceDetailPage() {
                           </Descriptions.Item>
                         </Descriptions>
 
-                        {selectedExecution.input && (
-                          <div style={{ marginBottom: 12 }}>
-                            <Text strong style={{ fontSize: 12 }}>
-                              Input:
-                            </Text>
-                            <pre
-                              style={{
-                                background: 'var(--ant-color-fill-quaternary)',
-                                padding: 8,
-                                borderRadius: 4,
-                                fontSize: 11,
-                                maxHeight: 150,
-                                overflow: 'auto',
-                              }}
-                            >
-                              {JSON.stringify(selectedExecution.input, null, 2)}
-                            </pre>
-                          </div>
-                        )}
+                        {selectedExecution.input !== null &&
+                          selectedExecution.input !== undefined && (
+                            <div style={{ marginBottom: 12 }}>
+                              <Text strong style={{ fontSize: 12 }}>
+                                Input:
+                              </Text>
+                              <pre
+                                style={{
+                                  background:
+                                    'var(--ant-color-fill-quaternary)',
+                                  padding: 8,
+                                  borderRadius: 4,
+                                  fontSize: 11,
+                                  maxHeight: 150,
+                                  overflow: 'auto',
+                                }}
+                              >
+                                {JSON.stringify(
+                                  selectedExecution.input,
+                                  null,
+                                  2,
+                                )}
+                              </pre>
+                            </div>
+                          )}
 
-                        {selectedExecution.output && (
-                          <div style={{ marginBottom: 12 }}>
-                            <Text strong style={{ fontSize: 12 }}>
-                              Output:
-                            </Text>
-                            <pre
-                              style={{
-                                background: 'var(--ant-color-fill-quaternary)',
-                                padding: 8,
-                                borderRadius: 4,
-                                fontSize: 11,
-                                maxHeight: 150,
-                                overflow: 'auto',
-                              }}
-                            >
-                              {JSON.stringify(
-                                selectedExecution.output,
-                                null,
-                                2,
-                              )}
-                            </pre>
-                          </div>
-                        )}
+                        {selectedExecution.output !== null &&
+                          selectedExecution.output !== undefined && (
+                            <div style={{ marginBottom: 12 }}>
+                              <Text strong style={{ fontSize: 12 }}>
+                                Output:
+                              </Text>
+                              <pre
+                                style={{
+                                  background:
+                                    'var(--ant-color-fill-quaternary)',
+                                  padding: 8,
+                                  borderRadius: 4,
+                                  fontSize: 11,
+                                  maxHeight: 150,
+                                  overflow: 'auto',
+                                }}
+                              >
+                                {JSON.stringify(
+                                  selectedExecution.output,
+                                  null,
+                                  2,
+                                )}
+                              </pre>
+                            </div>
+                          )}
 
                         {selectedExecution.error && (
                           <div style={{ marginBottom: 12 }}>
@@ -727,13 +862,57 @@ export default function WorkflowInstanceDetailPage() {
                           </div>
                         )}
 
+                        {selectedExecution.status === 'FAILED' &&
+                          data.retryableNodeIds.includes(
+                            selectedExecution.nodeId,
+                          ) && (
+                            <Popconfirm
+                              title={t('instanceDetail.retryFromNodeConfirm', {
+                                name:
+                                  selectedExecution.nodeLabel ||
+                                  selectedExecution.nodeType,
+                              })}
+                              description={t(
+                                'instanceDetail.retryFromNodeDescription',
+                              )}
+                              onConfirm={() =>
+                                handleRetryFromNode(selectedExecution.nodeId)
+                              }
+                              okText={t('instanceDetail.retryFromNode')}
+                              cancelText={t('common.cancel')}
+                            >
+                              <Button
+                                type="primary"
+                                icon={<ReloadOutlined />}
+                                loading={actionLoading}
+                              >
+                                {t('instanceDetail.retryFromNode')}
+                              </Button>
+                            </Popconfirm>
+                          )}
+
+                        {selectedExecution.status === 'FAILED' &&
+                          selectedRetryAttempt && (
+                            <Button
+                              icon={<LinkOutlined />}
+                              onClick={() =>
+                                navigate(
+                                  `/admin/workflow/instance/show/${selectedRetryAttempt.id}`,
+                                )
+                              }
+                            >
+                              {t('instanceDetail.viewRetryAttempt', {
+                                id: selectedRetryAttempt.id,
+                              })}
+                            </Button>
+                          )}
+
                         {/* Approval actions */}
                         {selectedExecution.nodeType === 'approval' &&
                           selectedExecution.status === 'RUNNING' &&
-                          !!identity?.id &&
-                          (
-                            (selectedExecution.input as any)?.approvers || []
-                          ).includes(identity.id) && (
+                          data.approvableNodeIds.includes(
+                            selectedExecution.nodeId,
+                          ) && (
                             <Space style={{ width: '100%' }}>
                               <Button
                                 type="primary"
@@ -762,14 +941,24 @@ export default function WorkflowInstanceDetailPage() {
                       <div>
                         <div style={{ marginBottom: 16 }}>
                           <Title level={5}>{selectedDslNode.label}</Title>
-                          <Tag color="default">Not Executed</Tag>
+                          <Tag
+                            color={selectedNodeWasReused ? 'green' : 'default'}
+                          >
+                            {selectedNodeWasReused
+                              ? t('instanceDetail.reusedResult')
+                              : 'Not Executed'}
+                          </Tag>
                         </div>
                         <Descriptions column={1} size="small">
                           <Descriptions.Item label="Node Type">
                             {selectedDslNode.type}
                           </Descriptions.Item>
                           <Descriptions.Item label="Status">
-                            <Text type="secondary">Waiting for execution</Text>
+                            <Text type="secondary">
+                              {selectedNodeWasReused
+                                ? t('instanceDetail.reusedResultDescription')
+                                : 'Waiting for execution'}
+                            </Text>
                           </Descriptions.Item>
                         </Descriptions>
                       </div>