任务详情完成

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

@@ -52,11 +52,11 @@ class pollApi {
   }
 
   getDetailNodeList(data) {
-    return {
+    return request({
       url: apiPrefix + '/v1/resource/pool/detail',
       method: 'post',
       data,
-    };
+    });
   }
 
   // getNodes(data) {

packages/web/projects/vgpu/views/monitor/overview/index.vue

@@ -135,8 +135,8 @@ const cardGaugeConfig = useInstantVector([
   {
     title: 'CPU 使用率',
     percent: 0,
-    query: `avg(count(node_cpu_seconds_total{mode="idle"}) by (instance)) * (1 - avg(rate(node_cpu_seconds_total{mode="idle"}[5m])))`,
+    query: `sum(count by(instance) (node_cpu_seconds_total{mode="idle"})*(1 - avg by(instance) (irate(node_cpu_seconds_total{mode="idle"}[1m]))))`,
-    totalQuery: `avg(count(node_cpu_seconds_total{mode="idle"}) by (instance))`,
+    totalQuery: `sum(count(node_cpu_seconds_total{mode="system"}) by (instance))`,
     percentQuery: ``,
     total: 0,
     used: 0,
@@ -145,8 +145,8 @@ const cardGaugeConfig = useInstantVector([
   {
     title: '内存 使用率',
     percent: 0,
-    query: `avg(node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes) / 1024 / 1024 / 1024`,
+    query: `(sum(node_memory_MemTotal_bytes) - sum(node_memory_MemAvailable_bytes)) / 1024 / 1024 / 1024`,
-    totalQuery: `avg(node_memory_MemTotal_bytes) / 1024 / 1024 / 1024`,
+    totalQuery: `sum(node_memory_MemTotal_bytes) / 1024 / 1024 / 1024`,
     percentQuery: ``,
     total: 0,
     used: 0,
@@ -155,7 +155,7 @@ const cardGaugeConfig = useInstantVector([
   {
     title: '磁盘 使用率',
     percent: 0,
-    query: `avg(node_filesystem_size_bytes{fstype!~"tmpfs|overlay"} - node_filesystem_free_bytes{fstype!~"tmpfs|overlay"}) / 1024 / 1024 / 1024`,
+    query: `(sum(node_filesystem_size_bytes{fstype!~"tmpfs|overlay"})-sum(node_filesystem_free_bytes{fstype!~"tmpfs|overlay"})) / 1024 / 1024 / 1024`,
     totalQuery: `avg(node_filesystem_size_bytes{fstype!~"tmpfs|overlay"}) / 1024 / 1024 / 1024`,
     percentQuery: ``,
     total: 0,

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

@@ -1,79 +1,20 @@
 <template>
-  <div>
+  <back-header>
-    <back-header>
+    资源池详情
-      资源池详情
+  </back-header>
-    </back-header>
+  <table-plus v-loading="loading" :dataSource="list" :columns="columns" :rowAction="rowAction" :hasPagination="false"
-    <table-plus :api="pollApi.getDetailNodeList({ pool_id: route.params.uid })" :columns="columns"
+    style="margin-bottom: 15px; height: auto;" hideTag ref="table" static :hasActionBar="false">
-      :rowAction="rowAction" :hasPagination="false" style="margin-bottom: 15px;" hideTag ref="table" staticPage
+  </table-plus>
-      :hasActionBar="false">
+  <DetailBox v-if="!!data.nodeName" :key="data.nodeName" :data="data" />
-    </table-plus>
-    <block-box>
-      <ul class="card-gauges">
-        <li v-for="(item, index) in gaugeConfig.slice(0, 4)" :key="index">
-          <Gauge v-bind="item" />
-        </li>
-      </ul>
-      <ul class="card-gauges" style="margin-top: 20px;">
-        <li v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index">
-          <Gauge v-bind="item" />
-        </li>
-      </ul>
-    </block-box>
-
-    <div class="line-box">
-      <block-box title="资源分配趋势（%）">
-        <template #extra>
-          <time-picker v-model="times" type="datetimerange" size="small" />
-        </template>
-        <div style="height: 200px">
-          <echarts-plus :options="getRangeOptions({
-            cpu: gaugeConfig[7].data,
-            internal: gaugeConfig[8].data,
-            core: gaugeConfig[4].data,
-            memory: gaugeConfig[5].data,
-          })
-            " />
-        </div>
-      </block-box>
-      <block-box title="资源使用趋势（%）">
-        <template #extra>
-          <time-picker v-model="times" type="datetimerange" size="small" />
-        </template>
-        <div style="height: 200px">
-          <echarts-plus :options="getRangeOptions({
-            cpu: gaugeConfig[0].data,
-            internal: gaugeConfig[1].data,
-            core: gaugeConfig[6].data,
-            memory: gaugeConfig[3].data,
-          })
-            " />
-        </div>
-      </block-box>
-    </div>
-
-    <block-box title="显卡列表">
-      <CardList :hideTitle="true" :filters="{ nodeUid: detail.uid }" />
-    </block-box>
-
-    <block-box title="任务列表">
-      <TaskList :hideTitle="true" :filters="{ nodeUid: detail.uid }" />
-    </block-box>
-  </div>
 </template>
 
 <script setup lang="jsx">
 import BackHeader from '@/components/BackHeader.vue';
+import DetailBox from './DetailBox.vue';
 import { useRoute } from 'vue-router';
-import BlockBox from '@/components/BlockBox.vue';
+import { ref, computed, watchEffect, onMounted } from 'vue';
-import { computed, onMounted, ref, watch, watchEffect } from 'vue';
-import CardList from '~/vgpu/views/card/admin/index.vue';
-import TaskList from '~/vgpu/views/task/admin/index.vue';
-import Gauge from '~/vgpu/components/gauge.vue';
-import useInstantVector from '~/vgpu/hooks/useInstantVector';
-import EchartsPlus from '@/components/Echarts-plus.vue';
 import pollApi from '~/vgpu/api/poll';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { getRangeOptions } from './getOptions';
 import { bytesToGB, roundToDecimal } from "@/utils";
 import useParentAction from '~/vgpu/hooks/useParentAction';
 
@@ -83,14 +24,35 @@ const route = useRoute();
 
 const table = ref();
 
-const detail = ref({});
+const list = ref([]);
-
+const loading = ref(true);
-const end = new Date();
+
-const start = new Date();
+const data = computed(() => {
-start.setTime(start.getTime() - 3600 * 1000);
+  const result = {
-
+    nodeName: '',
-const times = ref([start, end]);
+    nodeUid: ''
+  };
+  list.value.forEach(node => {
+    result.nodeName = result.nodeName + (result.nodeName ? '|' : '') + node.name
+    result.nodeUid = result.nodeUid + (result.nodeUid ? '|' : '') + node.uid
+  });
+  return result;
+})
+
+watchEffect(() => {
+  console.log(data.value, 'data')
+})
+
+const getList = async () => {
+  loading.value = true
+  const res = await pollApi.getDetailNodeList({ pool_id: route.params.uid })
+  loading.value = false
+  list.value = res.list
+}
 
+onMounted(() => {
+  getList();
+});
 
 const columns = [
   {
@@ -193,7 +155,7 @@ const rowAction = [
               () => {
                 setTimeout(() => {
                   ElMessage.success('节点移除成功');
-                  table.value.fetchData();
+                  getList();
                 }, 500);
               }
             )
@@ -205,133 +167,4 @@ const rowAction = [
     },
   },
 ];
-
-const gaugeConfig = useInstantVector(
-  [
-    {
-      title: 'CPU 使用率',
-      percent: 0,
-      query: `count(node_cpu_seconds_total{mode="idle", instance=~"$node"}) by (instance)*(1 - avg(rate(node_cpu_seconds_total{mode="idle", instance=~"$node"}[5m])) by (instance))`,
-      totalQuery: `count(node_cpu_seconds_total{mode="idle", instance=~"$node"}) by (instance)`,
-      percentQuery: `100 * (1 - avg by(instance)(irate(node_cpu_seconds_total{mode="idle", instance=~"$node"}[1m])))`,
-      total: 0,
-      used: 0,
-      unit: '核',
-    },
-    {
-      title: '内存 使用率',
-      percent: 0,
-      query: `avg(node_memory_MemTotal_bytes{instance=~"$node"} - node_memory_MemAvailable_bytes{instance=~"$node"}) by (instance) / 1024 / 1024 / 1024`,
-      totalQuery: `avg(node_memory_MemTotal_bytes{instance=~"$node"}) by (instance) / 1024 / 1024 / 1024`,
-      percentQuery: `100 * (1 - node_memory_MemAvailable_bytes{instance=~"$node"} / node_memory_MemTotal_bytes{instance=~"$node"})`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-    {
-      title: '磁盘 使用率',
-      percent: 0,
-      query: `sum(node_filesystem_size_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"} - node_filesystem_free_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"}) by (instance) / 1024 / 1024 / 1024`,
-      totalQuery: `sum(node_filesystem_size_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"}) by (instance) / 1024 / 1024 / 1024`,
-      percentQuery: ``,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-    {
-      title: '显存使用率',
-      percent: 0,
-      query: `avg(sum(hami_memory_used{node=~"$node"}) by (instance)) / 1024`,
-      totalQuery: `avg(sum(hami_memory_size{node=~"$node"}) by (instance))/1024`,
-      percentQuery: `(avg(sum(hami_memory_used{node=~"$node"}) by (instance)) / 1024)/(avg(sum(hami_memory_size{node=~"$node"}) by (instance))/1024)*100`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-    {
-      title: '算力分配率',
-      percent: 0,
-      query: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance))`,
-      totalQuery: `avg(sum(hami_core_size{node=~"$node"}) by (instance))`,
-      percentQuery: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance)) / avg(sum(hami_core_size{node=~"$node"}) by (instance)) *100`,
-      total: 0,
-      used: 0,
-      unit: ' ',
-    },
-    {
-      title: '显存分配率',
-      percent: 0,
-      query: `avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance)) / 1024`,
-      totalQuery: `avg(sum(hami_memory_size{node=~"$node"}) by (instance)) / 1024`,
-      percentQuery: `(avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance)) / 1024) /(avg(sum(hami_memory_size{node=~"$node"}) by (instance)) / 1024) *100`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-    {
-      title: '算力使用率',
-      percent: 0,
-      query: `avg(sum(hami_core_util{node=~"$node"}) by (instance))`,
-      percentQuery: `avg(sum(hami_core_util_avg{node=~"$node"}) by (instance))`,
-      totalQuery: `avg(sum(hami_core_size{node=~"$node"}) by (instance))`,
-      total: 100,
-      used: 0,
-      unit: ' ',
-    },
-    {
-      title: 'CPU 分配率',
-      percent: 0,
-      query: ``,
-      totalQuery: ``,
-      percentQuery: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance) / sum(hami_core_size{node=~"$node"}) by (instance) * 100)`,
-      total: 0,
-      used: 0,
-      unit: '核',
-    },
-    {
-      title: '内存 分配率',
-      percent: 0,
-      query: ``,
-      totalQuery: ``,
-      percentQuery: `avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance) / sum(hami_memory_size{node=~"$node"}) by (instance) * 100)`,
-      total: 0,
-      used: 0,
-      unit: 'GiB',
-    },
-  ],
-  (query) => query.replaceAll(`$node`, detail.value.name),
-  times,
-);
-
-onMounted(async () => {
-});
 </script>
-
-<style scoped lang="scss">
-.card-gauges {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  height: 200px;
-
-  li {
-    flex: 0.25;
-  }
-}
-
-.line-box {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  column-gap: 20px;
-}
-
-.node-block {
-  display: flex;
-  flex-direction: column;
-
-  .home-block-content {
-    flex: 1;
-  }
-}
-</style>

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

@@ -0,0 +1,203 @@
+<template>
+
+  <block-box>
+    <ul class="card-gauges">
+      <li v-for="(item, index) in gaugeConfig.slice(0, 4)" :key="index">
+        <Gauge v-bind="item" />
+      </li>
+    </ul>
+    <ul class="card-gauges" style="margin-top: 20px;">
+      <li v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index">
+        <Gauge v-bind="item" />
+      </li>
+    </ul>
+  </block-box>
+
+  <div class="line-box">
+    <block-box title="资源分配趋势（%）">
+      <template #extra>
+        <time-picker v-model="times" type="datetimerange" size="small" />
+      </template>
+      <div style="height: 200px">
+        <echarts-plus :options="getRangeOptions({
+          cpu: gaugeConfig[7].data,
+          internal: gaugeConfig[8].data,
+          core: gaugeConfig[4].data,
+          memory: gaugeConfig[5].data,
+        })
+          " />
+      </div>
+    </block-box>
+    <block-box title="资源使用趋势（%）">
+      <template #extra>
+        <time-picker v-model="times" type="datetimerange" size="small" />
+      </template>
+      <div style="height: 200px">
+        <echarts-plus :options="getRangeOptions({
+          cpu: gaugeConfig[0].data,
+          internal: gaugeConfig[1].data,
+          core: gaugeConfig[6].data,
+          memory: gaugeConfig[3].data,
+        })
+          " />
+      </div>
+    </block-box>
+  </div>
+
+  <block-box title="显卡列表">
+    <CardList :hideTitle="true" :filters="data" />
+  </block-box>
+
+  <block-box title="任务列表">
+    <TaskList :hideTitle="true" :filters="data" />
+  </block-box>
+</template>
+
+<script setup lang="jsx">
+import BlockBox from '@/components/BlockBox.vue';
+import { ref, defineProps, watchEffect } from 'vue';
+import CardList from '~/vgpu/views/card/admin/index.vue';
+import TaskList from '~/vgpu/views/task/admin/index.vue';
+import Gauge from '~/vgpu/components/gauge.vue';
+import useInstantVector from '~/vgpu/hooks/useInstantVector';
+import EchartsPlus from '@/components/Echarts-plus.vue';
+import { getRangeOptions } from './getOptions';
+
+const props = defineProps(['data'])
+
+watchEffect(() => {
+  console.log(props.data, 'data2')
+})
+
+const end = new Date();
+const start = new Date();
+start.setTime(start.getTime() - 3600 * 1000);
+
+const times = ref([start, end]);
+
+const gaugeConfig = useInstantVector(
+  [
+    {
+      title: 'CPU 使用率',
+      percent: 0,
+      query: `count(node_cpu_seconds_total{mode="idle", instance=~"$node"}) by (instance)*(1 - avg(rate(node_cpu_seconds_total{mode="idle", instance=~"$node"}[5m])) by (instance))`,
+      totalQuery: `count(node_cpu_seconds_total{mode="idle", instance=~"$node"}) by (instance)`,
+      percentQuery: `100 * (1 - avg by(instance)(irate(node_cpu_seconds_total{mode="idle", instance=~"$node"}[1m])))`,
+      total: 0,
+      used: 0,
+      unit: '核',
+    },
+    {
+      title: '内存 使用率',
+      percent: 0,
+      query: `avg(node_memory_MemTotal_bytes{instance=~"$node"} - node_memory_MemAvailable_bytes{instance=~"$node"}) by (instance) / 1024 / 1024 / 1024`,
+      totalQuery: `avg(node_memory_MemTotal_bytes{instance=~"$node"}) by (instance) / 1024 / 1024 / 1024`,
+      percentQuery: `100 * (1 - node_memory_MemAvailable_bytes{instance=~"$node"} / node_memory_MemTotal_bytes{instance=~"$node"})`,
+      total: 0,
+      used: 0,
+      unit: 'GiB',
+    },
+    {
+      title: '磁盘 使用率',
+      percent: 0,
+      query: `sum(node_filesystem_size_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"} - node_filesystem_free_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"}) by (instance) / 1024 / 1024 / 1024`,
+      totalQuery: `sum(node_filesystem_size_bytes{instance=~"$node", fstype=~"ext4|xfs", mountpoint!~"/var/lib/kubelet/pods.*"}) by (instance) / 1024 / 1024 / 1024`,
+      percentQuery: ``,
+      total: 0,
+      used: 0,
+      unit: 'GiB',
+    },
+    {
+      title: '显存使用率',
+      percent: 0,
+      query: `avg(sum(hami_memory_used{node=~"$node"}) by (instance)) / 1024`,
+      totalQuery: `avg(sum(hami_memory_size{node=~"$node"}) by (instance))/1024`,
+      percentQuery: `(avg(sum(hami_memory_used{node=~"$node"}) by (instance)) / 1024)/(avg(sum(hami_memory_size{node=~"$node"}) by (instance))/1024)*100`,
+      total: 0,
+      used: 0,
+      unit: 'GiB',
+    },
+    {
+      title: '算力分配率',
+      percent: 0,
+      query: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance))`,
+      totalQuery: `avg(sum(hami_core_size{node=~"$node"}) by (instance))`,
+      percentQuery: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance)) / avg(sum(hami_core_size{node=~"$node"}) by (instance)) *100`,
+      total: 0,
+      used: 0,
+      unit: ' ',
+    },
+    {
+      title: '显存分配率',
+      percent: 0,
+      query: `avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance)) / 1024`,
+      totalQuery: `avg(sum(hami_memory_size{node=~"$node"}) by (instance)) / 1024`,
+      percentQuery: `(avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance)) / 1024) /(avg(sum(hami_memory_size{node=~"$node"}) by (instance)) / 1024) *100`,
+      total: 0,
+      used: 0,
+      unit: 'GiB',
+    },
+    {
+      title: '算力使用率',
+      percent: 0,
+      query: `avg(sum(hami_core_util{node=~"$node"}) by (instance))`,
+      percentQuery: `avg(sum(hami_core_util_avg{node=~"$node"}) by (instance))`,
+      totalQuery: `avg(sum(hami_core_size{node=~"$node"}) by (instance))`,
+      total: 100,
+      used: 0,
+      unit: ' ',
+    },
+    {
+      title: 'CPU 分配率',
+      percent: 0,
+      query: ``,
+      totalQuery: ``,
+      percentQuery: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance) / sum(hami_core_size{node=~"$node"}) by (instance) * 100)`,
+      total: 0,
+      used: 0,
+      unit: '核',
+    },
+    {
+      title: '内存 分配率',
+      percent: 0,
+      query: ``,
+      totalQuery: ``,
+      percentQuery: `avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance) / sum(hami_memory_size{node=~"$node"}) by (instance) * 100)`,
+      total: 0,
+      used: 0,
+      unit: 'GiB',
+    },
+  ],
+  (query) => query.replaceAll(`$node`, props?.data?.nodeName),
+  times,
+);
+</script>
+
+<style scoped lang="scss">
+.card-gauges {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  height: 200px;
+
+  li {
+    flex: 0.25;
+  }
+}
+
+.line-box {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 20px;
+}
+
+.node-block {
+  display: flex;
+  flex-direction: column;
+
+  .home-block-content {
+    flex: 1;
+  }
+}
+</style>

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

@@ -105,6 +105,7 @@ const columns = [
   {
     title: '实训名称',
     dataIndex: 'shixunName',
+    render: ({ shixunName }) => shixunName || '/',
   },
   {
     title: '使用者角色',
@@ -114,6 +115,7 @@ const columns = [
   {
     title: '用户名',
     dataIndex: 'role',
+    render: ({ role }) => role || '/',
   },
   {
     title: '所属资源池',