diff --git a/docker/.env b/docker/.env index e7e3a00a..602a7fb0 100644 --- 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 index 924cab0d..92eb67f8 100644 --- 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 deleted file mode 100755 index dace22f8..00000000 --- a/docker/support/run_frontend.sh +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh - -yarn install -yarn serve --port "${FRONTEND_PORT}" diff --git a/docker/support/start_example.sh b/docker/support/start_example.sh index 36f83344..1c93380f 100644 --- 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 new file mode 100755 index 00000000..6100ae34 --- /dev/null +++ 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 new file mode 100644 index 00000000..2fbcbd26 --- /dev/null +++ b/frontend/.eslintrc @@ -0,0 +1,4 @@ +env: { + node: true, + es2022: true, +} diff --git a/frontend/babel.config.js b/frontend/babel.config.js deleted file mode 100644 index 162a3ea9..00000000 --- a/frontend/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ["@vue/cli-plugin-babel/preset"], -}; diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 00000000..d94451b3 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,13 @@ + + + + + + + whatrecord + + +
+ + + diff --git a/frontend/package.json b/frontend/package.json index 92d7d959..052305d2 100644 --- 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 deleted file mode 100644 index 3e5a1396..00000000 --- a/frontend/public/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - -
- - - diff --git a/frontend/src/components/asyn-port.vue b/frontend/src/components/asyn-port.vue index 1a1a5eb1..b4d5f8a7 100644 --- a/frontend/src/components/asyn-port.vue +++ b/frontend/src/components/asyn-port.vue @@ -16,7 +16,7 @@ diff --git a/frontend/src/components/linter-results.vue b/frontend/src/components/linter-results.vue index 24815614..a1e5e058 100644 --- a/frontend/src/components/linter-results.vue +++ b/frontend/src/components/linter-results.vue @@ -12,8 +12,8 @@ diff --git a/frontend/src/components/recordinfo.vue b/frontend/src/components/recordinfo.vue index 6682a2a1..cb808357 100644 --- 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 index feb7365c..93db367e 100644 --- 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; }, }; diff --git a/frontend/src/components/searchbar.vue b/frontend/src/components/searchbar.vue index c2c2749e..2a5406ff 100644 --- a/frontend/src/components/searchbar.vue +++ b/frontend/src/components/searchbar.vue @@ -1,6 +1,6 @@