Merge pull request #262 from yin1999/fix-xds-sync-config
fix(xds): correct the configuration of the xds server
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index f197248..7648d7c 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -28,7 +28,8 @@
},
dynamicConfigDomain: {
YAMLView: 'YAML view',
- formView: 'Form view'
+ formView: 'Form view',
+ event: 'Event'
},
routingRuleDomain: {
YAMLView: 'YAML view',
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 28e68a7..39071ca 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -28,7 +28,8 @@
},
dynamicConfigDomain: {
YAMLView: 'YAML视图',
- formView: '表单视图'
+ formView: '表单视图',
+ event: '事件'
},
routingRuleDomain: {
YAMLView: 'YAML视图',
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
index 7a6d4bf..3efdc62 100644
--- a/ui-vue3/src/components/SearchTable.vue
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -18,7 +18,7 @@
<div class="__container_search_table">
<div class="search-query-container">
<a-row>
- <a-col :span="20">
+ <a-col :span="18">
<a-form>
<a-flex wrap="wrap" gap="large">
<template v-for="q in searchDomain.params">
@@ -67,29 +67,32 @@
</a-flex>
</a-form>
</a-col>
- <a-col :span="4">
- <div class="common-tool" @click="commonTool.customColumns = !commonTool.customColumns">
- <div class="custom-column button">
- <Icon icon="material-symbols-light:format-list-bulleted-rounded"></Icon>
- </div>
- <div class="dropdown" v-show="commonTool.customColumns">
- <a-card style="max-width: 300px" title="Custom Column">
- <div class="body">
- <div
- class="item"
- @click.stop="hideColumn(item)"
- v-for="(item, i) in searchDomain?.table.columns"
- >
- <Icon
- style="margin-bottom: -4px; font-size: 1rem; margin-right: 2px"
- :icon="item.__hide ? 'zondicons:view-hide' : 'zondicons:view-show'"
- ></Icon>
- {{ item.title }}
+ <a-col :span="6">
+ <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">
+ <Icon icon="material-symbols-light:format-list-bulleted-rounded"></Icon>
+ </div>
+ <div class="dropdown" v-show="commonTool.customColumns">
+ <a-card style="max-width: 300px" title="Custom Column">
+ <div class="body">
+ <div
+ class="item"
+ @click.stop="hideColumn(item)"
+ v-for="(item, i) in searchDomain?.table.columns"
+ >
+ <Icon
+ style="margin-bottom: -4px; font-size: 1rem; margin-right: 2px"
+ :icon="item.__hide ? 'zondicons:view-hide' : 'zondicons:view-show'"
+ ></Icon>
+ {{ item.title }}
+ </div>
</div>
- </div>
- </a-card>
+ </a-card>
+ </div>
</div>
- </div>
+ </a-flex>
</a-col>
</a-row>
</div>
@@ -211,7 +214,7 @@
.common-tool {
margin-top: 5px;
- width: 200px;
+ width: 100px;
cursor: pointer;
position: relative;
.button {
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index a33feef..6464e6a 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -398,6 +398,15 @@
tab: true,
icon: 'oui:app-console'
}
+ },
+ {
+ path: '/event/:ruleName',
+ name: 'dynamicConfigDomain.event',
+ component: () => import('../views/traffic/dynamicConfig/tabs/event.vue'),
+ meta: {
+ tab: true,
+ icon: 'oui:app-console'
+ }
}
]
},
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
index 31cfe98..8b1ba4a 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/index.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -15,17 +15,19 @@
~ limitations under the License.
-->
<template>
- <div class="__container_resources_application_index">
+ <div class="__container_traffic_config_index">
<search-table :search-domain="searchDomain">
<template #customOperation>
<a-button type="primary">新增动态配置</a-button>
- <a-button type="primary" style="margin-left: 10px">从模版创建</a-button>
</template>
<template #bodyCell="{ text, column, record }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
- text
- }}</a-button>
+ <span class="config-link" @click="router.replace(`formview/${record[column.key]}`)">
+ <b>
+ <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+ {{ text }}
+ </b>
+ </span>
</template>
<template v-if="column.dataIndex === 'ruleGranularity'">
{{ text ? '服务' : '应用' }}
@@ -34,7 +36,7 @@
{{ text ? '启用' : '禁用' }}
</template>
<template v-if="column.dataIndex === 'operation'">
- <a-button type="link">查看</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">查看</a-button>
<a-button type="link">修改</a-button>
<a-popconfirm
title="确认删除该动态配置？"
@@ -57,7 +59,10 @@
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
import router from '@/router'
+import { PRIMARY_COLOR } from '@/base/constants'
+import { Icon } from '@iconify/vue'
+let __null = PRIMARY_COLOR
let columns = [
{
title: 'ruleName',
@@ -122,8 +127,16 @@
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
</script>
<style lang="less" scoped>
-.search-table-container {
+.__container_traffic_config_index {
min-height: 60vh;
- //max-height: 70vh; //overflow: auto;
+ .config-link {
+ padding: 4px 10px 4px 4px;
+ border-radius: 4px;
+ color: v-bind('PRIMARY_COLOR');
+ &:hover {
+ cursor: pointer;
+ background: rgba(133, 131, 131, 0.13);
+ }
+ }
}
</style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue
new file mode 100644
index 0000000..a3cf4d1
--- /dev/null
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/event.vue
@@ -0,0 +1,26 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+-->
+
+<template>
+ <div>event todo</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="less" scoped></style>
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
index 77185b5..82cb5b2 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/tabs/formView.vue
@@ -16,97 +16,102 @@
-->
<template>
- <div class="__container_app_detail">
- <a-flex>
- <a-card>
- <a-descriptions :column="2" layout="vertical" title="">
- <!-- ruleName -->
- <a-descriptions-item
- :label="$t('flowControlDomain.ruleName')"
- :labelStyle="{ fontWeight: 'bold' }"
+ <div class="__container_traffic_config_form">
+ <a-card title="基础信息" class="dynamic-config-card">
+ <a-descriptions :column="2" layout="vertical">
+ <!-- ruleName -->
+ <a-descriptions-item
+ :label="$t('flowControlDomain.ruleName')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p
+ @click="copyIt('org.apache.dubbo.samples.UserService::.condition-router')"
+ class="description-item-content with-card"
>
- <p
- @click="copyIt('org.apache.dubbo.samples.UserService::.condition-router')"
- class="description-item-content with-card"
- >
- org.apache.dubbo.samples.UserService::.condition-router
- <CopyOutlined />
- </p>
- </a-descriptions-item>
+ org.apache.dubbo.samples.UserService::.condition-router
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- ruleGranularity -->
- <a-descriptions-item
- :label="$t('flowControlDomain.ruleGranularity')"
- :labelStyle="{ fontWeight: 'bold' }"
+ <!-- ruleGranularity -->
+ <a-descriptions-item
+ :label="$t('flowControlDomain.ruleGranularity')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph>服务</a-typography-paragraph>
+ </a-descriptions-item>
+
+ <!-- actionObject -->
+ <a-descriptions-item
+ :label="$t('flowControlDomain.actionObject')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p
+ @click="copyIt('org.apache.dubbo.samples.UserService')"
+ class="description-item-content with-card"
>
- <a-typography-paragraph> 服务 </a-typography-paragraph>
- </a-descriptions-item>
+ org.apache.dubbo.samples.UserService
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- actionObject -->
- <a-descriptions-item
- :label="$t('flowControlDomain.actionObject')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <p
- @click="copyIt('org.apache.dubbo.samples.UserService')"
- class="description-item-content with-card"
- >
- org.apache.dubbo.samples.UserService
- <CopyOutlined />
- </p>
- </a-descriptions-item>
+ <!-- timeOfTakingEffect -->
+ <a-descriptions-item
+ :label="$t('flowControlDomain.timeOfTakingEffect')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- timeOfTakingEffect -->
- <a-descriptions-item
- :label="$t('flowControlDomain.timeOfTakingEffect')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
- </a-descriptions-item>
-
- <!-- enabledStatus -->
- <a-descriptions-item
- :label="$t('flowControlDomain.enabledStatus')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph>
- {{ $t('flowControlDomain.enabled') }}
- </a-typography-paragraph>
- </a-descriptions-item>
- </a-descriptions>
- </a-card>
- </a-flex>
-
- <a-card title="配置【1】">
- <a-space align="center" size="large">
- <!-- enabledStatus-->
- <a-typography-title :level="5">
- {{ $t('flowControlDomain.enabledStatus') }}:
- <a-typography-text>
+ <!-- enabledStatus -->
+ <a-descriptions-item
+ :label="$t('flowControlDomain.enabledStatus')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph>
{{ $t('flowControlDomain.enabled') }}
- </a-typography-text>
- </a-typography-title>
- <!--endOfAction-->
- <a-typography-title :level="5">
- {{ $t('flowControlDomain.endOfAction') }}:
- <a-typography-text>
- {{ 'provider' }}
- </a-typography-text>
- </a-typography-title>
- </a-space>
- <a-space align="start" style="width: 100%">
- <a-typography-title :level="5"
- >{{ $t('flowControlDomain.actuatingRange') }}:</a-typography-title
- >
- <a-tag color="#2db7f5">address=10.255.10.11</a-tag>
- </a-space>
+ </a-typography-paragraph>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-card>
- <a-space align="start" style="width: 100%">
- <a-typography-title :level="5"
- >{{ $t('flowControlDomain.configurationItem') }}:</a-typography-title
+ <a-card title="配置【1】" class="dynamic-config-card">
+ <a-descriptions :column="2">
+ <a-descriptions-item
+ :label="$t('flowControlDomain.enabledStatus')"
+ :labelStyle="{ fontWeight: 'bold' }"
>
- <a-tag color="#87d068">retries=3</a-tag>
- </a-space>
+ {{ $t('flowControlDomain.enabled') }}
+ </a-descriptions-item>
+ <a-descriptions-item
+ :label="$t('flowControlDomain.endOfAction')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ {{ 'provider' }}
+ </a-descriptions-item>
+ <a-descriptions-item
+ :label="$t('flowControlDomain.actuatingRange')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ :span="2"
+ >
+ <a-input-group compact>
+ <a-input disabled value="address" style="width: 200px" />
+ <a-input disabled value="=" style="width: 50px" />
+ <a-input disabled value="10.255.10.11" style="width: 200px" />
+ </a-input-group>
+ </a-descriptions-item>
+ <a-descriptions-item
+ :label="$t('flowControlDomain.configurationItem')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ :span="2"
+ >
+ <a-input-group compact>
+ <a-input disabled value="retries" style="width: 200px" />
+ <a-input disabled value="=" style="width: 50px" />
+ <a-input disabled value="3" style="width: 200px" />
+ </a-input-group>
+ </a-descriptions-item>
+ </a-descriptions>
</a-card>
</div>
</template>
@@ -134,13 +139,19 @@
</script>
<style lang="less" scoped>
-.description-item-content {
- &.no-card {
- padding-left: 20px;
- }
+.__container_traffic_config_form {
+ .dynamic-config-card {
+ margin-bottom: 20px;
+ .description-item-content {
+ &.no-card {
+ padding-left: 20px;
+ }
- &.with-card:hover {
- color: v-bind('PRIMARY_COLOR');
+ &.with-card:hover {
+ color: v-bind('PRIMARY_COLOR');
+ }
+ }
}
+
}
</style>
