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

v1.0

This commit is contained in:
Bruce-Stark 2021-01-25 04:33:16 +08:00
parent 42b7049764
commit b9397e4ead
9 changed files with 215 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/nodeManagement.js Normal file
View File

@ -0,0 +1,22 @@
import request from '@/utils/request'
export function getNodeBriefMessage() {
return request({
url: 'kapis/monitoring.kubesphere.io/v1alpha3/components/apiserver?metrics_filter=apiserver_request_rate%7Capiserver_request_latencies',
method: 'get'
})
}
export function getNodeStatus() {
return request({
url: 'kapis/monitoring.kubesphere.io/v1alpha3/components/scheduler?metrics_filter=scheduler_schedule_attempts',
method: 'get'
})
}
export function getNodeMessage() {
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=5&sort_type=desc&sort_metric=node_cpu_utilisation',
method: 'get'
})
}

29
src/api/projectManagement.js Normal file
View File

@ -0,0 +1,29 @@
import request from '@/utils/request'
export function getBriefUserProject() {
return request({
url: 'kapis/resources.kubesphere.io/v1alpha3/namespaces?sortBy=createTime&limit=10&labelSelector=kubesphere.io%2Fworkspace%21%3Dsystem-workspace%2C%21kubesphere.io%2Fkubefed-host-namespace%2C%21kubesphere.io%2Fdevopsproject',
method: 'get'
})
}
export function getDetailUserProject() {
return request({
url: '',
method: 'get'
})
}
export function getBriefSystemProject() {
return request({
url: 'kapis/resources.kubesphere.io/v1alpha3/namespaces?sortBy=createTime&limit=10&labelSelector=kubesphere.io%2Fworkspace%3Dsystem-workspace',
method: 'get'
})
}
export function getDetailSystemProject() {
return request({
url: '',
method: 'get'
})
}

8
src/api/storageManagement.js Normal file
View File

@ -0,0 +1,8 @@
import request from '@/utils/request'
export function getVolume() {
return request({
url: 'kapis/resources.kubesphere.io/v1alpha3/persistentvolumeclaims?sortBy=createTime&limit=10',
method: 'get'
})
}

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

