[PR #72] [MERGED] feat: implement real-time update progress with proper theming #194

New issue

Closed

opened 2026-02-26 12:40:34 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:34 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/72
Author: @michelroegl-brunner
Created: 10/8/2025
Status: ✅ Merged
Merged: 10/8/2025
Merged by: @michelroegl-brunner

Base: main ← Head: fix/update.sh

📝 Commits (10+)

ea5d3e0 fix(update): properly detach update script to survive service shutdown
18baeea fix(update): prevent infinite loop in script relocation
3848095 fix(update): use systemd-run and double-fork for complete process isolation
24bab67 Update update.sh
cb59ef3 Update update.sh
b3c1949 Update update.sh
0f4cfe6 Update update.sh
7b1608f Update update.sh
74007f5 Update update.sh
c81b030 Update update.sh

📊 Changes

6 files changed (+425 additions, -378 deletions)

View changed files

📝 .env.example (+1 -0)
📝 src/app/_components/VersionDisplay.tsx (+147 -73)
📝 src/env.js (+4 -0)
📝 src/server/api/routers/version.ts (+82 -5)
📝 src/styles/globals.css (+1 -1)
📝 update.sh (+190 -299)

📄 Description

🚀 Real-time Update Progress Implementation

This PR implements a comprehensive real-time update progress system that keeps the modal open until the server restarts after an update.

✨ Features

Real-time Log Streaming:

Polling-based approach (1-second intervals) instead of WebSocket subscriptions
ANSI color code stripping for clean log display
Terminal-style output with proper dark mode support
Auto-scrolling log display

Smart Completion Detection:

Detects specific completion indicators in logs:
- Service enabled and started successfully
- Service is running
- Update completed successfully
Only triggers reconnection when update is actually complete

Conservative Fallback Logic:

Waits at least 3 minutes before considering fallback reconnection
Requires 60 seconds of log silence before assuming server restart
Prevents premature modal closing during dependency installation

Improved Theming:

Fixed CSS specificity issues with !important for bg-card class
Updated all colors to use CSS variables for consistency
Proper dark mode support throughout the modal
Terminal-style log output with dark background and green text

🔧 Technical Changes

Backend (version.ts):

Added getUpdateLogs query with completion detection
Stripped ANSI codes from log output
Enhanced completion indicators

Frontend (VersionDisplay.tsx):

Replaced subscription with polling-based log fetching
Added smart reconnection logic with timing controls
Updated UI to use CSS variables
Improved modal theming and layout

Styling (globals.css):

Added !important to bg-card class for proper theming
Ensured CSS variables take precedence over Tailwind defaults

🎯 User Experience

Modal stays open during entire update process
Real-time progress visibility
No premature "server restarting" messages
Automatic page reload when server comes back online
Consistent theming with application design system

🧪 Testing

Tested with full update cycle including dependency installation
Verified proper completion detection
Confirmed dark mode theming works correctly
Validated reconnection logic timing

_{🔄 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/community-scripts/ProxmoxVE-Local/pull/72 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/8/2025 **Status:** ✅ Merged **Merged:** 10/8/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `fix/update.sh` --- ### 📝 Commits (10+) - [`ea5d3e0`](https://github.com/community-scripts/ProxmoxVE-Local/commit/ea5d3e067a78f7ce9c9a1db5de974ab05087b29c) fix(update): properly detach update script to survive service shutdown - [`18baeea`](https://github.com/community-scripts/ProxmoxVE-Local/commit/18baeea438d0bfb7ab0bc55d188553182c233cd6) fix(update): prevent infinite loop in script relocation - [`3848095`](https://github.com/community-scripts/ProxmoxVE-Local/commit/3848095c9281da1aefa4ff28b6f97023f69aa8ff) fix(update): use systemd-run and double-fork for complete process isolation - [`24bab67`](https://github.com/community-scripts/ProxmoxVE-Local/commit/24bab671930d917c5c2b2ae74d07df639a348465) Update update.sh - [`cb59ef3`](https://github.com/community-scripts/ProxmoxVE-Local/commit/cb59ef3603a17d83529cc15530aa9ee05a36e8e5) Update update.sh - [`b3c1949`](https://github.com/community-scripts/ProxmoxVE-Local/commit/b3c1949c63dab11e7e749ca4d9c39960b5976f11) Update update.sh - [`0f4cfe6`](https://github.com/community-scripts/ProxmoxVE-Local/commit/0f4cfe618bfbb9894a5c9de80b39db454a5d5270) Update update.sh - [`7b1608f`](https://github.com/community-scripts/ProxmoxVE-Local/commit/7b1608f2209569819a615c6c248ba7fba8dd162e) Update update.sh - [`74007f5`](https://github.com/community-scripts/ProxmoxVE-Local/commit/74007f54836b826c318422c31d4c18f3aadcd385) Update update.sh - [`c81b030`](https://github.com/community-scripts/ProxmoxVE-Local/commit/c81b0307f035f74b6124d8e25652e83b67a47c55) Update update.sh ### 📊 Changes **6 files changed** (+425 additions, -378 deletions) <details> <summary>View changed files</summary> 📝 `.env.example` (+1 -0) 📝 `src/app/_components/VersionDisplay.tsx` (+147 -73) 📝 `src/env.js` (+4 -0) 📝 `src/server/api/routers/version.ts` (+82 -5) 📝 `src/styles/globals.css` (+1 -1) 📝 `update.sh` (+190 -299) </details> ### 📄 Description ## 🚀 Real-time Update Progress Implementation This PR implements a comprehensive real-time update progress system that keeps the modal open until the server restarts after an update. ### ✨ Features **Real-time Log Streaming:** - Polling-based approach (1-second intervals) instead of WebSocket subscriptions - ANSI color code stripping for clean log display - Terminal-style output with proper dark mode support - Auto-scrolling log display **Smart Completion Detection:** - Detects specific completion indicators in logs: - `Service enabled and started successfully` - `Service is running` - `Update completed successfully` - Only triggers reconnection when update is actually complete **Conservative Fallback Logic:** - Waits at least 3 minutes before considering fallback reconnection - Requires 60 seconds of log silence before assuming server restart - Prevents premature modal closing during dependency installation **Improved Theming:** - Fixed CSS specificity issues with `!important` for `bg-card` class - Updated all colors to use CSS variables for consistency - Proper dark mode support throughout the modal - Terminal-style log output with dark background and green text ### 🔧 Technical Changes **Backend (`version.ts`):** - Added `getUpdateLogs` query with completion detection - Stripped ANSI codes from log output - Enhanced completion indicators **Frontend (`VersionDisplay.tsx`):** - Replaced subscription with polling-based log fetching - Added smart reconnection logic with timing controls - Updated UI to use CSS variables - Improved modal theming and layout **Styling (`globals.css`):** - Added `!important` to `bg-card` class for proper theming - Ensured CSS variables take precedence over Tailwind defaults ### 🎯 User Experience - Modal stays open during entire update process - Real-time progress visibility - No premature "server restarting" messages - Automatic page reload when server comes back online - Consistent theming with application design system ### 🧪 Testing - Tested with full update cycle including dependency installation - Verified proper completion detection - Confirmed dark mode theming works correctly - Validated reconnection logic timing --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>