This is an automated email from the ASF dual-hosted git repository.
wusheng 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 325fb776 feat: the property page adapts new queries (#627)
325fb776 is described below
commit 325fb776a0a7e175ab8303d1d8b49c86762fabfc
Author: Fine0830 <[email protected]>
AuthorDate: Fri Mar 21 13:11:01 2025 +0800
feat: the property page adapts new queries (#627)
---
ui/src/api/index.js | 6 ++--
ui/src/components/Property/PropertyEditror.vue | 48 +++++---------------------
ui/src/components/Property/PropertyRead.vue | 34 +++++++-----------
ui/src/components/Property/data.js | 44 +++++++++++++++++++++++
ui/src/styles/custom.scss | 3 +-
5 files changed, 69 insertions(+), 66 deletions(-)
diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index ed332ae5..2d7ba011 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -158,7 +158,7 @@ export function deleteSecondaryDataModel(type, group, name)
{
export function fetchProperties(data) {
return request({
- url: `/api/v1/property/query`,
+ url: `/api/v1/property/data/query`,
method: 'post',
data,
});
@@ -166,14 +166,14 @@ export function fetchProperties(data) {
export function deleteProperty(group, name, id) {
return request({
- url: `/api/v1/property/${group}/${name}/${id}`,
+ url: `/api/v1/property/data/${group}/${name}/${id}`,
method: 'delete',
});
}
export function applyProperty(group, name, id, data) {
return request({
- url: `/api/v1/property/${group}/${name}/${id}`,
+ url: `/api/v1/property/data/${group}/${name}/${id}`,
method: 'put',
data: data,
});
diff --git a/ui/src/components/Property/PropertyEditror.vue
b/ui/src/components/Property/PropertyEditror.vue
index 00fb48f1..e6ae4aa7 100644
--- a/ui/src/components/Property/PropertyEditror.vue
+++ b/ui/src/components/Property/PropertyEditror.vue
@@ -23,6 +23,7 @@
import { getCurrentInstance } from '@vue/runtime-core';
import TagEditor from './TagEditor.vue';
import { ElMessage } from 'element-plus';
+ import { rules, strategyGroup, formConfig } from './data';
const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate;
const $loadingClose =
getCurrentInstance().appContext.config.globalProperties.$loadingClose;
const showDialog = ref(false);
@@ -30,49 +31,20 @@
const tagEditorRef = ref();
const ruleForm = ref();
const formData = reactive({
- strategy: 'STRATEGY_UNSPECIFIED',
+ strategy: strategyGroup[0].value,
group: '',
name: '',
- containerID: '',
modRevision: 0,
createRevision: 0,
id: '',
tags: [],
});
- const validateTags = (rule, value, callback) => {
- if (value.length <= 0) {
- callback(new Error('Please add the tags'));
- } else {
- callback();
- }
- };
- const rules = {
- strategy: [{ required: true, message: 'please select the apply method.',
trigger: 'blur' }],
- group: [{ required: true, message: 'Please enter the group.', trigger:
'blur' }],
- name: [{ required: true, message: 'Please enter the name.', trigger:
'blur' }],
- containerID: [{ required: true, message: 'Please enter the container id.',
trigger: 'blur' }],
- id: [{ required: true, message: 'Please enter the ID.', trigger: 'blur' }],
- tags: [{ required: true, validator: validateTags, trigger: 'blur' }],
- };
- const strategyGroup = [
- { label: 'STRATEGY_UNSPECIFIED', value: 'STRATEGY_UNSPECIFIED' },
- { label: 'STRATEGY_MERGE', value: 'STRATEGY_MERGE' },
- { label: 'STRATEGY_REPLACE', value: 'STRATEGY_REPLACE' },
- ];
- const formConfig = [
- { label: 'Strategy', prop: 'strategy', type: 'select', selectGroup:
strategyGroup },
- { label: 'Container Group', prop: 'group', type: 'input', disabled: true },
- { label: 'Container Name', prop: 'name', type: 'input' },
- { label: 'Container ID', prop: 'containerID', type: 'input' },
- { label: 'ID', prop: 'id', type: 'input' },
- ];
let promiseResolve;
const initData = () => {
- formData.strategy = 'STRATEGY_UNSPECIFIED';
+ formData.strategy = strategyGroup[0].value;
formData.group = '';
formData.name = '';
- formData.containerID = '';
formData.modRevision = 0;
formData.createRevision = 0;
formData.id = '';
@@ -104,15 +76,12 @@
const param = {
strategy: formData.strategy,
property: {
+ id: formData.id,
metadata: {
- container: {
- createRevision: formData.createRevision,
- group: formData.group,
- id: formData.containerID,
- modRevision: formData.modRevision,
- name: formData.name,
- },
- id: formData.id,
+ createRevision: formData.createRevision,
+ group: formData.group,
+ modRevision: formData.modRevision,
+ name: formData.name,
},
tags: formData.tags.map((item) => {
return {
@@ -156,7 +125,6 @@
}
formData.group = data?.group || '';
formData.name = data?.name || '';
- formData.containerID = data?.containerID || '';
formData.modRevision = data?.modRevision || 0;
formData.createRevision = data?.createRevision || 0;
formData.id = data?.id || '';
diff --git a/ui/src/components/Property/PropertyRead.vue
b/ui/src/components/Property/PropertyRead.vue
index 6bf9daab..2780a785 100644
--- a/ui/src/components/Property/PropertyRead.vue
+++ b/ui/src/components/Property/PropertyRead.vue
@@ -37,7 +37,7 @@
const propertyEditorRef = ref();
const propertyValueViewerRef = ref();
const yamlRef = ref(null);
- const yamlCode = ref(`container: ''
+ const yamlCode = ref(`name: ''
limit: 10`);
const data = reactive({
group: '',
@@ -46,7 +46,7 @@ limit: 10`);
const getProperties = (params) => {
$loadingCreate();
const group = route.params.group;
- fetchProperties({ groups: [group], limit: 6, ...params })
+ fetchProperties({ groups: [group], limit: 10, ...params })
.then((res) => {
if (res.status === 200 && group === route.params.group) {
data.tableData = res.data.properties.map((item) => {
@@ -78,12 +78,11 @@ limit: 10`);
const openEditField = (index) => {
const item = data.tableData[index];
const param = {
- group: item.metadata.container.group,
- name: item.metadata.container.name,
- containerID: item.metadata.container.id,
- modRevision: item.metadata.container.modRevision,
- createRevision: item.metadata.container.createRevision,
- id: item.metadata.id,
+ group: item.metadata.group,
+ name: item.metadata.name,
+ modRevision: item.metadata.modRevision,
+ createRevision: item.metadata.createRevision,
+ id: item.id,
tags: JSON.parse(JSON.stringify(item.tags)),
};
propertyEditorRef?.value.openDialog(true, param).then(() => {
@@ -119,7 +118,7 @@ limit: 10`);
const deleteTableData = (index) => {
const item = data.tableData[index];
$loadingCreate();
- deleteProperty(item.metadata.container.group,
item.metadata.container.name, item.metadata.id)
+ deleteProperty(item.metadata.group, item.metadata.name, item.id)
.then((res) => {
if (res.status === 200) {
ElMessage({
@@ -160,18 +159,11 @@ limit: 10`);
</div>
<CodeMirror ref="yamlRef" v-model="yamlCode" mode="yaml" style="height:
200px" :lint="true" />
<el-table :data="data.tableData" style="width: 100%; margin-top: 20px"
border>
- <el-table-column label="Container">
- <el-table-column label="Group" prop="metadata.container.group"
width="100"></el-table-column>
- <el-table-column label="Name" prop="metadata.container.name"
width="120"></el-table-column>
- <el-table-column label="ID" prop="metadata.container.id"
width="100"></el-table-column>
- <el-table-column label="ModRevision"
prop="metadata.container.modRevision" width="120"></el-table-column>
- <el-table-column
- label="CreateRevision"
- prop="metadata.container.createRevision"
- width="140"
- ></el-table-column>
- </el-table-column>
- <el-table-column label="ID" prop="metadata.id"
width="150"></el-table-column>
+ <el-table-column label="Group" prop="metadata.group"
width="100"></el-table-column>
+ <el-table-column label="Name" prop="metadata.name"
width="120"></el-table-column>
+ <el-table-column label="ModRevision" prop="metadata.modRevision"
width="120"></el-table-column>
+ <el-table-column label="CreateRevision" prop="metadata.createRevision"
width="140"></el-table-column>
+ <el-table-column label="ID" prop="id" width="150"></el-table-column>
<el-table-column label="Tags">
<template #default="scope">
<el-table :data="scope.row.tags">
diff --git a/ui/src/components/Property/data.js
b/ui/src/components/Property/data.js
new file mode 100644
index 00000000..960de96f
--- /dev/null
+++ b/ui/src/components/Property/data.js
@@ -0,0 +1,44 @@
+/*
+ * Licensed to Apache Software Foundation (ASF) under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Apache Software Foundation (ASF) licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const validateTags = (rule, value, callback) => {
+ if (value.length <= 0) {
+ callback(new Error('Please add the tags'));
+ } else {
+ callback();
+ }
+};
+
+export const rules = {
+ strategy: [{ required: true, message: 'please select the apply method.',
trigger: 'blur' }],
+ group: [{ required: true, message: 'Please enter the group.', trigger:
'blur' }],
+ name: [{ required: true, message: 'Please enter the name.', trigger: 'blur'
}],
+ id: [{ required: true, message: 'Please enter the ID.', trigger: 'blur' }],
+ tags: [{ required: true, validator: validateTags, trigger: 'blur' }],
+};
+export const strategyGroup = [
+ { label: 'STRATEGY_MERGE', value: 'STRATEGY_MERGE' },
+ { label: 'STRATEGY_REPLACE', value: 'STRATEGY_REPLACE' },
+];
+export const formConfig = [
+ { label: 'Strategy', prop: 'strategy', type: 'select', selectGroup:
strategyGroup },
+ { label: 'Group', prop: 'group', type: 'input', disabled: true },
+ { label: 'Name', prop: 'name', type: 'input' },
+ { label: 'ID', prop: 'id', type: 'input' },
+];
diff --git a/ui/src/styles/custom.scss b/ui/src/styles/custom.scss
index e57d9575..7661936b 100644
--- a/ui/src/styles/custom.scss
+++ b/ui/src/styles/custom.scss
@@ -57,6 +57,5 @@ html {
--size-lt: 1.1em;
--size-title: 1.2em;
--size-big: 1.4em;
- --font-family-main:
- 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
Unicode', Geneva, Verdana, sans-serif;
+ --font-family-main: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Sans
Unicode', Verdana, sans-serif;
}
