From 8ca1da93ebe11931e7be6d86913d36d17ef6d790 Mon Sep 17 00:00:00 2001 From: Bruce-Stark <1052882558@qq.com> Date: Thu, 28 Jan 2021 19:35:15 +0800 Subject: [PATCH] 19:00 --- src/api/overview.js | 2 +- src/api/storageManagement.js | 4 +- src/api/workloadManagement.js | 20 ++-- .../ClusterManagement/componentStatus.vue | 6 +- .../ClusterManagement/nodeMessage.vue | 14 ++- .../ClusterManagement/nodeStatus.vue | 2 +- src/views/nodeManagement/index.vue | 5 +- src/views/podManagement/index.vue | 56 ++++++--- src/views/serviceManagement/index.vue | 55 ++++++--- src/views/storageManagement/index.vue | 90 +++++++++----- src/views/workloadsManagement/index.vue | 113 +++++++++++++----- 11 files changed, 245 insertions(+), 122 deletions(-) diff --git a/src/api/overview.js b/src/api/overview.js index 826b675..976551f 100644 --- a/src/api/overview.js +++ b/src/api/overview.js @@ -23,7 +23,7 @@ export function getClusterResource() { export function getNodeBriefMessage() { return request({ - url: 'kapis/monitoring.kubesphere.io/v1alpha3/nodes?type=rank&metrics_filter=node_cpu_utilisation%7Cnode_cpu_usage%7Cnode_cpu_total%7Cnode_memory_utilisation%7Cnode_memory_usage_wo_cache%7Cnode_memory_total%7Cnode_disk_size_utilisation%7Cnode_disk_size_usage%7Cnode_disk_size_capacity%7Cnode_pod_utilisation%7Cnode_pod_running_count%7Cnode_pod_quota%7Cnode_disk_inode_utilisation%7Cnode_disk_inode_total%7Cnode_disk_inode_usage%7Cnode_load1%24&page=1&limit=10&sort_type=desc&sort_metric=node_cpu_utilisation', + url: 'kapis/monitoring.kubesphere.io/v1alpha3/nodes?type=rank&metrics_filter=node_cpu_utilisation%7Cnode_cpu_usage%7Cnode_cpu_total%7Cnode_memory_utilisation%7Cnode_memory_usage_wo_cache%7Cnode_memory_total%7Cnode_disk_size_utilisation%7Cnode_disk_size_usage%7Cnode_disk_size_capacity%7Cnode_pod_utilisation%7Cnode_pod_running_count%7Cnode_pod_quota%7Cnode_disk_inode_utilisation%7Cnode_disk_inode_total%7Cnode_disk_inode_usage%7Cnode_load1%24&page=1&limit=5&sort_type=desc&sort_metric=node_cpu_utilisation', method: 'get' }) } diff --git a/src/api/storageManagement.js b/src/api/storageManagement.js index bf236a1..5e409ab 100644 --- a/src/api/storageManagement.js +++ b/src/api/storageManagement.js @@ -1,8 +1,8 @@ import request from '@/utils/request' -export function getVolume() { +export function getVolume(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/persistentvolumeclaims?sortBy=createTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/persistentvolumeclaims?sortBy=createTime&limit=10&page=' + page, method: 'get' }) } diff --git a/src/api/workloadManagement.js b/src/api/workloadManagement.js index bfc4496..85c1bad 100644 --- a/src/api/workloadManagement.js +++ b/src/api/workloadManagement.js @@ -1,36 +1,36 @@ import request from '@/utils/request' -export function getDeployments() { +export function getDeployments(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/deployments?sortBy=updateTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/deployments?sortBy=updateTime&limit=10&page=' + page, method: 'get' }) } -export function getStatefulSets() { +export function getStatefulSets(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/statefulsets?sortBy=createTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/statefulsets?sortBy=createTime&limit=10&page=' + page, method: 'get' }) } -export function getDaemonSets() { +export function getDaemonSets(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/daemonsets?sortBy=createTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/daemonsets?sortBy=createTime&limit=10&page=' + page, method: 'get' }) } -export function getPods() { +export function getPods(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/pods?sortBy=startTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/pods?sortBy=startTime&limit=10&page=' + page, method: 'get' }) } -export function getServices() { +export function getServices(page) { return request({ - url: 'kapis/resources.kubesphere.io/v1alpha3/services?sortBy=createTime&limit=10', + url: 'kapis/resources.kubesphere.io/v1alpha3/services?sortBy=createTime&limit=10&page=' + page, method: 'get' }) } diff --git a/src/components/ClusterManagement/componentStatus.vue b/src/components/ClusterManagement/componentStatus.vue index 8589ea2..b27ffab 100644 --- a/src/components/ClusterManagement/componentStatus.vue +++ b/src/components/ClusterManagement/componentStatus.vue @@ -35,17 +35,17 @@ export default { getSchedulerState().then(response => { let schedulerSchedulingTimes, schedulingFailedPods, temp1, temp2 - console.log(response['results'][0]['data']) + // console.log(response['results'][0]['data']) if (response['results'][0]['data']['result'] != null) { for (let l = 0; l < response['results'][0]['data']['result'].length; l++) { - console.log(1) + // console.log(1) if (response['results'][0]['data']['result'][l]['metric']['result'] === 'scheduled') { schedulerSchedulingTimes = parseInt(response['results'][0]['data']['result'][l]['value'][1]) } if (response['results'][0]['data']['result'][l]['metric']['result'] === 'error') { temp1 = parseInt(response['results'][0]['data']['result'][l]['value'][1]) } if (response['results'][0]['data']['result'][l]['metric']['result'] === 'unschedulable') { temp2 = parseInt(response['results'][0]['data']['result'][l]['value'][1]) } } schedulingFailedPods = temp1 + temp2 } else { - console.log(0) + // console.log(0) schedulerSchedulingTimes = '-' schedulingFailedPods = '-' } diff --git a/src/components/ClusterManagement/nodeMessage.vue b/src/components/ClusterManagement/nodeMessage.vue index 8644e63..29d04ba 100644 --- a/src/components/ClusterManagement/nodeMessage.vue +++ b/src/components/ClusterManagement/nodeMessage.vue @@ -23,22 +23,24 @@ export default { const data = [] getNodeBriefMessage().then(response => { - const LENGTH = response['results'].length + const LENGTH = response.total_item + // console.log(response.items.length) console.log(LENGTH) let index = 0 + for (let item = 0; item < LENGTH; item++) { if (response['results'][item]['metric_name'] === 'node_cpu_utilisation') { index = item - break + continue } } - console.log('ITEM' + index) - console.log(response['results'][index]['data']['result'].length) + console.log('index : ' + index) + // console.log(response['results'][index]['data']['result'].length) let name, ip, role, cpu for (let l = 0; l < response['results'][index]['data']['result'].length; l++) { if (JSON.stringify(response['results'][index]['data']['result'][l]) === '{}') { continue } const obj = {} - console.log(response['results'][index]['data']['result'][l]) + // console.log(response['results'][index]['data']['result'][l]) name = response['results'][index]['data']['result'][l]['metric']['node'] ip = response['results'][index]['data']['result'][l]['metric']['host_ip'] role = response['results'][index]['data']['result'][l]['metric']['role'] @@ -46,7 +48,7 @@ export default { obj.node = name + ' (' + ip + ')' if (role === 'master') { obj.role = role } else { obj.role = 'node' } obj.cpu = cpu + '%' - console.log(l + ',' + obj) + // console.log(l + ',' + obj) data[l] = obj } this.nodeMessage = data diff --git a/src/components/ClusterManagement/nodeStatus.vue b/src/components/ClusterManagement/nodeStatus.vue index 1c2723e..7ebd430 100644 --- a/src/components/ClusterManagement/nodeStatus.vue +++ b/src/components/ClusterManagement/nodeStatus.vue @@ -1,6 +1,6 @@ @@ -25,16 +36,25 @@ export default { name: 'PodForm', data() { return { - pods: [{}] + pods: [{}], + pagination: { currentPage: 1, totalCount: 0 }, + listQuery: { page: 1 } } }, created() { - return new Promise((resolve, reject) => { - const data = [] - getPods().then(response => { - const LENGTH = response['totalItems'] - console.log(LENGTH) - for (let item = 0; item < 10; item++) { + this.getList() + }, + methods: { + handleCurrentChange(currentPage) { + this.pagination.currentPage = currentPage + this.listQuery.page = currentPage + this.getList() + }, + getList() { + getPods(this.listQuery.page.toString()).then(response => { + this.pagination.totalCount = response.totalItems + const data = [] + for (let item = 0; item < response.items.length; item++) { const obj = {} obj.name = response['items'][item]['metadata']['name'] obj.node = response['items'][item]['spec']['nodeName'] + ' (' + response['items'][item]['status']['hostIP'] + ')' @@ -44,9 +64,9 @@ export default { } this.pods = data }).catch(error => { - reject(error) + console.log(error) }) - }) + } } } diff --git a/src/views/serviceManagement/index.vue b/src/views/serviceManagement/index.vue index ac6e3d5..7eaa70e 100644 --- a/src/views/serviceManagement/index.vue +++ b/src/views/serviceManagement/index.vue @@ -6,15 +6,26 @@ 服务 (Service) 是定义了一类容器组的逻辑集合和一个用于访问它们的策略。 - - - - - - - - - + + + + + + + + + + + + @@ -25,17 +36,25 @@ export default { name: 'ServiceForm', data() { return { - services: [{}] + services: [{}], + pagination: { currentPage: 1, totalCount: 0 }, + listQuery: { page: 1 } } }, created() { - return new Promise((resolve, reject) => { + this.getList() + }, + methods: { + handleCurrentChange(currentPage) { + this.pagination.currentPage = currentPage + this.listQuery.page = currentPage + this.getList() + }, + getList() { const data = [] - getServices().then(response => { - console.log(response) - const LENGTH = response['totalItems'] - console.log(LENGTH) - for (let item = 0; item < 10; item++) { + getServices(this.listQuery.page.toString()).then(response => { + this.pagination.totalCount = response.totalItems + for (let item = 0; item < response.items.length; item++) { const obj = {} obj.name = response['items'][item]['metadata']['name'] obj.project = response['items'][item]['metadata']['namespace'] @@ -46,9 +65,9 @@ export default { } this.services = data }).catch(error => { - reject(error) + console.log(error) }) - }) + } } } diff --git a/src/views/storageManagement/index.vue b/src/views/storageManagement/index.vue index e36c216..fe78661 100644 --- a/src/views/storageManagement/index.vue +++ b/src/views/storageManagement/index.vue @@ -16,62 +16,90 @@ - + - + - + + diff --git a/src/views/workloadsManagement/index.vue b/src/views/workloadsManagement/index.vue index 5e1818e..62d752e 100644 --- a/src/views/workloadsManagement/index.vue +++ b/src/views/workloadsManagement/index.vue @@ -14,6 +14,15 @@ + @@ -22,6 +31,15 @@ + @@ -30,6 +48,15 @@ + @@ -45,34 +72,69 @@ export default { activeName: '0', Deployments: [{}], StatefulSets: [{}], - DaemonSets: [{}] + DaemonSets: [{}], + pagination: [ + { currentPage: 1, totalCount: 0 }, + { currentPage: 1, totalCount: 0 }, + { currentPage: 1, totalCount: 0 } + ], + listQuery: [ + { page: 1 }, + { page: 1 }, + { page: 1 } + ] } }, created() { - return new Promise((resolve, reject) => { + this.getDeploymentsList() + this.getStatefulSetsList() + this.getDaemonSetsList() + }, + methods: { + getStatus(readyReplicas, replicas) { + if (readyReplicas === replicas) { + return '运行中' + ' (' + readyReplicas + '/' + replicas + ')' + } else { + return '更新中' + ' (' + readyReplicas + '/' + replicas + ')' + } + }, + handleDeploymentsChange(currentPage) { + this.pagination[0].currentPage = currentPage + this.listQuery[0].page = currentPage + this.getDeploymentsList() + }, + handleStatefulSetsChange(currentPage) { + this.pagination[1].currentPage = currentPage + this.listQuery[1].page = currentPage + this.getStatefulSetsList() + }, + handleDaemonSetsChange(currentPage) { + this.pagination[2].currentPage = currentPage + this.listQuery[2].page = currentPage + this.getDaemonSetsList() + }, + getDeploymentsList() { const deployData = [] - const stateData = [] - const daemonData = [] - getDeployments().then(response => { - const LENGTH = response['totalItems'] - console.log(LENGTH) - for (let item = 0; item < 10; item++) { + getDeployments(this.listQuery[0].page.toString()).then(response => { + this.pagination[0].totalCount = response.totalItems + for (let item = 0; item < response.items.length; item++) { const obj = {} obj.name = response['items'][item]['metadata']['name'] obj.status = this.getStatus(response['items'][item]['status']['readyReplicas'], response['items'][item]['status']['replicas']) obj.project = response['items'][item]['metadata']['namespace'] obj.updateTime = response['items'][item]['metadata']['creationTimestamp'] - deployData[item] = obj } this.Deployments = deployData }).catch(error => { - reject(error) + console.log(error) }) - getStatefulSets().then(response => { - const LENGTH = response['totalItems'] - console.log(LENGTH) - for (let item = 0; item < LENGTH; item++) { + }, + getStatefulSetsList() { + const stateData = [] + getStatefulSets(this.listQuery[1].page.toString()).then(response => { + this.pagination[1].totalCount = response.totalItems + for (let item = 0; item < response.items.length; item++) { const obj = {} obj.name = response['items'][item]['metadata']['name'] obj.status = this.getStatus(response['items'][item]['status']['readyReplicas'], response['items'][item]['status']['replicas']) @@ -83,12 +145,14 @@ export default { } this.StatefulSets = stateData }).catch(error => { - reject(error) + console.log(error) }) - getDaemonSets().then(response => { - const LENGTH = response['totalItems'] - console.log(LENGTH) - for (let item = 0; item < LENGTH; item++) { + }, + getDaemonSetsList() { + const daemonData = [] + getDaemonSets(this.listQuery[2].page.toString()).then(response => { + this.pagination[2].totalCount = response.totalItems + for (let item = 0; item < response.items.length; item++) { const obj = {} obj.name = response['items'][item]['metadata']['name'] obj.status = this.getStatus(response['items'][item]['status']['numberReady'], response['items'][item]['status']['desiredNumberScheduled']) @@ -100,17 +164,8 @@ export default { } this.DaemonSets = daemonData }).catch(error => { - reject(error) + console.log(error) }) - }) - }, - methods: { - getStatus(readyReplicas, replicas) { - if (readyReplicas === replicas) { - return '运行中' + ' (' + readyReplicas + '/' + replicas + ')' - } else { - return '更新中' + ' (' + readyReplicas + '/' + replicas + ')' - } } } }