This is an automated email from the ASF dual-hosted git repository.
qiuxiafan 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 518c4135 feat: Update UI to Integrate New Property Query API (#596)
518c4135 is described below
commit 518c41357c19651dab9ef1e2eaf02edb568c8332
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Fri Jan 17 16:23:47 2025 +0800
feat: Update UI to Integrate New Property Query API (#596)
---
CHANGES.md | 1 +
ui/src/api/index.js | 25 +++--------
ui/src/components/GroupTree/index.vue | 6 +--
ui/src/components/Property/PropertyRead.vue | 65 +++++++++++++++++------------
ui/src/components/TopNAggregation/index.vue | 2 +-
5 files changed, 50 insertions(+), 49 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index f02912f5..e5bda7e5 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -38,6 +38,7 @@ Release Notes.
- Parse string and int array in the query result table.
- Fix the bug that fails to update `Group` Schema's ResourceOpts.
- UI: Implement TopNAggregation data query page.
+- UI: Update BanyanDB UI to Integrate New Property Query API.
### Documentation
diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index 7c800f56..ed332ae5 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -156,30 +156,17 @@ export function deleteSecondaryDataModel(type, group,
name) {
});
}
-export function getPropertyByGroup(group) {
+export function fetchProperties(data) {
return request({
- url: `/api/v1/property/lists/${group}`,
- method: 'get',
- });
-}
-
-export function getPropertyList(group, name, ids, tags) {
- return request({
- url: `/api/v1/property/lists/${group}/${name}/${ids}/${tags}`,
- method: 'get',
- });
-}
-
-export function getPropertyDetail(group, name, id, tags) {
- return request({
- url: `/api/v1/property/${group}/${name}/${id}/${tags}`,
- method: 'get',
+ url: `/api/v1/property/query`,
+ method: 'post',
+ data,
});
}
-export function deleteProperty(group, name, id, tags) {
+export function deleteProperty(group, name, id) {
return request({
- url: `/api/v1/property/${group}/${name}/${id}/${tags}`,
+ url: `/api/v1/property/${group}/${name}/${id}`,
method: 'delete',
});
}
diff --git a/ui/src/components/GroupTree/index.vue
b/ui/src/components/GroupTree/index.vue
index bb890f23..cca04a17 100644
--- a/ui/src/components/GroupTree/index.vue
+++ b/ui/src/components/GroupTree/index.vue
@@ -86,14 +86,14 @@
const catalogToGroupType = {
CATALOG_MEASURE: 'measure',
CATALOG_STREAM: 'stream',
- CATALOG_UNSPECIFIED: 'property',
+ CATALOG_PROPERTY: 'property',
};
// group type to catalog
const groupTypeToCatalog = {
measure: 'CATALOG_MEASURE',
stream: 'CATALOG_STREAM',
- property: 'CATALOG_UNSPECIFIED',
+ property: 'CATALOG_PROPERTY',
};
const TypeMap = {
@@ -793,7 +793,7 @@
<el-select v-model="data.groupForm.catalog" placeholder="please
select" style="width: 100%">
<el-option label="Stream" value="CATALOG_STREAM"></el-option>
<el-option label="Measure" value="CATALOG_MEASURE"></el-option>
- <el-option label="Unspecified(Property)"
value="CATALOG_UNSPECIFIED"></el-option>
+ <el-option label="Property" value="CATALOG_PROPERTY"></el-option>
</el-select>
</el-form-item>
<el-form-item label="shard num" :label-width="data.formLabelWidth"
prop="shardNum">
diff --git a/ui/src/components/Property/PropertyRead.vue
b/ui/src/components/Property/PropertyRead.vue
index e827636f..6bf9daab 100644
--- a/ui/src/components/Property/PropertyRead.vue
+++ b/ui/src/components/Property/PropertyRead.vue
@@ -18,12 +18,13 @@
-->
<script setup>
- import { getPropertyByGroup, deleteProperty } from '@/api/index';
- import { watch, getCurrentInstance } from '@vue/runtime-core';
+ import { fetchProperties, deleteProperty } from '@/api/index';
+ import { getCurrentInstance } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
- import { RefreshRight } from '@element-plus/icons-vue';
+ import { RefreshRight, Search } from '@element-plus/icons-vue';
+ import { yamlToJson } from '@/utils/yaml';
import PropertyEditror from './PropertyEditror.vue';
import PropertyValueReader from './PropertyValueReader.vue';
import FormHeader from '../common/FormHeader.vue';
@@ -31,22 +32,24 @@
const { proxy } = getCurrentInstance();
// Loading
const route = useRoute();
- const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus;
const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate;
const $loadingClose = proxy.$loadingClose;
const propertyEditorRef = ref();
const propertyValueViewerRef = ref();
+ const yamlRef = ref(null);
+ const yamlCode = ref(`container: ''
+limit: 10`);
const data = reactive({
group: '',
tableData: [],
});
- const getProperty = () => {
+ const getProperties = (params) => {
$loadingCreate();
const group = route.params.group;
- getPropertyByGroup(group)
+ fetchProperties({ groups: [group], limit: 6, ...params })
.then((res) => {
if (res.status === 200 && group === route.params.group) {
- data.tableData = res.data.property.map((item) => {
+ data.tableData = res.data.properties.map((item) => {
item.tags.forEach((tag) => {
tag.value = JSON.stringify(tag.value);
});
@@ -84,7 +87,7 @@
tags: JSON.parse(JSON.stringify(item.tags)),
};
propertyEditorRef?.value.openDialog(true, param).then(() => {
- getProperty();
+ getProperties();
});
};
const openAddProperty = () => {
@@ -92,13 +95,31 @@
group: data.group,
};
propertyEditorRef?.value.openDialog(false, dataForm).then(() => {
- getProperty();
+ getProperties();
});
};
+
+ function searchProperties() {
+ yamlRef.value
+ .checkYaml(yamlCode.value)
+ .then(() => {
+ const json = yamlToJson(yamlCode.value).data;
+ getProperties(json);
+ })
+ .catch((err) => {
+ ElMessage({
+ dangerouslyUseHTMLString: true,
+ showClose: true,
+ message: `<div>${err.message}</div>`,
+ type: 'error',
+ duration: 5000,
+ });
+ });
+ }
const deleteTableData = (index) => {
const item = data.tableData[index];
$loadingCreate();
- deleteProperty(item.metadata.container.group,
item.metadata.container.name, item.metadata.id, item.tags)
+ deleteProperty(item.metadata.container.group,
item.metadata.container.name, item.metadata.id)
.then((res) => {
if (res.status === 200) {
ElMessage({
@@ -106,7 +127,7 @@
type: 'success',
duration: 5000,
});
- getProperty();
+ getProperties();
}
})
.catch((err) => {
@@ -120,20 +141,8 @@
$loadingClose();
});
};
- watch(
- () => route,
- () => {
- data.group = route.params.group;
- data.tableData = [];
- getProperty();
- },
- {
- deep: true,
- immediate: true,
- },
- );
onMounted(() => {
- getProperty();
+ getProperties();
});
</script>
<template>
@@ -144,9 +153,12 @@
</template>
<div class="button-group-operator">
<el-button size="small" type="primary" color="#6E38F7"
@click="openAddProperty">Apply Property</el-button>
- <el-button size="small" :icon="RefreshRight" @click="getProperty"
plain></el-button>
+ <div>
+ <el-button size="small" :icon="Search" @click="searchProperties"
plain />
+ <el-button size="small" :icon="RefreshRight" @click="getProperties"
plain />
+ </div>
</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>
@@ -210,5 +222,6 @@
display: flex;
flex-direction: row;
justify-content: space-between;
+ margin-bottom: 10px;
}
</style>
diff --git a/ui/src/components/TopNAggregation/index.vue
b/ui/src/components/TopNAggregation/index.vue
index 7889b9ad..5d6618f1 100644
--- a/ui/src/components/TopNAggregation/index.vue
+++ b/ui/src/components/TopNAggregation/index.vue
@@ -19,7 +19,7 @@
<script setup>
import { reactive, ref } from 'vue';
- import { watch, getCurrentInstance } from '@vue/runtime-core';
+ import { watch } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { jsonToYaml, yamlToJson } from '@/utils/yaml';
import { Search, RefreshRight } from '@element-plus/icons-vue';
