Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix update status rendering

This commit is contained in:
Marc Brooks 2025-10-15 04:51:13 +00:00
parent b74f779daa
commit fe277517c1
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/src/routes/devices.$id.settings.general.update.tsx
View File

@ -189,8 +189,6 @@ function UpdatingDeviceState({
otaState: UpdateState["otaState"]; otaState: UpdateState["otaState"];
onMinimizeUpgradeDialog: () => void; onMinimizeUpgradeDialog: () => void;
}) { }) {
const formatProgress = (progress: number) => `${Math.round(progress)}%`;
const calculateOverallProgress = (type: "system" | "app") => { const calculateOverallProgress = (type: "system" | "app") => {
const downloadProgress = Math.round((otaState[`${type}DownloadProgress`] || 0) * 100); const downloadProgress = Math.round((otaState[`${type}DownloadProgress`] || 0) * 100);
const updateProgress = Math.round((otaState[`${type}UpdateProgress`] || 0) * 100); const updateProgress = Math.round((otaState[`${type}UpdateProgress`] || 0) * 100);
@ -258,6 +256,11 @@ function UpdatingDeviceState({
); );
}; };
const systemOverallProgress = calculateOverallProgress("system");
const systemUpdateStatus = getUpdateStatus("system");
const appOverallProgress = calculateOverallProgress("app");
const appUpdateStatus = getUpdateStatus("app");
return ( return (
<div className="flex flex-col items-start justify-start space-y-4 text-left"> <div className="flex flex-col items-start justify-start space-y-4 text-left">
<div className="w-full max-w-sm space-y-4"> <div className="w-full max-w-sm space-y-4">
@ -293,7 +296,7 @@ function UpdatingDeviceState({
<p className="text-sm font-semibold text-black dark:text-white"> <p className="text-sm font-semibold text-black dark:text-white">
{m.general_update_system_update_title()} {m.general_update_system_update_title()}
</p> </p>
{calculateOverallProgress("system") < 100 ? ( {systemOverallProgress < 100 ? (
<LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" /> <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
) : ( ) : (
<CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" /> <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@ -302,16 +305,14 @@ function UpdatingDeviceState({
<div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600"> <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
<div <div
className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500" className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
style={{ style={{ width: `${systemOverallProgress}%` }}
width: formatProgress(calculateOverallProgress("system")),
}}
></div> ></div>
</div> </div>
<div className="flex justify-between text-sm text-slate-600 dark:text-slate-300"> <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
<span>{getUpdateStatus("system")}</span>{" "} <span>{systemUpdateStatus}</span>{" "}
{calculateOverallProgress("system") < 100 ? ( {systemOverallProgress < 100
<span>{formatProgress(calculateOverallProgress("system"))}</span> ? (<span>{`${systemOverallProgress}%`}</span>)
) : null} : null}
</div> </div>
</div> </div>
)} )}
@ -325,7 +326,7 @@ function UpdatingDeviceState({
<p className="text-sm font-semibold text-black dark:text-white"> <p className="text-sm font-semibold text-black dark:text-white">
{m.general_update_app_update_title()} {m.general_update_app_update_title()}
</p> </p>
{calculateOverallProgress("app") < 100 ? ( {appOverallProgress < 100 ? (
<LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" /> <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
) : ( ) : (
<CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" /> <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@ -334,16 +335,14 @@ function UpdatingDeviceState({
<div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600"> <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
<div <div
className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500" className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
style={{ style={{ width: `${appOverallProgress}%` }}
width: formatProgress(calculateOverallProgress("app")),
}}
></div> ></div>
</div> </div>
<div className="flex justify-between text-sm text-slate-600 dark:text-slate-300"> <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
<span>{getUpdateStatus("app")}</span>{" "} <span>{appUpdateStatus}</span>{" "}
{calculateOverallProgress("system") < 100 ? ( {appOverallProgress < 100
<span>{formatProgress(calculateOverallProgress("app"))}</span> ? (<span>{`${appOverallProgress}%`}</span>)
) : null} : null}
</div> </div>
</div> </div>
</> </>
@ -411,13 +410,13 @@ function UpdateAvailableState({
<p className="mb-4 text-sm text-slate-600 dark:text-slate-300"> <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
{versionInfo?.systemUpdateAvailable ? ( {versionInfo?.systemUpdateAvailable ? (
<> <>
<span className="font-semibold">{m.general_update_system_type()}</span>:&nbsp;{versionInfo?.remote?.systemVersion} <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.remote?.systemVersion}
<br /> <br />
</> </>
) : null} ) : null}
{versionInfo?.appUpdateAvailable ? ( {versionInfo?.appUpdateAvailable ? (
<> <>
<span className="font-semibold">{m.general_update_application_type()}</span>:&nbsp;{versionInfo?.remote?.appVersion} <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.remote?.appVersion}
</> </>
) : null} ) : null}
</p> </p>