Resources Management

web_src/vuepages/apis/modules/resources.js

@@ -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,
+  });
+}
+

web_src/vuepages/const/index.js

@@ -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' }];

web_src/vuepages/pages/resources/components/QueueDialog.vue

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

web_src/vuepages/pages/resources/queue/index.vue

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

web_src/vuepages/pages/resources/scene/index.vue

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

web_src/vuepages/pages/resources/specification/index.vue

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

web_src/vuepages/utils/index.js

@@ -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 '';
+};