From 20094106ddcd59c1aca216052bb49f7291fa7099 Mon Sep 17 00:00:00 2001
From: Thomas Labarussias <issif+github@gadz.org>
Date: Thu, 13 Jul 2023 14:35:06 +0200
Subject: [PATCH] add details dialog + export

Signed-off-by: Thomas Labarussias <issif+github@gadz.org>
---
 frontend/package.json             |   5 +
 frontend/src/views/EventsPage.vue | 199 +++++++++++++++++++++++++++++-
 frontend/yarn.lock                |  97 ++++++++++++++-
 3 files changed, 298 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d1ea04f..f4ac897 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "chartjs-adapter-moment": "^1.0.0",
     "cors": "^2.8.5",
     "dayjs": "^1.11.1",
+    "highlight.js": "^11.8.0",
     "lint-staged": "^7.3.0",
     "material-design-icons-iconfont": "^6.5.0",
     "moment": "^2.29.4",
@@ -34,6 +35,10 @@
     "vue": "^2.5.21",
     "vue-chartjs": "^4.0.5",
     "vue-cli-plugin-vuetify": "^2.4.8",
+    "vue-code-highlight": "^0.7.8",
+    "vue-highlight.js": "^3.1.0",
+    "vue-highlightjs": "^1.3.3",
+    "vue-json-pretty": "^1.9.4",
     "vue-router": "^3.0.2",
     "vue-template-compiler": "^2.5.21",
     "vuetify": "^2.6.10",
diff --git a/frontend/src/views/EventsPage.vue b/frontend/src/views/EventsPage.vue
index a782405..8689977 100755
--- a/frontend/src/views/EventsPage.vue
+++ b/frontend/src/views/EventsPage.vue
@@ -10,6 +10,22 @@
         </Filters>
       </v-col>
     </v-row>
+    <v-row>
+      <v-col
+      align="right"
+      cols="12"
+      sm="12"
+      class="pr-7"
+      >
+        <v-btn
+        color="info"
+        small
+        @click="saveFile()"
+        >
+          Export
+        </v-btn>
+      </v-col>
+    </v-row>
     <v-row>
       <v-data-table
         class="mt-10 ml-5 mr-5"
@@ -86,14 +102,137 @@
               {{tag}}
               </v-chip>
             </td>
+            <td>
+              <v-btn
+                x-small
+                :icon="true"
+                @click="showDialog(item);"
+              >
+                <v-icon>mdi-code-json</v-icon>
+              </v-btn>
+            </td>
           </tr>
         </template>
       </v-data-table>
     </v-row>
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+      >
+      <v-tabs
+      text
+      >
+        <v-tab href="#details" @click="dialogDetails = true; dialogJson = false;">
+          Details
+        </v-tab>
+        <v-tab href="#json" @click="dialogDetails = false; dialogJson = true;">
+          Json
+        </v-tab>
+      </v-tabs>
+      <v-card>
+        <v-card-text v-show="dialogDetails">
+          <v-list-item style="padding-top: 10px;">
+            <v-list-item-content>
+              <v-list-item-title>Time</v-list-item-title>
+                <v-list-item-subtitle>{{json.time}}</v-list-item-subtitle>
+              <v-list-item-title>Source</v-list-item-title>
+                <v-list-item-subtitle>
+                  <v-chip dark
+                  @click="addToFilters('sources', json.source)"
+                  :color="stringToColor(String(json.source))">{{ json.source }}</v-chip>
+                </v-list-item-subtitle>
+              <v-list-item-title>Hostname</v-list-item-title>
+                <v-list-item-subtitle>
+                  <v-chip dark
+                  @click="addToFilters('hostnames', json.hostname)"
+                  :color="stringToColor(String(json.hostname))">{{ json.hostname }}</v-chip>
+                </v-list-item-subtitle>
+              <v-list-item-title>Priority</v-list-item-title>
+                <v-list-item-subtitle>
+                  <v-chip dark
+                  @click="addToFilters('priorities', json.priority)"
+                  :color="priorityToColor(String(json.priority))">{{ json.priority }}</v-chip>
+                </v-list-item-subtitle>
+              <v-list-item-title>Rule</v-list-item-title>
+              <v-list-item-subtitle>{{json.rule}}</v-list-item-subtitle>
+              <v-list-item-title>Output</v-list-item-title>
+              <v-list-item-subtitle>
+                <pre style="white-space: pre-wrap;">{{json.output}}</pre>
+              </v-list-item-subtitle>
+              <v-list-item-title>Fields</v-list-item-title>
+              <v-list-item-subtitle>
+                <v-list-item-subtitle>
+                  <span style="white-space: pre-wrap;"
+                  v-for="(value,key) in json.output_fields" :key="key" :value="value">
+                  <v-chip label
+                  @click="addToFilters('search', key)"
+                  class="rounded-0 mb-1"
+                  color="blue lighten-3">
+                    {{key}}
+                  </v-chip>
+                  <v-chip label
+                  @click="addToFilters('search', value)"
+                  class="rounded-0 mb-1"
+                  style="margin-left: -4px; margin-right: 5px;">
+                    {{value}}
+                  </v-chip>
+                  </span>
+                </v-list-item-subtitle>
+              </v-list-item-subtitle>
+              <v-list-item-title>Tags</v-list-item-title>
+              <v-list-item-subtitle>
+                <v-list-item-subtitle>
+                  <v-chip
+                  v-for="(tag, index) in json.tags" :key="index"
+                  dark
+                  @click="addToFilters('tags', tag)"
+                  class="mb-1 mr-1 mt-1"
+                  :color="stringToColor(String(tag))">{{ tag }}</v-chip>
+                </v-list-item-subtitle>
+              </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+        </v-card-text>
+        <v-card-text v-show="dialogJson">
+          <pre style="white-space: pre-wrap;">
+            <vue-json-pretty
+              :data="json"
+              :collapsedOnClickBrackets="false"
+            />
+          </pre>
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <v-btn
+            style="margin-right: 5px;"
+            color="primary" large @click="dialog = false"
+          >
+            Close
+          </v-btn>
+          <v-tooltip
+          v-model="copied"
+          top
+          >
+            <template v-slot:activator="{ attrs }">
+              <v-btn
+                color="normal"
+                large
+                @click="copied = true; copyToClipBoard()"
+                v-bind="attrs"
+              >
+              COPY JSON
+              </v-btn>
+            </template>
+            <span>Copied</span>
+          </v-tooltip>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
 <script>
