diff --git a/frontend/src/components/ComboboxFilter.js b/frontend/src/components/ComboboxFilter.js
index 622fcfb..e8e6f59 100644
--- a/frontend/src/components/ComboboxFilter.js
+++ b/frontend/src/components/ComboboxFilter.js
@@ -1,37 +1,29 @@
export default {
template: `
-
-
-
+
`,
data: function () {
return {
- options: [],
- currentValue: null,
+ filter: '',
};
},
- watch: {
- currentValue (newValue) {
- this.params.parentFilterInstance((instance) => {
- instance.onFloatingFilterChanged('', newValue);
- });
- }
- },
methods: {
- onParentModelChanged(parentModel) {
- this.options = this.params.column.colDef.floatingFilterComponentParams.options
- // When the filter is empty we will receive a null value here
- if (!parentModel) {
- this.currentValue = '';
- } else {
- this.currentValue = parentModel.filter;
- }
- }
+ updateFilter() {
+ this.params.filterChangedCallback();
+ },
+
+ doesFilterPass(params) {
+ const value = this.params.field.split('.').reduce((a, b) => a[b], params.data);
+ return value === this.filter;
+ },
+
+ isFilterActive() {
+ return this.filter !== ''
+ },
},
};
\ No newline at end of file
diff --git a/frontend/src/components/LogViewer.vue b/frontend/src/components/LogViewer.vue
index 3e4a015..c936452 100644
--- a/frontend/src/components/LogViewer.vue
+++ b/frontend/src/components/LogViewer.vue
@@ -24,11 +24,14 @@ import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-material.css";
import ScreenshotCell from "./ScreenshotCell.js";
import ExamineLogModal from "./ExamineLogModal.vue";
+import ComboboxFilter from "./ComboboxFilter.js";
+
export default {
components: {
ExamineLogModal,
AgGridVue,
+ ComboboxFilter,
ScreenshotCell: ScreenshotCell
},
data() {
@@ -36,7 +39,6 @@ export default {
examineLogContent: null,
gridApi: null,
gridColumnApi: null,
- rowData: [],
defaultColDef: {
width: 50,
initialPinned: true,
@@ -46,8 +48,11 @@ export default {
currentRowCount: 0,
comboBoxOptions: {},
viewRowCount: 20,
- comboBoxOptions: [],
- columnDefs: [
+ }
+ },
+ computed: {
+ columnDefs() {
+ return [
{
field: '@timestamp',
width: 70,
@@ -57,19 +62,31 @@ export default {
field: 'kubernetes.namespace',
headerName: 'namespace',
tooltipValueGetter: (params) => params.value,
- filter: true,
+ filter: ComboboxFilter,
+ filterParams: {
+ options: this.comboBoxOptions['kubernetes.namespace'],
+ field: 'kubernetes.namespace',
+ }
},
{
field: 'kubernetes.pod.name',
headerName: 'pod',
tooltipValueGetter: (params) => params.value,
- filter: true,
+ filter: ComboboxFilter,
+ filterParams: {
+ options: this.comboBoxOptions['kubernetes.pod.name'],
+ field: 'kubernetes.pod.name',
+ }
},
{
field: 'kubernetes.container.name',
headerName: 'container',
tooltipValueGetter: (params) => params.value,
- filter: true,
+ filter: ComboboxFilter,
+ filterParams: {
+ options: this.comboBoxOptions['kubernetes.container.name'],
+ field: 'kubernetes.container.name',
+ }
},
{
field: 'message',
@@ -78,8 +95,8 @@ export default {
},
{
field: 'stream',
- }
- ],
+ },
+ ];
}
},
created() {