@ -24,6 +24,7 @@ export default {
return new Promise((resolve, reject) => {
const data = []
const obj = {}
// let flag = 0
getAPIState().then(response => {
// console.log(response)
let apiRequestPerSecond, apiRequestLatency
@ -31,17 +32,16 @@ export default {
if (response['results'][l]['metric_name'] === 'apiserver_request_rate') { apiRequestPerSecond = response['results'][l]['data']['result'][0]['value'][1] }
if (response['results'][l]['metric_name'] === 'apiserver_request_latencies') { apiRequestLatency = response['results'][l]['data']['result'][0]['value'][1] }
}
obj.apiRequest = parseFloat(apiRequestPerSecond).toFixed(3)
obj.delay = (parseFloat(apiRequestLatency) * 1000).toFixed(2)
console.log(obj)
obj.apiRequest = parseFloat(apiRequestPerSecond).toFixed(3) + ' times/s'
obj.delay = (parseFloat(apiRequestLatency) * 1000).toFixed(2) + ' ms'
// flag = 1
// data[0] = obj;
// this.componentStatus = data;
}).catch(error => {
reject(error)
})
getSchedulerState().then(response => {
// if(flag === 0) { setTimeout(function(){console.log('flag:' + flag)}, 20000) }
// console.log(response['results'][0]['data']['result'])
let schedulerSchedulingTimes, temp1, temp2
for (let l = 0; l < response['results'][0]['data']['result'].length; l++) {
@ -50,11 +50,9 @@ export default {
if (response['results'][0]['data']['result'][l]['metric']['result'] === 'unschedulable') { temp2 = parseInt(response['results'][0]['data']['result'][l]['value'][1]) }
}
const schedulingFailedPods = temp1 + temp2
// console.log(schedulerSchedulingTimes)
// console.log(schedulingFailedPods)
obj.schedulerTimes = schedulerSchedulingTimes
obj.schedulingPods = schedulingFailedPods
console.log(obj)
data[0] = obj
this.componentStatus = data

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

@ -2,22 +2,67 @@
<el-card class="chartCard">
<el-table style="padding:20px 0" :data="nodeMessage">
<el-table-column prop="node" label="节点" width="200" />
<el-table-column prop="CPU" label="CPU使用率" width="120" />
<el-table-column prop="role" label="角色" width="80" />
<el-table-column prop="cpu" label="CPU使用率" width="100" />
</el-table>
</el-card>
</template>
<script>
import { getNodeMessage } from '@/api/nodeManagement'
export default {
name: 'NodeMessage',
data() {
return {
nodeMessage: [
nodeMessage: [{}],
nodeMessage2: [
{ node: 'master 192.168.12.10', CPU: '16%' },
{ node: 'node1 192.168.12.11', CPU: '12%' },
{ node: 'node2 192.168.12.12', CPU: '7%' }
]
}
},
created() {
return new Promise((resolve, reject) => {
const data = []
const obj = {}
getNodeMessage().then(response => {
// console.log(response)
const LENGTH = response['results'].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
}
}
// console.log(response['results'][index]['data']['result'].length)
for (let l = 0; l < response['results'][index]['data']['result'].length; l++) {
// console.log(response['results'][index]['data']['result'][l])
const name = response['results'][index]['data']['result'][l]['metric']['node']
// console.log("name"+name)
const ip = response['results'][index]['data']['result'][l]['metric']['host_ip']
const role = response['results'][index]['data']['result'][l]['metric']['role']
const cpu = (parseFloat(response['results'][index]['data']['result'][l]['value'][1]) * 100).toFixed(2)
obj.node = name + ' (' + ip + ')'
obj.role = role
obj.cpu = cpu + '%'
data[l] = obj
// console.log(name+","+ip+","+role+","+cpu)
}
// obj.node = parseFloat(apiRequestPerSecond).toFixed(3)
// obj.role = (parseFloat(apiRequestLatency) * 1000).toFixed(2)
// obj.cpu = (parseFloat(apiRequestLatency) * 1000).toFixed(2)
// console.log(obj)
// data[0] = obj;
this.nodeMessage = data
}).catch(error => {
reject(error)
})
})
}
}
</script>

111
src/components/ClusterManagement/resourceUsage.vue
View File

@ -1,93 +1,3 @@
<!--<template>-->
<!-- <el-card class="chartCard" style="height: 450px">-->
<!-- <el-row>-->
<!-- <el-col :span="24">-->
<!-- <el-col :span="6" class="center">-->
<!-- <el-progress type="circle" :percentage="80" style="width:130px;margin-top: 20px" />-->
<!-- </el-col>-->
<!-- <el-col :span="18" class="center">-->
<!-- <el-card style="height: 75px;margin-top: 10px;padding:10px">-->
<!-- <el-col :span="6">-->
<!-- <el-progress type="circle" :percentage="12" :width="75" />-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-col :span="8">-->
<!-- <p>12%</p>-->
<!-- <p>CPU</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>1.49 core</p>-->
<!-- <p>已使用</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>12 core</p>-->
<!-- <p>总计</p>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- </el-card>-->
<!-- <el-card style="height: 75px;margin-top: 10px;padding:10px">-->
<!-- <el-col :span="6">-->
<!-- <el-progress type="circle" :percentage="39" :width="75" />-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-col :span="8">-->
<!-- <p>39%</p>-->
<!-- <p>内存</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>9.18 Gi</p>-->
<!-- <p>已使用</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>23.39 Gi</p>-->
<!-- <p>总计</p>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- </el-card>-->
<!-- <el-card style="height: 75px;margin-top: 10px;padding:10px">-->
<!-- <el-col :span="6">-->
<!-- <el-progress type="circle" :percentage="31" :width="75" />-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-col :span="8">-->
<!-- <p>31%</p>-->
<!-- <p>Pods</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>102</p>-->
<!-- <p>已使用</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>330</p>-->
<!-- <p>总计</p>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- </el-card>-->
<!-- <el-card style="height: 75px;margin-top: 10px;padding:10px">-->
<!-- <el-col :span="6">-->
<!-- <el-progress type="circle" :percentage="86" :width="75" />-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-col :span="8">-->
<!-- <p>86%</p>-->
<!-- <p>本地存储</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>54.12 GB</p>-->
<!-- <p>已使用</p>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <p>63 GB</p>-->
<!-- <p>总计</p>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- </el-card>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-card>-->
<!--</template>-->
<template>
<div>
<el-card>
@ -158,33 +68,34 @@ export default {
}
// CPU
cpuObj.used = clusterCPUUsage + 'Core'
cpuObj.total = clusterCPUTotal + 'Core'
cpuObj.used = clusterCPUUsage + ' Core'
cpuObj.total = clusterCPUTotal + ' Core'
cpuObj.cpu = (Math.round(clusterCPUUsage / clusterCPUTotal * 10000) / 100.00) + '%'
console.log(cpuObj)
// console.log(cpuObj)
// 内存
memoryObj.used = clusterMemoryUsage + 'Gi'
memoryObj.total = clusterMemoryTotal + 'Gi'
memoryObj.used = clusterMemoryUsage + ' Gi'
memoryObj.total = clusterMemoryTotal + ' Gi'
memoryObj.memory = (Math.round(clusterMemoryUsage / clusterMemoryTotal * 10000) / 100.00) + '%'
console.log(memoryObj)
// console.log(memoryObj)
// 容器组
podObj.used = clusterPodUsage
podObj.total = clusterPodTotal
podObj.pod = (Math.round(clusterPodUsage / clusterPodTotal * 10000) / 100.00) + '%'
console.log(podObj)
// console.log(podObj)
// 本地存储
diskObj.used = clusterDiskUsage + 'GB'
diskObj.total = clusterDiskTotal + 'GB'
diskObj.used = clusterDiskUsage + ' GB'
diskObj.total = clusterDiskTotal + ' GB'
diskObj.disk = (Math.round(clusterDiskUsage / clusterDiskTotal * 10000) / 100.00) + '%'
console.log(memoryObj)
// console.log(memoryObj)
cpuData[0] = cpuObj
memoryData[0] = memoryObj
podData[0] = podObj
diskData[0] = diskObj
this.cpuCard = cpuData
this.memoryCard = memoryData
this.podCard = podData

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

@ -16,7 +16,7 @@
</el-collapse>
</el-card>
<el-card class="chartCard" style="height:150px;width:600px">
<el-table style="margin-top:25px" :data="nodeReliefMessage">
<el-table style="margin-top:25px" :data="nodeBriefMessage">
<el-table-column prop="totalNumber" label="节点数量" />
<el-table-column prop="masterNumber" label="控制节点数量" />
<el-table-column prop="nodeNumber" label="工作节点数量" />
@ -36,9 +36,7 @@ export default {
data() {
return {
activeName: '1',
nodeReliefMessage: [
{ totalNumber: '3', masterNumber: '1', nodeNumber: '3' }
]
nodeBriefMessage: [{}]
}
}
}

79
src/views/projectManagement/index.vue
View File

@ -8,7 +8,7 @@
</el-card>
<el-tabs type="border-card">
<el-tab-pane label="用户项目">
<el-table :data="nodeStatus">
<el-table :data="userProject">
<el-table-column prop="name" label="名称" width="140" />
<el-table-column prop="status" label="状态" width="140" />
<el-table-column prop="space" label="企业空间" width="140" />
@ -18,7 +18,7 @@
</el-table>
</el-tab-pane>
<el-tab-pane label="系统项目">
<el-table :data="nodeStatus">
<el-table :data="systemProject">
<el-table-column prop="name" label="名称" width="140" />
<el-table-column prop="status" label="状态" width="140" />
<el-table-column prop="space" label="企业空间" width="140" />
@ -32,43 +32,54 @@
</template>
<script>
import { getVolume } from '@/api/storageManagement'
export default {
name: 'ProjectForm',
data() {
return {
nodeStatus: [
{
name: 'a111', status: '活跃', space: '', cpu: '0 m', ram: '0 Bytes', pod: '0'
},
{
name: 'node1', status: '活跃', space: 'demo', cpu: '30 m', ram: '1.63 Gi', pod: '33'
},
{
name: 'aba', status: '活跃', space: 'demo', cpu: '0 m', ram: '0 Bytes', pod: '0'
},
{
name: 'cert-manager', status: '活跃', space: '', cpu: '10 m', ram: '105.65 Mi', pod: '3'
},
{
name: 'a111', status: '活跃', space: '', cpu: '0 m', ram: '0 Bytes', pod: '0'
},
{
name: 'node1', status: '活跃', space: 'demo', cpu: '30 m', ram: '1.63 Gi', pod: '33'
},
{
name: 'aba', status: '活跃', space: 'demo', cpu: '0 m', ram: '0 Bytes', pod: '0'
},
{
name: 'cert-manager', status: '活跃', space: '', cpu: '10 m', ram: '105.65 Mi', pod: '3'
},
{
name: 'aba', status: '活跃', space: 'demo', cpu: '0 m', ram: '0 Bytes', pod: '0'
},
{
name: 'cert-manager', status: '活跃', space: '', cpu: '10 m', ram: '105.65 Mi', pod: '3'
}
]
userProject: [{}],
systemProject: [{}]
}
},
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++) {
// 存储卷名称
const volumeName = response['items'][item]['metadata']['name']
obj.name = volumeName
// 存储卷状态
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
// 存储卷访问模式
const accessMode = response['items'][item]['status']['accessModes']
obj.mode = accessMode
// 存储卷挂载情况
obj.mount = '已挂载'
// 存储卷创建时间
const createdTime = response['items'][item]['metadata']['creationTimestamp']
obj.createTime = createdTime
console.log(volumeName + ', ' + volumeStatus + ', ' + accessMode + ', ' + createdTime)
data[item] = obj
this.volumes = data
}
}).catch(error => {
reject(error)
})
})
}
}
</script>

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

