Skip to content

feat(ui): Services — list and detail panel with the log tail of the selected service - #109

Merged
lukyrys merged 3 commits into
mainfrom
feat/ui-services
Oct 27, 2026
Merged

lukyrys merged 3 commits into
mainfrom
feat/ui-services

Conversation

@blackenzee

@blackenzee blackenzee commented Oct 26, 2026 •

Copy link
Copy Markdown

Summary

Redesign phase 3, Services page. Stacked on #108.

  • Layout: the card grid becomes a hairline table (service, status as icon plus text, port, and version in Advanced) next to a panel for the selected service. Below 75rem the panel stacks under the list.
  • The panel:
    • Says in words what is going on: running, stopped by choice, or crashed (with a pointer to the log for why).
    • Shows uptime, PID, CPU and RAM for running services.
    • Shows the end of the service log in a graphite box.
    • Offers the matching actions: Restart and Stop, or Start again, plus Edit configuration.
  • Crashed services first: a crashed service is listed and selected first, and its log tail loads without a click. Only crashed services count as problems; a stopped service is a choice. This is the same rule as fix(frontend): review fixes — rollback success, LogViewer leak, problem services, apply time, missing labels #100, and this file supersedes that hunk when both are merged.
  • Filter: the state filter is a tray with counts (All / Running / Crashed). It follows ?filter=, so "Show why" on the Overview lands on the right list.
  • Log box colours are tokens (--wdc-log-bg, --wdc-log-text).

Screenshots

Screenshots: headless Electron at 1280×800 (narrow: 820×800) against a local daemon with three demo sites. The service list and the MySQL log are mocked (Apache, PHP and Mailpit running, MySQL crashed, Redis stopped) because plugins are not installed in the capture environment.

Dark Light
Services dark Services light
Narrow (820 px): the panel stacks Before
Services narrow Services before

Verification

cd src/frontend && npx vue-tsc --noEmit && npx electron-vite build

…elected service

- The card grid becomes a hairline table (service, status as icon +
  text, port, version in Advanced) next to a panel for the selected
  service; the panel stacks under the list below 75rem.
- The panel says in words what is going on (running, stopped by choice,
  crashed and why to look at the log), shows uptime / PID / CPU / RAM
  for running services, the end of the service log in a graphite box,
  and the matching actions: Restart and Stop, or Start again, plus
  Edit configuration.
- A crashed service is listed and selected first and its log tail loads
  without a click. Only crashed services count as problems; a stopped
  service is a choice.
- The state filter is a tray with counts (All / Running / Crashed) and
  follows ?filter=, so "Show why" on the Overview lands on it.
- Log box colours are tokens (--wdc-log-bg / --wdc-log-text).
@coderabbitai

coderabbitai Bot commented Oct 26, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 57 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: f08d9979-f4a3-468d-9fe3-27e5dd714c3b
Commits

Reviewing files that changed from the base of the PR and between 5e38899 and e126e5c.

Files selected for processing: 4
  • src/frontend/src/assets/tokens.css
  • src/frontend/src/components/pages/ServicesPage.vue
  • src/frontend/src/locales/cs.json
  • src/frontend/src/locales/en.json
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@lukyrys
lukyrys changed the base branch from feat/ui-sites to main October 27, 2026 14:58
@lukyrys
lukyrys merged commit 8200317 into main Oct 27, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants