Browse Source

Merge branch 'res-manage' of https://git.openi.org.cn/OpenI/aiforge into res-manage

pull/2765/head
chenyifan01 2 years ago
parent
commit
709bff9aeb
7 changed files with 128 additions and 66 deletions
  1. +29
    -4
      web_src/vuepages/apis/modules/resources.js
  2. +2
    -2
      web_src/vuepages/const/index.js
  3. +52
    -18
      web_src/vuepages/pages/resources/components/QueueDialog.vue
  4. +36
    -40
      web_src/vuepages/pages/resources/queue/index.vue
  5. +1
    -1
      web_src/vuepages/pages/resources/scene/index.vue
  6. +1
    -1
      web_src/vuepages/pages/resources/specification/index.vue
  7. +7
    -0
      web_src/vuepages/utils/index.js

+ 29
- 4
web_src/vuepages/apis/modules/resources.js View File

@@ -1,6 +1,12 @@
import service from '../service';

// 查看资源池(队列)
// 查询资源队列列表
// page 当前页数,从1开始
// cluster 所属集群 :OpenI 启智集群,C2Net 智算集群
// center 智算中心:OpenIOne 云脑一,OpenITwo 云脑二, chendu 成都人工智能计算中心, pclcci 鹏城云计算所 ,hefei 合肥类脑类脑智能开放平台, xuchang 中原人工智能计算中心
// resource 计算资源: GPU NPU
// card XPU类型: T4、A100、V100、Ascend 910

export const getQueueList = (params) => {
return service({
url: '/admin/resources/queue',
@@ -9,12 +15,31 @@ export const getQueueList = (params) => {
});
}

// 编辑资源池(队列)
export const setQueueList = (data) => {
export const getResQueueList = (params) => {
return service({
url: '/reward/point/account',
url: '/admin/resources/queue/list',
method: 'get',
params,
});
}

// 新增资源队列
export const addResQueue = (data) => { // Cluster,QueueCode,AiCenterCode,ComputeResource,AccCardType,CardsTotalNum,Remark
return service({
url: '/admin/resources/queue/add',
method: 'post',
params: {},
data,
});
}

// 更新资源队列
export const updateResQueue = (data) => { // CardsTotalNum,Remark
return service({
url: `/admin/resources/queue/update/${data.ID}`,
method: 'post',
params: {},
data,
});
}


+ 2
- 2
web_src/vuepages/const/index.js View File

@@ -11,5 +11,5 @@ export const JOB_TYPE = [{ k: 'DEBUG', v: i18n.t('debugTask') }, { k: 'TRAIN', v
// 资源管理
export const CLUSTERS = [{ k: 'OpenI', v: '启智集群' }, { k: 'C2Net', v: '智算集群' }];
export const AI_CENTER = [{ k: 'OpenIOne', v: '云脑一' }, { k: 'OpenITwo', v: '云脑二' }, { k: 'chendu', v: '成都人工智能计算中心' }, { k: 'pclcci', v: '鹏城云计算所' }, { k: 'hefei', v: '合肥类脑类脑智能开放平台' }, { k: 'xuchang', v: '中原人工智能计算中心' }];
export const COMPUTER_RESOURCES = [{ k: 'GPU', v: 'CPU/GPU' }, { k: 'NPU', v: 'NPU' }];
export const ACC_CARD_TYPE = [{ k: 'T4', v: 'T4' }, { k: 'A100', v: 'A100' }, { k: 'V100', v: 'V100' }, { k: 'Ascend910', v: 'Ascend910' }];
export const COMPUTER_RESOURCES = [{ k: 'GPU', v: 'GPU' }, { k: 'NPU', v: 'NPU' }];
export const ACC_CARD_TYPE = [{ k: 'T4', v: 'T4' }, { k: 'A100', v: 'A100' }, { k: 'V100', v: 'V100' }, { k: 'Ascend910', v: 'Ascend 910' }];

+ 52
- 18
web_src/vuepages/pages/resources/components/QueueDialog.vue View File

@@ -9,7 +9,7 @@
<span>资源池(队列)名称</span>
</div>
<div class="content">
<el-input v-model="dataInfo.name" placeholder=""></el-input>
<el-input v-model="dataInfo.QueueCode" placeholder="" :disabled="type === 'edit'"></el-input>
</div>
</div>
<div class="form-row">
@@ -17,7 +17,7 @@
<span>所属集群</span>
</div>
<div class="content">
<el-select v-model="dataInfo.cluster">
<el-select v-model="dataInfo.Cluster" :disabled="type === 'edit'">
<el-option v-for="item in clusterList" :key="item.k" :label="item.v" :value="item.k" />
</el-select>
</div>
@@ -27,7 +27,7 @@
<span>智算中心</span>
</div>
<div class="content">
<el-select v-model="dataInfo.computingCenter">
<el-select v-model="dataInfo.AiCenterCode" :disabled="type === 'edit'">
<el-option v-for="item in computingCenterList" :key="item.k" :label="item.v" :value="item.k" />
</el-select>
</div>
@@ -37,7 +37,7 @@
<span>计算资源</span>
</div>
<div class="content">
<el-select v-model="dataInfo.computingType">
<el-select v-model="dataInfo.ComputeResource" :disabled="type === 'edit'">
<el-option v-for="item in computingTypeList" :key="item.k" :label="item.v" :value="item.k" />
</el-select>
</div>
@@ -47,7 +47,7 @@
<span>卡类型</span>
</div>
<div class="content">
<el-select v-model="dataInfo.cardType">
<el-select v-model="dataInfo.AccCardType" :disabled="type === 'edit'">
<el-option v-for="item in cardTypeList" :key="item.k" :label="item.v" :value="item.k" />
</el-select>
</div>
@@ -57,14 +57,14 @@
<span>卡数</span>
</div>
<div class="content">
<el-input v-model="dataInfo.cardNum" type="number" placeholder=""></el-input>
<el-input v-model="dataInfo.CardsTotalNum" type="number" placeholder=""></el-input>
</div>
</div>
<div class="form-row" style="margin-top: 10px">
<div class="title"><span>备注</span></div>
<div class="content" style="width: 400px">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" :placeholder="'请输入备注'"
v-model="dataInfo.remark">
v-model="dataInfo.Remark">
</el-input>
</div>
</div>
@@ -82,7 +82,7 @@
</template>
<script>
import BaseDialog from '~/components/BaseDialog.vue';
import { getQueueList } from '~/apis/modules/resources';
import { addResQueue, updateResQueue } from '~/apis/modules/resources';
import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';

export default {
@@ -115,14 +115,14 @@ export default {
methods: {
resetDataInfo() {
this.dataInfo = {
id: '',
name: '',
cluster: '',
computingCenter: '',
computingType: '',
cardType: '',
cardNum: '',
remark: '',
ID: '',
QueueCode: '',
Cluster: '',
AiCenterCode: '',
ComputeResource: '',
AccCardType: '',
CardsTotalNum: '',
Remark: '',
}
},
open() {
@@ -132,7 +132,6 @@ export default {
} else if (this.type === 'edit') {
this.dataInfo = Object.assign(this.dataInfo, { ...this.data });
}
console.log('open', this.type, this.data);
this.$emit("open");
},
opened() {
@@ -146,7 +145,42 @@ export default {
this.$emit("update:visible", false);
},
confirm() {
console.log('confirm', this.dataInfo);
if (!this.dataInfo.QueueCode || !this.dataInfo.Cluster || !this.dataInfo.AiCenterCode || !this.dataInfo.ComputeResource || !this.dataInfo.AccCardType || !this.dataInfo.CardsTotalNum) {
this.$message({
type: 'info',
message: '请先完善信息!'
});
return;
}
if (parseInt(this.dataInfo.CardsTotalNum) != Number(this.dataInfo.CardsTotalNum)) {
this.$message({
type: 'info',
message: '请输入正整数的卡数!'
});
return;
}
const setApi = this.type === 'add' ? addResQueue : updateResQueue;
setApi({ ...this.dataInfo, CardsTotalNum: Number(this.dataInfo.CardsTotalNum) }).then(res => {
res = res.data;
if (res.Code === 0) {
this.$message({
type: 'success',
message: '提交成功!'
});
this.$emit("confirm");
} else {
this.$message({
type: 'error',
message: '提交失败!'
});
}
}).catch(err => {
console.log(err);
this.$message({
type: 'error',
message: '提交失败!'
});
})
},
cancel() {
this.dialogShow = false;


+ 36
- 40
web_src/vuepages/pages/resources/queue/index.vue View File

@@ -22,26 +22,23 @@
</div>
</div>
<div class="table-container">
<div>
<div style="min-height:600px;">
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column>
<el-table-column prop="name" label="资源池(队列)名称" align="center" header-align="center"></el-table-column>
<el-table-column prop="cluster" label="所属集群" align="center" header-align="center"></el-table-column>
<el-table-column prop="computingCenterId" label="智算中心ID" align="center" header-align="center">
</el-table-column>
<el-table-column prop="computingCenter" label="智算中心" align="center" header-align="center"></el-table-column>
<el-table-column prop="computingType" label="计算资源" align="center" header-align="center"></el-table-column>
<el-table-column prop="cardType" label="卡类型" align="center" header-align="center"></el-table-column>
<el-table-column prop="cardNum" label="卡数 " align="center" header-align="center">
<el-table-column prop="ID" label="ID" align="center" header-align="center" width="80"></el-table-column>
<el-table-column prop="QueueCode" label="资源池(队列)名称" align="center" header-align="center"></el-table-column>
<el-table-column prop="ClusterName" label="所属集群" align="center" header-align="center">
<template slot-scope="scope">
{{ scope.row.cardNum }}
<span :title="scope.row.Cluster">{{ scope.row.ClusterName }}</span>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="最后更新时间" align="center" header-align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="left" header-align="center">
<template slot-scope="scope">
{{ scope.row.remark }}
</template>
<el-table-column prop="AiCenterCode" label="智算中心ID" align="center" header-align="center"></el-table-column>
<el-table-column prop="AiCenterName" label="智算中心" align="center" header-align="center"></el-table-column>
<el-table-column prop="ComputeResourceName" label="计算资源" align="center" header-align="center">
</el-table-column>
<el-table-column prop="AccCardTypeName" label="卡类型" align="center" header-align="center"></el-table-column>
<el-table-column prop="CardsTotalNum" label="卡数 " align="center" header-align="center"></el-table-column>
<el-table-column prop="UpdatedTimeStr" label="最后更新时间" align="center" header-align="center"></el-table-column>
<el-table-column prop="Remark" label="备注" align="left" header-align="center" min-width="160">
</el-table-column>
<el-table-column label="操作" align="center" header-align="center" width="80">
<template slot-scope="scope">
@@ -73,8 +70,10 @@

<script>
import QueueDialog from '../components/QueueDialog.vue';
import { getQueueList } from '~/apis/modules/resources';
import { getResQueueList, addResQueue, updateResQueue } from '~/apis/modules/resources';
import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
import { getListValueWithKey } from '~/utils';
import { formatDate } from 'element-ui/lib/utils/date-util';

export default {
data() {
@@ -106,34 +105,31 @@ export default {
getTableData() {
const params = {
cluster: this.selCluster,
computingCenter: this.selComputingCenter,
computingType: this.selComputingType,
cardType: this.selCardType,
center: this.selComputingCenter,
resource: this.selComputingType,
card: this.selCardType,
curpage: this.pageInfo.curpage,
pagesize: this.pageInfo.pageSize,
};
console.log('params', params);
this.loading = true;
getQueueList(params).then(res => {
getResQueueList(params).then(res => {
this.loading = false;
// const data = res.data.
const data = new Array(20).fill(0).map((_, index) => {
return {
index: index,
id: `id-${index}-${Math.random().toFixed(2)}`,
name: `name-${index}-${Math.random().toFixed(2)}`,
cluster: `cluster-${index}-${Math.random().toFixed(2)}`,
computingCenterId: `computingCenterId-${index}-${Math.random().toFixed(2)}`,
computingCenter: `computingCenter-${index}-${Math.random().toFixed(2)}`,
computingType: `computingType-${index}-${Math.random().toFixed(2)}`,
cardType: `cardType-${index}-${Math.random().toFixed(2)}`,
cardNum: `cardNum-${index}-${Math.random().toFixed(2)}`,
updateTime: `updateTime-${index}-${Math.random().toFixed(2)}`,
remark: `remark-${index}-${Math.random().toFixed(2)}`,
};
});
this.tableData = data;
this.pageInfo.total = 99;
res = res.data;
if (res.Code === 0) {
const list = res.Data.List;
const data = list.map((item) => {
return {
...item,
ClusterName: getListValueWithKey(this.clusterList, item.Cluster),
AiCenterName: getListValueWithKey(this.computingCenterList, item.AiCenterCode),
ComputeResourceName: getListValueWithKey(this.computingTypeList, item.ComputeResource),
AccCardTypeName: getListValueWithKey(this.cardTypeList, item.AccCardType),
UpdatedTimeStr: formatDate(new Date(item.UpdatedTime * 1000), 'yyyy-MM-dd HH:mm:ss'),
}
});
this.tableData = data;
this.pageInfo.total = res.Data.TotalSize;
}
}).catch(err => {
console.log(err);
this.loading = false;


+ 1
- 1
web_src/vuepages/pages/resources/scene/index.vue View File

@@ -18,7 +18,7 @@
</div>
</div>
<div class="table-container">
<div>
<div style="min-height:600px;">
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column>
<el-table-column prop="name" label="应用场景名称" align="center" header-align="center"></el-table-column>


+ 1
- 1
web_src/vuepages/pages/resources/specification/index.vue View File

@@ -17,7 +17,7 @@
</div>
</div>
<div class="table-container">
<div>
<div style="min-height:600px;">
<el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
<el-table-column prop="id" label="ID" align="center" header-align="center" width="100"></el-table-column>
<el-table-column prop="name" label="资源规格" align="left" header-align="center"></el-table-column>


+ 7
- 0
web_src/vuepages/utils/index.js View File

@@ -0,0 +1,7 @@
export const getListValueWithKey = (list, key, k = 'k', v = 'v') => {
for (let i = 0, iLen = list.length; i < iLen; i++) {
const listI = list[i];
if (listI[k] === key) return listI[v];
}
return '';
};

Loading…
Cancel
Save