Criar um dashboard com o widget Personalizado na consola Web

Importante

Esta versão do Operations Manager chegou ao fim do suporte. Recomendamos que atualize para o Operations Manager 2022.

No System Center Operations Manager, a consola Web fornece uma interface de monitorização para um grupo de gestão que pode ser aberto em qualquer computador através de qualquer browser que tenha conectividade ao servidor da consola Web. Os passos seguintes descrevem como adicionar um widget Personalizado a um dashboard na nova consola Web HTML5, que está a utilizar uma nova API baseada em REST. Executa o código HTML especificado e visualiza a saída pretendida em várias visualizações.

Nota

O Operations Manager 2019 UR1 e posterior suporta tokens de Falsificação de Pedidos Entre Sites (CSRF) para impedir ataques CSRF. Se estiver a utilizar o UR1 do Operations Manager 2019 ou posterior, tem de inicializar o token CSRF. Os scripts HTML não funcionam sem a inicialização do token CSRF.

Inicializar o token CSRF

Ação necessária, aplicável ao Operations Manager 2019 UR1 e posterior.

  1. No cabeçalho HTML do dashboard, adicione o seguinte código:
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. Na função onload, altere o valor do cabeçalho para requestHeaders. Se o valor do cabeçalho não existir, adicione-o conforme mostrado abaixo.

Exemplo:

Inicialização do token CSRF

Utilizar a referência da API REST do Operations Manager

Utilize a referência da API REST para saber mais sobre as operações disponíveis que pode realizar com o widget personalizado para apresentar dados operacionais no dashboard. Se não estiver familiarizado com a API REST, veja as informações sobre como começar a utilizar esta API , caso ainda não a tenha visto.

Estrutura do script

Um script Widget Personalizado tem três secções principais:

  1. Definir a API REST e as respetivas propriedades. Esta secção define que dados têm de ser obtidos a partir do Operations Manager para visualização, como alertas, dados de estado ou de desempenho.
  2. Especifique a lógica de negócio para identificar os resultados a apresentar na visualização, como identificar uma classe ou grupo, condições como gravidade, estado de funcionamento ou uma instância de objeto de desempenho específica.
  3. Visualização de terceiros, que são bibliotecas open source alojadas em cloudflare.com que são necessárias para compor os dados consoante o tipo de gráfico selecionado.

Propriedades do Widget

Para que o script consulte e devolva dados na visualização, o parâmetro URL especifica o endereço da consola Web do Operations Manager e o tipo de dados. A sintaxe do URL é http://< servername>/operationsmanager/data/<dataitem> e o valor de dataitem é um dos seguintes:

  • alerta representa um alerta de monitorização
  • o estado representa a monitorização dos dados do estado de funcionamento
  • o desempenho representa a monitorização de dados de desempenho
<!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",

Para definir o âmbito dos dados de monitorização para cada tipo de dados, pode selecionar uma classe para ver todas as instâncias dessa classe ou para ver apenas um subconjunto de objetos da classe selecionada, também pode incluir um grupo. Por exemplo, para especificar todos os objetos da classe Computador DC do Windows Server, modificaria o valor da propriedade para classId.

Nota

Isto aplica-se apenas a dados de estado, não a alertas ou desempenho. Para dados de desempenho, especifique um grupo ou objeto monitorizado.

<!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": { }),

Para especificar um grupo que contém um subconjunto de objetos da mesma classe especificada para a propriedade classId, modifique os objectIds de valor e especifique o GUID do grupo. O valor tem de estar entre aspas.

<!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 }),

Depois de especificar a classe de destino e, opcionalmente, um grupo para definir um âmbito adicional dos resultados, pode especificar os critérios para limitar o tipo de dados a apresentar de acordo com os valores de uma ou mais propriedades.

Exemplos de widget

O widget suporta a composição de dados de monitorização nos seguintes tipos de gráfico:

  • Gráfico de barras (dados de estado)
  • Gráfico spline (dados de desempenho)
  • Gráfico de barras (dados de alerta)
  • Gráfico circular e gráfico circular 3D
  • Anel e Anel 3D
  • Gráfico de combinação
  • Gráfico de barras empilhadas

Pode configurar um tipo de gráfico para apresentar dados de estado, desempenho e alerta. Para cada exemplo abaixo, os alertas do grupo Computador Windows são devolvidos para qualquer gravidade, correspondendo a estados de resolução específicos.

Selecione o separador necessário para ver o código HTML para o respetivo tipo de gráfico:

O seguinte código HTML demonstra a composição de um gráfico de barras com dados de estado:

<!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>

Adicionar widget ao dashboard

  1. Abra um browser em qualquer computador e introduza http://<web host>/OperationsManager, em que anfitrião Web é o nome do computador que aloja a consola Web.

  2. No painel esquerdo da consola Web, selecione + Novo dashboard.

    Captura de ecrã a mostrar a seleção de Novo Dashboard na consola Web.

  3. Na página Criar Novo Dashboard , forneça um nome e uma descrição para o dashboard que pretende criar.

    Captura de ecrã a mostrar a especificação do nome e da descrição do novo dashboard.

  4. Pode guardar o dashboard num pacote de gestão não selado existente ao selecionar o pacote de gestão na lista pendente Pacote de Gestão ou pode guardar o dashboard ao criar um novo pacote de gestão ao selecionar Novo junto à lista pendente Pacote de Gestão e fornecer um nome, descrição e, opcionalmente, um número de versão.

    Captura de ecrã a mostrar a opção Especificar nome e descrição para o novo MP.

  5. Depois de especificar onde guardar o novo dashboard, selecione OK.

  6. Selecione Guardar depois de fornecer um nome e uma descrição para o novo dashboard.

  7. No dashboard vazio em branco, verá o nome do dashboard, Adicionar Widget, Editar Dashboard, Eliminar dashboard e Ver nas opções de ecrã inteiro na parte superior da página.

    Captura de ecrã a mostrar a tela Novo dashboard.

  8. Selecione Widget Personalizado na lista pendente Selecionar Widget .

  9. No painel Widget personalizado, selecione critérios para o widget adicionar o código HTML através de um dos exemplos anteriores para visualizar os dados de monitorização numa das visualizações de gráfico suportadas.

    Captura de ecrã a mostrar Configurar o widget Personalizado para o dashboard.

  10. Conclua a configuração ao fornecer um intervalo de atualizaçãode Nome, Descrição e Widget (o intervalo predefinido é de 5 minutos) para o widget. Selecione Guardar Widget para guardar o novo dashboard.

Depois de o widget ter sido criado, apresenta a saída do código HTML.

Captura de ecrã a mostrar o exemplo concluído do widget Mosaico no dashboard.