Merge pull request #159 from klauer/mnt_update_frontend_deps

MNT: update frontend dependencies, and migrate from vue cli to vite
pcdshub · May 31, 2023 · 549f0b9 · 549f0b9
2 parents 4c775f4 + 8342ff4
commit 549f0b9
Show file tree

Hide file tree

Showing 31 changed files with 1,164 additions and 8,635 deletions.
diff --git a/docker/.env b/docker/.env
@@ -1,21 +1,22 @@
 # This is the port the vue.js frontend listens on. You can
 # access it via http://localhost:${FRONTEND_PORT}.
-FRONTEND_PORT=8896
+WHATRECORD_FRONTEND_PORT=8896
 
 # This is the container name, so the frontend can communicate with the backend
-API_HOST=whatrecord
+WHATRECORD_API_HOST=whatrecord
+# Alternatively, if run locally or on a different host, you could make this
+# the hostname/IP address:
+# WHATRECORD_API_HOST=127.0.0.1
 
 # This is the port the backend (whatrecord server) listens on. You can
 # access it via localhost:${API_PORT}.
-API_PORT=8895
+WHATRECORD_API_PORT=8895
 
 # These are the default plugins to enable.  This is used by the server
 # to selectively enable the plugins, and the frontend to selectively
 # display them to the user. Other plugins include:
 # twincat_pytmc epicsarch netconfig
 WHATRECORD_PLUGINS=happi
-VUE_APP_WHATRECORD_PLUGINS=happi
-# Why twice? The frontend requires a prefix of VUE_APP*.
 
 # The default version to use for IOCs
 WHATRECORD_BASE_VERSION=3.15
@@ -35,8 +36,8 @@ WHATRECORD_SERVER_SCAN_PERIOD=600
 WHATRECORD_AUTOSAVE_RELOAD_PERIOD=60
 
 # These are optional to show off the plugins:
-HAPPI_CFG=/usr/share/whatrecord/support/happi.cfg
+WHATRECORD_HAPPI_CFG=/usr/share/whatrecord/support/happi.cfg
 
 # A placeholder for the archiver appliance viewer URL (not supported in this
 # demo):
-VUE_APP_WHATRECORD_ARCHIVER_URL=http://localhost/
+WHATRECORD_ARCHIVER_URL=http://localhost/
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -7,12 +7,12 @@ services:
     image: node:18.9-alpine
     working_dir: /usr/src/app
     ports:
-      - "${FRONTEND_PORT}:${FRONTEND_PORT}"
+      - "${WHATRECORD_FRONTEND_PORT}:${WHATRECORD_FRONTEND_PORT}"
     volumes:
       - ../frontend:/usr/src/app
       - ./support:/usr/share/whatrecord/support
     entrypoint: /bin/sh
-    command: /usr/share/whatrecord/support/run_frontend.sh
+    command: /usr/share/whatrecord/support/start_frontend.sh
     depends_on:
       - whatrecord
 
@@ -31,7 +31,7 @@ services:
     image: pcdshub/whatrecord:latest
     command: bash /usr/share/whatrecord/support/start_example.sh
     ports:
-      - "${API_PORT}:${API_PORT}"
+      - "${WHATRECORD_API_PORT}:${WHATRECORD_API_PORT}"
     volumes:
       - ./cache/:/var/lib/whatrecord/cache
       - ./support:/usr/share/whatrecord/support

diff --git a/docker/support/run_frontend.sh b/docker/support/run_frontend.sh
diff --git a/docker/support/start_example.sh b/docker/support/start_example.sh
@@ -2,7 +2,7 @@
 # Note: this is meant to be run from docker via docker-compose and not on its
 # own.
 
-[ -z ${API_PORT} ] && echo "API port unset?" && exit 1;
+[ -z ${WHATRECORD_API_PORT} ] && echo "API port unset?" && exit 1;
 
 echo Installing dev whatrecord from your source tree...
 
