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 dac1e28c Fix: Highlight the current node in groups tree (#573)
dac1e28c is described below
commit dac1e28c0716365cb3224a55c92c11598b8a0e5e
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Mon Dec 16 17:49:25 2024 +0800
Fix: Highlight the current node in groups tree (#573)
---
ui/src/components/GroupTree/index.vue | 37 ++++++++++-----------------
ui/src/components/IndexRule/Editor.vue | 2 +-
ui/src/components/IndexRule/index.vue | 2 +-
ui/src/components/IndexRuleBinding/Editor.vue | 2 +-
ui/src/components/IndexRuleBinding/index.vue | 2 +-
ui/src/components/TopNAggregation/Editor.vue | 2 +-
ui/src/components/TopNAggregation/index.vue | 2 +-
ui/src/styles/elementPlus.scss | 8 +++---
8 files changed, 25 insertions(+), 32 deletions(-)
diff --git a/ui/src/components/GroupTree/index.vue
b/ui/src/components/GroupTree/index.vue
index 1995d640..e4b741bb 100644
--- a/ui/src/components/GroupTree/index.vue
+++ b/ui/src/components/GroupTree/index.vue
@@ -58,7 +58,7 @@ const data = reactive({
ttlUnit: "UNIT_DAY",
ttlNum: 3
},
- activeMenu: '',
+ activeNode: '',
formLabelWidth: "170px"
})
@@ -235,6 +235,7 @@ function getGroupLists() {
}
Promise.all(promise).then(() => {
data.groupLists = processGroupTree()
+ initActiveNode()
}).catch((err) => {
ElMessage({
message: 'An error occurred while obtaining group
data. Please refresh and try again. Error: ' + err,
@@ -259,9 +260,8 @@ function processGroupTree() {
catalog: group.catalog,
type: TargetTypes.Group,
key: group.metadata.name,
- icon: `el-icon-folder`
}
- const keys = Object.keys(TypeMap);
+ const keys = Object.keys(TypeMap)
for (const key of keys) {
if (group[key]) {
const n = key === 'children' ? props.type : key
@@ -269,14 +269,14 @@ function processGroupTree() {
name: n.charAt(0).toUpperCase() + n.slice(1),
children: [],
type: n,
- key: `${group.metadata.name}_${n}`,
+ key: `${group.metadata.name}_${TypeMap[n] || n}`,
group: group.metadata.name,
}
for (const item of group[key]) {
list.children.push({
...item.metadata,
type: TargetTypes.Resources,
- key:
`${group.metadata.name}_${n}_${item.metadata.name}`,
+ key: `${group.metadata.name}_${TypeMap[n] ||
n}_${item.metadata.name}`,
parent: TypeMap[n] || n,
catalog: group.catalog,
resourceOpts: group.resourceOpts
@@ -315,7 +315,6 @@ function viewResources(node) {
type: `Read-${parent}`,
route
}
- data.activeMenu = `${group}-${name}`
return $bus.emit('AddTabs', add)
}
if (props.type == 'property') {
@@ -351,7 +350,6 @@ function viewResources(node) {
type: 'Read',
route
}
- data.activeMenu = `${group}-${name}`
$bus.emit('AddTabs', add)
}
@@ -662,12 +660,11 @@ function clearGroupForm() {
ttlNum: 3
}
}
-function initActiveMenu() {
- const group = route.params.group
- const name = route.params.name
- if (group && name) {
+function initActiveNode() {
+ const {group, name, type} = route.params
- data.activeMenu = `${group}-${name}`
+ if (group && name && type) {
+ data.activeNode = `${group}_${type}_${name}`
}
}
const filterNode = (value, data) => {
@@ -699,16 +696,7 @@ function onMouseUp(e) {
document.removeEventListener('mouseup', onMouseUp);
}
-// Eventbus, change isCollapse
-$bus.on('resetAside', () => {
- data.activeMenu = ''
- router.push({
- name: `${props.type}Start`
- })
-})
-
getGroupLists()
-initActiveMenu()
watch(filterText, (val) => {
treeRef.value?.filter(val)
@@ -718,7 +706,7 @@ watch(filterText, (val) => {
<template>
<div :style="{display: 'flex', flexDirection: 'column', width:
`${data.treeWidth}`, height: `100%`}" ref="resizable" >
<div style="display: flex; flex-direction: row; width: 100%; height:
100%; justify-content: space-between;">
- <div class="size flex" style="display: flex; flex-direction:
column; width: calc(100% - 10px); overflow: auto;">
+ <div class="size flex" style="display: flex; flex-direction:
column; width: calc(100% - 6px); overflow: auto;">
<el-input v-if="props.type !== 'stream'" class="group-search"
v-model="filterText"
placeholder="Search" :prefix-icon="Search" clearable />
<el-tree
@@ -730,7 +718,10 @@ watch(filterText, (val) => {
@node-click="viewResources"
@node-contextmenu="openOperationMenus"
class="group-tree"
- icon=""
+ node-key="key"
+ :default-expanded-keys="[data.activeNode]"
+ :current-node-key="data.activeNode"
+ highlight-current
>
<template #default="{ _, data }">
<div class="node-icon">
diff --git a/ui/src/components/IndexRule/Editor.vue
b/ui/src/components/IndexRule/Editor.vue
index c27aa892..451caa43 100644
--- a/ui/src/components/IndexRule/Editor.vue
+++ b/ui/src/components/IndexRule/Editor.vue
@@ -267,7 +267,7 @@ function initData() {
</el-select>
</el-form-item>
<el-form-item label="Tags" prop="tags">
- <el-select v-model="data.form.tags" allow-create filterable
default-first-option placeholder="Input Tags"
+ <el-select class="tags-and-rules" v-model="data.form.tags"
allow-create filterable default-first-option placeholder="Input Tags"
style="width: 100%;" clearable multiple></el-select>
</el-form-item>
<el-form-item label="Type" prop="type">
diff --git a/ui/src/components/IndexRule/index.vue
b/ui/src/components/IndexRule/index.vue
index 79c09011..506f4f82 100644
--- a/ui/src/components/IndexRule/index.vue
+++ b/ui/src/components/IndexRule/index.vue
@@ -79,7 +79,7 @@ async function initData() {
<el-input v-model="data.indexRule.analyzer"
:disabled="true"></el-input>
</el-form-item>
<el-form-item label="Tags">
- <el-select v-model="data.indexRule.tags" style="width: 100%;"
:disabled="true" multiple></el-select>
+ <el-select class="tags-and-rules" v-model="data.indexRule.tags"
style="width: 100%;" :disabled="true" multiple></el-select>
</el-form-item>
<el-form-item label="Type">
<el-input v-model="data.indexRule.type" disabled></el-input>
diff --git a/ui/src/components/IndexRuleBinding/Editor.vue
b/ui/src/components/IndexRuleBinding/Editor.vue
index d7cd27ed..bcce7714 100644
--- a/ui/src/components/IndexRuleBinding/Editor.vue
+++ b/ui/src/components/IndexRuleBinding/Editor.vue
@@ -240,7 +240,7 @@ function initData() {
clearable></el-date-picker>
</el-form-item>
<el-form-item label="Rules" prop="rules">
- <el-select v-model="data.form.rules" allow-create filterable
default-first-option placeholder="Input Rules"
+ <el-select class="tags-and-rules" v-model="data.form.rules"
allow-create filterable default-first-option placeholder="Input Rules"
style="width: 100%;" clearable multiple></el-select>
</el-form-item>
</el-form>
diff --git a/ui/src/components/IndexRuleBinding/index.vue
b/ui/src/components/IndexRuleBinding/index.vue
index a7556b19..7c14aaf9 100644
--- a/ui/src/components/IndexRuleBinding/index.vue
+++ b/ui/src/components/IndexRuleBinding/index.vue
@@ -85,7 +85,7 @@ function initData() {
<el-date-picker v-model="data.indexRuleBinding.expireAt"
:disabled="true" type="datetime" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="Rules">
- <el-select v-model="data.indexRuleBinding.rules" style="width:
100%;" :disabled="true" multiple></el-select>
+ <el-select class="tags-and-rules"
v-model="data.indexRuleBinding.rules" style="width: 100%;" :disabled="true"
multiple></el-select>
</el-form-item>
</el-form>
</el-card>
diff --git a/ui/src/components/TopNAggregation/Editor.vue
b/ui/src/components/TopNAggregation/Editor.vue
index 1cd56b8e..de8f2de8 100644
--- a/ui/src/components/TopNAggregation/Editor.vue
+++ b/ui/src/components/TopNAggregation/Editor.vue
@@ -307,7 +307,7 @@ function initData() {
</el-select>
</el-form-item>
<el-form-item label="Group By Tag Names" prop="groupByTagNames"
label-width="150px">
- <el-select v-model="data.form.groupByTagNames" allow-create
filterable default-first-option placeholder="Input Group By Tag Names"
+ <el-select class="tags-and-rules"
v-model="data.form.groupByTagNames" allow-create filterable
default-first-option placeholder="Input Group By Tag Names"
style="width: 100%;" clearable multiple></el-select>
</el-form-item>
<el-form-item label="Counters Number" prop="countersNumber"
label-width="150px">
diff --git a/ui/src/components/TopNAggregation/index.vue
b/ui/src/components/TopNAggregation/index.vue
index 0853b762..340a10dc 100644
--- a/ui/src/components/TopNAggregation/index.vue
+++ b/ui/src/components/TopNAggregation/index.vue
@@ -92,7 +92,7 @@ function initData() {
<el-select v-model="data.topNAggregation.fieldValueSort"
style="width: 100%;" :disabled="true"></el-select>
</el-form-item>
<el-form-item label="Group By Tag Names">
- <el-select v-model="data.topNAggregation.groupByTagNames"
style="width: 100%;" :disabled="true" multiple></el-select>
+ <el-select class="tags-and-rules"
v-model="data.topNAggregation.groupByTagNames" style="width: 100%;"
:disabled="true" multiple></el-select>
</el-form-item>
<el-form-item label="Counters Number">
<el-input v-model="data.topNAggregation.countersNumber"
:disabled="true"></el-input>
diff --git a/ui/src/styles/elementPlus.scss b/ui/src/styles/elementPlus.scss
index b94d8d17..3d0de355 100644
--- a/ui/src/styles/elementPlus.scss
+++ b/ui/src/styles/elementPlus.scss
@@ -120,10 +120,12 @@
padding: 0px !important;
--el-icon-size: 20px !important;
}
+.tags-and-rules .el-select__selection {
+ display: block;
+}
-.el-tag__content {
- height: 100%;
- width: 95%;
+.tags-and-rules .el-select__selected-item {
+ margin-bottom: 5px;
}
.el-select__tags .el-tag {
