diff --git a/frontend/src/components/LogViewer.vue b/frontend/src/components/LogViewer.vue index 320da2c..aa53164 100644 --- a/frontend/src/components/LogViewer.vue +++ b/frontend/src/components/LogViewer.vue @@ -20,20 +20,6 @@ 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 ComboboxFilter from './ComboboxFilter.js'; - -const comboBoxDefinition = () => { - return { - filter: true, - floatingFilter: true, - suppressMenu: true, - floatingFilterComponent: 'ComboboxFilter', - floatingFilterComponentParams: { - suppressFilterButton: true, - options: [] - }, - } -}; export default { components: { @@ -62,15 +48,17 @@ export default { { field: 'kubernetes.namespace', headerName: 'namespace', - ...comboBoxDefinition(), + filter: true, }, { field: 'kubernetes.pod.name', headerName: 'pod', + filter: true, }, { field: 'kubernetes.container.name', headerName: 'container', + filter: true, }, { field: 'message', @@ -82,7 +70,8 @@ export default { }, { field: '@timestamp', - width: 70 + width: 70, + sortable: true } ], } @@ -90,23 +79,6 @@ export default { 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'); @@ -115,16 +87,11 @@ export default { onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; - const timer = setInterval(() => { - this.getComboBoxOptions(); - }, 3000); }, handleReceiveMessage (event) { const eventData = this.parseEventData(event.data); - this.rowData.push(eventData) - this.gridApi.setRowData(this.rowData) + this.gridApi.updateRowData({add: [eventData]}); this.gridApi.sizeColumnsToFit() - this.getComboBoxOptions() }, refreshRowData () { const itemsToUpdate = []; @@ -147,25 +114,6 @@ export default { 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 - } - } } }