Merge pull request #266 from jianyi-gronk/feat/ui/dynamic_config

complete dynamic config
apache · Apr 29, 2024 · a134e88 · a134e88
2 parents a4cc684 + 0868250
commit a134e88
Show file tree

Hide file tree

Showing 13 changed files with 392 additions and 153 deletions.
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
@@ -68,8 +68,8 @@ const words: I18nType = {
     faultTolerantProtection: 'Fault-tolerant protection',
     runTimeEffective: 'Run time effective',
     ruleGranularity: 'Rule granularity',
-    timeOfTakingEffect: 'Time of taking effect',
-    enabledStatus: 'Enabled status',
+    effectTime: 'Time of taking effect',
+    enabledState: 'Enabled status',
     priority: 'Priority',
     off: 'off',
     on: 'on',

diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
@@ -68,8 +68,8 @@ const words: I18nType = {
     faultTolerantProtection: '容错保护',
     runTimeEffective: '运行时生效',
     ruleGranularity: '规则粒度',
-    timeOfTakingEffect: '生效时间',
-    enabledStatus: '启用状态',
+    effectTime: '生效时间',
+    enabledState: '启用状态',
     priority: '优先级',
     off: '关',
     on: '开',

diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
@@ -68,7 +68,7 @@
           </a-form>
         </a-col>
         <a-col :span="6">
-          <a-flex style="justify-content: flex-end;">
+          <a-flex style="justify-content: flex-end">
             <slot name="customOperation"></slot>
             <div class="common-tool" @click="commonTool.customColumns = !commonTool.customColumns">
               <div class="custom-column button">

diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -20,7 +20,7 @@
       <div v-if="tabRoute.meta.tab" class="header">
         <a-row>
           <a-col :span="1">
-            <span @click="router.push('../')" style="float: left">
+            <span @click="router.push(tabRoute.meta.back ?? '../')" style="float: left">
               <Icon icon="material-symbols:keyboard-backspace-rounded" class="back" />
             </span>
           </a-col>

diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
@@ -382,30 +382,33 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/formview/:ruleName',
+                path: '/formview/:pathId/:isEdit',
                 name: 'dynamicConfigDomain.formView',
                 component: () => import('../views/traffic/dynamicConfig/tabs/formView.vue'),
                 meta: {
                   tab: true,
-                  icon: 'oui:apm-trace'
+                  icon: 'oui:apm-trace',
+                  back: '../../'
                 }
               },
               {
-                path: '/yamlview/:ruleName',
+                path: '/yamlview/:pathId/:isEdit',
                 name: 'dynamicConfigDomain.YAMLView',
                 component: () => import('../views/traffic/dynamicConfig/tabs/YAMLView.vue'),
                 meta: {
                   tab: true,
-                  icon: 'oui:app-console'
+                  icon: 'oui:app-console',
+                  back: '../../'
                 }
               },
               {
-                path: '/event/:ruleName',
+                path: '/event/:pathId/:isEdit',
                 name: 'dynamicConfigDomain.event',
                 component: () => import('../views/traffic/dynamicConfig/tabs/event.vue'),
                 meta: {
                   tab: true,
-                  icon: 'oui:app-console'
+                  icon: 'oui:app-console',
+                  back: '../../'
                 }
               }
             ]

diff --git a/ui-vue3/src/views/resources/services/tabs/distribution.vue b/ui-vue3/src/views/resources/services/tabs/distribution.vue
@@ -78,7 +78,7 @@ import { PRIMARY_COLOR } from '@/base/constants'
 import { Icon } from '@iconify/vue'
 
 let __null = PRIMARY_COLOR
