From 308d679ea4db1c87812625017e63a28c2a63b9f8 Mon Sep 17 00:00:00 2001
From: Oliver Giles <ohw.giles@gmail.com>
Date: Fri, 20 Nov 2020 14:34:26 +1300
Subject: [PATCH] update vue and vue-router

to 2.6.12 and 3.4.8 respectively, as they are the versions available
in Debian. fix an exposed issue where the status handler attempted
to manipulate the DOM before vue had rendered it - such manipulations
need to be deferred with $nextTick().
---
 CMakeLists.txt          |  8 ++++----
 src/resources/js/app.js | 19 +++++++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/CMakeLists.txt b/CMakeLists.txt
index e2eb1fa..eddc0d7 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -83,10 +83,10 @@ add_custom_command(OUTPUT index_html_size.h
     DEPENDS src/resources/index.html)
 
 # Download 3rd-party frontend JS libs...
-file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js
-        js/vue.min.js EXPECTED_MD5 ae2fca1cfa0e31377819b1b0ffef704c)
-file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js
-        js/vue-router.min.js EXPECTED_MD5 5d3e35710dbe02de78c39e3e439b8d4e)
+file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js
+	js/vue.min.js EXPECTED_MD5 fb192338844efe86ec759a40152fcb8e)
+file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.8/vue-router.min.js
+	js/vue-router.min.js EXPECTED_MD5 5f51d4dbbf68fd6725956a5a2b865f3b)
 file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v1.3.0/ansi_up.js
         js/ansi_up.js EXPECTED_MD5 158566dc1ff8f2804de972f7e841e2f6)
 file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index f0e518e..83b836b 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -433,11 +433,14 @@ const Home = templateId => {
         state.lowPassRates = msg.lowPassRates;
         this.$forceUpdate();
 
-        chtUtilization = Charts.createExecutorUtilizationChart("chartUtil", msg.executorsBusy, msg.executorsTotal);
-        chtBuildsPerDay = Charts.createRunsPerDayChart("chartBpd", msg.buildsPerDay);
-        chtBuildsPerJob = Charts.createRunsPerJobChart("chartBpj", msg.buildsPerJob);
-        chtTimePerJob = Charts.createTimePerJobChart("chartTpj", msg.timePerJob);
-        chtBuildTimeChanges = Charts.createRunTimeChangesChart("chartBuildTimeChanges", msg.buildTimeChanges);
+        // defer charts to nextTick because they get DOM elements which aren't rendered yet
+        this.$nextTick(() => {
+          chtUtilization = Charts.createExecutorUtilizationChart("chartUtil", msg.executorsBusy, msg.executorsTotal);
+          chtBuildsPerDay = Charts.createRunsPerDayChart("chartBpd", msg.buildsPerDay);
+          chtBuildsPerJob = Charts.createRunsPerJobChart("chartBpj", msg.buildsPerJob);
+          chtTimePerJob = Charts.createTimePerJobChart("chartTpj", msg.timePerJob);
+          chtBuildTimeChanges = Charts.createRunTimeChangesChart("chartBuildTimeChanges", msg.buildTimeChanges);
+        });
       },
       job_queued: function(data) {
         state.jobsQueued.splice(0, 0, data);
@@ -590,7 +593,11 @@ const Job = templateId => {
         // old chart and recreate it to prevent flickering of old data
         if(chtBt)
           chtBt.destroy();
-        chtBt = Charts.createRunTimeChart("chartBt", msg.recent, msg.averageRuntime);
+
+        // defer chart to nextTick because they get DOM elements which aren't rendered yet
+        this.$nextTick(() => {
+          chtBt = Charts.createRunTimeChart("chartBt", msg.recent, msg.averageRuntime);
+        });
       },
       job_queued: function() {
         state.nQueued++;