<%@ control language="VB" autoeventwireup="false" inherits="PCC_VPS_CC_ServerCpuAndMemory, MachSol.MachPanel.Web" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Assembly="MachSol.MachPanel.Utility" Namespace="MachSol.MachPanel.Utility"
    TagPrefix="EM" %>
<%@ Register Src="~/Template/GVPager.ascx" TagName="Pager" TagPrefix="EM" %>

<script type="text/javascript">
    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];

                    $find('<%= MPE_ServerCpuAndMemoryStatsHostory.ClientID %>').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>
<asp:Panel ID="Pnl_Listing_ServerCpuAndMemoryStats" runat="server" DefaultButton="Btn_ApplyFilter_ServerCpuAndMemoryStats">

    <asp:Panel ID="Pnl_Btn_ApplyFilter" runat="server" CssClass="row" DefaultButton="Btn_ApplyFilter_ServerCpuAndMemoryStats">
        <div class="panel-group search-panel" id="AS_ServerCpuAndMemoryStats" role="tablist" aria-multiselectable="true">
            <div class="col-xs-12" role="tab" id="SH_ServerCpuAndMemoryStats">
                <div class="card">
                    <div class="header" role="button" data-toggle="collapse" data-parent="#AS_ServerCpuAndMemoryStats" href="#<%= CSB_ServerCpuAndMemoryStats.ClientID%>" aria-expanded="true" aria-controls="SH_ServerCpuAndMemoryStats">
                        <h3>
                            <%= Resources.Content.GN0000395%>
                        </h3>
                    </div>
                    <div id="CSB_ServerCpuAndMemoryStats" runat="server" class="body panel-collapse collapse" role="tabpanel" aria-labelledby="SH_ServerCpuAndMemoryStats" aria-expanded="false">
                        <div class="row">
                            <ajax:UpdatePanel ID="UP_ServerGroups" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
                                <ContentTemplate>
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="form-group form-float">
                                            <asp:DropDownList ID="DDL_ServerGroups" runat="server" AutoPostBack="true">
                                            </asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="form-group form-float">
                                            <asp:DropDownList ID="DDL_Server" runat="server">
                                            </asp:DropDownList>
                                        </div>
                                    </div>

                                </ContentTemplate>
                            </ajax:UpdatePanel>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group form-float">
                                    <asp:ValidationSummary ID="VS_SearchServerCpuAndMemoryStats" runat="server" ShowMessageBox="true"
                                        ShowSummary="false" ValidationGroup="SearchServerCpuAndMemoryStats" />
                                    <asp:Button ID="Btn_ApplyFilter_ServerCpuAndMemoryStats" ValidationGroup="SearchServerCpuAndMemoryStats" class="btn btn-primary waves-effect" runat="server" Text="<%$ Resources:Content,GN0000391%>" />
                                    <asp:Button ID="Btn_ClearFilter_ServerCpuAndMemoryStats" Visible="false" class="btn btn-primary waves-effect" runat="server" Text="<%$ Resources:Content,String289 %>" />

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </asp:Panel>
    <div class="row">
        <div class="col-xs-12">
            <%--<div class="double-scroll-wrapper1">
                <div>
                </div>
            </div>
            <div class="double-scroll-wrapper2">--%>
                <asp:GridView ID="GV_ServerCpuAndMemoryStats" CssClass="table table-bordered table-striped table-hover" AllowSorting="true" AllowPaging="false"
                    EmptyDataText='<%$ Resources:Content, GN00001375 %>' runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-2" SortExpression="ServerGroupName"
                            HeaderText='<%$ Resources:Content, strServerGroup %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_ServerGroupName" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-2" SortExpression="ServerName"
                            HeaderText='<%$ Resources:Content, ServerName %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_ServerName" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-2" SortExpression="IP"
                            HeaderText='<%$ Resources:Content, IP %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_IP" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-1" SortExpression="CPU"
                            HeaderText='<%$ Resources:Content,CPUPercentage %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_CPU" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-1" SortExpression="Memory"
                            HeaderText='<%$ Resources:Content,MemoryPercentage %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_Memory" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderStyle-CssClass="col-xs-2" SortExpression="TimeUpdated"
                            HeaderText='<%$ Resources:Content, GN0000779 %>'>
                            <ItemTemplate>
                                <asp:Label ID="Lbl_Time" runat="server" Text="" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText='<%$ Resources:Content, History %>' HeaderStyle-CssClass="col-xs-2">
                            <ItemTemplate>
                                <button id="Btn_ViewHistory"
                                    class="btn btn-primary"
                                    onclick="GetCpuAndMemoryHistory($(this),'<%# DataBinder.Eval(Container.DataItem, "ServerGroupId") & "|" & DataBinder.Eval(Container.DataItem, "ServerId") & "|" & DataBinder.Eval(Container.DataItem, "IP")%>' );return false;">
                                    <%= Resources.Content.View%></button>
                                <asp:Button ID="Btn_Update"
                                    runat="server"
                                    CommandName="Update"
                                    CssClass="btn btn-primary btnAction"
                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ServerGroupId") & "|" & DataBinder.Eval(Container.DataItem, "ServerId") %>'
                                    Text="<%$ Resources:Content,strUpdate %>" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <%--<PagerTemplate>
                        <EM:Pager ID="Pager1" runat="server" />
                    </PagerTemplate>--%>
                </asp:GridView>
            <%--</div>--%>
        </div>
    </div>
