通过

在 Web 控制台中使用自定义小组件创建仪表板

  • 项目

在 System Center Operations Manager 中，Web 控制台为管理组提供一个监视界面，该接口可在任何计算机上使用连接到 Web 控制台服务器的任何浏览器打开。 以下步骤介绍如何将自定义小组件添加到新的 HTML5 Web 控制台中的仪表板，该控制台使用基于 REST 的新 API。 它执行指定的 HTML 代码，并在各种可视化效果中可视化所需的输出。

注意

Operations Manager 2019 UR1 及更高版本支持跨站点请求伪造（CSRF）令牌，以防止 CSRF 攻击。 如果使用 Operations Manager 2019 UR1 或更高版本，则必须初始化 CSRF 令牌。 HTML 脚本在未初始化 CSRF 令牌的情况下不起作用。

初始化 CSRF 令牌

必需操作，适用于 Operations Manager 2019 UR1 及更高版本。

  1. 在仪表板的 HTML 标头中，添加以下代码：
var requestHeaders = {
            Accept: 'q=0.8;application/json;q=0.9',
            "Content-Type": "application/json"
        };
        InitializeCSRFToken();
        function InitializeCSRFToken() {
            var documentcookies = document.cookie.split('; ');
            var result = {};
            for (var i = 0; i < documentcookies.length; i++) {
                var cur = documentcookies[i].split('=');
                result[cur[0]] = cur[1];
            }
            if (result["SCOM-CSRF-TOKEN"] && result["SCOM-CSRF-TOKEN"] != null) {
                requestHeaders["SCOM-CSRF-TOKEN"] = decodeURIComponent(result["SCOM-CSRF-TOKEN"]);
            }
        }
  1. 在 onload 函数中，将标头值更改为 requestHeaders。 如果标头值不存在，请添加它，如下所示。

示例：

CSRF 令牌初始化

使用 Operations Manager REST API 参考

使用 REST API 参考了解可以使用自定义小组件执行的操作，以在仪表板中显示操作数据。 如果你不熟悉 REST API，请查看有关此 API 入门的信息（如果尚未看到）。

脚本结构

自定义小组件脚本有三个主要部分：

  1. 定义 REST API 及其属性。 本部分定义需要从 Operations Manager 检索哪些数据进行可视化，例如警报、状态或性能数据。
  2. 指定业务逻辑来标识可视化效果中显示的结果，例如标识类或组、严重性、运行状况状态或特定性能对象实例等条件。
  3. 第三方可视化，它是 cloudflare.com 上托管的开放源代码库，根据所选图表类型呈现数据所必需的。

小组件属性

为了使脚本在可视化效果中查询和返回数据， URL 参数指定 Operations Manager Web 控制台的地址和数据类型。 URL 语法 http:// servername>/operationsmanager/data/<dataitem，dataitem> 的值是下列值之一：<

  • 警报 表示监视警报
  • 状态 表示监视运行状况状态数据
  • 性能 表示监视性能数据
<!DOCTYPE HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var criticalCounter = 0;
        var informationCounter = 0;
        var warningCounter = 0;

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/alert",
                type: "POST",

若要确定每个数据类型的监视数据的范围，可以选择一个类来查看该类的所有实例，或者仅查看所选类的一部分对象，还可以包括一个组。 例如，若要指定 Windows Server DC 计算机类的所有对象，可以修改 classId 的属性值。

注意

