This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new 01858b25e fix(ui): correct query editor refresh/reset behavior and
BydbQL keyword highlighting (#1045)
01858b25e is described below
commit 01858b25ee3a9f7922443845b86abb0494b12dd9
Author: Fine0830 <[email protected]>
AuthorDate: Mon Apr 6 20:10:34 2026 +0800
fix(ui): correct query editor refresh/reset behavior and BydbQL keyword
highlighting (#1045)
---
CHANGES.md | 1 +
dist/LICENSE | 4 ++--
ui/LICENSE | 4 ++--
ui/package-lock.json | 18 +++++++--------
ui/src/components/CodeMirror/bydbql-mode.js | 9 ++++++++
ui/src/components/Property/PropertyRead.vue | 36 ++++++++++++++++++++++-------
ui/src/components/Read/index.vue | 14 ++++++++++-
7 files changed, 64 insertions(+), 22 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index f24db4091..728519a7e 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -19,6 +19,7 @@ Release Notes.
- MCP: Add validation for properties and harden the mcp server.
- Fix property schema client connection not stable after data node restarted.
- Fix flaky on-disk integration tests caused by Ginkgo v2 random container
shuffling closing gRPC connections prematurely.
+- ui: fix query editor refresh/reset behavior and BydbQL keyword highlighting.
## 0.10.0
diff --git a/dist/LICENSE b/dist/LICENSE
index cf0b6aa70..71fa802f0 100644
--- a/dist/LICENSE
+++ b/dist/LICENSE
@@ -563,8 +563,8 @@ MIT licenses
js-yaml 4.1.1 MIT
jsonfile 6.2.0 MIT
lie 3.3.0 MIT
- lodash 4.17.23 MIT
- lodash-es 4.17.23 MIT
+ lodash 4.18.1 MIT
+ lodash-es 4.18.1 MIT
lodash-unified 1.0.3 MIT
magic-string 0.30.21 MIT
memoize-one 6.0.0 MIT
diff --git a/ui/LICENSE b/ui/LICENSE
index 9236572a1..81cdcbc46 100644
--- a/ui/LICENSE
+++ b/ui/LICENSE
@@ -108,8 +108,8 @@ MIT licenses
js-yaml 4.1.1 MIT
jsonfile 6.2.0 MIT
lie 3.3.0 MIT
- lodash 4.17.23 MIT
- lodash-es 4.17.23 MIT
+ lodash 4.18.1 MIT
+ lodash-es 4.18.1 MIT
lodash-unified 1.0.3 MIT
magic-string 0.30.21 MIT
memoize-one 6.0.0 MIT
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 6a778b7b0..529e09c21 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1608,9 +1608,9 @@
}
},
"node_modules/brace-expansion": {
- "version": "2.0.2",
- "resolved":
"https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz";,
- "integrity":
"sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+ "version": "2.0.3",
+ "resolved":
"https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz";,
+ "integrity":
"sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2092,15 +2092,15 @@
}
},
"node_modules/lodash": {
- "version": "4.17.23",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz";,
- "integrity":
"sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+ "version": "4.18.1",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz";,
+ "integrity":
"sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
"license": "MIT"
},
"node_modules/lodash-es": {
- "version": "4.17.23",
- "resolved":
"https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz";,
- "integrity":
"sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+ "version": "4.18.1",
+ "resolved":
"https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz";,
+ "integrity":
"sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
"license": "MIT"
},
"node_modules/lodash-unified": {
diff --git a/ui/src/components/CodeMirror/bydbql-mode.js
b/ui/src/components/CodeMirror/bydbql-mode.js
index eb125d3d7..8aac7cb9b 100644
--- a/ui/src/components/CodeMirror/bydbql-mode.js
+++ b/ui/src/components/CodeMirror/bydbql-mode.js
@@ -103,6 +103,15 @@ CodeMirror.defineMode('bydbql', function (config) {
},
token: function (stream, state) {
+ const prefixedKeywordMatch = stream.match(/^--([A-Za-z_]\w*)/, false);
+ if (prefixedKeywordMatch) {
+ const upperWord = prefixedKeywordMatch[1].toUpperCase();
+ if (entityTypes[upperWord] || bydbqlKeywords[upperWord]) {
+ stream.match(/^--[A-Za-z_]\w*/);
+ return entityTypes[upperWord] ? 'entity-type' : 'keyword';
+ }
+ }
+
const style = sqlMode.token(stream, state.sqlState);
if (style === 'comment' || style === 'string') {
return style;
diff --git a/ui/src/components/Property/PropertyRead.vue
b/ui/src/components/Property/PropertyRead.vue
index ffdf34ee7..275026921 100644
--- a/ui/src/components/Property/PropertyRead.vue
+++ b/ui/src/components/Property/PropertyRead.vue
@@ -40,13 +40,30 @@
tableData: [],
name: route.params.name,
});
- const yamlCode = ref(`name: ${data.name}
-limit: 10`);
+ const yamlCode = ref(buildSearchYaml(data.name, 10));
const showTracesDialog = ref(false);
const traceData = ref(null);
- const getProperties = async (params) => {
+
+ function buildSearchYaml(name, limit) {
+ return `name: ${name}
+limit: ${limit}`;
+ }
+
+ function normalizeSearchParams(params = {}) {
+ return {
+ ...params,
+ name: params.name ?? data.name,
+ limit: params.limit ?? 10,
+ };
+ }
+
+ const getProperties = async (params, resetYaml = false) => {
+ const normalizedParams = normalizeSearchParams(params);
+ if (resetYaml) {
+ yamlCode.value = buildSearchYaml(normalizedParams.name,
normalizedParams.limit);
+ }
$loadingCreate();
- const res = await fetchProperties({ groups: [data.group], name: data.name,
limit: 10, ...params });
+ const res = await fetchProperties({ groups: [data.group],
...normalizedParams });
$loadingClose();
if (res.error) {
ElMessage({
@@ -82,8 +99,12 @@ limit: 10`);
});
}
+ function refreshProperties() {
+ getProperties(undefined, true);
+ }
+
onMounted(() => {
- getProperties();
+ getProperties(undefined, true);
});
watch(
() => route.params,
@@ -91,8 +112,7 @@ limit: 10`);
const { group, name } = route.params;
data.name = name;
data.group = group;
- yamlCode.value = `name: ${data.name}
-limit: 10`;
+ yamlCode.value = buildSearchYaml(data.name, 10);
getProperties();
},
);
@@ -105,7 +125,7 @@ limit: 10`;
</template>
<div class="button-group-operator">
<el-button size="small" :icon="Search" @click="searchProperties" plain
/>
- <el-button size="small" :icon="RefreshRight" @click="getProperties"
plain />
+ <el-button size="small" :icon="RefreshRight"
@click="refreshProperties" plain />
</div>
<CodeMirror ref="yamlRef" v-model="yamlCode" mode="yaml" style="height:
200px" :lint="true" />
<div style="margin-top: 20px; margin-bottom: 10px; display: flex;
justify-content: flex-end">
diff --git a/ui/src/components/Read/index.vue b/ui/src/components/Read/index.vue
index 753c67d82..51a2a9dfb 100644
--- a/ui/src/components/Read/index.vue
+++ b/ui/src/components/Read/index.vue
@@ -66,6 +66,7 @@
],
},
});
+ const filterConfigBaseKeys = ['groups', 'name', 'offset', 'limit', 'stages',
'projection'];
const data = reactive({
fields: [],
tableFields: [],
@@ -282,6 +283,11 @@ orderBy:
}
function handleCodeData() {
const json = yamlToJson(data.code).data;
+ Object.keys(filterConfig).forEach((key) => {
+ if (!filterConfigBaseKeys.includes(key)) {
+ delete filterConfig[key];
+ }
+ });
filterConfig.offset = json.offset !== undefined ? json.offset : 0;
filterConfig.limit = json.limit !== undefined ? json.limit : 10;
delete filterConfig.timeRange;
@@ -327,6 +333,12 @@ orderBy:
});
});
}
+
+ function refreshTableData() {
+ initCode();
+ handleCodeData();
+ }
+
function changeDatePicker() {
const json = yamlToJson(data.code);
if (!json.data.hasOwnProperty('timeRange')) {
@@ -404,7 +416,7 @@ orderBy:
</el-col>
<el-col :span="8">
<div class="flex align-item-center justify-end" style="height: 30px">
- <el-button :icon="RefreshRight" @click="getTableData" plain />
+ <el-button :icon="RefreshRight" @click="refreshTableData" plain />
</div>
</el-col>
</el-row>
