119 lines
2.7 KiB
Vue
119 lines
2.7 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"
|
||
|
|
></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,
|
||
|
|
},
|
||
|
|
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()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setupStream() {
|
||
|
|
let es = new EventSource('/events');
|
||
|
|
es.onmessage = (e) => this.handleReceiveMessage(e)
|
||
|
|
},
|
||
|
|
onGridReady(params) {
|
||
|
|
this.gridApi = params.api;
|
||
|
|
this.gridColumnApi = params.columnApi;
|
||
|
|
},
|
||
|
|
handleReceiveMessage (event) {
|
||
|
|
const eventData = this.parseEventData(event.data);
|
||
|
|
this.rowData.unshift(eventData)
|
||
|
|
this.gridApi.setRowData(this.rowData)
|
||
|
|
this.gridApi.sizeColumnsToFit()
|
||
|
|
},
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setColumnDefs (json) {
|
||
|
|
const keys = Object.keys(json)
|
||
|
|
const defs = []
|
||
|
|
keys.map((key) => {
|
||
|
|
const definition = {
|
||
|
|
field: key,
|
||
|
|
initialPinned: true,
|
||
|
|
filter: true,
|
||
|
|
floatingFilter: true,
|
||
|
|
minWidth: 80
|
||
|
|
}
|
||
|
|
defs.push(definition)
|
||
|
|
})
|
||
|
|
this.columnDefs = defs
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|