ui.js

/*
#
# DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER
#
# Copyright (c) 2018 Juniper Networks, Inc.
# All rights reserved.
#
# Use is subject to license terms.
#
# Licensed under the Apache License, Version 2.0 (the ?License?); you may not
# use this file except in compliance with the License. You may obtain a copy of
# the License at http://www.apache.org/licenses/LICENSE-2.0.
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
*/

var pollInterval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
var ageOutInterval = "0:03:00" //H:M:S

$(document).ready(function () {

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href")
    });

    flowRouteAddNewConfigEventHandler();
    flowRouteModModalBtnEventHandler();
    flowRouteModBtnEventHandler();
    flowRouteDelBtnEventHandler();

    var t_flow_config = $('#t_flow_config').DataTable({
        'ajax'       : {
            "type"   : "POST",
            "url"    : "/api/frct",
            "contentType": "application/json",
            "processData": true,
            "dataType": "json",
            "dataSrc": function (response) {

                var return_data = new Array();

                $.each( response[1], function( name, flow ) {

                    var action_val = new Array();

                     $.each( flow.action, function( action, value ) {

                        if (value['value'] === null){
                            action_val.push([action]);

                        } else {
                            action_val.push([action, value['value']]);
                        }
                     });

                     return_data.push({
                        'name': name,
                        'vrf': flow.vrf,
                        'family': flow.family,
                        'dstPrefix': flow.dstPrefix,
                        'dstPort': flow.dstPort,
                        'srcPrefix': flow.srcPrefix,
                        'srcPort': flow.srcPort,
                        'protocol': flow.protocol,
                        'action': action_val
                        })
                });
                return return_data;
            }
        },
        "columns": [
            {
                "data": "name",
                "defaultContent": ""
            },
            {
                "data": "vrf",
                "defaultContent": ""
            },
            {
                "data": "family",
                "defaultContent": ""
            },
            {
                "data": "dstPrefix",
                "defaultContent": ""
            },
            {
                "data": "srcPrefix",
                "defaultContent": ""
            },
            {
                "data": "protocol",
                "defaultContent": ""
            },
            {
                "data": "dstPort",
                "defaultContent": ""
            },
            {
                "data": "srcPort",
                "defaultContent": ""
            },
            {
                "data": "action",
                "defaultContent": ""
            }]
    });

    var t_active_flow = $('#t_active_flow').DataTable({

            'ajax'       : {
                "type"   : "POST",
                "url"    : "/api/frt",
                "contentType": "application/json",
                "processData": true,
                "dataType": "json",
                "dataSrc": function (response) {

                    var return_data = new Array();

                    $.each( response[1], function( key, flow ) {

                        return_data.push({
                            'router': flow.router,
                            'vrf': flow.vrf,
                            'family': flow.family,
                            'term': flow.term,
                            'dstPrefix': flow.destination.dst,
                            'dstPort': flow.destination.dstport,
                            'srcPrefix': flow.destination.src,
                            'srcPort': flow.destination.srcport,
                            'protocol': flow.destination.proto,
                            'krtAction': flow.krtAction,
                            'commAction': flow.commAction,
                            'age': flow.age
                            })
                    });
                    return return_data;
                },
                "complete": function (response) {
                    getActiveFlowRoutes(pollInterval);
                }
            },
            "createdRow": function( row, data, dataIndex ) {

                if (data.age <= ageOutInterval) {
                    $(row).css( 'color', 'red' ).animate( { color: 'black' });
                }
            },
            "columns": [
                {
                    "data": "router",
                    "defaultContent": ""
                },
                {
                    "data": "vrf",
                    "defaultContent": ""
                },
                {
                    "data": "family",
                    "defaultContent": ""
                },
                {
                    "data": "term",
                    "defaultContent": ""
                },
                {
                    "data": "dstPrefix",
                    "defaultContent": ""
                },
                {
                    "data": "srcPrefix",
                    "defaultContent": ""
                },
                {
                    "data": "protocol",
                    "defaultContent": ""
                },
                {
                    "data": "dstPort",
                    "defaultContent": ""
                },
                {
                    "data": "srcPort",
                    "defaultContent": ""
                },
                {
                    "data": "krtAction",
                    "defaultContent": ""
                },
                {
                    "data": "commAction",
                    "defaultContent": ""
                },
                {
                    "data": "age",
                    "defaultContent": ""
                }]
        });

    var t_active_filter = $('#t_active_filter').DataTable({

        'ajax'       : {
            "type"   : "POST",
            "url"    : "/api/frft",
            "contentType": "application/json",
            "processData": true,
            "dataType": "json",
            "dataSrc": function (response) {

                var return_data = new Array();

                $.each( response[1], function( rname, router ) {
                    $.each(router, function( fidx, filter ) {

                        return_data.push({
                            'name': rname,
                            'vrf': filter.vrf,
                            'family': filter.family,
                            'dstPrefix': filter.data.dst,
                            'dstPort': filter.data.dstport,
                            'srcPrefix': filter.data.src,
                            'srcPort': filter.data.srcport,
                            'protocol': filter.data.proto,
                            'packetCount': filter.packet_count,
                            'byteCount': filter.byte_count
                        })
                    });
                });
                return return_data;
            },
            "complete": function (response) {
                getActiveFlowFilter(pollInterval);
            }
        },
        "columns": [
            {
                "data": "name",
                "defaultContent": ""
            },
            {
                "data": "vrf",
                "defaultContent": ""
            },
            {
                "data": "family",
                "defaultContent": ""
            },
            {
                "data": "dstPrefix",
                "defaultContent": ""
            },
            {
                "data": "srcPrefix",
                "defaultContent": ""
            },
            {
                "data": "protocol",
                "defaultContent": ""
            },
            {
                "data": "dstPort",
                "defaultContent": ""
            },
            {
                "data": "srcPort",
                "defaultContent": ""
            },
            {
                "data": "packetCount",
                "defaultContent": ""
            },
            {
                "data": "byteCount",
                "defaultContent": ""
            }]
    });

    $("#t_flow_config tbody").on('click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            t_flow_config.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });

    $('#selectProtocol').on('change', function(){
        var selected = $(this).find("option:selected").val();

        if(selected === 'ICMP'){

            if ($('#g_icmp').length){
                $('#g_icmp').remove();
            }

            var html = "<div id=\"g_icmp\">" +
                "<label for=\"inputICMPCode\" class=\"col-sm-1 col-form-label\">Code</label>" +
                    "<div class=\"col-sm-2\">" +
                        "<input type=\"text\" class=\"form-control\" id=\"inputICMPCode\" placeholder=\"Code\">" +
                    "</div>" +
                "<label for=\"inputICMPType\" class=\"col-sm-1 col-form-label\">Type</label>" +
                    "<div class=\"col-sm-2\">" +
                        "<input type=\"text\" class=\"form-control\" id=\"inputICMPType\" placeholder=\"Type\">" +
                    "</div>" +
           "</div>";

            $('#fg_protocol').append(html);

        } else {

            if ($('#g_icmp').length){
                $('#g_icmp').remove();
            }
        }
    });

    $('#selectAddNewFlowAction').on('change', function(){
        var selected = $(this).find("option:selected").val();

        if(selected === 'community'){

            if ($('#g_community').length){
                $('#g_community').remove();
            }

            var html = "<div id=\"g_community\"><label for=\"inputAddNewActionCommunity\" class=\"col-sm-2 col-form-label\">Community</label>" +
                            "<div class=\"col-sm-4\">" +
                                "<input type=\"text\" class=\"form-control\" id=\"inputAddNewActionCommunity\" placeholder=\"65000:667\">" +
                            "</div>" +
                       "</div>";

            $('#fg_action').append(html);

        } else {

            if ($('#g_community').length){
                $('#g_community').remove();
            }
        }
    });

    $('#selectModFlowAction').on('change', function(){
        var selected = $(this).find("option:selected").val();

        if(selected === 'community'){

            if ($('#g_mod_community').length){
                $('#g_mod_community').remove();
            }

            var html = "<div id=\"g_mod_community\"><label for=\"inputModActionCommunity\" class=\"col-sm-2 col-form-label\">Community</label>" +
                            "<div class=\"col-sm-4\">" +
                                "<input type=\"text\" class=\"form-control\" id=\"inputModActionCommunity\" placeholder=\"65000:667\">" +
                            "</div>" +
                       "</div>";

            $('#fg_mod_action').append(html);

        } else {

            if ($('#g_mod_community').length){
                $('#g_mod_community').remove();
            }
        }
    });
});

