Skip to content

Commit 8dd793a

Browse files
ktx-kirtanktx-kirtan
authored
fix: custom query not getting saved (openobserve#422) (openobserve#426)
* fix custom query not getting saved (openobserve#422) * add missing watcher for the streams loading * remove validation check on loading of the data for edit panel * do not try to validate the data on edit page
1 parent d0c3ee2 commit 8dd793a

File tree

5 files changed

+27
-23
lines changed

5 files changed

+27
-23
lines changed

‎web/src/components/dashboards/QueryEditor.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ export default defineComponent({
315315
watch(
316316
() => props.query,
317317
() => {
318-
if (props.readOnly) {
318+
if(props.readOnly || !editorObj.hasWidgetFocus()) {
319319
editorObj.getModel().setValue(props.query);
320320
}
321321
}

‎web/src/components/dashboards/SearchBar.vue

+15-11
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
<div @click.prevent="showWarning" style="cursor: pointer;">
2323
<div style="pointer-events: none;">
2424
<q-toggle
25-
v-model="dashboardPanelData.layout.showCustomQuery"
25+
v-model="dashboardPanelData.data.customQuery"
2626
:label="t('panel.customSql')"
27-
@update:model-value="onUpdateToggle(dashboardPanelData.layout.showCustomQuery)"
27+
@update:model-value="onUpdateToggle(dashboardPanelData.data.customQuery)"
2828
/>
2929
</div>
3030
</div>
@@ -45,7 +45,7 @@
4545
v-model:fields="dashboardPanelData.meta.stream.selectedStreamFields"
4646
v-model:functions="dashboardPanelData.meta.stream.functions"
4747
@run-query="searchData"
48-
:readOnly="!dashboardPanelData.layout.showCustomQuery"
48+
:readOnly="!dashboardPanelData.data.customQuery"
4949
></query-editor>
5050
<div style="color: red;" class="q-mx-sm">{{ dashboardPanelData.meta.errors.queryErrors.join(', ') }}&nbsp;</div>
5151
</div>
@@ -61,7 +61,7 @@
6161

6262
<script lang="ts">
6363
// @ts-nocheck
64-
import { defineComponent, ref, watch, reactive, toRaw } from "vue";
64+
import { defineComponent, ref, watch, reactive, toRaw, onActivated } from "vue";
6565
import { useI18n } from "vue-i18n";
6666
import { useRouter } from "vue-router";
6767
import { useQuasar } from "quasar";
@@ -101,17 +101,21 @@ export default defineComponent({
101101
showQuery.value = !showQuery.value
102102
}
103103

104+
onActivated(() => {
105+
dashboardPanelData.meta.errors.queryErrors = []
106+
})
107+
104108
// Generate the query when the fields are updated
105109
watch(() => [
106110
dashboardPanelData.data.fields.stream,
107111
dashboardPanelData.data.fields.x,
108112
dashboardPanelData.data.fields.y,
109113
dashboardPanelData.data.fields.filter,
110-
dashboardPanelData.layout.showCustomQuery
114+
dashboardPanelData.data.customQuery
111115
], () => {
112116

113117
// only continue if current mode is auto query generation
114-
if(!dashboardPanelData.layout.showCustomQuery){
118+
if(!dashboardPanelData.data.customQuery){
115119
// console.log("Updating query");
116120

117121
// STEP 1: first check if there is at least 1 field selected
@@ -183,11 +187,11 @@ export default defineComponent({
183187
}
184188
}, {deep: true})
185189

186-
watch(() => [dashboardPanelData.data.query, dashboardPanelData.layout.showCustomQuery], ()=>{
187-
// console.log("query changes in search bar",dashboardPanelData.layout.showCustomQuery);
190+
watch(() => [dashboardPanelData.data.query, dashboardPanelData.data.customQuery, dashboardPanelData.meta.stream.selectedStreamFields], ()=>{
191+
// console.log("query changes in search bar",dashboardPanelData.data.customQuery);
188192

189193
// only continue if current mode is show custom query
190-
if(dashboardPanelData.layout.showCustomQuery){
194+
if(dashboardPanelData.data.customQuery){
191195
updateQueryValue()
192196
} else {
193197
// auto query mode selected
@@ -202,7 +206,7 @@ export default defineComponent({
202206
// dashboardPanelData.meta.editorValue = value;
203207
// dashboardPanelData.data.query = value;
204208

205-
if (dashboardPanelData.layout.showCustomQuery) {
209+
if (dashboardPanelData.data.customQuery) {
206210
// console.log("query: value", dashboardPanelData.data.query);
207211

208212
// empty the errors
@@ -269,7 +273,7 @@ export default defineComponent({
269273
}
270274

271275
const changeToggle = () => {
272-
dashboardPanelData.layout.showCustomQuery = !dashboardPanelData.layout.showCustomQuery
276+
dashboardPanelData.data.customQuery = !dashboardPanelData.data.customQuery
273277
removeXYFilters()
274278
}
275279

‎web/src/components/dashboards/addPanel/Layout.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
<q-td colspan="100%">
9696
<div>
9797
<div class="">
98-
<div v-if="!dashboardPanelData.layout.showCustomQuery" class="q-mr-xs q-mb-sm">
98+
<div v-if="!dashboardPanelData.data.customQuery" class="q-mr-xs q-mb-sm">
9999
<q-select
100100
v-model="
101101
dashboardPanelData.data.fields.x[props.pageIndex]
@@ -221,7 +221,7 @@
221221
<q-td colspan="100%">
222222
<div>
223223
<div class="flex items-center q-mb-sm">
224-
<div v-if="!dashboardPanelData.layout.showCustomQuery" class="q-mr-xs q-mb-sm" style="width: 160px">
224+
<div v-if="!dashboardPanelData.data.customQuery" class="q-mr-xs q-mb-sm" style="width: 160px">
225225
<q-select
226226
v-model="
227227
dashboardPanelData.data.fields.y[props.pageIndex]

‎web/src/composables/useDashboardPanel.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ const getDefaultDashboardPanelData = () => (
4949
show_legends: true,
5050
},
5151
query: "",
52+
customQuery: false
5253
},
5354
layout: {
54-
showCustomQuery: false,
5555
splitter: 20
5656
},
5757
meta: {
@@ -105,8 +105,8 @@ const useDashboardPanelData = () => {
105105
// check for existing field
106106
if(!dashboardPanelData.data.fields.x.find((it:any) => it.column == name)) {
107107
dashboardPanelData.data.fields.x.push({
108-
label: !dashboardPanelData.layout.showCustomQuery ? generateLabelFromName(name) : name,
109-
alias: !dashboardPanelData.layout.showCustomQuery ? 'x_axis_' + (dashboardPanelData.data.fields.x.length + 1) : name,
108+
label: !dashboardPanelData.data.customQuery ? generateLabelFromName(name) : name,
109+
alias: !dashboardPanelData.data.customQuery ? 'x_axis_' + (dashboardPanelData.data.fields.x.length + 1) : name,
110110
column: name,
111111
color: null,
112112
aggregationFunction: (name == '_timestamp') ? 'histogram' : null
@@ -121,8 +121,8 @@ const useDashboardPanelData = () => {
121121

122122
if(!dashboardPanelData.data.fields.y.find((it:any) => it.column == name)) {
123123
dashboardPanelData.data.fields.y.push({
124-
label: !dashboardPanelData.layout.showCustomQuery ? generateLabelFromName(name) : name,
125-
alias: !dashboardPanelData.layout.showCustomQuery ? 'y_axis_' + (dashboardPanelData.data.fields.y.length + 1) : name,
124+
label: !dashboardPanelData.data.customQuery ? generateLabelFromName(name) : name,
125+
alias: !dashboardPanelData.data.customQuery ? 'y_axis_' + (dashboardPanelData.data.fields.y.length + 1) : name,
126126
column: name,
127127
color: colors[dashboardPanelData.data.fields.y.length % colors.length],
128128
aggregationFunction: 'count'

‎web/src/views/Dashboards/addPanel/AddPanel.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export default defineComponent({
163163
);
164164
// console.log("panel data", panelData);
165165
Object.assign(dashboardPanelData.data, panelData);
166-
runQuery();
166+
chartData.value = JSON.parse(JSON.stringify(dashboardPanelData.data));
167167
} else {
168168
editMode.value = false;
169169
resetDashboardPanelData();
@@ -190,7 +190,7 @@ export default defineComponent({
190190
})
191191

192192
watch(()=> dashboardPanelData.data.type, ()=>{
193-
runQuery()
193+
chartData.value = JSON.parse(JSON.stringify(dashboardPanelData.data));
194194
})
195195

196196
const runQuery = () => {
@@ -275,12 +275,12 @@ export default defineComponent({
275275
}
276276

277277
// check if query syntax is valid
278-
if(dashboardData.layout.showCustomQuery && dashboardData.meta.errors.queryErrors.length){
278+
if(dashboardData.data.customQuery && dashboardData.meta.errors.queryErrors.length){
279279
error.push("Please add valid query syntax")
280280
}
281281

282282
// check if field selection is from the custom query fields when the custom query mode is ON
283-
if(dashboardData.layout.showCustomQuery){
283+
if(dashboardData.data.customQuery){
284284

285285
// console.log("-data-",dashboardPanelData.data.fields.x.filter((it:any) => !dashboardPanelData.meta.stream.customQueryFields.find((i:any) => i.name == it.column)) );
286286

0 commit comments

Comments
 (0)