웹 콘솔에서 사용자 지정 위젯을 사용하여 대시보드 만들기

아티클
11/06/2024

System Center Operations Manager에서 웹 콘솔은 웹 콘솔 서버에 연결된 브라우저를 사용하여 모든 컴퓨터에서 열 수 있는 관리 그룹에 대한 모니터링 인터페이스를 제공합니다. 다음 단계에서는 REST 기반의 새 API를 사용하는 새 HTML5 웹 콘솔의 대시보드에 사용자 지정 위젯을 추가하는 방법을 설명합니다. 지정된 HTML 코드를 실행하고 다양한 시각화에서 원하는 출력을 시각화합니다.

참고 항목

Operations Manager 2019 UR1 이상에서는 CSRF 공격을 방지하기 위해 CSRF(교차 사이트 요청 위조) 토큰을 지원합니다. Operations Manager 2019 UR1 이상을 사용하는 경우 CSRF 토큰을 초기화해야 합니다. HTML 스크립트는 CSRF 토큰을 초기화하지 않으면 작동하지 않습니다.

CSRF 토큰 초기화

Operations Manager 2019 UR1 이상에 적용할 수 있는 필수 작업입니다.

대시보드의 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"]);
            }
        }

온로드 함수에서 헤더 값을 requestHeaders로 변경합니다. 헤더 값이 없으면 아래와 같이 추가합니다.

예제:

CSRF 토큰 초기화

Operations Manager REST API 참조 사용

REST API 참조를 사용하여 대시보드에 운영 데이터를 표시하기 위해 사용자 지정 위젯으로 수행할 수 있는 사용 가능한 작업에 대해 알아봅니다. REST API를 익숙하지 않은 경우 아직 본 적이 없는 경우 이 API를 시작하는 방법에 대한 정보를 살펴보세요.

스크립트 구조

사용자 지정 위젯 스크립트에는 다음 세 가지 주요 섹션이 있습니다.

REST API 및 해당 속성 정의 이 섹션에서는 경고, 상태 또는 성능 데이터와 같은 시각화를 위해 Operations Manager에서 검색해야 하는 데이터를 정의합니다.
클래스 또는 그룹 식별, 심각도, 상태 상태 또는 특정 성능 개체 인스턴스와 같은 조건과 같이 시각화에 표시할 결과를 식별하는 비즈니스 논리를 지정합니다.
선택한 차트 종류에 따라 데이터를 렌더링하는 데 필요한 cloudflare.com 호스트되는 오픈 소스 라이브러리인 타사 시각화입니다.

스크립트가 시각화 에서 데이터를 쿼리하고 반환하기 위해 URL 매개 변수는 Operations Manager 웹 콘솔의 주소와 데이터 형식을 지정합니다. 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 Computer 클래스의 모든 개체를 지정하려면 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": { }),

property classId에 대해 지정된 동일한 클래스의 개체 하위 집합이 포함된 그룹을 지정하려면 objectId 값을 수정하고 그룹의 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 원형 차트
도넛 및 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>

다음 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 performanceData = [];

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/performance",
                type: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({
                        "id":"6f7e3306-beeb-2996-3795-7c1eafb925b8",
                        "performanceCounters":[
                            {
                                "objectname":"Health Service",
                                "countername":"agent processor utilization",
                                "instancename":""
                            }
                        ],
                        "legends":[
                            "target",
                            "path",
                            "lastvalue"
                        ],
                        "duration":4320
                    }),
                success: function (result) {
                    let dataDictionary = result.datasets[0].data;
                    let sum = new Array(24).fill(0.0);
                    let count = new Array(24).fill(0.0);
                    for (var key in dataDictionary) {
                        if(dataDictionary.hasOwnProperty(key)) {
                           var datetime = new Date(key);
                            datetime = convertUTCDateToLocalDate(datetime);
                            sum[datetime.getHours()] += dataDictionary[key];
                            count[datetime.getHours()]++;
                        }
                    }
                    let tDate = new Date();
                    tDate.setHours(0,0,0,0);
                    for(var i=0; i<24; i++) {
                        performanceData.push({
                            y: sum[i] / count[i],
                            x: new Date(tDate.getTime())
                        });
                        tDate.setHours(tDate.getHours()+1);
                    }
                    renderChart();
                }
            });
        }

        function convertUTCDateToLocalDate(date) {
            var newDate = new Date(date.getTime()+date.getTimezoneOffset()*60*1000);
            var offset = date.getTimezoneOffset() / 60;
            newDate.setMinutes(date.getMinutes() - date.getTimezoneOffset())
            return newDate;   
        }

        function renderChart() {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Average Processor Utilization for Last 3 Days"
                },
                axisX: {
                    labelFormatter: function(e) {
                        return CanvasJS.formatDate(e.value, "hh:mm tt");
                    }
                },
                data: [{
                    type: "spline",
                    dataPoints: performanceData
                }]
            });
            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: 100%; width: 100%;"></div>
