From ae4211d7bf4791417418b35d17843bcef2069bd8 Mon Sep 17 00:00:00 2001 From: Murtaza Saadat Date: Mon, 16 Oct 2023 12:58:52 -0400 Subject: [PATCH] Add button to pause and resume seeding --- src/components/dashboard/DashboardPage.js | 4 +-- src/components/tables/TablesBody.js | 36 ++++++++++++++++++- src/electronClient.js | 1 - src/sql/index.js | 2 ++ src/sql/selectSeedCursor.js | 8 +++++ src/sql/updateSeedCursorStatus.js | 8 +++++ src/styles/scss/tables-body.scss | 43 +++++++++++++++++++++++ 7 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 src/sql/selectSeedCursor.js create mode 100644 src/sql/updateSeedCursorStatus.js diff --git a/src/components/dashboard/DashboardPage.js b/src/components/dashboard/DashboardPage.js index 27aa98a..de5a9b2 100644 --- a/src/components/dashboard/DashboardPage.js +++ b/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} /> diff --git a/src/components/tables/TablesBody.js b/src/components/tables/TablesBody.js index 57566fb..db62ab1 100644 --- a/src/components/tables/TablesBody.js +++ b/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) { ), [showLiveDataPanel]) + const renderPauseSeedingButton = useCallback(() => { + if ( + status !== tableStatus.BACKFILLING.id && + status !== tableStatus.POPULATING.id + ) { + return null; + } + return ( +
+ { + await pm.query(editSeedCursorStatus(props.seedCursor.id, !isPaused)) + setIsPaused(!isPaused) + }}> + {isPaused ? "Resume" : "Pause"} + +
+ ); + }, [isPaused, props.seedCursor, status]); + + const renderHistoryButton = useCallback(() => (
@@ -831,6 +864,7 @@ function TablesBody(props, ref) { { renderFilterButton() } { renderSortButton() } { renderLinkObjectButton() } + { renderPauseSeedingButton() }
diff --git a/src/electronClient.js b/src/electronClient.js index 29bb625..14d8177 100644 --- a/src/electronClient.js +++ b/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 || []) }) diff --git a/src/sql/index.js b/src/sql/index.js index 53f4fc7..95dc991 100644 --- a/src/sql/index.js +++ b/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, diff --git a/src/sql/selectSeedCursor.js b/src/sql/selectSeedCursor.js new file mode 100644 index 0000000..fd871f7 --- /dev/null +++ b/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; diff --git a/src/sql/updateSeedCursorStatus.js b/src/sql/updateSeedCursorStatus.js new file mode 100644 index 0000000..a689274 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/styles/scss/tables-body.scss b/src/styles/scss/tables-body.scss index 241e85e..180559c 100644 --- a/src/styles/scss/tables-body.scss +++ b/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);