+import 'vue-json-pretty/lib/styles.css';
+import VueJsonPretty from 'vue-json-pretty';
 import { requests } from '../http';
 import { utils } from '../utils';
 import Counters from '../components/counters.vue';
@@ -104,13 +243,14 @@ export default {
   components: {
     Counters,
     Filters,
+    VueJsonPretty,
   },
   data() {
     return {
       search: '',
       page: 1,
       itemsPerPage: 10,
-      itemsPerPageInterval: [10, 50, 100, 200],
+      itemsPerPageInterval: [10, 50, 100, 200, 500, 1000],
       totalEvents: 0,
       events: [],
       priorities: [],
@@ -144,8 +284,14 @@ export default {
         { text: 'Rule', value: 'rule' },
         { text: 'Output', value: 'output' },
         { text: 'Tags', value: 'tags' },
+        { text: '', value: 'json' },
       ],
       debounce: null,
+      dialog: false,
+      dialogDetails: true,
+      dialogJson: false,
+      json: '',
+      copied: false,
     };
   },
   computed: {
@@ -234,9 +380,60 @@ export default {
         item: i,
       };
     },
+    showDialog(i) {
+      this.dialog = true;
+      this.json = i;
+    },
+    copyToClipBoard() {
+      navigator.clipboard.writeText(JSON.stringify(this.json));
+    },
+    saveFile() {
+      let text;
+      requests.searchEvents(
+        this.filters.sources,
+        this.filters.hostnames,
+        this.filters.priorities,
+        this.filters.rule,
+        this.filters.search,
+        this.filters.tags,
+        this.filters.since,
+        0,
+        10000,
+      )
+        .then((response) => {
+          text = JSON.stringify(response.data.results);
+          const filename = 'falco_events.json';
+          const element = document.createElement('a');
+          const href = `data:application/json;charset=utf-8,${encodeURIComponent(text)}`;
+          element.setAttribute('href', href);
+          element.setAttribute('download', filename);
+
+          element.style.display = 'none';
+          document.body.appendChild(element);
+
+          element.click();
+          document.body.removeChild(element);
+        });
+    },
   },
   mounted() {
     this.searchEvents();
   },
 };
 </script>
+
+<style>
+.vjs-key {
+  color: rgb(43, 51, 42);
+}
+.vjs-value-string {
+  color: rgb(73, 105, 247);
+}
+.v-list-item__subtitle {
+  padding-bottom: 15px;
+  font-size: 125%;
+}
+.v-list-item__title {
+  padding-bottom: 2px;
+}
+</style>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 14c0e02..8be8a5a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -272,6 +272,11 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.8.tgz"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
+"@babel/parser@^7.18.4":
+  version "7.22.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
+  integrity sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz"
@@ -1086,6 +1091,15 @@
     semver "^6.0.0"
     string.prototype.padstart "^3.0.0"
 
