Initial commit

src/App.vue

@@ -0,0 +1,15 @@
+<script setup>
+import LogViewer from './components/LogViewer.vue'
+</script>
+
+<template>
+    <LogViewer />
+</template>
+
+<script>
+export default {
+  name: 'app1',
+}
+</script>
+<style scoped>
+</style>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/main.css

@@ -0,0 +1,15 @@
+
+div#app {
+  width: 100%;
+  height: 100vh;
+}
+
+.screenshots-drawer {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+}
+
+.ag-theme-material {
+  --ag-value-change-value-highlight-background-color: #f9ff99;
+}

src/components/ComboboxFilter.js

@@ -0,0 +1,29 @@
+export default {
+    template: `
+      <select v-model="filter" class="v-select">
+        <option value=""> </option>
+        <option v-for="option in params.options" :value="option">
+           {{ option }}
+        </option>
+      </select>
+    `,
+    data: function () {
+        return {
+            filter: '',
+        };
+    },
+    methods: {
+        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 !== ''
+        },
+    },
+};

src/components/ExamineLogModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-dialog
+      v-model="examineLog"
+      width="50wv"
+  >
+    <v-card>
+      <v-card-text style="height: 70vh">
+        <ag-grid-vue
+            style="width: 100%; height: 100%;"
+            class="ag-theme-material"
+            @grid-ready="onGridReady"
+            :columnDefs="columnDefs"
+            :row-data="examineLogContent"
+            :supress-horisontal-scroll="true"
+            :enable-scrolling="true"
+            :enableCellTextSelection="true"
+            :ensureDomOrder="true"
+        ></ag-grid-vue>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" block @click="closeModal">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</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";
+import { VCard, VCardText, VCardActions } from 'vuetify/components/VCard'
+import { VDialog } from 'vuetify/components/VDialog'
+import { VBtn } from 'vuetify/components/VBtn'
+import { VTable } from 'vuetify/components/VTable'
+
+
+export default {
+  components: {
+    AgGridVue,
+    VCard,
+    VCardText,
+    VCardActions,
+    VBtn,
+    VDialog,
+    VTable,
+    ScreenshotCell: ScreenshotCell
+  },
+  data() {
+    return {
+      columnDefs:  [
+        {
+          field: 'key',
+          sortable: true,
+          filter: 'agTextColumnFilter',
+          resizable: true
+        },
+        {
+          field: 'value',
+          sortable: true,
+          filter: 'agTextColumnFilter',
+          resizable: true
+        },
+      ]
+    }
+  },
+  props: {
+    examineLogContent: Array,
+    closeModal: Function
+  },
+  computed: {
+    examineLog() {
+      return !!this.examineLogContent
+    }
+  },
+  methods: {
+    onGridReady(params) {
+      params.api.sizeColumnsToFit()
+    },
+  }
+}
+
+</script>

src/components/LogViewer.vue