@@ -19,8 +19,8 @@ STARTUP_SCRIPTS=${STARTUP_SCRIPTS-/usr/local/src/whatrecord/whatrecord/tests/ioc
 
 ls -la ${STARTUP_SCRIPTS}
 
-echo Running API server on port ${API_PORT}...
+echo Running API server on port ${WHATRECORD_API_PORT}...
 whatrecord server \
-  --port=${API_PORT} \
+  --port=${WHATRECORD_API_PORT} \
   --gateway-config=/usr/share/whatrecord/support/gateway/ \
   --scripts ${STARTUP_SCRIPTS}
diff --git a/docker/support/start_frontend.sh b/docker/support/start_frontend.sh
@@ -0,0 +1,11 @@
+#!/bin/sh
+#
+WHATRECORD_FRONTEND_PORT=${WHATRECORD_FRONTEND_PORT-8896}
+
+echo "* Installing frontend dependencies..."
+yarn install
+echo "* Monitoring frontend files in the background to rebuild automatically when they update."
+echo "* Note: it may take a few seconds before the pages are ready to be served"
+yarn build --watch &
+echo "* Running the development server on port ${WHATRECORD_FRONTEND_PORT}."
+yarn serve --port "${WHATRECORD_FRONTEND_PORT}" --host --strictPort  # --debug --logLevel debug
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
@@ -0,0 +1,4 @@
+env: {
+    node: true,
+    es2022: true,
+}
diff --git a/frontend/babel.config.js b/frontend/babel.config.js
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>whatrecord</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,31 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite preview",
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint --ext .js,.vue --ignore-path ../.gitignore --fix src"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "core-js": "^3.6.5",
-    "cytoscape": "^3.19.0",
-    "cytoscape-fcose": "^2.1.0",
+    "axios": "^1.4.0",
+    "cytoscape": "^3.25.0",
+    "cytoscape-fcose": "^2.2.0",
     "es6-promise": "^4.2.8",
-    "primeflex": "^2.0.0",
-    "primeicons": "^4.1.0",
-    "primevue": "3.6.0",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.8",
-    "vuex": "^4.0.1"
+    "primeflex": "^3.3.0",
+    "primeicons": "^6.0.1",
+    "primevue": "3.29.1",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.1",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "8",
+    "eslint-plugin-vue": "9.14.0",
+    "vite": "^4.3.8"
   },
   "eslintConfig": {
     "root": true,
@@ -38,9 +35,6 @@
       "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
     "rules": {}
   },
   "browserslist": [

diff --git a/frontend/public/index.html b/frontend/public/index.html
diff --git a/frontend/src/components/asyn-port.vue b/frontend/src/components/asyn-port.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import DictionaryTable from "./dictionary-table.vue";
+import DictionaryTable from "@/components/dictionary-table.vue";
 
 export default {
   name: "AsynPort",
@@ -27,8 +27,7 @@ export default {
   beforeCreate() {
     // TODO: I don't think this is circular; why am I running into this?
     // V2 ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-    this.$options.components.DictionaryTable =
-      require("./dictionary-table.vue").default;
+    this.$options.components.DictionaryTable = DictionaryTable;
   },
 };
 </script>

diff --git a/frontend/src/components/linter-results.vue b/frontend/src/components/linter-results.vue
@@ -12,19 +12,17 @@
 </template>
 
 <script>
-import DictionaryTable from "./dictionary-table.vue";
-import ScriptContextLink from "./script-context-link.vue";
+import DictionaryTable from "@/components/dictionary-table.vue";
+import ScriptContextLink from "@/components/script-context-link.vue";
 
 export default {
   name: "LinterResults",
   components: [DictionaryTable, ScriptContextLink],
   props: ["errors", "warnings"],
   beforeCreate() {
     // TODO: I don't think these are circular; why am I running into this?
-    this.$options.components.DictionaryTable =
-      require("./dictionary-table.vue").default;
-    this.$options.components.ScriptContextLink =
-      require("./script-context-link.vue").default;
+    this.$options.components.DictionaryTable = DictionaryTable;
+    this.$options.components.ScriptContextLink = ScriptContextLink;
   },
 };
 </script>

diff --git a/frontend/src/components/recordinfo.vue b/frontend/src/components/recordinfo.vue
@@ -207,7 +207,7 @@ export default {
   computed: {
     appliance_viewer_url() {
       const appliance_viewer_url =
-        process.env.VUE_APP_WHATRECORD_ARCHIVER_URL || "";
+        import.meta.env.WHATRECORD_ARCHIVER_URL || "";
       if (!appliance_viewer_url || !this.record) {
         return null;
       }

diff --git a/frontend/src/components/script-line.vue b/frontend/src/components/script-line.vue
@@ -165,11 +165,8 @@ export default {
   },
   beforeCreate() {
     // TODO: I don't think this is circular; why am I running into this?
-    // V2 ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-    this.$options.components.LinterResults =
-      require("./linter-results.vue").default;
-    this.$options.components.DictionaryTable =
-      require("./dictionary-table.vue").default;
+    this.$options.components.LinterResults = LinterResults;
+    this.$options.components.DictionaryTable = DictionaryTable;
   },
 };
 </script>

diff --git a/frontend/src/components/searchbar.vue b/frontend/src/components/searchbar.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="p-grid option">
-    <div class="p-col-6">
+  <div class="grid option">
+    <div class="col-6">
       <SelectButton
         v-model="search_mode"
         :options="search_mode_options"
         @click="do_search"
       />
     </div>
   </div>
-  <div class="p-grid search">
-    <div class="p-col-10">
+  <div class="grid search">
+    <div class="col-10">
       <form @submit.prevent="do_search" v-on:keyup.enter="do_search">
         <InputText
           type="text"
@@ -19,7 +19,7 @@
         />
       </form>
     </div>
-    <div class="p-col-2">
+    <div class="col-2">
       <Button @click="do_search()" icon="pi pi-search" :loading="searching" />
     </div>
   </div>
@@ -124,9 +124,9 @@ export default {
       }
 
       if ((selected_records?.length ?? 0) > 0) {
-        document.title = `WhatRecord? ${selected_records}`;
+        document.title = `whatrecord? ${selected_records}`;
       } else {
-        document.title = "WhatRecord?";
+        document.title = "whatrecord?";
       }
 
       await this.$store.dispatch("find_record_matches", {
@@ -158,11 +158,11 @@ export default {
 </script>
 
 <style scoped>
-.p-grid .search {
+.grid .search {
   padding: 1em;
 }
 
-.p-grid .option {
+.grid .option {
   padding: 1em;
 }
 

diff --git a/frontend/src/settings.js b/frontend/src/settings.js
@@ -1,5 +1,5 @@
 export const enabled_plugins = (
-  process.env.VUE_APP_WHATRECORD_PLUGINS || "happi twincat_pytmc netconfig"
+  import.meta.env.WHATRECORD_PLUGINS || "happi twincat_pytmc netconfig"
 ).split(" ");
 export const happi_enabled = enabled_plugins.indexOf("happi") >= 0;
 export const netconfig_enabled = enabled_plugins.indexOf("netconfig") >= 0;

diff --git a/frontend/src/store.js b/frontend/src/store.js
@@ -1,8 +1,7 @@
+import axios from "axios";
 import "es6-promise/auto";
 import { createStore } from "vuex";
 
-const axios = require("axios").default;
-
 export const store = createStore({
   state: () => ({
     duplicates: {},

diff --git a/frontend/src/views/duplicates.vue b/frontend/src/views/duplicates.vue
@@ -8,7 +8,7 @@
     :globalFilterFields="['name', 'iocs']"
   >
     <template #header>
-      <div class="p-d-flex p-jc-between">
+      <div class="flex justify-content-between">
         <Button
           type="button"
           icon="pi pi-filter-slash"
@@ -108,7 +108,7 @@ export default {
     }),
   },
   created() {
-    document.title = `WhatRecord? duplicates`;
+    document.title = `whatrecord? duplicates`;
     this.init_filters();
   },
   mounted() {

diff --git a/frontend/src/views/gateway.vue b/frontend/src/views/gateway.vue
@@ -9,7 +9,7 @@
       :globalFilterFields="['pattern', 'full_command', 'error', 'file']"
     >
       <template #header>
-        <div class="p-d-flex p-jc-between">
+        <div class="flex justify-content-between">
           <span class="p-input-icon-left">
             <i class="pi pi-search" />
             <InputText

diff --git a/frontend/src/views/happi.vue b/frontend/src/views/happi.vue
@@ -51,7 +51,7 @@
       :globalFilterFields="global_filter_fields"
     >
       <template #header>
-        <div class="p-d-flex p-jc-between">
+        <div class="flex justify-content-between">
           <MultiSelect
             :modelValue="selected_columns"
             :options="columns"
@@ -270,7 +270,7 @@ export default {
     }),
   },
   created() {
-    document.title = `WhatRecord? happi plugin`;
+    document.title = `whatrecord? happi plugin`;
     this.init_filters();
   },
   mounted() {