-const router = useRouter();
+const router = useRouter()
 const {
   appContext: {
     config: { globalProperties }

diff --git a/ui-vue3/src/views/resources/services/tabs/paramRoute.vue b/ui-vue3/src/views/resources/services/tabs/paramRoute.vue
@@ -25,15 +25,19 @@
             <DeleteOutlined @click="emit('deleteParamRoute', props.index)" class="edit-icon" />
           </a-flex>
           <a-flex class="handle-form" v-else>
-            <CheckOutlined @click="update"  class="edit-icon" />
+            <CheckOutlined @click="update" class="edit-icon" />
             <CloseOutlined @click="reset" class="edit-icon" />
           </a-flex>
         </a-flex>
       </template>
       <a-form :labelCol="{ span: 3 }" :disabled="!isEdit">
         <a-form-item label="选择方法">
           <a-select v-model:value="editValue.method.value" style="width: 120px">
-            <a-select-option v-for="(item, index) in editValue.method.selectArr" :value="item" :key="index">
+            <a-select-option
+              v-for="(item, index) in editValue.method.selectArr"
+              :value="item"
+              :key="index"
+            >
               {{ item }}
             </a-select-option>
           </a-select>
@@ -58,13 +62,17 @@
                 <a-flex justify="space-between">
                   <PlusOutlined
                     class="edit-icon"
-                    :class="{'disabled-icon': !isEdit}"
+                    :class="{ 'disabled-icon': !isEdit }"
                     @click="isEdit && addFunctionParams(props.index, idx)"
                   />
                   <MinusOutlined
                     class="edit-icon"
-                    :class="{'disabled-icon': !isEdit || editValue.functionParams.length === 1}"
-                    @click="isEdit && editValue.functionParams.length !== 1 && deleteFunctionParams(props.index, idx)"
+                    :class="{ 'disabled-icon': !isEdit || editValue.functionParams.length === 1 }"
+                    @click="
+                      isEdit &&
+                        editValue.functionParams.length !== 1 &&
+                        deleteFunctionParams(props.index, idx)
+                    "
                   />
                 </a-flex>
               </template>
@@ -94,13 +102,15 @@
                 <a-flex justify="space-between">
                   <PlusOutlined
                     class="edit-icon"
-                    :class="{'disabled-icon': !isEdit}"
+                    :class="{ 'disabled-icon': !isEdit }"
                     @click="isEdit && addDestination(idx)"
                   />
                   <MinusOutlined
                     class="edit-icon"
-                    :class="{'disabled-icon': !isEdit || editValue.functionParams.length === 1}"
-                    @click="isEdit && editValue.functionParams.length !== 1 && deleteDestination(idx)"
+                    :class="{ 'disabled-icon': !isEdit || editValue.functionParams.length === 1 }"
+                    @click="
+                      isEdit && editValue.functionParams.length !== 1 && deleteDestination(idx)
+                    "
                   />
                 </a-flex>
               </template>
@@ -113,46 +123,51 @@
 </template>
 
 <script setup lang="ts">
-import { CheckOutlined, CloseOutlined, EditOutlined, DeleteOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
+import {
+  CheckOutlined,
+  CloseOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  MinusOutlined
+} from '@ant-design/icons-vue'
 import { ref } from 'vue'
 
-const isEdit = ref(false);
+const isEdit = ref(false)
 
 const changeEditState = () => {
-  isEdit.value = true;
+  isEdit.value = true
 }
 
 const emit = defineEmits(['deleteParamRoute', 'update'])
 const props = defineProps({
   paramRouteForm: {
     type: Object,
-    default: () => ({})
+    default: () => {}
   },
   index: {
     type: Number
   }
 })
 
-const editValue = ref(
-  {
-    method: {
-      value: undefined,
-      selectArr: []
-    },
-    functionParams: [],
-    destination: []
-  }
-)
+const editValue = ref({
+  method: {
+    value: undefined,
+    selectArr: []
+  },
+  functionParams: [],
+  destination: []
+})
 
 const reset = () => {
-  isEdit.value = false;
+  isEdit.value = false
   editValue.value = JSON.parse(JSON.stringify(props.paramRouteForm))
 }
 
-reset();
+reset()
 
 const update = () => {
-  isEdit.value = false;
+  isEdit.value = false
   emit('update', props.index, editValue)
 }
 

diff --git a/ui-vue3/src/views/resources/services/tabs/sceneConfig.vue b/ui-vue3/src/views/resources/services/tabs/sceneConfig.vue
@@ -61,7 +61,7 @@
       </a-tab-pane>
       <a-tab-pane key="paramRoute" tab="参数路由">
         <ParamRoute
-          v-for="item, index in paramRouteForms"
+          v-for="(item, index) in paramRouteForms"
           class="param-route"
           :key="index"
           :paramRouteForm="item"
@@ -91,7 +91,7 @@ const editForm = reactive({
   },
   sameArea: {
     value: 'close'
-  },
+  }
 })
 
 const activeKey = ref('timeout')
@@ -131,7 +131,7 @@ const addParamRoute = () => {
 addParamRoute()
 
 const deleteParamRoute = (index: number) => {
-  paramRouteForms.value.splice(index, 1);
+  paramRouteForms.value.splice(index, 1)
 }
 </script>
 

diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -22,7 +22,10 @@
       </template>
       <template #bodyCell="{ text, column, record }">
         <template v-if="column.dataIndex === 'ruleName'">
-          <span class="config-link" @click="router.replace(`formview/${record[column.key]}`)">
+          <span
+            class="config-link"
+            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)"
+          >
             <b>
               <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
               {{ text }}
@@ -36,8 +39,17 @@
           {{ text ? '启用' : '禁用' }}
         </template>
         <template v-if="column.dataIndex === 'operation'">
-          <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">查看</a-button>
-          <a-button type="link">修改</a-button>
+          <a-button
+            type="link"
+            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/0`)"
+            >查看</a-button
+          >
+          <a-button
+            type="link"
+            @click="router.push(`/traffic/dynamicConfig/formview/${record.ruleName}/1`)"
+          >
+            修改
+          </a-button>
           <a-popconfirm
             title="确认删除该动态配置？"
             ok-text="Yes"
@@ -58,10 +70,12 @@ import { searchDynamicConfig } from '@/api/service/traffic'
 import SearchTable from '@/components/SearchTable.vue'
 import { SearchDomain, sortString } from '@/utils/SearchUtil'
 import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
-import router from '@/router'
+import { useRouter } from 'vue-router'
 import { PRIMARY_COLOR } from '@/base/constants'
 import { Icon } from '@iconify/vue'
 
+const router = useRouter()
+
 let __null = PRIMARY_COLOR
 let columns = [
   {

diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/YAMLView.vue
@@ -32,7 +32,7 @@
               theme="vs-dark"
               :height="500"
               language="yaml"
-              :readonly="isReadonly"
+              :readonly="!isEdit"
             />
           </div>
         </a-flex>
@@ -53,15 +53,20 @@
       </a-col>
     </a-flex>
   </a-card>
+  <a-flex v-if="isEdit" style="margin-top: 30px">
+    <a-button type="primary">确认</a-button>
+    <a-button style="margin-left: 30px">取消</a-button>
+  </a-flex>
 </template>
 
 <script setup lang="ts">
 import MonacoEditor from '@/components/editor/MonacoEditor.vue'
 import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
-import { computed, ref } from 'vue'
-
-const isReadonly = ref(true)
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
+const route = useRoute()
+const isEdit = ref(route.params.isEdit === '1')
 const isDrawerOpened = ref(false)
 
 const sliderSpan = ref(8)