All files / src/components/Workflows/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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@mui/material";
import { Link } from "react-router-dom";
import NoExistingPlaybook from "./NoExistingExecution";
import { renderTimestamp } from "../../../utils/common/dateUtils";
import { handleStatus } from "../../../utils/common/handleStatus";
import WorkflowExecutionActions from "./WorkflowExecutionActions";
 
const ExecutionsTable = ({ data }) => {
  return (
    <>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell className="!font-bold">Run ID</TableCell>
            <TableCell className="!font-bold">Workflow</TableCell>
            <TableCell className="!font-bold">Playbooks</TableCell>
            <TableCell className="!font-bold">Started At</TableCell>
            <TableCell className="!font-bold">Status</TableCell>
            <TableCell className="!font-bold">Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data?.map((item, index) => (
            <TableRow
              key={index}
              sx={{
                "&:last-child td, &:last-child th": { border: 0 },
              }}>
              <TableCell component="th" scope="row">
                <Link
                  to={`/workflows/logs/${item.workflow_run_id}`}
                  className="text-violet-500 underline">
                  {item.workflow_run_id}
                </Link>
              </TableCell>
              <TableCell component="td" scope="row">
                <Link
                  to={`/workflows/${item.workflow.id}`}
                  className="text-violet-500 underline">
                  {item.workflow?.name}
                </Link>
              </TableCell>
              <TableCell component="td" scope="row" className="!text-center">
                <div className="flex flex-wrap gap-2">
                  {item.workflow?.playbooks?.length > 0
                    ? item.workflow.playbooks.map((e) => (
                        <div
                          className="p-1 text-xs border rounded bg-gray-50 w-fit transition-all"
                          key={e.id}>
                          <div>{e.name}</div>
                        </div>
                      ))
                    : "--"}
                </div>
              </TableCell>
              <TableCell component="td" scope="row">
                {item.started_at ? renderTimestamp(item.started_at) : "--"}
              </TableCell>
              <TableCell component="td" scope="row">
                {handleStatus(item.status)}
              </TableCell>
              <TableCell component="td" scope="row">
                <WorkflowExecutionActions item={item} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {!data?.length ? <NoExistingPlaybook /> : null}
    </>
  );
};
 
export default ExecutionsTable;