diff --git a/packages/web/package.json b/packages/web/package.json index ba80ebc..80894bd 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -26,7 +26,7 @@ "core-js": "^3.8.3", "crypto-browserify": "^3.12.0", "echarts": "5.4.3", - "element-plus": "^2.4.1", + "element-plus": "2.10.4", "generate-avatar": "1.4.10", "js-cookie": "3.0.5", "lodash": "^4.17.21", diff --git a/packages/web/projects/vgpu/components/TabTop.vue b/packages/web/projects/vgpu/components/TabTop.vue index f12ea06..2f8317f 100644 --- a/packages/web/projects/vgpu/components/TabTop.vue +++ b/packages/web/projects/vgpu/components/TabTop.vue @@ -2,23 +2,14 @@ - + @@ -28,6 +19,7 @@ import { onMounted, ref } from 'vue'; import EchartsPlus from '@/components/Echarts-plus.vue'; import cardApi from '~/vgpu/api/card'; import { cloneDeep } from 'lodash'; +import { formatSmartPercentage } from '@/utils'; const props = defineProps({ title: String, @@ -65,7 +57,7 @@ const getTopOptions = () => { res += params[i].marker + params[i].seriesName + - (+params[i].value).toFixed(0) + + formatSmartPercentage(params[i].value) + `${config.unit || '%'}
`; } return res; @@ -111,7 +103,6 @@ onMounted(async () => { query: v.query, }) .then((res) => { - console.log(v.query, res, 'res') currentConfig.value[i].data = res.data.map((item) => ({ name: item.metric[v.nameKey], value: item.value, diff --git a/packages/web/projects/vgpu/components/config.js b/packages/web/projects/vgpu/components/config.js index 6da7771..f71ba76 100644 --- a/packages/web/projects/vgpu/components/config.js +++ b/packages/web/projects/vgpu/components/config.js @@ -1,4 +1,4 @@ -import { timeParse } from '@/utils'; +import { timeParse, formatSmartPercentage } from '@/utils'; export default ({ percent, title, unit = '%' }) => { const value = percent.toFixed(1); @@ -232,7 +232,7 @@ export const getLineOptions = ({ data = [], unit = '%' }) => { var res = params[0].name + '
'; for (var i = 0; i < params.length; i++) { res += - params[i].marker + (+params[i].value).toFixed(0) + ` ${unit}
`; + params[i].marker + formatSmartPercentage(params[i].value) + ` ${unit}
`; } return res; }, @@ -240,7 +240,7 @@ export const getLineOptions = ({ data = [], unit = '%' }) => { grid: { top: 7, // 上边距 bottom: 20, // 下边距 - left: '7%', // 左边距 + left: '10%', // 左边距 right: 10, // 右边距 }, xAxis: { @@ -258,7 +258,7 @@ export const getLineOptions = ({ data = [], unit = '%' }) => { series: [ { data: data.map((item) => { - return item.value.toFixed(1); + return item.value; }), type: 'line', areaStyle: { diff --git a/packages/web/projects/vgpu/views/card/admin/Detail.vue b/packages/web/projects/vgpu/views/card/admin/Detail.vue index 1f9ee21..3bb9877 100644 --- a/packages/web/projects/vgpu/views/card/admin/Detail.vue +++ b/packages/web/projects/vgpu/views/card/admin/Detail.vue @@ -198,6 +198,7 @@ const columns = [ }, { label: '使用模式', + width: 120, value: 'mode', render: ({ mode, type }) => ( @@ -207,26 +208,26 @@ const columns = [ } ]; -const cp = useInstantVector( - [ - { - label: 'vGPU超配', - count: '0', - query: `avg(sum(hami_vgpu_count{node=~"$node"}) by (instance))`, - }, - { - label: '算力超配', - count: '0', - query: `avg(sum(hami_vcore_scaling{node=~"$node"}) by (instance))`, - }, - { - label: '显存超配', - count: '1.5', - query: `avg(sum(hami_vmemory_scaling{node=~"$node"}) by (instance))`, - }, - ], - (query) => query.replaceAll('$node', props.detail.name), -); +// const cp = useInstantVector( +// [ +// { +// label: 'vGPU超配', +// count: '0', +// query: `avg(sum(hami_vgpu_count{node=~"$node"}) by (instance))`, +// }, +// { +// label: '算力超配', +// count: '0', +// query: `avg(sum(hami_vcore_scaling{node=~"$node"}) by (instance))`, +// }, +// { +// label: '显存超配', +// count: '1.5', +// query: `avg(sum(hami_vmemory_scaling{node=~"$node"}) by (instance))`, +// }, +// ], +// (query) => query.replaceAll('$node', props.detail.name), +// ); const gaugeConfig = useInstantVector( [ diff --git a/packages/web/projects/vgpu/views/card/admin/getOptions.js b/packages/web/projects/vgpu/views/card/admin/getOptions.js index 3044839..e8551ce 100644 --- a/packages/web/projects/vgpu/views/card/admin/getOptions.js +++ b/packages/web/projects/vgpu/views/card/admin/getOptions.js @@ -1,4 +1,4 @@ -import { timeParse } from '@/utils'; +import { timeParse, formatSmartPercentage } from '@/utils'; export const getRangeOptions = ({ core = [], memory = [] }) => { return { @@ -17,7 +17,7 @@ export const getRangeOptions = ({ core = [], memory = [] }) => { params[i].marker + params[i].seriesName + ' : ' + - (+params[i].value).toFixed(0) + + formatSmartPercentage(params[i].value) + `%
`; } @@ -27,7 +27,7 @@ export const getRangeOptions = ({ core = [], memory = [] }) => { grid: { top: 37, // 上边距 bottom: 20, // 下边距 - left: '7%', // 左边距 + left: '10%', // 左边距 right: 10, // 右边距 }, xAxis: { diff --git a/packages/web/projects/vgpu/views/card/admin/index.vue b/packages/web/projects/vgpu/views/card/admin/index.vue index 7d09183..3536425 100644 --- a/packages/web/projects/vgpu/views/card/admin/index.vue +++ b/packages/web/projects/vgpu/views/card/admin/index.vue @@ -66,6 +66,7 @@ const columns = [ }, { title: '使用模式', + width: 120, dataIndex: 'mode', render: ({ mode, type }) => ( @@ -79,6 +80,7 @@ const columns = [ }, { title: '所属资源池', + width: 100, dataIndex: 'resourcePools', render: ({ resourcePools }) => `${resourcePools.join('、')}`, }, @@ -97,6 +99,7 @@ const columns = [ }, { title: '算力(已分配/总量)', + width: 120, dataIndex: 'used', render: ({ coreTotal, coreUsed, isExternal }) => ( @@ -107,6 +110,7 @@ const columns = [ { title: '显存(已分配/总量)', dataIndex: 'w', + width: 120, render: ({ memoryTotal, memoryUsed, isExternal }) => ( {isExternal ? '--' : roundToDecimal(memoryUsed / 1024, 1)}/ diff --git a/packages/web/projects/vgpu/views/monitor/overview/config.js b/packages/web/projects/vgpu/views/monitor/overview/config.js index 6d292b7..21ecca6 100644 --- a/packages/web/projects/vgpu/views/monitor/overview/config.js +++ b/packages/web/projects/vgpu/views/monitor/overview/config.js @@ -106,7 +106,7 @@ export const rangeConfigInit = [ }, { name: 'CPU', - query: `sum(hami_container_vcore_allocated) / sum(hami_core_size) * 100`, + query: `sum(hami_core_used) / sum(hami_core_size) * 100`, data: [], type: 'line', areaStyle: { @@ -140,7 +140,7 @@ export const rangeConfigInit = [ }, { name: '内存', - query: `sum(hami_container_vmemory_allocated) / sum(hami_memory_size) * 100`, + query: `sum(hami_memory_used) / sum(hami_memory_size) * 100`, data: [], type: 'line', areaStyle: { diff --git a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js index 99289ac..b4f4600 100644 --- a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js +++ b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js @@ -1,4 +1,4 @@ -import { timeParse } from '@/utils'; +import { timeParse, formatSmartPercentage } from '@/utils'; import { cloneDeep } from 'lodash'; import nodeApi from '~/vgpu/api/node'; import { ElMessage } from 'element-plus'; @@ -323,16 +323,16 @@ export const getCardOptions = (list, chartWidth) => { rich: { cnt: { fontSize: 10, - color: '#999' - } - } + color: '#999', + }, + }, }, labelLayout: function (params) { const isLeft = params.labelRect.x < chartWidth / 2; const points = params.labelLinePoints; points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; return { labelLinePoints: points, }; @@ -343,7 +343,6 @@ export const getCardOptions = (list, chartWidth) => { })), }, ], - }; }; @@ -385,7 +384,7 @@ export const getLineOptions = ({ grid: { top: 37, // 上边距 bottom: 20, // 下边距 - left: '7%', // 左边距 + left: '10%', // 左边距 right: 10, // 右边距 }, xAxis: { @@ -496,7 +495,7 @@ export const getRangeOptions = (data) => { params[i].marker + params[i].seriesName + ' : ' + - (+params[i].value).toFixed(0) + + formatSmartPercentage(params[i].value) + `%
`; } @@ -506,7 +505,7 @@ export const getRangeOptions = (data) => { grid: { top: 37, // 上边距 bottom: 20, // 下边距 - left: '7%', // 左边距 + left: '10%', // 左边距 right: 10, // 右边距 }, xAxis: { diff --git a/packages/web/projects/vgpu/views/monitor/overview/index.vue b/packages/web/projects/vgpu/views/monitor/overview/index.vue index e41d2ea..dc89dcc 100644 --- a/packages/web/projects/vgpu/views/monitor/overview/index.vue +++ b/packages/web/projects/vgpu/views/monitor/overview/index.vue @@ -44,7 +44,7 @@ @@ -481,14 +481,14 @@ const fetchRangeData = () => { } - cardApi - .getRangeVector({ - ...params, - query: `sum({__name__=~"alert:.*:count"})`, - }) - .then((res) => { - alarmData.value = res.data[0].values; - }); + // cardApi + // .getRangeVector({ + // ...params, + // query: `sum({__name__=~"alert:.*:count"})`, + // }) + // .then((res) => { + // alarmData.value = res.data[0].values; + // }); }; diff --git a/packages/web/projects/vgpu/views/monitor/overview/style.scss b/packages/web/projects/vgpu/views/monitor/overview/style.scss index 8c01b3a..509c002 100644 --- a/packages/web/projects/vgpu/views/monitor/overview/style.scss +++ b/packages/web/projects/vgpu/views/monitor/overview/style.scss @@ -92,21 +92,22 @@ grid-template-columns: repeat(5, 1fr); gap: 12px; li { - height: 80px; + // height: 80px; flex-shrink: 0; border-radius: 6px; background: #f5f7fa; - padding: 16px; + padding: 14px; display: flex; + align-items: center; //&:hover { // color: var(--el-color-primary); // cursor: pointer; //} .avatar { display: flex; - width: 48px; - height: 48px; - padding: 14px; + width: 30px; + height: 30px; + padding: 6px; justify-content: center; align-items: center; flex-shrink: 0; @@ -117,16 +118,16 @@ rgba(255, 255, 255, 0) 0%, #fff 100% ); - margin-right: 16px; + margin-right: 8px; } .count { font-family: Roboto; - font-size: 20px; + font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ - margin-top: 10px; + margin-top: 8px; } } } diff --git a/packages/web/projects/vgpu/views/node/admin/Detail.vue b/packages/web/projects/vgpu/views/node/admin/Detail.vue index 6a617cd..46ef0a9 100644 --- a/packages/web/projects/vgpu/views/node/admin/Detail.vue +++ b/packages/web/projects/vgpu/views/node/admin/Detail.vue @@ -240,7 +240,7 @@ const gaugeConfig = useInstantVector( percent: 0, query: ``, totalQuery: ``, - percentQuery: `avg(sum(hami_container_vcore_allocated{node=~"$node"}) by (instance) / sum(hami_core_size{node=~"$node"}) by (instance) * 100)`, + percentQuery: `avg(sum(hami_core_used{node=~"$node"}) by (instance) / sum(hami_core_size{node=~"$node"}) by (instance) * 100)`, total: 0, used: 0, unit: '核', @@ -250,7 +250,7 @@ const gaugeConfig = useInstantVector( percent: 0, query: ``, totalQuery: ``, - percentQuery: `avg(sum(hami_container_vmemory_allocated{node=~"$node"}) by (instance) / sum(hami_memory_size{node=~"$node"}) by (instance) * 100)`, + 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', @@ -264,6 +264,7 @@ const detailColumns = [ { label: '节点状态', value: 'status', + width: 100, render: ({ isSchedulable, isExternal }) => { if (detail.value && detail.value.isSchedulable !== undefined) { return ( diff --git a/packages/web/projects/vgpu/views/node/admin/getOptions.js b/packages/web/projects/vgpu/views/node/admin/getOptions.js index 50ff8ce..2ad1375 100644 --- a/packages/web/projects/vgpu/views/node/admin/getOptions.js +++ b/packages/web/projects/vgpu/views/node/admin/getOptions.js @@ -1,4 +1,8 @@ -import { timeParse } from '@/utils'; +import { + timeParse, + formatSmartPercentage, + getFirstNonEmptyArray, +} from '@/utils'; export const getRangeOptions = ({ core = [], @@ -6,6 +10,8 @@ export const getRangeOptions = ({ cpu = [], internal = [], }) => { + const xData = getFirstNonEmptyArray([core, memory, cpu, internal]); + return { legend: { // data: [], @@ -22,7 +28,8 @@ export const getRangeOptions = ({ params[i].marker + params[i].seriesName + ' : ' + - (+params[i].value).toFixed(0) + + // (+params[i].value).toFixed(0) + + formatSmartPercentage(params[i].value) + `%
`; } @@ -32,12 +39,12 @@ export const getRangeOptions = ({ grid: { top: 37, // 上边距 bottom: 20, // 下边距 - left: '7%', // 左边距 + left: '10%', // 左边距 right: 10, // 右边距 }, xAxis: { type: 'category', - data: core.map((item) => timeParse(+item.timestamp)), + data: xData.map((item) => timeParse(+item.timestamp)), axisLabel: { formatter: function (value) { return timeParse(value, 'HH:mm'); diff --git a/packages/web/projects/vgpu/views/node/admin/index.vue b/packages/web/projects/vgpu/views/node/admin/index.vue index 5992769..9944e0d 100644 --- a/packages/web/projects/vgpu/views/node/admin/index.vue +++ b/packages/web/projects/vgpu/views/node/admin/index.vue @@ -25,7 +25,7 @@ -