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

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

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

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

@ -18,7 +18,7 @@
<block-box>
<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">
<Gauge v-bind="item" />
</template>
@ -39,14 +39,11 @@
<time-picker v-model="times" type="datetimerange" size="small" />
</template>
<div style="height: 200px">
<echarts-plus
:options="
getRangeOptions({
<echarts-plus :options="getRangeOptions({
core: gaugeConfig[0].data,
memory: gaugeConfig[1].data,
})
"
/>
" />
</div>
</block-box>
<block-box title="资源使用趋势（%）">
@ -54,14 +51,11 @@
<time-picker v-model="times" type="datetimerange" size="small" />
</template>
<div style="height: 200px">
<echarts-plus
:options="
getRangeOptions({
<echarts-plus :options="getRangeOptions({
core: gaugeConfig[2].data,
memory: gaugeConfig[3].data,
})
"
/>
" />
</div>
</block-box>
@ -362,9 +356,11 @@ watch(
//line-height: 20px;
margin-bottom: 20px;
}
.card-detail-left {
min-width: 1050px;
}
.card-detail-info {
//display: flex;
//flex-direction: column;
@ -393,6 +389,7 @@ watch(
list-style: none;
display: flex;
height: 200px;
li {
flex: 1;
}
@ -407,6 +404,7 @@ watch(
.node-block {
display: flex;
flex-direction: column;
.home-block-content {
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: [
{
name: '算力',
data: core,
type: 'line',
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100%
colorStops: [
{
offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
},
{
offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
},
],
global: false, // 缺省为 false
},
},
},
itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
},
lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
},
},
// {
// name: '算力',
// data: core,
// type: 'line',
// areaStyle: {
// normal: {
// color: {
// type: 'linear',
// x: 0, // 渐变起始点 0%
// y: 0, // 渐变起始点 0%
// x2: 0, // 渐变结束点 100%
// y2: 1, // 渐变结束点 100%
// colorStops: [
// {
// offset: 0,
// color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
// },
// {
// offset: 1,
// color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
// },
// itemStyle: {
// color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
// },
// lineStyle: {
// color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
// },
// },
{
name: '显存',
data: memory,

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

@ -97,16 +97,16 @@ const columns = [
</span>
),
},
{
title: '算力(已分配/总量)',
width: 120,
dataIndex: 'used',
render: ({ coreTotal, coreUsed, isExternal }) => (
<span>
{isExternal ? '--' : coreUsed}/{coreTotal}
</span>
),
},
// {
// title: '算力(已分配/总量)',
// width: 120,
// dataIndex: 'used',
// render: ({ coreTotal, coreUsed, isExternal }) => (
// <span>
// {isExternal ? '--' : coreUsed}/{coreTotal}
// </span>
// ),
// },
{
title: '显存(已分配/总量)',
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)',
},
},
{
name: '算力',
query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`,
data: [],
type: 'line',
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(84, 112, 198, 0.16)',
},
{
offset: 1,
color: 'rgba(84, 112, 198, 0.00)',
},
],
global: false,
},
},
},
itemStyle: {
color: 'rgb(84, 112, 198)',
},
lineStyle: {
color: 'rgb(84, 112, 198)',
},
},
// {
// name: '算力',
// query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`,
// data: [],
// type: 'line',
// areaStyle: {
// normal: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: 'rgba(84, 112, 198, 0.16)',
// },
// {
// offset: 1,
// color: 'rgba(84, 112, 198, 0.00)',
// },
// ],
// global: false,
// },
// },
// },
// itemStyle: {
// color: 'rgb(84, 112, 198)',
// },
// lineStyle: {
// color: 'rgb(84, 112, 198)',
// },
// },
{
name: '显存',
query: `sum(hami_container_vmemory_allocated) / sum(hami_memory_size) * 100`,
@ -177,39 +177,39 @@ export const rangeConfigInit = [
{
title: '资源使用趋势',
dataSource: [
{
name: '算力',
query: `avg(hami_core_util_avg)`,
data: [],
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0, // 渐变起始点 0%
y: 0, // 渐变起始点 0%
x2: 0, // 渐变结束点 100%
y2: 1, // 渐变结束点 100%
colorStops: [
{
offset: 0,
color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
},
{
offset: 1,
color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
},
],
global: false, // 缺省为 false
},
},
},
itemStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
},
lineStyle: {
color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
},
},
// {
// name: '算力',
// query: `avg(hami_core_util_avg)`,
// data: [],
// areaStyle: {
// normal: {
// color: {
// type: 'linear',
// x: 0, // 渐变起始点 0%
// y: 0, // 渐变起始点 0%
// x2: 0, // 渐变结束点 100%
// y2: 1, // 渐变结束点 100%
// colorStops: [
// {
// offset: 0,
// color: 'rgba(84, 112, 198, 0.16)', // 渐变起始颜色
// },
// {
// offset: 1,
// color: 'rgba(84, 112, 198, 0.00)', // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
// },
// itemStyle: {
// color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
// },
// lineStyle: {
// color: 'rgb(84, 112, 198)', // 设置线条颜色为橙色
// },
// },
{
name: '显存',
query: `sum(hami_memory_used) / sum(hami_memory_size) * 100`,

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

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

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

@ -49,7 +49,8 @@
</li>
</ul>
<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">
<li v-if="index === 1"> <!-- 只显示 index=1 的元素 -->
<template v-if="!detail.isExternal || item.title.includes('使用率')">
<Gauge v-bind="item" />
</template>
@ -57,6 +58,7 @@
<el-empty description="暂无资源分配数据" :image-size="90" />
</template>
</li>
</template>
</ul>
</block-box>

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

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

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

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

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

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

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

@ -7,9 +7,11 @@
</li>
</ul>
<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">
<li v-if="index === 1"> <!-- 只显示 index=1 -->
<Gauge v-bind="item" />
</li>
</template>
</ul>
</block-box>

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

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

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

@ -34,7 +34,7 @@
</ul>
</div>
<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" />
</div>
</div>
@ -42,7 +42,8 @@
</block-box>
<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')">
<time-picker v-model="times" type="datetimerange" size="small" />
</template>
@ -177,10 +178,10 @@ const columns = [
render: ({ requestedMemory }) => <span>{bytesToGB(requestedMemory)} GiB</span>,
},
{
label: '分配算力',
value: 'allocatedCores',
},
// {
// label: '分配算力',
// value: 'allocatedCores',
// },
{
label: '分配显存',
value: 'allocatedMem',

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

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

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

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

Write Preview
Loading…
Cancel
Save