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

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

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++;