Add batch actions and row action to Event Logs

Adds ability to export and delete event logs by row or in a
table batch action.

- Modifications to TableRowAction component to allow single
  row export functionality

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ica50dd0868ac85cc2d6925a9448858b40da9c529

1 files changed, 48 insertions, 18 deletions

diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index d41fd50c..f86bce22 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -1,18 +1,36 @@
 <template>
-  <b-button
-    :aria-label="title"
-    :title="title"
-    variant="link"
-    :disabled="!enabled"
-    @click="$emit('click:tableAction', value)"
-  >
-    <slot name="icon">
-      {{ title }}
-    </slot>
-  </b-button>
+  <span>
+    <b-link
+      v-if="value === 'export'"
+      class="align-bottom btn-link py-0"
+      :download="download"
+      :href="href"
+      :title="title"
+      :aria-label="title"
+    >
+      <slot name="icon">
+        {{ $t('global.action.export') }}
+      </slot>
+    </b-link>
+    <b-button
+      v-else
+      variant="link"
+      class="py-0"
+      :aria-label="title"
+      :title="title"
+      :disabled="!enabled"
+      @click="$emit('click:tableAction', value)"
+    >
+      <slot name="icon">
+        {{ title }}
+      </slot>
+    </b-button>
+  </span>
 </template>
 
 <script>
+import { omit } from 'lodash';
+
 export default {
   name: 'TableRowAction',
   props: {
@@ -27,14 +45,26 @@ export default {
     title: {
       type: String,
       default: null
+    },
+    rowData: {
+      type: Object,
+      default: () => {}
+    },
+    exportName: {
+      type: String,
+      default: 'export'
+    }
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(omit(this.rowData, 'actions'));
+    },
+    download() {
+      return `${this.exportName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.btn.btn-link {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-</style>