From 04d797efe589b8948c26fa7430313bd3fd2198b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=B3=E8=B5=84=E8=9C=80=E9=81=93=E5=B1=B1?= <1493170339@qq.com> Date: Mon, 1 Apr 2024 01:58:14 +0800 Subject: [PATCH 1/8] 1.format code --- ui-vue3/src/api/mock/mockInstance.ts | 170 ++++---- ui-vue3/src/api/service/instance.ts | 16 + ui-vue3/src/base/i18n/en.ts | 61 +++ ui-vue3/src/base/i18n/zh.ts | 63 ++- ui-vue3/src/router/defaultRoutes.ts | 162 +++++++- .../src/views/resources/instances/index.vue | 42 +- .../instances/tabs/configuration.vue | 148 +++---- .../resources/instances/tabs/details.vue | 366 +++++++++++------- .../resources/instances/tabs/monitor.vue | 63 ++- .../views/traffic/destinationRule/index.vue | 7 +- .../src/views/traffic/dynamicConfig/index.vue | 7 +- .../src/views/traffic/routingRule/index.vue | 67 ++-- ui-vue3/src/views/traffic/tagRule/index.vue | 7 +- .../views/traffic/virtualService/index.vue | 7 +- 14 files changed, 808 insertions(+), 378 deletions(-) diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts index 7c723f34e..54b5e5f20 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'] +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' }, - { - ip: '117.23.142.162', - name: '之受力即此', - deployState: { - label: 'sint culpa elit quis id', - value: 'amet', - level: 'adipisicing do', - tip: '112.176.231.68' + 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 }, - 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' + readinessProbe: { + type: 'aute', + port: 52, + open: false }, - 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' + 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 c07ef80b5..e133c4a8d 100644 --- a/ui-vue3/src/api/service/instance.ts +++ b/ui-vue3/src/api/service/instance.ts @@ -24,3 +24,19 @@ export const searchInstances = (params: any): Promise => { params }) } + +export const getInstanceDetail = (params: any): Promise => { + return request({ + url: '/instance/detail', + method: 'get', + params + }) +} + +export const getInstanceMetricsInfo = (params: any): Promise => { + 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 03deca73e..dab06b5ce 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 8428a8c97..f90352b09 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 @@ const words: I18nType = { 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 d67c200bf..e1e502880 100644 --- a/ui-vue3/src/router/defaultRoutes.ts +++ b/ui-vue3/src/router/defaultRoutes.ts @@ -281,19 +281,107 @@ export const routes: Readonly = [ { 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 @@ export const routes: Readonly = [ { 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 cf6e2011a..b4fdac8cf 100644 --- a/ui-vue3/src/views/resources/instances/index.vue +++ b/ui-vue3/src/views/resources/instances/index.vue @@ -23,31 +23,40 @@ + + - + @@ -60,14 +69,19 @@ import { searchInstances } from '@/api/service/instance' 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 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain) diff --git a/ui-vue3/src/views/resources/instances/tabs/configuration.vue b/ui-vue3/src/views/resources/instances/tabs/configuration.vue index 26e4c9807..b590e6187 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 @@ -->