All files / src/components/Workflows WorkflowTable.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
86
87
88
89
90
91
92
93
94
95
96
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@mui/material";
import { Link } from "react-router-dom";
import NoExistingPlaybook from "./NoExistingWorkflow.js";
import { renderTimestamp } from "../../utils/common/dateUtils.ts";
import { handleStatus } from "../../utils/common/handleStatus.tsx";
import WorkflowActions from "./WorkflowActions.tsx";
 
const WorkflowTable = ({ data, refreshTable }) => {
  return (
    <>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell className="!font-bold">Name</TableCell>
            <TableCell className="!font-bold">Playbooks</TableCell>
            <TableCell className="!font-bold">Schedule</TableCell>
            <TableCell className="!font-bold">Last Execution Time</TableCell>
            <TableCell className="!font-bold">Last Execution Status</TableCell>
            <TableCell className="!font-bold">Created by</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/${item.id}`}
                  className="text-violet-500 underline">
                  {item.name}
                </Link>
              </TableCell>
              <TableCell component="td" scope="row" className="!text-center">
                {item.playbooks?.length > 0
                  ? item.playbooks.map((e) => (
                      <div
                        className="p-1 text-xs border rounded bg-gray-50 cursor-pointer w-fit transition-all"
                        key={e.id}>
                        <p>{e.name}</p>
                      </div>
                    ))
                  : "--"}
              </TableCell>
              <TableCell component="td" scope="row">
                <div className="flex flex-col text-xs gap-1">
                  <span className="text-sm font-bold">
                    {item.schedule?.type}
                  </span>
                  {item.schedule?.periodic?.cron_rule && (
                    <span className="border bg-gray-50 w-fit p-1 font-bold">
                      {item.schedule?.periodic?.cron_rule?.rule}
                    </span>
                  )}
                  {item.schedule?.periodic?.duration_in_seconds && (
                    <span className="border bg-gray-50 w-fit p-1">
                      For {item.schedule?.periodic?.duration_in_seconds} seconds
                    </span>
                  )}
                </div>
              </TableCell>
              <TableCell component="td" scope="row">
                {item.last_execution_time
                  ? renderTimestamp(item?.last_execution_time)
                  : "--"}
              </TableCell>
              <TableCell component="td" scope="row">
                {item.last_execution_status
                  ? handleStatus(item.last_execution_status)
                  : "--"}
              </TableCell>
              <TableCell component="td" scope="row">
                {item.created_by}
              </TableCell>
              <TableCell component="td" scope="row">
                <WorkflowActions item={item} refreshTable={refreshTable} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {!data?.length ? <NoExistingPlaybook /> : null}
    </>
  );
};
 
export default WorkflowTable;