update README.md and tool description in src/extension.ts

MagicEyes/src/visualization/vscode_ext/README.md

@@ -4,7 +4,27 @@
 
 ![](./images/lmp_vscode_ext.gif)
 
-### 2. 相关提示
+### 2. 安装与使用
+
+#### 2.1 导入插件
+
+![import_vscode_ext](./images/import_vscode_ext.png)
+
+安装成功如下：
+
+![lmp_ext_install_success](./images/lmp_ext_install_success.png)
+
+#### 2.2 设置
+
+- 启动grafana（可以在docker中启动），启动prometheus与BPF后端采集程序可以看到数据呈现
+- 设置IP地址与端口，默认端口是`localhost:3000`
+- 设置token
+
+![create_token](./images/create_token.png)
+
+> [grafana官方_创建token](https://grafana.com/docs/grafana/latest/administration/service-accounts/#create-a-service-account-in-grafana)
+
+![set_token](./images/set_token.png)
 
 设置可视化面板存放路径
 
@@ -20,7 +40,15 @@
 
 ![](./images/error_info.png)
 
-### 3. 开发注意事项
+### 3. 插件开发
+
+#### 3.1 开发
+
+安装yarn并且通过`yarn install`安装所需依赖
+
+>  tips: 按 F5 开启调试
+
+#### 3.2 开发注意事项
 
 1. yo code生成的框架，vscode最小版本是1.90，需要修改为1.74，不然我当前的版本。1.89无法运行插件
 2. tsconfig

MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/src/extension.ts

@@ -168,7 +168,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_cpu_watcher = {
               title: cpu_watcher_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现cpu_watcher的grafana的可视化面板",
               arguments: [
                 cpu_watcher_label
               ]
@@ -182,7 +182,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_proc_image = {
               title: proc_iamge_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现proc_image的grafana的可视化面板",
               arguments: [
                 proc_iamge_label
               ]
@@ -214,7 +214,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_net_manager = {
               title: net_manager_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现net_manager的grafana的可视化面板",
               arguments: [
                 net_manager_label
               ]
@@ -231,7 +231,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_mem_watcher = {
               title: mem_watcher_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现mem_watcher的grafana的可视化面板",
               arguments: [
                 mem_watcher_label
               ]
@@ -248,7 +248,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_stack_analyzer = {
               title: stack_analyzer_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现stack_analyzer的grafana的可视化面板",
               arguments: [
                 stack_analyzer_label
               ]
@@ -265,7 +265,7 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let command_kvm_watcher = {
               title: kvm_watcher_label,
               command: 'itemClick',
-              tooltip: "点击将呈现net_watcher的grafana的可视化面板",
+              tooltip: "点击将呈现kvm_watcher的grafana的可视化面板",
               arguments: [
                 kvm_watcher_label
               ]
@@ -390,4 +390,4 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
     }
 
 }
- */
+ */