Tuberrr
/
JCC-RIP
forked from JointCloud/JCC-RIP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

19:00

This commit is contained in:
Bruce-Stark 2021-01-28 19:35:15 +08:00
parent 5aec12b752
commit 8ca1da93eb
11 changed files with 245 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/overview.js
View File

@ -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'
})
}

4
src/api/storageManagement.js
View File

@ -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'
})
}

20
src/api/workloadManagement.js
View File

@ -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'
})
}

6
src/components/ClusterManagement/componentStatus.vue
View File

@ -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 = '-'
}

14
src/components/ClusterManagement/nodeMessage.vue
View File

@ -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

2
src/components/ClusterManagement/nodeStatus.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="nodeInfo">
<el-card class="chartCard" style="height: 600px">
<el-card class="chartCard" style="height: 1000px">
<p>节点详细信息</p>
<el-table v-if="nodeStatus.length>0" :data="nodeStatus">
<el-table-column prop="name" label="名称" width="200" :formatter="(row,column)=>{return row.metadata.name+'\n'+row.status.addresses[0]['address']||''}" />

5
src/views/nodeManagement/index.vue
View File

@ -44,17 +44,16 @@ export default {
return new Promise((resolve, reject) => {
const data = []
const obj = {}
let masterNum, totalNum, nodeNum
let masterNum, totalNum
getTotalNum().then(response => {
totalNum = response['totalItems']
nodeNum = totalNum
getMasterNum().then(response => {
masterNum = response['totalItems']
obj.totalNumber = totalNum
obj.masterNumber = masterNum
obj.nodeNumber = nodeNum
if (totalNum === 1 || totalNum === masterNum) { obj.nodeNumber = 1 } else { obj.nodeNumber = totalNum - masterNum }
data[0] = obj
this.nodeBriefMessage = data
}).catch(error => {

56
src/views/podManagement/index.vue
View File

@ -6,15 +6,26 @@
</h4>
<span class="tips">容器组 (Pod) 是 Kubernetes 应用程序的基本执行单元，是您创建或部署的 Kubernetes 对象模型中最小和最简单的单元。</span>
</el-card>
<el-tabs type="border-card">
<el-table :data="pods">
<el-table-column prop="name" label="名称" width="400" />
<!-- <el-table-column prop="status" label="状态" width="200" />-->
<el-table-column prop="node" label="节点" width="400" />
<el-table-column prop="podIP" label="容器组IP" width="300" />
<el-table-column prop="updateTime" label="更新时间" width="300" />
</el-table>
</el-tabs>
<el-card>
<el-tabs type="border-card">
<el-table :data="pods">
<el-table-column prop="name" label="名称" width="400" />
<!-- <el-table-column prop="status" label="状态" width="200" />-->
<el-table-column prop="node" label="节点" width="400" />
<el-table-column prop="podIP" label="容器组IP" width="300" />
<el-table-column prop="updateTime" label="更新时间" width="300" />
</el-table>
</el-tabs>
</el-card>
<div class="pagination">
<el-pagination
background
:current-page="pagination.currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination.totalCount"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
@ -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)
})
})
}
}
}
</script>

55
src/views/serviceManagement/index.vue
View File

@ -6,15 +6,26 @@
</h4>
<span class="tips">服务 (Service) 是定义了一类容器组的逻辑集合和一个用于访问它们的策略。</span>
</el-card>
<el-tabs type="border-card">
<el-table :data="services">
<el-table-column prop="name" label="名称" width="350" />
<el-table-column prop="project" label="项目" width="350" />
<el-table-column prop="type" label="服务类型" width="250" />
<el-table-column prop="internetAccess" label="外网访问" width="250" />
<el-table-column prop="createTime" label="创建时间" width="300" />
</el-table>
</el-tabs>
<el-card>
<el-tabs type="border-card">
<el-table :data="services">
<el-table-column prop="name" label="名称" width="350" />
<el-table-column prop="project" label="项目" width="350" />
<el-table-column prop="type" label="服务类型" width="250" />
<el-table-column prop="internetAccess" label="外网访问" width="250" />
<el-table-column prop="createTime" label="创建时间" width="300" />
</el-table>
</el-tabs>
<div class="pagination">
<el-pagination
background
:current-page="pagination.currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination.totalCount"
@current-change="handleCurrentChange"
/>
</div>
</el-card>
</div>
</template>
@ -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)
})
})
}
}
}
</script>

90
src/views/storageManagement/index.vue
View File

