IO-1984 Email Audit Trail

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@apollo/client";
-import { Card, Table } from "antd";
+import { Button, Card, Col, Row, Table, Tag } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
@@ -7,7 +8,7 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 
 export default function JobAuditTrail({ jobId }) {
   const { t } = useTranslation();
-  const { loading, data } = useQuery(QUERY_AUDIT_TRAIL, {
+  const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { jobid: jobId },
     skip: !jobId,
     fetchPolicy: "network-only",
@@ -34,15 +35,102 @@ export default function JobAuditTrail({ jobId }) {
       key: "operation",
     },
   ];
+  const emailColumns = [
+    {
+      title: t("audit.fields.created"),
+      dataIndex: " created_at",
+      key: " created_at",
+      width: "10%",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+      ),
+    },
 
+    {
+      title: t("audit.fields.useremail"),
+      dataIndex: "useremail",
+      key: "useremail",
+      width: "10%",
+    },
+
+    {
+      title: t("audit.fields.to"),
+      dataIndex: "to",
+      key: "to",
+      width: "10%",
+      render: (text, record) =>
+        record.to &&
+        record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>),
+    },
+    {
+      title: t("audit.fields.cc"),
+      dataIndex: "cc",
+      key: "cc",
+      width: "10%",
+      render: (text, record) =>
+        record.cc &&
+        record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>),
+    },
+    {
+      title: t("audit.fields.subject"),
+      dataIndex: "subject",
+      key: "subject",
+      width: "10%",
+    },
+    // {
+    //   title: t("audit.fields.contents"),
+    //   dataIndex: "contents",
+    //   key: "contents",
+    //   width: "10%",
+    //   render: (text, record) => (
+    //     <Button
+    //       onClick={() => {
+    //         var win = window.open(
+    //           "",
+    //           "Title",
+    //           "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
+    //         );
+    //         win.document.body.innerHTML = record.contents;
+    //       }}
+    //     >
+    //       Preview
+    //     </Button>
+    //   ),
+    // },
+  ];
   return (
-    <Card title={t("jobs.labels.audit")}>
-      <Table
-        loading={loading}
-        columns={columns}
-        rowKey="id"
-        dataSource={data ? data.audit_trail : []}
-      />
-    </Card>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Card
+          title={t("jobs.labels.audit")}
+          extra={
+            <Button
+              onClick={() => {
+                refetch();
+              }}
+            >
+              <SyncOutlined />
+            </Button>
+          }
+        >
+          <Table
+            loading={loading}
+            columns={columns}
+            rowKey="id"
+            dataSource={data ? data.audit_trail : []}
+          />
+        </Card>
+      </Col>
+      <Col span={24}>
+        <Card title={t("jobs.labels.emailaudit")}>
+          <Table
+            loading={loading}
+            columns={emailColumns}
+            rowKey="id"
+            dataSource={data ? data.email_audit_trail : []}
+          />
+        </Card>
+      </Col>
+    </Row>
   );
 }