Repository navigation
[task] migrate dashboard carousel to Swiper React - #4427
butterfly-520-boy wants to merge 10 commits into
Conversation
Duansg
left a comment
Duansg
left a comment
There was a problem hiding this comment.
Thanks for the migration. Could you also update the distribution’s license files for Swiper?
The existing jQuery/Slick dependencies are listed in both material/licenses/frontend/LICENSE and material/licenses/LICENSE, with their license texts under material/licenses/frontend/.
Please add Swiper’s version and MIT license entry to those lists, and include its copyright notice and full license text in material/licenses/frontend/LICENSE-swiper.txt. If jQuery, slick-carousel, and ngx-slick-carousel are no longer bundled, please remove their obsolete entries and license files as well.
This will keep the license information aligned with what HertzBeat distributes.
Duansg
left a comment
Duansg
left a comment
There was a problem hiding this comment.
Hi, thanks for providing the additional information. However, I tested this PR and found that it didn't produce the expected results. This may be related to the Swiper initialization logic. Have you tested it locally to see if it works?
You might want to check this out: https://swiperjs.com/element#parameters-as-props |
|
Yes, the issue does exist. However, when I previously tested it locally, I didn't stay on the page for long, and the card displayed normally within a short period. The current problem is that over time, the card gradually expands from its normal width to span the entire row, and the status label on the right also disappears. I will identify the root cause and fix this bug. Thank you for pointing it out. |
|
Just like this. |
@butterfly-520-boy You might want to try adding monitoring for multiple categories, since I've noticed that they aren't displayed in a carousel. |
Okay, I’ll follow this approach to fix the issue |
|
Thanks for the pointers! I've fixed the Swiper initialization and the card-width issue after statistics refreshes. I tested the carousel locally with six monitoring categories, and all 15 related tests pass. The screenshots below show the updated carousel. |
|
Here's the screenshot. |
|
pls check ci |
|
The Angular app this PR builds on (angular.json, app.module.ts, the dashboard component) was replaced by a React + Vite frontend in the 2.0 merge. Can't be merged — if we still want the carousel swap it needs to be rebuilt on the new dashboard. |
butterfly-520-boy
changed the title
|
Thanks @butterfly-520-boy for the contribution, the React migration, and the work on tests and license compliance. The direction for HertzBeat 2.0 has changed: we will not retain the monitor-category card carousel on the dashboard, so this feature is no longer planned. We are closing this PR for that reason, rather than asking you to spend more time updating it. For future contributions, please start from the latest |
What's changed?
Show monitored categories in a responsive Swiper React carousel on the React dashboard. Read the existing
/api/summaryendpoint and aggregate each category's total, available, unavailable and paused counts.apps: nullresponse as an empty list; malformed data and failed requests still show an error instead of invented counts.Closes #1344.
Validation
Checklist
Add or update API
No backend endpoint or API signature changes. The carousel consumes the existing summary API.
AI assistance: Codex assisted implementation and tests.
Human validation: the author tested the current local revision through the IDEA backend and production frontend preview.
Risk notes: full backend/release E2E tests were not run for this frontend change. The separate development-mode monitor import issue is tracked in #4452; manual import and carousel validation used the production preview.