mirror of
https://github.com/biersoeckli/QuickStack.git
synced 2026-02-10 13:39:07 -06:00
feat: enhance pod status updates with delayed re-fetching in logs component
This commit is contained in:
@@ -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];
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user