Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
06/16/14 10:37:22 (10 years ago)
Author:
mroscoe
Message:

First check-in for Matt Roscoe. Major revision, multiple new files created and multiple files changed.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Views/Home/Index.cshtml

    r9662 r11020  
    22
    33@{
    4     ViewBag.Title = "Status Monitor";
     4  ViewBag.Title = "Status Monitor";
    55}
    66
    77<h1>Current Status</h1>
    88
     9@*
     10Original code
    911<section>
    10     <table>
    11         <tr>
    12             <td>Overall Available Cores</td>
    13             <td>@Model.OverallCurrentlyAvailableCores</td>
    14         </tr>
    15         <tr>
    16             <td>Availabe Cores (real)</td>
    17             <td>@Model.CurrentlyAvailableCores</td>
    18         </tr>
    19         <tr>
    20             <td>Used Cores</td>
    21             <td>@Model.CurrentlyUsedCores</td>
    22         </tr>
    23         <tr>
    24             <td>System-Wide Waiting Tasks</td>
    25             <td>@Model.CurrentlyJobsWaiting</td>
    26         </tr>
    27         <tr>
    28             <td>Overall Avg. CPU Utilization</td>
    29             <td>@Model.OverallCpuUtilization</td>
    30         </tr>
    31         <tr>
    32             <td>Available Avg. CPU Utilization</td>
    33             <td>@Model.AvailableCpuUtilization</td>
    34         </tr>
    35     </table>
     12  <table>
     13    <tr>
     14      <td>Overall Available Cores</td>
     15      <td>@Model.OverallCurrentlyAvailableCores</td>
     16    </tr>
     17    <tr>
     18      <td>Availabe Cores (real)</td>
     19      <td>@Model.CurrentlyAvailableCores</td>
     20    </tr>
     21    <tr>
     22      <td>Used Cores</td>
     23      <td>@Model.CurrentlyUsedCores</td>
     24    </tr>
     25    <tr>
     26      <td>System-Wide Waiting Tasks</td>
     27      <td>@Model.CurrentlyJobsWaiting</td>
     28    </tr>
     29    <tr>
     30      <td>Overall Avg. CPU Utilization</td>
     31      <td>@Model.OverallCpuUtilization</td>
     32    </tr>
     33    <tr>
     34      <td>Available Avg. CPU Utilization</td>
     35      <td>@Model.AvailableCpuUtilization</td>
     36    </tr>
     37  </table>
     38</section>*@
     39
     40<section class="chartContainer">
     41  <h1 class="title">Current Hive Status</h1>
     42  <button class="collapse">-</button>
     43@*  <label id="lblCurrentCPUUtilization" class="smoothieLabel">Current CPU Utilization</label>
     44  <div class="smoothieHolder">
     45    <canvas id="CurrentCPUUtilization" class="smoothieChart"></canvas>
     46  </div>
     47  <label id="lblCurrentTotalUsedCores" class="smoothieLabel">Current Total and Used Cores</label>
     48  <div class="smoothieHolder">
     49    <canvas id="CurrentTotalUsedCores" class="smoothieChart"></canvas>
     50  </div>
     51  <label id="lblCurrentTotalUsedMemory" class="smoothieLabel">Current Total and Used Memory</label>
     52  <div class="smoothieHolder">
     53    <canvas id="CurrentTotalUsedMemory" class="smoothieChart"></canvas>
     54  </div>*@
     55  <div id="CurrentCPUUtilization"></div>
     56  <div id="CurrentTotalUsedCores"></div>
     57  <div id="CurrentTotalUsedMemory"></div>
    3658</section>
    3759
    38 <fieldset>
    39         <legend>Range</legend>
    40         <ol>
    41             <li>Start</li>
    42             <li>
    43                 @Html.TextBox("Start", (DateTime.Now - new TimeSpan(1, 0, 0, 0)).ToString("yyyy-MM-dd"), new { @class = "date" })
    44             </li>
    45             <li>End</li>
    46             <li>
    47                 @Html.TextBox("End", (DateTime.Now + new TimeSpan(1, 0, 0, 0)).ToString("yyyy-MM-dd"), new { @class = "date" })
    48             </li>
    49         </ol>
    50         <button id="refresh">Refresh</button>
    51     </fieldset>
    52 
    53 <section class="charts">
    54     <div id="AverageCpuUtilization"></div>
    55     <div id="UsedCores"></div>
    56     <div id="UsedMemory"></div>
     60<section class="chartContainer">
     61  <h1 class="title">Historic Hive Status</h1>
     62  <button class="collapse">-</button>
     63  <fieldset>
     64    <legend>Range</legend>
     65    <label>Start</label>
     66    @Html.TextBox("Start", (DateTime.Now - new TimeSpan(1, 0, 0, 0)).ToString("yyyy-MM-dd"), new { @class = "date" })
     67    <label>End</label>
     68    @Html.TextBox("End", (DateTime.Now + new TimeSpan(1, 0, 0, 0)).ToString("yyyy-MM-dd"), new { @class = "date" })
     69    <button id="Refresh">Refresh</button>
     70  </fieldset>
     71  <div id="AverageCpuUtilization"></div>
     72  <div id="UsedCores"></div>
     73  <div id="UsedMemory"></div>
    5774</section>
    5875
    5976@section Styles {
    60     @Styles.Render("~/Styles/jqPlot/jquery.jqplot")
    61     @Styles.Render("~/Content/themes/base/css")
     77  @Styles.Render("~/Styles/jqPlot/jquery.jqplot")
     78  @Styles.Render("~/Content/themes/base/css")
    6279}
    6380
    6481@section Scripts {
    65     @Scripts.Render("~/bundles/jqueryui")
    66     <script>
    67     $("#refresh").button({
    68         icons: {
    69             primary: "ui-icon-refresh"
    70         }
     82  @Scripts.Render("~/bundles/jqueryui")
     83  @Scripts.Render("~/Scripts/smoothie.js")
     84  @Scripts.Render("~/Scripts/SmoothieChartResize.js")
     85  @Scripts.Render("~/Scripts/CollapsingSection.js")
     86  <script>
     87    $("#Refresh").button({
     88      icons: {
     89        primary: "ui-icon-refresh"
     90      }
    7191    });
    72     </script>
     92  </script>
    7393
    74     @Scripts.Render("~/Scripts/jqPlot/jquery.jqplot")
    75     @ChartHelper.AjaxDataRenderer()
     94  @Scripts.Render("~/Scripts/jqPlot/jquery.jqplot")
     95  @ChartHelper.AjaxDataRenderer()
    7696
    77     @ChartHelper.LineChartTime(
     97  @ChartHelper.LineChartTime(
    7898        "AverageCpuUtilization",
    7999        Url.Action("AverageCpuUtilization", "ChartData"),
     
    82102        minY: 0, maxY: 100)
    83103
    84     @ChartHelper.LineChartTime(
     104  @ChartHelper.LineChartTime(
    85105        "UsedCores",
    86106        Url.Action("UsedCores", "ChartData"),
     
    88108        minY: 0)
    89109
    90     @ChartHelper.LineChartTime(
     110  @ChartHelper.LineChartTime(
    91111        "UsedMemory",
    92112        Url.Action("UsedMemory", "ChartData"),
     
    94114        minY: 0)
    95115
    96     <script>
    97         $(document).ready(function () {
    98             $(".date").datepicker({
    99                 dateFormat: "yy-mm-dd",
    100                 onSelect: function () { refreshCharts(); }
    101             });
     116  <script>
     117    $(document).ready(function () {
     118      $(".date").datepicker({
     119        dateFormat: "yy-mm-dd",
     120        onSelect: function () { refreshCharts(); }
     121      });
    102122
    103             $("#refresh").click(function() {
    104                 refreshCharts();
    105             });
     123      $("#Refresh").click(function () {
     124        refreshCharts();
     125      });
    106126
    107            
    108         });
    109        
    110         function refreshCharts() {
    111             var startDate = $('#Start').val();
    112             var endDate = $('#End').val();
     127      //resizeSmoothie();
     128      //createSmoothie();
     129    });
    113130
    114             @ChartHelper.RefreshChart("AverageCpuUtilization", Url.Action("AverageCpuUtilization", "ChartData"), "startDate", "endDate")
    115             @ChartHelper.RefreshChart("UsedCores", Url.Action("UsedCores", "ChartData"), "startDate", "endDate")
    116             @ChartHelper.RefreshChart("UsedMemory", Url.Action("UsedMemory", "ChartData"), "startDate", "endDate")
    117         }
    118     </script>
     131    function refreshCharts() {
     132      var startDate = $('#Start').val();
     133      var endDate = $('#End').val();
     134
     135      @ChartHelper.RefreshChart("AverageCpuUtilization", Url.Action("AverageCpuUtilization", "ChartData"), "startDate", "endDate")
     136      @ChartHelper.RefreshChart("UsedCores", Url.Action("UsedCores", "ChartData"), "startDate", "endDate")
     137      @ChartHelper.RefreshChart("UsedMemory", Url.Action("UsedMemory", "ChartData"), "startDate", "endDate")
     138    }
     139
     140@*    function createSmoothie() {
     141      //Create new SmoothieChart(s)
     142      @ChartHelper.CreateSmoothieChart("CurrentCPUUtilization","rgb(179, 179, 179)","rgb(242, 242, 242)","rgb(0, 22, 84)")
     143      @ChartHelper.CreateSmoothieChart("CurrentTotalUsedCores","rgb(179, 179, 179)","rgb(242, 242, 242)","rgb(0, 22, 84)")
     144      @ChartHelper.CreateSmoothieChart("CurrentTotalUsedMemory","rgb(179, 179, 179)","rgb(242, 242, 242)","rgb(0, 22, 84)")
     145
     146      //Second argument is delay in chart display, used to make drawing smooth,
     147      //Should be matched to interval time below
     148      @ChartHelper.SetSmoothieCanvas("CurrentCPUUtilization","5000")
     149      @ChartHelper.SetSmoothieCanvas("CurrentTotalUsedCores","5000")
     150      @ChartHelper.SetSmoothieCanvas("CurrentTotalUsedMemory","5000")
     151
     152      //Set interval to run ajax and get new values
     153      @ChartHelper.AssignTimeSeries("averageUsage", "CurrentCPUUtilization", "rgb(0, 255, 0)", "rgba(0, 255, 0, 0.4)")
     154      @ChartHelper.AssignTimeSeries("overallCore", "CurrentTotalUsedCores", "rgb(0, 255, 0)", "rgba(0, 255, 0, 0.4)")
     155      @ChartHelper.AssignTimeSeries("usedCore", "CurrentTotalUsedCores", "rgb(242, 182, 70)", "rgba(255, 199, 94, 0.4)")
     156      @ChartHelper.AssignTimeSeries("overallMemory", "CurrentTotalUsedMemory", "rgb(0, 255, 0)", "rgba(0, 255, 0, 0.4)")
     157      @ChartHelper.AssignTimeSeries("usedMemory", "CurrentTotalUsedMemory", "rgb(242, 182, 70)", "rgba(255, 199, 94, 0.4)")
     158
     159      setInterval(function () { getChartUpdate() }, 5000);
     160
     161      //Hit by interval, jQuery ajax request to get new data from db
     162      function getChartUpdate() {
     163        @ChartHelper.UpdateChartData("CurrentCPUUtilization", Url.Action("CurrentCpuUtilization","ChartData"))
     164        @ChartHelper.UpdateChartData("CurrentTotalUsedCores", Url.Action("CurrentCores","ChartData"))
     165        @ChartHelper.UpdateChartData("CurrentTotalUsedMemory", Url.Action("CurrentMemory","ChartData"))
     166      }
     167    }*@
     168
     169    $(document).ready(function () {
     170      @ChartHelper.SetStreamingProperties(1000,20,10)
     171
     172      @ChartHelper.CreateStreamChart("CurrentCPU", "CurrentCPUUtilization",Url.Action("CurrentCpuUtilization","ChartData"),"Current CPU Utilization","%.2f%%",100.00)
     173      @ChartHelper.CreateStreamChart("CurrentCores", "CurrentTotalUsedCores",Url.Action("CurrentCores","ChartData"),"Current Total vs. Used Cores")
     174      @ChartHelper.CreateStreamChart("CurrentMemory", "CurrentTotalUsedMemory",Url.Action("CurrentMemory","ChartData"),"Current Total vs. Used Memory")
     175
     176      function doUpdate() {
     177        @ChartHelper.UpdateStreamChart("CurrentCPU","CurrentCPUUtilization", Url.Action("CurrentCpuUtilization","ChartData"),"FixedY")
     178        @ChartHelper.UpdateStreamChart("CurrentCores","CurrentTotalUsedCores", Url.Action("CurrentCores","ChartData"))
     179        @ChartHelper.UpdateStreamChart("CurrentMemory","CurrentTotalUsedMemory", Url.Action("CurrentMemory","ChartData"))
     180        setTimeout(doUpdate, refreshRate);
     181      }
     182
     183      doUpdate();
     184
     185    });
     186  </script>
    119187}
Note: See TracChangeset for help on using the changeset viewer.