Merge pull request #865 from ziyangfu/develop

MagicEyes: treeview shows via parse config file now

MagicEyes/src/visualization/vscode_ext/README.md

@@ -26,7 +26,7 @@
 
 ![set_token](./images/set_token.png)
 
-设置可视化面板存放路径
+- 设置可视化面板存放路径
 
 > 注意：别忘记面板路径后面加 "/"
 
@@ -40,6 +40,50 @@
 
 ![](./images/error_info.png)
 
+- 设置工具配置文件
+
+请将配置文件路径输入在设置中，如`/home/fzy/lmp_tool_ext_config.json`，输入完成后，敲击enter键，程序将根据配置文件中的子系统与工具，生成左侧侧边栏的按钮。
+
+配置文件写法参照 `.../MagicEyes/src/visualization/vscode_ext/tool_config_sample/lmp_tool_ext_config.json`
+
+#### 2.3 如何增加工具
+
+配置文件如下。假如有一个工具，名为 mem_checker，输入 memory子系统，则 subsystem_list 不用修改，只需要在内存子系统处增加即可。如果有一个工具，名为 V4L2_tracer，属于 media子系统，则需要在subsystem_list中增加 media 子系统，并在 subsystem 下相应增加，不再赘述。
+
+```json
+{
+    "name" : "lmp_tool_vscode_extension_config",
+    "version" : "0.0.1",
+    "subsystem_list" : [
+        "CPU",      
+        "memory",
+        "fs",
+        "network",
+        "system_diagnosis",
+        "hypervisor"
+    ],
+    "subsystem" : [
+        {
+            "description" : "Linux CPU子系统观测工具集",
+            "tools" : [......]
+        },
+        {
+            "description" : "Linux 内存子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "mem_watcher",
+                    "description" : "内存观测"
+                },
+        		{
+                    "name": "mem_checker",
+                    "description" : "内存检查"
+                }
+            ]
+        }
+} 
+```
+
+
 ### 3. 插件开发
 
 #### 3.1 开发
