<%@ control language="VB" autoeventwireup="false" inherits="PCC_VPS_CC_Summary, MachSol.MachPanel.Web" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Src="~/Template/GVPager.ascx" TagName="Pager" TagPrefix="UC" %>

<script type="text/javascript">

    $(document).ready(function () {


        $(".span_refresh_executiveview_inventory").on("click", function () {
            $("#<%= Btn_Update_ExecutiveView_Now.ClientID%>").trigger("click");
        });
        if ($("#<%= DDL_ServerGroups.ClientID %>").length > 0) {
            GetServers($("#<%= DDL_ServerGroups.ClientID %>").val());
        }

    })
    function SetGraphWidth(graphId) {

        var parentDivWidth = $("#" + graphId).parent("div").width();
        var parentDivHeight = $("#" + graphId).parent("div").height();

        $("#" + graphId).css("min-width", parentDivWidth);

        var lenghtiestLabelWidth = 0;
        $("#" + graphId).find('text').each(function () {

            if ($(this).context) {
                if ($(this).context.clientWidth > lenghtiestLabelWidth) {
                    lenghtiestLabelWidth = $(this).context.clientWidth;
                }
            }
        })

        $("#" + graphId).css("min-height", parentDivHeight + (lenghtiestLabelWidth / 9));
        $("#" + graphId + "> svg:nth-child(1)").css("min-width", parentDivWidth).css("min-height", parentDivHeight + (lenghtiestLabelWidth / 9));

    }
    function GetServerExecutiveView() {

        $("#Div_ServerGroup_ExecutiveView").removeClass("hide")
        $("#Div_Server_ExecutiveView").removeClass("hide")

        var params = '{"ServerGroupId":"' + $("#<%= DDL_ServerGroups.ClientID %>").val() + '","ServerId":"' + $("#DDL_Servers").val() + '"}';
        $.ajax({
            type: "POST",
            url: "VMHome.aspx/GetAsyncServerExecutiveView",
            async: false,
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d.indexOf('Error') < 0) {
                    var arrayOfJobjects = jQuery.parseJSON(msg.d);

                    LoadServerUsageBarGraph(arrayOfJobjects[0], "graph_Memory_SG", ['#005987', 'rgb(122, 146, 163)'], "<%= Resources.Content.strMemoryOnHost %>", "<%= Resources.Content.strMemoryAllocatedToVMs %>");
                    LoadServerUsageBarGraph(arrayOfJobjects[1], "graph_DiskSpace_SG", ['#0098db', 'rgb(122, 146, 163)'], "<%= Resources.Content.strDiskOnHost %>", "<%= Resources.Content.strDiskConsumedByVMs %>");
                    LoadServerUsageBarGraphCPU(arrayOfJobjects[2], "graph_Processors_SG", ['#0098db', '#005987', '#03a09b', 'rgb(122, 146, 163)'], "<%= Resources.Content.strLPsOnHost %>", "<%= Resources.Content.strVCPUsAssignedToVMs %>", "<%= Resources.Content.strVCPUsOnStoppedVMs %>", "<%= Resources.Content.strVCPUsOnRunningVMs %>");

                    LoadServerUsageDonutGraph(arrayOfJobjects[3][0], "graph_Memory_S", ['#005987', 'rgb(122, 146, 163)']);
                    LoadServerUsageDonutGraph(arrayOfJobjects[3][1], "graph_DiskSpace_S", ['#0098db', 'rgb(122, 146, 163)']);
                    LoadServerUsageDonutGraph(arrayOfJobjects[3][2], "graph_Processors_S", ['#03a09b', 'rgb(122, 146, 163)']);
                }
                else {
                    if (msg.d.toLowerCase().indexOf('no records found') >= 0) {
                        $("#Div_ServerGroup_ExecutiveView").addClass("hide")
                        $("#Div_Server_ExecutiveView").addClass("hide")
                    }
                    else {
                        alert(msg.d);
                    }
                }
            },
            error: function (errorMessage) {
                alert(errorMessage);
            }
        });

    }

    function LoadServerUsageDonutGraph(dataParam, graphId, colors) {
        $("#" + graphId).empty();
        var body_color = getCookie('body_color');
        var lblColor = 'black'
        if (body_color == 'night-mode') {
            lblColor = 'white';
        }
        $("#" + graphId).css("height", "250")
        Morris.Donut({
            element: graphId,
            data: dataParam,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors: lblColor,
            backgroundColor: '#FFFFFF',
            labelColor: lblColor,
            colors: colors,
            resize: true,
            formatter: function (x) { return x },
            stacked: true
        }).select(1);

        //var parentDivWidth = $("#" + graphId).parent("div").width();
        //$("#" + graphId).css("min-width", parentDivWidth);
        //$("#" + graphId + "> svg:nth-child(1)").css("min-width", parentDivWidth);
    }
    function LoadServerUsageBarGraphCPU(dataParam, graphId, barColors, labelA, labelB, labelC, labelD) {
        $("#" + graphId).empty();
        var body_color = getCookie('body_color');
        var lblColor = 'black'
        if (body_color == 'night-mode') {
            lblColor = 'white';
        }
        $("#" + graphId).css("height", "280")
        $("#" + graphId).css("min-height", 0);
        $("#" + graphId + "> svg:nth-child(1)").css("min-width", 0).css("min-height", 0);

        Morris.Bar({
            element: graphId,
            data: dataParam,
            resize: true,
            hideHover: true,
            xLabelMargin: 10,
            xLabelAngle: 70,
            fillOpacity: 0.6,
            barColors: barColors,
            xkey: 'y',
            ykeys: ['a', 'b','c','d'],
            labels: [labelA, labelB, labelC, labelD]
        });

        SetGraphWidth(graphId);
    }

    function LoadServerUsageBarGraph(dataParam, graphId, barColors, labelA, labelB) {
        $("#" + graphId).empty();
        var body_color = getCookie('body_color');
        var lblColor = 'black'
        if (body_color == 'night-mode') {
            lblColor = 'white';
        }
        $("#" + graphId).css("height", "280")
        $("#" + graphId).css("min-height", 0);
        $("#" + graphId + "> svg:nth-child(1)").css("min-width", 0).css("min-height", 0);

        Morris.Bar({
            element: graphId,
            data: dataParam,
            resize: true,
            hideHover: true,
            xLabelMargin: 10,
            xLabelAngle: 70,
            fillOpacity: 0.6,
            barColors: barColors,
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: [labelA, labelB]
        });

        SetGraphWidth(graphId);
    }

    function GetServers(ServerGroupId) {

        var params = '{"ServerGroupId":"' + ServerGroupId + '"}';
        $.ajax({
            type: "POST",
            url: "VMHome.aspx/GetAsyncServers",
            async: false,
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d.indexOf('Error') < 0) {
                    var arrayOfServerJobjects = jQuery.parseJSON(msg.d);
                    if (arrayOfServerJobjects.length > 0) {
                        $('#DDL_Servers option').remove();
                        //$('#DDL_Servers').selectpicker('refresh');
                        initVirtualSelectPlugin('#DDL_Servers');

                        var i = 0;
                        for (i = 0; i < arrayOfServerJobjects.length; i++) {
                            $('#DDL_Servers').append('<option value="' + arrayOfServerJobjects[i].value + '">' + arrayOfServerJobjects[i].text + '</option>');
                        }
                        //$('#DDL_Servers').selectpicker('refresh');
                        initVirtualSelectPlugin('#DDL_Servers');
                        GetServerExecutiveView();
                    }
                }
                else {
                    alert(msg.d);
                }
            },
            error: function (errorMessage) {
                alert(errorMessage);
            }
        });

    }
