Skip to content

Commit

Permalink
Merge pull request apache#194 from Helltab/feature/ui/framework/vue3
Browse files Browse the repository at this point in the history 
fixes apache#193, complete some pages of application
  • Loading branch information
@chickenlj
chickenlj authored Feb 20, 2024
2 parents 0472a91 + 1f3800f commit 5ca79d6
Show file tree
Hide file tree
Showing 24 changed files with 1,935 additions and 1,040 deletions.
1 change: 1 addition & 0 deletions ui-vue3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"ts-node": "^10.9.2",
"tslib": "^2.6.2",
"vue": "^3.3.10",
"vue-clipboard3": "^2.0.0",
"vue-i18n": "^9.8.0",
"vue-router": "^4.2.5",
"vue3-colorpicker": "^2.2.3"
Expand Down
149 changes: 129 additions & 20 deletions ui-vue3/src/api/mock/mockApp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,135 @@
*/

import Mock from 'mockjs'
import devTool from "@/utils/DevToolUtil";

Mock.mock('/mock/application/search', 'get', () => {
let total = Mock.mock('@integer(8, 1000)')
let list = []
for (let i = 0; i < total; i++) {
list.push({
appName: 'app_' + Mock.mock('@string(2,10)'),
instanceNum: Mock.mock('@integer(80, 200)'),
deployCluster: 'cluster_' + Mock.mock('@string(5)'),
'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
})
}
return {
code: 200,
message: 'success',
data: Mock.mock({
total: total,
curPage: 1,
pageSize: 10,
data: list
})
}
let total = Mock.mock('@integer(8, 1000)')
let list = []
for (let i = 0; i < total; i++) {
list.push({
appName: 'app_' + Mock.mock('@string(2,10)'),
instanceNum: Mock.mock('@integer(80, 200)'),
deployCluster: 'cluster_' + Mock.mock('@string(5)'),
'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
})
}
return {
code: 200,
message: 'success',
data: Mock.mock({
total: total,
curPage: 1,
pageSize: 10,
data: list
})
}
})
Mock.mock('/mock/application/instance/statistics', 'get', () => {
return {
"code": 1000,
"message": "success",
"data": {
"instanceTotal": 43,
"versionTotal": 4,
"cpuTotal": "56c",
"memoryTotal": "108.2GB"
}
}
})

Mock.mock(devTool.mockUrl('/mock/application/instance/info'), '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/application/detail', 'get', () => {
return {
"code": 200,
"message": "success",
"data": {
"appName": [
"shop-user"
],
"rpcProtocols": [
"dubbo 2.0.2"
],
"dubboVersions": [
"Dubbo 3.2.10",
"Dubbo 2.7.4.1"
],
"dubboPorts": [
"20880"
],
"serialProtocols": [
"fastjson2"
],
"appTypes": [
"无状态"
],
"images": [
"harbor.apche.org/dubbo-samples-shop-user:v1.0",
"harbor.apche.org/dubbo-samples-shop-user:v1.1",
"harbor.apche.org/dubbo-samples-shop-user:v1.2",
],
"workloads": [
"dubbo-samples-shop-user-base",
"dubbo-samples-shop-user-gray",
"dubbo-samples-shop-user-gray",
"dubbo-samples-shop-user-gray",
],
"deployCluster": [
"ali-shanghai-1",
"tx-shanghai-2"
],
"registerCluster": [
"nacos-cluster-1",
"nacos-cluster-2"
],
"registerMode": [
"应用级",
"接口级"
]
}
}
})
5 changes: 3 additions & 2 deletions ui-vue3/src/api/mock/mockService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,15 @@
*/

import Mock from 'mockjs'
import devTool from "@/utils/DevToolUtil";

