Skip to content

feat(ui): implement 'Show in Context' and reactive live search #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rithakith wants to merge 1 commit into from
Closed

feat(ui): implement 'Show in Context' and reactive live search #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,9 +504,6 @@ const addDemoData = (count: number = 1) => {
}
}

const updateSearchbar = () => {
store.searchbar = searchbar.value
}

globalEventBus.on('searchbar-update', (value: string) => {
store.searchbar = value
Expand Down Expand Up @@ -543,6 +540,12 @@ onMounted(async () => {


initKeyEventListeners()
globalEventBus.on('scroll-to-row', (id: string) => {
let el = document.getElementById('row-' + id)
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
})

table.value?.addEventListener("scroll", () => {
if (!shouldStickToBottom()) {
Expand Down Expand Up @@ -639,8 +642,8 @@ const updateSampleLine = () => {
</div>
</div>
<div class="right">
<input type="text" class="searchbar" id="searchbar-query" v-model="searchbar" @keyup.enter="updateSearchbar"
placeholder="Type query, then hit 'Enter' (powered by breser.dev)" />
<input type="text" class="searchbar" id="searchbar-query" v-model="store.searchbar"
placeholder='Filter logs... (example: data.user == "admin")' />
<!-- <button class="btn clear" @click="updateSearchbar" style="display: flex;align-items: center;">
Search
<CornerRightDown
Expand Down Expand Up @@ -738,8 +741,10 @@ const updateSampleLine = () => {
<th v-if="store.correlationFilter">Trace
</th>
</tr>
<tr class="row" :class="{ opened: row.opened, open: row.open }" v-for="row in store.displayRows"
@click="store.openLogDrawer(row)" :style="(row.msg.style as StyleValue || {})">
<tr :id="'row-' + row.id" class="row"
:class="{ opened: row.opened, open: row.open, highlighted: store.highlightedRowId === row.id }"
v-for="row in store.displayRows" @click="store.openLogDrawer(row)"
:style="(row.msg.style as StyleValue || {})">
<td>
<span class="mark" :class="{ active: row.starred }" @click.stop="store.toggleRowMark(row)">
⬤
Expand All @@ -751,10 +756,10 @@ const updateSampleLine = () => {
:class="{ 'cell-error': row.cells[k2].error }">
<div v-if="row.cells[k2].allowHtmlInText" :style="{ width: columns[k2].width + 'px' }"
v-html="row.cells[k2].text !== undefined ? row.cells[k2].text : row.cells[k2].error || '&nbsp;'"
@contextmenu.prevent="useContextMenuStore().show($event, { type: 'cell', value: row.cells[k2].text, columnId: c.id, error: row.cells[k2].error })">
@contextmenu.prevent="useContextMenuStore().show($event, { type: 'cell', value: row.cells[k2].text, columnId: c.id, error: row.cells[k2].error, rowId: row.id })">
</div>
<div v-else :style="{ width: columns[k2].width + 'px' }"
@contextmenu.prevent="useContextMenuStore().show($event, { type: 'cell', value: row.cells[k2].text, columnId: c.id, error: row.cells[k2].error })">
@contextmenu.prevent="useContextMenuStore().show($event, { type: 'cell', value: row.cells[k2].text, columnId: c.id, error: row.cells[k2].error, rowId: row.id })">
{{ row.cells[k2].text !== undefined ? row.cells[k2].text : row.cells[k2].error || "&nbsp;" }}
</div>

Expand Down
6 changes: 6 additions & 0 deletions src/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,12 @@
font-weight: 800;
background-color: var(--hl-bg3) !important;
}

tr.row.highlighted {
background-color: var(--info) !important;
opacity: 1 !important;
border-left: 2px solid white;
}
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/Drawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ const copyToClipboard = (value: string | undefined) => {
:disabled="!row.msg.correlation_id && !layout?.settings.correlationIdField">
Display correlated lines
</button>
<button @click="useMainStore().showInContext(row.id)" style="margin-left: 5px">
Show in context
</button>
<button @click="useMainStore().resetCorrelationFilter()" v-if="useMainStore().correlationFilter"
style="margin-left: 5px">
Reset correlation filter
Expand Down
3 changes: 2 additions & 1 deletion src/event_bus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export function defineEventBus<T extends EventDefinition>(_: T = {} as T) {

// Usage example: create a typed event bus
export type GlobalEvents = {
'searchbar-update': [value: string]
'searchbar-update': [value: string],
'scroll-to-row': [id: string]
}

// Create a global instance
Expand Down
11 changes: 11 additions & 0 deletions src/logdy-core.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"folders": [
{
"path": "../../logdy-core"
},
{
"path": ".."
}
],
"settings": {}
}
59 changes: 40 additions & 19 deletions src/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { formatThousands, getUrlParam } from "./utils";
import { SortPropName } from "./components/Facet.vue";
import { BreserFilterData, BreserSetQuery } from "./breser";
import moment from "moment";
import { globalEventBus } from "./event_bus";

export interface Notification {
id?: string;
Expand Down Expand Up @@ -76,6 +77,7 @@ export const useMainStore = defineStore("main", () => {
const searchbar = ref<string>("")
const settingsDrawer = ref<boolean>(false)
const correlationFilter = ref<string>("")
const highlightedRowId = ref<string>("")
const tracesRows = ref<Record<string, TraceRow>>({})
const facetSort = ref<SortPropName>("label")

Expand Down Expand Up @@ -214,7 +216,7 @@ export const useMainStore = defineStore("main", () => {
return '-'
})

const filterCorrelated = (row: Message) => {
const filterCorrelated = (row: Row | Message) => {
if (!row.correlation_id) {
return
}
Expand All @@ -226,6 +228,17 @@ export const useMainStore = defineStore("main", () => {
refeshFilterCorrelated()
}

const showInContext = (rowId: string) => {
searchbar.value = ""
globalEventBus.emit('searchbar-update', "")
resetAllFiltersAndFacets()
correlationFilter.value = ""
highlightedRowId.value = rowId
setTimeout(() => {
globalEventBus.emit('scroll-to-row', rowId)
}, 50)
}

const refeshFilterCorrelated = () => {
if (!correlationFilter.value || displayRows.value.length === 0) {
return
Expand Down Expand Up @@ -269,6 +282,7 @@ export const useMainStore = defineStore("main", () => {

const resetCorrelationFilter = () => {
correlationFilter.value = ""
highlightedRowId.value = ""
}

const changeReceiveStatus = async (status: ReceiveStatus) => {
Expand Down Expand Up @@ -402,17 +416,10 @@ export const useMainStore = defineStore("main", () => {
}
})
return cnt === 0
}).filter(r => {
if (breserQuery.value.length > 0) {
return true
}
if (searchbar.value.length < 3) {
return true
}
return (r.msg.content || "").search(new RegExp(searchbar.value, 'i')) >= 0
})

if (isRecordJson && breserQuery.value.length > 0) {
let breserResults: boolean[] = []
if (isRecordJson && breserQuery.value.length > 0 && breserQueryError.value.length === 0) {
let res = BreserFilterData(response.map(m => {
return {
data: m.msg.json_content,
Expand All @@ -421,18 +428,30 @@ export const useMainStore = defineStore("main", () => {
origin: m.msg.origin
}
}).filter(m => m))
if (!res.result || res.result.length != response.length) {
return response
}
if (res && res.error) {
breserQueryError.value = res.error
return response
if (res && !res.error && res.result && res.result.length == response.length) {
breserResults = res.result
}
return response.filter((_, i) => {
return res.result[i]
})
}

response = response.filter((r, i) => {
if (searchbar.value.length < 1) {
return true
}

// check string match
const matchesString = (r.msg.content || "").search(new RegExp(searchbar.value, 'i')) >= 0
if (matchesString) {
return true
}

// check breser match
if (breserResults.length > 0 && breserResults[i]) {
return true
}

return false
})

if (layout.value.settings.entriesOrder === 'desc') {
return response.reverse()
} else {
Expand Down Expand Up @@ -516,7 +535,9 @@ export const useMainStore = defineStore("main", () => {
resetAllFiltersAndFacets,
filterCorrelated,
filterCorrelatedId,
showInContext,
correlationFilter,
highlightedRowId,
resetCorrelationFilter,
tracesRows,
refeshFilterCorrelated,
Expand Down
11 changes: 9 additions & 2 deletions src/stores/contextMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface ActionColumnHeader {
type: "column_header", name: string
}
interface ActionCell {
type: "cell", value?: string, columnId: string, error?: string
type: "cell", value?: string, columnId: string, error?: string, rowId: string
}

type ActionTypes = ActionColumnHeader | ActionCell
Expand Down Expand Up @@ -49,11 +49,18 @@ export const useContextMenuStore = defineStore("context_menu", () => {
actions.value?.push({
label: "Display correlated lines",
fn: () => {
useMainStore().filterCorrelatedId(type.value!)
useMainStore().filterCorrelatedId(type.value!, type.rowId)
hide()
}
})
}
actions.value?.push({
label: "Show in context",
fn: () => {
useMainStore().showInContext(type.rowId)
hide()
}
})
/**
* The feature of filtering by value is currently disabled due to the fact that
* we're unable to effectively trace the source field only by using name.
Expand Down