@ -16,62 +16,90 @@
</el-card>
<el-card class="chartCard" style="height: 700px; padding:20px 0">
<el-table :data="volumes">
<el-table-column prop="name" label="名称" width="300" />
<el-table-column prop="name" label="名称" width="380" />
<el-table-column prop="status" label="状态" width="200" />
<el-table-column prop="mode" label="访问模式" width="250" />
<el-table-column prop="mode" label="访问模式" width="300" />
<el-table-column prop="mount" label="挂载" width="200" />
<el-table-column prop="createTime" label="创建时间" width="250" />
<el-table-column prop="createTime" label="创建时间" width="300" />
</el-table>
<div class="pagination">
<el-pagination
background
:current-page="pagination.currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination.totalCount"
@current-change="handleCurrentChange"
/>
</div>
</el-card>
</div>
</template>
<script>
import { getVolume } from '@/api/storageManagement'
import { getPods } from '@/api/workloadManagement'
export default {
name: 'StorageForm',
data() {
return {
activeName: '1',
volumes: [{}]
volumes: [{}],
pagination: { currentPage: 1, totalCount: 0 },
listQuery: { page: 1 }
}
},
created() {
return new Promise((resolve, reject) => {
const data = []
const obj = {}
getVolume().then(response => {
console.log(response)
const LENGTH = response['totalItems']
console.log(LENGTH)
for (let item = 0; item < LENGTH; item++) {
// 存储卷名称
obj.name = response['items'][item]['metadata']['name']
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 = []
getVolume().then(response => {
this.pagination.totalCount = response.totalItems
console.log(response)
for (let item = 0; item < response.items.length; item++) {
const obj = {}
// 存储卷名称
obj.name = response['items'][item]['metadata']['name']
// 存储卷状态
let volumeStatus
if (response['items'][item]['status']['phase'] === 'Bound') { volumeStatus = '准备就绪' }
if (response['items'][item]['status']['phase'] === 'Lost') { volumeStatus = '丢失' }
if (response['items'][item]['status']['phase'] === 'Pending') { volumeStatus = '等待中' }
obj.status = volumeStatus
// 存储卷状态
let volumeStatus
if (response['items'][item]['status']['phase'] === 'Bound') {
volumeStatus = '准备就绪'
}
if (response['items'][item]['status']['phase'] === 'Lost') {
volumeStatus = '丢失'
}
if (response['items'][item]['status']['phase'] === 'Pending') {
volumeStatus = '等待中'
}
obj.status = volumeStatus
// 存储卷访问模式
obj.mode = response['items'][item]['status']['accessModes']
// 存储卷访问模式
obj.mode = response['items'][item]['status']['accessModes']
// 存储卷挂载情况
obj.mount = '已挂载'
// 存储卷挂载情况
obj.mount = '已挂载'
// 存储卷创建时间
obj.createTime = response['items'][item]['metadata']['creationTimestamp']
// 存储卷创建时间
obj.createTime = response['items'][item]['metadata']['creationTimestamp']
data[item] = obj
data[item] = obj
}
this.volumes = data
}
}).catch(error => {
reject(error)
}).catch(error => {
console.log(error)
})
})
})
}
}
}
</script>

113
src/views/workloadsManagement/index.vue
View File

@ -14,6 +14,15 @@
<el-table-column prop="project" label="项目" width="400" />
<el-table-column prop="updateTime" label="更新时间" width="300" />
</el-table>
<div class="pagination">
<el-pagination
background
:current-page="pagination[0].currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination[0].totalCount"
@current-change="handleDeploymentsChange"
/>
</div>
</el-tab-pane>
<el-tab-pane label="有状态副本集">
<el-table :data="StatefulSets">
@ -22,6 +31,15 @@
<el-table-column prop="project" label="项目" width="400" />
<el-table-column prop="updateTime" label="更新时间" width="300" />
</el-table>
<div class="pagination">
<el-pagination
background
:current-page="pagination[1].currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination[1].totalCount"
@current-change="handleStatefulSetsChange"
/>
</div>
</el-tab-pane>
<el-tab-pane label="守护进程集">
<el-table :data="DaemonSets">
@ -30,6 +48,15 @@
<el-table-column prop="project" label="项目" width="400" />
<el-table-column prop="updateTime" label="更新时间" width="300" />
</el-table>
<div class="pagination">
<el-pagination
background
:current-page="pagination[2].currentPage"
layout="total, prev, pager, next, jumper"
:total="pagination[2].totalCount"
@current-change="handleDaemonSetsChange"
/>
</div>
</el-tab-pane>
</el-tabs>
</div>
@ -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 + ')'
}
}
}
}