@@ -70,5 +114,12 @@
 }
 ```
 
+3.  打包vsix
+
+```bash
+# 进入插件开发文件夹
+vsce package
+```
+
 
 

MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/package.json

@@ -101,7 +101,13 @@
           "default": "/home/fzy/Desktop/panels/",
           "description": "the default panels search path",
           "order": 4
-        }   
+        },
+        "grafana-vscode.default_tool_config_file": {
+          "type": "string",
+          "default": "/home/fzy/lmp_tool_ext_config.json",
+          "description": "the default tool config file",
+          "order": 5
+        }     
       }
     },
     "viewsContainers": {
@@ -174,7 +180,7 @@
     "@types/uuid": "^9.0.6",
     "axios": "^1.4.0",
     "cors": "^2.8.5",
-    "express": "^4.19.2",
+    "express": "^4.18.2",
     "http-proxy": "^1.18.1",
     "http-proxy-middleware": "^2.0.6",
     "open": "^8.4.2",

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

@@ -10,7 +10,10 @@ import { setVersion } from "./util";
 import * as fs from 'fs'    // fzy: 为了检查面板文件是否存在
 
 
-let default_panel_path = "/home/fzy/Desktop/panels/"  // fzy: 为了检查面板文件是否存在
+let default_panel_path = "/home/fzy/Desktop/panels/";  // fzy: 为了检查面板文件是否存在
+let default_tool_config_file = "/home/fzy/lmp_tool_ext_config.json";
+let sub_key = 0;   // 子系统计数，用于与element.label进行匹配
+
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
@@ -71,7 +74,14 @@ export async function activate(ctx: vscode.ExtensionContext) {
       default_panel_path = String(settings.get("default_panel_path"));
       //console.log("path = ", default_panel_path);
     }
-
+    // fzy, 让用户可以在设置中修改json配置文件放置路径及配置文件名字
+    if (event.affectsConfiguration("grafana-vscode.default_tool_config_file")) {
+      const settings = vscode.workspace.getConfiguration("grafana-vscode"); 
+      default_tool_config_file = String(settings.get("default_tool_config_file"));
+       //console.log("file = ", default_tool_config_file);
+       sub_key = 0; // 全局变量先清零，不然 subsystem无法匹配
+       TreeViewProvider.initTreeViewItem();
+    }
   });
 
   vscode.commands.registerCommand('grafana-vscode.setPassword', async () => {
@@ -97,6 +107,7 @@ export function deactivate() {
 // ---------------------------------------------------------------------------------
 // fzy
 import { CancellationToken, Event, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, window} from "vscode";
+import { json } from "stream/consumers";
 
 // 扩展 TreeItem
 /*
@@ -126,15 +137,26 @@ export class TreeItemNode extends TreeItem {
 */
 
 export class TreeViewProvider implements TreeDataProvider<TreeItem> {
+
     onDidChangeTreeData?: Event<void | TreeItem | TreeItem[] | null | undefined> | undefined;
 
     getTreeItem(element: TreeItem): TreeItem | Thenable<TreeItem> {
         return element;
     }
     getChildren(element?: TreeItem | undefined): ProviderResult<TreeItem[]> {
+        let jsonData: any; // 保存 json 数据
+        jsonData = readLmpConfig();    // 读取json配置文件信息
+
+
         let arr: TreeItem[] = new Array();
           // treeview 根节点
         if (element == undefined) {
+            for (const key in jsonData.subsystem_list) {
+              let item: TreeItem = new TreeItem(jsonData.subsystem_list[key], TreeItemCollapsibleState.Expanded);
+              item.description = jsonData.subsystem[key].description;
+              arr.push(item);
+            } 
+            /*
             let item1: TreeItem = new TreeItem("CPU", TreeItemCollapsibleState.Expanded);
             item1.description = "Linux CPU子系统观测工具集";
             arr.push(item1);
@@ -154,11 +176,41 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
             let item5: TreeItem = new TreeItem("hypervisior", TreeItemCollapsibleState.Expanded);
             item5.description = "Linux 虚拟化子系统工具集";
             arr.push(item5);
+            */
 
             return arr;
         } 
         // treeview 子节点
         else {
+          //for (let sub_key = 0; sub_key <= 5; sub_key++) {
+            if (element.label == jsonData.subsystem_list[sub_key]) { // 遍历所有子系统
+              //console.log("jsonData.subsystem_list[key] = ", jsonData.subsystem_list[sub_key]);
+              for (const tool_num in jsonData.subsystem[sub_key].tools) {  // 遍历子系统下的所有工具
+                let tool_name = jsonData.subsystem[sub_key].tools[tool_num].name;
+                let tool_description = jsonData.subsystem[sub_key].tools[tool_num].description;
+                let item1:TreeItem = new TreeItem(tool_name, TreeItemCollapsibleState.None);
+                item1.description = tool_description;
+                let tool_command = {
+                  title: tool_name,
+                  command: 'itemClick',
+                  tooltip: "点击将呈现工具的grafana可视化面板",
+                  arguments: [
+                    tool_name
+                  ]
+                }
+                item1.command = tool_command;
+                arr.push(item1);
+              }
+              sub_key++;   // key + 1, 匹配下一个子系统
+              //console.log("sub_key = ", sub_key);
+              return arr;
+            }
+            else {
+              return null;
+            }
+      }
+    }
+          /*
            if (element.label == 'CPU') {
             // *****************************************************************************
             //let item1: TreeItem = new TreeItem("cpu_watcher", TreeItemCollapsibleState.None);
@@ -278,14 +330,42 @@ export class TreeViewProvider implements TreeDataProvider<TreeItem> {
            else {
             return null;
            }
+          
         }
     }
+    */
     public static initTreeViewItem(){
         const treeViewProvider = new TreeViewProvider();
         window.registerTreeDataProvider('lmp_visualization.panel',treeViewProvider);
     }
 
 }
+
+
+export function readLmpConfig() {
+  let data:any;
+  if (fs.existsSync(default_tool_config_file)) //判断是否存在此文件
+  {
+    try {
+      //读取文件内容，并转化为Json对象
+
+      data = JSON.parse(fs.readFileSync(default_tool_config_file, "utf8"));
+      // console.log(jsonData);
+      //获取Json里key为data的数据
+      //const data = userBugsJson['data'];  
+    } 
+    catch (error){
+      console.error('Error parsing JSON:', error);
+    }
+  }
+  else {
+    console.error("no config file");
+    let config_search_info =" json配置文件不存在,请检查！"
+    vscode.window.showErrorMessage(config_search_info);
+  }
+  return data;    
+}
+
 // fzy end
 // ---------------------------------------------------------------------------------
 

MagicEyes/src/visualization/vscode_ext/tool_config_sample/lmp_tool_ext_config.json

@@ -0,0 +1,80 @@
+{
+    "name" : "lmp_tool_vscode_extension_config",
+    "version" : "0.0.1",
+    "subsystem_list" : [
+        "CPU",
+        "memory",
+        "fs",
+        "network",
+        "system_diagnosis",
+        "hypervisor"
+    ],
+    "subsystem" : [
+        {
+            "description" : "Linux CPU子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "cpu_watcher",
+                    "description" : "cpu观测"
+                },
+                {
+                    "name": "proc_image",
+                    "description" : "进程画像"
+                }
+            ]
+        },
+        {
+            "description" : "Linux 内存子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "mem_watcher",
+                    "description" : "内存观测"
+                }
+            ]
+        },
+        {
+            "description" : "Linux 文件子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "fast_fuse",
+                    "description" : "FUSE 性能优化"
+                }
+            ]
+        },
+        {
+            "description" : "Linux 网络子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "net_watcher",
+                    "description" : "网络观测"
+                },
+                {
+                    "name": "net_manager",
+                    "description" : "网络优化与加速"
+                }
+            ]
+        },
+        {
+            "description" : "Linux 系统诊断子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "stack_analyzer",
+                    "description" : "栈调用分析器"
+                }
+            ]
+        },
+        {
+            "description" : "Linux 虚拟化子系统观测工具集",
+            "tools" : [
+                {
+                    "name": "kvm_watcher",
+                    "description" : "kvm状态分析"
+                }
+            ]
+        }
+    ]
+}
+
+
+
+