correlation id support filtering

src/App.vue

@@ -65,11 +65,6 @@ const addToFacet = (f: Facet) => {
   store.facets[f.name].items[idx].count++
 }
 
-const resetAllFiltersAndFacets = () => {
-  storeFilter.resetToggles()
-  store.clearAllFacets()
-}
-
 const removeFromFacet = (r: Row) => {
   r.facets.forEach(f => {
     let idx = store.facets[f.name].items.findIndex(v => v.label === f.value)
@@ -605,10 +600,16 @@ const updateSampleLine = () => {
             <div class="counter">
               <span>{{ store.displayRows.length }} out of {{ store.rows.length }} logs</span>
               <br />
-              <button class="btn-sm" style="margin-top:4px" @click="useMainStore().modalShow = 'export-logs'">Export
+              <button class="btn-sm" style="margin-top:4px" @click="store.modalShow = 'export-logs'">Export
                 messages</button>
-              <button class="btn-sm" style="margin-top:4px" @click="resetAllFiltersAndFacets">Reset all
+              <button class="btn-sm" style="margin-top:4px" @click="store.resetAllFiltersAndFacets()">Reset all
                 filters</button>
+              <div v-if="store.correlationFilter" class="alert alert-info"
+                style="margin-top: 10px; margin:10px; font-size: 13px">
+                Correlation filter active ({{ store.correlationFilter }})
+                <button class="btn-sm" style="margin-top:4px" @click="store.resetCorrelationFilter()">Reset correlation
+                  filter</button>
+              </div>
             </div>
             <Filter />
             <FacetComponent :facets="store.facets" />

src/app.scss

@@ -269,6 +269,11 @@
     border: 1px solid var(--hl-bg4);
     background: var(--hl-bg3);
     border-radius: 7px;
+
+    &.alert-info {
+      border: 1px solid rgb(95, 118, 194);
+      background: rgb(76, 94, 154);
+    }
   }
 
   @import url(facet.scss);

src/components/Drawer.vue

@@ -37,6 +37,16 @@ const copyToClipboard = (value: string) => {
 
                 <button @click="$emit('close')">Close <kbd>Esc</kbd></button>
             </div>
+            <div>
+                <button @click="useMainStore().filterCorrelated(row.msg)" :disabled="!row.msg.correlation_id">
+                    Display correlated lines
+                </button>
+                <button @click="useMainStore().resetCorrelationFilter()" v-if="useMainStore().correlationFilter"
+                    style="margin-left: 5px">
+                    Reset correlation filter
+                </button>
+            </div>
+            <hr />
             <h3>Table columns</h3>
             <div v-for="col, k in layout?.columns.filter(c => !c.hidden)">
                 <h4 v-tooltip="'Click to copy'" style="display: inline;" @click="copyToClipboard(row.cells[k].text)">{{

src/components/SettingsDrawer.vue

@@ -81,6 +81,11 @@ type Message = {
      * background red.
      */
     style?: object,
+    /**
+     * A correlation identifier used to trace log messages that belongs to the same transaction 
+     * (chain of requests between components within a system).
+     */
+    correlation_id?: string
 }
 
 type CellHandler = {

src/store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 import { storageApp, storageLogs } from "./storage";
-import { FacetValues, Row } from "./types";
+import { FacetValues, Message, Row } from "./types";
 import { Layout } from "./config";
 import { useFilterStore } from "./stores/filter";
 import { client } from "./api";
@@ -55,6 +55,7 @@ export const useMainStore = defineStore("main", () => {
     const facets = ref<FacetValues>({})
     const searchbar = ref<string>("")
     const settingsDrawer = ref<boolean>(false)
+    const correlationFilter = ref<string>("")
 
     const initSettings = ref<InitSettings>()
 
@@ -169,6 +170,23 @@ export const useMainStore = defineStore("main", () => {
         return '-'
     })
 
+    const filterCorrelated = (row: Message) => {
+        if (!row.correlation_id) {
+            return
+        }
+        resetAllFiltersAndFacets()
+        correlationFilter.value = row.correlation_id
+    }
+
+    const resetAllFiltersAndFacets = () => {
+        useFilterStore().resetToggles()
+        clearAllFacets()
+    }
+
+    const resetCorrelationFilter = () => {
+        correlationFilter.value = ""
+    }
+
     const changeReceiveStatus = async (status: ReceiveStatus) => {
         switch (status) {
             case 'following':
@@ -222,6 +240,11 @@ export const useMainStore = defineStore("main", () => {
         let naOriginFilter = filters.filter(f => f.startsWith('origin_na')).length > 0
         let originFilter = filters.filter(f => f.startsWith('origin_')).length > 0
         return rows.value.filter((r) => {
+
+            if (correlationFilter.value && correlationFilter.value != r.msg.correlation_id) {
+                return false;
+            }
+
             let ret = true
             if (filters.length > 0) {
                 if (filters.includes('starred') && !r.starred) return false
@@ -289,7 +312,10 @@ export const useMainStore = defineStore("main", () => {
         stickedToBottom,
 
         clearAllRows,
-        clearAllFacets,
+        resetAllFiltersAndFacets,
+        filterCorrelated,
+        correlationFilter,
+        resetCorrelationFilter,
 
         settingsDrawer,
 

src/types.ts

@@ -59,6 +59,32 @@ export type Message = {
      * background red.
      */
     style?: object,
+    /**
+     * A correlation identifier used to trace log messages that belongs to the same transaction 
+     * (chain of requests between components within a system).
+     */
+    correlation_id?: string,
+    /**
+     * This object can be filled with values that represent timings 
+     * of the event represented by the particular log line.
+     * All of the value must be positive numbers. 
+     * There is no defined unit.
+     */
+    timing?: {
+        /**
+         * Represents a start of the event
+        */
+        start: number,
+        /**
+         * Represents an end of the event
+        */
+        end?: number,
+        /**
+         * Represents a duration of the event. In case an `end` is present
+         * this field will be ignored.
+        */
+        duration?: number
+    }
 }
 
 export type CellHandler = {