节点首页

packages/web/projects/vgpu/api/node.js

@@ -31,6 +31,21 @@ class nodeApi {
   getNodeListReq(data) {
     return request(this.getNodeList(data));
   }
+
+  discoveredNodes(data) {
+    return request({
+      url: apiPrefix + '/v1/node/discovered',
+      method: 'POST',
+      data,
+    });
+  }
+  joinNodes(data) {
+    return request({
+      url: apiPrefix + '/v1/node/join',
+      method: 'POST',
+      data,
+    });
+  }
 }
 
 export default new nodeApi();

packages/web/projects/vgpu/views/node/admin/index.vue

@@ -1,23 +1,36 @@
 <template>
-    <list-header
-      description="节点管理用于管理和监控计算节点的状态。它可以启用或禁用节点，查看节点上的物理GPU卡，以及监控节点上运行的所有任务。"
-    />
+  <list-header description="节点管理用于管理和监控计算节点的状态。它可以启用或禁用节点，查看节点上的物理GPU卡，以及监控节点上运行的所有任务。">
+    <template #actions>
+      <el-button @click="handleAdd" style="margin-right: 24px;" type="primary" round>发现节点</el-button>
+    </template>
+  </list-header>
 
   <preview-bar :handle-click=handleClick />
 
-    <table-plus
-      :api="nodeApi.getNodeList()"
-      :columns="columns"
-      :rowAction="rowAction"
-      :searchSchema="searchSchema"
-      :hasPagination="false"
-      style="height: auto"
-      hideTag
-      ref="table"
-      staticPage
-    >
+  <table-plus :api="nodeApi.getNodeList()" :columns="columns" :rowAction="rowAction" :searchSchema="searchSchema"
+    :hasPagination="false" style="height: auto" hideTag ref="table" staticPage>
   </table-plus>
 
+  <el-dialog @close="nodeSelect = []" v-model="dialogVisible" title="添加节点" width="600" :before-close="handleClose">
+    <div v-loading="loading">
+      <template v-if="nodeList && nodeList.length > 0">
+        <div style="display: flex; align-items: center;" v-for="{ nodeIp }, index in nodeList" :key="nodeIp">
+          <el-checkbox :model-value="nodeSelect.includes(nodeIp)" @change="handleCheckboxChange(nodeIp)" />
+          <span style="color: #0B1524; margin-left: 8px;">{{ nodeIp }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <div>
+          <el-empty description="暂无节点数据" />
+        </div>
+      </template>
+    </div>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="handleOk">确认</el-button>
+    </template>
+  </el-dialog>
+
 </template>
 
 <script setup lang="jsx">
@@ -33,6 +46,15 @@ const router = useRouter();
 
 const table = ref();
 
+// 节点选择相关
+const dialogVisible = ref(false)
+const nodeList = ref([])
+const nodeSelect = ref([])
+const loading = ref(true)
+const btnLoading = ref(false)
+
+
+
 const handleClick = async (params) => {
   const name = params.data.name;
   const { list } = await nodeApi.getNodes({ filters: {} })
@@ -45,6 +67,49 @@ const handleClick = async (params) => {
   }
 };
 
+// 确认操作
+const handleOk = async () => {
+  if (!nodeSelect.value.length) {
+    ElMessage({
+      message: '请选择节点',
+      type: 'warning',
+    })
+    return;
+  }
+  btnLoading.value = true;
+  try {
+    const node_names = nodeList.value.filter(e => nodeSelect.value.includes(e.nodeIp)).map(e => e.nodeName)
+    const res = await nodeApi.joinNodes({
+      node_names
+    })
+    if (res?.code === 200) {
+      getList();
+      dialogVisible.value = false;
+    }
+  } finally {
+    btnLoading.value = false;
+  }
+}
+
+// 复选框变化
+const handleCheckboxChange = (ip) => {
+  const index = nodeSelect.value.indexOf(ip);
+  if (index > -1) {
+    nodeSelect.value.splice(index, 1);
+  } else {
+    nodeSelect.value.push(ip);
+  }
+}
+
+// 添加节点
+const handleAdd = async () => {
+  dialogVisible.value = true
+  loading.value = true
+  const res = await nodeApi.discoveredNodes({})
+  nodeList.value = res?.list || []
+  loading.value = false
+}
+
 const columns = [
   {
     title: '节点名称',

packages/web/projects/vgpu/views/poll/admin/index.vue

@@ -8,7 +8,7 @@
   <div v-loading="loading" style="min-height: 90px;">
     <block-box
       v-for="{ poolId, poolName, nodeNum, cpuCores, gpuNum, availableMemory, totalMemory, diskSize, nodeList }, index in paginatedList"
-      :key="poolId">
+      :key="poolId" style="margin: 15px 0 0 0;">
       <el-row style="align-items: center;">
         <div class="left">
           <b class="title">{{ poolName }}</b>
@@ -36,7 +36,7 @@
   </div>
 
   <!-- 分页组件 -->
-  <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
+  <el-pagination style="margin-top: 15px;" background v-model:current-page="currentPage" v-model:page-size="pageSize"
     layout="total, ->, sizes, jumper, prev, next" :page-sizes="[10, 20, 50, 100]" :total="list.length"
     @size-change="handleSizeChange" @current-change="handleCurrentChange" />
 
@@ -90,10 +90,8 @@
       </div>
     </div>
     <template #footer>
-      <span class="dialog-footer">
       <el-button @click="dialogVisible = false">取消</el-button>
       <el-button :loading="btnLoading" type="primary" @click="handleOk">确认</el-button>
-      </span>
     </template>
   </el-dialog>
 </template>