Mock.mock('/mock/service/search', 'get', {
Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
code: 200,
message: 'success',
data: {
total: 8,
curPage: 1,
pageSize: 1,
pageSize: 5,
data: [
{
serviceName: 'org.apache.dubbo.samples.UserService',
Expand Down
26 changes: 26 additions & 0 deletions ui-vue3/src/api/service/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,29 @@ export const searchApplications = (params: any): Promise<any> => {
params
})
}


export const getApplicationDetail = (params: any): Promise<any> => {
return request({
url: '/application/detail',
method: 'get',
params
})
}

export const getApplicationInstanceStatistics = (params: any): Promise<any> => {
return request({
url: '/application/instance/statistics',
method: 'get',
params
})
}
export const getApplicationInstanceInfo = (params: any): Promise<any> => {
return request({
url: '/application/instance/info',
method: 'get',
params
})
}


16 changes: 16 additions & 0 deletions ui-vue3/src/base/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,19 @@ export const LOCAL_STORAGE_THEME = 'LOCAL_STORAGE_THEME'
let item = localStorage.getItem(LOCAL_STORAGE_THEME)

export const PRIMARY_COLOR = ref(item || PRIMARY_COLOR_DEFAULT)



export const INSTANCE_REGISTER_COLOR:{ [key: string]: string } = {
HEALTHY: 'green'
}

/**
* 'Running','Pending', 'Terminating', 'Crashing'
*/
export const INSTANCE_DEPLOY_COLOR:{ [key: string]: string } = {
RUNNING: 'green',
PENDING: 'yellow',
TERMINATING: 'red',
CRASHING: 'darkRed',
}
39 changes: 37 additions & 2 deletions ui-vue3/src/base/i18n/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,13 +268,48 @@ const words: I18nType = {
applications: 'Applications',
instances: 'Instances',
applicationDomain: {
name: 'Application Name',
detail: 'Application Detail'

detail: 'Detail',
instance: 'Instance',
service: 'Service',
monitor: 'Monitor',
tracing: 'Tracing',
config: 'Config',
event: 'Event',
appName: 'Application Name',
rpcProtocols: 'Rpc Protocols',
dubboVersions: 'Dubbo Versions',
dubboPorts: 'Dubbo Ports',
serialProtocols: 'Serial Protocols',
appTypes: 'Application Types',
images: 'Images',
workloads: 'Workloads',
deployCluster: 'Deploy Cluster',
registerCluster: 'Register Cluster',
registerMode: 'Register Mode',
},
instanceDomain:{
ip: 'Ip',
name: 'Name',
deployState: 'Deploy State',
deployCluster: 'Deploy Cluster',
registerStates: 'Register States',
registerClusters: 'Register Clusters',
cpu: 'Cpu',
memory: 'Memory',
startTime: 'Start Time',
registerTime: 'Register Time',
labels: 'Labels',
},
searchDomain: {
total: 'Total',
unit: 'items'
},
messageDomain: {
success: {
copy: "You have successfully copied a piece of information"
}
},
backHome: 'Back Home',
noPageTip: 'Sorry, the page you visited does not exist.',
globalSearchTip: 'Search ip, application, instance, service',
Expand Down
37 changes: 36 additions & 1 deletion ui-vue3/src/base/i18n/zh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,12 +267,47 @@ const words: I18nType = {
instances: '实例',
applicationDomain: {
name: '应用名',
detail: '应用详情'
detail: '详情',
instance: '实例',
service: '服务',
monitor: '监控',
tracing: '链路追踪',
config: '配置',
event: '事件',
appName: '应用名',
rpcProtocols: 'RPC 协议',
dubboVersions: 'Dubbo 版本',
dubboPorts: 'Dubbo 端口',
serialProtocols: '序列化协议',
appTypes: '应用类型',
images: '应用镜像',
workloads: '工作负载',
deployCluster: '部署集群',
registerCluster: '注册集群',
registerMode: '注册模式',
},
instanceDomain:{
ip: 'IP',
name: '实例名称',
deployState: '部署状态',
deployCluster: '部署集群',
registerStates: '注册状态',
registerClusters: '注册集群',
cpu: 'CPU',
memory: '内存',
startTime: '启动时间',
registerTime: '注册时间',
labels: '标签',
},
searchDomain: {
total: '共计',
unit: '条'
},
messageDomain: {
success: {
copy: "您已经成功复制一条信息"
}
},
backHome: '回到首页',
noPageTip: '抱歉，你访问的页面不存在',
globalSearchTip: '搜索ip，应用，实例，服务',
Expand Down
Loading

0 comments on commit 5ca79d6

Please sign in to comment.