</asp:Panel>

<!-- Mailbox Usage History -->
<asp:Button ID="Button2" runat="server" CssClass="btn-dummy" />
<asp:Button ID="Button1" runat="server" CssClass="btn-dummy" />
<EM:ModalPopupExtender runat="server" ID="MPE_ServerCpuAndMemoryStatsHostory" BackgroundCssClass="modalBackground"
    DropShadow="false" PopupControlID="Pnl_ServerCpuAndMemoryStats" TargetControlID="Button1"
    OkControlID="Button2">
</EM:ModalPopupExtender>

<asp:Panel ID="Pnl_ServerCpuAndMemoryStats" runat="server" CssClass="width-modal-popup-auto" Style="display: none; position: fixed;">
    <div class="col-xs-12">
        <div class="card">
            <div class="header container-fluid">
                <h3 class="pull-left">
                    <label id="Lbl_UsagePopupHeader"></label>
                </h3>
                <span>
                    <button type="button" class="close" onclick="$find('<%=MPE_ServerCpuAndMemoryStatsHostory.ClientID%>').hide();">&times;</button>
                </span>
            </div>
            <div class="body">
                <h4><%= Resources.Content.CPUUsage %></h4>
                <hr />
                <div class="row">
                    <%--<div class="col-xs-2" style="margin-top: 16%; width: 13%;">
                        <label class="verticalLabel"><%= Resources.Content.CPUUsageInPercentage%></label>
                    </div>--%>
                    <div class="col-xs-12">
                        <div id="graph_CPU"></div>
                    </div>
                </div>
                <%--<div class="row">
                    <div class="col-xs-12">
                        <label style="margin-left: 43%;">
                            <label id="Lbl_GraphXaxis"></label>
                        </label>
                    </div>
                </div>--%>
                <br />
                <h4><%= Resources.Content.MemoryUsage %></h4>
                <hr />
                <div class="row">
                    <%--<div class="col-xs-2" style="margin-top: 16%; width: 13%;">
                        <label class="verticalLabel"><%= Resources.Content.MemoryUsageInPercentage%></label>
                    </div>--%>
                    <div class="col-xs-12">
                        <div id="graph_Memory"></div>
                    </div>
                </div>
                <%--<div class="row">
                    <div class="col-xs-12">
                        <label style="margin-left: 43%;">
                            <label id="Lbl_GraphXaxis2"></label>
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <asp:Button ID="Btn_Close" CausesValidation="false" runat="server" Text='<%$ Resources:Content,GN000150 %>'
                            CssClass="btn btn-primary waves-effect" />
                    </div>
                </div>--%>
            </div>
        </div>
    </div>
</asp:Panel>
