feat: complete server details page chart development

src/api/server.ts

@@ -1,19 +1,19 @@
-import _fetch from '@/utils/_fetch'
+import type { GetHostDetailParams, HostDetail } from '@/model/cluster'
 import type { Res } from '@/utils/_fetch'
-
+import _fetch from '@/utils/_fetch'
 //用户登录api
-  export const getServerListApi = (data: {size: number, page: number}) => {
-    return _fetch<Res<{ result: any }>>({
-        method:'POST',
-        url:`/curvebs?method=host.list`,
-        data
-    })
-  }
+export const getServerListApi = (data: { size: number; page: number }) => {
+  return _fetch<Res<{ result: any }>>({
+    method: 'POST',
+    url: `/curvebs?method=host.list`,
+    data,
+  })
+}
 
-  export const getServerDetailApi = (data: {hostName: string}) => {
-    return _fetch<Res<{ result: any }>>({
-        method:'POST',
-        url:`/curvebs?method=host.get`,
-        data
-    })
-  }
+export const getServerDetailApi = (data: GetHostDetailParams) => {
+  return _fetch<Res<HostDetail>>({
+    method: 'POST',
+    url: `/curvebs?method=host.get`,
+    data,
+  })
+}

src/charts/cluster-management/NetworkTrafficReceiveChart.vue

@@ -1,28 +1,29 @@
 <template>
   <div ref="main" style="width: 100%; height: 400px"></div>
 </template>
-  
+
 <script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, onMounted, toRefs, watch } from 'vue'
+import * as echarts from 'echarts'
+import { onMounted, ref, toRefs, watch } from 'vue'
+
+import router from '@/router'
 import { useServerStore } from '@/store/clusterManagement/server'
-import router from "@/router"
 
 const serverStore = useServerStore()
-const state = serverStore.state;
-const { fullServerDetail } = toRefs(state);
+const state = serverStore.state
+const { fullServerDetail } = toRefs(state)
 
 //获取概览数据从接口
 
 const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
 
