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: [
{ 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.sortData)
.then(() => { this.tabulator.redraw(); }) // Resize columns based on new data.
}
this._refreshAvailableStatuses();
},

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

@ -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) {
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();
},

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

@ -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