From 0875e0a9ab284819757e264c106167f8d8015e29 Mon Sep 17 00:00:00 2001
From: Wu ChuSheng <a13068977543@gmail.com>
Date: Tue, 27 Jun 2023 14:14:15 +0800
Subject: [PATCH] Add CRUD function of index-rule-binding (#287)

Co-authored-by: Gao Hongtao <hanahmily@gmail.com>
---
 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 bb5a4a9c5..6fd81b8c2 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 c9531e39b..ce597f323 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 68570dadf..cb6b20296 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 f8d4369c2..af0e1922b 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 945ffc9d7..8c0376c4f 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 c91801b78..4ed5db9cd 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 e19f41cdd..79e417c7c 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 5f257a144..dbbc12733 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;
-    }
+    } */
 }
 
 /* ================