本地 云
下载PDF
此功能适用于 EventLog Analyzer、Log360 和 Log360 Cloud。

# 自定义小部件

最后更新于：2025年9月12日

本页面内容

- 事件日志分析器中的小部件类型
- 仪表板小部件
- 自定义报表小部件
- 事件工作台小部件
- 在事件日志分析器中添加自定义小部件
- 安装 Zoho 扩展工具包 (ZET) 的 CLI
- 在小部件项目中包含资源
- 应用程序验证与打包
- 将创建的小部件添加到事件日志分析器
- 如何在事件日志分析器中包含自定义小部件
- 将日志数据传递至事件工作台中的自定义小部件
- JS SDK

ManageEngine EventLog Analyzer 中的小部件是可嵌入的用户界面组件，您可通过我们的JS 软件开发工具包自行创建。这些小部件能无缝调用第三方应用程序的数据，执行特定功能。

例如，通过在事件日志分析器中创建自定义小部件，您可将EDR或邮件安全解决方案的数据无缝集成至分析器平台，从而实现单一平台监控、分析及执行必要操作的统一管理。

注意

- 所有版本的事件日志分析器均可创建自定义小部件。
- 您最多可在事件日志分析器中创建200个小部件。

注意

创建首个小部件后，这些步骤将被小部件列表取代。请参照此图轻松完成设置步骤。

参考网址：

1. Node.js
2. Zoho Extension Toolkit

## 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. 开发模式

- 在此模式下，您可在部署前本地运行并测试自定义控件。
- 通过运行以下命令启动小部件：
复制到剪贴板

$ zet run

- 将小部件网址（例如：https://localhost:5000/app/widget.html）添加至事件日志分析器的"小部件网址"输入框。

注意

- 对小部件代码的任何更改都会自动反映在事件日志分析器中（无论是在仪表板还是自定义报表中）。
- 事件工作台小部件不支持开发模式，因其需在插件清单文件（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",
      ...
    }

#### 如何编辑自定义小部件

1. 前往 设置 -> 管理员 -> 开发者空间 -> 自定义小部件
2. 在管理自定义小部件表格中，点击编辑图标修改自定义小部件

编辑自定义控件时，某些修改可能影响其与其他模块的关联关系。

#### 保留关联关系的方法：

1. 小部件名称必须保持不变。
   - ZIP上传时，使用plugin-manifest.json文件内的名称
   - 开发模式或外部托管时，使用表单中输入的小部件名称。
2. 只要保持小部件名称不变，即可安全更新小部件URL或ZIP内容。

注意：小部件名称是维持关联关系的主键。

#### 关联关系将被移除的情况：

1. 小工具类型被更改或移除。
2. 上传了新ZIP文件且plugin-manifest.json中的小部件名称不同。
3. 小部件源在以下模式间切换：
   - ZIP ↔ 开发模式 / 外部托管
   - 开发模式/外部托管 ↔ ZIP

     → 仅当小部件名称（在表单或ZIP中）也发生变更时适用。

注意：为避免关联中断，编辑时请保持小部件来源与名称不变。

#### 如何删除自定义小部件

1. 导航至设置 → 管理员 → 开发者空间 → 自定义小部件。
2. 在管理自定义小部件表格中，点击删除图标移除该自定义小部件。

## JS SDK：

JS SDK提供一组JavaScript函数，用于将EventLog Analyzer功能集成到自定义组件中。这些API可实现组件与平台的无缝交互。

### 小部件用法：

注意：服务名称 LOGS360CLOUD 同时适用于 EventLog Analyzer 和 Log360 Cloud。

#### 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);
    });