starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-06 08:09:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Quick mode fixes (#3079)

Browse Source
This commit is contained in:
Bhargav
2024-03-23 10:18:33 +05:30
committed by GitHub
parent a9285e731c
commit 0d2b35906f
6 changed files with 293 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/settings/General.vue
+96 -58
View File
@@ -65,8 +65,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<q-separator />
<div class="q-mx-lg">
<div class="q-gutter-sm row q-mt-xs">
<div v-if="editingText || store.state.zoConfig.custom_logo_text == ''" class="q-gutter-md row items-start">
<q-input
<div
v-if="editingText || store.state.zoConfig.custom_logo_text == ''"
class="q-gutter-md row items-start"
>
<q-input
color="input-border"
bg-color="input-bg"
class="q-py-md showLabelOnTop"
@@ -76,43 +79,54 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
dense
data-test="settings_ent_logo_custom_text"
:label="t('settings.customLogoText')"
v-model="customText"
v-model="customText"
/>
<div class="btn-group relative-position vertical-middle" style="margin-top: 55px;">
<q-btn
data-test="settings_ent_logo_custom_text_save_btn"
:loading="onSubmit.isLoading.value"
:label="t('dashboard.save')"
class="text-bold no-border q-mr-sm"
color="secondary"
size="sm"
type="submit"
no-caps
@click="updateCustomText"
/>
<q-btn type="button" size="sm" :label="t('common.cancel')" @click="editingText=!editingText"></q-btn>
<div
class="btn-group relative-position vertical-middle"
style="margin-top: 55px"
>
<q-btn
data-test="settings_ent_logo_custom_text_save_btn"
:loading="onSubmit.isLoading.value"
:label="t('dashboard.save')"
class="text-bold no-border q-mr-sm"
color="secondary"
size="sm"
type="submit"
no-caps
@click="updateCustomText"
/>
<q-btn
type="button"
size="sm"
:label="t('common.cancel')"
@click="editingText = !editingText"
></q-btn>
</div>
</div>
<div v-else style="margin-top: 17px;">
<q-label class="q-pt-md text-bold">{{ t("settings.customLogoText") }}</q-label><br />
{{ store.state.zoConfig.custom_logo_text || "<No Text Available>" }}
<q-btn
data-test="settings_ent_logo_custom_text_edit_btn"
:loading="onSubmit.isLoading.value"
icon="edit"
size="sm"
class="text-bold"
type="submit"
@click="editingText=!editingText"
/>
<div v-else style="margin-top: 17px">
<q-label class="q-pt-md text-bold">{{
t("settings.customLogoText")
}}</q-label
><br />
{{ store.state.zoConfig.custom_logo_text || "No Text Available" }}
<q-btn
data-test="settings_ent_logo_custom_text_edit_btn"
:loading="onSubmit.isLoading.value"
icon="edit"
size="sm"
class="text-bold"
type="submit"
@click="editingText = !editingText"
/>
</div>
</div>
<q-separator class="q-mt-sm"></q-separator>
<div class="q-gutter-sm row q-mt-xs">
<q-label class="q-pt-sm text-bold full-width">{{ t("settings.customLogoTitle") }} </q-label><br />
<q-label class="q-pt-sm text-bold full-width"
>{{ t("settings.customLogoTitle") }} </q-label
><br />
<div
v-if="
store.state.zoConfig.hasOwnProperty('custom_logo_img') &&
@@ -126,17 +140,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
`data:image; base64, ` + store.state.zoConfig.custom_logo_img
"
:alt="t('settings.logoLabel')"
style="max-width: 150px; max-height: 31px;"
style="max-width: 150px; max-height: 31px"
class="q-mx-md"
/>
<q-btn icon="delete"
data-test="setting_ent_custom_logo_img_delete_btn"
@click="confirmDeleteLogo()" class="q-mx-md" size="sm"
></q-btn
>
</div>
<q-btn
icon="delete"
data-test="setting_ent_custom_logo_img_delete_btn"
@click="confirmDeleteLogo()"
class="q-mx-md"
size="sm"
></q-btn>
</div>
<q-file
data-test="setting_ent_custom_logo_img_file_upload"
data-test="setting_ent_custom_logo_img_file_upload"
v-else
v-model="files"
:label="t('settings.logoLabel')"
@@ -164,6 +180,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
size="lg"
color="primary"
></q-spinner-hourglass>
<q-dialog v-model="confirmDeleteImage">
<q-card>
<q-card-section>
{{ t("settings.deleteLogoMessage") }}
</q-card-section>
<q-card-actions align="right">
<q-btn
data-test="logs-search-bar-confirm-dialog-cancel-btn"
:label="t('confirmDialog.cancel')"
color="primary"
@click="cancelConfirmDialog"
/>
<q-btn
data-test="logs-search-bar-confirm-dialog-ok-btn"
:label="t('confirmDialog.ok')"
color="positive"
@click="confirmDialogOK"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script lang="ts">
@@ -182,21 +220,15 @@ import configService from "@/services/config";
export default defineComponent({
name: "PageGeneralSettings",
methods: {
cancelConfirmDialog() {
this.confirmDeleteImage = false;
},
confirmDialogOK() {
this.confirmDeleteImage = false;
this.deleteLogo();
},
confirmDeleteLogo() {
this.$q
.dialog({
title: this.t("settings.deleteLogoTitle"),
message: this.t("settings.deleteLogoMessage"),
cancel: true,
persistent: true,
ok: {
color: "negative",
label: this.t("common.delete"),
},
})
.onOk(() => {
this.deleteLogo();
});
this.confirmDeleteImage = true;
},
},
setup() {
@@ -210,6 +242,7 @@ export default defineComponent({
const loadingState = ref(false);
const customText = ref("");
const editingText = ref(false);
const files = ref(null);
customText.value = store.state.zoConfig.custom_logo_text;
@@ -272,6 +305,8 @@ export default defineComponent({
await configService.get_config().then((res: any) => {
store.dispatch("setConfig", res.data);
});
files.value = null;
} else {
q.notify({
type: "negative",
@@ -370,13 +405,15 @@ export default defineComponent({
timeout: 2000,
});
}
}).catch((err) => {
})
.catch((err) => {
q.notify({
type: "negative",
message: err?.message || "Something went wrong.",
timeout: 2000,
});
}).finally(() => {
})
.finally(() => {
loadingState.value = false;
});
};
@@ -394,8 +431,8 @@ export default defineComponent({
router,
scrapeIntereval,
onSubmit,
files: ref(null),
counterLabelFn(CounterLabelParams: { filesNumber: any; totalSize: any; }) {
files,
counterLabelFn(CounterLabelParams: { filesNumber: any; totalSize: any }) {
return `(Only .png, .jpg, .jpeg, .svg formats & size <=20kb & Max Size: 150x30px) ${CounterLabelParams.filesNumber} file | ${CounterLabelParams.totalSize}`;
},
filesImages: ref(null),
@@ -416,6 +453,7 @@ export default defineComponent({
customText,
editingText,
updateCustomText,
confirmDeleteImage: ref(false),
};
},
});
web/src/composables/useLogs.ts
+40 -16
View File
@@ -455,7 +455,9 @@ const useLogs = () => {
let query = searchObj.data.editorValue;
const req: any = {
query: {
sql: 'select [FIELD_LIST][QUERY_FUNCTIONS] from "[INDEX_NAME]" [WHERE_CLAUSE]',
sql: searchObj.meta.sqlMode
? query
: 'select [FIELD_LIST][QUERY_FUNCTIONS] from "[INDEX_NAME]" [WHERE_CLAUSE]',
start_time: (new Date().getTime() - 900000) * 1000,
end_time: new Date().getTime() * 1000,
from:
@@ -544,6 +546,7 @@ const useLogs = () => {
}
if (searchObj.meta.sqlMode == true) {
searchObj.data.query = query;
const parsedSQL: any = fnParsedSQL();
if (parsedSQL.orderby == null) {
@@ -1565,8 +1568,26 @@ const useLogs = () => {
index = searchObj.data.stream.interestingFieldList.indexOf(
row.name
);
if (index == -1) {
searchObj.data.stream.interestingFieldList.push(row.name);
if (index == -1 && row.name != "*") {
// searchObj.data.stream.interestingFieldList.push(row.name);
for (const stream of searchObj.data.stream
.selectedStreamFields) {
if ((stream as { name: string }).name == row.name) {
searchObj.data.stream.interestingFieldList.push(row.name);
const localInterestingFields: any =
useLocalInterestingFields();
let localFields: any = {};
if (localInterestingFields.value != null) {
localFields = localInterestingFields.value;
}
localFields[
searchObj.organizationIdetifier +
"_" +
searchObj.data.stream.selectedStream.value
] = searchObj.data.stream.interestingFieldList;
useLocalInterestingFields(localFields);
}
}
}
}
@@ -1795,7 +1816,6 @@ const useLogs = () => {
}
query_context = b64EncodeUnicode(query_context);
}
alert(query_context)
let query_fn: any = "";
if (
@@ -2100,23 +2120,27 @@ const useLogs = () => {
}
};
const onStreamChange = async () => {
const onStreamChange = async (queryStr: string) => {
let query = searchObj.meta.sqlMode
? `SELECT [FIELD_LIST] FROM "${searchObj.data.stream.selectedStream.value}"`
? queryStr != ""
? queryStr
: `SELECT [FIELD_LIST] FROM "${searchObj.data.stream.selectedStream.value}"`
: "";
await extractFields();
if (
searchObj.data.stream.interestingFieldList.length > 0 &&
searchObj.meta.quickMode
) {
query = query.replace(
"[FIELD_LIST]",
searchObj.data.stream.interestingFieldList.join(",")
);
} else {
query = query.replace("[FIELD_LIST]", "*");
if (queryStr == "") {
if (
searchObj.data.stream.interestingFieldList.length > 0 &&
searchObj.meta.quickMode
) {
query = query.replace(
"[FIELD_LIST]",
searchObj.data.stream.interestingFieldList.join(",")
);
} else {
query = query.replace("[FIELD_LIST]", "*");
}
}
searchObj.data.editorValue = query;
web/src/locales/languages/en.json
+1 -1
View File
@@ -801,7 +801,7 @@
"logoLabel": "Drag & Drop Logo Image",
"customLogoTitle": "Custom Logo",
"deleteLogoTitle": "Delete Logo",
"deleteLogoMessage": "Are you sure you want to delete this logo image?",
"deleteLogoMessage": "Are you sure you want to delete this logo image? Click Ok to delete.",
"deleteLogo": "Delete Logo",
"logo": "Logo",
"customLogoText": "Custom Logo Text"
web/src/plugins/logs/Index.vue
+18 -7
View File
@@ -567,11 +567,6 @@ export default defineComponent({
}
} catch (e) {
console.log("Logs : Error in setQuery");
$q.notify({
message: "Error while setting up query",
color: "negative",
timeout: 2000,
});
}
};
@@ -644,6 +639,15 @@ export default defineComponent({
}
} else {
//add the field in the query
if (parsedSQL.columns.length > 0) {
// iterate and remove the * from the query
parsedSQL.columns = removeFieldByName(
parsedSQL.columns,
"*",
parsedSQL.orderby
);
}
parsedSQL.columns.push({
expr: {
type: "column_ref",
@@ -843,10 +847,17 @@ export default defineComponent({
},
quickMode(newVal) {
if (newVal == true) {
let field_list: string = "*";
if (this.searchObj.data.stream.interestingFieldList.length > 0) {
field_list =
this.searchObj.data.stream.interestingFieldList.join(",");
}
if (this.searchObj.meta.sqlMode == true) {
this.searchObj.data.query = this.searchObj.data.query.replace(
"*",
this.searchObj.data.stream.interestingFieldList.join(",")
/SELECT\s+(.*?)\s+FROM/i,
(match, fields) => {
return `SELECT ${field_list} FROM`;
}
);
this.setQuery(newVal);
this.updateUrlQueryParams();
web/src/plugins/logs/IndexList.vue
+33 -7
View File
@@ -39,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
hide-selected
fill-input
@filter="filterStreamFn"
@update:model-value="onStreamChange"
@update:model-value="onStreamChange('')"
>
<template #no-option>
<q-item>
@@ -88,10 +88,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="props.row.name"
>
<div
class="field_label ellipsis full-width"
class="field_label full-width"
:data-test="`logs-field-list-item-${props.row.name}`"
>
{{ props.row.name }}
<div
class="ellipsis"
style="max-width: 90% !important; display: inline-block"
>
{{ props.row.name }}
</div>
<span class="float-right">
<q-icon
:data-test="`log-search-index-list-interesting-${props.row.name}-field-btn`"
@@ -189,10 +194,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`log-search-expand-${props.row.name}-field-btn`"
>
<div
class="field_label ellipsis full-width"
class="field_label full-width"
:data-test="`logs-field-list-item-${props.row.name}`"
>
{{ props.row.name }}
<div
class="ellipsis"
style="max-width: 90% !important; display: inline-block"
>
{{ props.row.name }}
</div>
<span class="float-right">
<q-icon
:data-test="`log-search-index-list-interesting-${props.row.name}-field-btn`"
@@ -710,8 +720,24 @@ export default defineComponent({
const index = searchObj.data.stream.interestingFieldList.indexOf(
field.name
);
if (index == -1) {
searchObj.data.stream.interestingFieldList.push(field.name);
if (index == -1 && field.name != "*") {
// searchObj.data.stream.interestingFieldList.push(field.name);
for (const stream of searchObj.data.stream.selectedStreamFields) {
if ((stream as { name: string }).name == field.name) {
searchObj.data.stream.interestingFieldList.push(field.name);
const localInterestingFields: any = useLocalInterestingFields();
let localFields: any = {};
if (localInterestingFields.value != null) {
localFields = localInterestingFields.value;
}
localFields[
searchObj.organizationIdetifier +
"_" +
searchObj.data.stream.selectedStream.value
] = searchObj.data.stream.interestingFieldList;
useLocalInterestingFields(localFields);
}
}
}
}
web/src/plugins/logs/SearchBar.vue
+105 -18
View File
@@ -657,7 +657,12 @@ import AutoRefreshInterval from "@/components/AutoRefreshInterval.vue";
import stream from "@/services/stream";
import { getConsumableDateTime } from "@/utils/commons";
import useSqlSuggestions from "@/composables/useSuggestions";
import { mergeDeep, b64DecodeUnicode, getImageURL } from "@/utils/zincutils";
import {
mergeDeep,
b64DecodeUnicode,
getImageURL,
useLocalInterestingFields,
} from "@/utils/zincutils";
import savedviewsService from "@/services/saved_views";
import ConfirmDialog from "@/components/ConfirmDialog.vue";
import { cloneDeep } from "lodash-es";
@@ -791,6 +796,7 @@ export default defineComponent({
resetStreamData,
loadStreamLists,
fnParsedSQL,
onStreamChange,
} = useLogs();
const queryEditorRef = ref(null);
@@ -878,18 +884,68 @@ export default defineComponent({
}
const updateQueryValue = (value: string) => {
searchObj.data.editorValue = value;
if (searchObj.meta.quickMode == true) {
const parsedSQL = fnParsedSQL();
if (
parsedSQL != undefined &&
parsedSQL.hasOwnProperty("from") &&
parsedSQL?.from.length > 0 &&
parsedSQL?.from[0].table !==
searchObj.data.stream.selectedStream.value
) {
searchObj.data.stream.selectedStream = {
label: parsedSQL.from[0].table,
value: parsedSQL.from[0].table,
};
searchObj.data.stream.selectedStreamFields = [];
onStreamChange(value);
}
// if (
// parsedSQL.hasOwnProperty("columns") &&
// parsedSQL?.columns.length > 0
// ) {
// const columnNames = getColumnNames(parsedSQL?.columns);
// searchObj.data.stream.interestingFieldList = [];
// for (const [index, col] of columnNames.entries()) {
// if (
// !searchObj.data.stream.interestingFieldList.includes(col) &&
// col != "*"
// ) {
// // searchObj.data.stream.interestingFieldList.push(col);
// for (const stream of searchObj.data.streamResults.list) {
// if (stream.value == col) {
// searchObj.data.stream.interestingFieldList.push(col);
// }
// }
// }
// }
if (parsedSQL?.columns.length > 0) {
const columnNames = getColumnNames(parsedSQL?.columns);
searchObj.data.stream.interestingFieldList = [];
for (const col of columnNames) {
if (!searchObj.data.stream.interestingFieldList.includes(col)) {
searchObj.data.stream.interestingFieldList.push(col);
if (
!searchObj.data.stream.interestingFieldList.includes(col) &&
col != "*"
) {
// searchObj.data.stream.interestingFieldList.push(col);
for (const stream of searchObj.data.stream.selectedStreamFields) {
if (stream.name == col) {
searchObj.data.stream.interestingFieldList.push(col);
const localInterestingFields: any =
useLocalInterestingFields();
let localFields: any = {};
if (localInterestingFields.value != null) {
localFields = localInterestingFields.value;
}
localFields[
searchObj.organizationIdetifier +
"_" +
searchObj.data.stream.selectedStream.value
] = searchObj.data.stream.interestingFieldList;
useLocalInterestingFields(localFields);
}
}
}
}
@@ -905,6 +961,8 @@ export default defineComponent({
}
}
searchObj.data.editorValue = value;
updateAutoComplete(value);
try {
if (searchObj.meta.sqlMode == true) {
@@ -1997,23 +2055,52 @@ export default defineComponent({
}
this.searchObj.data.query = currentQuery.join("| ");
} else {
if (currentQuery != "") {
if (
this.searchObj.meta.sqlMode == true &&
currentQuery.toString().toLowerCase().indexOf("where") == -1
// if (currentQuery != "") {
// if (
// this.searchObj.meta.sqlMode == true &&
// currentQuery.toString().toLowerCase().indexOf("where") == -1
// ) {
// currentQuery += " where " + filter;
// } else {
// currentQuery += " and " + filter;
// }
// } else {
// if (this.searchObj.meta.sqlMode == true) {
// currentQuery = "where " + filter;
// } else {
// currentQuery = filter;
// }
// }
if (this.searchObj.meta.sqlMode == true) {
// if query contains order by clause or limit clause then add where clause before that
// if query contains where clause then add filter after that with and operator and keep order by or limit after that
// if query does not contain where clause then add where clause before filter
if (currentQuery[0].toLowerCase().indexOf("where") != -1) {
currentQuery[0] = currentQuery[0].replace(/where/gi, (match) => {
return match + " " + filter + " and ";
});
} else if (
currentQuery[0].toLowerCase().indexOf("order by") != -1 ||
currentQuery[0].toLowerCase().indexOf("limit") != -1
) {
currentQuery += " where " + filter;
currentQuery[0] = currentQuery[0].replace(
/order by|limit/gi,
(match) => {
return " where " + filter + " " + match;
}
);
} else {
currentQuery += " and " + filter;
currentQuery[0] += " where " + filter;
}
} else {
if (this.searchObj.meta.sqlMode == true) {
currentQuery = "where " + filter;
} else {
currentQuery = filter;
}
currentQuery[0].length == 0
? (currentQuery[0] = filter)
: (currentQuery[0] += " and " + filter);
}
this.searchObj.data.query = currentQuery;
this.searchObj.data.query = currentQuery[0];
}
this.searchObj.data.stream.addToFilter = "";
if (this.queryEditorRef?.setValue)