162 lines
4.2 KiB
Vue
162 lines
4.2 KiB
Vue
<template>
|
|
<div style="height: 100%; width: 100%">
|
|
<ag-grid-vue
|
|
style="width: 100%; height: 100%;"
|
|
class="ag-theme-alpine"
|
|
@grid-ready="onGridReady"
|
|
:defaultColDef="defaultColDef"
|
|
:columnDefs="columnDefs"
|
|
:row-data="null"
|
|
:supress-horisontal-scroll="true"
|
|
:enable-scrolling="true"
|
|
:get-row-id="(params) => params.data.index"
|
|
></ag-grid-vue>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { AgGridVue } from "ag-grid-vue3";
|
|
import "ag-grid-community/styles//ag-grid.css";
|
|
import "ag-grid-community/styles//ag-theme-alpine.css";
|
|
import ScreenshotCell from "./ScreenshotCell.js";
|
|
import {watchEffect} from "vue";
|
|
|
|
export default {
|
|
components: {
|
|
AgGridVue,
|
|
ScreenshotCell: ScreenshotCell,
|
|
},
|
|
data() {
|
|
return {
|
|
gridApi: null,
|
|
gridColumnApi: null,
|
|
rowData: [],
|
|
defaultColDef: {
|
|
width: 50,
|
|
initialPinned: true,
|
|
filter: true,
|
|
floatingFilter: true,
|
|
resizable: true,
|
|
},
|
|
currentRowCount: 0,
|
|
viewRowCount: 20,
|
|
comboBoxOptions: [],
|
|
columnDefs: [
|
|
{
|
|
field: '_id',
|
|
},
|
|
{
|
|
field: 'kubernetes.namespace',
|
|
headerName: 'namespace',
|
|
},
|
|
{
|
|
field: 'kubernetes.pod.name',
|
|
headerName: 'pod',
|
|
},
|
|
{
|
|
field: 'kubernetes.container.name',
|
|
headerName: 'container',
|
|
},
|
|
{
|
|
field: 'message',
|
|
tooltipValueGetter: (params) => 'Address: ' + params.value,
|
|
width: 500,
|
|
},
|
|
{
|
|
field: 'stream',
|
|
},
|
|
{
|
|
field: '@timestamp',
|
|
width: 70
|
|
}
|
|
],
|
|
}
|
|
},
|
|
created() {
|
|
this.setupStream()
|
|
},
|
|
watch: {
|
|
comboBoxOptions: {
|
|
handler(newValue, oldValue) {
|
|
const clonedDefs = [ ...this.columnDefs ];
|
|
clonedDefs.map((def) => {
|
|
if ((def.floatingFilterComponent || null) === 'ComboboxFilter' ) {
|
|
def.floatingFilterComponentParams = {
|
|
suppressFilterButton: true,
|
|
options: Object.values(newValue[def.field])
|
|
}
|
|
return def
|
|
}
|
|
})
|
|
this.columnDefs = clonedDefs
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
setupStream() {
|
|
let es = new EventSource('/events');
|
|
es.onmessage = (e) => this.handleReceiveMessage(e)
|
|
},
|
|
onGridReady(params) {
|
|
this.gridApi = params.api;
|
|
this.gridColumnApi = params.columnApi;
|
|
const timer = setInterval(() => {
|
|
this.refreshRowData();
|
|
}, 1000);
|
|
},
|
|
handleReceiveMessage (event) {
|
|
const eventData = this.parseEventData(event.data);
|
|
eventData.index = this.currentRowCount
|
|
// this.rowData.unshift(eventData)
|
|
if (this.currentRowCount < this.viewRowCount) {
|
|
this.gridApi.setRowData(this.rowData)
|
|
this.currentRowCount = this.currentRowCount + 1
|
|
}
|
|
|
|
this.gridApi.sizeColumnsToFit()
|
|
},
|
|
refreshRowData () {
|
|
const itemsToUpdate = [];
|
|
this.rowData.slice(0 - this.viewRowCount).forEach((row, index) => {
|
|
row.index = index
|
|
itemsToUpdate.push(row)
|
|
});
|
|
this.gridApi.applyTransactionAsync({ update: itemsToUpdate });
|
|
this.gridApi.sizeColumnsToFit()
|
|
this.getComboBoxOptions()
|
|
},
|
|
parseEventData (eventData) {
|
|
try {
|
|
let json = JSON.parse(eventData)
|
|
if (!json.message) {
|
|
json.message = JSON.stringify(json.json)
|
|
}
|
|
return json
|
|
} catch (e) {
|
|
console.error(e, eventData)
|
|
}
|
|
},
|
|
getComboBoxOptions () {
|
|
const opts = {}
|
|
this.columnDefs.map((def) => {
|
|
if ((def.floatingFilterComponent || null) === 'ComboboxFilter' ) {
|
|
const field = def.field
|
|
const unique = {};
|
|
this.rowData.map((row) => {
|
|
const value = field.split('.').reduce((a, b) => a[b], row);
|
|
unique[value] = 1;
|
|
})
|
|
const uniqueArray = [];
|
|
for (const n in unique) uniqueArray.push(n);
|
|
opts[field] = uniqueArray
|
|
}
|
|
})
|
|
if (JSON.stringify(this.comboBoxOptions) !== JSON.stringify(opts)) {
|
|
this.comboBoxOptions = opts
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|