All files / src/components/Workflows/triggers AlertsTable.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  CircularProgress,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@mui/material";
import NoExistingTrigger from "./NoExistingTrigger.tsx";
import { renderTimestamp } from "../../../utils/common/dateUtils.ts";
import SeeMoreText from "../../Playbooks/SeeMoreText";
import { useGetSearchTriggersQuery } from "../../../store/features/triggers/api/searchTriggerApi.ts";
import { useEffect } from "react";
 
const AlertsTable = () => {
  const {
    data: searchTriggerResult,
    isFetching,
    refetch,
  } = useGetSearchTriggersQuery();
  const data = searchTriggerResult?.alerts;
 
  useEffect(() => {
    refetch();
  }, [refetch]);
 
  Iif (isFetching) {
    return <CircularProgress size={20} style={{ marginLeft: "10px" }} />;
  }
 
  return (
    <div className="flex flex-col gap-4">
      <p className="font-bold mb-2">Alerts matching the search criteria</p>
      <Table stickyHeader className="border">
        <TableHead>
          <TableRow>
            <TableCell>Title</TableCell>
            <TableCell>Timestamp</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data?.map((item, index) => (
            <TableRow
              key={index}
              className="bg-gray-50
              "
              sx={{
                "&:last-child td, &:last-child th": { border: 0 },
              }}>
              <TableCell component="td" scope="row">
                <SeeMoreText
                  title={""}
                  text={item.alert_title || item.alert_text || "N/A"}
                />
              </TableCell>
              <TableCell component="td" scope="row">
                {renderTimestamp(item.alert_timestamp)}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {!data?.length ? <NoExistingTrigger /> : null}
    </div>
  );
};
 
export default AlertsTable;