# 数据中心服务器资源可视化

**Repository Path**: Linqiang123/LQ123

## Basic Information

- **Project Name**: 数据中心服务器资源可视化
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-09-22
- **Last Updated**: 2024-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# **数据资源可视化** 

### 成员：林强 骆柠 池申龙 胡铮 

> ### *本项目使用螺旋模型*
>
> ### 题目
>
> 数据中心服务器资源可视化 (Data Center Server Resources Visualization)
> 根据Google公司提供的数据中心服务器资源的trace数据集，利用D3等可视化库实现前端页面的服务器资源可视化功能
>
> >trace数据集下载地址：链接：https://pan.baidu.com/s/1gHh22jZ537x7TBrn0Uichw 提取码：llsd
>
> >D3可视化库链接： https://d3js.org/
>
> 实现如下两类事件的可视化：
>
> （1）Machine events table
> 机器事件相关的数据可视化，实现包括机器的种类、机器的资源容量、基于时间序列的机器事件（ADD、REMOVE、UPDATE）等信息的可视化功能
>
> （2）Machine attributes table
> 器属性的数据可视化，实现包括每台机器的属性数量、每种属性的机器数量、基于时间序列的机器属性变化等信息的可视化功能
>
> （不仅限于上述信息的可视化，同学们可以发挥想象基于数据集挖掘更多数据中心机器的特征信息并将其可视化）

# 目录

##### 1.概述

​	1.1项目概述

​	1.2主要限制和开发风险分析

##### 2.功能需求

​	2.1功能需求

​	2.2用例

​	2.3用户故事

##### 3.数据需求

​	3.1数据项

​	3.2可视化表

##### 4.接口需求

​	4.1数据接口

​	4.2用户界面

##### 5.环境

​	5.1运行环境、开发环境



### 1.概述

#####  1.1项目概述

​	数据中心服务器资源可视化 (Data Center Server Resources Visualization) 根据Google公司提供的数据中心服务器资源的trace数据集，利用D3等可视化库实现前端页面的服务器资源可视化功能

> trace数据集下载地址：链接：https://pan.baidu.com/s/1gHh22jZ537x7TBrn0Uichw 提取码：llsd

> D3可视化库链接： https://d3js.org/

实现如下两类事件的可视化：

（1）Machine events table 机器事件相关的数据可视化，实现包括机器的种类、机器的资源容量、基于时间序列的机器事件（ADD、REMOVE、UPDATE）等信息的可视化功能

（2）Machine attributes table 器属性的数据可视化，实现包括每台机器的属性数量、每种属性的机器数量、基于时间序列的机器属性变化等信息的可视化功能

（不仅限于上述信息的可视化，同学们可以发挥想象基于数据集挖掘更多数据中心机器的特征信息并将其可视化）

##### 	1.2主要限制和开发风险分析

| Risk                                     | Risk Ranking | Indicators                                                 | action                                         |
| ---------------------------------------- | ------------ | ---------------------------------------------------------- | ---------------------------------------------- |
| 数据集过大，数据过多导致图表难以显示完全 | 3            | 数据过多使得可视化模型无法正常加载                         | 选择一小部分数据进行显示                       |
| 项目难度过大，成员没有能力进行开发       | 2            | 部分功能对于开发来说过于困难；界面无法完全按UI设计进行编写 | 对难度大的功能进行选择性开发；对UI设计进行改动 |
| 项目未在交付时间内完成                   | 1            | 因为各种问题导致项目在交付时间内没有开发完全               | 采用增量开发的方式，尽可能展示已开发内容       |

### 2.功能需求

##### 	2.1功能需求

| 模块     | 功能划分 | 简要描述                                     |
| -------- | -------- | -------------------------------------------- |
| 用户界面 | 图形展示 | 对提取出的数据进行可视化展示，点击生成放大图 |
|          | 时间选择 | 某些数据图可以选择显示的时间范围             |
| 数据读取 | 机器事件 | 从数据集中读取机器事件相关数据               |
|          | 机器属性 | 从数据集中读取机器属性相关数据               |



##### 		2.2用例

| Use case            |                                                              |
| ------------------- | ------------------------------------------------------------ |
| Name                | 图形展示                                                     |
| Participating Actor | 用户                                                         |
| Goals               | 用户能够查看各个数据的柱状图或饼图或折线图                   |
| Triggers            | 用户通过点击图表来显示详细信息                               |
| Pre-Condition       | 成功获取数据集中的数据                                       |
| Post-Condition      | 成功生成并放大相应数据的可视化图表                           |
| Basic Flow          | 用户先获取数据集数据，点击相应数据图表，生成并放大图表       |
| Alternate Flows     | 选择不同的数据进行展示                                       |
| Exceptions          | 没用获取到数据集数据；没有成功生成图表                       |
| Qualities           | 1.展示的图表类型和数据准确 。 2.图表加载时间小于5秒 。 3.数据在图标上准确显示。 |

