plugin-cluster-manager 1.1.10 → 1.1.13

package/src/client/WorkflowExecutions.tsx

@@ -1,238 +1,243 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { Table, Tag, Button, Space, Popconfirm, message, Select, Dropdown } from 'antd';
-import { ReloadOutlined, StopOutlined, UnorderedListOutlined } from '@ant-design/icons';
-import { useAPIClient } from '@nocobase/client';
-import dayjs from 'dayjs';
-
-const EXEC_STATUS: Record<string, { label: string; color: string }> = {
-  null: { label: 'Queueing', color: 'default' },
-  '0': { label: 'Started', color: 'processing' },
-  '1': { label: 'Resolved', color: 'success' },
-  '-1': { label: 'Failed', color: 'error' },
-  '-2': { label: 'Error', color: 'error' },
-  '-3': { label: 'Aborted', color: 'warning' },
-  '-4': { label: 'Canceled', color: 'warning' },
-  '-5': { label: 'Rejected', color: 'warning' },
-  '-6': { label: 'Retry Needed', color: 'orange' },
-};
-
-const JOB_STATUS: Record<string, { label: string; color: string }> = {
-  '0': { label: 'Pending', color: 'default' },
-  '1': { label: 'Resolved', color: 'success' },
-  '-1': { label: 'Failed', color: 'error' },
-  '-2': { label: 'Error', color: 'error' },
-  '-3': { label: 'Aborted', color: 'warning' },
-  '-4': { label: 'Canceled', color: 'warning' },
-};
-
-export function WorkflowExecutions() {
-  const api = useAPIClient();
-  const [data, setData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });
-  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
-  const [expandedJobs, setExpandedJobs] = useState<Record<string, any[]>>({});
-  const [loadingJobs, setLoadingJobs] = useState<Record<string, boolean>>({});
-
-  const fetchData = useCallback(
-    async (page = pagination.current, pageSize = pagination.pageSize) => {
-      setLoading(true);
-      try {
-        const res = await api.request({
-          url: 'clusterManagerWorkflow:list',
-          params: { page, pageSize, statusFilter: statusFilter === undefined ? '' : statusFilter },
-        });
-        const body = res.data;
-        const rows = Array.isArray(body?.data?.data) ? body.data.data : Array.isArray(body?.data) ? body.data : Array.isArray(body) ? body : [];
-        setData(rows);
-        setPagination((prev) => ({
-          ...prev,
-          current: body.meta?.page || page,
-          total: body.meta?.count || 0,
-        }));
-      } catch {
-        message.error('Failed to load executions');
-      } finally {
-        setLoading(false);
-      }
-    },
-    [api, pagination.current, pagination.pageSize, statusFilter],
-  );
-
-  useEffect(() => {
-    fetchData();
-  }, [statusFilter]);
-
-  const fetchJobs = async (executionId: string) => {
-    if (expandedJobs[executionId]) return;
-    setLoadingJobs((prev) => ({ ...prev, [executionId]: true }));
-    try {
-      const res = await api.request({
-        url: 'clusterManagerWorkflow:getJobs',
-        params: { filterByTk: executionId },
-      });
-      const jobs = Array.isArray(res?.data?.data?.data) ? res.data.data.data : Array.isArray(res?.data?.data) ? res.data.data : Array.isArray(res?.data) ? res.data : [];
-      setExpandedJobs((prev) => ({ ...prev, [executionId]: jobs }));
-    } catch {
-      message.error('Failed to load jobs');
-    } finally {
-      setLoadingJobs((prev) => ({ ...prev, [executionId]: false }));
-    }
-  };
-
-  const handleCancel = async (id: string) => {
-    await api.request({ url: 'clusterManagerWorkflow:cancel', params: { filterByTk: id } });
-    message.success('Execution canceled');
-    fetchData();
-  };
-
-  const handlePurge = async (days: number) => {
-    try {
-      const res = await api.request({ url: `clusterManagerWorkflow:purge`, method: 'post', data: { days } });
-      message.success(`Purged ${res?.data?.deletedCount || 0} executions`);
-      fetchData();
-    } catch {
-      message.error('Failed to purge executions');
-    }
-  };
-
-  const purgeItems = [
-    { key: '7', label: 'Older than 7 days', onClick: () => handlePurge(7) },
-    { key: '30', label: 'Older than 30 days', onClick: () => handlePurge(30) },
-    { key: '0', label: 'All completed/failed', danger: true, onClick: () => handlePurge(0) },
-  ];
-
-  const jobColumns = [
-    { title: 'Job ID', dataIndex: 'id', width: 100 },
-    {
-      title: 'Node',
-      key: 'node',
-      width: 200,
-      render: (_: any, r: any) => r.node?.title || r.nodeKey || '-',
-    },
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      width: 100,
-      render: (val: number) => {
-        const s = JOB_STATUS[String(val)] || { label: String(val), color: 'default' };
-        return <Tag color={s.color}>{s.label}</Tag>;
-      },
-    },
-    {
-      title: 'Result',
-      dataIndex: 'result',
-      ellipsis: true,
-      render: (val: any) => (val ? JSON.stringify(val).slice(0, 120) : '-'),
-    },
-  ];
-
-  const columns = [
-    { title: 'ID', dataIndex: 'id', width: 100 },
-    {
-      title: 'Workflow',
-      key: 'workflow',
-      width: 200,
-      render: (_: any, r: any) => r.workflow?.title || '-',
-    },
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      width: 120,
-      render: (val: number | null) => {
-        const s = EXEC_STATUS[String(val)] || { label: String(val), color: 'default' };
-        return <Tag color={s.color}>{s.label}</Tag>;
-      },
-    },
-    {
-      title: 'Executing Node',
-      dataIndex: 'workerNode',
-      width: 150,
-      render: (val: string) => (val && val !== '-' ? <Tag color="blue">{val}</Tag> : <Tag>{val || '-'}</Tag>),
-    },
-    {
-      title: 'Manual',
-      dataIndex: 'manually',
-      width: 80,
-      render: (val: boolean) => (val ? <Tag color="blue">Yes</Tag> : '-'),
-    },
-    {
-      title: 'Triggered At',
-      dataIndex: 'createdAt',
-      width: 160,
-      render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '-'),
-    },
-    {
-      title: 'Actions',
-      key: 'actions',
-      width: 120,
-      render: (_: any, record: any) => (
-        <Space>
-          <Button
-            type="link"
-            size="small"
-            icon={<UnorderedListOutlined />}
-            onClick={() => fetchJobs(record.id)}
-            loading={loadingJobs[record.id]}
-          >
-            Jobs
-          </Button>
-          {(record.status === 0 || record.status === null) && (
-            <Popconfirm title="Cancel execution?" onConfirm={() => handleCancel(record.id)}>
-              <Button type="link" size="small" icon={<StopOutlined />} danger />
-            </Popconfirm>
-          )}
-        </Space>
-      ),
-    },
-  ];
-
-  return (
-    <div>
-      <Space style={{ marginBottom: 16 }}>
-        <Select
-          placeholder="Filter by status"
-          allowClear
-          style={{ width: 160 }}
-          value={statusFilter}
-          onChange={setStatusFilter}
-          options={Object.entries(EXEC_STATUS).map(([k, v]) => ({ value: k, label: v.label }))}
-        />
-        <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
-          Refresh
-        </Button>
-        <Dropdown menu={{ items: purgeItems }} trigger={['click']}>
-          <Button danger>Clear History</Button>
-        </Dropdown>
-      </Space>
-      <Table
-        rowKey="id"
-        columns={columns}
-        dataSource={data}
-        loading={loading}
-        size="small"
-        expandable={{
-          expandedRowRender: (record) => {
-            const jobs = expandedJobs[record.id];
-            if (!jobs) return <div style={{ padding: 8 }}>Click "Jobs" to load</div>;
-            return (
-              <Table
-                rowKey="id"
-                columns={jobColumns}
-                dataSource={jobs}
-                size="small"
-                pagination={false}
-              />
-            );
-          },
-        }}
-        pagination={{
-          ...pagination,
-          showSizeChanger: true,
-          showTotal: (total) => `Total ${total}`,
-          onChange: (page, pageSize) => fetchData(page, pageSize),
-        }}
-      />
-    </div>
-  );
-}
+import React, { useEffect, useState, useCallback } from 'react';
+import { Table, Tag, Button, Space, Popconfirm, message, Select, Dropdown } from 'antd';
+import { ReloadOutlined, StopOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import dayjs from 'dayjs';
+
+const EXEC_STATUS: Record<string, { label: string; color: string }> = {
+  null: { label: 'Queueing', color: 'default' },
+  '0': { label: 'Started', color: 'processing' },
+  '1': { label: 'Resolved', color: 'success' },
+  '-1': { label: 'Failed', color: 'error' },
+  '-2': { label: 'Error', color: 'error' },
+  '-3': { label: 'Aborted', color: 'warning' },
+  '-4': { label: 'Canceled', color: 'warning' },
+  '-5': { label: 'Rejected', color: 'warning' },
+  '-6': { label: 'Retry Needed', color: 'orange' },
+};
+
+const JOB_STATUS: Record<string, { label: string; color: string }> = {
+  '0': { label: 'Pending', color: 'default' },
+  '1': { label: 'Resolved', color: 'success' },
+  '-1': { label: 'Failed', color: 'error' },
+  '-2': { label: 'Error', color: 'error' },
+  '-3': { label: 'Aborted', color: 'warning' },
+  '-4': { label: 'Canceled', color: 'warning' },
+};
+
+export function WorkflowExecutions() {
+  const api = useAPIClient();
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });
+  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
+  const [expandedJobs, setExpandedJobs] = useState<Record<string, any[]>>({});
+  const [loadingJobs, setLoadingJobs] = useState<Record<string, boolean>>({});
+
+  const fetchData = useCallback(
+    async (page = pagination.current, pageSize = pagination.pageSize) => {
+      setLoading(true);
+      try {
+        const res = await api.request({
+          url: 'clusterManagerWorkflow:list',
+          params: { page, pageSize, statusFilter: statusFilter === undefined ? '' : statusFilter },
+        });
+        const body = res.data;
+        const rows = Array.isArray(body?.data?.data)
+          ? body.data.data
+          : Array.isArray(body?.data)
+            ? body.data
+            : Array.isArray(body)
+              ? body
+              : [];
+        setData(rows);
+        setPagination((prev) => ({
+          ...prev,
+          current: body.meta?.page || page,
+          total: body.meta?.count || 0,
+        }));
+      } catch {
+        message.error('Failed to load executions');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api, pagination.current, pagination.pageSize, statusFilter],
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, [statusFilter]);
+
+  const fetchJobs = async (executionId: string) => {
+    if (expandedJobs[executionId]) return;
+    setLoadingJobs((prev) => ({ ...prev, [executionId]: true }));
+    try {
+      const res = await api.request({
+        url: 'clusterManagerWorkflow:getJobs',
+        params: { filterByTk: executionId },
+      });
+      const jobs = Array.isArray(res?.data?.data?.data)
+        ? res.data.data.data
+        : Array.isArray(res?.data?.data)
+          ? res.data.data
+          : Array.isArray(res?.data)
+            ? res.data
+            : [];
+      setExpandedJobs((prev) => ({ ...prev, [executionId]: jobs }));
+    } catch {
+      message.error('Failed to load jobs');
+    } finally {
+      setLoadingJobs((prev) => ({ ...prev, [executionId]: false }));
+    }
+  };
+
+  const handleCancel = async (id: string) => {
+    await api.request({ url: 'clusterManagerWorkflow:cancel', params: { filterByTk: id } });
+    message.success('Execution canceled');
+    fetchData();
+  };
+
+  const handlePurge = async (days: number) => {
+    try {
+      const res = await api.request({ url: `clusterManagerWorkflow:purge`, method: 'post', data: { days } });
+      message.success(`Purged ${res?.data?.deletedCount || 0} executions`);
+      fetchData();
+    } catch {
+      message.error('Failed to purge executions');
+    }
+  };
+
+  const purgeItems = [
+    { key: '7', label: 'Older than 7 days', onClick: () => handlePurge(7) },
+    { key: '30', label: 'Older than 30 days', onClick: () => handlePurge(30) },
+    { key: '0', label: 'All completed/failed', danger: true, onClick: () => handlePurge(0) },
+  ];
+
+  const jobColumns = [
+    { title: 'Job ID', dataIndex: 'id', width: 100 },
+    {
+      title: 'Node',
+      key: 'node',
+      width: 200,
+      render: (_: any, r: any) => r.node?.title || r.nodeKey || '-',
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      render: (val: number) => {
+        const s = JOB_STATUS[String(val)] || { label: String(val), color: 'default' };
+        return <Tag color={s.color}>{s.label}</Tag>;
+      },
+    },
+    {
+      title: 'Result',
+      dataIndex: 'result',
+      ellipsis: true,
+      render: (val: any) => (val ? JSON.stringify(val).slice(0, 120) : '-'),
+    },
+  ];
+
+  const columns = [
+    { title: 'ID', dataIndex: 'id', width: 100 },
+    {
+      title: 'Workflow',
+      key: 'workflow',
+      width: 200,
+      render: (_: any, r: any) => r.workflow?.title || '-',
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 120,
+      render: (val: number | null) => {
+        const s = EXEC_STATUS[String(val)] || { label: String(val), color: 'default' };
+        return <Tag color={s.color}>{s.label}</Tag>;
+      },
+    },
+    {
+      title: 'Executing Node',
+      dataIndex: 'workerNode',
+      width: 150,
+      render: (val: string) => (val && val !== '-' ? <Tag color="blue">{val}</Tag> : <Tag>{val || '-'}</Tag>),
+    },
+    {
+      title: 'Manual',
+      dataIndex: 'manually',
+      width: 80,
+      render: (val: boolean) => (val ? <Tag color="blue">Yes</Tag> : '-'),
+    },
+    {
+      title: 'Triggered At',
+      dataIndex: 'createdAt',
+      width: 160,
+      render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '-'),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      width: 120,
+      render: (_: any, record: any) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<UnorderedListOutlined />}
+            onClick={() => fetchJobs(record.id)}
+            loading={loadingJobs[record.id]}
+          >
+            Jobs
+          </Button>
+          {(record.status === 0 || record.status === null) && (
+            <Popconfirm title="Cancel execution?" onConfirm={() => handleCancel(record.id)}>
+              <Button type="link" size="small" icon={<StopOutlined />} danger />
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Select
+          placeholder="Filter by status"
+          allowClear
+          style={{ width: 160 }}
+          value={statusFilter}
+          onChange={setStatusFilter}
+          options={Object.entries(EXEC_STATUS).map(([k, v]) => ({ value: k, label: v.label }))}
+        />
+        <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
+          Refresh
+        </Button>
+        <Dropdown menu={{ items: purgeItems }} trigger={['click']}>
+          <Button danger>Clear History</Button>
+        </Dropdown>
+      </Space>
+      <Table
+        rowKey="id"
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        size="small"
+        scroll={{ x: 'max-content' }}
+        expandable={{
+          expandedRowRender: (record) => {
+            const jobs = expandedJobs[record.id];
+            if (!jobs) return <div style={{ padding: 8 }}>Click &quot;Jobs&quot; to load</div>;
+            return <Table rowKey="id" columns={jobColumns} dataSource={jobs} size="small" pagination={false} />;
+          },
+        }}
+        pagination={{
+          ...pagination,
+          showSizeChanger: true,
+          showTotal: (total) => `Total ${total}`,
+          onChange: (page, pageSize) => fetchData(page, pageSize),
+        }}
+      />
+    </div>
+  );
+}

package/src/client/index.tsx

@@ -1,14 +1,22 @@
-import { Plugin } from '@nocobase/client';
-import { ClusterManagerLayout } from './ClusterManagerLayout';
-
-export class PluginClusterManagerClient extends Plugin {
-  async load() {
-    this.app.pluginSettingsManager.add('plugin-cluster-manager', {
-      title: '{{t("Cluster Manager")}}',
-      icon: 'DashboardOutlined',
-      Component: ClusterManagerLayout,
-    });
-  }
-}
-
-export default PluginClusterManagerClient;
+import { Plugin } from '@nocobase/client';
+import { ClusterManagerLayout } from './ClusterManagerLayout';
+import { setupClientSafeCache } from './utils/clientSafeCache';
+import { setupRequestDedupAndCache } from './utils/requestDedupInterceptor';
+
+export class PluginClusterManagerClient extends Plugin {
+  async load() {
+    // Initialize safe sessionStorage clean-ups on role / token change
+    setupClientSafeCache(this.app.apiClient);
+
+    // Initialize in-flight request deduplication and safe storage
+    setupRequestDedupAndCache(this.app.apiClient);
+
+    this.app.pluginSettingsManager.add('plugin-cluster-manager', {
+      title: '{{t("Cluster Manager")}}',
+      icon: 'DashboardOutlined',
+      Component: ClusterManagerLayout,
+    });
+  }
+}
+
+export default PluginClusterManagerClient;

package/src/client/utils/clientSafeCache.ts

@@ -0,0 +1,41 @@
+import { APIClient } from '@nocobase/client';
+
+export function clearClientCache() {
+  const keysToRemove: string[] = [];
+  for (let i = 0; i < sessionStorage.length; i++) {
+    const key = sessionStorage.key(i);
+    if (key && key.startsWith('nb_cache:')) {
+      keysToRemove.push(key);
+    }
+  }
+  keysToRemove.forEach((key) => {
+    try {
+      sessionStorage.removeItem(key);
+    } catch {
+      // Ignore sessionStorage block/quota errors
+    }
+  });
+}
+
+export function setupClientSafeCache(apiClient: APIClient) {
+  if (!apiClient?.auth) return;
+
+  // Clear cache on role changes
+  const originalSetRole = apiClient.auth.setRole.bind(apiClient.auth);
+  apiClient.auth.setRole = (role: string) => {
+    clearClientCache();
+    return originalSetRole(role);
+  };
+
+  // Clear cache on token changes
+  const originalSetToken = apiClient.auth.setToken.bind(apiClient.auth);
+  apiClient.auth.setToken = (token: string) => {
+    clearClientCache();
+    return originalSetToken(token);
+  };
+
+  // Listen to application auth:tokenChanged event
+  apiClient.app?.eventBus?.addEventListener('auth:tokenChanged', () => {
+    clearClientCache();
+  });
+}