这仅适用于状态数据，不适用于警报或性能。 对于性能数据，请指定组或监视的对象。

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var criticalCounter = 0;
        var informationCounter = 0;
        var warningCounter = 0;

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/alert",
                type: "POST",
                data: JSON.stringify({
                    "classId": "Microsoft.Windows.Library!Micr…ft.Windows.Server.DC.Computer",
                    "objectIds": { }),

若要指定一个组，该组包含为属性 classId 指定的同一类的对象子集，请修改 value objectIds 并指定组的 GUID。 该值必须以引号表示。

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var criticalCounter = 0;
        var informationCounter = 0;
        var warningCounter = 0;

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/alert",
                type: "POST",
                data: JSON.stringify({
                    "classId": null,
                    "objectIds": { "3c8ac4f3-475e-44dd-4163-8a97af363705": -1 }),

指定目标类和（可选）组以进一步限定结果范围后，可以指定条件，以根据一个或多个属性的值限制要显示的数据类型。

小组件示例

该小组件支持在以下图表类型中呈现监视数据：

  • 条形图（状态数据）
  • 样条图 （性能数据）
  • 条形图（警报数据）
  • 饼图和三维饼图
  • 甜甜圈和 3D 甜甜圈
  • 组合图
  • 堆积条形图

可以将图表类型配置为显示状态、性能和警报数据。 对于以下示例，将针对任何严重性（匹配特定解析状态）返回来自 Windows 计算机组的警报。

选择所需的选项卡以查看相应图表类型的 HTML 代码：

以下 HTML 代码演示如何呈现包含状态数据的条形图：

<!DOCTYPE HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var criticalCounter = 0;
        var healthyCounter = 0;
        var warningCounter = 0;
        var unmonitoredCounter = 0;

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/state",
                type: "POST",
                data: JSON.stringify({
                    "classId": "System.Library!System.Computer",
                    "objectIds": {
                        // Key value pairs => id: 0 (For objects)/-1 (For groups)
                        "1d62280e-f437-1369-316b-1e8659500e9a": -1
                    },
                    "criteria": "((HealthState = '0') OR (HealthState = '1') OR (HealthState = '2') OR (HealthState = '3') OR HealthState is null)",
                    "displayColumns": [
                        "healthstate",
                        "displayname",
                        "path",
                        "maintenancemode"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
                        switch (result.rows[i].healthstate) {
                            case "critical":
                                criticalCounter++;
                                break;
                            case "healthy":
                                healthyCounter++;
                                break;
                            case "warning":
                                warningCounter++;
                                break;
                            case "unmonitored":
                                unmonitoredCounter++;
                                break;
                        }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Health State of Windows Computers"
                },
                data: [{
                    type: "column",
                    dataPoints: [
                        { y: criticalCounter, label: "Critical", color: "Red" },
                        { y: healthyCounter, label: "Healthy", color: "Green" },
                        { y: warningCounter, label: "Warning", color: "Yellow" },
                        { y: unmonitoredCounter, label: "Unmonitored", color: "Gray" }
                    ]
                }]
            });
            chart.render();
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
    <title>CanvasJS Example</title>
</head>

<body>
    <div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>

</html>

将小组件添加到仪表板

  1. 在任何计算机上打开 Web 浏览器并输入 http://<web host>/OperationsManager，其中 Web 主机 是托管 Web 控制台的计算机的名称。

  2. 在 Web 控制台的左窗格中，选择“ + 新建仪表板”。

    显示 Web 控制台中选择“新建仪表板”的屏幕截图。

  3. 在“ 创建新仪表板 ”页上，提供要创建的仪表板的名称和说明。

    显示为新仪表板指定名称和说明的屏幕截图。

  4. 可以通过从“管理包”下拉列表中选择管理包，将仪表板保存到现有的未密封管理包中，也可以通过选择“管理包”下拉列表旁边的“新建”来保存仪表板，并提供名称、说明和可选版本号。

    显示为新 MP 指定名称和说明的屏幕截图。

  5. 指定保存新仪表板的位置后，选择“ 确定”。

  6. 提供新仪表板的名称和说明后，选择“ 保存 ”。

  7. 在空白的空仪表板上，你将看到仪表板名称、 添加小组件、 编辑仪表板、 删除仪表板和 在页面顶部的全屏 选项中查看。

    显示“新建仪表板”画布的屏幕截图。

  8. 从“选择小组件”下拉列表中选择“自定义小组件”。

  9. 在“自定义小组件”窗格中，使用前面的示例之一为添加 HTML 代码的小组件选择条件，以可视化其中一个受支持的图表可视化效果中的监视数据。

    显示“为仪表板配置自定义小组件”的屏幕截图。

  10. 通过为小组件提供 名称、 说明和 小组件刷新间隔 （默认间隔为 5 分钟）来完成配置。 选择“保存小组件”以保存新仪表板。

创建小组件后，它将显示 HTML 代码的输出。

显示仪表板中磁贴小组件的已完成示例的屏幕截图。