From e0b9866fd42c82e0a0cbb81ef67131e7fd72e59d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Mon, 20 Jun 2022 11:44:08 +0200
Subject: [PATCH] Web: resize columns after their data was updated
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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`.
---
 web/app/src/components/jobs/JobsTable.vue       | 13 ++++++++-----
 web/app/src/components/jobs/TasksTable.vue      | 14 +++++++++-----
 web/app/src/components/workers/WorkersTable.vue |  3 +++
 3 files changed, 20 insertions(+), 10 deletions(-)

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