</script>

<asp:Button ID="Btn_Update_ExecutiveView_Now" runat="server" Text="<%$ Resources:Content,UpdateNow %>"
    CssClass="hide" />
<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="header container-fluid">
                <h3 class="pull-left">
                    <%= Resources.Content.ExecutiveView%>
                </h3>
                <span class="close span_refresh span_refresh_executiveview_inventory glyphicon glyphicon-refresh"></span>
            </div>
            <div class="body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="header container-fluid">
                                <h3 class="pull-left">
                                    <%= Resources.Content.ServerGroupAnalytics%>
                                </h3>
                            </div>
                            <div class="body">
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label">
                                        <asp:Literal ID="Literal15" runat="server" Text='<%$ Resources:Content, SelectServerGroup%>' EnableViewState="false"></asp:Literal>: 
                                    </div>
                                    <div class="col-sm-4 col-xs-12">
                                        <div class="form-group">
                                            <asp:DropDownList ID="DDL_ServerGroups" runat="server">
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="Div_ServerGroup_ExecutiveView">
                                    <div class="col-sm-4 col-xs-12">
                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal7" runat="server" Text='<%$ Resources:Content, GN0001114%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_Memory_SG"></div>
                                    </div>
                                    <div class="col-sm-4 col-xs-12">
                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal2" runat="server" Text='<%$ Resources:Content, DiskUsage%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_DiskSpace_SG"></div>
                                    </div>
                                    <div class="col-sm-4 col-xs-12 row-label">
                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal3" runat="server" Text='<%$ Resources:Content, ProcessorUsage%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_Processors_SG"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="Div_Server_ExecutiveView">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="header container-fluid">
                                <h3 class="pull-left">
                                    <%= Resources.Content.ServerAnalytics%>
                                </h3>
                            </div>
                            <div class="body">
                                <div class="row">
                                    <div class="col-sm-2 col-xs-12 row-label">
                                        <asp:Literal ID="Literal1" runat="server" Text='<%$ Resources:Content, strSelectServer%>' EnableViewState="false"></asp:Literal>: 
                                    </div>
                                    <div class="col-sm-4 col-xs-12">
                                        <div class="form-group">
                                            <select id="DDL_Servers" onchange="GetServerExecutiveView();"></select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4 col-xs-12 row-label">

                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal5" runat="server" Text='<%$ Resources:Content, GN0001114%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_Memory_S"></div>
                                    </div>
                                    <div class="col-sm-4 col-xs-12 row-label">
                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal8" runat="server" Text='<%$ Resources:Content, DiskUsage%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_DiskSpace_S"></div>
                                    </div>
                                    <div class="col-sm-4 col-xs-12">
                                        <div class="row">
                                            <div class="col-xs-12 text-center row-label m-b-0">
                                                <asp:Literal ID="Literal6" runat="server" Text='<%$ Resources:Content, ProcessorUsage%>' EnableViewState="false"></asp:Literal>
                                            </div>
                                        </div>
                                        <div id="graph_Processors_S"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
