自定义小部件
最后更新于:
本页面内容
ManageEngine EventLog Analyzer 中的小部件是可嵌入的用户界面组件,您可通过我们的JS 软件开发工具包自行创建。这些小部件能无缝调用第三方应用程序的数据,执行特定功能。
例如,通过在事件日志分析器中创建自定义小部件,您可将EDR或邮件安全解决方案的数据无缝集成至分析器平台,从而实现单一平台监控、分析及执行必要操作的统一管理。
- 所有版本的事件日志分析器均可创建自定义小部件。
- 您最多可在事件日志分析器中创建200个小部件。
EventLog Analyzer 中的小部件类型
仪表板组件
您可在EventLog Analyzer中为仪表板创建自定义小部件。在"设置→管理员设置→开发者空间→自定义小部件"路径创建后,通过"添加标签页"菜单将其添加至仪表板,该小部件将显示在仪表板设置中。
具有查看或创建仪表板小部件权限的用户可查看自定义小部件。
如何在仪表板创建自定义小部件
从右上角下拉菜单中选择“添加小工具”。
选择要添加至仪表板的自定义小部件,然后点击添加。
自定义报表小部件
在EventLog Analyzer中,小工具可作为自定义报表添加。在设置 → 管理员 → 开发者空间 → 自定义小工具下创建自定义小工具后,可通过导航至报表 → 管理自定义报表 → 添加报表,并将报表类型选为自定义小工具来添加。
注意:仅具备自定义报表查看或创建权限的用户可查看自定义小部件。
如何在自定义报表中创建自定义小部件
点击添加自定义报表按钮。
点击“报表类型”下拉菜单。
在报表类型下拉菜单中选择"自定义小部件"。
在"自定义小部件"下选择所需的自定义小部件。
然后点击添加,即可创建包含该自定义组件的自定义报表。
事件工作台小部件
可在事件日志分析器中将小部件添加至事件工作台。此操作可直接通过设置中的"自定义小部件"选项卡完成,使自定义小部件无缝集成至事件工作台。
注意:仅具备事件工作台查看权限的用户可查看自定义小部件。
如何在事件工作台中查看自定义小部件
选择需要分析的字段,然后点击“转到事件工作台”。
所选字段的可用小工具(包括所有自定义小工具)将以标签页形式展示。
在事件日志分析器中添加自定义小部件
可通过Zoho扩展工具包(ZET)向EventLog Analyzer添加自定义小部件。
使用 ZET 创建自定义小部件
ZET(Zoho Extension Toolkit)是一款命令行界面(CLI),旨在帮助开发人员为 ManageEngine EventLog Analyzer 构建和打包自定义小部件。
命令行界面(CLI)是一种基于文本的交互方式,用户可通过终端或命令提示符直接输入特定指令、接收响应并执行操作。相较于图形用户界面(GUI)的视觉交互,CLI为开发者提供了更简洁高效的工作方式,尤其在应用程序开发、软件管理乃至操作系统构建领域具有显著优势。
以下是使用ZET构建自定义小部件,并将其打包集成到ManageEngine EventLog Analyzer中以增强功能的方法。
安装必要组件
前提条件
- 访问 Node.js 官方网站:https://nodejs.org/en/download/
- 根据您的操作系统(Windows、macOS 或 Linux)选择对应版本并下载安装程序。
- 安装完成后,请在终端中运行以下命令验证Node.js和npm是否正确安装:
检查Node.js版本
node -v
这将返回已安装的Node.js版本,例如v14.18.1。
检查npm版本
npm -v
这将返回已安装的npm版本,例如:6.14.12。
若两条命令均返回版本号,则表示 Node.js 和 npm 已成功安装。
安装 Zoho 扩展工具包 (ZET) 的命令行界面
要安装 Zoho 扩展工具包 (ZET) CLI,请执行以下步骤:
安装 ZET CLI 包
运行以下命令安装 zapps CLI node 包:
npm install -g zoho-extension-toolkit
验证安装
安装完成后,运行以下命令确认安装是否成功:
$ zet //
若安装成功,将显示与zet命令相关的帮助信息。
使用 ZET 创建新项目
请按以下步骤使用 Zoho 扩展工具包 (ZET) 创建新项目:
初始化新项目
运行以下命令创建新项目:
zet init
该命令将显示可用的Zoho和ManageEngine服务列表。选择您要创建项目模板的Log360 Cloud服务。
验证服务器启动
项目创建完成且本地开发服务器启动后,请在浏览器中打开以下任一URL验证状态:
- 清单文件:https://localhost:5000/plugin-manifest.json
- 组件预览:https://localhost:5000/app/widget.html
若这些网址加载正常,则项目创建成功且本地服务器正在运行。
在小部件项目中包含资源
所有用于渲染自定义小部件的必要文件均存储在项目"app"文件夹内。
启动服务器
要本地运行应用程序并在沙盒实例中进行测试,请使用以下命令启动本地HTTPS服务器:
$ zet run
这将在本地机器的5000端口启动HTTPS服务器。执行命令前请确保该端口未被其他进程占用。
验证服务器
服务器启动后,请在浏览器中访问以下网址确认运行状态:
https://127.0.0.1:5000/app/widget.html
若页面正常加载,则表示您的组件已在本地环境运行,可进行测试。
应用程序验证与打包
上传应用程序前,必须正确验证并打包。请按以下步骤操作:
验证应用程序
运行以下命令检查应用程序包是否存在问题:
$ zet validate
该命令将扫描应用程序是否存在违规情况。若检测到问题,必须在继续上传前予以解决。
打包应用程序
验证成功后,运行以下命令生成可上传的ZIP文件:
$ zet pack
该操作将在项目目录的"dist"文件夹内生成ZIP文件。打包后的文件可上传至EventLog Analyzer进行部署。
将创建的小工具添加至EventLog Analyzer
请按以下步骤将自定义小部件添加至EventLog Analyzer:
a) 进入开发者空间
在EventLog Analyzer中依次进入设置 → 开发者空间 → 自定义小部件。
b) 查看示例小部件
"示例小部件"部分将引导您查看EventLog Analyzer内置的预制小部件。
- 这些默认小部件作为示例,帮助您理解如何设计和使用自定义小部件。
- 您可以下载并解压示例小部件,然后在代码编辑器中打开它们以查看其工作原理。
c) 创建新小工具
创建新小部件时,请点击创建自定义小部件 → 立即创建。
- EventLog Analyzer 还提供可用的控件列表,您可通过选择自定义控件来添加。
d) 填写小部件创建表单
在创建自定义小部件表单中:
- 提供小部件名称和描述。
- 从以下选项中选择小部件类型:
- 仪表板小部件
- 自定义报表小部件
- 事件工作台小部件
- 选择“查看小部件位置”以确定自定义小部件在事件日志分析器中的放置位置。
e) EventLog Analyzer中的自定义小部件创建模式
EventLog Analyzer支持两种自定义小部件创建模式:
1. 开发模式
- 在此模式下,您可在部署前本地运行并测试自定义控件。
- 通过运行以下命令启动小部件:
- 将小部件网址(例如:https://localhost:5000/app/widget.html)添加至事件日志分析器的"小部件网址"输入框。
$ zet run
- 对小部件代码的任何更改都会自动反映在事件日志分析器中(无论是在仪表板还是自定义报表中)。
- 事件工作台小部件不支持开发模式,因其需在插件清单文件(plugin-manifest.json)中进行字段映射。
- 开发模式下的自定义组件仅对开发者可见,其他用户无法查看。
2. 部署模式
在部署模式下,您可通过两种方式将小部件添加至EventLog Analyzer:
a) 上传 ZIP 文件(ZET 软件包)
- 开发完成后,请使用以下命令打包自定义小部件:
复制到剪贴板
$ zet pack
- 这将在项目dist文件夹内生成一个ZIP文件。
- 将此ZIP文件上传至EventLog Analyzer即可部署小部件。
b) 外部URL嵌入
- 除ZET外,您还可在EventLog Analyzer内嵌入任意外部URL作为小工具。
- 此选项可实现第三方仪表板或网络应用的无缝集成。
如何在EventLog Analyzer中添加自定义小部件
自定义小部件可添加至事件日志分析器的以下区域:
在仪表板中添加自定义小部件
创建自定义小部件的HTML页面后,请在widgets列表内的plugin-manifest.json文件中添加以下配置:
{ "location": "dashboard", "url": "/app/widget.html", "name": "示例事件日志分析器小部件", }
这将确保小工具显示在EventLog Analyzer仪表板上。
向自定义报表添加自定义小部件
若需将自定义小部件添加至自定义报表,请在widgets列表内的plugin-manifest.json文件中添加以下配置:
{ "location": "reports", "url": "/app/widget.html", "name": "示例事件日志分析器小部件", }
此配置允许将小部件用作自定义报表小部件。
将自定义小部件添加至事件工作台
要在事件工作台中包含自定义小部件,请使用以下配置:
{ "location": "incident-workbench", "url": "/app/incident-workbench.html", "name": "安全分析", "options": { "fieldName":"FILEHASH" } }
这确保小部件与事件工作台集成,实现实时事件分析。
重要提示
添加后修改并上传自定义小部件的名称属性,将导致该小部件从其映射模块(仪表板、报表或事件工作台)中移除。
以下是事件日志分析器中允许的位置:
- "仪表板"
- "报表"
- "事件工作台"
在事件工作台中添加自定义小部件与其他模块不同,需要将特定字段映射到小部件。添加小部件时,必须指定字段名称与自定义小部件的映射选项。
以下为部分重要字段:
- 主机名 →设备名称(数据/日志收集源)
- 用户名 →与数据/日志关联的用户
- IP地址 →数据/日志中捕获的IP地址
- 文件名 →数据/日志中的文件名称
- 进程名称 →数据/日志中的进程名称
- 文件哈希值 →数据/日志中文件的哈希值
- 电子邮件 →数据/日志中捕获的用户电子邮件
- DOMAINNAME →数据/日志中捕获的AD域名称
- 端口 →数据/日志中实体关联的端口
- PROTOCOL →数据/日志中实体关联的协议
向事件工作台自定义小部件传递日志数据
点击与事件工作台关联的字段时,该行对应的日志数据将从表格数据传递至自定义小部件。
日志数据结构示例:
{
"logUUID": 430453503444,
"HOSTNAME": "EVENT-TEST",
"USERNAME": "admin",
...
}
如何编辑自定义小部件
- 前往 设置 -> 管理员 -> 开发者空间 -> 自定义小部件
- 在管理自定义小部件表格中,点击编辑图标修改自定义小部件
编辑自定义控件时,某些修改可能影响其与其他模块的关联关系。
保留关联关系的方法:
- 小部件名称必须保持不变。
- ZIP上传时,使用plugin-manifest.json文件内的名称
- 开发模式或外部托管时,使用表单中输入的小部件名称。
- 只要保持小部件名称不变,即可安全更新小部件URL或ZIP内容。
注意:小部件名称是维持关联关系的主键。
关联关系将被移除的情况:
- 小工具类型被更改或移除。
- 上传了新ZIP文件且plugin-manifest.json中的小部件名称不同。
- 小部件源在以下模式间切换:
- ZIP ↔ 开发模式 / 外部托管
- 开发模式/外部托管 ↔ ZIP
→ 仅当小部件名称(在表单或ZIP中)也发生变更时适用。
注意:为避免关联中断,编辑时请保持小部件来源与名称不变。
如何删除自定义小部件
- 导航至设置 → 管理员 → 开发者空间 → 自定义小部件。
- 在管理自定义小部件表格中,点击删除图标移除该自定义小部件。
JS SDK:
JS SDK提供一组JavaScript函数,用于将EventLog Analyzer功能集成到自定义组件中。这些API可实现组件与平台的无缝交互。
小部件用法:
LOGS360CLOUD.init()
此函数作为基础调用,用于建立自定义小部件与产品间的连接。其他 JS API 仅在初始化完成后定义。
返回Promise
LOGS360CLOUD.init().then(function (res) { console.log(res); });
LOGS360CLOUD.get(options)
从产品服务器获取产品数据(如元数据)或自定义控件中的任何输入数据。注意:此函数仅可调用Logs360 API。
var options ={url:"/api/v2/log-types"}; LOGS360CLOUD.get(options).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); });
LOGS360CLOUD.add(options)
注意:请确保仅使用 api/v2 接口。
通过自定义组件向服务器添加数据。请注意,此功能仅可调用Logs360 API。
var options = { url: "/api/v2/search", params: { query: query, start_time: startTime, end_time: endTime, from: '1', limit: '1000', log_types: [logtype] }}; LOGS360CLOUD.add(options).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); });
LOGS360CLOUD.showLoader(opts)
该函数用于在组件窗口显示加载指示器。通过视觉提示当前正在进行的数据获取、API调用或后台计算等操作,有助于提升用户体验。
LOGS360CLOUD.showLoader(opts).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); });
LOGS360CLOUD.hideLoder(opts)
该函数用于从组件窗口移除或隐藏加载指示器。通常在数据检索或API执行等操作完成后调用。
LOGS360CLOUD.hideLoder(opts).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); });
LOGS360CLOUD.showNotification(opts)
该函数用于在组件顶部显示通知。此通知可用于向用户传达重要更新、告警或进程状态。
var opts = { type: "success" , message: "消息显示成功",autoClose:true,duration:2000}; LOGS360CLOUD.showNotification(opts).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); });
LOGS360CLOUD.HideNotification(opts)
该函数用于隐藏或移除小部件窗口中的顶部通知。当需要在通知自动消失前手动关闭,或根据用户交互清除通知时,此功能尤为实用。
LOGS360CLOUD.hideLoader(opts).then(function(response) { console.log(response); }).catch(function(response) { console.log(response); })
LOGS360CLOUD.getConnections()
获取所有成功安装的API应用程序的详细信息。
LOGS360CLOUD.getConnections().then(function(res){ console.log(res); });
LOGS360CLOUD.invokeUrl()
该函数通过调用API从集成第三方应用获取数据。支持URL、HTTP方法、头部、参数及有效负载等多项配置选项,实现与外部服务的无缝交互。
let headers = [{ "headerName": "accept", "headerValue": "application/vnd.atlas.2023-01-01+json"}]; let params = [{"bodyParamName": "path", "bodyParamValue": "/dharun_test/sub folder/_ My Paper doc.paper" }]; var opts = { url: "https://cloud.mongodb.com/api/atlas/v2/groups?envelope=false&includeCount=true&itemsPerPage=100&pageNum=1&pretty=false", method : "GET", connectionLinkName: "mongotest", headers : headers, params: params }; LOGS360CLOUD.invokeUrl(opts).then( function(res){ console.log(res); });