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 0875e0a9 Add CRUD function of index-rule-binding (#287)
0875e0a9 is described below
commit 0875e0a9ab284819757e264c106167f8d8015e29
Author: Wu ChuSheng <[email protected]>
AuthorDate: Tue Jun 27 14:14:15 2023 +0800
Add CRUD function of index-rule-binding (#287)
Co-authored-by: Gao Hongtao <[email protected]>
---
ui/src/components/Aside/index.vue | 21 ++-
ui/src/components/IndexRule/index.vue | 30 ++--
ui/src/components/IndexRuleBinding/Editor.vue | 244 +++++++++++++++++++++++++-
ui/src/components/IndexRuleBinding/index.vue | 89 +++++++++-
ui/src/components/Read/index.vue | 6 +-
ui/src/components/TopNav/index.vue | 6 +-
ui/src/router/index.js | 24 +--
ui/src/styles/elementPlus.scss | 12 +-
8 files changed, 383 insertions(+), 49 deletions(-)
diff --git a/ui/src/components/Aside/index.vue
b/ui/src/components/Aside/index.vue
index bb5a4a9c..6fd81b8c 100644
--- a/ui/src/components/Aside/index.vue
+++ b/ui/src/components/Aside/index.vue
@@ -362,6 +362,13 @@ function shrinkDown(e) {
// right click menu
function rightClickGroup(e, index) {
data.rightMenuList = groupMenu
+ if (props.type == 'measure') {
+ data.rightMenuList.push({
+ icon: "el-icon-document",
+ name: "new resources",
+ id: "create resources"
+ })
+ }
data.clickIndex = index
data.rightClickType = 'group'
openRightMenu(e)
@@ -552,7 +559,9 @@ function openDeletaDialog() {
if (data.rightClickType == 'group') {
return deleteGroupFunction(group)
} else if (data.rightClickType == 'index-rule') {
- return deleteIndexRuleFunction()
+ return deleteIndexRuleOrIndexRuleBindingFunction("index-rule")
+ } else if (data.rightClickType == 'index-rule-binding') {
+ return
deleteIndexRuleOrIndexRuleBindingFunction("index-rule-binding")
}
return deleteResource(group)
})
@@ -560,11 +569,15 @@ function openDeletaDialog() {
// catch error
})
}
-function deleteIndexRuleFunction() {
+function deleteIndexRuleOrIndexRuleBindingFunction(type) {
$loadingCreate()
+ const flag = {
+ 'index-rule': 'indexRule',
+ 'index-rule-binding': 'indexRuleBinding'
+ }
let group = data.groupLists[data.clickIndex].metadata.name
- let name =
data.groupLists[data.clickIndex].indexRule[data.clickChildIndex].metadata.name
- deleteIndexRuleOrIndexRuleBinding("index-rule", group, name)
+ let name =
data.groupLists[data.clickIndex][flag[type]][data.clickChildIndex].metadata.name
+ deleteIndexRuleOrIndexRuleBinding(type, group, name)
.then((res) => {
if (res.status == 200) {
if (res.data.deleted) {
diff --git a/ui/src/components/IndexRule/index.vue
b/ui/src/components/IndexRule/index.vue
index c9531e39..ce597f32 100644
--- a/ui/src/components/IndexRule/index.vue
+++ b/ui/src/components/IndexRule/index.vue
@@ -49,21 +49,23 @@ watch(() => route, () => {
})
function initData() {
- $loadingCreate()
- getIndexRuleOrIndexRuleBinding(data.type, data.group, data.name)
- .then(result => {
- data.indexRule = result.data.indexRule
- })
- .catch(err => {
- ElMessage({
- message: 'Please refresh and try again. Error: ' + err,
- type: "error",
- duration: 3000
+ if (data.type && data.group && data.name) {
+ $loadingCreate()
+ getIndexRuleOrIndexRuleBinding(data.type, data.group, data.name)
+ .then(result => {
+ data.indexRule = result.data.indexRule
})
- })
- .finally(() => {
- $loadingClose()
- })
+ .catch(err => {
+ ElMessage({
+ message: 'Please refresh and try again. Error: ' + err,
+ type: "error",
+ duration: 3000
+ })
+ })
+ .finally(() => {
+ $loadingClose()
+ })
+ }
}
</script>
diff --git a/ui/src/components/IndexRuleBinding/Editor.vue
b/ui/src/components/IndexRuleBinding/Editor.vue
index 68570dad..cb6b2029 100644
--- a/ui/src/components/IndexRuleBinding/Editor.vue
+++ b/ui/src/components/IndexRuleBinding/Editor.vue
@@ -17,10 +17,248 @@
~ under the License.
-->
-<script setup></script>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { watch, getCurrentInstance } from '@vue/runtime-core'
+import { useRoute, useRouter } from 'vue-router'
+import type { FormInstance } from 'element-plus'
+import { createIndexRuleOrIndexRuleBinding, getIndexRuleOrIndexRuleBinding,
updatendexRuleOrIndexRuleBinding } from '@/api/index'
+import { ElMessage } from 'element-plus'
+const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate
+const $loadingClose =
getCurrentInstance().appContext.config.globalProperties.$loadingClose
+const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus
+const ruleFormRef = ref<FormInstance>()
+
+const route = useRoute()
+const router = useRouter()
+const rules = {
+ beginAt: [
+ {
+ required: true, message: 'Please enter the beginAt', trigger: 'blur'
+ }
+ ],
+ expireAt: [
+ {
+ required: true, message: 'Please enter the expireAt', trigger: 'blur'
+ }
+ ],
+ rules: [
+ {
+ required: true, message: 'Please select the rules', trigger: 'blur'
+ }
+ ]
+}
+const data = reactive({
+ group: route.params.group,
+ name: route.params.name,
+ type: route.params.type,
+ operator: route.params.operator,
+ form: {
+ group: route.params.group,
+ name: route.params.name || '',
+ beginAt: '',
+ expireAt: '',
+ rules: []
+ }
+})
+
+
+watch(() => route, () => {
+ data.form = {
+ group: route.params.group,
+ name: route.params.name || '',
+ beginAt: '',
+ expireAt: '',
+ rules: []
+ }
+ data.group = route.params.group
+ data.name = route.params.name
+ data.type = route.params.type
+ data.operator = route.params.operator
+ initData()
+}, {
+ immediate: true,
+ deep: true
+})
+const submit = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid) => {
+ if (valid) {
+ const param = {
+ indexRuleBinding: {
+ metadata: {
+ group: data.form.group,
+ name: data.form.name
+ },
+ subject: {
+ catalog: "CATALOG_STREAM",
+ name: data.form.name
+ },
+ beginAt: data.form.beginAt,
+ expireAt: data.form.expireAt,
+ rules: data.form.rules
+ }
+ }
+ $loadingCreate()
+ if (data.operator == 'create') {
+ return createIndexRuleOrIndexRuleBinding("index-rule-binding", param)
+ .then(res => {
+ if (res.status == 200) {
+ ElMessage({
+ message: 'Create successed',
+ type: "success",
+ duration: 5000
+ })
+ $bus.emit('refreshAside')
+ $bus.emit('deleteGroup', data.form.group)
+ openIndexRuleBinding()
+ }
+ })
+ .catch(err => {
+ ElMessage({
+ message: 'Please refresh and try again. Error: ' + err,
+ type: "error",
+ duration: 3000
+ })
+ })
+ .finally(() => {
+ $loadingClose()
+ })
+ } else {
+ return updatendexRuleOrIndexRuleBinding("index-rule-binding",
data.form.group, data.form.name, param)
+ .then(res => {
+ if (res.status == 200) {
+ ElMessage({
+ message: 'Edit successed',
+ type: "success",
+ duration: 5000
+ })
+ $bus.emit('refreshAside')
+ $bus.emit('deleteResource', data.form.group)
+ openIndexRuleBinding()
+ }
+ })
+ .catch(err => {
+ ElMessage({
+ message: 'Please refresh and try again. Error: ' + err,
+ type: "error",
+ duration: 3000
+ })
+ })
+ .finally(() => {
+ $loadingClose()
+ })
+ }
+ }
+ })
+}
+
+function openIndexRuleBinding() {
+ const route = {
+ name: data.type + '',
+ params: {
+ group: data.form.group,
+ name: data.form.name,
+ operator: 'read',
+ type: data.type + ''
+ }
+ }
+ router.push(route)
+ const add = {
+ label: data.form.name,
+ type: `Read-${data.type}`,
+ route
+ }
+ $bus.emit('changeAside', data.form)
+ $bus.emit('AddTabs', add)
+}
+
+function initData() {
+ if (data.operator == 'edit' && data.form.group && data.form.name) {
+ $loadingCreate()
+ getIndexRuleOrIndexRuleBinding("index-rule-binding", data.form.group,
data.form.name)
+ .then(res => {
+ if (res.status == 200) {
+ const indexRuleBinding = res.data.indexRuleBinding
+ data.form = {
+ group: indexRuleBinding.metadata.group,
+ name: indexRuleBinding.metadata.name,
+ beginAt: indexRuleBinding.beginAt,
+ expireAt: indexRuleBinding.expireAt,
+ rules: indexRuleBinding.rules
+ }
+ }
+ })
+ .catch(err => {
+ ElMessage({
+ message: 'Please refresh and try again. Error: ' + err,
+ type: "error",
+ duration: 3000
+ })
+ })
+ .finally(() => {
+ $loadingClose()
+ })
+ }
+}
+</script>
<template>
- 123456Editor
+ <div>
+ <el-card>
+ <template #header>
+ <el-row>
+ <el-col :span="12">
+ <div class="flex align-item-center" style="height: 30px; width:
100%;">
+ <div class="flex" style="height: 30px;">
+ <span class="text-bold">Group：</span>
+ <span style="margin-right: 20px;">{{ data.group }}</span>
+ <span class="text-bold" v-if="data.operator ==
'edit'">Name：</span>
+ <span style="margin-right: 20px;">{{ data.name }}</span>
+ <span class="text-bold">Type：</span>
+ <span style="margin-right: 20px;">{{ data.type }}</span>
+ <span class="text-bold">Operation：</span>
+ <span>{{ data.operator }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="flex align-item-center justify-end" style="height:
30px;">
+ <el-button size="small" type="primary"
@click="submit(ruleFormRef)" color="#6E38F7">submit</el-button>
+ </div>
+ </el-col>
+ </el-row>
+ </template>
+ <el-form ref="ruleFormRef" :rules="rules" label-position="left"
label-width="100px" :model="data.form"
+ style="width: 50%;">
+ <el-form-item label="Group" prop="group">
+ <el-input v-model="data.form.group" clearable
:disabled="true"></el-input>
+ </el-form-item>
+ <el-form-item label="Name" prop="name">
+ <el-input v-model="data.form.name" :disabled="data.operator ==
'edit'" clearable
+ placeholder="Input Name"></el-input>
+ </el-form-item>
+ <el-form-item label="Begin At" prop="beginAt">
+ <el-date-picker v-model="data.form.beginAt" placeholder="Choose
Begin At" style="width: 100%;" type="datetime"
+ clearable></el-date-picker>
+ </el-form-item>
+ <el-form-item label="Expire At" prop="expireAt">
+ <el-date-picker v-model="data.form.expireAt" placeholder="Choose
Expire" style="width: 100%;" type="datetime"
+ 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"
+ style="width: 100%;" clearable multiple></el-select>
+ </el-form-item>
+ </el-form>
+ </el-card>
+ </div>
</template>
-<style></style>
\ No newline at end of file
+<style lang="scss" scoped>
+::v-deep {
+ .el-card {
+ margin: 15px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/IndexRuleBinding/index.vue
b/ui/src/components/IndexRuleBinding/index.vue
index f8d4369c..af0e1922 100644
--- a/ui/src/components/IndexRuleBinding/index.vue
+++ b/ui/src/components/IndexRuleBinding/index.vue
@@ -17,10 +17,93 @@
~ under the License.
-->
-<script setup></script>
+<script setup>
+import { reactive } from 'vue';
+import { watch, getCurrentInstance } from '@vue/runtime-core'
+import { useRoute } from 'vue-router'
+import { getIndexRuleOrIndexRuleBinding } from '@/api/index'
+
+const { proxy } = getCurrentInstance()
+const $loadingCreate =
getCurrentInstance().appContext.config.globalProperties.$loadingCreate
+const $loadingClose = proxy.$loadingClose
+
+const data = reactive({
+ group: '',
+ name: '',
+ type: '',
+ operator: '',
+ indexRuleBinding: {}
+})
+
+const route = useRoute()
+
+watch(() => route, () => {
+ data.group = route.params.group
+ data.name = route.params.name
+ data.type = route.params.type
+ data.operator = route.params.operator
+ initData()
+}, {
+ immediate: true,
+ deep: true
+})
+
+function initData() {
+ if (data.type && data.group && data.name) {
+ $loadingCreate()
+ getIndexRuleOrIndexRuleBinding(data.type, data.group, data.name)
+ .then(result => {
+ data.indexRuleBinding = result.data.indexRuleBinding
+ })
+ .catch(err => {
+ ElMessage({
+ message: 'Please refresh and try again. Error: ' + err,
+ type: "error",
+ duration: 3000
+ })
+ })
+ .finally(() => {
+ $loadingClose()
+ })
+ }
+}
+</script>
<template>
- 123456
+ <div>
+ <el-card>
+ <template #header>
+ <div class="flex">
+ <span class="text-bold">Group：</span>
+ <span style="margin-right: 20px;">{{ data.group }}</span>
+ <span class="text-bold">Name：</span>
+ <span style="margin-right: 20px;">{{ data.name }}</span>
+ <span class="text-bold">Type：</span>
+ <span style="margin-right: 20px;">{{ data.type }}</span>
+ <span class="text-bold">Operation：</span>
+ <span>Read</span>
+ </div>
+ </template>
+ <el-form label-position="left" label-width="100px"
:model="data.indexRuleBinding" style="width: 50%;">
+ <el-form-item label="Begin At">
+ <el-date-picker v-model="data.indexRuleBinding.beginAt"
:disabled="true" type="datetime"
+ style="width: 100% !important;"></el-date-picker>
+ </el-form-item>
+ <el-form-item label="Expire At">
+ <el-date-picker v-model="data.indexRuleBinding.expireAt"
:disabled="true" type="datetime"></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-form-item>
+ </el-form>
+ </el-card>
+ </div>
</template>
-<style></style>
\ No newline at end of file
+<style lang="scss" scoped>
+::v-deep {
+ .el-card {
+ margin: 15px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/Read/index.vue b/ui/src/components/Read/index.vue
index 945ffc9d..8c0376c4 100644
--- a/ui/src/components/Read/index.vue
+++ b/ui/src/components/Read/index.vue
@@ -389,7 +389,7 @@ function changeFields() {
</template>
<el-row>
<el-col :span="12">
- <div class="flex align-item-center" style="height: 30px;
width: 100%;">
+ <div class="flex align-item-center" style="height: 40px;
width: 100%;">
<el-select v-model="data.tagFamily"
@change="changeTagFamilies" filterable
placeholder="Please select">
<el-option v-for="item in data.options"
:key="item.value" :label="item.label"
@@ -406,12 +406,12 @@ function changeFields() {
type="datetimerange" :shortcuts="shortcuts"
range-separator="to" start-placeholder="begin"
end-placeholder="end" align="right">
</el-date-picker>
- <el-button size="small" :icon="Search"
@click="searchTableData" color="#6E38F7" plain></el-button>
+ <el-button size="normal" :icon="Search"
@click="searchTableData" color="#6E38F7" plain></el-button>
</div>
</el-col>
<el-col :span="12">
<div class="flex align-item-center justify-end"
style="height: 30px;">
- <el-button size="small" :icon="RefreshRight"
@click="getTableData" plain></el-button>
+ <el-button size="normal" :icon="RefreshRight"
@click="getTableData" plain></el-button>
</div>
</el-col>
</el-row>
diff --git a/ui/src/components/TopNav/index.vue
b/ui/src/components/TopNav/index.vue
index c91801b7..4ed5db9c 100644
--- a/ui/src/components/TopNav/index.vue
+++ b/ui/src/components/TopNav/index.vue
@@ -68,15 +68,15 @@ function initData() {
if (operator == 'read') {
routeData.name = type
add.label = name
- add.type = type == 'index-rule' || type == 'index-rule' ?
`Read-${type}` : 'Read'
+ add.type = type == 'index-rule' || type == 'index-rule-binding' ?
`Read-${type}` : 'Read'
} else if (operator == 'edit') {
routeData.name = `edit-${type}`
add.label = name
- add.type = type == 'index-rule' || type == 'index-rule' ?
`Edit-${type}` : 'Edit'
+ add.type = type == 'index-rule' || type == 'index-rule-binding' ?
`Edit-${type}` : 'Edit'
} else {
routeData.name = `create-${type}`
add.label = group
- add.type = type == 'index-rule' || type == 'index-rule' ?
`Create-${type}` : 'Create'
+ add.type = type == 'index-rule' || type == 'index-rule-binding' ?
`Create-${type}` : 'Create'
}
data.tabsList.push(add)
}
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index e19f41cd..79e417c7 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -72,34 +72,34 @@ const router = createRouter({
component: () => import('@/views/Stream/createEdit.vue')
},
{
- path:
'/banyandb/stream/index-rule/operator/:type/:operator/:group',
+ path:
'/banyandb/stream/index-rule/operator-read/:type/:operator/:group/:name',
+ name: 'index-rule',
+ component: () => import('@/components/IndexRule/index.vue')
+ },
+ {
+ path:
'/banyandb/stream/index-rule/operator-create/:type/:operator/:group',
name: 'create-index-rule',
component: () => import('@/components/IndexRule/Editor.vue')
},
{
- path:
'/banyandb/stream/index-rule/operator/:type/:operator/:group/:name',
+ path:
'/banyandb/stream/index-rule/operator-edit/:type/:operator/:group/:name',
name: 'edit-index-rule',
component: () => import('@/components/IndexRule/Editor.vue')
},
{
- path:
'/banyandb/stream/index-rule/operator/:type/:operator/:group/:name',
- name: 'index-rule',
- component: () => import('@/components/IndexRule/index.vue')
+ path:
'/banyandb/stream/index-rule-binding/operator-read/:type/:operator/:group/:name',
+ name: 'index-rule-binding',
+ component: () =>
import('@/components/IndexRuleBinding/index.vue')
},
{
- path:
'/banyandb/stream/index-rule-binding/operator/:type/:operator/:group',
+ path:
'/banyandb/stream/index-rule-binding/operator-create/:type/:operator/:group',
name: 'create-index-rule-binding',
component: () =>
import('@/components/IndexRuleBinding/Editor.vue')
},
{
- path:
'/banyandb/stream/index-rule-binding/operator/:type/:operator/:group/:name',
+ path:
'/banyandb/stream/index-rule-binding/operator-edit/:type/:operator/:group/:name',
name: 'edit-index-rule-binding',
component: () =>
import('@/components/IndexRuleBinding/Editor.vue')
- },
- {
- path:
'/banyandb/stream/index-rule-binding/operator/:type/:operator/:group/:name',
- name: 'index-rule-binding',
- component: () =>
import('@/components/IndexRuleBinding/index.vue')
}
]
},
diff --git a/ui/src/styles/elementPlus.scss b/ui/src/styles/elementPlus.scss
index 5f257a14..dbbc1273 100644
--- a/ui/src/styles/elementPlus.scss
+++ b/ui/src/styles/elementPlus.scss
@@ -131,7 +131,6 @@
el-select
==================== */
.el-select {
- height: 25px !important;
border-radius: 1px !important;
--el-select-input-focus-border-color: var(--color-main) !important;
--el-select-border-color-hover: var(--color-main) !important;
@@ -156,26 +155,25 @@
el-input
====================*/
.el-input {
- height: 25px !important;
--el-input-border-radius: 1px !important;
--el-input-focus-border-color: var(--color-main) !important;
--el-input-clear-hover-color: var(--color-main) !important;
- .el-input__inner {
+ /* .el-input__inner {
height: 25px !important;
- }
+ } */
}
/* ================
el-date-editor
=====================*/
.el-date-editor {
- height: 25px !important;
+ /* height: 25px !important; */
border-radius: 1px !important;
- .el-range-input {
+ /* .el-range-input {
height: 21px !important;
- }
+ } */
}
/* ================
