Upgrade to Vue 3

[nblair2]

Upgrade to Vue 3

Original work by @jacdavi and @causand22 (#236). This PR rebases their Vue 3
migration onto current main, finishes the conversion, and resolves review
feedback. They are the sole authors of the squashed commit — full credit for the
migration is theirs. Supersedes #236.

Description

Updating the front end to use Vue 3 and newer versions of all tools. Quick overview:

• Node version updated to 24
• Removing yarn for build process, using npm
• Vue 2 updated to Vue 3
  • store: Vuex -> Pinia
  • requests: vue resources -> axios
  • build tool: vue-cli -> vite
• buefy updated to v1.0 (vue 3 support)
• Code organization, moved page base components to views/, separated some views into multiple components
• Separate CSS files
• code formatted using prettier
• pages now load dynamically (making initial page loading quicker)
  • Config page has components load dynamically (editor dependencies) to make list load faster.

Related Issue

• Upgrade Node.js from 14 #160
• [UI] Signin/Login Page Not Displayed #122

Type of Change

• New feature
• Documentation update

Checklist

• This PR conforms to the process detailed in the Contributing Guide.
• I have included no proprietary/sensitive information in my code.
• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have tested my code.

Additional Notes

KEY DEVELOPMENT CHANGE
env arguments are different for vite. Instead of VUE_APP_AUTH, it's now VITE_AUTH. .env included with this PR.

Smaller changes:

• modifications to CSS
• Certain dependencies changed for lower page size
• added auto time out functionality (part of settings page)
  • changes made to go backend as well (added settings, one api route)
• various bugfixes

Changes since the original PR (#236)

The original is preserved as closely as possible; the notable deltas:

• Rebased onto current main (~50 commits of drift) and ported the experiments-UI / SoH changes that landed since (scorch button → scorch runs, VM table column-visibility menu, removed the dead SoH "Messages" tab) into the reorganized views/; re-integrated the new idle-timeout setting on top of main's refactored settings package. Node 22 → 24.
• Finished the Vue 3 conversion in the Scorch views and the proxy-auth path (the parts the original flagged as still needing testing): .sync → v-model, this.$set → plain assignment, vue-resource resp.body → axios resp.data, removed slot= / .native, fixed the Pinia proxy-login path, and converted leftover this.errorNotification to useErrorNotification.
• Consolidated the per-view table pagination into a useTable() composable and unified the "remember pagination" key on the Pinia store.
• Build/deploy hardening: fixed the broken Podman docs build, made the JIT entrypoint use npm ci with separate logs and a checked install step, untracked the committed .vite cache, dropped dead dev-deps, declared a previously-phantom string-width dep, and refreshed the lockfile (clears the flagged npm advisories). Anchored the server-side disk resize size validation.

Verified with npm ci && npm run build, npm test, and go build/vet/test. A full UI smoke (sign-in incl. proxy auth, the table views, Scorch/ScorchRuns, the running/stopped experiment screens, and the idle-timeout setting) is recommended before merge.

Known / pre-existing (not regressions from this PR, left for a follow-up): the websocket auth token is still passed as a URL query parameter (the browser WebSocket API can't set request headers), and idle-logout enforcement is primarily client-side (the timer does call the server logout route).

[GhostofGoes]

Can't really comment on the JS changes, but most stuff looks good.

[GhostofGoes]

Should we add a Workflow to build with Podman in Actions to make sure this doesn't break without anyone noticing?

[nblair2]

I'm thinking in the future we can do some improvement to the build CI (goreleaser, anyone?).

1. debloat Dockerfiles
2. use 1 utility for building deb / docker / podman / whatever
3. do all the tagging and releasing for us

For now there is a non-breaking additional podman build.

[GhostofGoes]

There should be a documentation update with the new timeout settings and environment variable changes.

[cmulk]

whoa

I will test a bit on my end

[GhostofGoes]

whoa

I will test a bit on my end

spoiler: it doesn't work

[cmulk]

sooooo, i converted this to draft

[mgaliar]

@GhostofGoes I just tested and the UI looks wonky. Why did you approve and then say it doesn't work?

[GhostofGoes]

@GhostofGoes I just tested and the UI looks wonky. Why did you approve and then say it doesn't work?

My original review was on the code areas I understood, outside of the JS parts, simply looking at the code in GitHub. This PR is big enough that it warranted dedicated testing, and when I setup a deployment with it, the login page was broken.

Perhaps I was a bit hasty on slapping the "Approved" button, but typically the burden is on the submitter to test.