Update Parcel & Vue

This patch updates Parcel from v1.12.5 to v2.7.0, and Vue from v2.6.14 to 3.2.37 and addresses breaking changes. Some related dependencies also got updated or replaced.
opencast · Aug 15, 2022 · 7113a45 · 7113a45
1 parent 9a52a8a
commit 7113a45
Show file tree

Hide file tree

Showing 7 changed files with 5,586 additions and 18,565 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,8 @@ node_modules/
 .cache/
 dist/
 
+.parcel-cache
+
 /recordings/*
 /init/container/pyca.conf
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,24 +2,27 @@
   "name": "pyCA",
   "private": true,
   "scripts": {
-    "build": "parcel build --public-url=/static/ --out-dir=pyca/ui/static/ ui/index.html",
+    "build": "parcel build --public-url=/static/ --dist-dir=pyca/ui/static/ ui/index.html",
     "eslint": "eslint ui/func.js"
   },
   "alias": {
-    "vue": "./node_modules/vue/dist/vue.common.js"
+    "vue": "./node_modules/vue/dist/vue.cjs.js"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "@fortawesome/vue-fontawesome": "^2.0.8",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
     "axios": "^0.27.2",
-    "vue": "^2.6.14"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@parcel/transformer-vue": "^2.7.0",
+    "@vue/compiler-sfc": "^3.2.37",
     "@vue/component-compiler-utils": "^3.3.0",
+    "buffer": "^6.0.3",
     "eslint": "^8.21.0",
     "eslint-plugin-vue": "^9.3.0",
-    "parcel-bundler": "^1.12.5",
-    "vue-template-compiler": "^2.6.14"
+    "parcel": "^2.7.0",
+    "process": "^0.11.10"
   }
 }
diff --git a/ui/Metrics.vue b/ui/Metrics.vue
@@ -1,12 +1,10 @@
 <template>
     <tbody>
-    <th colspan="2">{{ metric.header }}</th>
-        <template v-for="item in metric.metrics">
-            <tr>
-                <td>{{ item.name }}</td>
-                <td>{{ item.value }}</td>
-            </tr>
-        </template>
+        <th colspan="2">{{ metric.header }}</th>
+        <tr v-for="item in metric.metrics" :key="item.id">
+            <td>{{ item.name }}</td>
+            <td>{{ item.value }}</td>
+        </tr>
     </tbody>
 </template>
 

diff --git a/ui/func.js b/ui/func.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { createApp, ref } from 'vue';
 import axios from 'axios';
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -13,22 +13,21 @@ import Schedule from './Schedule.vue'
 
 library.add(faExclamationTriangle)
 library.add(faSync)
-Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 // Main data structure.
 var data = {
-    limit_upcoming: 5,
-    limit_processed: 15,
-    name: null,
-    capture: false,
-    uploading: false,
-    upcoming: null,
-    processed: null,
-    previews: null,
-    upcoming_events: [],
-    recorded_events: [],
-    metrics: [],
-    logs: [],
+    limit_upcoming: ref(5),
+    limit_processed: ref(15),
+    name: ref(null),
+    capture: ref(false),
+    uploading: ref(false),
+    upcoming: ref(null),
+    processed: ref(null),
+    previews: ref(null),
+    upcoming_events: ref([]),
+    recorded_events: ref([]),
+    metrics: ref([]),
+    logs: ref([]),
 };
 
 // create_event creates entries for the event list.
@@ -59,41 +58,41 @@ var update_data = function () {
     // Get capture agent name.
     axios
         .get('/api/name')
-        .then(response => data.name = response.data.meta.name);
+        .then(response => data.name.value = response.data.meta.name);
     // Get services.
     axios
         .get('/api/services')
         .then(response => {
-            data.capture = response.data.meta.services.capture === "busy";
-            data.uploading = response.data.meta.services.ingest === "busy";
+            data.capture.value = response.data.meta.services.capture === "busy";
+            data.uploading.value = response.data.meta.services.ingest === "busy";
         });
     // Get events.
     axios
         .get('/api/events')
         .then(response => {
-            data.recorded_events = response.data.data
+            data.recorded_events.value = response.data.data
                 .filter(x => x.attributes.status !== "upcoming")
                 .map(x => create_event(x, x.attributes.status, x.id));
-            data.processed = data.recorded_events.length;
-            var event_in_processing = data.processed > 0 ? data.recorded_events[0].id : null;
-            data.upcoming_events = response.data.data
+            data.processed.value = data.recorded_events.value.length;
+            var event_in_processing = data.processed.value > 0 ? data.recorded_events.value[0].id : null;
+            data.upcoming_events.value = response.data.data
                 .filter(x => x.attributes.status === "upcoming")
                 .filter(x => x.id !== event_in_processing)
                 .map(x => create_event(x, x.attributes.status, x.id));
-            data.upcoming = data.upcoming_events.length;
+            data.upcoming.value = data.upcoming_events.value.length;
         });
     // Get preview images.
     axios
         .get('/api/previews')
         .then(response => {
-            data.previews = response.data.data.map(x => "/img/" + x.attributes.id + "?" + Date.now());
+            data.previews.value = response.data.data.map(x => "/img/" + x.attributes.id + "?" + Date.now());
         });
 
     // Get metrics.
     axios
         .get('/api/metrics')
         .then(response => {
-            data.metrics = [];
+            data.metrics.value = [];
 
             // Machine related metrics
             var machine = {
@@ -129,7 +128,7 @@ var update_data = function () {
             }
             // Add machine metrics
             if (machine.metrics && machine.metrics.length) {
-                data.metrics.push(machine)
+                data.metrics.value.push(machine)
             }
 
             // Service related metrics
@@ -143,7 +142,7 @@ var update_data = function () {
             };
             // Add Service metrics
             if (services.metrics && services.metrics.length) {
-                data.metrics.push(services)
+                data.metrics.value.push(services);
             }
 
             // Upstream related metrics
@@ -158,14 +157,14 @@ var update_data = function () {
             };
             // Add upstream metrics
             if (upstream.metrics && upstream.metrics.length) {
-                data.metrics.push(upstream)
+                data.metrics.value.push(upstream);
             }
         });
 
     axios
         .get('/api/logs')
         .then(response => {
-            data.logs = response.data.data[0].attributes.lines;
+            data.logs.value = response.data.data[0].attributes.lines;
         })
         .catch(error => {
             if (error.response.status != 404) {
@@ -177,17 +176,22 @@ var update_data = function () {
 
 window.onload = function () {
     // Vue App
-    new Vue({
-        el: "#app",
-        data: data,
+    const app = createApp({
+        data() {
+            return data;
+        },
         components: {
             Preview,
             Event,
             Metrics,
             Schedule,
         },
-        created: update_data,
-    });
+        created() {
+            update_data();
+        }
+    })
+    app.component('font-awesome-icon', FontAwesomeIcon);
+    app.mount('#app');
     // Trigger next refresh after set time if over.
     const refresh = new URLSearchParams(window.location.search).get('refresh') || 10;
     if (refresh) {

diff --git a/ui/index.html b/ui/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv=content-type content="text/html; charset=utf-8" />
     <meta name=viewport content="width=device-width, initial-scale=1">
 
-    <script src="./func.js"></script>
+    <script type="module" src="./func.js"></script>
 
     <title>pyCA</title>
     <link rel=stylesheet type=text/css href="./style.css">
@@ -78,9 +78,9 @@ <h2>Recordings</h2>
                                 </td>
                             </tr>
                         </template>
-                        <tr is="Event" v-for="item in upcoming_events.slice(0,limit_upcoming)"
+                        <tr is="vue:Event" v-for="item in upcoming_events.slice(0,limit_upcoming)"
                             v-bind:event="item" v-bind:key="item.start"></tr>
-                        <tr is="Event" v-for="item in recorded_events.slice(0,limit_processed)"
+                        <tr is="vue:Event" v-for="item in recorded_events.slice(0,limit_processed)"
                             v-bind:event="item" v-bind:key="item.start"></tr>
                         <template v-if="processed > limit_processed">
                             <tr class=extendlist>
@@ -96,10 +96,7 @@ <h2>Recordings</h2>
             <section>
                 <h2>Status</h2>
                 <table>
-                    <template>
-                        <Metrics v-for="item in metrics" v-bind:metric="item" v-bind:key="item.header">
-                        </Metrics>
-                    </template>
+                    <tbody is="vue:Metrics" v-for="item in metrics" v-bind:metric="item" v-bind:key="item.header"></tbody>
                 </table>
             </section>
 

diff --git a/ui/style.css b/ui/style.css
@@ -143,5 +143,5 @@ form#schedule label {
 }
 
 form#schedule input[type=submit] {
-    margin-left: 143px;
+    margin-left: 140px;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,8 @@ node_modules/ @@
     .cache/
     dist/
+    .parcel-cache
     /recordings/*
     /init/container/pyca.conf
@@ Expand Down @@