<!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 () {
                {% for alert_type, alerts in alerts.items() %}
                {% if alerts -%}
                $("#{{ alert_type }}Table").DataTable({
                    dom: '<"container-fluid"<"row"<"col"B><"#{{ alert_type }}Caption.col"><"col"f>>>rt<"container-fluid"<"row"<"col"ip>>>',
                    responsive: true,
                    paging: false,
                    fixedHeader: true,
                    buttons: [
                        'colvis',
                        {
                            extend: 'excel',
                            text: 'Excel export'
                        },
                    ],
                });
                $("#{{ alert_type }}Caption").html(
                    '<p class="fs-4 text-center">{{ alert_type|capitalize }} alerts</p>'
                );
                {%- endif %}
                {%- endfor %}
                $("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">
                {% for alert_type, alerts in alerts.items() %}
                {% if alerts -%}
                    <li class="nav-item">
                        <a class="nav-link" href="#{{ alert_type }}-alerts">{{ alert_type|capitalize }} alerts</a>
                    </li>
                {%- endif %}
                {%- endfor %}
            </ul>
        </nav>
        {% if alerts.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>Rule</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th>Region</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for alert in alerts.cloudwatch %}
                            <tr>
                                <td>{{- alert.name -}}</td>
                                <td>
                                    <code>{{- alert.rule -}}</code>
                                </td>
                                <td>{{- alert.type -}}</td>
                                <td>{{- alert.region -}}</td>
                                <td>{{- alert.description -}}</td>
                            </tr>
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        {%- endif %}
        {% if alerts.pingdom -%}
            <div class="mt-4" id="pingdom-alerts">
                <table id="pingdomTable"
                       class="table table-striped dt-responsive nowrap w-100 display">
                    <thead>
                        <tr>
                            <th>URL</th>
                            <th>Threshold</th>
                            <th>Paused</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Tags</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for check in alerts.pingdom %}
                            <tr>
                                <td>{{- check.url -}}</td>
                                <td>{{- check.responsetime_threshold -}}</td>
                                <td>{{- check.paused -}}</td>
                                <td>{{- check.name -}}</td>
                                <td>{{- check.type.keys()|first -}}</td>
                                <td>{{- check.tags|join(', ') -}}</td>
                            </tr>
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        {%- endif %}
        {% if alerts.prometheus -%}
            <div class="mt-4" id="prometheus-alerts">
                <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 alert in alerts.prometheus %}
                            <tr>
                                <td>
                                    {{- alert.promRuleName -}}
                                </td>
                                <td>
                                    {{- alert.name -}}
                                </td>
                                <td>
                                    {{- alert.description -}}
                                </td>
                                <td>
                                    {{- alert.summary -}}
                                </td>
                                <td>
                                    <code>{{- alert.expr -}}</code>
                                </td>
                                <td>
                                    {{- alert.for -}}
                                </td>
                                <td>
                                    {{- alert.severity -}}
                                </td>
                                <td>
                                    {{- '<a href="' + alert.runbook +'" target="_blank">' + alert.runbook + '</a>' if alert.runbook.startswith("http") else alert.runbook -}}
                                </td>
                            </tr>
                        {%- endfor %}
                    </tbody>
                </table>
            </div>
        {%- endif %}
    </body>
</html>
