source: branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Views/Home/Index.cshtml @ 9643

@model HeuristicLab.Services.Hive.Statistics.Models.OverallStatus

@{
    ViewBag.Title = "Status Monitor";
}

<h1>Current Status</h1>

<section>
    <table>
        <tr>
            <td>Overall Available Cores</td>
            <td>@Model.OverallCurrentlyAvailableCores</td>
        </tr>
        <tr>
            <td>Availabe Cores (real)</td>
            <td>@Model.CurrentlyAvailableCores</td>
        </tr>
        <tr>
            <td>Used Cores</td>
            <td>@Model.CurrentlyUsedCores</td>
        </tr>
        <tr>
            <td>System-Wide Waiting Tasks</td>
            <td>@Model.CurrentlyJobsWaiting</td>
        </tr>
        <tr>
            <td>Overall Avg. CPU Utilization</td>
            <td>@Model.OverallCpuUtilization</td>
        </tr>
        <tr>
            <td>Available Avg. CPU Utilization</td>
            <td>@Model.AvailableCpuUtilization</td>
        </tr>
    </table>
</section>

<fieldset>
        <legend>Range</legend>
        <ol>
            <li>Start</li>
            <li>
                @Html.TextBox("Start", (DateTime.Now - new TimeSpan(1, 0, 0, 0)).ToString("yyyy-MM-dd"), new { @class = "date" })
            </li>
            <li>End</li>
            <li>
                @Html.TextBox("End", DateTime.Now.ToString("yyyy-MM-dd"), new { @class = "date" })
            </li>
        </ol>
        <button id="refresh">Refresh</button>
    </fieldset>

<section class="charts">
    <div id="AverageCpuUtilization"></div>
    <div id="UsedCores"></div>
    <div id="UsedMemory"></div>
</section>

@section Styles {
    @Styles.Render("~/Styles/jqPlot/jquery.jqplot")
    @Styles.Render("~/Content/themes/base/css")
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
    <script>
    $("#refresh").button({
        icons: {
            primary: "ui-icon-refresh"
        }
    });
    </script>

    @Scripts.Render("~/Scripts/jqPlot/jquery.jqplot")
    @ChartHelper.AjaxDataRenderer()

    @ChartHelper.LineChartTime(
        "AverageCpuUtilization",
        Url.Action("AverageCpuUtilization", "ChartData"),
        title: "Avg. CPU Utilization History of all Slaves",
        axisYFormat: "%.2f%%",
        minY: 0, maxY: 100)

    @ChartHelper.LineChartTime(
        "UsedCores",
        Url.Action("UsedCores", "ChartData"),
        title: "Cores / Used Cores",
        minY: 0)

    @ChartHelper.LineChartTime(
        "UsedMemory",
        Url.Action("UsedMemory", "ChartData"),
        title: "Memory / Used Memory (GB)",
        minY: 0)

    <script>
        $(document).ready(function () {
            $(".date").datepicker({
                dateFormat: "yy-mm-dd",
                onSelect: function () { refreshCharts(); }
            });

            $("#refresh").click(function() {
                refreshCharts();
            });

            
        });
        
        function refreshCharts() {
            var startDate = $('#Start').val();
            var endDate = $('#End').val();
            
                        @*
            var url = "@Url.Action("AverageCpuUtilization", "ChartData")?start=" + startDate + "&end" + endDate;
            
            @ChartHelper.LineChartTime(
                "AverageCpuUtilization",
                "url",
                title: "Avg. CPU Utilization History of all Slaves",
                axisYFormat: "%.2f%%",
                minY: 0, maxY: 100)
            *@

            @ChartHelper.RefreshChart("AverageCpuUtilization", Url.Action("AverageCpuUtilization", "ChartData"), "startDate", "endDate")
            @ChartHelper.RefreshChart("UsedCores", Url.Action("UsedCores", "ChartData"), "startDate", "endDate")
            @ChartHelper.RefreshChart("UsedMemory", Url.Action("UsedMemory", "ChartData"), "startDate", "endDate")
        }
    </script>
}