<%@ page language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="PCC_VPS_ServerGroups, MachSol.MachPanel.Web" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" runat="Server">

    <script type="text/javascript">
        function SaveNattedIPForIPddress(source, IPId) {
            //alert(source);
            //if (source.value !== '') {
            //alert(IPId);
            //return;
            var params = "{'IPId': '" + IPId + "', 'NattedIP': '" + source.value + "'}";
            $.ajax({
                type: "POST",
                url: "VMHome.aspx/SaveNettedIP",
                async: true,
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d.indexOf('Error') < 0) {

                    }
                    else {
                        alert(msg.d);
                    }
                },
                error: function (errorMessage) {
                    alert(errorMessage);
                }
            });
            //}
        }

        //Server Heath Check Graph
        function GetCpuAndMemoryHistory(event, ServerIdAndIP) {
            var params = "{'serverGroupIdServerIdIP': '" + ServerIdAndIP + "'}";
            $.ajax({
                type: "POST",
                url: "VMHome.aspx/GetAsyncServerCpuAndMemoryStats",
                async: true,
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d.indexOf('Error') < 0) {
                        var receivedArray = msg.d.split("|");
                        var legendXLabelText = receivedArray[0];
                        var headerLabelText = receivedArray[1];
                        var graphData = receivedArray[3];

                        $('#serverHealth').modal('show');
                        SetLabelText(legendXLabelText + "|" + headerLabelText);
                        LoadCpuUsageGraph(graphData);
                        LoadMemoryUsageGraph(graphData);
                    }
                    else {
                        alert(msg.d);
                    }
                },
                error: function (errorMessage) {
                    alert(errorMessage);
                }
            });
        }
        function SetLabelText(response) {
            var receivedArray = response.split("|");
            var legendXLabelText = receivedArray[0];
            var headerLabelText = receivedArray[1];
            $("#Lbl_GraphXaxis").text(legendXLabelText);
            $("#Lbl_GraphXaxis2").text(legendXLabelText);
            $("#Lbl_UsagePopupHeader").text(headerLabelText);

        }

        function LoadCpuUsageGraph(dataParam) {
            $("#graph_CPU").empty();
            var body_color = getCookie('body_color');
            var lblColor = 'black'
            if (body_color == 'night-mode') {
                lblColor = 'white';
            }
            var line = Morris.Area({
                element: 'graph_CPU',
                data: $.parseJSON(dataParam),
                xkey: 'x',
                ykeys: ['y'],
                labels: ['<%=Resources.Content.CPUUsage%>'],
                fillOpacity: 0.3,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['blue', 'red'],
                lineColors: ['blue', 'red'],
                lineWidth: '1px',
                parseTime: false,
                backgroundColor: '#FFFFFF',
                labelColor: lblColor,

                hoverCallback: function (index, options, content, row) {
                    //console.log("index" + index + "- options" + options + " - content: " + content + " row: " + row);
                    //console.log(options);
                    //console.log(row);
                    return "<div class='morris-hover-row-label'>" + row.w + "</div><div class='morris-hover-point' style='color: b'>" +
                "<%=Resources.Content.CPUUsage%>: " + row.y + "</div>";
                }
            });
            var parentDivWidth = $("#graph_CPU").parent("div").width();
            $("#graph_CPU").css("min-width", parentDivWidth);
            $("#graph_CPU > svg:nth-child(1)").css("min-width", parentDivWidth);
            line.redraw();
        }

        function LoadMemoryUsageGraph(dataParam) {
            $("#graph_Memory").empty();
            var body_color = getCookie('body_color');
            var lblColor = 'black'
            if (body_color == 'night-mode') {
                lblColor = 'white';
            }
            var line = Morris.Area({
                element: 'graph_Memory',
                data: $.parseJSON(dataParam),
                xkey: 'x',
                ykeys: ['z'],
                labels: ['<%=Resources.Content.MemoryUsage%>'],
                fillOpacity: 0.3,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['purple', 'red'],
                lineColors: ['purple', 'red'],
                lineWidth: '1px',
                parseTime: false,
                backgroundColor: '#FFFFFF',
                labelColor: lblColor,

                hoverCallback: function (index, options, content, row) {
                    //console.log("index" + index + "- options" + options + " - content: " + content + " row: " + row);
                    //console.log(options);
                    //console.log(row);
                    return "<div class='morris-hover-row-label'>" + row.w + "</div><div class='morris-hover-point' style='color: b'>" +
                    "<%=Resources.Content.MemoryUsage%>: " + row.z + "</div>";
                }
            });
            var parentDivWidth = $("#graph_Memory").parent("div").width();
            $("#graph_Memory").css("min-width", parentDivWidth);
            $("#graph_Memory > svg:nth-child(1)").css("min-width", parentDivWidth);
            line.redraw();
        }
    </script>

    <script type="module">

        import { createApp } from 'vue'
        import ServerGroups from '/Components/VPS/ServerGroups.js?v=3.4'
        import Servers from '/Components/VPS/Servers.js?v=3.4'
        import VirtualPrivateNetwork from '/Components/VPS/VirtualPrivateNetwork.js?v=3.4'
        import SubNetPool from '/Components/VPS/SubNetPool.js?v=3.4'
        import DNSPool from '/Components/VPS/DNSPool.js?v=3.4'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.4'
        import { getLabelText } from '/Components/Common/utils.js?v=3.4'

        createApp({
            data() {
                return {
                    isLoggedInAsCustomer: <%= Helper.IsLoggedInAsCustomer.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    vpnTabQueryVPSServerID: '<%= Newtonsoft.Json.JsonConvert.SerializeObject(VPNTabQueryVPSServerID) %>',
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    serverGroupId: 0,
                    serverId: 0,
                    serverGroupName: '',
                    serverName: '',
                    serverGroupProvider: '',
                    currentTab: 0,
                    tabPanels: [{ text: this.getLabelText('M0095'), enabled: true, hideTabs: [1, 2, 3, 4] },
                    { text: this.getLabelText('HVServer19'), enabled: false, hideTabs: [2, 3, 4] },
                    { text: this.getLabelText('HVServer18'), enabled: false, hideTabs: [] },
                    { text: this.getLabelText('VPS992'), enabled: false, hideTabs: [] },
                    { text: this.getLabelText('VPS993'), enabled: false, hideTabs: [] }]
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
                openServersTab: function (obj) {
                    this.serverGroupId = obj.serverGroupId;
                    //this.serverGroupName = obj.serverGroupName;
                    //this.serverGroupProvider = obj.serverGroupProvider;

                    this.activeTabChanged(1);
                },
                openVPNTab: function (obj) {
                    this.serverId = obj.serverId;
                    this.serverGroupId = obj.serverGroupId;
                    this.serverName = obj.serverName;
                    this.serverGroupName = obj.serverGroupName;

                    //this.currentTab = 2;
                    this.activeTabChanged(2);
                },
                openSubNetPoolTab: function (obj) {
                    this.serverGroupId = obj.serverGroupId;
                    //this.serverGroupName = obj.serverGroupName;
                    //this.serverGroupProvider = obj.serverGroupProvider;

                    //this.currentTab = 3;
                    this.activeTabChanged(3);
                },
                openDNSPoolTab: function (obj) {
                    this.serverGroupId = obj.serverGroupId;
                    //this.serverGroupName = obj.serverGroupName;
                    //this.serverGroupProvider = obj.serverGroupProvider;

                    //this.currentTab = 4;
                    this.activeTabChanged(4);
                }
            },
            components: {
                TabContainer,
                ServerGroups,
                Servers,
                VirtualPrivateNetwork,
                SubNetPool,
                DNSPool
            },
            created: function () {

                let urlParams = new URLSearchParams(window.location.search);
                var vm = this;

                if (urlParams.has('TI')) {
                    if (urlParams.get('TI') == 3) {
                        this.openSubNetPoolTab({ serverGroupId: urlParams.get('SGId') });
                    }
                    else if (urlParams.get('TI') == 4) {
                        this.openDNSPoolTab({ serverGroupId: urlParams.get('SGId') });
                    }
                }
                else if (urlParams.has('SGId')) {
                    this.openServersTab({ serverGroupId: urlParams.get('SGId') });
                }
                
                if (urlParams.has('VPSServerID') && this.vpnTabQueryVPSServerID != null) {
                    var resp = JSON.parse(this.vpnTabQueryVPSServerID);

                    this.openServersTab({ serverGroupId: resp.VPSServerGroupID });

                    this.openVPNTab({
                        serverId: resp.VPSServerID,
                        serverGroupId: resp.VPSServerGroupID,
                        serverName: resp.ReferenceID,
                        serverGroupName: resp.Name,
                    });
                }

                if (urlParams.has('err')) {
                    if (urlParams.get('err') == 1)
                        displayErrorMsg(Error(this.getLabelText('Lync309')));
                }
                if (urlParams.has('MESG')) {
                    if (urlParams.get('MESG') == 1)
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    else if (urlParams.get('MESG') == 0)
                        displayErrorMsg(Error(this.getLabelText('EGN0000001')));
                }
            },
            template: `

<TabContainer :id="'vpsservergroups'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>
                    
<ServerGroups v-if="currentTab == 0" :readOnly="readOnly" @onOpenServersTab="openServersTab" @onOpenSubNetPoolTab="openSubNetPoolTab"
    @onOpenDNSPoolTab="openDNSPoolTab"/>
<Servers v-if="currentTab == 1" :readOnly="readOnly" @onOpenVPNTab="openVPNTab" :serverGroupId="serverGroupId" />
<VirtualPrivateNetwork v-if="currentTab == 2" :readOnly="readOnly" :serverId="serverId" :serverName="serverName" :serverGroupId="serverGroupId" :serverGroupName="serverGroupName" />
<SubNetPool v-if="currentTab == 3" :readOnly="readOnly" :serverGroupId="serverGroupId" />
<DNSPool v-if="currentTab == 4" :readOnly="readOnly" :serverGroupId="serverGroupId" />

`
        }).mount('#app');

    </script>

    <div id="app">
    </div>

</asp:Content>
