Skip to content

Commit 31b6745

Browse files
author
jipengfei01
committed
feat: complete server details page chart development
1 parent fdbb28f commit 31b6745

File tree

7 files changed

+431
-147
lines changed

7 files changed

+431
-147
lines changed

‎src/api/server.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import _fetch from '@/utils/_fetch'
1+
import type { GetHostDetailParams, HostDetail } from '@/model/cluster'
22
import type { Res } from '@/utils/_fetch'
3-
3+
import _fetch from '@/utils/_fetch'
44
//用户登录api
5-
export const getServerListApi = (data: {size: number, page: number}) => {
6-
return _fetch<Res<{ result: any }>>({
7-
method:'POST',
8-
url:`/curvebs?method=host.list`,
9-
data
10-
})
11-
}
5+
export const getServerListApi = (data: { size: number; page: number }) => {
6+
return _fetch<Res<{ result: any }>>({
7+
method: 'POST',
8+
url: `/curvebs?method=host.list`,
9+
data,
10+
})
11+
}
1212

13-
export const getServerDetailApi = (data: {hostName: string}) => {
14-
return _fetch<Res<{ result: any }>>({
15-
method:'POST',
16-
url:`/curvebs?method=host.get`,
17-
data
18-
})
19-
}
13+
export const getServerDetailApi = (data: GetHostDetailParams) => {
14+
return _fetch<Res<HostDetail>>({
15+
method: 'POST',
16+
url: `/curvebs?method=host.get`,
17+
data,
18+
})
19+
}

‎src/charts/cluster-management/NetworkTrafficReceiveChart.vue

