1.format code
diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
index 7c723f3..54b5e5f 100644
--- a/ui-vue3/src/api/mock/mockInstance.ts
+++ b/ui-vue3/src/api/mock/mockInstance.ts
@@ -17,87 +17,101 @@
import Mock from 'mockjs'
-Mock.mock('/mock/instance/search', 'get', {
- code: 200,
- message: 'laborum qui',
- data: {
- total: 66,
- curPage: 82,
- pageSize: 31,
- data: [
- {
- ip: '205.216.185.96',
- name: '用省中际解理',
- deployState: {
- label: 'dolor',
- value: 'in amet',
- level: 'amet nisi incididunt',
- tip: '133.16.55.40'
- },
- deployCluster: 'veniam elit irure',
- registerStates: [
- {
- label: 'in consequat est',
- value: 'esse non Lorem',
- level: 'sit',
- tip: '122.249.164.252'
- }
- ],
- registerClusters: ['cupidatat'],
- cpu: 'officia cupidatat reprehenderit magna ex',
- memory: 'mollit',
- startTime: '2016-07-31 19:20:31',
- registerTime: '2014-02-09 04:02:41',
- labels: ['cupidat']
- },
- {
- ip: '117.23.142.162',
- name: '之受力即此',
- deployState: {
- label: 'sint culpa elit quis id',
- value: 'amet',
- level: 'adipisicing do',
- tip: '112.176.231.68'
- },
- deployCluster: 'esse sit',
- registerStates: [
- {
- label: 'ut',
- value: 'eu sit',
- level: 'in eiusmod ullamco',
- tip: '220.153.108.236'
- }
- ],
- registerClusters: ['ea consectetur'],
- cpu: 'dolor sint deserunt',
- memory: 'sint eu commodo proident',
- startTime: '1994-12-22 18:24:57',
- registerTime: '1986-07-24 03:18:24'
- },
- {
- ip: '41.215.196.61',
- name: '值青给值',
- deployState: {
- label: 'sunt',
- value: 'consectetur in',
- level: 'culpa dolore',
- tip: '142.182.249.124'
- },
- deployCluster: 'cupidatat eu nostrud',
- registerStates: [
- {
- label: 'ad quis',
- value: 'Excepteur esse dolore Ut dolore',
- level: 'ipsum ad quis',
- tip: '220.55.203.4'
- }
- ],
- registerClusters: ['Excepteur sit laboris'],
- cpu: 'fugiat pariatur laborum ut',
- memory: 'Lorem adipisicing sunt',
- startTime: '1984-04-25 12:22:51',
- registerTime: '1976-06-06 19:58:58'
+Mock.mock('/mock/instance/search', 'get', () => {
+ let total = Mock.mock('@integer(8, 1000)')
+ let list = []
+ for (let i = 0; i < total; i++) {
+ list.push({
+ ip: '121.90.211.162',
+ name: 'shop-user',
+ deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
+ deployCluster: 'tx-shanghai-1',
+ registerStates: [
+ {
+ label: 'Registed',
+ value: 'Registed',
+ level: 'healthy'
+ }
+ ],
+ registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
+ cpu: '1.2c',
+ memory: '2349MB',
+ startTime: '2023-06-09 03:47:10',
+ registerTime: '2023-06-09 03:48:20',
+ labels: {
+ region: 'beijing',
+ version: 'v1'
}
- ]
+ })
+ }
+ return {
+ code: 200,
+ message: 'success',
+ data: Mock.mock({
+ total: total,
+ curPage: 1,
+ pageSize: 10,
+ data: list
+ })
+ }
+})
+
+Mock.mock('/mock/instance/detail', 'get', () => {
+ return {
+ code: 200,
+ message: 'success',
+ data: {
+ deployState: {
+ label: 'pariatur do nulla',
+ value: 'ut',
+ level: 'ullamco veniam laboris ex',
+ tip: '246.179.217.170'
+ },
+ registerStates: [
+ {
+ label: 'magna Duis non',
+ value: 'laboris',
+ level: 'et dolore pariatur ipsum adipisicing',
+ tip: '204.174.144.51'
+ }
+ ],
+ dubboPort: 35,
+ ip: '15.1.144.52',
+ appName: '式团划',
+ workload: 'in labore enim',
+ labels: [null],
+ createTime: '2000-11-12 05:59:48',
+ startTime: '1986-03-29 11:48:17',
+ registerTime: '2000-01-26 19:09:48',
+ registerCluster: 'qui commodo dolore',
+ deployCluster: 'dolore laborum',
+ node: 'aliquip',
+ image: 'http://dummyimage.com/400x400',
+ probes: {
+ startupProbe: {
+ type: 'pariatur in quis',
+ port: 92,
+ open: false
+ },
+ readinessProbe: {
+ type: 'aute',
+ port: 52,
+ open: false
+ },
+ livenessPronbe: {
+ type: 'reprehenderit aute nostrud',
+ port: 66,
+ open: false
+ }
+ }
+ }
+ }
+})
+
+Mock.mock('/mock/instance/metrics', 'get', () => {
+ return {
+ code: 200,
+ message: 'success',
+ data: 'http://8.147.104.101:3000/d/dcf5defe-d198-4704-9edf-6520838880e9/instance?orgId=1&refresh=1m&from=1710644821536&to=1710731221536&theme=light'
}
})
diff --git a/ui-vue3/src/api/service/instance.ts b/ui-vue3/src/api/service/instance.ts
index c07ef80..e133c4a 100644
--- a/ui-vue3/src/api/service/instance.ts
+++ b/ui-vue3/src/api/service/instance.ts
@@ -24,3 +24,19 @@
params
})
}
+
+export const getInstanceDetail = (params: any): Promise<any> => {
+ return request({
+ url: '/instance/detail',
+ method: 'get',
+ params
+ })
+}
+
+export const getInstanceMetricsInfo = (params: any): Promise<any> => {
+ return request({
+ url: '/instance/metrics',
+ method: 'get',
+ params
+ })
+}
diff --git a/ui-vue3/src/base/i18n/en.ts b/ui-vue3/src/base/i18n/en.ts
index 03deca7..dab06b5 100644
--- a/ui-vue3/src/base/i18n/en.ts
+++ b/ui-vue3/src/base/i18n/en.ts
@@ -18,7 +18,68 @@
import type { I18nType } from './type.ts'
const words: I18nType = {
+ destinationRuleDomain: {
+ YAMLView: 'YAML view',
+ formView: 'Form view'
+ },
+ virtualServiceDomain: {
+ YAMLView: 'YAML view',
+ formView: 'Form view'
+ },
+ dynamicConfigDomain: {
+ YAMLView: 'YAML view',
+ formView: 'Form view'
+ },
+ routingRuleDomain: {
+ YAMLView: 'YAML view',
+ formView: 'Form view'
+ },
+ tagRuleDomain: {
+ YAMLView: 'YAML view',
+ formView: 'Form view'
+ },
+ flowControlDomain: {
+ actuatingRange: 'Actuating range',
+ notSet: 'Not set',
+ versionRecords: 'Version records',
+ YAMLView: 'YAML View',
+ addConfiguration: 'Add configuration',
+ addConfigurationItem: 'Add configurationItem',
+ addFilter: 'Add filter',
+ configurationItem: 'Configuration item',
+ scopeScreening: 'Scope screening',
+ endOfAction: 'End of action',
+ addLabel: 'Add label',
+ actions: 'Actions',
+ filterType: 'Filter type',
+ labelName: 'Label name',
+ formView: 'Form view',
+ addMatch: 'Add match',
+ addRouter: 'Add router',
+ addressSubsetMatching: 'Address subset matching',
+ value: 'Value',
+ relation: 'Relation',
+ parameter: 'Parameter',
+ matchingDimension: 'Matching dimension',
+ requestParameterMatching: 'Request parameter matching',
+ ruleName: 'Rule name',
+ actionObject: 'Action object',
+ faultTolerantProtection: 'Fault-tolerant protection',
+ runTimeEffective: 'Run time effective',
+ ruleGranularity: 'Rule granularity',
+ timeOfTakingEffect: 'Time of taking effect',
+ enabledStatus: 'Enabled status',
+ priority: 'Priority',
+ off: 'off',
+ on: 'on',
+ opened: 'Opened',
+ closed: 'Closed',
+ enabled: 'Enabled',
+ disabled: 'Disabled'
+ },
instanceDomain: {
+ flowDisabled: 'Flow disabled',
+ operatorLog: 'Operator log',
enableAppInstanceLogs: 'Enable access logs for all instances of this application',
appServiceRetries: 'Adjust the number of retries for the service provided by this application',
appServiceLoadBalance:
diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
index 8428a8c..f90352b 100644
--- a/ui-vue3/src/base/i18n/zh.ts
+++ b/ui-vue3/src/base/i18n/zh.ts
@@ -18,7 +18,68 @@
import type { I18nType } from './type.ts'
const words: I18nType = {
+ destinationRuleDomain: {
+ YAMLView: 'YAML视图',
+ formView: '表单视图'
+ },
+ virtualServiceDomain: {
+ YAMLView: 'YAML视图',
+ formView: '表单视图'
+ },
+ dynamicConfigDomain: {
+ YAMLView: 'YAML视图',
+ formView: '表单视图'
+ },
+ routingRuleDomain: {
+ YAMLView: 'YAML视图',
+ formView: '表单视图'
+ },
+ tagRuleDomain: {
+ YAMLView: 'YAML视图',
+ formView: '表单视图'
+ },
+ flowControlDomain: {
+ notSet: '未设置',
+ versionRecords: '版本记录',
+ YAMLView: 'YAML视图',
+ addConfiguration: '增加配置',
+ addConfigurationItem: '增加配置项',
+ addFilter: '增加筛选',
+ configurationItem: '配置项',
+ actuatingRange: '作用范围',
+ scopeScreening: '作用范围筛选',
+ endOfAction: '作用端',
+ actions: '操作',
+ filterType: '筛选类型',
+ labelName: '标签名',
+ formView: '表单视图',
+ addMatch: '增加匹配',
+ addRouter: '增加路由',
+ addLabel: '增加标签',
+ addressSubsetMatching: '地址子集匹配',
+ value: '值',
+ relation: '关系',
+ requestParameterMatching: '请求参数匹配',
+ matchingDimension: '匹配维度',
+ parameter: '参数',
+ ruleName: '规则名',
+ actionObject: '作用对象',
+ faultTolerantProtection: '容错保护',
+ runTimeEffective: '运行时生效',
+ ruleGranularity: '规则粒度',
+ timeOfTakingEffect: '生效时间',
+ enabledStatus: '启用状态',
+ priority: '优先级',
+ off: '关',
+ on: '开',
+ opened: '开启',
+ closed: '关闭',
+ enabled: '启用',
+ disabled: '禁用'
+ },
instanceDomain: {
+ flowDisabled: '流量禁用',
+ operatorLog: '执行日志',
CPU: 'CPU',
enableAppInstanceLogs: '开启该应用所有实例的访问日志',
appServiceLoadBalance: '调整应用提供服务的负载均衡策略',
@@ -35,7 +96,7 @@
loadBalance: '负载均衡',
monitor: '监控',
linkTracking: '链路追踪',
- configuration: '配置',
+ configuration: '场景配置',
event: '事件',
healthExamination_k8s: '健康检查(k8s)',
instanceLabel: '实例标签',
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index d67c200..e1e5028 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -281,19 +281,107 @@
{
path: '/routingRule',
name: 'routingRule',
- component: () => import('../views/traffic/routingRule/index.vue')
+ redirect: 'index',
+ component: LayoutTab,
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/index',
+ name: 'routingRuleIndex',
+ component: () => import('../views/traffic/routingRule/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/formview/:ruleName',
+ name: 'routingRuleDomain.formView',
+ component: () => import('../views/traffic/routingRule/tabs/formView.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/yamlview/:ruleName',
+ name: 'routingRuleDomain.YAMLView',
+ component: () => import('../views/traffic/routingRule/tabs/YAMLView.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
},
{
path: '/tagRule',
name: 'tagRule',
- component: () => import('../views/traffic/tagRule/index.vue'),
- meta: {}
+ redirect: 'index',
+ component: LayoutTab,
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/index',
+ name: 'tagRuleIndex',
+ component: () => import('../views/traffic/tagRule/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/formview/:ruleName',
+ name: 'tagRuleDomain.formView',
+ component: () => import('../views/traffic/tagRule/tabs/formView.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/yamlview/:ruleName',
+ name: 'tagRuleDomain.YAMLView',
+ component: () => import('../views/traffic/tagRule/tabs/YAMLView.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
},
{
path: '/dynamicConfig',
name: 'dynamicConfig',
- component: () => import('../views/traffic/dynamicConfig/index.vue'),
- meta: {}
+ redirect: 'index',
+ component: LayoutTab,
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/index',
+ name: 'dynamicConfigIndex',
+ component: () => import('../views/traffic/dynamicConfig/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/formview/:ruleName',
+ name: 'dynamicConfigDomain.formView',
+ component: () => import('../views/traffic/dynamicConfig/tabs/formView.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/yamlview/:ruleName',
+ name: 'dynamicConfigDomain.YAMLView',
+ component: () => import('../views/traffic/dynamicConfig/tabs/YAMLView.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
},
{
path: '/meshRule',
@@ -302,12 +390,72 @@
{
path: '/virtualService',
name: 'virtualService',
- component: () => import('../views/traffic/virtualService/index.vue')
+ redirect: 'index',
+ component: LayoutTab,
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/index',
+ name: 'virtualServiceIndex',
+ component: () => import('../views/traffic/virtualService/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/formview/:ruleName',
+ name: 'virtualServiceDomain.formView',
+ component: () => import('../views/traffic/virtualService/tabs/formView.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/yamlview/:ruleName',
+ name: 'virtualServiceDomain.YAMLView',
+ component: () => import('../views/traffic/virtualService/tabs/YAMLView.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
},
{
path: '/destinationRule',
name: 'destinationRule',
- component: () => import('../views/traffic/destinationRule/index.vue')
+ redirect: 'index',
+ component: LayoutTab,
+ meta: {
+ tab_parent: true
+ },
+ children: [
+ {
+ path: '/index',
+ name: 'destinationRuleIndex',
+ component: () => import('../views/traffic/destinationRule/index.vue'),
+ meta: {
+ hidden: true
+ }
+ },
+ {
+ path: '/formview/:ruleName',
+ name: 'destinationRuleDomain.formView',
+ component: () => import('../views/traffic/destinationRule/tabs/formView.vue'),
+ meta: {
+ tab: true
+ }
+ },
+ {
+ path: '/yamlview/:ruleName',
+ name: 'destinationRuleDomain.YAMLView',
+ component: () => import('../views/traffic/destinationRule/tabs/YAMLView.vue'),
+ meta: {
+ tab: true
+ }
+ }
+ ]
}
]
}
diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
index cf6e201..b4fdac8 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -23,31 +23,40 @@
</template>
<template v-if="column.dataIndex === 'deployCluster'">
- <a-tag color="success">
+ <a-tag color="grey">
{{ text }}
</a-tag>
</template>
+ <template v-if="column.dataIndex === 'deployState'">
+ <a-tag :color="INSTANCE_DEPLOY_COLOR[text.toUpperCase()]">{{ text }}</a-tag>
+ </template>
+
<template v-if="column.dataIndex === 'registerStates'">
- <a-typography-text type="success" v-for="t in text">{{ t.label }}</a-typography-text>
+ <a-tag :color="INSTANCE_REGISTER_COLOR[t.level.toUpperCase()]" v-for="t in text">
+ {{ t.label }}
+ </a-tag>
</template>
<template v-if="column.dataIndex === 'registerClusters'">
- <a-tag v-for="t in text" color="warning">
+ <a-tag v-for="t in text" color="grey">
{{ t }}
</a-tag>
</template>
<template v-if="column.dataIndex === 'labels'">
- <a-tag v-for="t in text" color="warning">
+ <a-tag v-for="t in text" color="grey">
{{ t }}
</a-tag>
</template>
- <template v-if="column.dataIndex === 'name'">
- <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
- </template>
+
<template v-if="column.dataIndex === 'ip'">
- <router-link :to="`detail/${record[column.key]}`">{{ text }}</router-link>
+ <span class="app-link" @click="router.replace(`detail/${record[column.key]}`)">
+ <b>
+ <Icon style="margin-bottom: -2px" icon="material-symbols:attach-file-rounded"></Icon>
+ {{ text }}
+ </b>
+ </span>
</template>
</template>
</search-table>
@@ -60,14 +69,19 @@
import SearchTable from '@/components/SearchTable.vue'
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import { INSTANCE_DEPLOY_COLOR, INSTANCE_REGISTER_COLOR } from '@/base/constants'
+import router from '@/router'
+import { Icon } from '@iconify/vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+let __null = PRIMARY_COLOR
let columns = [
{
title: 'instanceDomain.instanceIP',
key: 'ip',
dataIndex: 'ip',
sorter: (a: any, b: any) => sortString(a.ip, b.ip),
- width: 140
+ width: 200
},
{
title: 'instanceDomain.instanceName',
@@ -169,5 +183,15 @@
<style lang="less" scoped>
.search-table-container {
min-height: 60vh;
+
+ .app-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/resources/instances/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
index 26e4c98..b590e61 100644
--- a/ui-vue3/src/views/resources/instances/tabs/configuration.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/configuration.vue
@@ -16,105 +16,71 @@
-->
<template>
- <a-descriptions title="" layout="vertical" :column="2">
- <!-- execution log -->
- <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
- <template v-slot:label>
- {{ $t('instanceDomain.executionLog') }}
- <a-tooltip placement="topLeft">
- <template #title>
- {{ $t('instanceDomain.enableAppInstanceLogs') }}(provider.accesslog)
- </template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
+ <div class="__container_app_config">
+ <config-page :options="options">
+ <template v-slot:form_log="{ current }">
+ <a-form-item :label="$t('instanceDomain.operatorLog')" name="logFlag">
+ <a-switch v-model:checked="current.form.logFlag"></a-switch>
+ </a-form-item>
</template>
- <span :class="{ active: !state }" :style="{ color: 'black' }">
- {{ $t('instanceDomain.close') }}
- </span>
- <a-switch v-model:checked="state" :loading="loading" />
- <span :class="{ active: state }" :style="{ color: state ? PRIMARY_COLOR : 'black' }">
- {{ $t('instanceDomain.enable') }}
- </span>
- </a-descriptions-item>
-
- <!-- retry count -->
- <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
- <template v-slot:label>
- {{ $t('instanceDomain.retryCount') }}
- <a-tooltip placement="topLeft">
- <template #title>{{ $t('instanceDomain.appServiceRetries') }}</template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
+ <template v-slot:form_flowDisabled="{ current }">
+ <a-form-item :label="$t('instanceDomain.flowDisabled')" name="flowDisabledFlag">
+ <a-switch v-model:checked="current.form.flowDisabledFlag"></a-switch>
+ </a-form-item>
</template>
- <a-typography-paragraph editable v-model:content="retryCount"> </a-typography-paragraph>
- </a-descriptions-item>
-
- <!-- Load Balance -->
- <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
- <template v-slot:label>
- {{ $t('instanceDomain.loadBalance') }}
- <a-tooltip placement="topLeft">
- <template #title
- >{{ $t('instanceDomain.appServiceLoadBalance') }}(provider.loadbalance)</template
- >
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </template>
- <a-typography-paragraph editable v-model:content="loadBalance"> </a-typography-paragraph>
- </a-descriptions-item>
-
- <!-- timeout -->
- <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
- <template v-slot:label>
- {{ $t('instanceDomain.timeout_ms') }}
- <a-tooltip placement="topLeft">
- <template #title>
- {{ $t('instanceDomain.appServiceTimeout') }}(provider.timeout)
- </template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </template>
-
- <a-typography-paragraph editable v-model:content="timeout"> </a-typography-paragraph>
- </a-descriptions-item>
-
- <!-- Cluster approach -->
- <a-descriptions-item :labelStyle="{ fontWeight: 'bold' }">
- <template v-slot:label>
- {{ $t('instanceDomain.clusterApproach') }}
- <a-tooltip placement="topLeft">
- <template #title>{{ $t('instanceDomain.appServiceNegativeClusteringMethod') }}</template>
- <Icon icon="bitcoin-icons:info-circle-outline" class="iconStyle" />
- </a-tooltip>
- </template>
-
- <a-typography-paragraph editable v-model:content="clusterApproach"> </a-typography-paragraph>
- </a-descriptions-item>
- </a-descriptions>
+ </config-page>
+ </div>
</template>
<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { Icon } from '@iconify/vue'
-import { PRIMARY_COLOR } from '@/base/constants'
-
-// 执行日志开关
-const state = ref('')
-const loading = ref(false)
-const loadBalance = ref('random')
-const clusterApproach = ref('failover')
-const retryCount = ref('2次')
-const timeout = ref('1000 ms')
+import { onMounted, reactive, ref } from 'vue'
+import ConfigPage from '@/components/ConfigPage.vue'
+let options: any = reactive({
+ list: [
+ {
+ title: 'instanceDomain.operatorLog',
+ key: 'log',
+ form: {
+ logFlag: false
+ },
+ submit: (form: {}) => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(1)
+ }, 1000)
+ })
+ },
+ reset(form: any) {
+ form.logFlag = false
+ }
+ },
+ {
+ title: 'instanceDomain.flowDisabled',
+ form: {
+ flowDisabledFlag: false
+ },
+ key: 'flowDisabled',
+ submit: (form: {}) => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(1)
+ }, 1000)
+ })
+ },
+ reset(form: any) {
+ form.logFlag = false
+ }
+ }
+ ],
+ current: [0]
+})
+onMounted(() => {
+ console.log(333)
+})
</script>
<style lang="less" scoped>
-.active {
- font-size: 13px;
- font-weight: bold;
-}
-
-.iconStyle {
- font-size: 17px;
+.__container_app_config {
}
</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/details.vue b/ui-vue3/src/views/resources/instances/tabs/details.vue
index dbac10f..179ad36 100644
--- a/ui-vue3/src/views/resources/instances/tabs/details.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/details.vue
@@ -18,161 +18,237 @@
<template>
<div class="__container_app_detail">
<a-flex>
- <a-descriptions title="" layout="vertical" :column="2">
- <!-- instanceName -->
- <a-descriptions-item
- :label="$t('instanceDomain.instanceName')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph copyable>
- {{ instanceName }}
- </a-typography-paragraph>
- </a-descriptions-item>
+ <a-card-grid>
+ <a-row :gutter="10">
+ <a-col :span="12">
+ <a-card class="_detail">
+ <a-descriptions class="description-column" :column="1">
+ <!-- instanceName -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceName')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p @click="copyIt(instanceName)" class="description-item-content with-card">
+ {{ instanceName }}
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- Creation time -->
- <a-descriptions-item
- :label="$t('instanceDomain.creationTime_k8s')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Creation time -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.creationTime_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- deployState -->
- <a-descriptions-item
- :label="$t('instanceDomain.deployState')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph type="success"> Running </a-typography-paragraph>
- <a-typography-paragraph type="danger"> Stop </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- deployState -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.deployState')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph type="success"> Running</a-typography-paragraph>
+ <a-typography-paragraph type="danger"> Stop</a-typography-paragraph>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-card>
+ </a-col>
- <!-- Start time -->
- <a-descriptions-item
- :label="$t('instanceDomain.startTime_k8s')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
- </a-descriptions-item>
+ <a-col :span="12">
+ <a-card class="_detail">
+ <a-descriptions class="description-column" :column="1">
+ <!-- Start time -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.startTime_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- registerStates -->
- <a-descriptions-item
- :label="$t('instanceDomain.registerStates')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph type="success"> Registed </a-typography-paragraph>
- <a-typography-paragraph type="danger"> UnRegisted </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- registerStates -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerStates')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph type="success"> Registed</a-typography-paragraph>
+ <a-typography-paragraph type="danger"> UnRegisted</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- Register Time -->
- <a-descriptions-item
- :label="$t('instanceDomain.registerTime')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> 20230/12/19 22:09:34 </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Register Time -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerTime')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> 20230/12/19 22:09:34</a-typography-paragraph>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-card>
+ </a-col>
+ </a-row>
- <!-- instanceIP -->
- <a-descriptions-item
- :label="$t('instanceDomain.instanceIP')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph copyable> 192.168.0.1 </a-typography-paragraph>
- </a-descriptions-item>
+ <a-card style="margin-top: 10px" class="_detail">
+ <a-descriptions class="description-column" :column="1">
+ <!-- instanceIP -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceIP')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p @click="copyIt('192.168.0.1')" class="description-item-content with-card">
+ 192.168.0.1
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- deploy cluster -->
- <a-descriptions-item
- :label="$t('instanceDomain.deployCluster')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- deploy cluster -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.deployCluster')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> sz-ali-zk-f8otyo4r</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- Dubbo Port -->
- <a-descriptions-item
- :label="$t('instanceDomain.dubboPort')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph copyable> 2088 </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Dubbo Port -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.dubboPort')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p @click="copyIt('2088')" class="description-item-content with-card">
+ 2088
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- Register cluster -->
- <a-descriptions-item
- :label="$t('instanceDomain.registerCluster')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> sz-ali-zk-f8otyo4r </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Register cluster -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.registerCluster')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> sz-ali-zk-f8otyo4r</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- whichApplication -->
- <a-descriptions-item
- :label="$t('instanceDomain.whichApplication')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-link @click="checkApplication()"> shop-b </a-typography-link>
- </a-descriptions-item>
+ <!-- whichApplication -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.whichApplication')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-link @click="checkApplication()"> shop-b</a-typography-link>
+ </a-descriptions-item>
- <!-- Node IP -->
- <a-descriptions-item
- :label="$t('instanceDomain.node')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph copyable> 30.33.0.1 </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Node IP -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.node')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <p @click="copyIt('30.33.0.1')" class="description-item-content with-card">
+ 30.33.0.1
+ <CopyOutlined />
+ </p>
+ </a-descriptions-item>
- <!-- Owning workload(k8s) -->
- <a-descriptions-item
- :label="$t('instanceDomain.owningWorkload_k8s')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph> shop-user-base </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- Owning workload(k8s) -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.owningWorkload_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-typography-paragraph> shop-user-base</a-typography-paragraph>
+ </a-descriptions-item>
- <!-- image -->
- <a-descriptions-item
- :label="$t('instanceDomain.instanceImage_k8s')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-typography-paragraph copyable>
- apache/org.apahce.dubbo.samples.shop-user:v1
- </a-typography-paragraph>
- </a-descriptions-item>
+ <!-- image -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceImage_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-card class="description-item-card">
+ <p
+ @click="copyIt(' apache/org.apahce.dubbo.samples.shop-user:v1')"
+ class="description-item-content with-card"
+ >
+ apache/org.apahce.dubbo.samples.shop-user:v1
+ <CopyOutlined />
+ </p>
+ </a-card>
+ </a-descriptions-item>
- <!-- instanceLabel -->
- <a-descriptions-item
- :label="$t('instanceDomain.instanceLabel')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-card class="description-item-card">
- <a-tag>app=shop-user</a-tag>
- <a-tag>version=v1</a-tag>
- <a-tag>region=shenzhen</a-tag>
- </a-card>
- </a-descriptions-item>
+ <!-- instanceLabel -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.instanceLabel')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-card class="description-item-card">
+ <a-tag>app=shop-user</a-tag>
+ <a-tag>version=v1</a-tag>
+ <a-tag>region=shenzhen</a-tag>
+ </a-card>
+ </a-descriptions-item>
- <!-- health examination -->
- <a-descriptions-item
- :label="$t('instanceDomain.healthExamination_k8s')"
- :labelStyle="{ fontWeight: 'bold' }"
- >
- <a-card class="description-item-card">
- <p class="white_space">启动探针(StartupProbe):关闭</p>
- <p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
- <p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
- </a-card>
- </a-descriptions-item>
- </a-descriptions>
+ <!-- health examination -->
+ <a-descriptions-item
+ :label="$t('instanceDomain.healthExamination_k8s')"
+ :labelStyle="{ fontWeight: 'bold' }"
+ >
+ <a-card class="description-item-card">
+ <p class="white_space">启动探针(StartupProbe):关闭</p>
+ <p class="white_space">就绪探针(ReadinessProbe):开启 类型: Http 端口:22222</p>
+ <p class="white_space">存活探针(LivenessProbe):开启 类型: Http 端口:22222</p>
+ </a-card>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-card>
+ </a-card-grid>
</a-flex>
</div>
</template>
<script lang="ts" setup>
-import { ref } from 'vue'
+import { type ComponentInternalInstance, getCurrentInstance, ref } from 'vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
+import useClipboard from 'vue-clipboard3'
+import { message } from 'ant-design-vue'
+import { PRIMARY_COLOR, PRIMARY_COLOR_T } from '@/base/constants'
+
+const {
+ appContext: {
+ config: { globalProperties }
+ }
+} = <ComponentInternalInstance>getCurrentInstance()
+
+let __ = PRIMARY_COLOR
+let PRIMARY_COLOR_20 = PRIMARY_COLOR_T('20')
// instance name
const instanceName = ref('shop-user-base-7e33f1e')
// Click on the application name to view the application
const checkApplication = () => {}
+
+const toClipboard = useClipboard().toClipboard
+
+function copyIt(v: string) {
+ message.success(globalProperties.$t('messageDomain.success.copy'))
+ toClipboard(v)
+}
</script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.__container_app_detail {
+ ._detail {
+ box-shadow: 8px 8px 4px rgba(162, 162, 162, 0.19);
+ }
+ .description-item-content {
+ &.no-card {
+ padding-left: 20px;
+ }
+ &.with-card:hover {
+ color: v-bind('PRIMARY_COLOR');
+ }
+ }
+ .description-item-card {
+ :deep(.ant-card-body) {
+ padding: 10px;
+ }
+ width: 80%;
+ margin-left: 20px;
+ border: 1px dashed rgba(162, 162, 162, 0.19);
+ }
+}
+</style>
diff --git a/ui-vue3/src/views/resources/instances/tabs/monitor.vue b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
index bd1abc2..66cd44a 100644
--- a/ui-vue3/src/views/resources/instances/tabs/monitor.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/monitor.vue
@@ -16,11 +16,66 @@
-->
<template>
- <div>monitor todo</div>
+ <div class="__container_tabDemo3">
+ <div class="option">
+ <a-button class="btn" @click="refresh"> refresh </a-button>
+ <a-button class="btn" @click="newPageForGrafana"> grafana </a-button>
+ </div>
+ <a-spin class="spin" :spinning="!showIframe">
+ <div class="__container_iframe_container">
+ <iframe v-if="showIframe" id="grafanaIframe" :src="grafanaUrl" frameborder="0"></iframe>
+ </div>
+ </a-spin>
+ </div>
</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-</script>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getInstanceMetricsInfo } from '@/api/service/instance'
-<style lang="less" scoped></style>
+let grafanaUrl = ref('')
+let showIframe = ref(true)
+onMounted(async () => {
+ let res = await getInstanceMetricsInfo({})
+ grafanaUrl.value = res.data
+})
+
+function refresh() {
+ showIframe.value = false
+ setTimeout(() => {
+ showIframe.value = true
+ }, 200)
+}
+
+function newPageForGrafana() {
+ window.open(grafanaUrl.value, '_blank')
+}
+</script>
+<style lang="less" scoped>
+.__container_tabDemo3 {
+ .option {
+ padding-left: 16px;
+ .btn {
+ margin-right: 10px;
+ }
+ }
+ :deep(.spin) {
+ margin-top: 30px;
+ }
+ .__container_iframe_container {
+ z-index: 1;
+ position: relative;
+ width: calc(100vw - 332px);
+ height: calc(100vh - 200px);
+ clip-path: inset(20px 10px);
+
+ #grafanaIframe {
+ z-index: 0;
+ top: -112px;
+ position: absolute;
+ width: calc(100vw - 332px);
+ height: calc(100vh - 200px);
+ }
+ }
+}
+</style>
diff --git a/ui-vue3/src/views/traffic/destinationRule/index.vue b/ui-vue3/src/views/traffic/destinationRule/index.vue
index 05b92be..dc1fb10 100644
--- a/ui-vue3/src/views/traffic/destinationRule/index.vue
+++ b/ui-vue3/src/views/traffic/destinationRule/index.vue
@@ -20,9 +20,11 @@
<template #customOperation>
<a-button type="primary">新增 Destination Rule</a-button>
</template>
- <template #bodyCell="{ text, column }">
+ <template #bodyCell="{ text, column, record }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link">{{ text }}</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+ text
+ }}</a-button>
</template>
<template v-if="column.dataIndex === 'operation'">
<a-button type="link">查看</a-button>
@@ -47,6 +49,7 @@
import SearchTable from '@/components/SearchTable.vue'
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
let columns = [
{
diff --git a/ui-vue3/src/views/traffic/dynamicConfig/index.vue b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
index fbef790..31cfe98 100644
--- a/ui-vue3/src/views/traffic/dynamicConfig/index.vue
+++ b/ui-vue3/src/views/traffic/dynamicConfig/index.vue
@@ -21,9 +21,11 @@
<a-button type="primary">新增动态配置</a-button>
<a-button type="primary" style="margin-left: 10px">从模版创建</a-button>
</template>
- <template #bodyCell="{ text, column }">
+ <template #bodyCell="{ text, column, record }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link">{{ text }}</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+ text
+ }}</a-button>
</template>
<template v-if="column.dataIndex === 'ruleGranularity'">
{{ text ? '服务' : '应用' }}
@@ -54,6 +56,7 @@
import SearchTable from '@/components/SearchTable.vue'
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
let columns = [
{
diff --git a/ui-vue3/src/views/traffic/routingRule/index.vue b/ui-vue3/src/views/traffic/routingRule/index.vue
index 14e82ed..eff75f8 100644
--- a/ui-vue3/src/views/traffic/routingRule/index.vue
+++ b/ui-vue3/src/views/traffic/routingRule/index.vue
@@ -17,30 +17,18 @@
<template>
<div class="__container_resources_application_index">
<search-table :search-domain="searchDomain">
- <template #customOperation>
- <a-button type="primary">新增条件路由规则</a-button>
- </template>
- <template #bodyCell="{ text, column }">
+ <template #bodyCell="{ text, record, index, column }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link">{{ text }}</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record.ruleName}`)">{{
+ text
+ }}</a-button>
</template>
- <template v-if="column.dataIndex === 'ruleGranularity'">
- {{ text ? '服务' : '应用' }}
- </template>
+
<template v-if="column.dataIndex === 'enable'">
- {{ text ? '启用' : '禁用' }}
+ {{ text ? '是' : '否' }}
</template>
- <template v-if="column.dataIndex === 'operation'">
- <a-button type="link">查看</a-button>
- <a-button type="link">修改</a-button>
- <a-popconfirm
- title="确认删除该条件路由规则?"
- ok-text="Yes"
- cancel-text="No"
- @confirm="confirm"
- >
- <a-button type="link">删除</a-button>
- </a-popconfirm>
+ <template v-if="column.dataIndex === 'protection'">
+ {{ text ? '是' : '否' }}
</template>
</template>
</search-table>
@@ -53,7 +41,11 @@
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 { Icon } from '@iconify/vue'
+import { PRIMARY_COLOR } from '@/base/constants'
+let __null = PRIMARY_COLOR
let columns = [
{
title: 'ruleName',
@@ -66,29 +58,27 @@
title: 'ruleGranularity',
key: 'ruleGranularity',
dataIndex: 'ruleGranularity',
- render: (text, record) => (record.isService ? '服务' : '应用'),
width: 100,
sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
},
{
- title: 'createTime',
- key: 'createTime',
- dataIndex: 'createTime',
- width: 120,
- sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
- },
- {
title: 'enable',
key: 'enable',
dataIndex: 'enable',
render: (text, record) => (record.enable ? '是' : '否'),
- width: 120,
- sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+ width: 120
},
{
- title: 'operation',
- key: 'operation',
- dataIndex: 'operation',
+ title: 'effectiveTime',
+ key: 'effectiveTime',
+ dataIndex: 'effectiveTime',
+ width: 120
+ },
+ {
+ title: 'protection',
+ key: 'protection',
+ dataIndex: 'protection',
+ render: (text, record) => (record.protection ? '是' : '否'),
width: 200
}
]
@@ -113,13 +103,20 @@
searchDomain.onSearch()
})
-const confirm = () => {}
-
provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
</script>
<style lang="less" scoped>
.search-table-container {
min-height: 60vh;
//max-height: 70vh; //overflow: auto;
+ .app-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/tagRule/index.vue b/ui-vue3/src/views/traffic/tagRule/index.vue
index d72618b..c25bc59 100644
--- a/ui-vue3/src/views/traffic/tagRule/index.vue
+++ b/ui-vue3/src/views/traffic/tagRule/index.vue
@@ -20,9 +20,11 @@
<template #customOperation>
<a-button type="primary">新增标签路由规则</a-button>
</template>
- <template #bodyCell="{ text, column }">
+ <template #bodyCell="{ text, record, column }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link">{{ text }}</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+ text
+ }}</a-button>
</template>
<template v-if="column.dataIndex === 'enable'">
{{ text ? '启用' : '禁用' }}
@@ -50,6 +52,7 @@
import SearchTable from '@/components/SearchTable.vue'
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
let columns = [
{
diff --git a/ui-vue3/src/views/traffic/virtualService/index.vue b/ui-vue3/src/views/traffic/virtualService/index.vue
index 4e1f049..d75a4fc 100644
--- a/ui-vue3/src/views/traffic/virtualService/index.vue
+++ b/ui-vue3/src/views/traffic/virtualService/index.vue
@@ -20,9 +20,11 @@
<template #customOperation>
<a-button type="primary">新增路由规则</a-button>
</template>
- <template #bodyCell="{ text, column }">
+ <template #bodyCell="{ text, column, record }">
<template v-if="column.dataIndex === 'ruleName'">
- <a-button type="link">{{ text }}</a-button>
+ <a-button type="link" @click="router.replace(`formview/${record[column.key]}`)">{{
+ text
+ }}</a-button>
</template>
<template v-if="column.dataIndex === 'operation'">
<a-button type="link">查看</a-button>
@@ -47,6 +49,7 @@
import SearchTable from '@/components/SearchTable.vue'
import { SearchDomain, sortString } from '@/utils/SearchUtil'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
+import router from '@/router'
let columns = [
{