strapi-content-sync-pro 1.0.4 → 1.0.6

package/admin/src/components/LogsTab.jsx

@@ -6,6 +6,7 @@ import {
   Button,
   SingleSelect,
   SingleSelectOption,
+  TextInput,
   Table,
   Thead,
   Tbody,
@@ -13,6 +14,7 @@ import {
   Td,
   Th,
 } from '@strapi/design-system';
+import { CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 const PLUGIN_ID = 'strapi-content-sync-pro';
@@ -24,6 +26,9 @@ const LogsTab = () => {
   const [meta, setMeta] = useState(null);
   const [page, setPage] = useState(1);
   const [statusFilter, setStatusFilter] = useState('');
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState('');
+  const [sortDir, setSortDir] = useState('asc');
   const [loading, setLoading] = useState(true);
 
   const fetchLogs = useCallback(async () => {
@@ -46,6 +51,48 @@ const LogsTab = () => {
     fetchLogs();
   }, [fetchLogs]);
 
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDir('asc');
+    }
+  };
+
+  const displayedLogs = (() => {
+    let result = [...logs];
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      result = result.filter(
+        (l) =>
+          (l.action || '').toLowerCase().includes(q) ||
+          (l.contentType || '').toLowerCase().includes(q) ||
+          (l.message || '').toLowerCase().includes(q)
+      );
+    }
+    if (sortField) {
+      result.sort((a, b) => {
+        const aVal = a[sortField] ?? '';
+        const bVal = b[sortField] ?? '';
+        if (typeof aVal === 'string') {
+          return sortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+        }
+        return sortDir === 'asc' ? aVal - bVal : bVal - aVal;
+      });
+    }
+    return result;
+  })();
+
+  const SortableTh = ({ field, children }) => (
+    <Th onClick={() => handleSort(field)} style={{ cursor: 'pointer', userSelect: 'none' }}>
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {sortField === field && (sortDir === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Th>
+  );
+
   return (
     <Box>
       <Flex justifyContent="space-between" alignItems="center">
@@ -65,19 +112,30 @@ const LogsTab = () => {
         </Flex>
       </Flex>
 
-      <Box paddingTop={4}>
+      <Box paddingTop={3} paddingBottom={2}>
+        <TextInput
+          placeholder="Search action, content type, message…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          label="Search"
+          size="S"
+          style={{ maxWidth: 340 }}
+        />
+      </Box>
+
+      <Box paddingTop={2}>
         <Table>
           <Thead>
             <Tr>
-              <Th><Typography variant="sigma">Time</Typography></Th>
-              <Th><Typography variant="sigma">Action</Typography></Th>
-              <Th><Typography variant="sigma">Content Type</Typography></Th>
-              <Th><Typography variant="sigma">Status</Typography></Th>
+              <SortableTh field="createdAt">Time</SortableTh>
+              <SortableTh field="action">Action</SortableTh>
+              <SortableTh field="contentType">Content Type</SortableTh>
+              <SortableTh field="status">Status</SortableTh>
               <Th><Typography variant="sigma">Message</Typography></Th>
             </Tr>
           </Thead>
           <Tbody>
-            {logs.map((log, i) => (
+            {displayedLogs.map((log, i) => (
               <Tr key={log.id || i}>
                 <Td><Typography>{new Date(log.createdAt).toLocaleString()}</Typography></Td>
                 <Td><Typography>{log.action}</Typography></Td>
@@ -96,11 +154,11 @@ const LogsTab = () => {
                 <Td><Typography>{log.message}</Typography></Td>
               </Tr>
             ))}
-            {logs.length === 0 && (
+            {displayedLogs.length === 0 && (
               <Tr>
                 <Td colSpan={5}>
                   <Typography textColor="neutral500">
-                    {loading ? 'Loading…' : 'No logs found'}
+                    {loading ? 'Loading…' : search ? 'No logs match the search.' : 'No logs found'}
                   </Typography>
                 </Td>
               </Tr>

package/admin/src/components/MediaTab.jsx

@@ -19,7 +19,7 @@ import {
   Dialog,
   IconButton,
 } from '@strapi/design-system';
-import { Pencil, Trash, Play, Check } from '@strapi/icons';
+import { Pencil, Trash, Play, Check, Stop, CaretUp, CaretDown } from '@strapi/icons';
 import { useFetchClient } from '@strapi/strapi/admin';
 
 const PLUGIN_ID = 'strapi-content-sync-pro';
@@ -103,6 +103,13 @@ const MediaTab = () => {
   const [editProfile, setEditProfile] = useState(null);
   const [editMode, setEditMode] = useState(null); // 'create' | 'edit'
 
+  // Profile list filter + sort
+  const [profileSearch, setProfileSearch] = useState('');
+  const [profileStrategyFilter, setProfileStrategyFilter] = useState('');
+  const [profileDirectionFilter, setProfileDirectionFilter] = useState('');
+  const [profileSortField, setProfileSortField] = useState('name');
+  const [profileSortDir, setProfileSortDir] = useState('asc');
+
   const reload = async () => {
     try {
       const [pRes, gRes, sRes, dRes] = await Promise.all([
@@ -122,8 +129,25 @@ const MediaTab = () => {
     }
   };
 
+  const refreshStatus = async () => {
+    try {
+      const sRes = await get(`/${PLUGIN_ID}/media-sync/status`);
+      setStatus(sRes.data.data || {});
+    } catch {
+      /* silent — polling should not spam errors */
+    }
+  };
+
   useEffect(() => { reload(); }, []);
 
+  // Live status polling: while anything is running or paused, poll every 2s.
+  useEffect(() => {
+    const anyActive = (status?.profiles || []).some((p) => p.running || p.paused);
+    if (!anyActive) return undefined;
+    const id = setInterval(refreshStatus, 2000);
+    return () => clearInterval(id);
+  }, [status]);
+
   const handleSaveGlobal = async () => {
     setSaving(true); setMessage(null);
     try {
@@ -174,25 +198,67 @@ const MediaTab = () => {
   };
 
   const handleRunProfile = async (id) => {
-    setRunning(true); setMessage(null);
+    setMessage(null);
+    // Fire-and-forget: don't await — the sync may run for a long time.
+    // Poll status to reflect progress and completion.
+    post(`/${PLUGIN_ID}/media-sync/profiles/${id}/run`, {})
+      .then(() => {
+        setMessage({ type: 'success', text: 'Media sync complete.' });
+        refreshStatus();
+      })
+      .catch((err) => {
+        setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message });
+        refreshStatus();
+      });
+    setMessage({ type: 'success', text: 'Media sync started. You can pause or stop it from the Status tab.' });
+    // Kick an immediate status refresh so the UI flips to Running right away.
+    setTimeout(refreshStatus, 500);
+  };
+
+  const handleRunAll = async () => {
+    setMessage(null);
+    post(`/${PLUGIN_ID}/media-sync/run-active`, {})
+      .then(() => {
+        setMessage({ type: 'success', text: 'All active media profiles synced.' });
+        refreshStatus();
+      })
+      .catch((err) => {
+        setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message });
+        refreshStatus();
+      });
+    setMessage({ type: 'success', text: 'Sync All started. Watch progress in the Status tab.' });
+    setTimeout(refreshStatus, 500);
+  };
+
+  const handlePauseProfile = async (id) => {
     try {
-      await post(`/${PLUGIN_ID}/media-sync/profiles/${id}/run`, {});
-      setMessage({ type: 'success', text: 'Media sync complete.' });
-      await reload();
+      await post(`/${PLUGIN_ID}/media-sync/profiles/${id}/pause`, {});
+      setMessage({ type: 'success', text: 'Pause requested. The run will halt at the next checkpoint.' });
+      refreshStatus();
     } catch (err) {
       setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message });
-    } finally { setRunning(false); }
+    }
   };
 
-  const handleRunAll = async () => {
-    setRunning(true); setMessage(null);
+  const handleResumeProfile = async (id) => {
     try {
-      await post(`/${PLUGIN_ID}/media-sync/run-active`, {});
-      setMessage({ type: 'success', text: 'All active media profiles synced.' });
-      await reload();
+      await post(`/${PLUGIN_ID}/media-sync/profiles/${id}/resume`, {});
+      setMessage({ type: 'success', text: 'Run resumed.' });
+      refreshStatus();
+    } catch (err) {
+      setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message });
+    }
+  };
+
+  const handleCancelProfile = async (id) => {
+    if (!confirm('Stop this media profile run? Progress already done is kept, remaining work is aborted.')) return;
+    try {
+      await post(`/${PLUGIN_ID}/media-sync/profiles/${id}/cancel`, {});
+      setMessage({ type: 'success', text: 'Stop requested.' });
+      refreshStatus();
     } catch (err) {
       setMessage({ type: 'danger', text: err?.response?.data?.error?.message || err.message });
-    } finally { setRunning(false); }
+    }
   };
 
   const handleTest = async () => {
@@ -216,6 +282,51 @@ const MediaTab = () => {
   const ep = editProfile || {};
   const updateEp = (patch) => setEditProfile((p) => ({ ...p, ...patch }));
 
+  const handleProfileSort = (field) => {
+    if (profileSortField === field) {
+      setProfileSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setProfileSortField(field);
+      setProfileSortDir('asc');
+    }
+  };
+
+  const displayedProfiles = (() => {
+    let result = [...profiles];
+    if (profileSearch.trim()) {
+      const q = profileSearch.trim().toLowerCase();
+      result = result.filter((p) => (p.name || '').toLowerCase().includes(q));
+    }
+    if (profileStrategyFilter) {
+      result = result.filter((p) => p.strategy === profileStrategyFilter);
+    }
+    if (profileDirectionFilter) {
+      result = result.filter((p) => p.direction === profileDirectionFilter);
+    }
+    result.sort((a, b) => {
+      let aVal = a[profileSortField] ?? '';
+      let bVal = b[profileSortField] ?? '';
+      if (typeof aVal === 'boolean') { aVal = aVal ? 1 : 0; bVal = bVal ? 1 : 0; }
+      if (typeof aVal === 'string') {
+        return profileSortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      }
+      return profileSortDir === 'asc' ? aVal - bVal : bVal - aVal;
+    });
+    return result;
+  })();
+
+  const SortableCol = ({ field, style, children }) => (
+    <Box
+      style={{ ...style, cursor: 'pointer', userSelect: 'none' }}
+      onClick={() => handleProfileSort(field)}
+    >
+      <Flex alignItems="center" gap={1}>
+        <Typography variant="sigma">{children}</Typography>
+        {profileSortField === field && (profileSortDir === 'asc' ? <CaretUp /> : <CaretDown />)}
+      </Flex>
+    </Box>
+  );
+
   return (
     <Box padding={4}>
       <Box paddingBottom={4}>
@@ -245,7 +356,7 @@ const MediaTab = () => {
               <Typography variant="delta">Media Sync Profiles</Typography>
               <Flex gap={2}>
                 <Button variant="secondary" onClick={handleTest} loading={testing} disabled={testing}>Test connection</Button>
-                <Button variant="secondary" onClick={handleRunAll} loading={running} disabled={running}>Sync All Active</Button>
+                <Button variant="secondary" onClick={handleRunAll} disabled={!!status?.running}>Sync All Active</Button>
                 <Button onClick={() => { setEditProfile({ ...EMPTY_PROFILE, includeMime: defaults?.mimeAll || [] }); setEditMode('create'); }}>
                   Create Profile
                 </Button>
@@ -258,17 +369,71 @@ const MediaTab = () => {
               </Box>
             ) : (
               <Box>
+                {/* Filter bar */}
+                <Flex gap={3} wrap="wrap" marginBottom={3} alignItems="flex-end">
+                  <Box style={{ flex: '1 1 180px', minWidth: 160 }}>
+                    <TextInput
+                      placeholder="Search by name…"
+                      value={profileSearch}
+                      onChange={(e) => setProfileSearch(e.target.value)}
+                      label="Search"
+                      size="S"
+                    />
+                  </Box>
+                  <Box style={{ minWidth: 160 }}>
+                    <SingleSelect
+                      placeholder="All strategies"
+                      value={profileStrategyFilter}
+                      onChange={setProfileStrategyFilter}
+                      onClear={() => setProfileStrategyFilter('')}
+                      size="S"
+                      label="Strategy"
+                    >
+                      <SingleSelectOption value="url">URL</SingleSelectOption>
+                      <SingleSelectOption value="rsync">rsync</SingleSelectOption>
+                      <SingleSelectOption value="disabled">Disabled</SingleSelectOption>
+                    </SingleSelect>
+                  </Box>
+                  <Box style={{ minWidth: 160 }}>
+                    <SingleSelect
+                      placeholder="All directions"
+                      value={profileDirectionFilter}
+                      onChange={setProfileDirectionFilter}
+                      onClear={() => setProfileDirectionFilter('')}
+                      size="S"
+                      label="Direction"
+                    >
+                      <SingleSelectOption value="push">Push</SingleSelectOption>
+                      <SingleSelectOption value="pull">Pull</SingleSelectOption>
+                      <SingleSelectOption value="both">Both</SingleSelectOption>
+                    </SingleSelect>
+                  </Box>
+                  {(profileSearch || profileStrategyFilter || profileDirectionFilter) && (
+                    <Button
+                      variant="tertiary"
+                      size="S"
+                      onClick={() => { setProfileSearch(''); setProfileStrategyFilter(''); setProfileDirectionFilter(''); }}
+                    >
+                      Clear filters
+                    </Button>
+                  )}
+                </Flex>
+
                 {/* Header */}
                 <Flex background="neutral100" padding={3} hasRadius style={{ fontWeight: 600 }}>
-                  <Box style={{ flex: 2 }}><Typography variant="sigma">Name</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Strategy</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Direction</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Conflict</Typography></Box>
-                  <Box style={{ flex: 1 }}><Typography variant="sigma">Execution</Typography></Box>
+                  <SortableCol field="name" style={{ flex: 2 }}>Name</SortableCol>
+                  <SortableCol field="strategy" style={{ flex: 1 }}>Strategy</SortableCol>
+                  <SortableCol field="direction" style={{ flex: 1 }}>Direction</SortableCol>
+                  <SortableCol field="conflictStrategy" style={{ flex: 1 }}>Conflict</SortableCol>
+                  <SortableCol field="executionMode" style={{ flex: 1 }}>Execution</SortableCol>
                   <Box style={{ flex: 1 }}><Typography variant="sigma">Sync Scope</Typography></Box>
                   <Box style={{ width: 180 }}><Typography variant="sigma">Actions</Typography></Box>
                 </Flex>
-                {profiles.map((p) => (
+                {displayedProfiles.length === 0 ? (
+                  <Box padding={4}>
+                    <Typography textColor="neutral500">No profiles match the current filters.</Typography>
+                  </Box>
+                ) : displayedProfiles.map((p) => (
                   <Flex key={p.id} padding={3} borderColor="neutral150" style={{ borderBottom: '1px solid #eee' }} alignItems="center">
                     <Box style={{ flex: 2 }}>
                       <Flex gap={2} alignItems="center">
@@ -289,9 +454,30 @@ const MediaTab = () => {
                       {!p.active && (
                         <Button variant="tertiary" size="S" onClick={() => handleActivate(p.id)} startIcon={<Check />}>Activate</Button>
                       )}
-                      {p.active && (
-                        <Button variant="secondary" size="S" onClick={() => handleRunProfile(p.id)} loading={running} disabled={running} startIcon={<Play />}>Run</Button>
-                      )}
+                      {p.active && (() => {
+                        const sp = (status?.profiles || []).find((x) => x.id === p.id);
+                        const isRunning = !!sp?.running;
+                        const isPaused = !!sp?.paused;
+                        if (isRunning && !isPaused) {
+                          return (
+                            <>
+                              <Button variant="tertiary" size="S" onClick={() => handlePauseProfile(p.id)}>Pause</Button>
+                              <IconButton label="Stop" onClick={() => handleCancelProfile(p.id)}><Stop /></IconButton>
+                            </>
+                          );
+                        }
+                        if (isPaused) {
+                          return (
+                            <>
+                              <Button variant="secondary" size="S" onClick={() => handleResumeProfile(p.id)} startIcon={<Play />}>Resume</Button>
+                              <IconButton label="Stop" onClick={() => handleCancelProfile(p.id)}><Stop /></IconButton>
+                            </>
+                          );
+                        }
+                        return (
+                          <Button variant="secondary" size="S" onClick={() => handleRunProfile(p.id)} startIcon={<Play />}>Run</Button>
+                        );
+                      })()}
                       <IconButton label="Edit" onClick={() => { setEditProfile({ ...p }); setEditMode('edit'); }}><Pencil /></IconButton>
                       <IconButton label="Delete" onClick={() => handleDelete(p.id)}><Trash /></IconButton>
                     </Flex>
@@ -382,21 +568,52 @@ const MediaTab = () => {
         {/* ── Status Tab ──────────────────────────────────────────────── */}
         <Tabs.Content value="status">
           <Box paddingTop={4}>
-            <Typography variant="delta" paddingBottom={3}>Media Sync Status</Typography>
-            {status?.profiles?.map((sp) => (
-              <Box key={sp.id} background="neutral0" padding={3} hasRadius shadow="tableShadow" marginBottom={2}>
-                <Flex justifyContent="space-between" alignItems="center">
-                  <Flex gap={2} alignItems="center">
-                    <Typography variant="omega" fontWeight="bold">{sp.name}</Typography>
-                    {sp.active && <Badge active>Active</Badge>}
-                    <Badge>{sp.running ? 'Running' : 'Idle'}</Badge>
+            <Flex justifyContent="space-between" alignItems="center" paddingBottom={3}>
+              <Typography variant="delta">Media Sync Status</Typography>
+              <Button variant="tertiary" size="S" onClick={refreshStatus}>Refresh</Button>
+            </Flex>
+            {status?.profiles?.map((sp) => {
+              const prog = sp.progress || null;
+              const stateLabel = sp.paused ? 'Paused' : sp.running ? 'Running' : 'Idle';
+              return (
+                <Box key={sp.id} background="neutral0" padding={3} hasRadius shadow="tableShadow" marginBottom={2}>
+                  <Flex justifyContent="space-between" alignItems="center">
+                    <Flex gap={2} alignItems="center">
+                      <Typography variant="omega" fontWeight="bold">{sp.name}</Typography>
+                      {sp.active && <Badge active>Active</Badge>}
+                      <Badge>{stateLabel}</Badge>
+                      {prog?.phase && (sp.running || sp.paused) && (
+                        <Typography variant="pi" textColor="neutral600">phase: {prog.phase}</Typography>
+                      )}
+                    </Flex>
+                    <Flex gap={1} alignItems="center">
+                      {sp.running && !sp.paused && (
+                        <>
+                          <Button variant="tertiary" size="S" onClick={() => handlePauseProfile(sp.id)}>Pause</Button>
+                          <Button variant="danger-light" size="S" startIcon={<Stop />} onClick={() => handleCancelProfile(sp.id)}>Stop</Button>
+                        </>
+                      )}
+                      {sp.paused && (
+                        <>
+                          <Button variant="secondary" size="S" startIcon={<Play />} onClick={() => handleResumeProfile(sp.id)}>Resume</Button>
+                          <Button variant="danger-light" size="S" startIcon={<Stop />} onClick={() => handleCancelProfile(sp.id)}>Stop</Button>
+                        </>
+                      )}
+                      <Typography variant="pi" textColor="neutral600" paddingLeft={2}>
+                        Mode: {(sp.executionMode || '').replace('_', ' ')} | Last: {sp.lastExecutedAt ? new Date(sp.lastExecutedAt).toLocaleString() : 'never'}
+                      </Typography>
+                    </Flex>
                   </Flex>
-                  <Typography variant="pi" textColor="neutral600">
-                    Mode: {(sp.executionMode || '').replace('_', ' ')} | Last: {sp.lastExecutedAt ? new Date(sp.lastExecutedAt).toLocaleString() : 'never'}
-                  </Typography>
-                </Flex>
-              </Box>
-            ))}
+                  {(sp.running || sp.paused) && prog && (
+                    <Box paddingTop={2}>
+                      <Typography variant="pi" textColor="neutral700">
+                        pushed: {prog.pushed || 0} · pulled: {prog.pulled || 0} · skipped: {prog.skipped || 0} · errors: {prog.errors || 0}
+                      </Typography>
+                    </Box>
+                  )}
+                </Box>
+              );
+            })}
             {status?.lastResult && (
               <Box paddingTop={3} background="neutral0" padding={4} hasRadius shadow="tableShadow">
                 <Typography variant="sigma">Last Run Result</Typography>