120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div style="height: 100%; width: 100%">
|
|
<ag-grid-vue
|
|
style="width: 100%; height: 100%;"
|
|
class="ag-theme-material"
|
|
@grid-ready="onGridReady"
|
|
:defaultColDef="defaultColDef"
|
|
:columnDefs="columnDefs"
|
|
:pagination="true"
|
|
:paginationAutoPageSize=true
|
|
: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-material.css";
|
|
import ScreenshotCell from "./ScreenshotCell.js";
|
|
|
|
export default {
|
|
components: {
|
|
AgGridVue,
|
|
ScreenshotCell: ScreenshotCell
|
|
},
|
|
data() {
|
|
return {
|
|
gridApi: null,
|
|
gridColumnApi: null,
|
|
rowData: [],
|
|
defaultColDef: {
|
|
width: 50,
|
|
initialPinned: true,
|
|
resizable: true,
|
|
editable: true
|
|
},
|
|
currentRowCount: 0,
|
|
viewRowCount: 20,
|
|
comboBoxOptions: [],
|
|
columnDefs: [
|
|
{
|
|
field: '_id',
|
|
},
|
|
{
|
|
field: 'kubernetes.namespace',
|
|
headerName: 'namespace',
|
|
filter: true,
|
|
},
|
|
{
|
|
field: 'kubernetes.pod.name',
|
|
headerName: 'pod',
|
|
filter: true,
|
|
},
|
|
{
|
|
field: 'kubernetes.container.name',
|
|
headerName: 'container',
|
|
filter: true,
|
|
},
|
|
{
|
|
field: 'message',
|
|
tooltipValueGetter: (params) => 'Address: ' + params.value,
|
|
width: 500,
|
|
},
|
|
{
|
|
field: 'stream',
|
|
},
|
|
{
|
|
field: '@timestamp',
|
|
width: 70,
|
|
sortable: true
|
|
}
|
|
],
|
|
}
|
|
},
|
|
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.gridApi.updateRowData({add: [eventData]});
|
|
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)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|