</body>

</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 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 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Alerts representation in bar chart"
                },
                data: [{
                    type: "column",
                    dataPoints: [
                        { y: criticalCounter, label: "Critical" },
                        { y: warningCounter, label: "Warning" },
                        { y: informationCounter, label: "Information" }
                    ]
                }]
            });
            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>

다음 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 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 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new CanvasJS.Chart("chartContainer",
                {
                    theme: "theme2",
                    title: {
                        text: "Alerts representation in Pie chart"
                    },
                    data: [
                        {
                            type: "pie",
                            showInLegend: true,
                            toolTipContent: "{y} - #percent %",
                            legendText: "{indexLabel}",
                            dataPoints: [
                                { y: criticalCounter, indexLabel: "Critical" },
                                { y: warningCounter, indexLabel: "Warning" },
                                { y: informationCounter, indexLabel: "Information" }
                            ]
                        }
                    ]
                });
            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>

다음 HTML 코드는 경고 데이터를 사용하여 3D 원형 차트를 렌더링하는 방법을 보여 줍니다.

<!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 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: 'Alerts share per severity'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Alerts share',
        data: [
            {
                name: 'Critical',
                y: 48,
                sliced: true,
                selected: true
            },
            ['Warning', 39],
            ['Information', 13],
        ]
    }]
});

            chart.render();
        }
    </script>
   <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
</head>

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

</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 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 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new CanvasJS.Chart("chartContainer",
                {
                    theme: "theme2",
animationEnabled: true,
                    title: {
                        text: "Alerts representation in doughnut"
                    },
                    data: [
                        {
                            type: "doughnut",
                indexLabelFontFamily: "Garamond",       
                indexLabelFontSize: 20,
                startAngle:0,
                indexLabelFontColor: "dimgrey",       
                indexLabelLineColor: "darkgrey",
                toolTipContent: "{y} %",        
                            dataPoints: [
                                { y: criticalCounter, indexLabel: "Critical" },
                                { y: warningCounter, indexLabel: "Warning" },
                                { y: informationCounter, indexLabel: "Information" }
                            ]
                        }
                    ]
                });
            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>

다음 HTML 코드는 경고 데이터를 사용하여 3D 도넛형 차트를 렌더링하는 방법을 보여 줍니다.

<!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 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: 'Alerts representation in 3D donut'
    },
    subtitle: {
        text: ''
    },
    plotOptions: {
        pie: {
            innerSize: 100,
            depth: 45
        }
    },
    series: [{
        name: 'Number of alerts',
        data: [
        ['Critical', criticalCounter],
                                ['Warning', warningCounter ],
                                ['Information',  informationCounter]

        ]
    }]
});
            chart.render();
        }
    </script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px">
</div>
</head>

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

</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 informationCounter = 0;
        var warningCounter = 0;
