Skip to content

Commit

Permalink
add details dialog + export
Browse files Browse the repository at this point in the history 
Signed-off-by: Thomas Labarussias <[email protected]>
  • Loading branch information
@Issif @poiana
Issif authored and poiana committed Aug 4, 2023
1 parent 22a5b0d commit 2009410
Show file tree
Hide file tree
Showing 3 changed files with 298 additions and 3 deletions.
5 changes: 5 additions & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
199 changes: 198 additions & 1 deletion frontend/src/views/EventsPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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';
Expand All @@ -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: [],
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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>
Loading

0 comments on commit 2009410

Please sign in to comment.