+"@vue/compiler-sfc@2.7.14":
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
+  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/component-compiler-utils@^3.0.0", "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz"
@@ -2904,6 +2918,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 current-script-polyfill@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz"
@@ -3100,6 +3119,11 @@ destroy@~1.0.4:
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz"
   integrity "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA= sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg=="
 
+detect-indent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+  integrity sha512-rlpvsxUtM0PQvy9iZe640/IWwWYyBsTApREbA1pHOpmOUIl9MkP/U4z7vTtg4Oaojvqhxt7sdufnT0EzGaR31g==
+
 detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
@@ -4433,6 +4457,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@*, highlight.js@^11.8.0:
+  version "11.8.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
+  integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
+
 highlight.js@^10.7.1:
   version "10.7.3"
   resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz"
@@ -6013,6 +6042,11 @@ nan@^2.12.1:
   resolved "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
@@ -7070,6 +7104,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.3
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+postcss@^8.4.14:
+  version "8.4.25"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.25.tgz#4a133f5e379eda7f61e906c3b1aaa9b81292726f"
+  integrity sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -7106,6 +7149,11 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+prism-es6@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prism-es6/-/prism-es6-1.2.0.tgz#ead4e0d7809fefc36b9636f1ea4b2cebad074e63"
+  integrity sha512-A8JV9G2zKM8PWksT7YJcmnaWtYO6C9hSfxM/xv0RxB2aNc8rjv30WakzIw1gWyqLi2eiqquo2KmS7orxqlm+yg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -7324,6 +7372,14 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha512-XNwrTx77JQCEMXTeb8movBKuK75MgH0RZkujNuDKCezemx/voapl9i2gCSi8WWm8+ox5ycJi1gxF22fR7c0Ciw==
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz"
@@ -8013,7 +8069,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-"source-map-js@>=0.6.2 <2.0.0":
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -8667,7 +8723,7 @@ tsconfig-paths@^3.12.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -8967,6 +9023,14 @@ vue-cli-plugin-vuetify@^2.4.8:
     semver "^7.1.2"
     shelljs "^0.8.3"
 
+vue-code-highlight@^0.7.8:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/vue-code-highlight/-/vue-code-highlight-0.7.8.tgz#04f8e0c1c17edd52f7c769dd19dda1d2d928bc90"
+  integrity sha512-jMt1W0DGisNZ3B2TASFCPLEswohVrwImX+TxzMIZINZyAUUNZ1Xth3soJw1xepTsMgxkIkhsmN/xVNpiI3bU4g==
+  dependencies:
+    prism-es6 "^1.2.0"
+    vue "^2.5.16"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz"
@@ -8979,11 +9043,32 @@ vue-eslint-parser@^2.0.3:
     esquery "^1.0.0"
     lodash "^4.17.4"
 
+vue-highlight.js@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vue-highlight.js/-/vue-highlight.js-3.1.0.tgz#87b60b4931fd310b318f2b2c9116fe71b69dd053"
+  integrity sha512-i55SERtdV0CYQppGo29iT6NOq+oOenOKVwkLWZRt7bSynbsQoj/e8GJy/5xL1s5OOYObC/CxA39bRadVyPQt1A==
+  dependencies:
+    detect-indent "^5.0.0"
+    redent "^2.0.0"
+    tslib "^1.9.3"
+
+vue-highlightjs@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz#29a0d57132fc1ce15cfa61e896918f5b718c5d52"
+  integrity sha512-NaBfeVVa5rbKw9bNU0ajAcDmKOdzT+XuBZwYKFbEGSGFKGOc5wYerMY3R4WQrnlLD7BkG9tIIusqemKnIgQ7MA==
+  dependencies:
+    highlight.js "*"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-json-pretty@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-1.9.4.tgz#d3ce7412a090bd6f0786efe6dfaa5749ffab2df3"
+  integrity sha512-u4qffBCx6yW4SH3avUfRmLc1fHzF/UhYDnTThTjsfVl7jbUtvmog3OaB8kDzGqvKboJnbBnPSL5RBwzbZ4ZMLA==
+
 vue-loader@^15.7.0:
   version "15.9.8"
   resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz"
@@ -9021,6 +9106,14 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue@^2.5.16:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
+  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.14"
+    csstype "^3.1.0"
+
 vue@^2.5.21:
   version "2.6.14"
   resolved "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz"