Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 | 1482x 984x 2313x 2313x 3144x 1371x 2964x 3450x 495x 495x 560x 4x 109x 109x 218x 99x 99x 198x 4x 6x 75x 75x 75x 221x 3452x 3452x 3452x 3452x 3452x 3452x 3452x 3452x 3255x 197x 197x 3452x 3452x 3452x 3452x 2x 2x 2x 4060x 344x 3452x 4140x 5186x 2240x 3452x 5692x 10274x 3947x 512x 4476x 10439x 379x 379x 379x 122x 122x 122x 132x 195x 122x 270x 74x 418x 270x 404x 75x 152x 522x 270x 165x 270x 810x 270x 270x 111x 540x 270x 112x 382x 362x 270x 930x 379x 1133x 379x 379x 379x 3449x 3449x 1516x 1137x 489x 489x 116x 116x 116x 2072x 604x 834x 476x 476x 476x 476x 594x 348x 476x 1172x | import { Ban, Check, Circle, CircleDot, X } from "lucide-react";
import { ReactElement, useState } from "react";
import { ReadyState } from "react-use-websocket";
import { Badge } from "@/ahuora-design-system/ui/badge";
import Paginator from "@/ahuora-design-system/ui/paginator";
import { Separator } from "@/ahuora-design-system/ui/separator";
import { Spinner } from "@/ahuora-design-system/ui/spinner";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import {
TaskStatusEnum as StatusEnum,
TaskMetaRead,
TaskRead,
useCoreTasksChildrenListQuery,
useCoreTasksListQuery,
useIdaesCancelSolveCreateMutation,
} from "@/api/apiStore.gen.ts";
import { useNotificationConnection } from "@/hooks/notifications/useNotificationConnection.ts";
import { useProjectId } from "@/hooks/project.ts";
import { cn } from "@/lib/utils";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../../../ahuora-design-system/ui/accordion";
import { TruncateText } from "../../../../ahuora-design-system/ui/truncate-text";
import { NoTabsLeftSideBar } from "./sidebar-structure";
import { getTaskItemAriaLabels } from "./taskItemLabels";
function TimingItem({ name, value }: { name: string; value: object }) {
return (
// if the value is an object, loop through the object and display the key value pairs
// otherwise, display the key value pair
<>
<div className="flex flex-row">
<p className="text-sm text-zinc-500">{name}</p>
<p className="text-sm break-all">{value["duration"]?.toFixed(3)}</p>
</div>
{Object.keys(value["children"]).length > 0 && (
<div className=" flex flex-row">
<div className="min-h-full">
<Separator orientation="vertical" />
</div>
<div>
{Object.entries(value["children"]).map(([name, value], i) => (
<TimingItem key={i} name={name} value={value} />
))}
</div>
</div>
)}
</>
);
}
function TaskStatusBadge({ status }: { status: StatusEnum }) {
const createStatusBadge = (
status: StatusEnum,
icon: ReactElement,
extraCSS: string,
) => {
return (
<Badge
className={cn(
"capitalize flex flex-row gap-2 h-fit items-center mr-1 border-none pointer-events-none",
extraCSS,
)}
>
{status}
{icon}
</Badge>
);
};
switch (status) {
case StatusEnum.Completed:
return createStatusBadge(status, <Check color="white" />, "bg-primary");
case StatusEnum.Failed:
return createStatusBadge(status, <Ban color="white" />, "bg-destructive");
case StatusEnum.Running:
return createStatusBadge(
status,
<Spinner size="small" color="white" />,
"bg-blue-500",
);
case StatusEnum.Pending:
return createStatusBadge(
status,
<CircleDot color="white" />,
"bg-amber-600",
);
case StatusEnum.Cancelling:
return createStatusBadge(status, <Ban color="white" />, "bg-gray-500");
case StatusEnum.Cancelled:
return createStatusBadge(status, <Ban color="white" />, "bg-gray-500");
}
}
const ParentTaskDetails = ({ task }: { task: TaskRead }) => {
const metadata = task.metadata as TaskMetaRead;
const finished_tasks = metadata.failed_tasks + metadata.successful_tasks;
return (
<small className="text-zinc-300">
{finished_tasks}/{metadata.scheduled_tasks} subtasks completed
</small>
);
};
function TaskItemHeader({ task, index }: { task: TaskRead; index: number }) {
const getStartTimeMessage = (task: TaskRead): string => {
const startTime = new Date(task.start_time);
const completed_time = task.completed_time
? new Date(task.completed_time)
: null;
if (startTime === undefined) {
return "Unknown start time";
}
const taskIsDone = [StatusEnum.Completed, StatusEnum.Failed].includes(
task.status as StatusEnum,
);
const secondsSinceStarted =
(new Date().getTime() - startTime.getTime()) / 1000;
const secondsSinceCompleted = completed_time
? (new Date().getTime() - completed_time.getTime()) / 1000
: null;
let timeUnit: string = "";
const secondsDuration = taskIsDone
? (secondsSinceCompleted as number)
: secondsSinceStarted;
if (secondsDuration < 60) {
timeUnit = `${Math.floor(secondsDuration)} seconds ago`;
} else if (secondsDuration < 3600) {
const minutes = Math.floor(secondsDuration / 60);
timeUnit = `${minutes} ${minutes > 1 ? "minutes" : "minute"} ago`;
} else if (secondsDuration < 86400) {
const hours = Math.floor(secondsDuration / 3600);
timeUnit = `${hours} ${hours > 1 ? "hours" : "hour"} ago`;
} else {
const days = Math.floor(secondsDuration / 86400);
timeUnit = `${days} ${days > 1 ? "days" : "day"} ago`;
}
const prefix = taskIsDone ? "Finished" : "Started";
return `${prefix} ${timeUnit}.`;
};
const isParentTask = task.metadata != undefined;
const [requestCancel] = useIdaesCancelSolveCreateMutation();
const handleCancel = async (e) => {
e.preventDefault(); // stop it from propagating to the accordion item
try {
const response = await requestCancel({
cancelTaskRequest: {
task_id: task.id, // Dynamically pass the task ID
},
}).unwrap();
console.log("Task canceled successfully:", response);
} catch (error) {
console.error("Error canceling task:", error);
}
};
return (
<div className="w-full h-full flex flex-row py-2 gap-1 items-center">
<div className="w-full flex flex-col gap-1 text-left">
<h3>
Task {index + 1}: {task.task_type}
</h3>
{isParentTask && <ParentTaskDetails task={task} />}
<span className="text-xs text-zinc-400 italic">
{getStartTimeMessage(task)}
</span>
</div>
<TaskStatusBadge status={task.status} />
{(task.status === StatusEnum.Running ||
task.status === StatusEnum.Pending) && (
<ToolTipCover asChild content="Cancel Task">
<div
onClick={handleCancel}
className="text-xs text-red-500 underline p-1"
aria-label="Cancel Task"
>
<X size={16} />
</div>
</ToolTipCover>
)}
</div>
);
}
function getMaxNumber(data, page) {
const count = data?.count || 0;
const pageSize = data?.page_size || 1;
return count - (page - 1) * pageSize;
}
function ParentTaskItemContent({ task }: { task: TaskRead }) {
const [page, setPage] = useState(1);
const { data: tasksPage, isLoading } = useCoreTasksChildrenListQuery({
id: task.id,
page,
});
const childTasks = tasksPage?.results || [];
return (
<div className="flex flex-col gap-2">
<div className="px-4 flex justify-between">
<p className="text-sm text-zinc-500">Subtasks:</p>
<Paginator page={page} setPage={setPage} data={tasksPage} minimal />
</div>
{isLoading && tasksPage === undefined ? (
<p className="text-sm text-zinc-500">Loading subtasks...</p>
) : childTasks.length > 0 ? (
<TaskList
tasks={childTasks}
max={getMaxNumber(tasksPage, page)}
subtask
/>
) : (
<p className="text-sm text-zinc-500">No subtasks found.</p>
)}
</div>
);
}
function TaskItemContent({ task }: { task: TaskRead }) {
// If the task has metadata, it is a parent task and we need to show the subtasks
if (task.metadata) {
return (
<div>
<ParentTaskItemContent task={task} />
<TaskDebugContent task={task} />
</div>
);
}
return <TaskDebugContent task={task} />;
}
function TaskDebugContent({ task }: { task: TaskRead }) {
return (
<div>
{task.status === StatusEnum.Cancelled && task.debug?.timed_out && (
<>
<p>Timeout:</p>
<div className="py-2 text-sm">
The solve timed out after {task.debug.solve_timeout_seconds}{" "}
seconds.
</div>
</>
)}
<p>Timing:</p>
{task.debug?.timing && (
<div className="py-2 flex-grow flex flex-col break-all">
{/* loop through the timing object and display the key value pairs */}
{Object.entries(task.debug.timing).map(([name, value], i) => (
<TimingItem key={i} name={name} value={value} />
))}
</div>
)}
<p>Log:</p>
<TruncateText length={150} ariaLabel="logpanel-solver-log">
{task.log}
</TruncateText>
{task.error && (
<div className="flex flex-col text-wrap">
<Separator />
<h3 className="mt-2">Debug Information:</h3>
<div>
<p className="text-sm text-zinc-500 text-wrap">Source:</p>
<div className=" text-sm">{task.error.cause}</div>
<p className="text-sm text-zinc-500 text-wrap">Message:</p>
<div className="text-sm text-wrap whitespace-pre-line">
{JSON.stringify(task.error.message)}
</div>
{task.error.traceback && (
<div className="text-wrap break-words">
<p className="text-sm text-zinc-500 text-wrap break-all">
Traceback:
</p>
<TruncateText length={150} ariaLabel="logpanel-traceback">
{task.error.traceback}
</TruncateText>
</div>
)}
</div>
</div>
)}
<Separator />
</div>
);
}
function TaskList({
tasks,
max,
subtask,
}: {
tasks: TaskRead[];
max: number;
subtask?: boolean;
}) {
const taskItemAriaLabels = getTaskItemAriaLabels(tasks, Boolean(subtask));
return (
<Accordion
type="single"
className=""
collapsible
aria-label="task-list"
defaultValue={taskItemAriaLabels[0]}
>
{tasks.map((task, i) => {
const index = max - i - 1;
const taskItemAriaLabel = taskItemAriaLabels[i];
return (
<AccordionItem key={taskItemAriaLabel} value={taskItemAriaLabel}>
<AccordionTrigger
className="py-1"
aria-label={taskItemAriaLabel}
variant="objectPanel"
>
<TaskItemHeader task={task} index={index} />
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-2">
<TaskItemContent task={task} />
</AccordionContent>
</AccordionItem>
);
})}
</Accordion>
);
}
function LiveUpdatesStatus() {
const { readyState } = useNotificationConnection(() => {});
const [text, colour] =
readyState == ReadyState.OPEN
? ["Receiving live updates", "fill-green-500"]
: ["Live updates unavailable", "fill-orange-500"];
return (
<div className="flex flex-row items-center gap-2 m-4">
<Circle className={cn("stroke-0 icon-small", colour)} />
<p>{text}</p>
</div>
);
}
export default function TasksPanel() {
const [page, setPage] = useState(1);
const flowsheetId = useProjectId();
const { data: tasksPage } = useCoreTasksListQuery({
page: page,
flowsheet: flowsheetId,
});
return (
<NoTabsLeftSideBar
title="Task Logs"
noBodyMargin={true}
body={
<div>
<div className="px-4 flex justify-between">
<LiveUpdatesStatus />
<Paginator page={page} setPage={setPage} data={tasksPage} minimal />
</div>
{tasksPage === undefined || tasksPage?.count === 0 ? (
<p className="p-4">No tasks have been run yet.</p>
) : (
<TaskList
tasks={tasksPage?.results || []}
max={getMaxNumber(tasksPage, page)}
/>
)}
</div>
}
/>
);
}
|