@ -15,48 +15,67 @@
</el-collapse>
</el-card>
<el-card class="chartCard" style="height: 700px; padding:20px 0">
<el-table :data="nodeStatus">
<el-table :data="volumes">
<el-table-column prop="name" label="名称" width="300" />
<el-table-column prop="status" label="状态" width="140" />
<el-table-column prop="mode" label="访问模式" width="200" />
<el-table-column prop="mount" label="挂载" width="140" />
<el-table-column prop="createtime" label="创建时间" width="140" />
<el-table-column prop="createTime" label="创建时间" width="180" />
</el-table>
</el-card>
</div>
</template>
<script>
import { getVolume } from '@/api/storageManagement'
export default {
name: 'StorageForm',
data() {
return {
activeName: '1',
nodeStatus: [
{
name: 'minio-87dz96', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2021-01-07 13:49'
},
{
name: 'data-postgre-ux292w-postgresql-0', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2021-01-05 12:09'
},
{
name: 'db-data-mongodb-5gupv8-0', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2021-01-04 09:59'
},
{
name: 'ks-jenkins', status: '准备就绪', mode: 'ReadWriteOnce', mount: '未挂载', createtime: '2020-12-09 20:23'
},
{
name: 'harbor-hrypxk-harbor-registry', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2020-11-22 03:00'
},
{
name: 'harbor-hrypxk-harbor-jobservice', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2020-11-22 03:00'
},
{
name: 'harbor-hrypxk-harbor-chartmuseum', status: '准备就绪', mode: 'ReadWriteOnce', mount: '已挂载', createtime: '2020-11-22 03:00'
}
]
volumes: [{}]
}
},
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++) {
let volumeStatus
// 存储卷名称
const volumeName = response['items'][item]['metadata']['name']
obj.name = volumeName
// 存储卷状态
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
// 存储卷访问模式
const accessMode = response['items'][item]['status']['accessModes']
obj.mode = accessMode
// 存储卷挂载情况
obj.mount = '已挂载'
// 存储卷创建时间
const createdTime = response['items'][item]['metadata']['creationTimestamp']
obj.createTime = createdTime
console.log(volumeName + ', ' + volumeStatus + ', ' + accessMode + ', ' + createdTime)
data[item] = obj
this.volumes = data
}
}).catch(error => {
reject(error)
})
})
}
}
</script>