eduardogsilva.routerfleet/templates/router_manager/router_list.html

{% extends 'base.html' %}


{% block content %}
    <div class='row'>
        <div class='col-lg-12'>
            <div class="card card-primary card-outline">
                {% if page_title %}
                    <div class="card-header">
                        <h3 class="card-title">{{ page_title }}</h3>
                    </div>
                {% endif %}
                <div class="card-body">
                    {% include 'router_manager/router_nav_tabs.html' %}
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="table table-hover datatables-no-export">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Address</th>
                                    <th>Status</th>
                                    <th>Backup</th>
                                    <th>Groups</th>
                                    <th>Auth</th>
                                    <th></th>
                                </tr>
                                
                                </thead>
                                <tbody>
                                {% for router in router_list %}
                                    <tr {% if not router.enabled %}style="text-decoration: line-through;"{% endif %}>
                                        <td>
                                            <a href="/router/details/?uuid={{ router.uuid }}">{{ router.name }}</a>
                                        </td>
                                        <td>{{ router.get_router_type_display }}</td>
                                        <td>{{ router.address }}</td>

                                        <td id="status-{{ router.uuid }}">
                                            {% if router.monitoring %}
                                                {% if router.routerstatus.status_online %}
                                                    <span style="display: none">online</span><i class="far fa-check-circle text-success" title="Host is Online"></i>
                                                {% else %}
                                                    <span style="display: none">offline</span><i class="far fa-times-circle text-danger" title="Host is unavailable"></i>
                                                {% endif %}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if router.router_type != 'monitoring' %}
                                            {% if router.backup_profile %}
                                                {{ router.backup_profile }} {% if router.routerstatus.last_backup_failed %}<i class="fas fa-exclamation-triangle text-danger" title="Last backup failed to complete"></i>{% endif %}
                                            {% else %}
                                                <i class="fas fa-exclamation-triangle text-warning" title="No backup profile selected"></i>
                                            {% endif %}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {{ router.routergroup_set.count }}
                                        </td>
                                        <td class="min-width">
                                            {% if router.router_type != 'monitoring' %}
                                                {% if router.ssh_key %}
                                                    <span style="display: none">sshkey</span><i class="fas fa-key" title="SSH Key: {{ router.ssh_key }}"></i>
                                                {% elif router.password %}
                                                    <span style="display: none">password</span><i class="fas fa-keyboard" title="Password Authentication"></i>
                                                {% else %}
                                                    <i class="fas fa-exclamation-triangle text-warning" title="Missing authentication"></i>
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        <td class="min-width">
                                            <a href="/router/manage/?uuid={{ router.uuid }}"><i class="fas fa-edit"></i></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <a href="/router/manage/" class="btn btn-primary">Add Router</a>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block custom_page_scripts %}
    <script>
        var last_status_change = "{{ last_status_change_timestamp }}";
        var group_uuid = "{{ filter_group.uuid|default_if_none:'' }}";
        var status_online_text = '<span style="display: none">online</span><i class="far fa-check-circle text-success" title="Host is Online"></i>';
        var status_offline_text = '<span style="display: none">offline</span><i class="far fa-times-circle text-danger" title="Host is unavailable"></i>';

        function checkStatusChange() {
            $.ajax({
                url: "/monitoring/last_status_change/",
                success: function(data) {
                    if (data.last_status_change !== last_status_change) {
                        // Update last_status_change and fetch new router list
                        last_status_change = data.last_status_change;
                        fetchRouterList();
                    }
                }
            });
        }

        function fetchRouterList() {
            var url = group_uuid ? "/monitoring/export_router_list/?filter_group=" + group_uuid : "/monitoring/export_router_list/";
            $.ajax({
                url: url,
                success: function(data) {
                    updateRouterStatuses(data.router_list);
                }
            });
        }
        function updateRouterStatuses(routerList) {
            for (var uuid in routerList) {
                var router = routerList[uuid];
                var cells = dataTable.$('td#status-' + uuid);

                if (cells.length) {
                    cells.each(function () {
                        var $cell = $(this);
                        var currentStatusContent = $cell.html(); 
                        var $currentSpan = $cell.find('span');
                        var currentStatus = $currentSpan.length ? $currentSpan.text().trim() : '';

                        var newStatus = router.online ? 'online' : 'offline';
                        var newStatusHtml = router.online ? status_online_text : status_offline_text;

                        if (currentStatus !== newStatus) {
                            $cell.html(newStatusHtml);
                            
                            $(document).Toasts('create', {
                                class: router.online ? 'bg-success' : 'bg-danger',
                                title: 'Host status updated',
                                body: 'Host ' + router.name + ' is now ' + newStatus,
                                delay: 10000,
                                autohide: true
                            });
                        }
                    });
                }
            }
        }
        
        setInterval(checkStatusChange, 30000);
        $(document).ready(function() {
            checkStatusChange();
        });
    </script>
{% endblock %}