DiAL/src/web/components/TargetGroup.tsx

import type { PrimaryTableCol } from "tdesign-react";

import { memo } from "react";
import { Card, PrimaryTable, Space, Tag } from "tdesign-react";

import type { TargetStatus } from "../../shared/api";

interface TargetGroupProps {
  columns: Array<PrimaryTableCol<TargetStatus>>;
  name: string;
  onTargetClick: (target: TargetStatus) => void;
  targets: TargetStatus[];
}

export const TargetGroup = memo(function TargetGroup({ columns, name, onTargetClick, targets }: TargetGroupProps) {
  const up = targets.filter((t) => t.latestCheck?.matched).length;
  const down = targets.length - up;
  const displayName = name === "default" ? "默认分组" : name;

  return (
    <Card
      actions={
        <Space size={8}>
          <Tag theme="success" title="正常" variant="light">
            {up}
          </Tag>
          <Tag theme="danger" title="异常" variant="light">
            {down}
          </Tag>
        </Space>
      }
      headerBordered
      title={displayName}
    >
      <PrimaryTable
        className="clickable-table"
        columns={columns}
        data={targets}
        defaultSort={[{ descending: true, sortBy: "latestCheck.matched" }]}
        hover
        onRowClick={({ row }) => onTargetClick(row)}
        rowClassName={({ row }) => {
          const target = row;
          return target.latestCheck?.matched === false ? "row-down" : "";
        }}
        rowKey="id"
        size="small"
        stripe
      />
    </Card>
  );
});