60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
|
interface ReconciliationEvent {
|
||
|
|
id: string;
|
||
|
|
storyId: string;
|
||
|
|
status: string;
|
||
|
|
message: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ReconciliationBannerProps {
|
||
|
|
reconciliationEvents: ReconciliationEvent[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ReconciliationBanner({
|
||
|
|
reconciliationEvents,
|
||
|
|
}: ReconciliationBannerProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
data-testid="reconciliation-banner"
|
||
|
|
style={{
|
||
|
|
padding: "6px 24px",
|
||
|
|
background: "#1c2a1c",
|
||
|
|
borderTop: "1px solid #2d4a2d",
|
||
|
|
fontSize: "0.8em",
|
||
|
|
color: "#7ec87e",
|
||
|
|
maxHeight: "100px",
|
||
|
|
overflowY: "auto",
|
||
|
|
flexShrink: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
fontWeight: 600,
|
||
|
|
marginBottom: "2px",
|
||
|
|
color: "#a0d4a0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Reconciling startup state...
|
||
|
|
</div>
|
||
|
|
{reconciliationEvents.map((evt) => (
|
||
|
|
<div
|
||
|
|
key={evt.id}
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
evt.status === "failed"
|
||
|
|
? "#d07070"
|
||
|
|
: evt.status === "advanced"
|
||
|
|
? "#80c880"
|
||
|
|
: "#666",
|
||
|
|
whiteSpace: "nowrap",
|
||
|
|
overflow: "hidden",
|
||
|
|
textOverflow: "ellipsis",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{evt.storyId ? `[${evt.storyId}] ` : ""}
|
||
|
|
{evt.message}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|