pgpc5xf4t
/
hami
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

去掉算力功能

Browse Source
main
陈博文 4 days ago
parent c0ecc88331
commit bedb4ebe19
16 changed files with 343 additions and 328 deletions
Show Stats Download Patch File Download Diff File

18
packages/web/projects/vgpu/components/TabTop.vue
Unescape View File

@ -26,6 +26,7 @@ const props = defineProps({
key: String, key: String,
config: Array, config: Array,
onClick: Function, onClick: Function,
xName: String,
}); });
const currentConfig = ref(props.config); const currentConfig = ref(props.config);
const tabActive = ref(''); const tabActive = ref('');
@ -45,6 +46,7 @@ const getTopOptions = () => {
(item) => item.key === tabActive.value, (item) => item.key === tabActive.value,
); );
const data = cloneDeep(config?.data) || []; const data = cloneDeep(config?.data) || [];
const xName = props?.xName || (props?.title?.slice(4, 7) || '') + '（%）';
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -67,18 +69,26 @@ const getTopOptions = () => {
show: false, show: false,
}, },
grid: { grid: {
left: '3%', // left: '3%',
right: '4%', // right: '4%',
bottom: '3%', // bottom: '3%',
top: '0', // top: '0',
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
boundaryGap: [0, 0.01], boundaryGap: [0, 0.01],
name: xName, // 添加x轴名称
nameLocation: 'end', // 把名字放在轴的末端
nameTextStyle: {
verticalAlign: 'top', // 垂直方向靠上
align: 'right', // 水平方向靠右
padding: [30, 0, 0, 0] // 调整和轴的间距，30可根据需要调整
}
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
name: '节点',
data: data data: data
.reverse() .reverse()
.map((item) => .map((item) =>

28
packages/web/projects/vgpu/components/previewBar.vue
Unescape View File

@ -78,13 +78,13 @@ const totalTop = {
data: [], data: [],
query: `topk(5, sum(hami_container_vgpu_allocated{}) by (${props.type}) / sum(hami_vgpu_count{}) by (${props.type}) * 100)`, query: `topk(5, sum(hami_container_vgpu_allocated{}) by (${props.type}) / sum(hami_vgpu_count{}) by (${props.type}) * 100)`,
}, },
{ // {
tab: '算力', // tab: '算力',
key: 'core', // key: 'core',
nameKey: props.type, // nameKey: props.type,
data: [], // data: [],
query: `topk(5, sum(hami_container_vcore_allocated{}) by (${props.type}) / sum(hami_core_size{}) by (${props.type}) * 100)`, // query: `topk(5, sum(hami_container_vcore_allocated{}) by (${props.type}) / sum(hami_core_size{}) by (${props.type}) * 100)`,
}, // },
{ {
tab: '显存', tab: '显存',
key: 'memory', key: 'memory',
@ -112,13 +112,13 @@ const usedTop = {
data: [], data: [],
query: `topk(5, ((sum(node_memory_MemTotal_bytes) by (instance)) - sum(node_memory_MemAvailable_bytes) by (instance)) / sum(node_memory_MemTotal_bytes) by (instance) * 100)`, query: `topk(5, ((sum(node_memory_MemTotal_bytes) by (instance)) - sum(node_memory_MemAvailable_bytes) by (instance)) / sum(node_memory_MemTotal_bytes) by (instance) * 100)`,
}, },
{ // {
tab: '算力', // tab: '算力',
key: 'core', // key: 'core',
nameKey: props.type, // nameKey: props.type,
data: [], // data: [],
query: `topk(5, avg(hami_core_util_avg) by (${props.type}))`, // query: `topk(5, avg(hami_core_util_avg) by (${props.type}))`,
}, // },
{ {
tab: '显存', tab: '显存',
key: 'memory', key: 'memory',

98
packages/web/projects/vgpu/views/card/admin/Detail.vue
Unescape View File

@ -18,7 +18,7 @@
<block-box> <block-box>
<ul class="card-gauges"> <ul class="card-gauges">
<li v-for="(item, index) in gaugeConfig" :key="index"> <li v-for="(item, index) in gaugeConfig.slice(-3)" :key="index">
<template v-if="!detail.isExternal || index >= 2"> <template v-if="!detail.isExternal || index >= 2">
<Gauge v-bind="item" /> <Gauge v-bind="item" />
</template> </template>
@ -39,14 +39,11 @@
<time-picker v-model="times" type="datetimerange" size="small" /> <time-picker v-model="times" type="datetimerange" size="small" />
</template> </template>
<div style="height: 200px"> <div style="height: 200px">
<echarts-plus <echarts-plus :options="getRangeOptions({
:options=" core: gaugeConfig[0].data,
getRangeOptions({ memory: gaugeConfig[1].data,
core: gaugeConfig[0].data, })
memory: gaugeConfig[1].data, " />
})
"
/>
</div> </div>
</block-box> </block-box>
<block-box title="资源使用趋势（%）"> <block-box title="资源使用趋势（%）">
@ -54,14 +51,11 @@
<time-picker v-model="times" type="datetimerange" size="small" /> <time-picker v-model="times" type="datetimerange" size="small" />
</template> </template>
<div style="height: 200px"> <div style="height: 200px">
<echarts-plus <echarts-plus :options="getRangeOptions({
:options=" core: gaugeConfig[2].data,
getRangeOptions({ memory: gaugeConfig[3].data,
core: gaugeConfig[2].data, })
memory: gaugeConfig[3].data, " />
})
"
/>
</div> </div>
</block-box> </block-box>
@ -93,7 +87,7 @@ import { useRoute } from 'vue-router';
import BlockBox from '@/components/BlockBox.vue'; import BlockBox from '@/components/BlockBox.vue';
import { onMounted, ref, watch, defineProps } from 'vue'; import { onMounted, ref, watch, defineProps } from 'vue';
import TaskList from '~/vgpu/views/task/admin/index.vue'; import TaskList from '~/vgpu/views/task/admin/index.vue';
import {ElPopover} from 'element-plus'; import { ElPopover } from 'element-plus';
import Gauge from '~/vgpu/components/gauge.vue'; import Gauge from '~/vgpu/components/gauge.vue';
import useInstantVector from '~/vgpu/hooks/useInstantVector'; import useInstantVector from '~/vgpu/hooks/useInstantVector';
import { QuestionFilled } from '@element-plus/icons-vue'; import { QuestionFilled } from '@element-plus/icons-vue';
@ -134,36 +128,36 @@ const columns = [
const text = health ? '健康' : '硬件错误'; const text = health ? '健康' : '硬件错误';
const color = health ? '#2563eb' : '#EF4444'; const color = health ? '#2563eb' : '#EF4444';
return ( return (
<div <div
style={{ style={{
color, color,
position: 'relative', position: 'relative',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
gap: '5px', gap: '5px',
}}
>
<el-tag disable-transitions type={isExternal ? 'warning' : (health ? 'success' : 'danger')}>
{isExternal ? '未纳管' : (health ? '健康' : '硬件错误')}
</el-tag>
{!health && (
<ElPopover trigger="hover" popper-style={{ width: '190px' }}>
{{
reference: () => (
<el-icon color="#939EA9" size="14">
<QuestionFilled />
</el-icon>
),
default: () => (
<span style={{ marginLeft: '5px' }}>
请排查该 GPU 硬件问题
</span>
),
}} }}
> </ElPopover>
<el-tag disable-transitions type={isExternal ? 'warning' : (health ? 'success' : 'danger')}> )}
{isExternal ? '未纳管' : (health ? '健康' : '硬件错误')} </div>
</el-tag>
{!health && (
<ElPopover trigger="hover" popper-style={{ width: '190px' }}>
{{
reference: () => (
<el-icon color="#939EA9" size="14">
<QuestionFilled />
</el-icon>
),
default: () => (
<span style={{ marginLeft: '5px' }}>
请排查该 GPU 硬件问题
</span>
),
}}
</ElPopover>
)}
</div>
); );
} else { } else {
return <el-tag disable-transitions size="small" type="info">加载中...</el-tag>; return <el-tag disable-transitions size="small" type="info">加载中...</el-tag>;
@ -201,9 +195,9 @@ const columns = [
width: 120, width: 120,
value: 'mode', value: 'mode',
render: ({ mode, type }) => ( render: ({ mode, type }) => (
<el-tag disable-transitions> <el-tag disable-transitions>
{type?.split('-')[0] === "NVIDIA" ? mode : 'default'} {type?.split('-')[0] === "NVIDIA" ? mode : 'default'}
</el-tag> </el-tag>
) )
} }
]; ];
@ -362,9 +356,11 @@ watch(
//line-height: 20px; //line-height: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.card-detail-left { .card-detail-left {
min-width: 1050px; min-width: 1050px;
} }
.card-detail-info { .card-detail-info {
//display: flex; //display: flex;
//flex-direction: column; //flex-direction: column;
@ -393,6 +389,7 @@ watch(
list-style: none; list-style: none;
display: flex; display: flex;
height: 200px; height: 200px;
li { li {
flex: 1; flex: 1;
} }
@ -407,6 +404,7 @@ watch(
.node-block { .node-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.home-block-content { .home-block-content {
flex: 1; flex: 1;
} }

66
packages/web/projects/vgpu/views/card/admin/getOptions.js
Unescape View File

@ -55,39 +55,39 @@ export const getRangeOptions = ({ core = [], memory = [] }) => {
}, },
}, },
series: [ series: [
{ // {
name: '算力', // name: '算力',
data: core, // data: core,
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
normal: { // normal: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // 渐变起始点 0% // x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0% // y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100% // x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100% // y2: 1, // 渐变结束点 100%
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, // },
itemStyle: { // itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
lineStyle: { // lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
}, // },
{ {
name: '显存', name: '显存',
data: memory, data: memory,

20
packages/web/projects/vgpu/views/card/admin/index.vue
Unescape View File

@ -97,16 +97,16 @@ const columns = [
</span> </span>
), ),
}, },
{ // {
title: '算力(已分配/总量)', // title: '算力(已分配/总量)',
width: 120, // width: 120,
dataIndex: 'used', // dataIndex: 'used',
render: ({ coreTotal, coreUsed, isExternal }) => ( // render: ({ coreTotal, coreUsed, isExternal }) => (
<span> // <span>
{isExternal ? '--' : coreUsed}/{coreTotal} // {isExternal ? '--' : coreUsed}/{coreTotal}
</span> // </span>
), // ),
}, // },
{ {
title: '显存(已分配/总量)', title: '显存(已分配/总量)',
dataIndex: 'w', dataIndex: 'w',

134
packages/web/projects/vgpu/views/monitor/overview/config.js
Unescape View File

@ -36,40 +36,40 @@ export const rangeConfigInit = [
color: 'rgb(250, 200, 88)', color: 'rgb(250, 200, 88)',
}, },
}, },
{ // {
name: '算力', // name: '算力',
query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`, // query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`,
data: [], // data: [],
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
normal: { // normal: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // color: 'rgba(84, 112, 198, 0.16)',
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // color: 'rgba(84, 112, 198, 0.00)',
}, // },
], // ],
global: false, // global: false,
}, // },
}, // },
}, // },
itemStyle: { // itemStyle: {
color: 'rgb(84, 112, 198)', // color: 'rgb(84, 112, 198)',
}, // },
lineStyle: { // lineStyle: {
color: 'rgb(84, 112, 198)', // color: 'rgb(84, 112, 198)',
}, // },
}, // },
{ {
name: '显存', name: '显存',
query: `sum(hami_container_vmemory_allocated) / sum(hami_memory_size) * 100`, query: `sum(hami_container_vmemory_allocated) / sum(hami_memory_size) * 100`,
@ -177,39 +177,39 @@ export const rangeConfigInit = [
{ {
title: '资源使用趋势', title: '资源使用趋势',
dataSource: [ dataSource: [
{ // {
name: '算力', // name: '算力',
query: `avg(hami_core_util_avg)`, // query: `avg(hami_core_util_avg)`,
data: [], // data: [],
areaStyle: { // areaStyle: {
normal: { // normal: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // 渐变起始点 0% // x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0% // y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100% // x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100% // y2: 1, // 渐变结束点 100%
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, // },
itemStyle: { // itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
lineStyle: { // lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
}, // },
{ {
name: '显存', name: '显存',
query: `sum(hami_memory_used) / sum(hami_memory_size) * 100`, query: `sum(hami_memory_used) / sum(hami_memory_size) * 100`,

68
packages/web/projects/vgpu/views/monitor/overview/index.vue
Unescape View File

@ -8,14 +8,15 @@
</div> </div>
</template> --> </template> -->
<div class="card-overview"> <div class="card-overview">
<div v-for="item in cardGaugeConfig.slice(0, 5)" :key="item.title"> <template v-for="(item, index) in cardGaugeConfig.slice(0, 5)" :key="item.title">
<Gauge v-bind="item" /> <Gauge v-if="index !== 4" v-bind="item" />
</div> </template>
</div> </div>
<div class="card-overview"> <div class="card-overview">
<div v-for="item in cardGaugeConfig.slice(-3)" :key="item.title"> <template v-for="(item, index) in cardGaugeConfig.slice(-3)" :key="item.title">
<Gauge v-bind="item" /> <Gauge v-if="index !== 1" v-bind="item" />
</div> </template>
</div> </div>
</Block> </Block>
<Block title="资源总览"> <Block title="资源总览">
@ -25,20 +26,19 @@
</div> </div>
</template> --> </template> -->
<ul class="resourceOverview"> <ul class="resourceOverview">
<li v-for="{ title, count, icon, to, unit } in resourceOverview" :key="title" <template v-for="({ title, count, icon, to, unit }, index) in resourceOverview" :key="title">
:style="{ cursor: to ? 'pointer' : 'default' }" @click="sendRouteChange(to)"> <li v-if="index !== 7" :style="{ cursor: to ? 'pointer' : 'default' }" @click="sendRouteChange(to)">
<div class="avatar"> <div class="avatar">
<svg-icon :icon="icon" /> <svg-icon :icon="icon" />
</div>
<div class="main">
<div>
{{ title }}
</div> </div>
<div class="count"> <div class="main">
{{ count }} <span style="font-size: 12px">{{ unit }}</span> <div>{{ title }}</div>
<div class="count">
{{ count }} <span style="font-size: 12px">{{ unit }}</span>
</div>
</div> </div>
</div> </li>
</li> </template>
</ul> </ul>
</Block> </Block>
@ -393,13 +393,13 @@ const nodeUsedTop = {
// data: [], // data: [],
// query: 'topk(5, ((node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes) / node_memory_MemTotal_bytes))', // query: 'topk(5, ((node_memory_MemTotal_bytes - node_memory_MemAvailable_bytes) / node_memory_MemTotal_bytes))',
// }, // },
{ // {
tab: '算力', // tab: '算力',
key: 'core', // key: 'core',
nameKey: 'node', // nameKey: 'node',
data: [], // data: [],
query: 'topk(5, avg(hami_core_util_avg) by (node))', // query: 'topk(5, avg(hami_core_util_avg) by (node))',
}, // },
{ {
tab: '显存', tab: '显存',
key: 'memory', key: 'memory',
@ -436,14 +436,14 @@ const nodeTotalTop = {
data: [], data: [],
query: `topk(5, avg(hami_container_vgpu_allocated{}) by (node) / avg(hami_vgpu_count{}) by (node) * 100)`, query: `topk(5, avg(hami_container_vgpu_allocated{}) by (node) / avg(hami_vgpu_count{}) by (node) * 100)`,
}, },
{ // {
tab: '算力', // tab: '算力',
key: 'core', // key: 'core',
nameKey: 'node', // nameKey: 'node',
data: [], // data: [],
query: // query:
'topk(5, avg(hami_container_vcore_allocated{}) by (node) / avg(hami_core_size{}) by (node) * 100)', // 'topk(5, avg(hami_container_vcore_allocated{}) by (node) / avg(hami_core_size{}) by (node) * 100)',
}, // },
{ {
tab: '显存', tab: '显存',
key: 'memory', key: 'memory',
@ -562,7 +562,7 @@ watch(
padding-bottom: 10px; padding-bottom: 10px;
height: 190px; height: 190px;
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(4, 1fr);
.gauge-info { .gauge-info {
margin-top: 10px; margin-top: 10px;

18
packages/web/projects/vgpu/views/node/admin/Detail.vue
Unescape View File

@ -49,14 +49,16 @@
</li> </li>
</ul> </ul>
<ul class="card-gauges" style="margin-top: 20px;"> <ul class="card-gauges" style="margin-top: 20px;">
<li v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index"> <template v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index">
<template v-if="!detail.isExternal || item.title.includes('使用率')"> <li v-if="index === 1"> <!-- 只显示 index=1 的元素 -->
<Gauge v-bind="item" /> <template v-if="!detail.isExternal || item.title.includes('使用率')">
</template> <Gauge v-bind="item" />
<template v-else-if="detail.isExternal && item.title.includes('分配率')"> </template>
<el-empty description="暂无资源分配数据" :image-size="90" /> <template v-else-if="detail.isExternal && item.title.includes('分配率')">
</template> <el-empty description="暂无资源分配数据" :image-size="90" />
</li> </template>
</li>
</template>
</ul> </ul>
</block-box> </block-box>

66
packages/web/projects/vgpu/views/node/admin/getOptions.js
Unescape View File

@ -61,39 +61,39 @@ export const getRangeOptions = ({
}, },
}, },
series: [ series: [
{ // {
name: '算力', // name: '算力',
data: core, // data: core,
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
normal: { // normal: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // 渐变起始点 0% // x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0% // y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100% // x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100% // y2: 1, // 渐变结束点 100%
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, // },
itemStyle: { // itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
lineStyle: { // lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
}, // },
{ {
name: '显存', name: '显存',
data: memory, data: memory,

20
packages/web/projects/vgpu/views/node/admin/index.vue
Unescape View File

@ -191,16 +191,16 @@ const columns = [
</span> </span>
), ),
}, },
{ // {
title: '算力(已分配/总量)', // title: '算力(已分配/总量)',
width: 120, // width: 120,
dataIndex: 'used', // dataIndex: 'used',
render: ({ coreTotal, coreUsed, isExternal }) => ( // render: ({ coreTotal, coreUsed, isExternal }) => (
<span> // <span>
{isExternal ? '--' : coreUsed}/{coreTotal} // {isExternal ? '--' : coreUsed}/{coreTotal}
</span> // </span>
), // ),
}, // },
{ {
title: '显存(已分配/总量)', title: '显存(已分配/总量)',
dataIndex: 'w', dataIndex: 'w',

20
packages/web/projects/vgpu/views/poll/admin/Detail.vue
Unescape View File

@ -104,16 +104,16 @@ const columns = [
</span> </span>
), ),
}, },
{ // {
title: '算力(已分配/总量)', // title: '算力(已分配/总量)',
width: 120, // width: 120,
dataIndex: 'used', // dataIndex: 'used',
render: ({ coreTotal, coreUsed, isExternal }) => ( // render: ({ coreTotal, coreUsed, isExternal }) => (
<span> // <span>
{isExternal ? '--' : coreUsed}/{coreTotal} // {isExternal ? '--' : coreUsed}/{coreTotal}
</span> // </span>
), // ),
}, // },
{ {
title: '显存(已分配/总量)', title: '显存(已分配/总量)',
dataIndex: 'w', dataIndex: 'w',

8
packages/web/projects/vgpu/views/poll/admin/DetailBox.vue
Unescape View File

@ -7,9 +7,11 @@
</li> </li>
</ul> </ul>
<ul class="card-gauges" style="margin-top: 20px;"> <ul class="card-gauges" style="margin-top: 20px;">
<li v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index"> <template v-for="(item, index) in gaugeConfig.slice(4, 7)" :key="index">
<Gauge v-bind="item" /> <li v-if="index === 1"> <!-- 只显示 index=1 -->
</li> <Gauge v-bind="item" />
</li>
</template>
</ul> </ul>
</block-box> </block-box>

66
packages/web/projects/vgpu/views/poll/admin/getOptions.js
Unescape View File

@ -61,39 +61,39 @@ export const getRangeOptions = ({
}, },
}, },
series: [ series: [
{ // {
name: '算力', // name: '算力',
data: core, // data: core,
type: 'line', // type: 'line',
areaStyle: { // areaStyle: {
normal: { // normal: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // 渐变起始点 0% // x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0% // y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100% // x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100% // y2: 1, // 渐变结束点 100%
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色 // color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色 // color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, // },
itemStyle: { // itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
lineStyle: { // lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色 // color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
}, // },
}, // },
{ {
name: '显存', name: '显存',
data: memory, data: memory,

13
packages/web/projects/vgpu/views/task/admin/Detail.vue
Unescape View File

@ -34,7 +34,7 @@
</ul> </ul>
</div> </div>
<div class="right"> <div class="right">
<div v-for="item in gaugeConfig" :key="item.title"> <div v-for="item in gaugeConfig.slice(-1)" :key="item.title">
<Gauge v-bind="item" /> <Gauge v-bind="item" />
</div> </div>
</div> </div>
@ -42,7 +42,8 @@
</block-box> </block-box>
<template v-for="({ title, data }, index) in lineConfig"> <template v-for="({ title, data }, index) in lineConfig">
<block-box v-if="detail.deviceIds?.length || [2, 3].includes(index)" :key="title + index" :title="title"> <block-box v-if="detail.deviceIds?.length ? [1, 2, 3].includes(index) : [2, 3].includes(index)" :key="title + index"
:title="title">
<template #extra v-if="detail.type && detail.type.startsWith('NVIDIA')"> <template #extra v-if="detail.type && detail.type.startsWith('NVIDIA')">
<time-picker v-model="times" type="datetimerange" size="small" /> <time-picker v-model="times" type="datetimerange" size="small" />
</template> </template>
@ -177,10 +178,10 @@ const columns = [
render: ({ requestedMemory }) => <span>{bytesToGB(requestedMemory)} GiB</span>, render: ({ requestedMemory }) => <span>{bytesToGB(requestedMemory)} GiB</span>,
}, },
{ // {
label: '分配算力', // label: '分配算力',
value: 'allocatedCores', // value: 'allocatedCores',
}, // },
{ {
label: '分配显存', label: '分配显存',
value: 'allocatedMem', value: 'allocatedMem',

10
packages/web/projects/vgpu/views/task/admin/index.vue
Unescape View File

@ -170,11 +170,11 @@ const columns = [
); );
}, },
}, },
{ // {
title: '分配算力', // title: '分配算力',
dataIndex: 'allocatedCores', // dataIndex: 'allocatedCores',
render: ({ allocatedCores }) => `${allocatedCores} `, // render: ({ allocatedCores }) => `${allocatedCores} `,
}, // },
{ {
title: '分配显存', title: '分配显存',
dataIndex: 'allocatedMem', dataIndex: 'allocatedMem',

18
packages/web/projects/vgpu/views/task/admin/top.vue
Unescape View File

@ -38,6 +38,7 @@ const topConfig = [
{ {
title: '任务数量分布 Top5', title: '任务数量分布 Top5',
key: 'total', key: 'total',
xName: '任务数',
config: [ config: [
{ {
tab: '节点', tab: '节点',
@ -62,6 +63,7 @@ const topConfig = [
{ {
title: '任务资源申请 Top5', title: '任务资源申请 Top5',
key: 'apply', key: 'apply',
xName: '资源',
config: [ config: [
// { // {
// tab: 'CPU', // tab: 'CPU',
@ -79,14 +81,14 @@ const topConfig = [
// nameKey: 'container_pod_uuid', // nameKey: 'container_pod_uuid',
// query: 'topk(5, sum by(container_pod_uuid) (hami_container_vmemory_allocated))', // query: 'topk(5, sum by(container_pod_uuid) (hami_container_vmemory_allocated))',
// }, // },
{ // {
tab: '算力', // tab: '算力',
key: 'core', // key: 'core',
data: [], // data: [],
nameKey: 'container_pod_uuid', // nameKey: 'container_pod_uuid',
unit: ' ', // unit: ' ',
query: 'topk(5, avg by (container_pod_uuid) (hami_container_vcore_allocated))', // query: 'topk(5, avg by (container_pod_uuid) (hami_container_vcore_allocated))',
}, // },
{ {
tab: '显存', tab: '显存',
key: 'memory', key: 'memory',

Write Preview
Loading…
Cancel
Save