2022-10-31 21:12:25 +00:00
|
|
|
<template>
|
2022-11-15 17:06:33 +00:00
|
|
|
<div style="height: 100%; width: 100%;" v-resize="onResize">
|
2022-11-11 13:35:42 +00:00
|
|
|
<v-row no-gutters>
|
2022-11-15 15:34:12 +00:00
|
|
|
<v-col cols="12" sm="5" class="d-flex justify-start flex-wrap">
|
2022-11-11 13:35:42 +00:00
|
|
|
<Datepicker class="ma-2" :refresh="refreshFilterState" />
|
|
|
|
</v-col>
|
2022-11-15 15:34:12 +00:00
|
|
|
<v-col cols="12" sm="2" class="d-flex justify-center flex-wrap">
|
2022-11-11 13:35:42 +00:00
|
|
|
<h1 class="app-title"> Logmower </h1>
|
|
|
|
</v-col>
|
2022-11-15 15:34:12 +00:00
|
|
|
<v-col cols="12" sm="5" class="d-flex justify-end flex-wrap">
|
2022-11-11 13:35:42 +00:00
|
|
|
<v-btn
|
|
|
|
color="blue-grey"
|
|
|
|
class="ma-2"
|
|
|
|
:prepend-icon="streaming ? 'mdi-pause' :'mdi-play'"
|
|
|
|
@click="toggleFilterQueryStreaming"
|
|
|
|
>
|
|
|
|
Stream new lines
|
|
|
|
</v-btn>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
<ag-grid-vue
|
2022-11-07 14:43:22 +00:00
|
|
|
style="width: 100%; height: calc(100% - 52px);"
|
2022-10-31 21:12:25 +00:00
|
|
|
class="ag-theme-material"
|
|
|
|
@grid-ready="onGridReady"
|
|
|
|
:defaultColDef="defaultColDef"
|
|
|
|
:columnDefs="columnDefs"
|
2022-11-09 09:28:08 +00:00
|
|
|
:getRowId="params => params.data._id"
|
2022-10-31 21:12:25 +00:00
|
|
|
:pagination="true"
|
|
|
|
:paginationAutoPageSize=true
|
|
|
|
:row-data="null"
|
|
|
|
row-selection="single"
|
|
|
|
:onRowSelected="openExamineLog"
|
|
|
|
:supress-horisontal-scroll="true"
|
|
|
|
:enable-scrolling="true"
|
2022-11-11 13:35:42 +00:00
|
|
|
:isExternalFilterPresent="() => {return true}"
|
|
|
|
:doesExternalFilterPass="doesExternalFilterPass"
|
2022-10-31 21:12:25 +00:00
|
|
|
></ag-grid-vue>
|
|
|
|
<ExamineLogModal :examine-log-content="examineLogContent" :close-modal="closeExamineLog" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { AgGridVue } from "ag-grid-vue3";
|
|
|
|
import "ag-grid-community/styles//ag-grid.css";
|
|
|
|
import "ag-grid-community/styles//ag-theme-material.css";
|
2022-11-07 14:43:22 +00:00
|
|
|
import { VBtn } from 'vuetify/components/VBtn'
|
2022-11-11 13:35:42 +00:00
|
|
|
import { VRow, VCol } from 'vuetify/components/VGrid'
|
2022-11-15 17:06:33 +00:00
|
|
|
import { Resize } from 'vuetify/directives';
|
2022-11-05 18:23:57 +00:00
|
|
|
import ExamineLogModal from "./Modal/ExamineLogModal.vue";
|
2022-11-09 18:08:35 +00:00
|
|
|
import ComboboxFilter from "./Grid/Main/Filter/ComboboxFilter.js";
|
2022-11-09 10:04:04 +00:00
|
|
|
import ErrLevelRenderer from "./Grid/Main/ErrLevelRenderer";
|
2022-11-07 12:57:50 +00:00
|
|
|
import flattenObj from "../helpers/flattenObj";
|
|
|
|
import parseEventData from "../helpers/parseEventData";
|
2022-11-07 14:41:23 +00:00
|
|
|
import {mapActions, mapGetters} from 'vuex';
|
2022-11-07 12:57:50 +00:00
|
|
|
import config from "./Grid/Main/config";
|
2022-11-11 13:35:42 +00:00
|
|
|
import Datepicker from "./Grid/Main/Filter/Datepicker.vue";
|
2022-10-31 21:12:25 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2022-11-11 13:35:42 +00:00
|
|
|
Datepicker,
|
2022-10-31 21:12:25 +00:00
|
|
|
ExamineLogModal,
|
|
|
|
AgGridVue,
|
2022-11-07 14:43:22 +00:00
|
|
|
ComboboxFilter,
|
2022-11-09 10:04:04 +00:00
|
|
|
ErrLevelRenderer,
|
2022-11-11 13:35:42 +00:00
|
|
|
VBtn,
|
|
|
|
VRow,
|
|
|
|
VCol
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
2022-11-15 17:06:33 +00:00
|
|
|
directives: {
|
|
|
|
Resize
|
|
|
|
},
|
2022-10-31 21:12:25 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
examineLogContent: null,
|
2022-11-07 12:57:50 +00:00
|
|
|
...config,
|
2022-10-31 21:12:25 +00:00
|
|
|
gridApi: null,
|
|
|
|
gridColumnApi: null,
|
|
|
|
comboBoxOptions: {},
|
2022-11-07 12:57:50 +00:00
|
|
|
es: null,
|
2022-11-09 09:18:28 +00:00
|
|
|
initialFilter: null,
|
2022-10-31 21:12:25 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2022-11-07 14:43:22 +00:00
|
|
|
...mapGetters([
|
|
|
|
'filterQuery',
|
2022-11-11 13:35:42 +00:00
|
|
|
'streaming'
|
2022-11-07 14:43:22 +00:00
|
|
|
]),
|
2022-11-07 12:57:50 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
filterQuery() {
|
|
|
|
this.setupStream()
|
|
|
|
},
|
2022-11-07 14:43:22 +00:00
|
|
|
streaming() {
|
|
|
|
this.setupStream()
|
|
|
|
},
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
|
|
|
created() {
|
2022-11-09 09:18:28 +00:00
|
|
|
let queryParams = new URLSearchParams(window.location.search);
|
|
|
|
queryParams = Object.fromEntries(queryParams);
|
|
|
|
this.initialFilter = queryParams
|
|
|
|
queryParams['initial'] = true
|
2022-11-11 13:35:42 +00:00
|
|
|
queryParams['from'] && (queryParams['from'] = Number(queryParams['from']))
|
|
|
|
queryParams['to'] && (queryParams['to'] = Number(queryParams['to']))
|
2022-11-09 09:18:28 +00:00
|
|
|
this.setFilterQuery(queryParams)
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2022-11-07 12:57:50 +00:00
|
|
|
...mapActions({
|
|
|
|
setFilterOptions: 'setFilterOptions',
|
|
|
|
setFilterQuery: 'setFilterQuery',
|
2022-11-07 14:43:22 +00:00
|
|
|
toggleFilterQueryStreaming: 'toggleFilterQueryStreaming',
|
2022-11-07 12:57:50 +00:00
|
|
|
}),
|
2022-11-15 17:06:33 +00:00
|
|
|
onResize () {
|
|
|
|
if (this.gridApi) {
|
|
|
|
this.gridApi.sizeColumnsToFit()
|
|
|
|
}
|
|
|
|
},
|
2022-11-11 13:35:42 +00:00
|
|
|
refreshFilterState() {
|
|
|
|
this.gridApi.onFilterChanged();
|
|
|
|
},
|
2022-10-31 21:12:25 +00:00
|
|
|
setupStream() {
|
2022-11-07 12:57:50 +00:00
|
|
|
this.es && this.es.close();
|
|
|
|
let url = new URL('/events', window.location.href);
|
2022-11-07 14:41:23 +00:00
|
|
|
for (const key in this.filterQuery) {
|
|
|
|
url.searchParams.append(key, this.filterQuery[key]);
|
|
|
|
}
|
2022-11-08 18:17:45 +00:00
|
|
|
if (url.searchParams.keys().next()) {
|
|
|
|
let es = new EventSource(url.toString());
|
|
|
|
es.onmessage = (e) => this.handleReceiveMessage(e)
|
|
|
|
es.addEventListener("filters", (e) => this.handleReceiveFilters(e))
|
|
|
|
es.addEventListener("timeout", (e) => this.handleReceiveTimeout(e))
|
|
|
|
this.es = es
|
|
|
|
}
|
2022-11-09 09:18:28 +00:00
|
|
|
url.searchParams.delete('initial')
|
|
|
|
if (url.searchParams.get('streaming') === 'false') {
|
|
|
|
url.searchParams.delete('streaming')
|
|
|
|
}
|
|
|
|
window.history.replaceState({}, '', `${location.pathname}?${url.searchParams.toString()}`);
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
|
|
|
onGridReady(params) {
|
|
|
|
this.gridApi = params.api;
|
|
|
|
this.gridColumnApi = params.columnApi;
|
2022-11-07 12:57:50 +00:00
|
|
|
this.gridColumnApi.applyColumnState({
|
|
|
|
state: [{
|
|
|
|
colId: '@timestamp',
|
|
|
|
sort: 'desc'
|
|
|
|
}]
|
|
|
|
});
|
2022-11-09 09:18:28 +00:00
|
|
|
|
|
|
|
for (let k in this.initialFilter) {
|
|
|
|
let filterInstance = params.api.getFilterInstance(k);
|
|
|
|
if (filterInstance) {
|
|
|
|
filterInstance.updateFilter(this.initialFilter[k]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
params.api.onFilterChanged();
|
|
|
|
this.initialFilter = null
|
|
|
|
|
2022-11-07 12:57:50 +00:00
|
|
|
this.gridApi.addGlobalListener((type, event) => {
|
|
|
|
if (type === 'filterChanged') {
|
|
|
|
let changedColumn = event.columns[0] ? (event.columns[0].colId) : null
|
2022-11-07 14:41:23 +00:00
|
|
|
let query = {}
|
2022-11-07 12:57:50 +00:00
|
|
|
let gridColumns = event.columnApi.columnModel.gridColumns
|
|
|
|
gridColumns.map((column) => {
|
|
|
|
// Reset child column filter if parent changed
|
|
|
|
let parentColumn = column?.colDef?.filterParams?.parentColumn
|
|
|
|
if (parentColumn && changedColumn === parentColumn) {
|
|
|
|
let filterInstance = this.gridApi.getFilterInstance(column.colId);
|
|
|
|
column.filterActive = null
|
|
|
|
filterInstance.updateFilter(null)
|
|
|
|
this.gridApi.onFilterChanged();
|
|
|
|
}
|
|
|
|
if (column.filterActive) {
|
2022-11-07 14:41:23 +00:00
|
|
|
query[column.colId] = column.filterActive
|
2022-11-07 12:57:50 +00:00
|
|
|
}
|
|
|
|
})
|
2022-11-07 14:43:22 +00:00
|
|
|
query['streaming'] = this.streaming
|
2022-11-11 13:35:42 +00:00
|
|
|
this.filterQuery.from && (query['from'] = this.filterQuery.from)
|
|
|
|
this.filterQuery.to && (query['to'] = this.filterQuery.to)
|
2022-11-07 12:57:50 +00:00
|
|
|
this.setFilterQuery(query)
|
|
|
|
}
|
|
|
|
});
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
|
|
|
handleReceiveMessage (event) {
|
2022-11-07 12:57:50 +00:00
|
|
|
const eventData = parseEventData(event.data);
|
2022-11-09 09:28:08 +00:00
|
|
|
if (!this.gridApi.getRowNode(eventData._id)) {
|
|
|
|
this.gridApi.applyTransactionAsync({
|
|
|
|
add: [eventData]
|
|
|
|
}, (res) => {
|
|
|
|
const rowNode = res.add[0]
|
|
|
|
this.gridApi.flashCells({ rowNodes: [rowNode]});
|
|
|
|
})
|
|
|
|
}
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
|
|
|
handleReceiveFilters (event) {
|
2022-11-07 12:57:50 +00:00
|
|
|
let data = parseEventData(event.data);
|
|
|
|
let opts = this.comboBoxOptions
|
|
|
|
for (let k in data) {
|
|
|
|
if (!(k in opts)) {
|
|
|
|
opts[k] = []
|
2022-10-31 21:12:25 +00:00
|
|
|
}
|
2022-11-07 12:57:50 +00:00
|
|
|
// TODO: proper merging
|
|
|
|
if ((data[k].parentKey) || (opts[k].length === 0)) {
|
|
|
|
opts[k].push(data[k])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.comboBoxOptions = opts
|
|
|
|
|
|
|
|
let correctOptions = {};
|
|
|
|
for (let column in opts) {
|
|
|
|
correctOptions[column] = []
|
|
|
|
let columnDef = this.columnDefs.find((columnDef) => {
|
|
|
|
return columnDef.field === column
|
|
|
|
});
|
|
|
|
let parentColumnName = columnDef?.filterParams?.parentColumn;
|
|
|
|
let possibleColumnOptions = opts[column].filter((k) => {
|
|
|
|
return k.parentKey === parentColumnName
|
|
|
|
})
|
|
|
|
if (possibleColumnOptions.length === 1) {
|
|
|
|
correctOptions[column] = possibleColumnOptions[0].options
|
|
|
|
} else if (possibleColumnOptions.length > 1) {
|
|
|
|
let filterInstance = this.gridApi.getFilterInstance(parentColumnName)
|
|
|
|
possibleColumnOptions.forEach((opt) => {
|
|
|
|
if (filterInstance && (opt.parentValue === filterInstance.filter)) {
|
|
|
|
correctOptions[column] = opt.options
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2022-10-31 21:12:25 +00:00
|
|
|
}
|
2022-11-07 12:57:50 +00:00
|
|
|
this.gridApi.sizeColumnsToFit()
|
|
|
|
|
|
|
|
this.setFilterOptions(correctOptions)
|
2022-10-31 21:12:25 +00:00
|
|
|
},
|
2022-11-07 13:21:13 +00:00
|
|
|
handleReceiveTimeout () {
|
|
|
|
this.$toast.warning(`Not all rows were loaded. Please use more precise filtering`, {
|
|
|
|
position: "top-right",
|
|
|
|
});
|
|
|
|
setTimeout(this.$toast.clear, 3000);
|
|
|
|
},
|
2022-11-11 13:35:42 +00:00
|
|
|
doesExternalFilterPass(node) {
|
|
|
|
if (node.data && this.filterQuery.from && this.filterQuery.to) {
|
|
|
|
let ts = new Date(node.data['@timestamp']).getTime()
|
|
|
|
return (ts >= this.filterQuery.from && ts <= this.filterQuery.to)
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
},
|
2022-10-31 21:12:25 +00:00
|
|
|
openExamineLog (row) {
|
|
|
|
const selectedRow = row.data
|
|
|
|
row.node.setSelected(false)
|
|
|
|
this.examineLog = true
|
|
|
|
const flattened = flattenObj(selectedRow)
|
|
|
|
const pairs = [];
|
|
|
|
Object.keys(flattened).map((key) => {
|
|
|
|
pairs.push({
|
|
|
|
key: key,
|
|
|
|
value: flattened[key]
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.examineLogContent = pairs
|
|
|
|
},
|
|
|
|
closeExamineLog () {
|
|
|
|
this.examineLogContent = null
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
2022-11-07 12:57:50 +00:00
|
|
|
|
2022-10-31 21:12:25 +00:00
|
|
|
</script>
|