hami/packages/web/projects/vgpu/views/node/admin/Detail.vue

<template>
  <div>
    <back-header>
      节点管理 > {{ detail.name }}
      <!--      <template #extra>-->
      <!--        <el-form-item-->
      <!--          label="节点调度"-->
      <!--          style="margin-bottom: 0; margin-right: 20px"-->
      <!--        >-->
      <!--          <el-radio-group-->
      <!--            :disabled="detail.isExternal"-->
      <!--            v-model="tempSchedulable"-->
      <!--            size="small"-->
      <!--            @change="onChangeSchedulable"-->
      <!--          >-->
      <!--            <el-radio-button label="启用" :value="true" />-->
      <!--            <el-radio-button label="禁用" :value="false" />-->
      <!--          </el-radio-group>-->
      <!--        </el-form-item>-->
      <!--      </template>-->
    </back-header>

    <block-box class="node-block">
      <div class="node-detail">
        <div class="node-detail-left">
          <div class="title">详细信息</div>
          <ul class="node-detail-info">
            <li v-for="{ label, value, render } in detailColumns" :key="label">
              <span class="label">{{ label }}</span>
              <component v-if="render" :is="render(detail)" />
              <span v-else class="value">{{ detail[value] }}</span>
            </li>
          </ul>
        </div>


      </div>
    </block-box>

    <block-box>
      <ul class="card-gauges">
        <li v-for="(item, index) in gaugeConfig.slice(0, 4)" :key="index">
          <template v-if="!detail.isExternal || item.title.includes('使用率')">
            <Gauge v-bind="item" />
          </template>
          <template v-else-if="detail.isExternal && item.title.includes('分配率')">
            <el-empty description="暂无资源分配数据" :image-size="90" />
          </template>
        </li>
      </ul>
      <ul class="card-gauges" style="margin-top: 20px;">
        <li v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index">
          <template v-if="!detail.isExternal || item.title.includes('使用率')">
            <Gauge v-bind="item" />
          </template>
          <template v-else-if="detail.isExternal && item.title.includes('分配率')">
            <el-empty description="暂无资源分配数据" :image-size="90" />
          </template>
        </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="任务列表">
      <template v-if="detail.isExternal">
        <el-alert title="由于节点未纳管，无法获取到任务数据" show-icon type="warning" :closable="false" />
        <el-empty description="暂无任务数据" :image-size="100" />
      </template>
      <template v-else>
        <TaskList :hideTitle="true" :filters="{ nodeUid: detail.uid }" />
      </template>
    </block-box>
  </div>
</template>

<script setup lang="jsx">
import BackHeader from '@/components/BackHeader.vue';
import { useRoute, useRouter } from 'vue-router';
import BlockBox from '@/components/BlockBox.vue';
import { computed, onMounted, ref, watch } from 'vue';
import { Tools } from '@element-plus/icons-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 TimeSelect from '~/vgpu/components/timeSelect.vue';
import nodeApi from '~/vgpu/api/node';
import { getLineOptions } from '~/vgpu/views/monitor/overview/getOptions';
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '~/vgpu/api/task';
import { getRangeOptions } from './getOptions';
import { bytesToGB } from "@/utils";
import useParentAction from '~/vgpu/hooks/useParentAction';

const { sendRouteChange } = useParentAction();

const route = useRoute();

const detail = ref({});

const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000);

const times = ref([start, end]);

const isSchedulable = ref(true);
const tempSchedulable = ref(isSchedulable.value);

