Add button to pause and resume seeding

src/components/dashboard/DashboardPage.js

@@ -143,9 +143,7 @@ function DashboardPage(props) {
 
     useEffect(() => {
         pm.onDataChange = events => {
-            console.log('events', events)
             if (!events.length) return
-            console.log('Received', events[0].table, events.length)
             const isSeedCursorEvents = events[0].table === specTableNames.SEED_CURSORS
             isSeedCursorEvents ? onSeedCursorsChange(events) : onTableDataChange(events)
         }
@@ -246,7 +244,7 @@ function DashboardPage(props) {
                         config={config}
                         refetchTables={refetchTables}
                         seedCursor={(seedCursors || []).find(sc => (
-                            sc.spec.table_path === `${currentSchemaName}.${currentTable?.name}`
+                            sc.spec.tablePath === `${currentSchemaName}.${currentTable?.name}`
                         ))}
                         ref={tablesBodyRef}
                     />

src/components/tables/TablesBody.js

@@ -6,7 +6,7 @@ import NewLiveColumnPanel, { referrers } from '../shared/panels/NewLiveColumnPan
 import CountUp from 'react-countup'
 import NewColumnDropdown from '../shared/dropdowns/NewColumnDropdown'
 import pm from '../../managers/project/projectManager'
-import { selectTableRecords, selectTableCount } from '../../sql'
+import { selectTableRecords, selectTableCount, selectSeedCursor } from '../../sql'
 import { sum } from '../../utils/math'
 import { displayColType, isJSONColumn } from '../../utils/colTypes'
 import { getNewCount, tableCounts } from '../../utils/counts'
@@ -29,6 +29,7 @@ import constants from '../../constants'
 import { noop } from '../../utils/nodash'
 import { hasTableBeenSeeded, markTableAsSeeded } from '../../utils/cache'
 import logger from '../../utils/logger'
+import editSeedCursorStatus from "../../sql/updateSeedCursorStatus";
 
 const className = 'tables-body'
 const pcn = getPCN(className)
@@ -154,6 +155,7 @@ function TablesBody(props, ref) {
     const { schema, config = {}, tablesLoaded, refetchTables = noop } = props
 
     // State.
+    const [isPaused, setIsPaused] = useState(false);
     const [table, setTable] = useState(props.table || {})
     const [status, setStatus] = useState(props.status || defaultInitialStatus(props.seedCursor, schema, table?.name))
     const [records, setRecords] = useState(props.records || null)
@@ -462,6 +464,17 @@ function TablesBody(props, ref) {
         }
     }, [schema, table, props.table, props.seedCursor, primaryKeyColNames, mainWidth])
 
+    useEffect(() => {
+        const setPausedStatus = async () => {
+        if (props.seedCursor && props.seedCursor.id) {
+          const result = await pm.query(selectSeedCursor(props.seedCursor.id))
+          const seedCursorIsPaused = result.rows && result.rows[0] && result.rows[0].status === "paused"
+          setIsPaused(seedCursorIsPaused)
+       }
+      }
+       setPausedStatus()
+    },[props.seedCursor, isPaused])
+
     useEffect(() => {
         if (table?.name && records === null) {
             if (count === null) {
@@ -628,6 +641,26 @@ function TablesBody(props, ref) {
         </div>
     ), [showLiveDataPanel])
 
+    const renderPauseSeedingButton = useCallback(() => {
+        if (
+          status !== tableStatus.BACKFILLING.id &&
+          status !== tableStatus.POPULATING.id
+        ) {
+          return null;
+        }
+        return (
+          <div className={pcn("__pause_resume_button")}>
+            <span onClick={async () => {
+              await pm.query(editSeedCursorStatus(props.seedCursor.id, !isPaused))
+              setIsPaused(!isPaused)
+            }}>
+              {isPaused ? "Resume" : "Pause"}
+            </span>
+          </div>
+        );
+      }, [isPaused, props.seedCursor, status]);
+
+
     const renderHistoryButton = useCallback(() => (
         <div className={pcn('__history-button')}>
             <span dangerouslySetInnerHTML={{ __html: historyIcon }}></span>
@@ -831,6 +864,7 @@ function TablesBody(props, ref) {
                                 { renderFilterButton() }
                                 { renderSortButton() }
                                 { renderLinkObjectButton() }
+                                { renderPauseSeedingButton() }
                             </div>
                         </div>
                     </div>

src/electronClient.js

@@ -92,7 +92,6 @@ export async function subscribeToDatabase(connParams, handleEvents) {
 
         window.electronAPI.on(events.DATA_CHANGE, (_, message) => {
             const payload = parse(message)
-            console.log('got message', payload)
             handleEvents && handleEvents(payload?.events || [])
         })
 

src/sql/index.js

@@ -11,6 +11,7 @@ import selectFullSchema from './selectFullSchema'
 import selectNonUniqueIndexes from './selectNonUniqueIndexes'
 import selectPrimaryKeys from './selectPrimaryKeys'
 import selectRelationships from './selectRelationships'
+import selectSeedCursor from "./selectSeedCursor"
 import selectSeedCursors from './selectSeedCursors'
 import selectSpecSchema from './selectSpecSchema'
 import selectSpecUser from './selectSpecUser'
@@ -35,6 +36,7 @@ export {
     selectNonUniqueIndexes,
     selectPrimaryKeys,
     selectRelationships,
+    selectSeedCursor,
     selectSeedCursors,
     selectSpecSchema,
     selectSpecUser,

src/sql/selectSeedCursor.js

@@ -0,0 +1,8 @@
+import { SPEC_SCHEMA_NAME, specTableNames } from "../utils/schema";
+
+export const selectSeedCursor = (id) => {
+  const statement = `select * from ${SPEC_SCHEMA_NAME}.${specTableNames.SEED_CURSORS} where id='${id}'`;
+  return statement;
+}
+
+export default selectSeedCursor;

src/sql/updateSeedCursorStatus.js

@@ -0,0 +1,8 @@
+import { SPEC_SCHEMA_NAME, specTableNames } from "../utils/schema";
+
+export const editSeedCursorStatus = (id, isPaused) => {
+    const status = isPaused ? 'paused' : 'in-progress';
+    return `update ${SPEC_SCHEMA_NAME}.${specTableNames.SEED_CURSORS} set status='${status}' where id='${id}'`;
+}
+
+export default editSeedCursorStatus;

src/styles/scss/tables-body.scss

@@ -342,6 +342,49 @@ $loaderTime: 2.3s;
     }
 }
 
+.tables-body__pause_resume_button {
+    height: 27px;
+    border: 1px solid adjust-color($white, $alpha: -0.78);
+    border-radius: 13.5px;
+    color: adjust-color($white, $alpha: -0.1);
+    background-color: transparent;
+    transition: all 0.15s ease;
+    cursor: pointer;
+    position: relative;
+    font-size: 12px;
+    margin-left: 8px;
+
+    &:hover {
+        background-color: $backgroundMedium;
+        color: $white;
+    }
+
+    &>span:first-child {
+        padding-left: 10px;
+        padding-right: 12px;
+        height: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            position: relative;
+            top: -0.5px;
+        }
+
+        span:first-child {
+            font-size: 14px;
+        }
+
+        span:nth-child(2) {
+            font-size: 11px;
+            margin-left: 7px;
+            letter-spacing: 0.2px;
+        }
+    }
+}
+
 .tables-body__header-new-col-button {
     height: 27px;
     border: 1px solid adjust-color($white, $alpha: -0.78);