ntopng/httpdocs/templates/pages/components/toast.template

<div class="toast notification" role="alert" aria-live="assertive" aria-atomic="true" data-toast-id="{{ toast.id }}"
    data-autohide="false">
    <div
        class="toast-header border-{{ toast.level.bg_color }} bg-{{ toast.level.bg_color }} {{ toast.level.title_text_color }}">
        <strong class="me-auto">
            <i class="fas {{ toast.level.icon }}"></i> {{ toast.title }}
        </strong>
        {% if not (toast.dismissable) then %}
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        {% end %}
    </div>
    <div class="toast-body">
        <div>
            {* toast.description *}
        </div>
        <div class="d-flex justify-content-end my-1">
            {% if (toast.action) then %}
            <a class="btn btn-gray btn-sm {{toast.action.additional_classes}}" href="{{ toast.action.url }}">
                {{ toast.action.title }}
            </a>
            {% end %}
            {% if (toast.dismissable) then %}
            <button class='dismiss btn btn-sm btn-primary ms-1'>
                {{ i18n("dismiss") }}
            </button>
            {% end %}
        </div>
    </div>
</div>

{% if toast.action and toast.action.js then %}
<script type="text/javascript">
    var toastCSRF = "{{ ntop.getRandomCSRFValue() }}";

    var toastConfigFlowChanges = function() {
        var $error_label = $("#toast-config-change-modal_more_content")
        $.ajax({
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            url: `${http_prefix}/lua/rest/v2/edit/ntopng/incr_flows.lua`,
            data: JSON.stringify({
                csrf: toastCSRF,
            }),
            success: function(rsp) {
                $('#toast-config-change-modal-flows').modal('hide');
            },
            error: function(rsp) {
                $('#toast-config-change-modal-flows_more_content').show();
            }
        });
    }

    $('.toast-config-change-flows').click(() => {
        $('#toast-config-change-modal-flows').modal('show');
        $('.modal-backdrop').remove();
    });

    var toastConfigHostChanges = function() {
        var $error_label = $("#toast-config-change-modal_more_content")
        $.ajax({
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            url: `${http_prefix}/lua/rest/v2/edit/ntopng/incr_hosts.lua`, /* TODO: Change */
            data: JSON.stringify({
                csrf: toastCSRF,
            }),
            success: function(rsp) {
                $('#toast-config-change-modal-hosts').modal('hide');
            },
            error: function(rsp) {
                $('#toast-config-change-modal-hosts_more_content').show();
            }
        });
    }

    $('.toast-config-change-hosts').click(() => {
        $('#toast-config-change-modal-hosts').modal('show');
        $('.modal-backdrop').remove();
    });

</script>
{% end %}