89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
|
import clsx from 'clsx';
|
||
|
|
import React, { useMemo, useState } from 'react';
|
||
|
|
import { useNavigate } from 'react-router';
|
||
|
|
import { AppRouterOutput } from '../../api/trpc';
|
||
|
|
import { MonitorHealthBar } from './MonitorHealthBar';
|
||
|
|
|
||
|
|
type MonitorType = AppRouterOutput['monitor']['all'][number];
|
||
|
|
|
||
|
|
export const MonitorListItem: React.FC<{
|
||
|
|
monitor: MonitorType;
|
||
|
|
workspaceId: string;
|
||
|
|
selectedMonitorId: string | null;
|
||
|
|
setSelectedMonitorId: (monitorId: string) => void;
|
||
|
|
}> = React.memo((props) => {
|
||
|
|
const { monitor, workspaceId, selectedMonitorId, setSelectedMonitorId } =
|
||
|
|
props;
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [beats, setBeats] = useState<
|
||
|
|
({
|
||
|
|
value: number;
|
||
|
|
createdAt: string | Date;
|
||
|
|
} | null)[]
|
||
|
|
>([]);
|
||
|
|
|
||
|
|
const upPercent = useMemo(() => {
|
||
|
|
let up = 0;
|
||
|
|
beats.forEach((b) => {
|
||
|
|
if (!b) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (b.value >= 0) {
|
||
|
|
up++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return parseFloat(((up / beats.length) * 100).toFixed(1));
|
||
|
|
}, [beats]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={monitor.name}
|
||
|
|
className={clsx(
|
||
|
|
'flex rounded-lg py-3 px-4 cursor-pointer mb-1',
|
||
|
|
selectedMonitorId === monitor.id
|
||
|
|
? 'bg-green-500 bg-opacity-20'
|
||
|
|
: 'bg-green-500 bg-opacity-0 hover:bg-opacity-10'
|
||
|
|
)}
|
||
|
|
onClick={() => {
|
||
|
|
navigate(`/monitor/${monitor.id}`);
|
||
|
|
setSelectedMonitorId(monitor.id);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<span
|
||
|
|
className={clsx(
|
||
|
|
'min-w-[62px] p-0.5 rounded-full text-white inline-block text-center',
|
||
|
|
upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{upPercent}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 pl-2">
|
||
|
|
<div className="text-base">{monitor.name}</div>
|
||
|
|
{/* <div>
|
||
|
|
{monitor.tags.map((tag) => (
|
||
|
|
<span
|
||
|
|
className="py-0.5 px-1 rounded-full text-white text-sm"
|
||
|
|
style={{ backgroundColor: tag.color }}
|
||
|
|
>
|
||
|
|
{tag.label}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center">
|
||
|
|
<MonitorHealthBar
|
||
|
|
workspaceId={workspaceId}
|
||
|
|
monitorId={monitor.id}
|
||
|
|
onBeatsItemUpdate={setBeats}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
MonitorListItem.displayName = 'MonitorListItem';
|