{{ define "content" }}
<link href="/static/css/pages/ip.css" rel="stylesheet">
<link href="/static/css/pages/progressbar.css" rel="stylesheet">
<script src="/static/js/splitPane.js"></script>
<script src="/static/js/ag-charts-community.js"></script>

<div class="full-size">
    <div id="topPane" class="vertical-split-pane" style="height:100%;">
        <nav class="navbar navbar-expand-sm">
            <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false"
                  aria-label="Toggle navigation">
                <i class="icon-menu"></i>Menu
            </span>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <input type="checkbox" class="btn-check" id="showDetail" onclick="showHidePortBandwidthDetails();handleEthDetailOnclick();" disabled>
                        <label class="btn btn-nav-icon-text" for="showDetail"><i class='icon-page-details'></i>Details</label>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="filterField" placeholder="Filter..." oninput="onFilterFieldChanged()">
                    <span><i class="icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="grid-wrapper height_with_navigation">
            <div id="ipEthernetTable" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div id="horizontalHandle" class="horizontal-split-handle" style="display: none;height: 10px;">
    </div>
    <div id="bottomPane" class="vertical-split-pane" style="display: none; background-color: var(--panel-bg);">
        <div class="modal-header">
            <span class="modal-title" id="ethernetDetailsModalLabel">Ethernet Port Details</span>
        </div>

        <div class="row height_with_navigation">
            <div class="modal-body full-height">
                <ul class="nav nav-tabs tab" role="tablist">
                    <li class="nav-item" role="Config">
                        <button class="tab-button active" data-bs-toggle="tab" data-bs-target="#config" type="button" role="tab" aria-controls="config" aria-selected="true">Config</button>
                    </li>
                    <li class="nav-item" role="Session Lists">
                        <button class="tab-button" data-bs-toggle="tab" data-bs-target="#sessionList" type="button" role="tab" aria-controls="sessionList" aria-selected="false">Session List</button>
                    </li>
                    <li class="nav-item" role="Advanced Data">
                        <button class="tab-button" data-bs-toggle="tab" data-bs-target="#advancedData" type="button" role="tab" aria-controls="advancedData" aria-selected="false">Advanced Data</button>
                    </li>
                    <li class="nav-item" role="Status">
                        <button class="tab-button" data-bs-toggle="tab" data-bs-target="#status" type="button" role="tab" aria-controls="status" aria-selected="false">Status</button>
                    </li>
                    <li class="nav-item" role="SFP">
                        <button class="tab-button" data-bs-toggle="tab" data-bs-target="#sfp" type="button" role="tab" aria-controls="sfp" aria-selected="false">SFP</button>
                    </li>

                </ul>
                <div class="tab-content height_with_navigation" id="tablist">
                    <div class="tab-pane fade show active tab full-height" id="config" role="tabpanel" aria-labelledby="config-tab" style="height: 100%; overflow-y: auto">
                        <table class="container-data" style="width: 600px;">
                            <tr class="row-data">
                                <td class="col-data-label">Link</td>
                                <td class="col-data-input">
                                    <input type="text" id="configLink" class="form-control rounded-0 auto-size" readonly/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">Speed</td>
                                <td class="col-data-input">
                                    <input type="text" id="configSpeed" class="form-control rounded-0 auto-size" readonly/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">MAC Address</td>
                                <td class="col-data-input">
                                    <input type="text" id="configMacAddress" class="form-control rounded-0 auto-size" readonly/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">FEC</td>
                                <td class="col-data-input">
                                    <div class="select-wrapper">
                                        <select class="custom-select" id="configFec"></select>
                                    </div>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">IP Mode</td>
                                <td class="col-data-input">
                                    <div class="select-wrapper">
                                        <select class="custom-select" id="configIpMode" onchange="onIpModeUpdate()">
                                            <option value="Static">Static</option>
                                            <option value="DHCP">DHCP</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">IP Address</td>
                                <td class="col-data-input">
                                    <input type="text" id="configIpAddress" class="form-control rounded-0 auto-size"/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">Subnet Mask</td>
                                <td class="col-data-input">
                                    <input type="text" id="configSubnetMask" class="form-control rounded-0 auto-size"/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">Gateway</td>
                                <td class="col-data-input">
                                    <input type="text" id="configGateway" class="form-control rounded-0 auto-size"/>
                                </td>
                            </tr>
                            <tr class="row-data">
                                <td class="col-data-label">Gateway Metric</td>
                                <td class="col-data-input">
                                    <input type="number" min="0" max="100" id="configGatewayMetric" class="form-control rounded-0 auto-size"/>
                                </td>
                            </tr>
                        </table>
                        <div class="modal-footer panel-footer justify-content-between">
                            <button class="btn btn-text" onclick="refreshEthConfig();">Reset</button>
                            <button class="btn btn-text" onclick="validateAndUpdateEthConfig();">Update</button>
                        </div>
                    </div>

                    <div class="tab-pane fade tab full-height" id="sessionList" role="tabpanel" aria-labelledby="sessionList-tab">
                        <ul class="nav nav-subtabs">
                            <li class="nav-item" role="presentation">
                                <button class="tablinks subtab-button active" id="ipEthernetSenderSessions-tab" data-bs-toggle="tab" data-bs-target="#ipEthernetSenderSessions" type="button" role="tab" aria-controls="ipEthernetSenderSessions" aria-selected="true">Sender Sessions (Tx)</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="tablinks subtab-button" id="ipEthernetReceiverSessions-tab" data-bs-toggle="tab" data-bs-target="#ipEthernetReceiverSessions" type="button" role="tab" aria-controls="ipEthernetReceiverSessions" aria-selected="false">Receiver Sessions (Rx)</button>
                            </li>
                        </ul>
                        <div class="tab-content ip-data-style">
                            <div class="tab-pane show active full-size" id="ipEthernetSenderSessions" role="tabpanel" aria-labelledby="ipEthernetSenderSessions-tab">
                                <div class="grid-wrapper full-height">
                                    <div id="ipEthernetSenderSessionsTable" class="ag-theme-balham-dark" style="height: 100%;"></div>
                                </div>
                            </div>
                            <div class="tab-pane full-size" id="ipEthernetReceiverSessions" role="tabpanel" aria-labelledby="ipEthernetReceiverSessions-tab">
                                <div class="grid-wrapper full-height">
                                    <div id="ipEthernetReceiverSessionsTable" class="ag-theme-balham-dark" style="height: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade tab full-height" id="advancedData" role="tabpanel" aria-labelledby="advancedData-tab">
                        <ul class="nav nav-subtabs">
                            <li class="nav-item" role="presentation">
                                <button class="tablinks subtab-button active" id="txAdvancedData-tab" data-bs-toggle="tab" data-bs-target="#txAdvancedData" type="button" role="tab" aria-controls="txAdvancedData" aria-selected="true">Sender Data (Tx)</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="tablinks subtab-button" id="rxAdvancedData-tab" data-bs-toggle="tab" data-bs-target="#rxAdvancedData" type="button" role="tab" aria-controls="rxAdvancedData" aria-selected="false">Receiver Data (Rx)</button>
                            </li>
                        </ul>
                        <div class="tab-content ip-data-style">
                            <div class="tab-pane show active full-size" id="txAdvancedData" role="tabpanel" aria-labelledby="txAdvancedData-tab">
                                <div class="grid-wrapper full-height">
                                    <div id="txAdvancedDataGrid" class="ag-theme-balham-dark" style="height: 100%;"></div>
                                </div>
                            </div>
                            <div class="tab-pane full-size" id="rxAdvancedData" role="tabpanel" aria-labelledby="rxAdvancedData-tab">
                                <div class="grid-wrapper full-height">
                                    <div id="rxAdvancedDataGrid" class="ag-theme-balham-dark" style="height: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade tab full-height" id="status" role="tabpanel" aria-labelledby="status-tab" style="height: 100%; overflow-y: auto">
                        <table class="container-data" style="width: calc(100% - 20px)">
                            <tr>
                                <td class="col-data-label-after" colspan="5">Alarms</td>
                            </tr>

                            <tr class="alarms-tr-style">
                                <td class="col-data-input" colspan="5">
                                    <div id="ipEthernetAlarms" style="padding-top:10px;" class="ag-theme-balham-dark">
                                    </div>
                                </td>
                            </tr>

                            <tr class="row-data"/>

                            <tr>
                                <td class="col-data-label-after" colspan="5">Counters</td>
                            </tr>

                            <tr class="counters-tr-style">
                                <td class="col-data-input" colspan="5">
                                    <div id="ipEthernetCounters" style="padding-top:10px;" class="ag-theme-balham-dark">
                                    </div>
                                </td>
                            </tr>

                            <tr class="row-data"/>

                            <tr id="counterDetailTitleRow">
                                <td class="col-data-label" colspan="5">Counter Detail</td>
                            </tr>

                            <tr id="counterDetailChartRow" class="counters-tr-style">
                                <td class="col-data-input" colspan="5">
                                    <div id="counterDetailChart" style="padding-top:10px;width:100%" class="ag-theme-balham-dark">
                                    </div>
                                </td>
                            </tr>

                        </table>
                    </div>

                    <div class="tab-pane fade tab full-height" id="sfp" role="tabpanel" aria-labelledby="sfp-tab" style="height: 100%;">
                        <div id="sfpWarningTab" class="full-size center-text">
                            <p class="note-under-input">There is no SFP detected</p>
                        </div>
                        <div id="sfpInfoTab" class="full-size">
                            <ul class="nav nav-subtabs">
                                <li class="nav-item" role="presentation">
                                    <button class="tablinks subtab-button active" id="sfpInfo-tab" data-bs-toggle="tab" data-bs-target="#sfpInfo" type="button" role="tab" aria-controls="sfpInfo" aria-selected="true">SFP Info</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="tablinks subtab-button" id="sfpDiagnostic-tab" data-bs-toggle="tab" data-bs-target="#sfpDiagnostic" type="button" role="tab" aria-controls="sfpDiagnostic" aria-selected="false">SFP Diagnostic</button>
                                </li>
                            </ul>
                            <div class="tab-content ip-data-style" style="overflow-y: auto">
                                <div class="tab-pane show active full-size" style="height: calc(100% - 40px);" id="sfpInfo" role="tabpanel" aria-labelledby="sfpInfo-tab">
                                    <table id="sfpInfoTable" class="container-data" style="width: 600px;">
                                        <tr class="row-data" id="sfpVendorNameRow">
                                            <td class="col-data-label">Vendor Name</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpVendorName" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpVendorPnRow">
                                            <td class="col-data-label">Vendor PN</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpVendorPn" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpVendorSnRow">
                                            <td class="col-data-label">Vendor SN</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpVendorSn" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpVendorRevRow">
                                            <td class="col-data-label">Vendor Rev</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpVendorRev" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpExtendedIdentifierRow">
                                            <td class="col-data-label">Extended Identifier</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpExtendedIdentifier" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpModuleCapabilityRow">
                                            <td class="col-data-label">Module Capability</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpModuleCapability" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpDeviceTechnologyRow">
                                            <td class="col-data-label">Device Technology</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpDeviceTechnology" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpFecSupportRow">
                                            <td class="col-data-label">Fec Support</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpFecSupport" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpDiagnosticTypeRow">
                                            <td class="col-data-label">Diagnostic type</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpDiagnosticType" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpSupportedPowerClassRow">
                                            <td class="col-data-label">Supported Power Class</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpSupportedPowerClass" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpProgrammedPowerClassRow">
                                            <td class="col-data-label">Programmed Power Class</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpProgrammedPowerClass" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="tab-pane full-size" style="height: calc(100% - 40px);" id="sfpDiagnostic" role="tabpanel" aria-labelledby="sfpDiagnostic-tab">
                                    <table id="sfpDiagnosticTable" class="container-data" style="width: 600px;">
                                        <tr class="row-data" id="sfpTemperatureRow">
                                            <td class="col-data-label">Temperature</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpTemperature" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpVoltageRow">
                                            <td class="col-data-label">Voltage</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpVoltage" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        {{range $index := loop 0 7 }}
                                        <tr class="row-data" id="sfpLane{{$index}}RxPowerRow">
                                            <td class="col-data-label">Lane {{$index}} Rx Power</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpLane{{$index}}RxPower" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpLane{{$index}}TxPowerRow">
                                            <td class="col-data-label">Lane {{$index}} Tx Power</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpLane{{$index}}TxPower" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        <tr class="row-data" id="sfpLane{{$index}}TxBiasRow">
                                            <td class="col-data-label">Lane {{$index}} Tx Bias</td>
                                            <td class="col-data-input">
                                                <input type="text" id="sfpLane{{$index}}TxBias" class="form-control rounded-0 auto-size" readonly/>
                                            </td>
                                        </tr>
                                        {{end}}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
