All files / src/components/Playbooks/executions ExecutionsTable.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import { Link } from "react-router-dom";
import NoExistingPlaybook from "./NoExistingExecution.js";
import { renderTimestamp } from "../../../utils/common/dateUtils.ts";
import handleToolLogos from "../../../utils/playbook/handleToolLogos.ts";
 
const ExecutionsTable = ({ data }) => {
  return (
    <div className="bg-white">
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell className="!font-bold">Run ID</TableCell>
            <TableCell className="!font-bold">Playbook</TableCell>
            <TableCell className="!font-bold">Tools</TableCell>
            {/* <TableCell className="!font-bold">Status</TableCell> */}
            <TableCell className="!font-bold">Executed At</TableCell>
            <TableCell className="!font-bold">Executed By</TableCell>
            {/* <TableCell className="!font-bold">Action</TableCell> */}
          </TableRow>
        </TableHead>
        <TableBody>
          {data?.map((item, index) => (
            <TableRow
              key={index}
              sx={{
                "&:last-child td, &:last-child th": { border: 0 },
              }}>
              <TableCell component="td" scope="row">
                <Link
                  to={`/playbooks/${item.playbook.id}?executionId=${item.playbook_run_id}`}
                  className="text-violet-500 underline">
                  {item.playbook_run_id}
                </Link>
              </TableCell>
              <TableCell component="td" scope="row">
                <Link
                  to={`/playbooks/${item.playbook.id}`}
                  className="text-violet-500 underline">
                  {item.playbook?.name}
                </Link>
              </TableCell>
              <TableCell component="th" scope="row">
                <div className="flex gap-1 items-center">
                  {handleToolLogos(item.playbook).map((tool) => (
                    <Tooltip key={tool.name} title={tool.name}>
                      <img
                        src={tool.image}
                        alt={tool.name}
                        width={25}
                        height={25}
                      />
                    </Tooltip>
                  ))}
                </div>
              </TableCell>
              {/* <TableCell component="th" scope="row">
                {handleStatus(item.status)}
              </TableCell> */}
              <TableCell component="td" scope="row">
                {item.finished_at ?? item.created_at
                  ? renderTimestamp(item.finished_at ?? item.created_at)
                  : "--"}
              </TableCell>
              <TableCell component="td" scope="row">
                {item.created_by}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {!data?.length ? <NoExistingPlaybook /> : null}
    </div>
  );
};
 
export default ExecutionsTable;