Free cookie consent management tool by TermsFeed Policy Generator

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

Last change on this file since 11020 was 11020, checked in by mroscoe, 8 years ago

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

File size: 7.2 KB
Line 
1@model HeuristicLab.Services.Hive.Statistics.Models.OverallStatus
2
3@{
4  ViewBag.Title = "Status Monitor";
5}
6
7<h1>Current Status</h1>
8
9@*
10Original code
11<section>
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>
58</section>
59
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>
74</section>
75
76@section Styles {
77  @Styles.Render("~/Styles/jqPlot/jquery.jqplot")
78  @Styles.Render("~/Content/themes/base/css")
79}
80
81@section Scripts {
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      }
91    });
92  </script>
93
94  @Scripts.Render("~/Scripts/jqPlot/jquery.jqplot")
95  @ChartHelper.AjaxDataRenderer()
96
97  @ChartHelper.LineChartTime(
98        "AverageCpuUtilization",
99        Url.Action("AverageCpuUtilization", "ChartData"),
100        title: "Avg. CPU Utilization History of all Slaves",
101        axisYFormat: "%.2f%%",
102        minY: 0, maxY: 100)
103
104  @ChartHelper.LineChartTime(
105        "UsedCores",
106        Url.Action("UsedCores", "ChartData"),
107        title: "Cores / Used Cores",
108        minY: 0)
109
110  @ChartHelper.LineChartTime(
111        "UsedMemory",
112        Url.Action("UsedMemory", "ChartData"),
113        title: "Memory / Used Memory (GB)",
114        minY: 0)
115
116  <script>
117    $(document).ready(function () {
118      $(".date").datepicker({
119        dateFormat: "yy-mm-dd",
120        onSelect: function () { refreshCharts(); }
121      });
122
123      $("#Refresh").click(function () {
124        refreshCharts();
125      });
126
127      //resizeSmoothie();
128      //createSmoothie();
129    });
130
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>
187}
Note: See TracBrowser for help on using the repository browser.