feat(settings): split the admin page into Status and Background jobs

[karlitschek]

Problem

The Monitoring admin page had grown to fourteen sections on a single scroll, and the background job area is the bulkiest part of it: three tables (latest failures, latest runs, slowest jobs), any of which can be long. It sat in the middle, between Network and Active users, so the common task of "is cron still alive, and did anything fail?" meant scrolling past the CPU and memory charts every time.

Change

A navigation at the top of the page switches between two pages:

• Status — everything that describes the machine: system, resources, CPU/memory charts, disk, network, active users, shares, temperature, PHP/OPcache, database, external monitoring
• Background jobs — the background jobs section, moved over unchanged

The page body is split so that SettingsAdmin.vue is left as a shell that fetches the data and picks a view:

file	role
views/SettingsAdmin.vue	shell: polling, view state, renders the navigation
views/StatusView.vue	the former page body, minus background jobs
views/BackgroundJobsView.vue	wraps BackgroundJobsSection and its skeleton
components/SettingsNavigation.vue	the switch itself

StatusView.vue is a straight move of the existing markup — the only edits are the props it now takes (staticData, liveData, tick) and the removal of the background jobs block.

Two decisions worth flagging for review:

• v-show, not v-if. The CPU and memory charts accumulate their history inside the component (60 points, one per 2s poll). With v-if, a glance at the job tables would reset both graphs and the admin would come back to empty charts. v-show keeps them mounted and filling. This is why both views have a single element root — v-show is a no-op on a fragment root.

• NcRadioGroup + NcRadioGroupButton rather than buttons with click handlers, so the switch renders real radio inputs with a group label (Monitoring pages, visually hidden) and is keyboard- and screen-reader-navigable for free.

• The switch has to clear the navigation-collapse button. Core floats #app-navigation-toggle over the top-inline-start corner of the content area. Core's own settings pages clear it vertically — their sections start at the content top but their 30px padding puts the content below the toggle's bottom edge — so the switch does the same, reserving var(--default-clickable-area) above itself and lining its buttons up with the section content below. Dodging sideways instead does not work: the toggle is 7px inside the content edge and scales with the clickable-area setting (34px in compact mode, 44px otherwise), so an inline offset that looks right at one setting overlaps at the other.

Polling is unchanged and still lives in the shell, so the background jobs page stays as fresh as it was and switching pages costs no extra requests.

Verification

• npm run lint clean
• npm run build clean; js/ and css/ rebuilt and committed as the repo does
• Type-checked the changed files with vue-tsc. The one error reported inside StatusView.vue is the pre-existing fpm shape mismatch between useStaticData.ts and PhpSection.vue — it travelled with the markup and is untouched by this PR (git show master:src/views/SettingsAdmin.vue | grep fpm shows the same binding). Worth a separate fix.
• Behaviour verified with a throwaway vitest + @vue/test-utils mount (not committed, to keep this PR from dragging in a test-infra decision): the switch renders two radios with the correct checked state, drives v-model in both directions, and the shell shows Status first and swaps which view is visible on selection.

That last point is a bit unsatisfying — this repo has no frontend test setup at all, so there is nowhere for those tests to live. Adding vitest would be a good follow-up if you want it, and I'm happy to open that separately.

Verified on a running instance

Measured and clicked through with Playwright against a live NC 35 admin settings page (1400x900, compact clickable-area of 34px):

• collapse toggle occupies x 316-350, y 52-86; the first switch button sits at x 339-426, y 100-134 — 14px of vertical clearance, and the rectangles no longer intersect
• the buttons line up with the section content below them (both start at x 339)
• selecting Background jobs hides .status-view and shows .background-jobs-view, and selecting Status puts it back

Screenshots

Not included — I don't have a browser against a running instance here. Happy to add them if that blocks review.

[karlitschek]

@susnux @artonge @Altahrim @AndyScherzinger @jancborchardt

[karlitschek]

[karlitschek]

the idea is to add a third page with the DB Doctor checks later

[kesselb]

Nice

[kesselb]

/backport to stable35 please