@@ -0,0 +1,173 @@
+<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"
+      row-selection="single"
+      :onRowSelected="openExamineLog"
+      :supress-horisontal-scroll="true"
+      :enable-scrolling="true"
+    ></ag-grid-vue>
+    <ExamineLogModal :examine-log-content="examineLogContent" :close-modal="closeExamineLog" />
+  </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";
+import ExamineLogModal from "./ExamineLogModal.vue";
+import ComboboxFilter from "./ComboboxFilter.js";
+
+
+export default {
+  components: {
+    ExamineLogModal,
+    AgGridVue,
+    ComboboxFilter,
+    ScreenshotCell: ScreenshotCell
+  },
+  data() {
+    return {
+      examineLogContent: null,
+      gridApi: null,
+      gridColumnApi: null,
+      defaultColDef: {
+        width: 50,
+        initialPinned: true,
+        resizable: true,
+        enableCellChangeFlash: true
+      },
+      currentRowCount: 0,
+      comboBoxOptions: {},
+      viewRowCount: 20,
+    }
+  },
+  computed: {
+    columnDefs() {
+      return [
+        {
+          field: '@timestamp',
+          width: 70,
+          sortable: true
+        },
+        {
+          field: 'kubernetes.namespace',
+          headerName: 'namespace',
+          tooltipValueGetter: (params) => params.value,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.namespace'],
+            field: 'kubernetes.namespace',
+          }
+        },
+        {
+          field: 'kubernetes.pod.name',
+          headerName: 'pod',
+          tooltipValueGetter: (params) => params.value,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.pod.name'],
+            field: 'kubernetes.pod.name',
+          }
+        },
+        {
+          field: 'kubernetes.container.name',
+          headerName: 'container',
+          tooltipValueGetter: (params) => params.value,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.container.name'],
+            field: 'kubernetes.container.name',
+          }
+        },
+        {
+          field: 'message',
+          tooltipValueGetter: (params) => params.value,
+          width: 500,
+        },
+        {
+          field: 'stream',
+        },
+      ];
+    }
+  },
+  created() {
+    this.setupStream()
+  },
+  methods: {
+    setupStream() {
+      let es = new EventSource('/events');
+      es.onmessage = (e) => this.handleReceiveMessage(e)
+      es.addEventListener("filters", (e) => this.handleReceiveFilters(e))
+    },
+    onGridReady(params) {
+      this.gridApi = params.api;
+      this.gridColumnApi = params.columnApi;
+    },
+    handleReceiveMessage (event) {
+      const eventData = this.parseEventData(event.data);
+      const res = this.gridApi.applyTransaction({
+        add: [eventData]
+      });
+      const rowNode = res.add[0]
+      this.gridApi.flashCells({ rowNodes: [rowNode]});
+      this.gridApi.sizeColumnsToFit()
+    },
+    handleReceiveFilters (event) {
+      this.comboBoxOptions = this.parseEventData(event.data);
+    },
+    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)
+      }
+    },
+    openExamineLog (row) {
+      const selectedRow = row.data
+      row.node.setSelected(false)
+      this.examineLog = true
+      const flattened = flattenObj(selectedRow)
+      const pairs = [];
+      Object.keys(flattened).map((key) => {
+        pairs.push({
+          key: key,
+          value: flattened[key]
+        })
+      })
+      this.examineLogContent = pairs
+    },
+    closeExamineLog () {
+      this.examineLogContent = null
+    }
+  },
+}
+
+const flattenObj = (ob) => {
+  let result = {};
+  for (const i in ob) {
+    if ((typeof ob[i]) === 'object' && !Array.isArray(ob[i])) {
+      const temp = flattenObj(ob[i]);
+      for (const j in temp) {
+        result[i + '.' + j] = temp[j];
+      }
+    }
+    else {
+      result[i] = ob[i];
+    }
+  }
+  return result;
+};
+</script>

src/components/ScreenshotCell.js

@@ -0,0 +1,30 @@
+export default {
+    template: `<div>
+      <a @click="openDrawer">View screenshots</a>
+      <div v-if="drawerOpen" class="screenshots-drawer">
+        <img v-for="screenshot in screenshots" :src="screenshot.orig"/>
+      </div>
+    </div>`,
+    data: function () {
+        return {
+            screenshots: [],
+            drawerOpen: false,
+        };
+    },
+    beforeMount() {
+        this.updateImage(this.params);
+        this.updateImage(this.params);
+    },
+    methods: {
+        updateImage(params) {
+            this.screenshots = params.value
+            this.value = params.value;
+        },
+        refresh(params) {
+            this.updateImage(params);
+        },
+        openDrawer () {
+            this.drawerOpen = true
+        }
+    },
+};

src/main.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import vuetify from './plugins/vuetify'
+import { loadFonts } from './plugins/webfontloader'
+import './assets/main.css'
+loadFonts()
+
+createApp(App)
+  .use(vuetify)
+  .mount('#app')

src/plugins/vuetify.js

@@ -0,0 +1,10 @@
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Vuetify
+import { createVuetify } from 'vuetify'
+
+export default createVuetify(
+  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+)

src/plugins/webfontloader.js

@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}

src/set-public-path.js

@@ -0,0 +1,3 @@
+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("app1");

src/stores/counter.js

@@ -0,0 +1,14 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+
+
+  return { count, doubleCount, increment }
+})