blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: resize columns after their data was updated

Browse Source 
When data is updated, resize columns in the job/task/worker tables. For
example, status change requests of Workers require more space, for example
going from `awake` to `awake → offline`.
This commit is contained in:
Sybren A. Stüvel 2022-06-20 11:44:08 +02:00
parent 8bfe24cd96
commit e0b9866fd4
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/src/components/jobs/JobsTable.vue
View File

@ -77,6 +77,8 @@ export default {
initialSort: [ initialSort: [
{ column: "updated", dir: "desc" }, { column: "updated", dir: "desc" },
], ],
layout: "fitData",
layoutColumnsOnNewData: true,
height: "720px", // Must be set in order for the virtual DOM to function correctly. height: "720px", // Must be set in order for the virtual DOM to function correctly.
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
selectable: false, // The active job is tracked by click events, not row selection. 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. // jobUpdate, and leave the rest as-is.
if (this.tabulator.initialized) { if (this.tabulator.initialized) {
this.tabulator.updateData([jobUpdate]) this.tabulator.updateData([jobUpdate])
.then(this.sortData); .then(this.sortData)
.then(() => { this.tabulator.redraw(); }) // Resize columns based on new data.
} }
this._refreshAvailableStatuses(); this._refreshAvailableStatuses();
}, },
processNewJob(jobUpdate) { processNewJob(jobUpdate) {
if (this.tabulator.initialized) { if (this.tabulator.initialized) {
this.tabulator.updateData([jobUpdate]) this.tabulator.addData([jobUpdate])
.then(this.sortData); .then(this.sortData)
.then(() => { this.tabulator.redraw(); }) // Resize columns based on new data.
} }
this.tabulator.addData([jobUpdate])
.then(this.sortData);
this._refreshAvailableStatuses(); this._refreshAvailableStatuses();
}, },

14
web/app/src/components/jobs/TasksTable.vue
View File

@ -79,6 +79,8 @@ export default {
initialSort: [ initialSort: [
{ column: "updated", dir: "desc" }, { column: "updated", dir: "desc" },
], ],
layout: "fitData",
layoutColumnsOnNewData: true,
height: "100%", // Must be set in order for the virtual DOM to function correctly. height: "100%", // Must be set in order for the virtual DOM to function correctly.
maxHeight: "100%", maxHeight: "100%",
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
@ -131,10 +133,11 @@ export default {
} }
const jobsApi = new API.JobsApi(apiClient); const jobsApi = new API.JobsApi(apiClient);
jobsApi.fetchJobTasks(this.jobID).then(this.onTasksFetched, function (error) { jobsApi.fetchJobTasks(this.jobID)
// TODO: error handling. .then(this.onTasksFetched, function (error) {
console.error(error); // TODO: error handling.
}); console.error(error);
})
}, },
onTasksFetched(data) { onTasksFetched(data) {
// "Down-cast" to TaskUpdate to only get those fields, just for debugging things: // "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. // taskUpdate, and leave the rest as-is.
if (this.tabulator.initialized) { if (this.tabulator.initialized) {
this.tabulator.updateData([taskUpdate]) this.tabulator.updateData([taskUpdate])
.then(this.sortData); .then(this.sortData)
.then(() => { this.tabulator.redraw(); }) // Resize columns based on new data.
} }
this._refreshAvailableStatuses(); this._refreshAvailableStatuses();
}, },

3
web/app/src/components/workers/WorkersTable.vue
View File

@ -67,6 +67,8 @@ export default {
initialSort: [ initialSort: [
{ column: "name", dir: "asc" }, { column: "name", dir: "asc" },
], ],
layout: "fitData",
layoutColumnsOnNewData: true,
height: "360px", // Must be set in order for the virtual DOM to function correctly. height: "360px", // Must be set in order for the virtual DOM to function correctly.
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
selectable: false, // The active worker is tracked by click events, not row selection. selectable: false, // The active worker is tracked by click events, not row selection.
@ -135,6 +137,7 @@ export default {
} }
promise promise
.then(this.sortData) .then(this.sortData)
.then(() => { this.tabulator.redraw(); }) // Resize columns based on new data.
.then(this.refreshAvailableStatuses); .then(this.refreshAvailableStatuses);
// TODO: this should also resize the columns, as the status column can // TODO: this should also resize the columns, as the status column can