# memory-profiling-viewer

**Repository Path**: sheng-nan/memory-profiling-viewer

## Basic Information

- **Project Name**: memory-profiling-viewer
- **Description**: GE memory profiling view
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-12
- **Last Updated**: 2024-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GE Memory Profiler - GE执行时Device内存分析工具

## 整体介绍

GE Memory Profiler是一个纯前端的web程序，可以读入runtime 2.0的执行日志，分析内存trace，并通过chart表格展示多流上的内存申请、延长、释放情况。
因为是纯前端实现，这意味着不需要借助服务器，用户可以直接将html文件拖入浏览器中即可使用本功能。

导入一个或多个日志文件并完成解析后，页面按照时间先后，通过折线图，展示所有一、二级内存池的内存分配情况，分别包含空闲、被使用、借来的内存大小。
点击某个时刻，可以通过表格的形式显示该时刻所有block的详细情况，包含每个block的大小、状态等。

为了方便比对，虽然每个内存池都使用单独的折线图显示，但是其横、纵轴的比例尺是完全一样的。

## 效果草图

![](doc/summary.png)

如上图所示，网页主界面显示所有内存池的内存池的内存分配折线图，其中横轴为时间，纵轴为内存大小，每个图的比例是一样的。

对于每一个折线图，其展示的内容如下所示：

![](doc/pool.png)

对于这个折线图，用户可以选择按照时间轴做放大、缩小，在用户缩放一个折线图时，其他折线图也同步变化。
用户也可以点击某个时间点，查看该时间点下，所有内存池中的、所有block的信息。
在完成洄游之前，一块内存即使被释放了，在本stream的内存池上看，仍然处于被占用状态。

对于一个block,也可以跟踪其生命周期状态，其生命周期状态示意图如下所示：

![](doc/memory_block.png)

## 技术选型

* chart：apache echarts，看介绍可以支持大规模的数据量而不卡（实测折线图在100w条数据以内不卡）
  * 从这个回答来看lightningchart性能也很好，可以作为备选：https://stackoverflow.com/a/58171815
  * 一个datazoom控制多个charts的样例：https://stackoverflow.com/a/72722336
  * block生命周期状态可以考虑用这个能力：https://echarts.apache.org/examples/zh/editor.html?c=graph-grid
* 样式库：bootstrap（不重要，只会这个）
* 框架：vue（不重要，只会这个，考虑不使用框架也是可以的）



## 构建方法

### 安装构建工具



### 初始化工程

使用`yarn install`或者`npm install` 初始化工程

```bash
$ yarn install
yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > sass-loader@13.3.2" has unmet peer dependency "webpack@^5.0.0".
warning " > vite-plugin-singlefile@0.13.5" has unmet peer dependency "rollup@>=2.79.0".
warning " > vue-loader@17.2.2" has unmet peer dependency "webpack@^4.1.0 || ^5.0.0-0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 8.68s.
```



### 构建

使用`yarn build`或`npm run build`命令构建：

```bash
$ npm run build

> vue@0.0.0 build
> vite build

vite v4.4.11 building for production...
✓ 632 modules transformed.
dist/index.html  1,314.21 kB │ gzip: 410.65 kB
✓ built in 7.23s
```

构建完成后，可以在`dist`目录找到一个`index.html`，这便是构建结构，使用浏览器打开该`index.html`即可使用。

```bash
$ ls dist/
index.html
```

## FEATURE LIST

* [X] 没有任何log文件导入时，chart处提示要导入log文件
* [X] 鼠标在charts上时，可否显示鼠标所在位置的横纵坐标？
* [X] 通过内存大小做过滤
* [X] 图表上可以显示某个时间点的内存申请总量
* [X] 当鼠标位于charts时，显示改时间点的内存使用量、总量情况
* [X] 可搜索，可以根据Device地址搜索所有相关block
* [X] 在解析log文件时，进入等待动画，界面无法添加新的log文件(但是图表可以正常操作，如果图表中有数据的化)
* [X] 支持显示一块内存是由图上的哪个节点申请的，可以根据kernel name反推，kernel name规则参考这个函数：
* [X] 根据算子名、算子类型搜索block
* [X] 做一个更好看的上传文件页面，可以考虑放在标题栏上
* [X] 做一个单独的block页面
* [X] block可点击，在block详细状态表格中，点击block可以显示block chart，参考这个能力，做一个单页面应用：(https://stackoverflow.com/questions/62152450/vue-switching-between-components)
* [X] 可以做一些常见错误的识别工作，例如配对event的send-wait中，send总是要早于wait下发
* [ ] 几个chart的间隔更加智能一点，特别是单stream的时候，时间轴不要距离chart太远
* [ ] 支持一个配置菜单，并可以借助浏览器的cookie或localStorage等能力，将用户配置保存在浏览器本地，以用于下次使用
* [ ] 因为地址无法匹配而丢弃日志时，需要做记录，在页面体现出来
* [ ] `RecordType`支持一个正则表达式对应多个类型，加速匹配过程
* [ ] 支持分隔执行日志(使用Start/End model tracing)，并做标注、选择
* [ ] 诊断页面在没有错误信息时，tab页不显示，或者显示为灰色不可点击，当有错误时，红字加粗显示使其更醒目

### 不准备做的特性

* [ ] 考虑定制上传按钮的文字，参考：https://stackoverflow.com/questions/65770908/how-to-change-choose-file-text-using-bootstrap-5