function flowRouteAddNewConfigEventHandler(){

    $("#btnAddFlowRoute").on( "click", function() {
        var data = new Object();

        data.flowRouteName = $('#inputFlowRouteName').val();

        if ($('#inputSrcPrefix').val()){
            data.srcPrefix = $('#inputSrcPrefix').val();
        }
        if ($('#inputSrcPort').val()){
            data.srcPort = $('#inputSrcPort').val();
        }
        if ($('#inputDstPrefix').val()){
            data.dstPrefix = $('#inputDstPrefix').val();
        }
        if ($('#inputDstPort').val()) {
            data.dstPort = $('#inputDstPort').val();
        }
        if ($('#selectProtocol').val()) {
            data.protocol = $('#selectProtocol').val();
        }
        if ($('#selectVrf').val()) {
            data.vrf = $('#selectVrf').val();
        }
        if ($('#selectFamily').val()) {
            data.family = $('#selectFamily').val();
        }

        data.action = $('#selectAddNewFlowAction').val();

        if (data.action == 'community') {
            data.action = 'community ' + $('#inputAddNewActionCommunity').val();
        }
        addNewFlowRouteConfig(data);
    });
}

function flowRouteModBtnEventHandler(){

    $('#btnModFlowRoute').click( function () {

        var data = new Object();

        data.flowRouteName = $('#inputModFlowRouteName').val();
        if ($('#inputModSrcPrefix').val()){
            data.srcPrefix = $('#inputModSrcPrefix').val();
        }
        if ($('#inputModSrcPort').val()){
            data.srcPort = $('#inputModSrcPort').val();
        }
        if ($('#inputModDstPrefix').val()){
            data.dstPrefix = $('#inputModDstPrefix').val();
        }
        if ($('#inputModDstPort').val()) {
            data.dstPort = $('#inputModDstPort').val();
        }
        if ($('#selectModProtocol').val()) {
            data.protocol = $('#selectModProtocol').val();
        }
        if ($('#selectModVrf').val()) {
            data.vrf = $('#selectModVrf').val();
        }
        if ($('#selectModFamily').val()) {
            data.family = $('#selectModFamily').val();
        }
        if ($('#selectModFlowAction').val()) {
            data.action = $('#selectModFlowAction').val();
        }
        if (data.action == 'community') {
            data.action = 'community ' + $('#inputModActionCommunity').val();
        }

        modFlowRouteConfig(data);
    });
}