Lines changed: 78 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
<template>
22
<div ref="main" style="width: 100%; height: 400px"></div>
33
</template>
4-
4+
55
<script setup lang="ts">
6-
import * as echarts from "echarts";
7-
import { ref, onMounted, toRefs, watch } from 'vue'
6+
import * as echarts from 'echarts'
7+
import { onMounted, ref, toRefs, watch } from 'vue'
8+
9+
import router from '@/router'
810
import { useServerStore } from '@/store/clusterManagement/server'
9-
import router from "@/router"
1011
1112
const serverStore = useServerStore()
12-
const state = serverStore.state;
13-
const { fullServerDetail } = toRefs(state);
13+
const state = serverStore.state
14+
const { fullServerDetail } = toRefs(state)
1415
1516
//获取概览数据从接口
1617
1718
const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
1819
19-
const drawChart = (() => {
20+
const drawChart = () => {
2021
function timestampToTime(timestamp: number) {
2122
const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
2223
const year = dateObj.getFullYear() // 获取年，
2324
const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
2425
const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
25-
const hours = pad(dateObj.getHours()) // 获取时, pad函数用来补0
26+
const hours = pad(dateObj.getHours()) // 获取时, pad函数用来补0
2627
const minutes = pad(dateObj.getMinutes()) // 获取分
2728
const seconds = pad(dateObj.getSeconds()) // 获取秒
2829
return hours + ':' + minutes + ':' + seconds
@@ -32,83 +33,79 @@ const drawChart = (() => {
3233
return +str >= 10 ? str : '0' + str
3334
}
3435
35-
const timeStamp: Array<string> = [];
36-
37-
let trafficReceive = fullServerDetail.value.networkTraffic.receive;
38-
//获取timestamp并将其存入相应数组
39-
let timeItem = Object.values(trafficReceive);
40-
timeItem[0].forEach(item => {
41-
let convertedTime = timestampToTime(item.timestamp);
42-
timeStamp.push(convertedTime)
43-
})
36+
const timeStamp: Array<string> = []
4437
45-
// 获取键值
46-
const keys = [];
47-
let legendKeys = [];
48-
for (let key in trafficReceive) {
49-
keys.push(key);
50-
}
51-
//获取数据数组
52-
const receiveData = []
53-
timeItem.forEach(item => {
54-
let valueData = [];
55-
item.forEach(valueItem => {
56-
let val = valueItem.value / (1024 * 8 * 1024);
57-
val = val.toFixed(2)
58-
valueData.push(val)
59-
})
60-
receiveData.push(valueData)
61-
})
38+
let trafficReceive = fullServerDetail.value.networkTraffic.receive
39+
//获取timestamp并将其存入相应数组
40+
let timeItem = Object.values(trafficReceive)
41+
timeItem[0].forEach(item => {
42+
let convertedTime = timestampToTime(item.timestamp)
43+
timeStamp.push(convertedTime)
44+
})
6245
63-
//整理出图标里需要的数据数组
64-
const charReceiveData = []
65-
for (let i = 0; i < keys.length; i++) {
66-
charReceiveData.push(
67-
{
68-
name: keys[i],
69-
type: 'line',
70-
data: receiveData[i]
71-
},
72-
);
73-
}
46+
// 获取键值
47+
const keys = []
48+
let legendKeys = []
49+
for (let key in trafficReceive) {
50+
keys.push(key)
51+
}
52+
//获取数据数组
53+
const receiveData = []
54+
timeItem.forEach(item => {
55+
let valueData = []
56+
item.forEach(valueItem => {
57+
let val = valueItem.value / (1024 * 8 * 1024)
58+
val = val.toFixed(2)
59+
valueData.push(val)
60+
})
61+
receiveData.push(valueData)
62+
})
7463
64+
//整理出图标里需要的数据数组
65+
const charReceiveData = []
66+
for (let i = 0; i < keys.length; i++) {
67+
charReceiveData.push({
68+
name: keys[i],
69+
type: 'line',
70+
data: receiveData[i],
71+
})
72+
}
7573
76-
// 基于准备好的dom，初始化echarts实例
77-
var myChart = echarts.init(main.value);
78-
// 指定图表的配置项和数据
79-
var option = {
80-
title: { text: "网络下行带宽" },
81-
tooltip: {
82-
trigger: 'axis'
83-
},
84-
legend: {
85-
data: keys,
86-
bottom: 0
87-
},
88-
grid: {
89-
left: '3%',
90-
right: '4%',
91-
containLabel: true
92-
},
93-
xAxis: {
94-
type: 'category',
95-
boundaryGap: false,
96-
data: timeStamp
74+
// 基于准备好的dom，初始化echarts实例
75+
var myChart = echarts.init(main.value)
76+
// 指定图表的配置项和数据
77+
var option = {
78+
title: { text: '网络下行带宽' },
79+
tooltip: {
80+
trigger: 'axis',
81+
},
82+
legend: {
83+
data: keys,
84+
bottom: 0,
85+
},
86+
grid: {
87+
left: '3%',
88+
right: '4%',
89+
containLabel: true,
90+
},
91+
xAxis: {
92+
type: 'category',
93+
boundaryGap: false,
94+
data: timeStamp,
95+
},
96+
yAxis: {
97+
type: 'value',
98+
axisLabel: {
99+
formatter: '{value} MB/s',
97100
},
98-
yAxis: {
99-
type: 'value',
100-
axisLabel: {
101-
formatter: '{value} MB/s'
102-
}
103-
},
104-
series: charReceiveData
105-
};
106-
// 使用刚指定的配置项和数据显示图表。
107-
myChart.setOption(option);
108-
109-
})
101+
},
102+
series: charReceiveData,
103+
}
104+
// 使用刚指定的配置项和数据显示图表。
105+
myChart.setOption(option)
106+
}
110107
111-
watch(fullServerDetail, (newVal) => {
112-
drawChart();
108+
watch(fullServerDetail, newVal => {
109+
drawChart()
113110
})
114-
</script>
111+
</script>

‎src/model/cluster.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,48 @@
1+
import type { PerformanceItem, TrendChartParams } from './common'
2+
3+
export type GetHostDetailParams = TrendChartParams & { hostName: string }
14
export interface ClusterTrendDataItem {
25
timestamp: number
36
total: number
47
alloc: number
58
}
9+
10+
export interface RangeItem {
11+
timestamp: number
12+
value: string
13+
}
14+
15+
export interface HostDetail {
16+
cpuUtilization: {
17+
timestamp: number
18+
value: string
19+
}[]
20+
diskPerformance: {
21+
[key: string]: PerformanceItem[]
22+
}
23+
host: {
24+
diskNum: number
25+
hostName: string
26+
ip: string
27+
kernelRelease: string
28+
kernelVersion: string
29+
machine: string
30+
memory: number
31+
operatingSystem: string
32+
cpuCores: {
33+
totalNum: number
34+
cpuModles: {
35+
[key: string]: number
36+
}
37+
}
38+
}
39+
memUtilization: RangeItem[]
40+
networkTraffic: {
41+
receive: {
42+
[key: string]: RangeItem[]
43+
}
44+
transmit: {
45+
[key: string]: RangeItem[]
46+
}
47+
}
48+
}

‎src/utils/functions.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import dayjs from 'dayjs'
22
import { toRaw } from 'vue'
33

4+
import type { RangeItem } from '@/model/cluster'
5+
import type { PerformanceItem } from '@/model/common'
6+
import type { chartData, ChartSeries } from '#/index'
7+
48
import router from '../router'
59

610
export const notUserCheck = () => {
@@ -24,3 +28,51 @@ export const getEChartsFormatter = (start: number, end: number) => {
2428
const divisor = 1024 * 1024
2529
export const fixNum = (numString: string | number) =>
2630
+(+numString / divisor).toFixed(2)
31+
32+
export const gEchartsSeriesData = (
33+
data: { [name: string]: RangeItem[] },
34+
needFix = false,
35+
type = 'line',
36+
) =>
37+
Object.entries(data).map(([key, value]) => {
38+
return {
39+
type,
40+
name: key,
41+
data: value.map<[number, number]>(({ timestamp, value }) => [
42+
timestamp * 1000,
43+
!needFix ? Number(Number(value).toFixed(2)) : fixNum(value),
44+
]),
45+
}
46+
})
47+
48+
export const gEchartsSeriesDataByPerformance = (performanceList: {
49+
[key: string]: PerformanceItem[]
50+
}) => {
51+
const res: [ChartSeries[], ChartSeries[], ChartSeries[], ChartSeries[]] = [
52+
[],
53+
[],
54+
[],
55+
[],
56+
]
57+
Object.entries(performanceList).forEach(([name, list]) => {
58+
const data: [chartData, chartData, chartData, chartData] = [[], [], [], []]
59+
list.forEach(({ timestamp, readBPS, readIOPS, writeBPS, writeIOPS }) => {
60+
const time = timestamp * 1000
61+
void [readBPS, readIOPS, writeBPS, writeIOPS].forEach((item, index) => {
62+
console.log(name, readBPS)
63+
data[index].push([
64+
time,
65+
index % 2 ? Number(Number(item).toFixed(2)) : fixNum(item),
66+
])
67+
})
68+
})
69+
data.forEach((item, index) => {
70+
res[index].push({
71+
type: 'line',
72+
data: item,
73+
name,
74+
})
75+
})
76+
})
77+
return res
78+
}

0 commit comments

Comments
 (0)