diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue index 09cba2ff..04d7759e 100644 --- a/web/app/src/components/jobs/JobsTable.vue +++ b/web/app/src/components/jobs/JobsTable.vue @@ -77,6 +77,8 @@ export default { initialSort: [ { column: "updated", dir: "desc" }, ], + layout: "fitData", + layoutColumnsOnNewData: true, height: "720px", // Must be set in order for the virtual DOM to function correctly. data: [], // Will be filled via a Flamenco API request. selectable: false, // The active job is tracked by click events, not row selection. @@ -129,17 +131,18 @@ export default { // jobUpdate, and leave the rest as-is. if (this.tabulator.initialized) { this.tabulator.updateData([jobUpdate]) - .then(this.sortData); + .then(this.sortData) + .then(() => { this.tabulator.redraw(); }) // Resize columns based on new data. } this._refreshAvailableStatuses(); }, processNewJob(jobUpdate) { if (this.tabulator.initialized) { - this.tabulator.updateData([jobUpdate]) - .then(this.sortData); + this.tabulator.addData([jobUpdate]) + .then(this.sortData) + .then(() => { this.tabulator.redraw(); }) // Resize columns based on new data. } - this.tabulator.addData([jobUpdate]) - .then(this.sortData); + this._refreshAvailableStatuses(); }, diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue index d0eaa64f..0f6e5f45 100644 --- a/web/app/src/components/jobs/TasksTable.vue +++ b/web/app/src/components/jobs/TasksTable.vue @@ -79,6 +79,8 @@ export default { initialSort: [ { column: "updated", dir: "desc" }, ], + layout: "fitData", + layoutColumnsOnNewData: true, height: "100%", // Must be set in order for the virtual DOM to function correctly. maxHeight: "100%", data: [], // Will be filled via a Flamenco API request. @@ -131,10 +133,11 @@ export default { } const jobsApi = new API.JobsApi(apiClient); - jobsApi.fetchJobTasks(this.jobID).then(this.onTasksFetched, function (error) { - // TODO: error handling. - console.error(error); - }); + jobsApi.fetchJobTasks(this.jobID) + .then(this.onTasksFetched, function (error) { + // TODO: error handling. + console.error(error); + }) }, onTasksFetched(data) { // "Down-cast" to TaskUpdate to only get those fields, just for debugging things: @@ -149,7 +152,8 @@ export default { // taskUpdate, and leave the rest as-is. if (this.tabulator.initialized) { this.tabulator.updateData([taskUpdate]) - .then(this.sortData); + .then(this.sortData) + .then(() => { this.tabulator.redraw(); }) // Resize columns based on new data. } this._refreshAvailableStatuses(); }, diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue index 8b1f1d77..534d616e 100644 --- a/web/app/src/components/workers/WorkersTable.vue +++ b/web/app/src/components/workers/WorkersTable.vue @@ -67,6 +67,8 @@ export default { initialSort: [ { column: "name", dir: "asc" }, ], + layout: "fitData", + layoutColumnsOnNewData: true, height: "360px", // Must be set in order for the virtual DOM to function correctly. data: [], // Will be filled via a Flamenco API request. selectable: false, // The active worker is tracked by click events, not row selection. @@ -135,6 +137,7 @@ export default { } promise .then(this.sortData) + .then(() => { this.tabulator.redraw(); }) // Resize columns based on new data. .then(this.refreshAvailableStatuses); // TODO: this should also resize the columns, as the status column can