const cp = useInstantVector(
  [
    {
      label: 'vGPU 超配',
      count: '0',
      query: `avg(hami_vgpu_count{node=~"$node"})`,
    },
    {
      label: '算力超配',
      count: '0',
      query: `avg(hami_vcore_scaling{node=~"$node"})`,
    },
    {
      label: '显存超配',
      count: '1.5',
      query: `avg(hami_vmemory_scaling{node=~"$node"})`,
    },
  ],
  (query) => query.replaceAll('$node', detail.value.name),
);

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_core_used{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_memory_used{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,
);

const detailColumns = [
  {
    label: '节点状态',
    value: 'status',
    width: 100,
    render: ({ isSchedulable, isExternal }) => {
      if (detail.value && detail.value.isSchedulable !== undefined) {
        return (
          <el-tag disable-transitions type={isExternal ? 'warning' : (isSchedulable ? 'success' : 'danger')}>
            {isExternal ? '未纳管' : (isSchedulable ? '可调度' : '禁止调度')}
          </el-tag>
        );
      } else {
        return <el-tag disable-transitions size="small" type="info">加载中...</el-tag>;
      }
    },
  },
  {
    label: '节点 IP 地址',
    value: 'ip',
    render: ({ ip }) => <text-plus text={ip} copy />,
  },
  {
    label: '节点 UUID',
    value: 'uid',
    render: ({ uid }) => <text-plus text={uid} copy />,
  },
  {
    label: '操作系统类型',
    value: 'operatingSystem',
    render: ({ operatingSystem }) => (
      <span>
        {operatingSystem === '' ? '--' : operatingSystem}
      </span>
    ),
  },
  {
    label: '系统架构',
    value: 'architecture',
    render: ({ architecture }) => (
      <span>
        {architecture === '' ? '--' : architecture}
      </span>
    ),
  },
  {
    label: 'kubelet 版本',
    value: 'kubeletVersion',
    render: ({ kubeletVersion }) => (
      <span>
        {kubeletVersion === '' ? '--' : kubeletVersion}
      </span>
    ),
  },
  {
    label: '操作系统版本',
    value: 'osImage',
    render: ({ osImage }) => (
      <span>
        {osImage === '' ? '--' : osImage}
      </span>
    ),
  },
  {
    label: '内核版本',
    value: 'kernelVersion',
    render: ({ kernelVersion }) => (
      <span>
        {kernelVersion === '' ? '--' : kernelVersion}
      </span>
    ),
  },
  {
    label: 'kube-proxy 版本',
    value: 'kubeProxyVersion',
    render: ({ kubeProxyVersion }) => (
      <span>
        {kubeProxyVersion === '' ? '--' : kubeProxyVersion}
      </span>
    ),
  },
  {
    label: 'CPU大小',
    value: 'cpuCores',
    render: ({ cpuCores }) => (
      <span>
        {`${cpuCores}核`}
      </span>
    ),
  },
  {
    label: '内存大小',
    value: 'totalMemory',
    render: ({ totalMemory }) => (
      <span>
        {`${bytesToGB(totalMemory)}GiB`}
      </span>
    ),
  },
  {
    label: '磁盘大小',
    value: 'diskSize',
    render: ({ diskSize }) => (
      <span>
        {`${bytesToGB(diskSize)}GiB`}
      </span>
    ),
  },
  {
    label: '容器运行时',
    value: 'containerRuntimeVersion',
    render: ({ containerRuntimeVersion }) => (
      <span>
        {containerRuntimeVersion === '' ? '--' : containerRuntimeVersion}
      </span>
    ),
  },
  {
    label: '显卡数量',
    value: 'cardCnt',
    render: ({ cardCnt }) => (
      <span>
        {cardCnt === '' ? '--' : cardCnt}
      </span>
    ),
  },
  {
    label: '创建时间',
    value: 'creationTimestamp',
    render: ({ creationTimestamp }) => (
      <span>
        {creationTimestamp === '' ? '--' : creationTimestamp}
      </span>
    ),
  },
];

const onChangeSchedulable = (val) => {
  ElMessageBox.confirm(
    `确认对该节点进行${val ? '启用' : '禁用'}操作？`,
    '操作确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      try {
        await nodeApi
          .stop({
            nodeName: detail.value.name,
            switch: val ? 'off' : 'on',
          })
          .then(() => {
            setTimeout(() => {
              refresh();
              ElMessage.success(`${val ? '启用' : '禁用'}成功`);
            }, 500);
          });
      } catch (error) {
        ElMessage.error(error.message);
        tempSchedulable.value = isSchedulable.value;
      }
    })
    .catch(() => {
      tempSchedulable.value = isSchedulable.value;
    });
};

const refresh = async () => {
  detail.value = await nodeApi.getNodeDetail({ uid: route.params.uid });
  isSchedulable.value = detail.value.isSchedulable;
};

onMounted(async () => {
  await refresh();
});
</script>

<style lang="scss">
.node-detail {
  display: flex;
  height: 100%;
  //gap: 50px;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .title {
    color: #1d2b3a;
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    //line-height: 20px;
    margin-bottom: 20px;
  }

  //.node-detail-left {
  //  min-width: 800px;
  //}
  .node-detail-info {
    gap: 15px;
    font-size: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .label {
      display: inline-block;
      width: 100px;
      height: 20px;
      color: #939ea9;
    }

    .set {
      :hover {
        cursor: pointer;
        color: #324558;
      }
    }

    .cp {
      display: flex;
      gap: 25px;
    }
  }

  .gauges {
    flex: 1;
    display: flex;

    li {
      flex: 1;
    }
  }
}

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