Skip to content

Commit 13db6d5

Browse files
omkarK06omkarK06
authored
fix: Log page UI fixes (openobserve#840)
1. Disabled trimming of column content when only one column is added. 2. Added log expansion in log row 3. Changed font to 'monospace' 4. Added Field List collapse 5. Expanded sidebar on hover
1 parent 18fd9ac commit 13db6d5

File tree

5 files changed

+115
-76
lines changed

5 files changed

+115
-76
lines changed

‎web/src/components/MenuLink.vue

+1-9
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,11 @@
3333
:target="target"
3434
@click="external ? openWebPage(link) : ''"
3535
>
36-
<q-tooltip
37-
v-if="mini"
38-
anchor="center right"
39-
self="center left"
40-
:offset="[10, 10]"
41-
>
42-
{{ title }}
43-
</q-tooltip>
4436
<q-item-section v-if="icon" avatar>
4537
<q-icon :name="icon" />
4638
</q-item-section>
4739

48-
<q-item-section v-if="!mini">
40+
<q-item-section>
4941
{{ title }}
5042
</q-item-section>
5143
</q-item>

‎web/src/layouts/MainLayout.vue

+6-26
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,10 @@
1818
<q-header>
1919
<q-toolbar>
2020
<img
21-
v-if="!miniMode"
2221
class="appLogo"
2322
:src="getImageURL('images/common/app_logo_zo.png')"
2423
@click="goToHome"
2524
/>
26-
<img
27-
v-else
28-
class="appLogo__mini"
29-
:src="getImageURL('images/common/mini_logo.svg')"
30-
/>
31-
<q-btn
32-
dense
33-
flat
34-
round
35-
:icon="'img:' + getImageURL('images/common/menu_icon.svg')"
36-
@click="toggleLeftDrawer"
37-
/>
3825

3926
<q-toolbar-title></q-toolbar-title>
4027
<div class="headerMenu float-left" v-if="store.state.quotaThresholdMsg">
@@ -183,6 +170,10 @@
183170
:width="210"
184171
:breakpoint="500"
185172
bordered
173+
show-if-above
174+
@mouseover="miniMode = false"
175+
@mouseout="miniMode = true"
176+
mini-to-overlay
186177
>
187178
<q-list class="leftNavList">
188179
<menu-link
@@ -630,15 +621,6 @@ export default defineComponent({
630621
orgOptions,
631622
leftDrawerOpen: true,
632623
miniMode,
633-
toggleLeftDrawer() {
634-
miniMode.value = !miniMode.value;
635-
const leftDrawer = miniMode.value;
636-
const currentUser: any = useLocalCurrentUser();
637-
currentUser.miniMode = leftDrawer;
638-
store.dispatch("setCurrentUser", currentUser);
639-
useLocalCurrentUser(currentUser);
640-
window.dispatchEvent(new Event("resize"));
641-
},
642624
user,
643625
zoBackendUrl,
644626
getImageURL,
@@ -706,10 +688,8 @@ export default defineComponent({
706688
}
707689
}
708690

709-
.miniMode {
710-
.q-page-container {
711-
padding-left: 5rem !important;
712-
}
691+
.q-page-container {
692+
padding-left: 5rem !important;
713693
}
714694

715695
.q-drawer {

‎web/src/plugins/logs/DetailTable.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@
162162
</q-item>
163163
</q-list>
164164
</q-btn-dropdown>
165+
165166
<pre
166167
:data-test="`log-detail-${value}-value`"
167168
class="table-pre"
@@ -177,7 +178,6 @@
177178
</div>
178179
</q-card-section>
179180
</q-tab-panel>
180-
181181
<q-tab-panel name="json" class="q-pa-none">
182182
<q-card-section
183183
data-test="log-detail-json-content"

‎web/src/plugins/logs/Index.vue

+45-15
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<template v-slot:after>
3737
<div
3838
id="thirdLevel"
39-
class="row scroll"
39+
class="row scroll relative-position thirdlevel"
4040
style="width: 100%"
4141
v-if="searchObj.data.stream.streamLists.length > 0"
4242
>
@@ -46,20 +46,35 @@
4646
:limits="searchObj.config.splitterLimit"
4747
style="width: 100%"
4848
>
49-
<template #before v-if="searchObj.meta.showFields">
50-
<index-list
51-
data-test="logs-search-index-list"
52-
:key="searchObj.data.stream.streamLists"
53-
/>
54-
</template>
55-
<template #separator>
56-
<q-avatar
57-
color="primary"
58-
text-color="white"
59-
size="20px"
60-
icon="drag_indicator"
61-
style="top: 10px"
62-
/>
49+
<template #before>
50+
<div class="relative-position">
51+
<index-list
52+
v-if="searchObj.meta.showFields"
53+
data-test="logs-search-index-list"
54+
:key="searchObj.data.stream.streamLists"
55+
/>
56+
<q-btn
57+
:icon="
58+
searchObj.meta.showFields
59+
? 'chevron_left'
60+
: 'chevron_right'
61+
"
62+
:title="
63+
searchObj.meta.showFields
64+
? 'Collapse Fields'
65+
: 'Open Fields'
66+
"
67+
dense
68+
size="20px"
69+
round
70+
class="q-mr-xs field-list-collapse-btn"
71+
color="primary"
72+
:style="{
73+
right: searchObj.meta.showFields ? '-20px' : '-24px',
74+
}"
75+
@click="collapseFieldList"
76+
></q-btn>
77+
</div>
6378
</template>
6479
<template #after>
6580
<div
@@ -1314,6 +1329,11 @@ export default defineComponent({
13141329
}
13151330
};
13161331

1332+
const collapseFieldList = () => {
1333+
if (searchObj.meta.showFields) searchObj.meta.showFields = false;
1334+
else searchObj.meta.showFields = true;
1335+
};
1336+
13171337
return {
13181338
store,
13191339
router,
@@ -1335,6 +1355,7 @@ export default defineComponent({
13351355
searchAroundData,
13361356
verifyOrganizationStatus,
13371357
getStreamList,
1358+
collapseFieldList,
13381359
};
13391360
},
13401361
computed: {
@@ -1539,5 +1560,14 @@ div.plotly-notifier {
15391560
overflow: visible !important;
15401561
}
15411562
}
1563+
1564+
.thirdlevel {
1565+
.field-list-collapse-btn {
1566+
z-index: 9;
1567+
position: absolute;
1568+
top: 5px;
1569+
font-size: 12px !important;
1570+
}
1571+
}
15421572
}
15431573
</style>

‎web/src/plugins/logs/SearchResult.vue

+62-25
Original file line numberDiff line numberDiff line change
@@ -93,28 +93,44 @@
9393
:key="index + '-' + column.name"
9494
class="field_list"
9595
>
96-
<high-light
97-
:content="
98-
column.name == 'source'
99-
? column.prop(row)
100-
: column.prop(row, column.name).length > 100
101-
? column.prop(row, column.name).substr(0, 100) + '...'
102-
: column.name != '@timestamp'
103-
? row[column.name]
104-
: column.prop(row, column.name)
105-
"
106-
:query-string="
107-
searchObj.meta.sqlMode
108-
? searchObj.data.query.split('where')[1]
109-
: searchObj.data.query
110-
"
111-
:title="
112-
column.prop(row, column.name).length > 100 &&
113-
column.name != 'source'
114-
? column.prop(row, column.name)
115-
: ''
116-
"
117-
></high-light>
96+
<div class="flex row items-center no-wrap">
97+
<q-btn
98+
v-if="column.name === '@timestamp'"
99+
:icon="
100+
expandedLogs[row._timestamp]
101+
? 'expand_more'
102+
: 'chevron_right'
103+
"
104+
dense
105+
size="xs"
106+
flat
107+
class="q-mr-xs"
108+
@click.stop="expandLog(row)"
109+
></q-btn>
110+
<high-light
111+
:content="
112+
column.name == 'source'
113+
? column.prop(row)
114+
: searchObj.data.resultGrid.columns.length > 2 &&
115+
column.prop(row, column.name).length > 100
116+
? column.prop(row, column.name).substr(0, 100) + '...'
117+
: column.name != '@timestamp'
118+
? row[column.name]
119+
: column.prop(row, column.name)
120+
"
121+
:query-string="
122+
searchObj.meta.sqlMode
123+
? searchObj.data.query.split('where')[1]
124+
: searchObj.data.query
125+
"
126+
:title="
127+
column.prop(row, column.name).length > 100 &&
128+
column.name != 'source'
129+
? column.prop(row, column.name)
130+
: ''
131+
"
132+
></high-light>
133+
</div>
118134
<div
119135
v-if="column.closable && row[column.name]"
120136
class="field_overlay"
@@ -137,8 +153,14 @@
137153
"
138154
/>
139155
</div>
140-
</q-td> </q-tr
141-
></template>
156+
</q-td>
157+
</q-tr>
158+
<q-tr v-if="expandedLogs[row._timestamp]">
159+
<td :colspan="searchObj.data.resultGrid.columns.length">
160+
<pre class="log_json_content">{{ row }}</pre>
161+
</td>
162+
</q-tr>
163+
</template>
142164
</q-virtual-scroll>
143165
<q-dialog
144166
v-model="searchObj.meta.showDetailTab"
@@ -172,7 +194,7 @@
172194

173195
<script lang="ts">
174196
import { defineComponent, ref } from "vue";
175-
import { useQuasar, date } from "quasar";
197+
import { useQuasar } from "quasar";
176198
import { useStore } from "vuex";
177199
import { useI18n } from "vue-i18n";
178200

@@ -264,6 +286,7 @@ export default defineComponent({
264286
const searchTableRef: any = ref(null);
265287

266288
const plotChart: any = ref(null);
289+
const expandedLogs: any = ref({});
267290

268291
const reDrawChart = () => {
269292
if (
@@ -315,6 +338,12 @@ export default defineComponent({
315338
emit("remove:searchTerm", term);
316339
};
317340

341+
const expandLog = async (row: any) => {
342+
if (expandedLogs.value[row._timestamp])
343+
delete expandedLogs.value[row._timestamp];
344+
else expandedLogs.value[row._timestamp] = true;
345+
};
346+
318347
return {
319348
t,
320349
store,
@@ -330,7 +359,9 @@ export default defineComponent({
330359
navigateRowDetail,
331360
totalHeight,
332361
reDrawChart,
362+
expandLog,
333363
getImageURL,
364+
expandedLogs,
334365
};
335366
},
336367
});
@@ -463,6 +494,10 @@ export default defineComponent({
463494
font-weight: bold;
464495
}
465496
}
497+
498+
.log_json_content {
499+
white-space: pre-wrap;
500+
}
466501
}
467502
.thead-sticky tr > *,
468503
.tfoot-sticky tr > * {
@@ -486,6 +521,8 @@ export default defineComponent({
486521
position: relative;
487522
overflow: visible;
488523
cursor: default;
524+
font-size: 12px;
525+
font-family: monospace;
489526

490527
.field_overlay {
491528
position: absolute;

0 commit comments

Comments
 (0)