function flowRouteModModalBtnEventHandler(){

    $('#flowModBtn').click( function () {

        var table = $('#t_flow_config').DataTable();
        var rowData = table.row( '.selected' ).data();

        $("#inputModFlowRouteName").val(rowData.name);
        $("#inputModDstPrefix").val(rowData.dstPrefix);
        $("#inputModSrcPrefix").val(rowData.srcPrefix);
        $("#selectModProtocol").val(rowData.protocol);
        $("#selectModVrf").val(rowData.vrf);
        $("#selectModFamily").val(rowData.family);
        $("#inputModDstPort").val(rowData.dstPort);
        $("#inputModSrcPort").val(rowData.srcPort);

        if (rowData.action[0][0] === 'community'){

            if ($('#g_mod_community').length){
                $('#g_mod_community').remove();
            }

            $("#selectModFlowAction").val(rowData.action[0][0]);
            var html = "<div id=\"g_mod_community\"><label for=\"inputModActionCommunity\" class=\"col-sm-2 col-form-label\">Community</label>" +
                            "<div class=\"col-sm-4\">" +
                                "<input type=\"text\" class=\"form-control\" id=\"inputModActionCommunity\" placeholder=\"65000:667\">" +
                            "</div>" +
                       "</div>";

            $('#fg_mod_action').append(html);
            $("#inputModActionCommunity").val(rowData.action[0][1]);

        } else {

            if ($('#g_mod_community').length){
                $('#g_mod_community').remove();
                $("#selectModFlowAction").val(rowData.action[0][0]);
            } else {
                $("#selectModFlowAction").val(rowData.action[0][0]);
            }
        }
        $("#modalFlowMod").modal("toggle");
    });
}

