[PR #746] [MERGED] Enhanced Server Stats Dashboard with Performance Optimizations #773

New Issue

GiteaMirror · 2025-10-31T15:21:26-05:00

GiteaMirror commented

2025-10-31 15:21:26 -05:00

📋 Pull Request Information

Original PR: https://github.com/moghtech/komodo/pull/746
Author: @MP-Tool
Created: 8/19/2025
Status: ✅ Merged
Merged: 8/20/2025
Merged by: @mbecker20

Base: 1.19.1 ← Head: ux/mini-stats

📝 Commits (6)

53425ae Improve the layout of server mini stats in the dashboard.
6fade59 feat: optimize dashboard server stats with lazy loading and smart server availability checks
0e168ab fix: show disabled servers with overlay instead of hiding component
1f9cf23 fix: show button height
97fbf73 feat: add enhance card animations
b0a280d cleanup

📊 Changes

2 files changed (+65 additions, -31 deletions)

View changed files

📝 frontend/src/components/resources/server/stats-mini.tsx (+53 -23)
📝 frontend/src/pages/home/dashboard.tsx (+12 -8)

📄 Description

Enhanced Server Stats Dashboard with Performance Optimizations

Building upon PR #729:

This PR extends the excellent foundation laid by the initial server stats layout improvements in PR #729, adding essential performance optimizations, UX consistency improvements, and animations.

Problems Addressed:

🚨 Performance Issues:

Server stats were always loaded, even when toggle was hidden, causing unnecessary API calls
API calls to offline/disabled servers resulted in 500 errors flooding the console
Missing lazy loading can led to poor performance

🎨 UX Inconsistencies:

Disabled servers disappeared completely instead of showing consistent card layout
Toggle button height didn't match other dashboard buttons (export toml)
No visual feedback for different server states (Ok, NotOk, Disabled)

Solutions Implemented:

⚡ Performance Optimizations:

Smart API calls: Only fetch stats from available servers (state === Ok)
Lazy loading: Stats only load when toggle is enabled
Memoization: Expensive calculations cached with useMemo
Increased polling interval: 15s instead of default to reduce server load

🎯 UX Consistency:

Three-state visual system:
- ✅ Ok servers: Show live stats
- ⚠️ NotOk servers: Show "Unreachable" overlay
- 🚫 Disabled servers: Show "Disabled" overlay
Consistent layout: All server cards maintain same dimensions regardless of state
Button alignment: Toggle button matches export button height

✨ Animations:

1000ms linear transitions for gentle expand/collapse effects
Coordinated animations: Height, opacity, and padding transition together
Overflow handling: Clean animations without content jumping

Technical Details:

Modified Files:

stats-mini.tsx: Added enabled prop, server availability checks, consistent overlays
dashboard.tsx: Toggle implementation, conditional rendering and animations

Impact:

🚀 Better Performance: No more unnecessary API calls or console errors
🎨 Consistent UX: All server states handled gracefully with appropriate visual feedback
⚡ Smooth Interactions: Gentle animations improve user experience
🧹 Clean Code: Clear separation of concerns and maintainable structure

Testing:

✅ All server states render correctly
✅ No console errors from offline servers
✅ Toggle animations
✅ Performance improved with lazy loading
✅ Design consistency maintained

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/moghtech/komodo/pull/746 **Author:** [@MP-Tool](https://github.com/MP-Tool) **Created:** 8/19/2025 **Status:** ✅ Merged **Merged:** 8/20/2025 **Merged by:** [@mbecker20](https://github.com/mbecker20) **Base:** `1.19.1` ← **Head:** `ux/mini-stats` --- ### 📝 Commits (6) - [`53425ae`](https://github.com/moghtech/komodo/commit/53425aef0766e0c18d11e082c48c4215d3b14a65) Improve the layout of server mini stats in the dashboard. - [`6fade59`](https://github.com/moghtech/komodo/commit/6fade5957b6d67d451e03c46ff58e2bb953fde51) feat: optimize dashboard server stats with lazy loading and smart server availability checks - [`0e168ab`](https://github.com/moghtech/komodo/commit/0e168abf0189fbb5443ccc4c9bf758564af9bd06) fix: show disabled servers with overlay instead of hiding component - [`1f9cf23`](https://github.com/moghtech/komodo/commit/1f9cf2360052e638d5cc5a8ec8d9d55c6aaed366) fix: show button height - [`97fbf73`](https://github.com/moghtech/komodo/commit/97fbf739e325d6a9982fe4fc765d38b4efcbac80) feat: add enhance card animations - [`b0a280d`](https://github.com/moghtech/komodo/commit/b0a280d5fb5840711895b53e2d0add15bf0c447c) cleanup ### 📊 Changes **2 files changed** (+65 additions, -31 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/resources/server/stats-mini.tsx` (+53 -23) 📝 `frontend/src/pages/home/dashboard.tsx` (+12 -8) </details> ### 📄 Description # Enhanced Server Stats Dashboard with Performance Optimizations ## Building upon PR #729: This PR extends the excellent foundation laid by the initial server stats layout improvements in [PR #729](https://github.com/MP-Tool/komodo/commit/53425aef0766e0c18d11e082c48c4215d3b14a65), adding essential performance optimizations, UX consistency improvements, and animations. ## Problems Addressed: ### 🚨 **Performance Issues:** - Server stats were always loaded, even when toggle was hidden, causing unnecessary API calls - API calls to offline/disabled servers resulted in 500 errors flooding the console - Missing lazy loading can led to poor performance ### 🎨 **UX Inconsistencies:** - Disabled servers disappeared completely instead of showing consistent card layout - Toggle button height didn't match other dashboard buttons (export toml) - No visual feedback for different server states (Ok, NotOk, Disabled) ## Solutions Implemented: <img width="2900" height="1116" alt="light-mode" src="https://github.com/user-attachments/assets/0169f1b9-c482-4b59-947c-e11a03845957" /> <img width="2900" height="1116" alt="dark-mode" src="https://github.com/user-attachments/assets/81efd9df-cc7e-494e-ae2e-890e075a0d10" /> ### ⚡ **Performance Optimizations:** - **Smart API calls**: Only fetch stats from available servers (state === `Ok`) - **Lazy loading**: Stats only load when toggle is enabled - **Memoization**: Expensive calculations cached with `useMemo` - **Increased polling interval**: 15s instead of default to reduce server load ### 🎯 **UX Consistency:** - **Three-state visual system**: - ✅ `Ok` servers: Show live stats - ⚠️ `NotOk` servers: Show "Unreachable" overlay - 🚫 `Disabled` servers: Show "Disabled" overlay - **Consistent layout**: All server cards maintain same dimensions regardless of state - **Button alignment**: Toggle button matches export button height ### ✨ **Animations:** - **1000ms linear transitions** for gentle expand/collapse effects - **Coordinated animations**: Height, opacity, and padding transition together - **Overflow handling**: Clean animations without content jumping ## Technical Details: ### Modified Files: - **`stats-mini.tsx`**: Added `enabled` prop, server availability checks, consistent overlays - **`dashboard.tsx`**: Toggle implementation, conditional rendering and animations ## Impact: - 🚀 **Better Performance**: No more unnecessary API calls or console errors - 🎨 **Consistent UX**: All server states handled gracefully with appropriate visual feedback - ⚡ **Smooth Interactions**: Gentle animations improve user experience - 🧹 **Clean Code**: Clear separation of concerns and maintainable structure ## Testing: - ✅ All server states render correctly - ✅ No console errors from offline servers - ✅ Toggle animations - ✅ Performance improved with lazy loading - ✅ Design consistency maintained --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2025-10-31 15:21:26 -05:00

GiteaMirror closed this issue

2025-10-31 15:21:26 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/komodo#773