feat(dashboard): enhance UI with navigation improvements and layout #405
Conversation
Xunzhuo
commented
Oct 12, 2025
Xunzhuo
commented
- Flatten navigation structure by removing Configuration parent level
- Move all configuration sections to same level as Playground and Monitoring
- Add clickable brand logo linking to homepage
- Add GitHub and documentation links in sidebar footer
- Move URL configuration controls to bottom of Playground and Monitoring pages
- Convert threshold inputs from decimal (0-1) to percentage (0-100) format
- Limit tools grid to maximum 3 columns per row
- Auto-load Playground page on mount
- Remove embedded mode option from Playground
- Improve navigation consistency across all pages
…ptimizations - Flatten navigation structure by removing Configuration parent level - Move all configuration sections to same level as Playground and Monitoring - Add clickable brand logo linking to homepage - Add GitHub and documentation links in sidebar footer - Move URL configuration controls to bottom of Playground and Monitoring pages - Convert threshold inputs from decimal (0-1) to percentage (0-100) format - Limit tools grid to maximum 3 columns per row - Auto-load Playground page on mount - Remove embedded mode option from Playground - Improve navigation consistency across all pages These changes provide a cleaner, more intuitive user interface with better navigation flow and improved user experience. Signed-off-by: bitliu <[email protected]>
✅ Deploy Preview for vllm-semantic-router ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
👥 vLLM Semantic Team NotificationThe following members have been identified for the changed files in this PR and have been automatically assigned: 📁
|
|
@JaredforReal can you check this out? thanks |
|
i have a recording but it is too big to upload |
There was a problem hiding this comment.
Pull Request Overview
This PR implements comprehensive UI improvements for the dashboard, primarily focusing on flattening the navigation structure and enhancing user experience. The changes remove the hierarchical Configuration parent navigation and move all configuration sections to the same level as other main navigation items.
Key Changes
- Flattened navigation structure by moving all configuration sections to top-level navigation
- Added percentage input type for threshold configurations across the application
- Moved URL configuration controls to the bottom of Playground and Monitoring pages for better UX
- Added auto-loading functionality to the Playground page
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| dashboard/frontend/src/components/Layout.tsx | Implements flattened navigation structure with configuration sections as top-level items and adds clickable brand logo and footer links |
| dashboard/frontend/src/components/Layout.module.css | Adds styles for new navigation structure and footer icon buttons |
| dashboard/frontend/src/pages/ConfigPage.tsx | Removes ConfigNav component and adds percentage formatting for threshold display |
| dashboard/frontend/src/pages/ConfigPage.module.css | Updates layout styles and adds responsive grid for tools with maximum 3 columns |
| dashboard/frontend/src/components/EditModal.tsx | Adds new percentage input type with automatic conversion between 0-1 and 0-100% formats |
| dashboard/frontend/src/pages/PlaygroundPage.tsx | Removes embedded mode option, adds auto-load functionality, and moves controls to bottom |
| dashboard/frontend/src/pages/MonitoringPage.tsx | Moves URL configuration controls from top to bottom of page |
| dashboard/frontend/src/App.tsx | Adds configuration section state management and passes props to Layout component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| useEffect(() => { | ||
| // Default to loading the configured URL on mount | ||
| setCurrentUrl(openWebUIUrl) | ||
| }, []) // Empty dependency array means this runs once on mount |
There was a problem hiding this comment.
The useEffect dependency array should include 'openWebUIUrl' since it's used inside the effect. With an empty dependency array, the effect won't update if openWebUIUrl changes after the initial render.
Copilot uses AI. Check for mistakes.
| const handleApply = () => { | ||
| if (isEmbedMode) { | ||
| setCurrentUrl(`/embedded/openwebui/`) | ||
| } else { | ||
| setCurrentUrl(openWebUIUrl) | ||
| } | ||
| } | ||
|
|
||
| const handleToggleMode = () => { | ||
| setIsEmbedMode(!isEmbedMode) | ||
| setCurrentUrl('') | ||
| setCurrentUrl(openWebUIUrl) | ||
| } |
There was a problem hiding this comment.
The handleApply function is missing error handling logic that was present in the removed embedded mode condition. Consider adding validation or error handling for the URL before setting it.
Copilot uses AI. Check for mistakes.
| onChange={(e) => { | ||
| const val = e.target.value | ||
| handleChange(field.name, val === '' ? '' : parseFloat(val)) | ||
| }} |
There was a problem hiding this comment.
The parseFloat conversion could result in NaN for invalid input, which should be handled. Consider adding validation to ensure the parsed value is a valid number before calling handleChange.
Copilot uses AI. Check for mistakes.
maybe you can upload to youtube or similar? |
3 participants