function flowRouteDelBtnEventHandler(){

    $('#flowDelBtn').click( function () {
        var table = $('#t_flow_config').DataTable();
        var rowData = table.row( '.selected' ).data();
        delFlowRouteConfig(rowData);
    });
}

function addNewFlowRouteConfig(flowRouteData) {

    $.ajax({
        url: '/api?action=add',
        type: 'POST',
        data: JSON.stringify(flowRouteData),
        cache: false,
        processData: true,
        dataType: 'json',
        contentType: 'application/json',
        success: function (response) {

            if (response[0]){

                $("#t_flow_config").DataTable().ajax.reload();
                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_SUCCESS,
                    title: 'Successfully added new flow route',
                    message: response[1]
                })
            } else {

                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_WARNING,
                    title: 'Error adding new flow route',
                    message: response[1]
                })
            }
        },
        error : function (data, errorText) {
            $("#errormsg").html(errorText).show();
        }
    });
}

function modFlowRouteConfig(flowRouteData) {

    $.ajax({
        url: '/api?action=mod',
        type: 'POST',
        data: JSON.stringify(flowRouteData),
        cache: false,
        processData: true,
        dataType: 'json',
        contentType: 'application/json',
        success: function (response) {

            if (response[0]){

                $("#t_flow_config").DataTable().ajax.reload();
                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_SUCCESS,
                    title: 'Successfully modified flow route',
                    message: response[1]
                })
            }
        },
        error : function (data, errorText) {
            $("#errormsg").html(errorText).show();
        }
    });
}

function delFlowRouteConfig(flowRouteData){

    $.ajax({
        url: '/api?action=del',
        type: 'POST',
        data: JSON.stringify(flowRouteData),
        cache: false,
        processData: true,
        dataType: 'json',
        contentType: 'application/json',
        success: function (response) {

            if (response[0]){

                var table = $('#t_flow_config').DataTable();
                table.row('.selected').remove().draw( false );
                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_SUCCESS,
                    title: 'Successfully deleted flow route',
                    message: response[1]
                })
            } else {
                BootstrapDialog.show({
                    type: BootstrapDialog.TYPE_WARNING,
                    title: 'Failed to delete flow route',
                    message: response[1]
                })
            }
        },
        error : function (data, errorText) {
            $("#errormsg").html(errorText).show();
        }
    });
}

function getActiveFlowRoutes(pollInterval){

    function poll() {
        var t = $('#t_active_flow').dataTable().api();
        t.ajax.reload()
    }
    setTimeout(poll, pollInterval);
}

function getActiveFlowFilter(pollInterval){

    function poll() {
        var t = $('#t_active_filter').dataTable().api();
        t.ajax.reload()
    }
    setTimeout(poll, pollInterval);
}