<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
              content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"/>
        <title class="title">List of monitoring alerts</title>
        <link rel="stylesheet"
              type="text/css"
              href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"/>
        <link rel="stylesheet"
              type="text/css"
              href="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/cr-1.5.6/fh-3.2.4/r-2.3.0/datatables.min.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/cr-1.5.6/fh-3.2.4/r-2.3.0/datatables.min.js"></script>
        <script type="text/javascript" language="javascript" class="init">
            $(document).ready(function () {
                {% if rules.cloudwatch -%}
                $("#cloudwatchTable").DataTable({
                    dom: '<"container-fluid"<"row"<"col"B><"#cloudwatchCaption.col"><"col"f>>>rt<"container-fluid"<"row"<"col"ip>>>',
                    responsive: true,
                    paging: false,
                    fixedHeader: true,
                    buttons: [
                        'colvis',
                        {
                            extend: 'excel',
                            text: 'Excel export'
                        },
                    ],
                });
                $("#cloudwatchCaption").html(
                    '<p class="fs-4 text-center">Cloudwatch alerts</p>'
                );
                {%- endif %}
                {% if rules.prometheus -%}
                $("#prometheusTable").DataTable({
                    dom: '<"container-fluid"<"row"<"col"B><"#prometheusCaption.col"><"col"f>>>rt<"container-fluid"<"row"<"col"ip>>>',
                    responsive: true,
                    paging: false,
                    fixedHeader: true,
                    buttons: [
                        'colvis',
                        {
                            extend: 'excel',
                            text: 'Excel export'
                        },
                    ],
                });
                $("#prometheusCaption").html(
                    '<p class="fs-4 text-center">Prometheus rules</p>'
                );
                {%- endif %}
                $("nav a").click(function (event) {
                    event.preventDefault();
                    if (event.target.hash) {
                        target = $(event.target.hash).offset().top - 80;
                    } else {
                        target = 0;
                    }
                    $("html,body").animate({ scrollTop: target }, "fast");
                });
            });
        </script>
    </head>
    <body data-bs-spy="scroll"
          data-bs-target=".navbar"
          data-bs-offset="100"
          class="mb-8">
        <nav id="navbar"
             class="navbar sticky-top navbar-expand-lg navbar-light bg-light fh-fixedHeader">
            <a class="navbar-brand ms-4" href="#">List of monitoring alerts</a>
            <ul class="nav nav-pills">
                {% if rules.cloudwatch -%}
                    <li class="nav-item">
                        <a class="nav-link" href="#cloudwatch-alerts">Cloudwatch alerts</a>
                    </li>
                {%- endif %}
                {% if rules.prometheus -%}
                    <li class="nav-item">
                        <a class="nav-link" href="#prometheus-rules">Prometheus rules</a>
                    </li>
                {%- endif %}
            </ul>
        </nav>
        {% if rules.cloudwatch -%}
            <div class="mt-4" id="cloudwatch-alerts">
                <table id="cloudwatchTable"
                       class="table table-striped dt-responsive nowrap w-100 display">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th>Region</th>
                            <th>Rule</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for rule in rules.cloudwatch %}
                            <tr>
                                <td>{{- rule.name -}}</td>
                                <td>{{- rule.description -}}</td>
                                <td>{{- rule.type -}}</td>
                                <td>{{- rule.region -}}</td>
                                <td>
                                    <code>{{- rule.rule -}}</code>
                                </td>
                            </tr>
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        {%- endif %}
        {% if rules.prometheus -%}
            <div class="mt-4" id="prometheus-rules">
                <table id="prometheusTable"
                       class="table table-striped dt-responsive nowrap w-100 display">
                    <thead>
                        <tr>
                            <th>PrometheusRule name</th>
                            <th>Group/Name</th>
                            <th>Description</th>
                            <th>Summary</th>
                            <th>Expression</th>
                            <th>For</th>
                            <th>Severity</th>
                            <th>
                                Runbook
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for rule in rules.prometheus %}
                            <tr>
                                <td>
                                    {{- rule.promRuleName -}}
                                </td>
                                <td>
                                    {{- rule.name -}}
                                </td>
                                <td>
                                    {{- rule.description -}}
                                </td>
                                <td>
                                    {{- rule.summary -}}
                                </td>
                                <td>
                                    <code>{{- rule.expr -}}</code>
                                </td>
                                <td>
                                    {{- rule.for -}}
                                </td>
                                <td>
                                    {{- rule.severity -}}
                                </td>
                                <td>
                                    {{- '<a href="' + rule.runbook +'" target="_blank">' + rule.runbook + '</a>' if rule.runbook.startswith("http") else rule.runbook -}}
                                </td>
                            </tr>
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        {%- endif %}
    </body>
</html>
