mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 21:47:20 +00:00
120 lines
2.7 KiB
TypeScript
120 lines
2.7 KiB
TypeScript
|
|
import React from "react";
|
||
|
|
import { Column } from "react-table";
|
||
|
|
|
||
|
|
import StatusIndicatorWithIcon from "components/StatusIndicatorWithIcon";
|
||
|
|
import {
|
||
|
|
INumberCellProps,
|
||
|
|
IStringCellProps,
|
||
|
|
} from "interfaces/datatable_config";
|
||
|
|
import { IScriptBatchSummaryResponse } from "services/entities/scripts";
|
||
|
|
import Button from "components/buttons/Button";
|
||
|
|
|
||
|
|
interface IHostCountCellProps {
|
||
|
|
status: string;
|
||
|
|
count: number;
|
||
|
|
onClickCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const HostCountCell = ({
|
||
|
|
status,
|
||
|
|
count,
|
||
|
|
onClickCancel,
|
||
|
|
}: IHostCountCellProps) => {
|
||
|
|
const baseClass = "script-batch-status-host-count-cell";
|
||
|
|
return (
|
||
|
|
<div className={baseClass}>
|
||
|
|
<div>{count}</div>
|
||
|
|
{status === "pending" && (
|
||
|
|
<Button
|
||
|
|
className={`${baseClass}__cancel-button`}
|
||
|
|
onClick={onClickCancel}
|
||
|
|
variant="text-icon"
|
||
|
|
>
|
||
|
|
<span>Cancel</span>
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
type IStatus = "ran" | "pending" | "errored";
|
||
|
|
|
||
|
|
interface IRowData {
|
||
|
|
status: string;
|
||
|
|
hosts: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const STATUS_ORDER = ["ran", "pending", "errored"];
|
||
|
|
|
||
|
|
export interface IStatusCellValue {
|
||
|
|
displayName: string;
|
||
|
|
statusName: IStatus;
|
||
|
|
value: IStatus;
|
||
|
|
}
|
||
|
|
|
||
|
|
const STATUS_DISPLAY_OPTIONS = {
|
||
|
|
ran: {
|
||
|
|
displayName: "Ran",
|
||
|
|
indicatorStatus: "success",
|
||
|
|
},
|
||
|
|
pending: {
|
||
|
|
displayName: "Pending",
|
||
|
|
indicatorStatus: "pendingPartial",
|
||
|
|
},
|
||
|
|
errored: {
|
||
|
|
displayName: "Error",
|
||
|
|
indicatorStatus: "error",
|
||
|
|
},
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
type IColumnConfig = Column<IRowData>;
|
||
|
|
type IStatusCellProps = IStringCellProps<IRowData>;
|
||
|
|
type IHostCellProps = INumberCellProps<IRowData>;
|
||
|
|
|
||
|
|
export const generateTableConfig = (
|
||
|
|
onClickCancel: () => void
|
||
|
|
): IColumnConfig[] => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
Header: "Status",
|
||
|
|
disableSortBy: true,
|
||
|
|
accessor: "status",
|
||
|
|
Cell: ({ cell: { value } }: IStatusCellProps) => {
|
||
|
|
const statusOption =
|
||
|
|
STATUS_DISPLAY_OPTIONS[value as keyof typeof STATUS_DISPLAY_OPTIONS];
|
||
|
|
return (
|
||
|
|
<StatusIndicatorWithIcon
|
||
|
|
status={statusOption.indicatorStatus}
|
||
|
|
value={statusOption.displayName}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Header: "Hosts",
|
||
|
|
accessor: "hosts",
|
||
|
|
disableSortBy: true,
|
||
|
|
Cell: ({ cell }: IHostCellProps) => {
|
||
|
|
return (
|
||
|
|
<HostCountCell
|
||
|
|
count={cell.value}
|
||
|
|
status={cell.row.original.status}
|
||
|
|
onClickCancel={onClickCancel}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
export const generateTableData = (
|
||
|
|
statusData: IScriptBatchSummaryResponse
|
||
|
|
): IRowData[] => {
|
||
|
|
const tableData = STATUS_ORDER.map((status) => ({
|
||
|
|
status,
|
||
|
|
hosts: statusData[status as keyof IScriptBatchSummaryResponse] as number,
|
||
|
|
}));
|
||
|
|
|
||
|
|
return tableData;
|
||
|
|
};
|