| Use case            |                                                              |
| ------------------- | ------------------------------------------------------------ |
| Name                | 时间选择                                                     |
| Participating Actor | 用户                                                         |
| Goals               | 用户能够选择不同日期来查询当天的数据表                       |
| Triggers            | 用户通过日期筛选器选中日期                                   |
| Pre-Condition       | 成功获取数据集中的数据，成功获取日期控件返回的时间           |
| Post-Condition      | 成功生成并放大相应日期的可视化图表                           |
| Basic Flow          | 用户先获取数据集数据，点击相应数据图表，选择日期，生成并放大图表，点击关闭 |
| Alternate Flows     | 选择不同的数据或日期进行展示。                               |
| Exceptions          | 没用获取到数据集数据；没有获取到日期；没有成功生成图表       |
| Qualities           | 1.展示的图表类型和数据准确 。 2.图表加载时间小于5秒 。 3.数据在图标上准确显示。 |

##### 2.3用户故事

1.user story

As a user, I want to open a web page to be able to view the line graph of machine events over time, so I that can clearly know the number and changes of machines executing each machine event in each event segment.

acceptance criteria

1.You can see that the webpage has a line chart that shows the changes of machine events over time.

2.You can click the date selection button to display a line chart of the number of machine events on the selected date versus time series.

3.You can zoom the line graph by clicking.

4.You can turn off the discount chart.

acceptance test:

| steps                          | prerequisites                                                | expected result                                              | priority |
| ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- |
| 1.Open the page                | Get data                                                     | The page has a line chart of the layout assigned to the machine time over time series | 2        |
| 2.Click the select date button | Obtain the data of the number of events of each machine in the selected date range with time series changes | Show line chart successfully                                 | 3        |
| 3.Click on the picture         | Line chart has been displayed                                | The line chart successfully zoomed in                        | 2        |
| 4.Close thumbnail              | Thumbnail opened successfully                                | Turn off the thumbnail and the web page displays the original line chart. | 2        |

1.可以看到网页有一块布局显示机器事件随时间序列变化的折线图。

2.可以点击日期选择按钮，显示选定日期的各个机器事件数量随时间序列变化的折线图。

3.可以通过点击缩放折线图。

4.可以关闭折现图。

| 步骤               | 前提条件                                                 | 预期结果                                           | 优先级 |
| ------------------ | -------------------------------------------------------- | -------------------------------------------------- | ------ |
| 1.打开页面         | 获取数据                                                 | 页面有一块布局分配给机器时间随时间序列变化的折线图 | 2      |
| 2.点击选择日期按钮 | 获取到选择日期范围内各个机器事件数量随时间序列变化的数据 | 成功显示折线图                                     | 3      |
| 3.点击图片         | 折线图已经显示                                           | 折线图成功放大                                     | 2      |
| 4.关闭缩略图       | 缩略图成功打开                                           | 关闭缩略图，网页显示原来的折线图。                 | 2      |

2.user story

As a user, I want to view the number of attributes of each machine by opening the webpage and clicking the histogram of machine attributes, so that I can visually see the information of the number of attributes of each machine.

acceptance criteria

1. Open the web page and you can see a thumbnail layout showing the quantity information of each machine attribute.
2. Click the machine selection button to display the histogram of the machine attribute quantity.
3. You can click to enlarge the thumbnail.
4. You can close the enlarged image.

acceptance test:

| steps                          | Precondition                                                 | Expected                                                     | priority |
| ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- |
| 1.Open page                    | Get data                                                     | The page has a histogram of the number of attributes assigned to the machine. | 2        |
| 2.Click to select machine type | Get the attribute quantity information of the selected machine. | Successfully display the histogram of the machine attribute information. | 3        |
| 3.Click on the picture         | The histogram has been displayed                             | The histogram successfully zoomed in                         | 2        |
| 4.Close thumbnail              | Thumbnail opened successfully                                | Turn off the thumbnail and the web page displays the original histogram. | 2        |

3.user story:

作为用户，我想要通过打开网页，点开折线图来查看一台机器基于时间序列的机器属性变化，所以我能直观看到该台机器的属性变化。

acceptance criteria:

1.可以看到首页页面有一块布局分配给机器属性变化折线图的缩略图；

2.可以点击后放大缩略图；

3.可以关闭放大图。

acceptance test:

| 步骤         | 前提条件       | 预期结果                                       | 优先级 |
| ------------ | -------------- | ---------------------------------------------- | ------ |
| 1.打开页面   | 获取数据       | 页面有一块布局分配给机器属性变化折线图的缩略图 | 2      |
| 2.点击缩略图 | 页面已正常显示 | 显示放大后的机器种类柱状图详细图               | 2      |
| 3.点击关闭   | 已打开放大图   | 放大图关闭，重新回到首页                       | 2      |

user story: As a user, I want to view the property changes of a machine based on time series by opening the web page and clicking the line diagram, so I can see the property changes of the machine directly.

acceptance criteria:

1. You can see that there is a layout assigned to the thumbnail of the broken line graph of machine property change on the home page;
2. Click to enlarge the thumbnail;
3. Zoom in can be turned off.

acceptance test:

| step                      | prerequisite                         | Expected results                                             | priority |
| ------------------------- | ------------------------------------ | ------------------------------------------------------------ | -------- |
| 1. Open the page          | get data                             | The page has a layout assigned to a thumbnail of the line graph with machine property changes | 2        |
| 2. Click on the thumbnail | The page has been displayed normally | Display the enlarged bar chart of machine type               | 2        |
| 3. Click close            | Large open plan has been drawn       | Zoom in close, return to home page                           | 2        |

4.user story：

作为用户，我想要通过打开网页，点开机器种类柱状图来查看每种机器的种类的机器数量，所以我就能直观的看到各个机器种类的数量的信息

acceptance criteria:

1.可以看到首页页面有一块布局分配给机器种类柱状图的缩略图；

2.可以点击后放大缩略图；

3.可以关闭放大图。

acceptance test:

| 步骤         | 前提条件       | 预期结果                                   | 优先级 |
| ------------ | -------------- | ------------------------------------------ | ------ |
| 1.打开页面   | 获取数据       | 页面有一块布局分配给机器种类柱状图的缩略图 | 2      |
| 2.点击缩略图 | 页面已正常显示 | 显示放大后的机器种类柱状图详细图           | 2      |
| 3.点击关闭   | 已打开放大图   | 放大图关闭，重新回到首页                   | 2      |

### 3.数据需求

##### 	3.1数据项

###### 3.1.1机器事件表：

1.时间戳

2.机器ID 

3.事件类型

4.平台ID (机器种类)

5.容量：CPU 

6.容量：内存

共有三种类型的机器事件：

●ADD（0）：一台机器可用于群集 -跟踪中的所有计算机都将发生ADD事件。
   ●删除（1）：计算机已从集群中删除。 可能由于故障或维护而导致拆卸。
   ●更新（2）：集群可用的计算机更改了其可用资源。
   4机器容量反映了每个机器沿每个尺寸的标准化物理容量。 每个维度（CPU内核，RAM大小）均独立标准化。 请注意，并非所有这些功能都可用于任务。 例如，集群调度程序需要为其自身和操作系统保留一些资源。
   平台ID是不透明的字符串，表示计算机的微体系结构和芯片集版本。 微体系结构（例如，供应商的芯片代号，如Nehalem或Bulldozer）与内存技术（例如，DDR2与DDR）的不同组合将产生不同的平台ID。 具有相同平台ID的两台计算机可能具有完全不同的时钟速率，内存速度，核心数等

###### 3.1.2机器属性表：

1.时间戳

2.机器ID 

3.属性名称：不透明的字符串

4.属性值：不透明的字符串或整数

5.删除的属性：指示是否删除了该属性的布尔值机器属性是 代表机器属性的键/值对，例如内核版本，时钟速度，外部IP地址的存在。 任务可以指定对计算机属性的约束。

##### 	3.2可视化表

（1）Machine events table 机器事件相关的数据可视化，实现包括机器的种类、机器的资源容量、基于时间序列的机器事件（ADD、REMOVE、UPDATE）等信息的可视化功能

事件可视化表

| 属性                   | 对应数据项            | 可视化为                                                     | 表现形式 |
| ---------------------- | --------------------- | ------------------------------------------------------------ | -------- |
| 机器种类               | 平台ID                | 每种平台ID内的机器数量。横坐标：平台ID；纵坐标：机器数量。   | 柱状图   |
| 机器的资源容量         | 容量：CPU；容量：内存 | 每种机器种类分别占有的总CPU容量与总内存容量的数值与占比。    | 饼图     |
| 基于时间序列的机器事件 | 时间戳;事件类型       | 某时间范围内各个机器事件（ADD、REMOVE、UPDATE）数量随时间序列变化的数据。横坐标：时间戳；纵坐标：机器事件数量 | 折线图   |

（2）Machine attributes table 器属性的数据可视化，实现包括每台机器的属性数量、每种属性的机器数量、基于时间序列的机器属性变化等信息的可视化功能

属性可视化表

| 属性                       | 对应数据项                       | 可视化为                                                     | 表现形式 |
| -------------------------- | -------------------------------- | ------------------------------------------------------------ | -------- |
| 机器的属性数量             | 机器ID；属性名称                 | 某个属性数量所拥有的机器数量的占比。标签：属性数量；值：机器数量 | 饼图     |
| 属性的机器数量             | 机器ID；属性名称                 | 每种属性对应的机器数量。横坐标：属性名称；纵坐标：机器数量。下方有条形选择器 | 柱状图   |
| 基于时间序列的机器属性变化 | 时间戳；机器ID；属性名称；属性值 | 某台机器中的某些属性随时间序列变化的数据。横坐标：时间戳；纵坐标：属性值 | 折线图   |

### 4.接口需求

##### 	4.1数据接口

机器事件：谷歌trace数据集（CSV文件）==》d3数据处理==》echarts制作图表==》前端接口

机器事件：谷歌trace数据集（CSV文件）==》Python pandas库数据处理==》d3数据处理==》echarts制作图表==》前端接口

##### 4.2用户界面



### 5.环境

##### 	5.1运行环境、开发环境

windows10

idea