-
-
Notifications
You must be signed in to change notification settings - Fork 630
feat(ui): New status page UI #1198
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This pull request introduces a comprehensive redesign of the Gatus status page UI, modernizing the interface with a new design system and enhanced user experience. The changes transform the traditional status monitoring interface into a contemporary dashboard with improved usability.
- Implements a modern design system using shadcn/ui components and Tailwind CSS design tokens
- Replaces the existing Vue.js composition with new component architecture and improved state management
- Adds advanced search and filtering capabilities for better endpoint management
Reviewed Changes
Copilot reviewed 39 out of 41 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
web/static/js/app.js |
Complete rewrite with modern Vue 3 composition API and new UI components |
web/static/index.html |
Added theme initialization script to prevent flash of unstyled content |
web/static/css/app.css |
Updated with shadcn/ui design tokens and modern styling system |
web/app/vue.config.js |
Added build configuration note for Node.js compatibility |
web/app/tailwind.config.js |
Enhanced with shadcn/ui theme system and design tokens |
web/app/src/views/Home.vue |
Reimplemented dashboard with cards, search, filtering, and pagination |
web/app/src/views/Details.vue |
Modernized endpoint details page with improved data visualization |
web/app/src/lib/utils.js |
Added utility functions for CSS class merging |
web/app/src/index.css |
Integrated shadcn/ui CSS custom properties and base styles |
web/app/src/components/ui/select/index.js |
New select component export |
web/app/src/components/ui/select/Select.vue |
Custom accessible select component implementation |
web/app/src/components/ui/input/index.js |
New input component export |
web/app/src/components/ui/input/Input.vue |
Styled input component with design system integration |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Temporary image built: Workflow: https://github.com/TwiN/gatus/actions/runs/16946884760 |
This PR contains the following updates: | Package | Update | Change | |---|---|---| | [ghcr.io/twin/gatus](https://github.com/TwiN/gatus) | minor | `v5.22.0` -> `v5.23.1` | --- ### Release Notes <details> <summary>TwiN/gatus (ghcr.io/twin/gatus)</summary> ### [`v5.23.1`](https://github.com/TwiN/gatus/releases/tag/v5.23.1) [Compare Source](TwiN/gatus@v5.23.0...v5.23.1) #### What's Changed - fix(ui): Update endpoints in-place instead of reloading every time by [@​TwiN](https://github.com/TwiN) in TwiN/gatus#1209 - docs: improve `extra-labels` description by [@​salim-b](https://github.com/salim-b) in TwiN/gatus#1208 **Full Changelog**: TwiN/gatus@v5.23.0...v5.23.1 ### [`v5.23.0`](https://github.com/TwiN/gatus/releases/tag/v5.23.0) [Compare Source](TwiN/gatus@v5.22.0...v5.23.0) This is a big one, and for the occasion, I'll highlight the two big changes: - **New UI**: That's right, a brand new modern UI. This was long overdue. I hope you like it. - **Announcements**: Want to update your users/customers about an outage? You can, now.  Thoughts on the UI & announcements? Just like any healthy relationship, communicate with me on [TwiN/gatus#1206](TwiN/gatus#1206) #### What's Changed - feat(ui): New status page UI by [@​TwiN](https://github.com/TwiN) in TwiN/gatus#1198 - feat: Implement announcements by [@​TwiN](https://github.com/TwiN) in TwiN/gatus#1204 - feat(alerting): Support extra labels in email alerts by [@​appleboy](https://github.com/appleboy) in TwiN/gatus#1191 - fix(ui): Replace filter value "nothing" by "none" by [@​TwiN](https://github.com/TwiN) in TwiN/gatus#1202 - docs: tweak `minimum-reminder-interval` description by [@​salim-b](https://github.com/salim-b) in TwiN/gatus#1194 **Full Changelog**: TwiN/gatus@v5.22.0...v5.23.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4zNS4wIiwidXBkYXRlZEluVmVyIjoiNDEuMS4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJpbWFnZSJdfQ==--> Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/1241 Co-authored-by: Renovate Bot <[email protected]> Co-committed-by: Renovate Bot <[email protected]>
Summary
Fixes #1199
Checklist
README.md, if applicable.