33 lines
911 B
TypeScript
33 lines
911 B
TypeScript
import { Tooltip } from "tdesign-react";
|
||
|
||
import type { RecentSample } from "../../shared/api";
|
||
|
||
import { formatRelativeTime } from "../utils/time";
|
||
|
||
interface StatusBarProps {
|
||
maxSlots?: number;
|
||
samples: RecentSample[];
|
||
}
|
||
|
||
export function StatusBar({ maxSlots = 30, samples }: StatusBarProps) {
|
||
const blocks = [];
|
||
for (let i = 0; i < maxSlots; i++) {
|
||
const sample = samples[i];
|
||
if (sample) {
|
||
blocks.push(
|
||
<Tooltip
|
||
content={`${formatRelativeTime(sample.timestamp)}，${sample.up ? "正常" : "异常"}`}
|
||
key={i}
|
||
placement="top"
|
||
>
|
||
<span className={`status-bar-block ${sample.up ? "status-bar-block--up" : "status-bar-block--down"}`} />
|
||
</Tooltip>,
|
||
);
|
||
} else {
|
||
blocks.push(<span className="status-bar-block status-bar-block--empty" key={i} />);
|
||
}
|
||
}
|
||
|
||
return <div className="status-bar">{blocks}</div>;
|
||
}
|