diff --git a/MagicEyes/src/visualization/vscode_ext/README.md b/MagicEyes/src/visualization/vscode_ext/README.md index 17cd1fc5f..cc57b0415 100644 --- a/MagicEyes/src/visualization/vscode_ext/README.md +++ b/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 +``` + diff --git a/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/package.json b/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/package.json index 957b998e1..967eb2fd8 100644 --- a/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/package.json +++ b/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", diff --git a/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/src/extension.ts b/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/src/extension.ts index 2b339d898..152b3c7b2 100644 --- a/MagicEyes/src/visualization/vscode_ext/lmp_ext_vscode/src/extension.ts +++ b/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 { + onDidChangeTreeData?: Event | undefined; getTreeItem(element: TreeItem): TreeItem | Thenable { return element; } getChildren(element?: TreeItem | undefined): ProviderResult { + 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 { 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 { 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 // --------------------------------------------------------------------------------- diff --git a/MagicEyes/src/visualization/vscode_ext/lmp_grafana-vscode-0.0.16.vsix b/MagicEyes/src/visualization/vscode_ext/lmp_grafana-vscode-0.0.16.vsix deleted file mode 100644 index 3f2f86320..000000000 Binary files a/MagicEyes/src/visualization/vscode_ext/lmp_grafana-vscode-0.0.16.vsix and /dev/null differ diff --git a/MagicEyes/src/visualization/vscode_ext/lmp_vscode_ext_0.01.vsix b/MagicEyes/src/visualization/vscode_ext/lmp_vscode_ext_0.01.vsix new file mode 100644 index 000000000..9aea7d416 Binary files /dev/null and b/MagicEyes/src/visualization/vscode_ext/lmp_vscode_ext_0.01.vsix differ diff --git a/MagicEyes/src/visualization/vscode_ext/tool_config_sample/lmp_tool_ext_config.json b/MagicEyes/src/visualization/vscode_ext/tool_config_sample/lmp_tool_ext_config.json new file mode 100644 index 000000000..0102d7e69 --- /dev/null +++ b/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状态分析" + } + ] + } + ] +} + + + +