</div>

<div class="modal" id="errorsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-errors-size">
        <div class="modal-content">
            <div class="modal-header error-header justify-content-between">
                <span class="modal-title" id="errorModalLabel"><i class="icon-alarm-error-header"></i>Errors</span>
                <span class="btn btn-transparent" onclick="hideDialog('errorsModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data" id="errorListHeading">There are the following errors: </p>
                <div class="container-data" id="errorList"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-text" onclick="hideDialog('errorsModal');">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="confirmationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-confirmation-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="confirmationModalLabel"><i class="icon-alarm-info-header"></i>Confirm</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal" onclick=""><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data" id="confirmationList"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="confirmationNo" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal" onclick="">Cancel</button>
                <button id="confirmationYes" class="btn btn-text" data-bs-dismiss="modal" onclick="">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Scripts in rcs/go/web/public/js/... -->
<script src="/static/js/js-utils.js"></script>
<script src="/static/js/aggrid-utils.js"></script>

<script type="text/javascript" charset="utf-8">
    let currentSessionData = [];
    let IpSessionTopPaneHeight = 'calc(50% - 5px)';
    let IpSessionBottomPaneHeight = 'calc(50% - 5px)';
    let currentConfigData = [];
    let currentSfpData = [];
    const ultrixIpReedSolomonOption = "reed-solomon (not recommended)";

    function updateSessionData (eventData) {
        currentSessionData = (Array.isArray(eventData.detail.sessionsData)) ? eventData.detail.sessionsData : [];
        loadBandwidthData();
    }

    const eventListenerType = {
        ERRORS_OCCURRED : "Errors_Occurred",
        LOG_DATA : "Log_Data",
        NEW_SESSION_ALLOCATION_DATA : "New_Sessions_Allocation_Data",
        NEW_SESSION_DATA : "New_Session_Data",
        CONFIRMATION : "Confirmation",
    };

    const logLevel = {
        INFO : "info",
        LOG : "log",
        WARN : "warn",
        ERROR : "error",
        TRACE : "trace"
    };

    function logger(loggingLevel, message) {
        var event = new CustomEvent(eventListenerType.LOG_DATA, {
            detail: {
                level : loggingLevel,
                message : message,
            }
        });
        window.dispatchEvent(event);
    }

    function dispatchConfirmationEvent (yesCallback, noCallback, warningList) {
        var event = new CustomEvent(eventListenerType.CONFIRMATION, {
            detail: {
                yesCallback : yesCallback,
                noCallback : noCallback,
                warnings : warningList
            }
        });
        window.dispatchEvent(event);
    }

    function showConfirmationDialog (eventData) {
        $('#confirmationYes').attr("onclick",eventData.detail.yesCallback);
        $('#confirmationNo').attr("onclick",eventData.detail.noCallback);
        let warningString;
        if (eventData.detail.warnings.length > 0) {
            warningString = "<ul>";
            for (let i = 0; i < eventData.detail.warnings.length; i++) {
                warningString += "<li>" + eventData.detail.warnings[i] + "</li>";
            }
            warningString += "Do you wish to proceed?";
            warningString += "</ul>";
        }
        $('#confirmationList').html(warningString);
        displayDialog("confirmationModal");
    }

    function dispatchErrorsEvent (errorList) {
        var event = new CustomEvent(eventListenerType.ERRORS_OCCURRED, {
            detail: {
                errors : errorList,
            }
        });
        window.dispatchEvent(event);
    }

    function dashboardLogger(eventData) {
        if (typeof oglml === 'undefined') {
            return;
        }

        var logMessage = eventData.detail.level.capitalize() + " - " + eventData.detail.message;
        oglml.call('dbDebug', [logMessage]);
    }

    function consoleLogger(eventData) {
        if (console === "undefined") {
            return;
        }

        switch(eventData.detail.level) {
            case logLevel.INFO :
                console.info(eventData.detail.message);
                break;
            case logLevel.WARN :
                console.warn(eventData.detail.message);
                break;
            case logLevel.ERROR :
                console.error(eventData.detail.message);
                break;
            case logLevel.TRACE :
                console.trace(eventData.detail.message);
                break;
            default:
                console.log(eventData.detail.message);
                break;
        }
    }

    function showErrorList (eventData) {
        const errors = eventData.detail.errors;
        if (!errors) {
            logger(logLevel.WARN, arguments.callee.name + " - Provided argument are invalid '" + JSON.stringify(errors) + "'");
            return;
        }

        if (errors.length > 0) {
            var errorString = "<ul>";
            for (var i = 0; i < errors.length; i++) {
                errorString += "<li>" + errors[i] + "</li>";
            }
            errorString += "</ul>";

            $('#errorListHeading').text((errors.length == 1) ? "There is an error that needs to be addressed: " : "There are " + errors.length + " errors that need to be addressed: ");
            $('#errorList').html(errorString);
            displayDialog('errorsModal');
        }
    }

    function getProgressBarForTable (sessions, currentData) {
        let htmlString = '<div class="progress">';
        for (let i = 0; i < sessions.length; i++) {
            htmlString += '<div class="progress-bar" role="progressbar" style="background-color: ' + sessions[i].colour + '; ';
            htmlString += 'width:' + sessions[i].percent + '%;';
            htmlString += '" aria-valuenow="' + sessions[i].percent + '" aria-valuemin="0" aria-valuemax="100" ';
            htmlString += 'data-toggle="tooltip" data-placement="top" title="' + sessions[i].name + ":" + sessions[i].usage + ' Mbps"';
            htmlString += ' >';
            htmlString += '</div>';
        }
        htmlString += '</div>';
        htmlString += '<div style="height: 5px"></div>'
        htmlString += '<div class="progress">';
        htmlString += '<div class="progress-bar" role="progressbar" style="background-color: MediumSpringGreen; ';
        let currentPercent = currentData.used_Mbps / (currentData.used_Mbps + currentData.free_Mbps) * 100;
        htmlString += 'width:' + currentPercent + '%;';
        htmlString += '" aria-valuenow="' + currentPercent + '" aria-valuemin="0" aria-valuemax="100" ';
        htmlString += 'data-toggle="tooltip" data-placement="top" title=" current:' + currentData.used_Mbps + ' Mbps"';
        htmlString += ' >';
        htmlString += '</div>';
        htmlString += '</div>';
        return htmlString;
    }

    class LinkRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            if (params.value == "UP") {
                this.eGui.innerHTML = `<p style="text-align:left;"> <i class="icon-up"></i>UP </p>`;
            } else if (params.value == "DOWN") {
                this.eGui.innerHTML = `<p style="text-align:left;"> <i class="icon-down"></i>DOWN </p>`;
            }
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    class txProgressBarRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = getProgressBarForTable(params.data.txSessions, params.data.txCurrentBandWidth);
        }
        getGui() { return this.eGui; }
        refresh(params) { return false; }
    }

    class rxProgressBarRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = getProgressBarForTable(params.data.rxSessions, params.data.rxCurrentBandWidth);
        }
        getGui() { return this.eGui; }
        refresh(params) { return false; }
    }

    class txUsedCellRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            let text = "<div style='height:16px;'>";
            if (params.data.txAllocatedBandwidth.used_Mbps) {
                text += params.data.txAllocatedBandwidth.used_Mbps;
            } else {
                text += "0";
            }
            text += "</div><div style='height:16px;'>";
            if (params.data.txCurrentBandWidth.used_Mbps) {
                text += params.data.txCurrentBandWidth.used_Mbps;
            } else {
                text += "0";
            }
            text += "</div>";
            this.eGui.innerHTML = text;
        }
        getGui() { return this.eGui; }
        refresh(params) { return false; }
    }

    class rxUsedCellRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            let text = "<div style='height:16px;'>";
            if (params.data.rxAllocatedBandwidth.used_Mbps) {
                text += params.data.rxAllocatedBandwidth.used_Mbps;
            } else {
                text += "0";
            }
            text += "</div><div style='height:16px;'>";
            if (params.data.rxCurrentBandWidth.used_Mbps) {
                text += params.data.rxCurrentBandWidth.used_Mbps;
            } else {
                text += "0";
            }
            text += "</div>";
            this.eGui.innerHTML = text;
        }
        getGui() { return this.eGui; }
        refresh(params) { return false; }
    }

    class colouredSessionRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = "<div style='margin-right:10px; display: inline-block; width: 20px; height:12px; background-color: " +
                params.data.colour +
                ";'></div>" +
                params.data.name;
        }

        getGui() { return this.eGui; }
        refresh(params) { return false; }
    }

    // This should match the TypeRenderer in the private.ip-session.html
    class TypeRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            var html = "N/A";
            switch (params.value) {
                case "video": html = "<i class='icon-video'></i>Video"; break;
                case "audio": html = "<i class='icon-audio'></i>Audio"; break;
                case "anc": html = "<i class='icon-ancillary'></i>Ancillary"; break;
            }
            this.eGui.innerHTML = html;
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    const ethernetTableColumns = [
        {field: "name", headerName: "Port", type: "idColumn", width: 75, minWidth: 75, maxWidth: 100, flex: 1, sort: "asc", sortIndex: 0, comparator: ethNaturalSort},
        {field: "link", headerName: "Link", type: "readonlyColumn", width: 50, flex: 1, getQuickFilterText: () => '',
            cellRendererSelector: (params) => {
                return {
                    component: LinkRenderer,
                };
            }},
        {field: "speed", headerName: "Speed (Gbps)", type: "readonlyColumn", width: 75, minWidth: 75, maxWidth: 100, flex: 1},
        {field: "tx", headerName: "Sender Bandwidth Allocated/Current", width: 50, minWidth: 100, flex: 3,
            cellRendererSelector: (params) => { return { component: txProgressBarRenderer }; }
        },
        {field: "activeTx", headerName: "Tx Sessions", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 100, flex: 1,
            valueGetter: (params) => { return params.data.txSessions.length; }
        },
        {field: "txUsed", headerName: "Tx Used Allocated/Current(Mbps)", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 250, flex: 1, cellRenderer: txUsedCellRenderer},
        {field: "rx", headerName: "Receiver Bandwidth Allocated/Current", width: 50, minWidth: 100, flex: 3,
            cellRendererSelector: (params) => { return { component: rxProgressBarRenderer }; }
        },
        {field: "activeRx", headerName: "Rx Sessions", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 100, flex: 1,
            valueGetter: (params) => { return params.data.rxSessions.length; }
        },
        {field: "rxUsed", headerName: "Rx Used Allocated/Current(Mbps)", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 250, flex: 1, cellRenderer: rxUsedCellRenderer},
    ];

    const ethernetTable = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: ethernetTableColumns,
        rowSelection: 'single',
        rowHeight: 40,
        onSelectionChanged: onRowSelected,
        onRowDoubleClicked: onRowDoubleClicked,
        stopEditingWhenCellsLoseFocus: true,
        editType : 'fullRow',
        columnTypes: {
            idColumn: {
                editable: false,
                cellStyle: {fontWeight: 'bold'},
            },
            readonlyColumn: {
                editable: false,
                cellStyle: {color: 'gray'},
            },
        },
    };

    const sessionTableColumns = [
        {field: "name", headerName: "Name", minWidth: 50, width: 100,
            cellRendererSelector: (params) => { return { component: colouredSessionRenderer }; }
        },
        {field: "type", headerName: "Media", minWidth: 50, width: 100,
            cellRendererSelector: (params) => {
                const renderTypeField = {
                    component: TypeRenderer,
                    params: { values: ['video', 'audio', 'anc'] }
                };
                if (params.data) {
                    return renderTypeField;
                }
                return undefined;
            }
        },
        {field: "usage", headerName: "Usage Amount", minWidth: 50, width: 100,
            valueGetter: (params) => { return params.data.usage + " Mbps"; }
        },
        {field: "percent", headerName: "Ethernet Bandwidth Usage", minWidth: 50, width: 100,
            valueGetter: (params) => {
                const value = Math.round(params.data.percent * 10) / 10;
                return value + "%";
            }
        },
        {field: "in_use", headerName: "In Use", minWidth: 50, width: 100,
            valueGetter: (params) => { return (params.data.in_use === true) ? "Yes" : "No"; }
        }
    ];

    const advancedDataTableColumns = [
        {field: "dataType", headerName: "Data Type", minWidth: 50},
        {field: "value", headerName: "Value", minWidth: 50}
    ];

    const txSessionsTable = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: sessionTableColumns,
        rowSelection: 'single',
        columnTypes: {},
        onRowSelected: highlightTxProgress,
    };

    const rxSessionsTable = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: sessionTableColumns,
        rowSelection: 'single',
        columnTypes: {},
        onRowSelected: highlightRxProgress,
    };

    const txAdvancedDataTable = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: advancedDataTableColumns,
        rowSelection: 'single',
        columnTypes: {},
    }

    const rxAdvancedDataTable = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: advancedDataTableColumns,
        rowSelection: 'single',
        columnTypes: {},
    }

    class AlarmSeverityRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            var alarmIcon = "";
            switch (params.value) {
                case "info": alarmIcon = "icon-alarm-info"; break;
                case "warning": alarmIcon = "icon-alarm-warning"; break;
                case "error": alarmIcon = "icon-alarm-error"; break;
                default: this.eGui.innerHTML = ""; return;
            }
            var word = params.value.charAt(0).toUpperCase() + params.value.slice(1);
            this.eGui.innerHTML = `<p style="text-align:center;"> <i class="${alarmIcon}"></i> ${word}</p>`;
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    const alarmTableColumns = [
        {field: "severity", headerName: "Severity", editable: false, width: 500, minWidth: 50, maxWidth: 200,
            cellRendererSelector: (params) => {
                const renderAlarmSeverityField = {
                    component: AlarmSeverityRenderer,
                    params: {values: ['', 'Info', 'Warning', 'Error']},
                };
                return renderAlarmSeverityField;
            }
        },
        {field: "description", headerName: "Description", editable: false, width: 300, minWidth: 100}
    ];

    var alarmTableOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: alarmTableColumns,
        rowSelection: 'single',
        rowData: null,
    };

    const counterTableColumns = [
        {field: "description", headerName: "Description",  width: 300, minWidth: 100},
        {field: "date", headerName: "Last Time Detected", width: 500, minWidth: 50, sort: 'desc'},
        {field: "value", headerName: "Value",  width: 100, minWidth: 100}
    ];

    var counterTableOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
            editable: false,
        },
        columnDefs: counterTableColumns,
        rowSelection: 'multiple',
        rowData: null,
        onRowSelected: onCounterSelected,
    };

    var counterDetailOptions = {
        container: document.getElementById("counterDetailChart"),
        title: {
            text: "Counter Details",
        },
        data: [],
        series: [
            {
                type: "line",
                xKey: "date",
                yKey: "value",
                yName: "value",
            },
        ],
        legend: {
            enabled: false,
        },
    };

    // Picked 30 random colours because there should be a max of 24? sessions so 30 colours should be more than enough
    const progressBarColours = [
        "Red", "Orange", "DodgerBlue", "MediumSeaGreen", "Yellow", "Violet", "Tomato", "Pink", "Blue", "Purple",
        "Tomato", "Brown", "Cyan", "Green", "Teal", "Olive", "Maroon", "Salmon", "Lime", "LightBlue",
        "DarkOliveGreen", "DarkTurquoise", "ForestGreen", "IndianRed", "Indigo", "Lavender", "MediumOrchid", "Navy", "SpringGreen", "SteelBlue",
        "Thistle", "Tan", "SlateBlue", "Silver", "Sienna", "SandyBrown", "Wheat", "LightYellow", "LightSeaGreen", "LightCyan",
        "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "Magenta", "Maroon", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "NavajoWhite"
    ];

    function onFilterFieldChanged() {
        ethernetTable.api.setQuickFilter(document.getElementById('filterField').value);
    }

    function highlightProgressBarItem (TxRx, sessionId) {
        $("#" + TxRx + "-" + sessionId).addClass("progress-bar-striped progress-bar-animated");
        $("#" + TxRx + "-" + sessionId).css("-webkit-box-shadow", "inset 0px 0px 0px 5px var(--selected)");
        $("#" + TxRx + "-" + sessionId).css("-moz-box-shadow:", "inset 0px 0px 0px 5px var(--selected)");
        $("#" + TxRx + "-" + sessionId).css("box-shadow", "inset 0px 0px 0px 5px var(--selected)");
    }

    function resetProgressBarHighlights(TxRx){
        var table;
        switch (TxRx) {
            case "Tx": table = txSessionsTable; break;
            case "Rx": table = rxSessionsTable;  break;
            default: logger(logLevel.WARN, arguments.callee.name + " - Unsupported TxRx argument provided '" + TxRx + "'"); return
        }
        table.api.forEachNodeAfterFilter(function (node) {
            $("#" + TxRx + "-" + node.data.sessionId).removeClass("progress-bar-striped progress-bar-animated");
            $("#" + TxRx + "-" + node.data.sessionId).css("-webkit-box-shadow", "initial");
            $("#" + TxRx + "-" + node.data.sessionId).css("-moz-box-shadow:", "initial");
            $("#" + TxRx + "-" + node.data.sessionId).css("box-shadow", "initial");
        });
    }

    function highlightRxProgress (event) {
        resetProgressBarHighlights("Rx");
        const selectedData = rxSessionsTable.api.getSelectedRows();
        if (selectedData.length > 0) {
            if (selectedData[0].sessionId) {
                highlightProgressBarItem("Rx", selectedData[0].sessionId);
            }
        }
    }

    function highlightTxProgress (event) {
        resetProgressBarHighlights("Tx");
        const selectedData = txSessionsTable.api.getSelectedRows();
        if (selectedData.length > 0) {
            if (selectedData[0].sessionId) {
                highlightProgressBarItem("Tx", selectedData[0].sessionId);
            }
        }
    }

    function highlightRowInTable (TxRx, highlight, sessionId) {
        switch (TxRx) {
            case "Tx":
                txSessionsTable.api.forEachNodeAfterFilter(function (node) {
                    node.setSelected((node.data.sessionId == sessionId) && (highlight === true));
                });
                break;
            case "Rx":
                rxSessionsTable.api.forEachNodeAfterFilter(function (node) {
                    node.setSelected((node.data.sessionId == sessionId) && (highlight === true));
                });
                break;
            default:
                logger(logLevel.WARN, arguments.callee.name + " - Unsupported TxRx argument provided '" + TxRx + "'");
                return;
        }
        resetProgressBarHighlights(TxRx);
    }

    // Load table data once DOM content is loaded.
    document.addEventListener('DOMContentLoaded', initializePage);
    
    function initializePage() {
        new agGrid.Grid(document.querySelector('#ipEthernetTable'), ethernetTable);
        new agGrid.Grid(document.querySelector('#ipEthernetSenderSessionsTable'), txSessionsTable);
        new agGrid.Grid(document.querySelector('#ipEthernetReceiverSessionsTable'), rxSessionsTable);
        new agGrid.Grid(document.querySelector('#txAdvancedDataGrid'), txAdvancedDataTable);
        new agGrid.Grid(document.querySelector('#rxAdvancedDataGrid'), rxAdvancedDataTable);
        new agGrid.Grid(document.querySelector('#ipEthernetAlarms'), alarmTableOptions);
        new agGrid.Grid(document.querySelector('#ipEthernetCounters'), counterTableOptions);


        window.addEventListener(eventListenerType.NEW_SESSION_ALLOCATION_DATA, updateEthernetTable);
        window.addEventListener(eventListenerType.NEW_SESSION_DATA, updateSessionData);
        window.addEventListener(eventListenerType.ERRORS_OCCURRED, showErrorList);
        window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger);
        window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
        window.addEventListener(eventListenerType.CONFIRMATION, showConfirmationDialog);
        window.onerror = function(message, source, lineno, colno, error) {
            var data = {
                "message"	: message,
                "source"	: source,
                "line #"	: lineno,
                "col #"	: colno,
                "error"	: error
            };
            logger(logLevel.ERROR, JSON.stringify(data));
        };

        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/session/listen', onWebSocketSessionDataMessage);
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/eth/listen', onWebSocketEthMessage);
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/slots/listen', onWebSocketSlotMessage);

        getSessionData();
        getEthConfigData();
        getSfpData();
        addCSStoClasses();
        bindWidgetFunctions();
        updateSessionsTable([], "tx");
        updateSessionsTable([], "rx");
        initializeSplitPaneBar("horizontalHandle", "topPane", "bottomPane", paneDirection.VERTICAL);
    }

    function addCSStoClasses() {
        $(".col-data-input").css("width", "310px");
        $(".col-data-label").css("line-height", "1");
        $(".btn-nav-icon-text").css("line-height", "1");
    }

    function bindWidgetFunctions () {
        setTimeout(function() {
            $('[data-toggle="tooltip"]').tooltip(); // Ensure that this is called after everything has been loaded and scripts have concluded execution
        }, 500);
    }

    function dispatchSessionAllocationData (allocationData) {
        if (JSON.stringify(allocationData) == "{}") {
            dispatchErrorsEvent(["Device has no session network allocation data"]);
            ethernetTable.api.setRowData([]);
            return;
        }
        console.log(allocationData);
        var event = new CustomEvent(eventListenerType.NEW_SESSION_ALLOCATION_DATA, {
            detail: {
                bandwidthData: allocationData,
            }
        });
        window.dispatchEvent(event);
    }

    function loadBandwidthData(eventData) {
        fetch('/ip/net/session/allocation/data').then(response => response.json()).then(data => dispatchSessionAllocationData(data));
        clearTimeout(reloadBandwidthTimeout);
    }

    function onRowSelected(event) {
        const selectedData = ethernetTable.api.getSelectedRows();
        if (selectedData.length != 1) {
            document.getElementById('showDetail').checked = false;
            showHidePortBandwidthDetails();
            document.getElementById('showDetail').disabled = true;
        } else {
            document.getElementById('showDetail').disabled = false;
            if (document.getElementById('bottomPane').style.display != 'none') {
                updateSessionLists();
            }
        }

    }

    function onRowDoubleClicked(event) {
        const selectedData = ethernetTable.api.getSelectedRows();
        if (selectedData.length != 1) {
            document.getElementById('showDetail').checked = false;
            showHidePortBandwidthDetails();
            document.getElementById('showDetail').disabled = true;
        } else {
            document.getElementById('showDetail').disabled = false;
            document.getElementById('showDetail').checked = (document.getElementById('bottomPane').style.display == 'none');
            showHidePortBandwidthDetails();
            if (document.getElementById('bottomPane').style.display != 'none') {
                updateSessionLists();
            }
        }
    }

    function showHidePortBandwidthDetails() {
        let checked = document.getElementById('showDetail').checked;
        if (checked) {
            document.getElementById('horizontalHandle').style.display = 'block';
            document.getElementById('bottomPane').style.display = 'block';
            document.getElementById('topPane').style.height = IpSessionTopPaneHeight;
            document.getElementById('bottomPane').style.height = IpSessionBottomPaneHeight;
        } else if (document.getElementById('bottomPane').style.display != 'none') {
            IpSessionTopPaneHeight = document.getElementById('topPane').style.height;
            IpSessionBottomPaneHeight = document.getElementById('bottomPane').style.height;
            document.getElementById('horizontalHandle').style.display = 'none';
            document.getElementById('bottomPane').style.display = 'none';
            document.getElementById('topPane').style.height = '100%';
        }
    }

    function handleEthDetailOnclick() {
        const selectedData = ethernetTable.api.getSelectedRows();
        if (selectedData.length == 1 && document.getElementById('bottomPane').style.display != 'none') {
            updateSessionLists();
        }
    }

    function updateSessionLists(){
        const selectedData = ethernetTable.api.getSelectedRows();
        if (selectedData.length == 1) {
            fetch('/ip/net/stats/data').then(response => response.json()).then(networkStats => {
                for (const device in networkStats) {
                    for (var i = 0; i < networkStats[device].length; i++) {
                        if (networkStats[device][i].interface == selectedData[0].name) {
                            updateEthernetDetails(selectedData[0], networkStats[device][i]);
                        }
                    }
                }
            });
            fetch('/ip/net/counters/data?eth='+selectedData[0].name).then(response => response.json()).then(counters => {
                let selectedCounter = counterTableOptions.api.getSelectedRows();
                let selectedCounterDescList = [];
                if (selectedCounter.length != 0) {
                    for (let i = 0; i < selectedCounter.length; i++) {
                        selectedCounterDescList.push(selectedCounter[i].description)
                    }
                }
                counterTableOptions.api.setRowData(counters);
                if (counters && counters.length == 0) {
                    document.getElementById("counterDetailTitleRow").style.display = "none";
                    document.getElementById("counterDetailChartRow").style.display = "none";
                } else if (selectedCounterDescList.length != 0) {
                    let selected = false;
                    counterTableOptions.api.forEachNode(function (node) {
                        if (selectedCounterDescList.includes(node.data.description)) {
                            node.setSelected(true);
                            selected = true;
                        }
                    });
                    if (!selected) {
                        selectFirstRow(counterTableOptions);
                    }
                } else if (counters && counters.length > 0) {
                    selectFirstRow(counterTableOptions);
                }
                let rows = 3;
                if (counters && counters.length > 3) {
                    rows = counters.length;
                }
                let tableHeight = (28 * rows) + 35;
                $("#ipEthernetCounters").height(tableHeight);
            });
            fetch('/ip/net/alarms/data?eth='+selectedData[0].name).then(response => response.json()).then(alarms => {
                alarmTableOptions.api.setRowData(alarms);
                let rows = 3;
                if (alarms && alarms.length > 3) {
                    rows = alarms.length;
                }
                let tableHeight = (28 * rows) + 35;
                $("#ipEthernetAlarms").height(tableHeight);
            });
            refreshEthConfig();
            refreshSfpInfo();
        }
    }

    function getEthConfigData() {
        fetch('/ip/net/config/data').then(response => response.json()).then(data => {
            if (data) {
                currentConfigData = data;
                const selectedData = ethernetTable.api.getSelectedRows();
                if (selectedData.length == 1) {
                    refreshEthConfig();
                }
            }
        });
    }

    function getSfpData() {
        fetch('/ip/net/sfp/data').then(response => response.json()).then(data => {
            if (data) {
                currentSfpData = data;
                const selectedData = ethernetTable.api.getSelectedRows();
                if (selectedData.length == 1) {
                    refreshSfpInfo();
                }
            }
        });
    }

    function refreshEthConfig() {
        const selectedData = ethernetTable.api.getSelectedRows();
        for (let i = 0; i < currentConfigData.length; i++) {
            let sessionData = currentConfigData[i];
            if (sessionData.eth == selectedData[0].name) {
                document.getElementById('configLink').value = (sessionData.link == "UP") ? "↑ UP" : "↓ DOWN";
                document.getElementById('configSpeed').value = sessionData.speed;
                document.getElementById('configMacAddress').value = sessionData.mac;
                const fecOptions = document.getElementById("configFec");
                fecOptions.innerHTML = "";
                for (let i = 0; i < sessionData.fecOptions.length; i++) {
                    if (sessionData.fecOptions[i] == ultrixIpReedSolomonOption) {
                        fecOptions.add(new Option(ultrixIpReedSolomonOption, "reed-solomon"));
                    } else {
                        fecOptions.add(new Option(sessionData.fecOptions[i], sessionData.fecOptions[i]));
                    }
                }
                fecOptions.value = sessionData.fec;
                document.getElementById('configIpMode').value = sessionData.mode;
                document.getElementById('configIpAddress').value = sessionData.ip || "";
                document.getElementById('configSubnetMask').value = sessionData.mask || "";
                document.getElementById('configGateway').value = sessionData.gw || "";
                document.getElementById('configGatewayMetric').value = sessionData["gw-metric"] || "0";
                onIpModeUpdate();
                break;
            }
        }
    }

    function refreshSfpInfo() {
        const selectedData = ethernetTable.api.getSelectedRows();
        for (let i = 0; i < currentSfpData.length; i++) {
            let sfpData = currentSfpData[i];
            if (sfpData.name == selectedData[0].name) {
                if (sfpData.sfpPresent) {
                    document.getElementById('sfpInfoTab').style.display = "";
                    document.getElementById('sfpWarningTab').style.display = "none";
                    // SFP Info
                    showHideSfpRowAndData('sfpVendorName', sfpData.sfpInfo.vendorName);
                    showHideSfpRowAndData('sfpVendorPn', sfpData.sfpInfo.vendorPN);
                    showHideSfpRowAndData('sfpVendorSn', sfpData.sfpInfo.vendorSN);
                    showHideSfpRowAndData('sfpVendorRev', sfpData.sfpInfo.vendorRev);
                    showHideSfpRowAndData('sfpExtendedIdentifier', sfpData.sfpInfo.extIdentifier);
                    showHideSfpRowAndData('sfpModuleCapability', sfpData.sfpInfo.moduleCapability);
                    showHideSfpRowAndData('sfpDeviceTechnology', sfpData.sfpInfo.deviceTechnology);
                    showHideSfpRowAndData('sfpFecSupport', sfpData.sfpInfo.fecSupport);
                    showHideSfpRowAndData('sfpDiagnosticType', sfpData.sfpInfo.diagnosticType);
                    showHideSfpRowAndData('sfpSupportedPowerClass', sfpData.sfpInfo.supportedPowerClass);
                    showHideSfpRowAndData('sfpProgrammedPowerClass', sfpData.sfpInfo.programmedPowerClass);
                    // SFP Diagnostic
                    showHideSfpRowAndData('sfpTemperature', sfpData.sfpDiagnostic.temperature);
                    showHideSfpRowAndData('sfpVoltage', sfpData.sfpDiagnostic.voltage);
                    for (let laneNum = 0; laneNum <= 7; laneNum++) {
                        showHideSfpRowAndData(`sfpLane${laneNum}RxPower`, sfpData.sfpDiagnostic[`lane${laneNum}_rxPower`]);
                        showHideSfpRowAndData(`sfpLane${laneNum}TxPower`, sfpData.sfpDiagnostic[`lane${laneNum}_txPower`]);
                        showHideSfpRowAndData(`sfpLane${laneNum}TxBias`, sfpData.sfpDiagnostic[`lane${laneNum}_txBias`]);
                    }
                } else {
                    document.getElementById('sfpInfoTab').style.display = "none";
                    document.getElementById('sfpWarningTab').style.display = "";
                }
                break;
            }
        }
    }

    function showHideSfpRowAndData(id, data) {
        if (data === undefined) {
            document.getElementById(id + 'Row').style.display = "none";
        } else {
            document.getElementById(id + 'Row').style.display = "";
            switch (id) {
                case "sfpTemperature":
                    document.getElementById(id).value = data + " °C";
                    break;
                case "sfpVoltage":
                    document.getElementById(id).value = data + " V";
                    break;
                case "sfpLane0RxPower":
                case "sfpLane0TxPower":
                case "sfpLane1RxPower":
                case "sfpLane1TxPower":
                case "sfpLane2RxPower":
                case "sfpLane2TxPower":
                case "sfpLane3RxPower":
                case "sfpLane3TxPower":
                    document.getElementById(id).value = data + " mW";
                    break;
                case "sfpLane0TxBias":
                case "sfpLane1TxBias":
                case "sfpLane2TxBias":
                case "sfpLane3TxBias":
                    document.getElementById(id).value = data + " mA";
                    break;
                default:
                    document.getElementById(id).value = data;
            }
        }
    }

    function validateAndUpdateEthConfig() {
        const errorList = [];
        const warningList = [];
        const selectedData = ethernetTable.api.getSelectedRows()[0];
        let oldConfigData;
        for (let i = 0; i < currentConfigData.length; i++) {
            if (currentConfigData[i].eth == selectedData.name) {
                oldConfigData = currentConfigData[i];
            }
        }
        if (oldConfigData === undefined) {
            errorList.push("Eth config data is not initialized.");
            dispatchErrorsEvent(errorList);
            return;
        }
        let fec = document.getElementById("configFec");
        let fecValue = fec.value;
        if (fecValue == "reed-solomon" && fec.options[fec.selectedIndex].text == ultrixIpReedSolomonOption) {
            warningList.push("FEC reed-solomon will be deprecated. Its use might affect PTP performance.");
        }
        let ipMode = document.getElementById('configIpMode').value;
        let ipAddress, subnetMask, gateway, gwMetric;
        if (ipMode != "DHCP") {
            ipAddress = document.getElementById('configIpAddress').value;
            if (ipAddress == "0.0.0.0") {
                errorList.push("IP address cannot be 0.0.0.0");
            }
            if (!isValidIPv4(ipAddress)) {
                errorList.push("IP address is not valid");
            }
            subnetMask = document.getElementById('configSubnetMask').value;
            if (subnetMask == "0.0.0.0") {
                errorList.push("Subnet mask cannot be 0.0.0.0");
            }
            if (!isValidIPv4(subnetMask)) {
                errorList.push("Subnet mask is not valid");
            }
            gateway = document.getElementById('configGateway').value;
            gwMetric = document.getElementById('configGatewayMetric').value || "0";
            if (gateway != oldConfigData.gw || gwMetric != oldConfigData["gw-metric"]) {
                warningList.push("Gateways config changes require a frame restart to take effect.");
            }
        }
        if (oldConfigData.fec == fecValue && oldConfigData.mode == ipMode && oldConfigData.ip == ipAddress
            && oldConfigData.mask == subnetMask && oldConfigData.gw == gateway && oldConfigData['gw-metric'] == gwMetric) {
            errorList.push("Eth config is not changed");
        }
        if (errorList.length != 0) {
            dispatchErrorsEvent(errorList);
            return;
        }
        let configData = {
            "eth": selectedData.name,
            "fec": fecValue,
            "mode": ipMode,
            "ip": ipAddress,
            "mask": subnetMask,
            "gw": gateway,
            "gw-metric": gwMetric,
        };
        if (warningList.length != 0) {
            let jsonPayload =  JSON.stringify(configData);
            let yesCallback = "updateEthConfig(" + jsonPayload + ")";
            let noCallback = "refreshEthConfig();hideDialog('confirmationModal');";
            dispatchConfirmationEvent(yesCallback, noCallback, warningList);
        } else {
            updateEthConfig(configData);
        }
    }

    function updateEthConfig(data) {
        $.post("/ip/net/config/update", JSON.stringify(data))
            .done(() => {
                displayInfoDialogAfterLoading("Config Setting Updated");
            })
            .fail((xhr, status, error) => {
                dispatchErrorsEvent([xhr.status + ' - ' + xhr.responseText])
            })
        hideDialog('confirmationModal');
    }

    function selectFirstRow(grid) {
        grid.api.forEachNode(function (node) {
            if (node.rowIndex == 0) {
                node.setSelected(true, true);
            }
        });
    }

    function getProgressBarChunk(progressBarData, TxRx, divWidth) {
        return '<div class="progress-bar" role="progressbar" ' +
            'id="' + TxRx + '-' + progressBarData.sessionId + '" ' +
            'style="background-color: ' + progressBarData.colour + ";" +
            'width: ' + progressBarData.percent + '%;"' +
            'aria-valuenow="' + progressBarData.percent + '" aria-valuemin="0" aria-valuemax="100" ' +
            'data-toggle="tooltip" data-placement="top" title="' + progressBarData.usage+ ' Mbps"' +
            'onmouseover="highlightRowInTable(\'' + TxRx + '\', true, ' + progressBarData.sessionId + ');" ' +
            'onmouseleave="highlightRowInTable(\'' + TxRx + '\', false, ' + progressBarData.sessionId + ');" ' +
            '></div>';
    }

    function updateEthernetDetails(basicDetails, advancedDetails) {
        let txDataList = [];
        let rxDataList = [];
        let showStatList = ['rx_bytes', 'rx_packets', 'rx_multicast', 'rx_dropped', 'rx_errors', 'rx_crc_errors', 'rx_length_errors',
        'tx_bytes', 'tx_packets', 'tx_dropped', 'tx_errors'];
        for (const item in advancedDetails) {
            if (!showStatList.includes(item)) {
                continue;
            } else if (item.includes("tx_")) {
                txDataList.push({"dataType":item.replaceAll("_", " "), "value":advancedDetails[item]});
            } else if (item.includes("rx_")) {
                rxDataList.push({"dataType":item.replaceAll("_", " "), "value":advancedDetails[item]});
            }
        }
        txAdvancedDataTable.api.setRowData(txDataList);
        rxAdvancedDataTable.api.setRowData(rxDataList);

        updateSessionsTable(basicDetails.txSessions, "tx");
        updateSessionsTable(basicDetails.rxSessions, "rx");
        $('[data-toggle="tooltip"]').tooltip();
    }

    function updateSessionsTable (sessions, direction) {
        switch (direction) {
            case "tx" :
                let selectedTxData = txSessionsTable.api.getSelectedRows();
                txSessionsTable.api.setRowData(sessions);
                if (selectedTxData.length > 0) {
                    const name = selectedTxData[0].name;
                    txSessionsTable.api.forEachNodeAfterFilter(function (node) {
                        if (node.data.name == name) {
                            node.setSelected(true);
                            txSessionsTable.api.ensureNodeVisible(node, 'middle');
                        }
                    });
                }
                break;
            case "rx" :
                let selectedRxData = rxSessionsTable.api.getSelectedRows();
                rxSessionsTable.api.setRowData(sessions);
                if (selectedRxData.length > 0) {
                    const name = selectedRxData[0].name;
                    rxSessionsTable.api.forEachNodeAfterFilter(function (node) {
                        if (node.data.name == name) {
                            node.setSelected(true);
                            rxSessionsTable.api.ensureNodeVisible(node, 'middle');
                        }
                    });
                }
                break;
            default:
                logger(logLevel.WARN, arguments.callee.name + " - Unsupported Direction argument provided '" + direction + "'");
                return;
        }
    }

    function dispatchNewSessionData (sessionsData) {
        var event = new CustomEvent(eventListenerType.NEW_SESSION_DATA, {
            detail: {
                sessionsData : sessionsData
            }
        });
        window.dispatchEvent(event);
    }

    function getSessionData () {
        fetch('/ip/sessions/all/data').then(response => response.json()).then(sessionData => {
            dispatchNewSessionData(sessionData);
        });
    }

    function refreshNetworkSessionAllocation() {
        fetch('/ip/net/session/update');
    }

    function updateEthernetTable (eventData) {
        function sortSessions (a, b) {
            return b.usage - a.usage;
        }

        function getSession (sessionId, sessionList) {
            for (var i = 0; i < sessionList.length; i++) {
                if (sessionList[i] && sessionId == sessionList[i].cfg.id) {
                    return sessionList[i];
                }
            }
            return null;
        }

        var tableData = [];
        for (const ethernet in eventData.detail.bandwidthData) {
            const currentItem = eventData.detail.bandwidthData[ethernet];

            // Gather the transmission data into the format the table is looking for
            const txFreeBandWidth = currentItem.tx.current.free_Mbps;
            let txUsedBandWidth = 0;
            let txSessions = [];
            let totalTxBandwidth = txFreeBandWidth;
            if (currentItem.tx.current.used_Mbps || currentItem.tx.allocated.used_Mbps) {
                txUsedBandWidth = (currentItem.tx.current.used_Mbps) ? currentItem.tx.current.used_Mbps : currentItem.tx.allocated.used_Mbps;
                totalTxBandwidth += txUsedBandWidth;
                if (currentItem.tx.sessions) {
                    for (let i = 0; i < currentItem.tx.sessions.length; i++) {
                        let currentTxSession = currentItem.tx.sessions[i];
                        if (currentTxSession.allocated_Mbps) {
                            let sessionData = getSession(currentTxSession.sid, currentSessionData);
                            txSessions.push({
                                sessionId: currentTxSession.sid,
                                name:      (sessionData) ? sessionData.cfg.name : "",
                                type:      (sessionData) ? sessionData.cfg.type : "",
                                usage:     currentTxSession.allocated_Mbps,
                                percent:   (currentTxSession.allocated_Mbps / totalTxBandwidth) * 100,
                                colour:    (currentTxSession.in_use === true) ? progressBarColours[i] : "Gray",
                                in_use:    (currentTxSession.in_use === true)
                            });
                        }
                    }
                }
                txSessions.sort(sortSessions);
            }

            // Gather the receiving data into the format the table is looking for
            const rxFreeBandWidth = currentItem.rx.current.free_Mbps;
            let rxUsedBandWidth = 0;
            let rxSessions = [];
            let totalRxBandwidth = rxFreeBandWidth;
            if (currentItem.rx.current.used_Mbps || currentItem.rx.allocated.used_Mbps) {
                rxUsedBandWidth = (currentItem.rx.current.used_Mbps) ? currentItem.rx.current.used_Mbps : currentItem.rx.allocated.used_Mbps;
                totalRxBandwidth += rxUsedBandWidth;
                if (currentItem.rx.sessions) {
                    for (let i = 0; i < currentItem.rx.sessions.length; i++) {
                        let currentRxSession = currentItem.rx.sessions[i];
                        if (currentRxSession.allocated_Mbps) {
                            let sessionData;
                            if (currentRxSession.hasOwnProperty('sid')) {
                                sessionData = getSession(currentRxSession.sid, currentSessionData);
                                rxSessions.push({
                                    sessionId: currentRxSession.sid,
                                    name:      (sessionData) ? sessionData.cfg.name : "",
                                    type:      (sessionData) ? sessionData.cfg.type : "",
                                    usage:     currentRxSession.allocated_Mbps,
                                    percent:   (currentRxSession.allocated_Mbps / totalRxBandwidth) * 100,
                                    colour:    (currentRxSession.in_use === true) ? progressBarColours[i] : "Gray",
                                    in_use:    (currentRxSession.in_use === true)
                                });
                            } else if (currentRxSession.hasOwnProperty('sid-group')){
                                let rxName = "";
                                let rxType = "";
                                for (let j = 0; j < currentRxSession["sid-group"].length; j++) {
                                    sessionData = getSession(currentRxSession["sid-group"][j], currentSessionData);
                                    rxName += (sessionData) ? sessionData.cfg.name : "";
                                    if (j < currentRxSession["sid-group"].length-1) {
                                        rxName += "/";
                                    }
                                    rxType = (sessionData) ? sessionData.cfg.type : "";
                                }
                                rxSessions.push({
                                    sessionId: currentRxSession.sid,
                                    name:      rxName,
                                    type:      rxType,
                                    usage:     currentRxSession.allocated_Mbps,
                                    percent:   (currentRxSession.allocated_Mbps / totalRxBandwidth) * 100,
                                    colour:    (currentRxSession.in_use === true) ? progressBarColours[i] : "Gray",
                                    in_use:    (currentRxSession.in_use === true)
                                });
                            }
                        }
                    }
                }
                rxSessions.sort(sortSessions);
            }

            tableData.push({
                name : ethernet,
                speed: currentItem.speed,
                link: currentItem.link,
                txSessions : txSessions,
                txUsedBandWidth : txUsedBandWidth,
                txCurrentBandWidth: currentItem.tx.current,
                txAllocatedBandwidth: currentItem.tx.allocated,
                totalTxBandwidth : totalTxBandwidth,
                rxSessions : rxSessions,
                rxUsedBandWidth : rxUsedBandWidth,
                rxCurrentBandWidth: currentItem.rx.current,
                rxAllocatedBandwidth: currentItem.rx.allocated,
                totalRxBandwidth : totalRxBandwidth
            });
        }

        const selectedData = ethernetTable.api.getSelectedRows();

        ethernetTable.api.setRowData(tableData);

        // The call to setRowData will unselect a row in the table, so we have to reselect it, which will
        // cause the data to also be refreshed to the latest data
        if (selectedData.length > 0) {
            const name = selectedData[0].name;
            ethernetTable.api.forEachNodeAfterFilter(function (node) {
                if (node.data.name == name) {
                    node.setSelected(true);
                    ethernetTable.api.ensureNodeVisible(node, 'middle');
                }
            });
        } else {
            ethernetTable.api.forEachNode((node) => {
                if (node.rowIndex == 0) {
                    node.setSelected(true);
                }
            });
        }
    }

    var webSocketSessionData = {
        remove: [],
        add: [],
        update: []
    }

    function removeSessionsFromWSMessages () {
        var sessionsRemoved = false;
        loop1:
        for (var j = 0; j < webSocketSessionData.remove.length; j++) {
            for (var i = 0; i < currentSessionData.length; i++) {
                if (currentSessionData[i] && currentSessionData[i].cfg.id == webSocketSessionData.remove[j]) {
                    currentSessionData.splice(i, 1);
                    sessionsRemoved = true;
                    continue loop1;
                }
            }
            logger(logLevel.WARN, "Unable to find session to remove with the Session ID: " + currentSessionData[j]);
        }

        if (sessionsRemoved){
            // reset the timer to reload the bandwidth data in case it is already running
            clearTimeout(reloadBandwidthTimeout);
            reloadBandwidthTimeout = setTimeout(refreshNetworkSessionAllocation, 3000);
        }
    }

    function updateSessionsFromWSMessages (newData) {
        loop1:
        for (var j = 0; j < newData.length; j++) {
            for (var i = 0; i < currentSessionData.length; i++) {
                if (currentSessionData[i] && newData[j] && currentSessionData[i].cfg.id == newData[j].cfg.id) {
                    currentSessionData[i] = newData[j];
                    continue loop1;
                }
            }
            currentSessionData.push(newData[j]);
        }

        currentSessionData.sort((a,b) => a.cfg.name - b.cfg.name);
        // reset the timer to reload the bandwidth data in case it is already running
        clearTimeout(reloadBandwidthTimeout);
        reloadBandwidthTimeout = setTimeout(refreshNetworkSessionAllocation, 3000);
    }

    var reloadBandwidthTimeout;
    var websocketTimeout;
    function handleWebsocketData (){
        if (webSocketSessionData.add.length > 0) {
            updateSessionsFromWSMessages(webSocketSessionData.add);
            webSocketSessionData.add = [];
        }
        if (webSocketSessionData.update.length > 0) {
            updateSessionsFromWSMessages(webSocketSessionData.update);
            webSocketSessionData.update = [];
        }
        if (webSocketSessionData.remove.length > 0) {
            removeSessionsFromWSMessages();
            webSocketSessionData.remove = [];
        }
        clearTimeout(websocketTimeout);
    }

    function onWebSocketSessionDataMessage(event) {
        let msg = JSON.parse(event.data)
        if (!msg) {
            logger(logLevel.LOG, JSON.stringify(event.data));
            return
        }
        switch (msg.operation) {
            case "REMOVE":
                webSocketSessionData.remove.push(msg.details);
                break;
            case "ADD":
                webSocketSessionData.add.push(msg.details);
                break;
            case "UPDATE":
                webSocketSessionData.update.push(msg.details);
                break;
            default:
                logger(logLevel.WARN, "Unsupported Session Data Operation: " + msg.operation);
        }
        // reset the timer to handleWebsocketData in case it is already running
        clearTimeout(websocketTimeout);
        // set timeout to 5s to make sure there is no more Session update
        websocketTimeout = setTimeout(handleWebsocketData, 5000);
    }

    function onWebSocketEthMessage(event) {
        logger(logLevel.LOG, "WS onMessage: new data:", event.data);
        let msg = JSON.parse(event.data)

        if (!msg) {
            logger(logLevel.LOG, "WS onMessage: failed to parse event data:", event.data);
            return
        }

        if (msg.subject === "REFRESH_ETH") {
            loadBandwidthData();
        } else if (msg.subject === "RELOAD_TABLE") {
            getEthConfigData();
            getSfpData();
        } else if (msg.subject === "UPDATE_ROWS") {
            const selectedData = ethernetTable.api.getSelectedRows();
            for (let i = 0; msg.rows && i < msg.rows.length; i++) {
                let newData = msg.rows[i];
                for (let j = 0; j < currentConfigData.length; j++) {
                    let currentData = currentConfigData[j];
                    if (newData.eth == currentData.eth) {
                        currentConfigData[j] = newData;
                        if (selectedData.length == 1 && selectedData[0].name == newData.eth) {
                            refreshEthConfig();
                        }
                        break;
                    }
                }
            }
            getSfpData();
        } else {
            logger(logLevel.LOG, "WS onMessage: unknown subject: ", msg.subject);
        }
    }

    function onWebSocketSlotMessage(event) {
        let msg = JSON.parse(event.data);
        if (!msg) {
            logger(logLevel.LOG, "Slot Websocket Message is missing: " + JSON.stringify(event.data));
            return
        }
        switch (msg.operation) {
            case "UPDATE":
                getSessionData();
                break;
            default:
                logger(logLevel.WARN, "Unsupported operation given in Slot websocket message: " + msg.operation);
                return;
        }
    }

    function onCounterSelected(event) {
        let selectedCounter = counterTableOptions.api.getSelectedRows();
        if (selectedCounter.length == 0) {
            document.getElementById("counterDetailTitleRow").style.display = "none";
            document.getElementById("counterDetailChartRow").style.display = "none";
            return;
        }
        let ethName = ethernetTable.api.getSelectedRows()[0].name;
        let selectedCounterList = [];
        for (let i = 0; i < selectedCounter.length; i++) {
            selectedCounterList.push({
                description: selectedCounter[i].description
            })
        }

        $.post("/ip/net/counters/detail?eth="+ ethName, JSON.stringify(selectedCounterList) ).done((data) => {
            if (data) {
                document.getElementById("counterDetailTitleRow").style.display = "";
                document.getElementById("counterDetailChartRow").style.display = "";
                if (data.length > 1) {
                    counterDetailOptions.title.text = "Counter Chart";
                    counterDetailOptions.legend.enabled = true;
                } else if (data.length == 1) {
                    counterDetailOptions.title.text = data[0][0].description;
                    counterDetailOptions.legend.enabled = false;
                }
                let seriesData = [];
                let counterMap = new Map();
                for (let i = 0; i < data.length; i++) {
                    if (data[i].length > 0) {
                        seriesData.push({
                            type: "line",
                            xKey: "date",
                            yKey: data[i][0].description,
                            yName: data[i][0].description,
                            connectMissingData: true,
                        });
                        for (let j = 0; j < data[i].length; j++) {
                            if (!counterMap.has(data[i][j].date)) {
                                counterMap.set(data[i][j].date, {[data[i][j].description]: parseInt(data[i][j].value)});
                            } else {
                                let curr = counterMap.get(data[i][j].date);
                                curr[data[i][j].description] = parseInt(data[i][j].value);
                                counterMap.set(data[i][j].date, curr);
                            }
                        }
                    }
                }
                let counterData = [];
                let keys = Array.from(counterMap.keys());
                for (let i = 0; i < keys.length; i++) {
                    let value = counterMap.get(keys[i]);
                    value.date = keys[i];
                    counterData.push(value);
                }
                counterData.sort(timeCompare);
                counterDetailOptions.data = counterData;
                counterDetailOptions.series = seriesData;
                document.getElementById("counterDetailChart").innerHTML = "";
                agCharts.AgCharts.create(counterDetailOptions);
            }
        });
    }

    function onIpModeUpdate() {
        const dhcpMode = (document.getElementById('configIpMode').value == "DHCP");
        document.getElementById('configIpAddress').disabled = dhcpMode;
        document.getElementById('configSubnetMask').disabled = dhcpMode;
        document.getElementById('configGateway').disabled = dhcpMode;
        document.getElementById('configGatewayMetric').disabled = dhcpMode;
    }

    function timeCompare(a, b) {
        if (a.date < b.date) {
            return -1;
        }
        if (a.date > b.date) {
            return 1;
        }
        return 0;
    }

    function isValidIPv4(value) {
        const ipv4Pattern = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$/;
        return ipv4Pattern.test(value);
    }
</script>

{{ end }}