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

Restyle the overview of hpc and api connection

This commit is contained in:
ann 2024-02-05 13:51:06 +08:00
parent 1bedb57012
commit 5ab97552da
5 changed files with 98 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/hpc/hpcManagement.js
View File

@ -3,7 +3,7 @@ import request from '@/utils/request'
// 获取顶部指标数据
export function getRegion() {
return request({
url: '/pcm/v1/core/getRegion',
url: '/pcm/v1/hpc/overview',
method: 'get'
})
}
@ -11,23 +11,24 @@ export function getRegion() {
// 获取超算域
export function getListRegions() {
return request({
url: '/pcm/v1/core/listRegion',
url: '/pcm/v1/hpc/adaptor/list',
method: 'get'
})
}
// 获取运行中作业列表
// 获取资源概览
export function getResourceOverview() {
return request({
url: '/pcm/v1/hpc/resource',
method: 'get'
})
}
// 获取作业列表
export function getListJobs() {
return request({
url: '/pcm/v1/hpc/listJob',
url: '/pcm/v1/hpc/task/list',
method: 'get'
})
}
// 获取历史作业列表
export function getListDbJobs() {
return request({
url: '/pcm/v1/hpc/listHistoryJob',
method: 'get'
})
}

2
src/layout/components/AppMain.vue
View File

@ -27,7 +27,7 @@ export default {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 0);
min-height: calc(100vh - 145px);
width: 100%;
position: relative;
overflow: hidden;

2
src/styles/sidebar.scss
View File

@ -1,7 +1,7 @@
#app {
.main-container {
min-height: 100%;
min-height: calc(100vh - 145px);
transition: margin-left .28s;
display: flex;
// margin-left: calc(#{$sideBarWidth});

199
src/views/hpcOverview/index.vue
View File

@ -8,95 +8,67 @@
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-card>
<div slot="header" class="clearfix">
<span>超算域</span>
<el-col :span="15">
<el-row>
<el-card>
<div slot="header" class="clearfix">
<span>超算域</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">超算作业创建</el-button> -->
</div>
<el-row :gutter="24">
<el-col :span="12">
<List
ref="multipleTable"
class="multipleTable"
:columns="domainColumns"
height="200"
highlight-current-row
:table-list-data="domainList"
:pagination="false"
/>
</el-col>
<el-col :span="12">
<BarChart :domain-data="domainList" />
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
</div>
<!-- <el-row :gutter="24">
<el-col :span="14"> -->
<List
ref="multipleTable"
class="multipleTable"
:columns="domainColumns"
height="200"
highlight-current-row
:get-list-action="getListRegions"
:pagination="false"
/>
<!-- </el-col>
</el-row> -->
</el-card></el-row>
<!-- </el-col>
<el-col :span="14"> -->
<el-card class="list-card">
<div slot="header" class="clearfix">
<span>运行中作业</span>
<span>作业</span>
</div>
<List
ref="multipleTable"
class="multipleTable"
:columns="taskColumns"
height="250"
:table-list-data="taskList"
:get-list-action="getListJobs"
:pagination="false"
/>
<span v-if="taskList.length === 0" class="tips">暂无数据</span>
<!-- <span v-if="taskList.length === 0" class="tips">暂无数据</span> -->
</el-card>
</el-col>
<el-col :span="12">
<el-col :span="9">
<el-col :span="24">
<el-card class="list-card">
<el-card class="">
<div slot="header" class="clearfix">
<span>历史作业</span>
<span>资源</span>
</div>
<List
ref="multipleTable"
class="multipleTable"
:columns="taskDBColumns"
height="250"
:table-list-data="taskDBList"
:pagination="false"
/>
<span v-if="taskDBList.length === 0" class="tips">暂无数据</span>
<!-- <el-row class="resource">
<el-col :span="12">
<div>CPU <span class="impact num">{{ resource.cpu.core }}</span> 核</div>
<div class="money">
<el-row class="impact">
<el-col :span="12">{{ resource.cpu.cpu }}%</el-col>
<el-col :span="12">{{ resource.cpu.ram }}%</el-col>
</el-row>
<el-row>
<el-col :span="12">CPU</el-col>
<el-col :span="12">RAM</el-col>
</el-row>
</div>
<p>{{ resource.cpu.percent }}%</p>
<span class="tips">过去24小时利用率</span>
</el-col>
<el-col :span="12">
<div>GPU <span class="impact num">{{ resource.gpu.core }}</span> 卡</div>
<el-row v-for="(item, index) in resourceList" :key="index" class="resource">
<el-col :span="14">
<div class="money money1">
<el-row class="impact">
<el-col :span="12">{{ resource.gpu.cpu }}%</el-col>
<el-col :span="12">{{ resource.gpu.ram }}%</el-col>
</el-row>
<el-row>
<el-col :span="12">CPU</el-col>
<el-col :span="12">RAM</el-col>
<el-col :span="24">{{ Math.round(item.rate*100) }}%</el-col>
</el-row>
<span>{{ index }}</span>
</div>
<p>{{ resource.gpu.percent }}%</p>
<span class="tips">过去24小时利用率</span>
</el-col>
</el-row> -->
<el-col :span="10">
<div class="dataset">
<div class="impact">{{ index.toUpperCase() }}</div>
<p>空闲 {{ item.free }} / 已使用 {{ item.used }}</p>
<span class="tips">总数： {{ item.total }}</span>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-col>
@ -126,56 +98,41 @@
<script>
import List from '@/components/list'
import Exhibition from '@/components/Exhibition'
import BarChart from './components/barChart.vue'
import { getListJobs, getListDbJobs, getListRegions, getRegion } from '@/api/hpc/hpcManagement'
import { getListJobs, getRegion, getListRegions, getResourceOverview } from '@/api/hpc/hpcManagement'
// import { computedStyle } from 'vue-json-editor/assets/jsoneditor'
export default {
components: {
Exhibition,
List,
BarChart
List
},
data() {
return {
getListJobs,
getListRegions,
fileList: [],
dialogVisible: false,
// resource: {
// cpu: {
// cpu: 0,
// ram: 0,
// core: 0,
// percent: 100
// },
// gpu: {
// cpu: 0,
// ram: 0,
// core: 0,
// percent: 100
// }
// },
resourceList: [],
domainList: [],
chooseRow: [],
taskList: [],
taskDBList: [],
exhibitionArray: [
{ name: '高性能计算域合计', src: 'hpc-1', value: '0' },
{ name: '已适配异构软件栈', src: 'blockChainBrowser-4', value: '0' },
{ name: '运行作业数量', src: 'blockChainBrowser-1', value: '0' },
{ name: '历史作业数量', src: 'blockChainBrowser-5', value: '0' }
// { name: '连接调用接口数量', src: 'blockChainBrowser-5', value: '0' }
{ name: '适配器总数', src: 'hpc-1', value: '0', key: 'adaptorCount' },
{ name: '任务总数', src: 'blockChainBrowser-4', value: '0', key: 'jobCount' },
{ name: '软件栈总数', src: 'blockChainBrowser-1', value: '0', key: 'stackCount' },
{ name: '接口总数', src: 'blockChainBrowser-5', value: '0', key: 'interfaceCount' }
],
domainColumns: [
{ prop: 'RegionName', label: '超算域' },
{ prop: 'SlurmNum', label: '适配版本数量' },
{ prop: 'AdaptorInterfaceSum', label: '适配接口数量' },
{ prop: 'runningJobs', label: '运行作业' }
{ prop: 'name', label: '超算域' },
{ prop: 'stackCount', label: '软件栈总数' },
{ prop: 'jobCount', label: '作业数量' },
{ prop: 'interfaceCount', label: '适配接口数量' }
],
taskColumns: [
{ prop: 'name', label: '作业名称' },
{ prop: 'StateofJob', label: '作业状态' },
{ prop: 'JobRunTime', label: '运行时长' },
{ prop: 'JobStartTime', label: '开始时间' },
{ prop: 'slurmVersion', label: '作业所在域' }
{ prop: 'status', label: '作业状态' },
{ prop: 'adaptorName', label: '作业所在域' }
],
taskDBColumns: [
{ prop: 'name', label: '作业名称' },
@ -215,22 +172,26 @@ export default {
},
getData() {
Promise.all([
getListJobs(),
getListDbJobs(),
getListRegions(),
getRegion()
getRegion(),
getResourceOverview()
]).then(res => {
this.taskList = res[0]?.jobInfos || []
this.exhibitionArray[2].value = res[0]?.recordCount || 0
console.log(res[0].data)
console.log(res[1].data)
this.exhibitionArray[0].value = res[0].data.adaptorCount || 0
this.exhibitionArray[1].value = res[0].data.jobCount || 0
this.exhibitionArray[2].value = res[0].data.stackCount || 0
this.exhibitionArray[3].value = res[0].data.interfaceCount || 0
this.resourceList = res[1].data
// this.exhibitionArray[2].value = res[0]?.recordCount || 0
this.taskDBList = res[1]?.jobInfoDbs || []
this.exhibitionArray[3].value = res[1]?.recordCount || 0
// this.taskDBList = res[1]?.jobInfoDbs || []
// this.exhibitionArray[3].value = res[1]?.recordCount || 0
this.domainList = res[2]?.data || []
// this.domainList = res[2]?.data || []
const topData = res[3]
this.exhibitionArray[0].value = topData?.data?.regionSum
this.exhibitionArray[1].value = topData?.data?.softStackSum
// const topData = res[3]
// this.exhibitionArray[0].value = topData?.data?.regionSum
// this.exhibitionArray[1].value = topData?.data?.softStackSum
})
},
clickLeft(row) {
@ -254,9 +215,9 @@ export default {
text-align: center;
.money{
display: inline-block;
width: 220px;
height: 220px;
border: 30px solid #dfebf7;
width: 150px;
height: 150px;
border: 20px solid #4b8cc9;
background: linear-gradient(135deg, #41A0F8 0%, #3182CE 100%);
// box-shadow: 0px 10px 26px 5px rgb(52 72 90 / 20%);
border-radius: 50%;
@ -265,7 +226,7 @@ export default {
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
padding-top: 50px;
padding-top: 30px;
margin: 0 auto;
margin-top: 14px;
p{
@ -277,11 +238,17 @@ export default {
background: linear-gradient(90deg, #21B8AF 0%, #3182CE 100%);
}
}
.resource:last-child{
margin-bottom: 20px;
}
.impact{
font-size: 30px;
font-size: 26px;
font-family: Impact;
font-weight: 400;
}
.dataset{
padding: 20px ;
}
.num{
font-size: 24px;
}

2
vue.config.js
View File

@ -68,7 +68,7 @@ module.exports = {
'^/pcm': {
ws: false,
// target: 'https://dev.jointcloud.net/apis', /* 测试环境 */
target: 'https://jcos.jointcloud.net/', /* 测试环境 */
target: 'https://mock.apifox.com/m1/4000164-0-default/', /* 测试环境 */
// target: 'https://jointcloud.net/apis', /* 演示环境 */
changeOrigin: true,
secure: false