Use library for download as csv export

package-lock.json

@@ -6294,6 +6294,11 @@
         "jest-regex-util": "^23.3.0"
       }
     },
+    "export-to-csv": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/export-to-csv/-/export-to-csv-0.2.1.tgz",
+      "integrity": "sha512-KTbrd3CAZ0cFceJEZr1e5uiMasabeCpXq1/5uvVxDl53o4jXJHnltasQoj2NkzrxD8hU9kdwjnMhoir/7nNx/A=="
+    },
     "express": {
       "version": "4.17.1",
       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@alerta/vue-authenticate": "^1.4.2",
     "acorn-dynamic-import": "^4.0.0",
     "axios": "^0.18.1",
+    "export-to-csv": "^0.2.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "vue": "^2.6.10",

src/locales/en.js

@@ -232,5 +232,6 @@ export const en = {
   UserAddedGroup: 'User added to group.',
   UserRemovedGroup: 'User removed from group.',
   UserStatusSaved: 'User status saved.',
-  EmailSaved: 'Email verified saved.'
+  EmailSaved: 'Email verified saved.',
+  DownloadAsCsv: 'Download as CSV'
 }

src/locales/fr.js

@@ -236,5 +236,6 @@ export const fr = {
   UserAddedGroup: 'Utilisateur ajouté au groupe.',
   UserRemovedGroup: 'Utilisateur supprimé du groupe.',
   UserStatusSaved: 'Statut utilisateur enregistré.',
-  EmailSaved: 'Email vérifié enregistré.'
+  EmailSaved: 'Email vérifié enregistré.',
+  DownloadAsCsv: 'Télécharger comme csv'
 }

src/views/Alerts.vue

@@ -127,6 +127,11 @@
           >
             {{ $t('DisplayDensity') }}
           </v-list-tile>
+          <v-list-tile
+            @click="toCsv(alertsByEnvironment)"
+          >
+            {{ $t('DownloadAsCsv') }}
+          </v-list-tile>
         </v-list>
       </v-menu>
 
@@ -159,6 +164,7 @@
 
 <script>
 import moment from 'moment'
+import { ExportToCsv } from 'export-to-csv'
 
 import AlertList from '@/components/AlertList.vue'
 import AlertIndicator from '@/components/AlertIndicator.vue'
@@ -402,6 +408,20 @@ export default {
         this.selectedItem = {}
         this.selectedId = null
       }, 300)
+    },
+    toCsv(data) {
+      const options = {
+        fieldSeparator: ',',
+        filename: `Alerts_${this.filter.environment ||  'ALL'}`,
+        quoteStrings: '"',
+        decimalSeparator: 'locale',
+        showLabels: true,
+        useTextFile: false,
+        useBom: true,
+        useKeysAsHeaders: true,
+      }
+      const csvExporter = new ExportToCsv(options)
+      csvExporter.generateCsv(data.map(({history, ...item}) => item))
     }
   }
 }