var totalCounter =0;

        window.onload = function () {
            $.ajax({
                url: "/OperationsManager/data/alert",
                type: "POST",
                data: JSON.stringify({
                    "classId": null,
                    "objectIds": { "3c8ac4f3-475e-44dd-4163-8a97af363705": -1 },
                    "criteria": "((Severity = '0') OR (Severity = '1') OR (Severity = '2') OR (Severity = '3')) AND ((Priority = '2') OR (Priority = '1') OR (Priority = '0')) AND ((ResolutionState = '0') OR (ResolutionState = '247') OR (ResolutionState = '248') OR (ResolutionState = '249') OR (ResolutionState = '250') OR (ResolutionState = '254') OR (ResolutionState = '255'))",
                    "displayColumns":
                    [
                        "severity","monitoringobjectdisplayname","name","age","repeatcount","lastModified"
                    ]
                }),
                success: function (result) {
                    for (var i = 0; i < result.rows.length; i++) {
            switch(result.rows[i].severity)
            {
                case "Error":
                    criticalCounter++;
                    break;
                case "Information":
                    informationCounter++;
                    break;
                case "Warning":
                                    warningCounter++
                    break;
            }
                    }
                    renderChart();
                }
            });
        }

        function renderChart() {
            var chart = new Highcharts.chart('container', {
    title: {
        text: 'Alerts representation in combination chart'
    },
    xAxis: {
        categories: ['Critical', 'Warning', 'Information']
    },
    labels: {
        items: [{
            html: 'Total alerts generated',
            style: {
                left: '50px',
                top: '0px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Critical',
        data: [criticalCounter, 0, 0]
    }, {
        type: 'column',
        name: 'Warning',
        data: [0, warningCounter, 0]
    }, {
        type: 'column',
        name: 'Information',
        data: [0, 0, informationCounter]
    }, {
        type: 'spline',
        name: 'Spline chart',
        data: [criticalCounter, warningCounter, informationCounter],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }, {
        type: 'pie',
        name: 'Total consumption',
        data: [{
            name: 'Critical',
            y: criticalCounter,
            color: Highcharts.getOptions().colors[0] // Jane's color
        }, {
            name: 'Warning',
            y: warningCounter,
            color: Highcharts.getOptions().colors[1] // John's color
        }, {
            name: 'Information',
            y: informationCounter,
            color: Highcharts.getOptions().colors[2] // Joe's color
        }],
        center: [150, 100],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});


            chart.render();
        }
    </script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</head>

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

</html>

모든 컴퓨터에서 웹 브라우저를 열고 웹 호스트가 웹 콘솔을 호스팅하는 컴퓨터의 이름인 다음을 입력http://<web host>/OperationsManager합니다.
웹 콘솔의 왼쪽 창에서 + 새 대시보드를 선택합니다.
새 대시보드 만들기 페이지에서 만들려는 대시보드의 이름과 설명을 제공합니다.
관리 팩 드롭다운 목록에서 관리 팩을 선택하여 기존 봉인되지 않은 관리 팩에 대시보드를 저장하거나 관리 팩 드롭다운 목록 옆에 있는 새로 만들기를 선택하여 새 관리 팩을 만들어 대시보드를 저장하고 이름, 설명 및 선택적으로 버전 번호를 제공할 수 있습니다.
새 대시보드를 저장할 위치를 지정한 후 확인을 선택합니다.
새 대시보드의 이름과 설명을 제공한 후 저장을 선택합니다.
빈 대시보드에는 대시보드 이름, 위젯 추가, 대시보드 편집, 대시보드 삭제 및 페이지 위쪽의 전체 화면 옵션 보기가 표시됩니다.
위젯 선택 드롭다운 목록에서 사용자 지정 위젯을 선택합니다.
사용자 지정 위젯 창에서 이전 예제 중 하나를 사용하여 HTML 코드를 추가하는 위젯에 대한 조건을 선택하여 지원되는 차트 시각화 중 하나에서 모니터링 데이터를 시각화합니다.
위젯에 대한 이름, 설명 및 위젯 새로 고침 간격(기본 간격은 5분)을 제공하여 구성을 완료합니다. 위젯 저장을 선택하여 새 대시보드를 저장합니다.