-const drawChart = (() => {
+const drawChart = () => {
   function timestampToTime(timestamp: number) {
     const dateObj = new Date(+timestamp * 1000) // ps, 必须是数字类型，不能是字符串, +运算符把字符串转化为数字，更兼容
     const year = dateObj.getFullYear() // 获取年，
     const month = dateObj.getMonth() + 1 // 获取月，必须要加1，因为月份是从0开始计算的
     const date = dateObj.getDate() // 获取日，记得区分getDay()方法是获取星期几的。
-    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
+    const hours = pad(dateObj.getHours()) // 获取时, pad函数用来补0
     const minutes = pad(dateObj.getMinutes()) // 获取分
     const seconds = pad(dateObj.getSeconds()) // 获取秒
     return hours + ':' + minutes + ':' + seconds
@@ -32,83 +33,79 @@ const drawChart = (() => {
     return +str >= 10 ? str : '0' + str
   }
 
-  const timeStamp: Array<string> = [];
- 
-    let trafficReceive = fullServerDetail.value.networkTraffic.receive;
-    //获取timestamp并将其存入相应数组
-    let timeItem = Object.values(trafficReceive); 
-    timeItem[0].forEach(item => {
-      let convertedTime = timestampToTime(item.timestamp);
-      timeStamp.push(convertedTime)
-    })
+  const timeStamp: Array<string> = []
 
-    // 获取键值
-    const keys = [];
-    let legendKeys = [];
-    for (let key in trafficReceive) {
-      keys.push(key);
-    }
-    //获取数据数组
-    const receiveData = []
-    timeItem.forEach(item => {
-      let valueData = [];
-      item.forEach(valueItem => {
-        let val = valueItem.value / (1024 * 8 * 1024);
-        val = val.toFixed(2)
-        valueData.push(val)
-      })
-      receiveData.push(valueData)
-    })
+  let trafficReceive = fullServerDetail.value.networkTraffic.receive
+  //获取timestamp并将其存入相应数组
+  let timeItem = Object.values(trafficReceive)
+  timeItem[0].forEach(item => {
+    let convertedTime = timestampToTime(item.timestamp)
+    timeStamp.push(convertedTime)
+  })
 
-    //整理出图标里需要的数据数组
-    const charReceiveData = []
-    for (let i = 0; i < keys.length; i++) {
-      charReceiveData.push(
-        {
-          name: keys[i],
-          type: 'line',
-          data: receiveData[i]
-        },
-      );
-    }
+  // 获取键值
+  const keys = []
+  let legendKeys = []
+  for (let key in trafficReceive) {
+    keys.push(key)
+  }
+  //获取数据数组
+  const receiveData = []
+  timeItem.forEach(item => {
+    let valueData = []
+    item.forEach(valueItem => {
+      let val = valueItem.value / (1024 * 8 * 1024)
+      val = val.toFixed(2)
+      valueData.push(val)
+    })
+    receiveData.push(valueData)
+  })
 
+  //整理出图标里需要的数据数组
+  const charReceiveData = []
+  for (let i = 0; i < keys.length; i++) {
+    charReceiveData.push({
+      name: keys[i],
+      type: 'line',
+      data: receiveData[i],
+    })
+  }
 
-    // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(main.value);
-    // 指定图表的配置项和数据
-    var option = {
-      title: { text: "网络下行带宽" },
-      tooltip: {
-        trigger: 'axis'
-      },
-      legend: {
-        data: keys,
-        bottom: 0
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: timeStamp
+  // 基于准备好的dom，初始化echarts实例
+  var myChart = echarts.init(main.value)
+  // 指定图表的配置项和数据
+  var option = {
+    title: { text: '网络下行带宽' },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: keys,
+      bottom: 0,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: timeStamp,
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: '{value} MB/s',
       },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          formatter: '{value} MB/s'
-        }
-      },
-      series: charReceiveData
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
-
-  })
+    },
+    series: charReceiveData,
+  }
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
 
-  watch(fullServerDetail, (newVal) => { 
-  drawChart();
+watch(fullServerDetail, newVal => {
+  drawChart()
 })
-</script>
+</script>

src/model/cluster.ts

@@ -1,5 +1,48 @@
+import type { PerformanceItem, TrendChartParams } from './common'
+
+export type GetHostDetailParams = TrendChartParams & { hostName: string }
 export interface ClusterTrendDataItem {
   timestamp: number
   total: number
   alloc: number
 }
+
+export interface RangeItem {
+  timestamp: number
+  value: string
+}
+
+export interface HostDetail {
+  cpuUtilization: {
+    timestamp: number
+    value: string
+  }[]
+  diskPerformance: {
+    [key: string]: PerformanceItem[]
+  }
+  host: {
+    diskNum: number
+    hostName: string
+    ip: string
+    kernelRelease: string
+    kernelVersion: string
+    machine: string
+    memory: number
+    operatingSystem: string
+    cpuCores: {
+      totalNum: number
+      cpuModles: {
+        [key: string]: number
+      }
+    }
+  }
+  memUtilization: RangeItem[]
+  networkTraffic: {
+    receive: {
+      [key: string]: RangeItem[]
+    }
+    transmit: {
+      [key: string]: RangeItem[]
+    }
+  }
+}

src/utils/functions.ts

@@ -1,6 +1,10 @@
 import dayjs from 'dayjs'
 import { toRaw } from 'vue'
 
+import type { RangeItem } from '@/model/cluster'
+import type { PerformanceItem } from '@/model/common'
+import type { chartData, ChartSeries } from '#/index'
+
 import router from '../router'
 
 export const notUserCheck = () => {
@@ -24,3 +28,51 @@ export const getEChartsFormatter = (start: number, end: number) => {
 const divisor = 1024 * 1024
 export const fixNum = (numString: string | number) =>
   +(+numString / divisor).toFixed(2)
+
+export const gEchartsSeriesData = (
+  data: { [name: string]: RangeItem[] },
+  needFix = false,
+  type = 'line',
+) =>
+  Object.entries(data).map(([key, value]) => {
+    return {
+      type,
+      name: key,
+      data: value.map<[number, number]>(({ timestamp, value }) => [
+        timestamp * 1000,
+        !needFix ? Number(Number(value).toFixed(2)) : fixNum(value),
+      ]),
+    }
+  })
+
+export const gEchartsSeriesDataByPerformance = (performanceList: {
+  [key: string]: PerformanceItem[]
+}) => {
+  const res: [ChartSeries[], ChartSeries[], ChartSeries[], ChartSeries[]] = [
+    [],
+    [],
+    [],
+    [],
+  ]
+  Object.entries(performanceList).forEach(([name, list]) => {
+    const data: [chartData, chartData, chartData, chartData] = [[], [], [], []]
+    list.forEach(({ timestamp, readBPS, readIOPS, writeBPS, writeIOPS }) => {
+      const time = timestamp * 1000
+      void [readBPS, readIOPS, writeBPS, writeIOPS].forEach((item, index) => {
+        console.log(name, readBPS)
+        data[index].push([
+          time,
+          index % 2 ? Number(Number(item).toFixed(2)) : fixNum(item),
+        ])
+      })
+    })
+    data.forEach((item, index) => {
+      res[index].push({
+        type: 'line',
+        data: item,
+        name,
+      })
+    })
+  })
+  return res
+}