From e9720ff4dbbaff044ad00c4f75d4e1ca50cba28e Mon Sep 17 00:00:00 2001 From: jacdavi <86626873+jacdavi@users.noreply.github.com> Date: Mon, 30 Jun 2025 21:28:57 +0000 Subject: [PATCH 01/67] feat!: initial vue 3 commit --- src/js/.browserslistrc | 3 - src/js/.eslintrc.js | 20 - src/js/.gitignore | 1 + src/js/Makefile | 2 +- src/js/README.md | 158 +- src/js/babel.config.js | 6 - src/js/index.html | 20 + src/js/jsconfig.json | 9 + src/js/package-lock.json | 4695 ++++++ src/js/package.json | 77 +- src/js/postcss.config.js | 5 - src/js/public/index.html | 17 - src/js/routes.json | 3 - src/js/src/App.vue | 361 +- src/js/src/assets/_general.scss | 113 + src/js/src/assets/_variables.scss | 58 + src/js/src/assets/{ => imgs}/centos.svg | 0 src/js/src/assets/{ => imgs}/delayed.png | Bin src/js/src/assets/{ => imgs}/external.png | Bin src/js/src/assets/{ => imgs}/firewall.svg | 0 src/js/src/assets/{ => imgs}/linux.svg | 0 .../src/assets/{ => imgs}/not-available.png | Bin src/js/src/assets/{ => imgs}/not-running.png | Bin src/js/src/assets/imgs/phenix-banner.png | Bin 0 -> 40278 bytes src/js/src/assets/imgs/phenix.png | Bin 0 -> 73722 bytes src/js/src/assets/{ => imgs}/printer.svg | 0 src/js/src/assets/{ => imgs}/redeploying.png | Bin src/js/src/assets/{ => imgs}/redhat.svg | 0 src/js/src/assets/{ => imgs}/router.svg | 0 src/js/src/assets/{ => imgs}/vlan.svg | 0 src/js/src/assets/{ => imgs}/windows.svg | 0 src/js/src/assets/main.scss | 8 + .../components/{Footer.vue => AppFooter.vue} | 23 +- src/js/src/components/AppHeader.vue | 164 + src/js/src/components/Configs.vue | 1233 -- src/js/src/components/ConfigsPage.vue | 1228 ++ src/js/src/components/Disabled.vue | 24 - src/js/src/components/Disks.vue | 532 - src/js/src/components/Experiment.vue | 71 - src/js/src/components/Experiments.vue | 835 -- src/js/src/components/Header.vue | 108 - src/js/src/components/Hosts.vue | 243 +- src/js/src/components/Log.vue | 66 +- src/js/src/components/MenuLink.vue | 46 - src/js/src/components/MiniConsole.vue | 52 - src/js/src/components/MiniTerminal.vue | 95 + src/js/src/components/RunningExperiment.vue | 3436 ----- src/js/src/components/Scorch.vue | 639 - src/js/src/components/ScorchRuns.vue | 394 - src/js/src/components/Settings.vue | 140 - src/js/src/components/SignIn.vue | 248 - src/js/src/components/StateOfHealth.vue | 1826 ++- src/js/src/components/StoppedExperiment.vue | 1478 -- src/js/src/components/Terminal.vue | 96 - src/js/src/components/TestComponent.vue | 3 + src/js/src/components/Users.vue | 717 +- src/js/src/components/VMLabelsModal.vue | 304 +- src/js/src/components/VMMountBrowserModal.vue | 365 +- src/js/src/components/VMtiles.vue | 224 - src/js/src/components/configs/AceEditor.vue | 114 + .../src/components/configs/ConfigsEditor.vue | 670 + src/js/src/components/configs/ConfigsList.vue | 539 + src/js/src/components/pipeline/Pipeline.vue | 335 +- .../pipeline/PipelineHighlightNode.vue | 2 +- .../src/components/pipeline/PipelineLine.vue | 89 +- .../src/components/pipeline/PipelineNode.vue | 318 +- .../components/pipeline/PipelineNodeEnd.vue | 38 +- .../components/pipeline/PipelineNodeStart.vue | 47 +- src/js/src/components/pipeline/line.js | 16 +- src/js/src/components/pipeline/service.js | 7 +- .../src/components/{ => scorch}/ScorchKey.vue | 64 +- .../src/components/{ => scorch}/ScorchRun.vue | 75 +- src/js/src/components/utils.js | 27 - src/js/src/event-bus.js | 4 - src/js/src/main.js | 171 +- src/js/src/mixins/formattingMixin.js | 70 + src/js/src/rbac.js | 62 - src/js/src/rbac.test.js | 90 - src/js/src/router.js | 154 - src/js/src/router/index.js | 226 + src/js/src/store.js | 102 - src/js/src/stores/phenix.js | 176 + src/js/src/utils/axios.js | 34 + src/js/src/utils/errorNotif.js | 34 + src/js/src/utils/eventBus.js | 8 + src/js/src/utils/rbac.js | 61 + src/js/src/utils/tagCount.js | 5 + src/js/src/utils/timeout.js | 94 + src/js/src/utils/websocket.ts | 112 + src/js/src/views/ConfigsView.vue | 48 + src/js/src/views/ConsoleView.vue | 63 + src/js/src/views/Disks.vue | 700 + src/js/src/views/ExperimentsView.vue | 988 ++ .../src/{components => views}/ProxySignUp.vue | 0 src/js/src/views/ScorchRunsView.vue | 442 + src/js/src/views/ScorchView.vue | 705 + src/js/src/views/Settings.vue | 175 + src/js/src/views/SignIn.vue | 264 + src/js/src/{components => views}/Tunneler.vue | 2 +- src/js/src/views/experiment/BaseView.vue | 63 + .../experiment/RunningExperimentView.vue | 4092 +++++ .../experiment/StoppedExperimentView.vue | 1793 +++ src/js/src/views/experiment/VMtilesView.vue | 253 + src/js/vite.config.js | 56 + src/js/vue.config.js | 27 - src/js/yarn.lock | 12442 ---------------- 106 files changed, 20960 insertions(+), 25043 deletions(-) delete mode 100644 src/js/.browserslistrc delete mode 100644 src/js/.eslintrc.js delete mode 100644 src/js/babel.config.js create mode 100644 src/js/index.html create mode 100644 src/js/jsconfig.json create mode 100644 src/js/package-lock.json delete mode 100644 src/js/postcss.config.js delete mode 100644 src/js/public/index.html delete mode 100644 src/js/routes.json create mode 100644 src/js/src/assets/_general.scss create mode 100644 src/js/src/assets/_variables.scss rename src/js/src/assets/{ => imgs}/centos.svg (100%) rename src/js/src/assets/{ => imgs}/delayed.png (100%) rename src/js/src/assets/{ => imgs}/external.png (100%) rename src/js/src/assets/{ => imgs}/firewall.svg (100%) rename src/js/src/assets/{ => imgs}/linux.svg (100%) rename src/js/src/assets/{ => imgs}/not-available.png (100%) rename src/js/src/assets/{ => imgs}/not-running.png (100%) create mode 100644 src/js/src/assets/imgs/phenix-banner.png create mode 100644 src/js/src/assets/imgs/phenix.png rename src/js/src/assets/{ => imgs}/printer.svg (100%) rename src/js/src/assets/{ => imgs}/redeploying.png (100%) rename src/js/src/assets/{ => imgs}/redhat.svg (100%) rename src/js/src/assets/{ => imgs}/router.svg (100%) rename src/js/src/assets/{ => imgs}/vlan.svg (100%) rename src/js/src/assets/{ => imgs}/windows.svg (100%) create mode 100644 src/js/src/assets/main.scss rename src/js/src/components/{Footer.vue => AppFooter.vue} (64%) create mode 100644 src/js/src/components/AppHeader.vue delete mode 100644 src/js/src/components/Configs.vue create mode 100644 src/js/src/components/ConfigsPage.vue delete mode 100644 src/js/src/components/Disabled.vue delete mode 100644 src/js/src/components/Disks.vue delete mode 100644 src/js/src/components/Experiment.vue delete mode 100644 src/js/src/components/Experiments.vue delete mode 100644 src/js/src/components/Header.vue delete mode 100644 src/js/src/components/MenuLink.vue delete mode 100644 src/js/src/components/MiniConsole.vue create mode 100644 src/js/src/components/MiniTerminal.vue delete mode 100644 src/js/src/components/RunningExperiment.vue delete mode 100644 src/js/src/components/Scorch.vue delete mode 100644 src/js/src/components/ScorchRuns.vue delete mode 100644 src/js/src/components/Settings.vue delete mode 100644 src/js/src/components/SignIn.vue delete mode 100644 src/js/src/components/StoppedExperiment.vue delete mode 100644 src/js/src/components/Terminal.vue create mode 100644 src/js/src/components/TestComponent.vue delete mode 100644 src/js/src/components/VMtiles.vue create mode 100644 src/js/src/components/configs/AceEditor.vue create mode 100644 src/js/src/components/configs/ConfigsEditor.vue create mode 100644 src/js/src/components/configs/ConfigsList.vue rename src/js/src/components/{ => scorch}/ScorchKey.vue (72%) rename src/js/src/components/{ => scorch}/ScorchRun.vue (55%) delete mode 100644 src/js/src/components/utils.js delete mode 100644 src/js/src/event-bus.js create mode 100644 src/js/src/mixins/formattingMixin.js delete mode 100644 src/js/src/rbac.js delete mode 100644 src/js/src/rbac.test.js delete mode 100644 src/js/src/router.js create mode 100644 src/js/src/router/index.js delete mode 100644 src/js/src/store.js create mode 100644 src/js/src/stores/phenix.js create mode 100644 src/js/src/utils/axios.js create mode 100644 src/js/src/utils/errorNotif.js create mode 100644 src/js/src/utils/eventBus.js create mode 100644 src/js/src/utils/rbac.js create mode 100644 src/js/src/utils/tagCount.js create mode 100644 src/js/src/utils/timeout.js create mode 100644 src/js/src/utils/websocket.ts create mode 100644 src/js/src/views/ConfigsView.vue create mode 100644 src/js/src/views/ConsoleView.vue create mode 100644 src/js/src/views/Disks.vue create mode 100644 src/js/src/views/ExperimentsView.vue rename src/js/src/{components => views}/ProxySignUp.vue (100%) create mode 100644 src/js/src/views/ScorchRunsView.vue create mode 100644 src/js/src/views/ScorchView.vue create mode 100644 src/js/src/views/Settings.vue create mode 100644 src/js/src/views/SignIn.vue rename src/js/src/{components => views}/Tunneler.vue (99%) create mode 100644 src/js/src/views/experiment/BaseView.vue create mode 100644 src/js/src/views/experiment/RunningExperimentView.vue create mode 100644 src/js/src/views/experiment/StoppedExperimentView.vue create mode 100644 src/js/src/views/experiment/VMtilesView.vue create mode 100644 src/js/vite.config.js delete mode 100644 src/js/vue.config.js delete mode 100644 src/js/yarn.lock diff --git a/src/js/.browserslistrc b/src/js/.browserslistrc deleted file mode 100644 index 9dee6464..00000000 --- a/src/js/.browserslistrc +++ /dev/null @@ -1,3 +0,0 @@ -> 1% -last 2 versions -not ie <= 8 diff --git a/src/js/.eslintrc.js b/src/js/.eslintrc.js deleted file mode 100644 index eb9d5db7..00000000 --- a/src/js/.eslintrc.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - root: true, - env: { - node: true - }, - 'extends': [ - 'plugin:vue/essential', - 'eslint:recommended' - ], - rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', - "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }] - }, - parserOptions: { - parser: 'babel-eslint' - } - - -} diff --git a/src/js/.gitignore b/src/js/.gitignore index 9869eef5..a9251b7a 100644 --- a/src/js/.gitignore +++ b/src/js/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules /dist +/analysis # local env files .env.local diff --git a/src/js/Makefile b/src/js/Makefile index 6a636884..f2626170 100644 --- a/src/js/Makefile +++ b/src/js/Makefile @@ -9,4 +9,4 @@ clean: $(RM) -r node_modules dist/index.html: $(SOURCES) - (yarn install ; yarn build) + (npm install ; npm run build) diff --git a/src/js/README.md b/src/js/README.md index 55f51d23..c18f4e49 100644 --- a/src/js/README.md +++ b/src/js/README.md @@ -1,56 +1,114 @@ -# phenixweb +# Phenix VUE 3 -Vue.js single-page application leveraging Vuex, vue-router, and -vue-resource. +## Installation -## Project Setup +Requires node 22. Recommended to install node using [nvm](https://github.com/nvm-sh/nvm). -### Install Runtimes - -If using [asdf-vm](https://github.com/asdf-vm) to manage runtimes, run -the following to install the correct version of Node. - -``` -asdf install -``` - -### Install Project's Node dependencies - -``` -npm install ``` - -### Run Development Servers - -In one terminal, compile and run Vue.js development server (with -hot-reload): - -``` -npm run serve +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash +nvm install --lts +nvm use --lts +cd /project-dir +npm run dev ``` -We no longer use the json-server. - -In another terminal, run mock API server with the following command: - -``` -npx json-server --watch db.json -``` - -On macOS, this worked: - -``` -json-server --watch db.json -``` - -### Compile and Minify for Production - -``` -npm run build -``` - -### Lint and Fix Files - -``` -npm run lint -``` +## MAJOR DIFFERENCES + +- vue 2 -> vue3, obviously +- store vuex -> pinia + - instead of this.$store.commit.. we import a function usePhenixStore, call it inside the method we want to use the store, and use the store from there. See Hosts line 76 and 116 for an example of getting +- http requests vue resource -> axios + - vue resource is vue 2 only. seems like standard is to use axios. minor changes to syntax. similar to pinia we'll import an axiosInstance in each component that does requests and use the requests with that. error response is also separated out into a catch method -- see Hosts.vue line 94 for an example + - Data is now at `response.data` already in json +- Websockets: now rolling our own rather than a library + - In a view, import and call `addWsHandler(handler)` and `removeWsHandler(handler)` in place of `this.$options.sockets.onmessage`. The handler should accept json objects +- Build tool vue-cli -> vite + - just a vue 3 thing. builds the dev server pretty fast +- yarn -> npm + - this one doesn't really matter at all; we can always pivot to yarn +- filters -> mixins + - vue 2 has filters where you can apply a method on a piece of data. like + - {{ experiment_name | lowercase }} where experiment_name is a string variable and lowercase is the filter to make it all lowercase. Now I just have a mixin class (a set of global variables you can import into a component) that has all the formatting that used to be done with the filters. See Hosts.vue lines 78, 82, and 40 +- rbac now has to be imported `import { roleAllowed } from '@/utils/rbac';` +- errorNotification now has to be imported +- EventBus doesn't exist + - any component that uses EventBus now has to have the line at top of script: + `import EventBus from '@/utils/eventBus.js'`. + - have to import a different package to get the same functionality (before reassessing what it does.. vue3 docs says eventbus is bad practice) +- moved css from inside app.vue to assets/main.scss +- Attempting to structure it so that different pages are in views/ and components used in those pages are in components/. This one might have to wait until the core functionality is working +- VUE_APP_AUTH is now VITE_AUTH + - view router/index.js line 49 for example +- Some buefy components now require you to set `v-model` + - `b-select`: `value` -> `v-model` + - `b-modal`: `active.sync` -> `v-model` +- Empty `