JobProgress

Le suivi d'une opération asynchrone : un déploiement, un import, un export.

Statut, étape, progression, essais, erreur et relance : chaque projet recomposait ce motif avec les mêmes briques, et chacun oubliait une chose différente — la durée figée pendant l'exécution, le bouton d'annulation resté visible après l'échec. Le composant tranche ce qui s'affiche selon le statut ; l'appelant ne fournit que l'état de l'opération.

Pensé pour un tiroir de 28 à 40rem : dense, sur une colonne.

Installation

sia-ui add job-progress

Ou par le paquet, sans rien copier :

import { JobProgress } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
* status	"queued" | "running" | "succeeded" | "failed" | "cancelled"	—
alertProps	Partial<Omit<AlertProps, "children">>	—	Les props de l'encadré d'erreur. Sans children, qui est error.
attempts	{ current: number; max?: number; }	—	L'essai en cours, et le nombre maximal quand il est connu.
cancelButtonProps	Partial<Omit<ButtonProps, "onClick">>	—	Les props du bouton « Annuler ». Sans onClick, qui est onCancel.
currentStep	number	0	L'index de l'étape en cours dans steps.
durationProps	Partial<Omit<DurationDisplayProps, "milliseconds">>	—	Les props de la durée. Sans milliseconds, calculée des deux instants.
error	ReactNode	—	Le message d'échec, affiché quand status vaut failed.
finishedAt	JobInstant	—	Absent pendant running : la durée avance chaque seconde.
labels	Partial<JobProgressLabels>	—
logs	ReactNode	—	Un emplacement libre sous le reste : un journal, une sortie de commande.
onCancel	() => void	—	Affiche « Annuler » tant que l'opération est en file ou en cours.
onRetry	() => void	—	Affiche « Relancer » quand l'opération a échoué.
progress	number	—	L'avancement, de 0 à 100. Absent pendant queued/running : indéterminé.
progressProps	Partial<Omit<ProgressProps, "value">>	—	Les props de la barre. Sans value, tirée de progress.
retryButtonProps	Partial<Omit<ButtonProps, "onClick">>	—	Les props du bouton « Relancer ». Sans onClick, qui est onRetry.
startedAt	JobInstant	—
statusBadgeProps	Partial<Omit<StatusBadgeProps, "value" | "tones" | "labels">>	—	Les props de la pastille de statut. Sans value, tones ni labels, tirés du statut.
statusTones	Partial<Record<JobStatus, ComponentTone>>	—	Le ton de chaque statut, pour la pastille et la barre.
step	ReactNode	—	L'étape en cours : « Construction de l'image ».
steps	StepItem[]	—	Les étapes de l'opération, affichées en liste ; currentStep la met en avant.
stepsProps	Partial<Omit<StepsProps, "items" | "current">>	—	Les props de la liste d'étapes. Sans items ni current.
title	ReactNode	—

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.