feat: enhance pod status updates with delayed re-fetching in logs component

This commit is contained in:
biersoeckli
2025-12-29 12:53:38 +00:00
parent 7b63b9c051
commit b7bf753c4c
2 changed files with 26 additions and 5 deletions

View File

@@ -5,12 +5,15 @@ import { Card, CardContent } from "@/components/ui/card";
import { deploy, startApp, stopApp } from "./actions";
import { AppExtendedModel } from "@/shared/model/app-extended.model";
import { Toast } from "@/frontend/utils/toast.utils";
import { ExternalLink, Hammer, Pause, Play, Rocket } from "lucide-react";
import { ExternalLink, Hammer, Pause, Play, Rocket, Square } from "lucide-react";
import { AppEventsDialog } from "./app-events-dialog";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { UserSession } from "@/shared/model/sim-session.model";
import { UserGroupUtils } from "@/shared/utils/role.utils";
import PodStatusIndicator from "@/components/custom/pod-status-indicator";
import { usePodsStatus } from "@/frontend/states/zustand.states";
import { useEffect, useState } from "react";
import { DeploymentStatus } from "@/shared/model/deployment-info.model";
export default function AppActionButtons({
app,
@@ -19,16 +22,29 @@ export default function AppActionButtons({
app: AppExtendedModel;
session: UserSession;
}) {
const [deploymentStatus, setDeploaymentStatus] = useState<DeploymentStatus>('UNKNOWN');
const hasWriteAccess = UserGroupUtils.sessionHasWriteAccessForApp(session, app.id);
const { subscribeToStatusChanges, getPodsForApp } = usePodsStatus();
useEffect(() => {
const unsubscribe = subscribeToStatusChanges((changedAppIds) => {
if (changedAppIds.includes(app.id)) {
const pods = getPodsForApp(app.id);
setDeploaymentStatus(pods?.deploymentStatus ?? 'UNKNOWN');
}
});
return () => unsubscribe();
}, [app.id]);
return <Card>
<CardContent className="p-4 ">
<ScrollArea>
<div className="flex gap-4">
<div className="self-center"><AppEventsDialog app={app}><PodStatusIndicator appId={app.id} /></AppEventsDialog></div>
{hasWriteAccess && <><Button onClick={() => Toast.fromAction(() => deploy(app.id))}><Rocket /> Deploy</Button>
<Button onClick={() => Toast.fromAction(() => deploy(app.id, true))} variant="secondary"><Hammer /> Rebuild</Button>
<Button onClick={() => Toast.fromAction(() => startApp(app.id))} variant="secondary"><Play />Start</Button>
<Button onClick={() => Toast.fromAction(() => stopApp(app.id))} variant="secondary"><Pause /> Stop</Button>
{app.appType === 'APP' && app.sourceType === 'GIT' && <Button onClick={() => Toast.fromAction(() => deploy(app.id, true))} variant="secondary"><Hammer /> Rebuild</Button>}
<Button disabled={!['ERROR', 'UNKNOWN', 'SHUTDOWN', 'SHUTTING_DOWN'].includes(deploymentStatus)} onClick={() => Toast.fromAction(() => startApp(app.id))} variant="secondary"><Play />Start</Button>
<Button disabled={!['BUILDING', 'DEPLOYED', 'ERROR', 'UNKNOWN', 'DEPLOYING'].includes(deploymentStatus)} onClick={() => Toast.fromAction(() => stopApp(app.id))} variant="secondary"><Square /> Stop</Button>
</>}
{app.appDomains.length > 0 && <Button onClick={() => {
const domain = app.appDomains[0];

View File

@@ -25,7 +25,7 @@ export default function Logs({
}) {
const [selectedPod, setSelectedPod] = useState<PodsInfoModel | undefined>(undefined);
const [appPods, setAppPods] = useState<PodsInfoModel[] | undefined>(undefined);
const { subscribeToStatusChanges } = usePodsStatus();
const { subscribeToStatusChanges, getPodsForApp } = usePodsStatus();
const updateBuilds = async () => {
try {
@@ -48,6 +48,11 @@ export default function Logs({
if (changedAppIds.includes(app.id)) {
setTimeout(() =>
updateBuilds(), 500); // slight delay to ensure data is updated
// Update also after 10 Seconds --> for examaple when app stopped or redeployed to get final state of old container
setTimeout(() =>
updateBuilds(), 10000);
}
});
return () => unsubscribe();