From 8ce594ba526977102ec587c4bd2f16d8561d8c95 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 13 Aug 2024 16:28:03 +0300
Subject: [PATCH] feat: exporting events as csv (#7860)

Adding csv library that also makes nested properties into columns.
---
 frontend/package.json                         |  5 +++-
 .../events/EventLog/EventActions.tsx          | 19 ++++++++++++++
 frontend/yarn.lock                            | 25 +++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index cabb1acd94..63eb33cd5a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -157,5 +157,8 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.3.1",
+  "dependencies": {
+    "json-2-csv": "^5.5.5"
+  }
 }
diff --git a/frontend/src/component/events/EventLog/EventActions.tsx b/frontend/src/component/events/EventLog/EventActions.tsx
index cf232c3d7c..2b51d9e6ee 100644
--- a/frontend/src/component/events/EventLog/EventActions.tsx
+++ b/frontend/src/component/events/EventLog/EventActions.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import FileDownload from '@mui/icons-material/FileDownload';
 import type { EventSchema } from '../../../openapi';
+import { json2csv } from 'json-2-csv';
 
 const StyledActions = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -55,6 +56,24 @@ export const EventActions: FC<IEventActions> = ({ events }) => {
     };
 
     const exportCsv = () => {
+        const csvContent = json2csv(events);
+        const blob = new Blob([csvContent], {
+            type: 'text/csv;charset=utf-8;',
+        });
+        const url = URL.createObjectURL(blob);
+
+        const currentDate = new Date().toISOString().split('T')[0];
+        const fileName = `data_${currentDate}.csv`;
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.style.display = 'none';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+
+        URL.revokeObjectURL(url);
         setAnchorEl(null);
     };
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 439f3b732c..197a15e109 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4365,6 +4365,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deeks@npm:3.1.0":
+  version: 3.1.0
+  resolution: "deeks@npm:3.1.0"
+  checksum: 10c0/3173ca28466cf31d550248c034c5466d93c5aecb8ee8ca547a2c9f471e62af4ebed7456c3310503be901d982867071b4411030a6b724528739895aee1dc2b482
+  languageName: node
+  linkType: hard
+
 "deep-diff@npm:1.0.2, deep-diff@npm:^1.0.2":
   version: 1.0.2
   resolution: "deep-diff@npm:1.0.2"
@@ -4480,6 +4487,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"doc-path@npm:4.1.1":
+  version: 4.1.1
+  resolution: "doc-path@npm:4.1.1"
+  checksum: 10c0/5a908c4d0c8431fa60349cad1d5f0775cf9825d4d85e6bd7f55925c01d6278be8dd04f6858b8f8fdc8ea992a63545595ea77a2282551ff95538608f382b46f8a
+  languageName: node
+  linkType: hard
+
 "dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
@@ -6398,6 +6412,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-2-csv@npm:^5.5.5":
+  version: 5.5.5
+  resolution: "json-2-csv@npm:5.5.5"
+  dependencies:
+    deeks: "npm:3.1.0"
+    doc-path: "npm:4.1.1"
+  checksum: 10c0/ab207883704f09e268a11665c924eba793307f20b38e1296ab94325c46089b4a49d1700e1f6b5a1537252108cef4bbc1acc4b89aa44558a84e13ad628eb786c0
+  languageName: node
+  linkType: hard
+
 "json-parse-even-better-errors@npm:^2.3.0":
   version: 2.3.1
   resolution: "json-parse-even-better-errors@npm:2.3.1"
@@ -9822,6 +9846,7 @@ __metadata:
     http-proxy-middleware: "npm:2.0.6"
     immer: "npm:9.0.21"
     jsdom: "npm:23.2.0"
+    json-2-csv: "npm:^5.5.5"
     lodash.clonedeep: "npm:4.5.0"
     lodash.isequal: "npm:^4.5.0"
     lodash.mapvalues: "npm:^4.6.0"