Changeset 11020 for branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Views/Home
- Timestamp:
- 06/16/14 10:37:22 (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Views/Home/Index.cshtml
r9662 r11020 2 2 3 3 @{ 4 4 ViewBag.Title = "Status Monitor"; 5 5 } 6 6 7 7 <h1>Current Status</h1> 8 8 9 @* 10 Original code 9 11 <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> 36 58 </section> 37 59 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> 57 74 </section> 58 75 59 76 @section Styles { 60 61 77 @Styles.Render("~/Styles/jqPlot/jquery.jqplot") 78 @Styles.Render("~/Content/themes/base/css") 62 79 } 63 80 64 81 @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 } 71 91 }); 72 92 </script> 73 93 74 75 94 @Scripts.Render("~/Scripts/jqPlot/jquery.jqplot") 95 @ChartHelper.AjaxDataRenderer() 76 96 77 97 @ChartHelper.LineChartTime( 78 98 "AverageCpuUtilization", 79 99 Url.Action("AverageCpuUtilization", "ChartData"), … … 82 102 minY: 0, maxY: 100) 83 103 84 104 @ChartHelper.LineChartTime( 85 105 "UsedCores", 86 106 Url.Action("UsedCores", "ChartData"), … … 88 108 minY: 0) 89 109 90 110 @ChartHelper.LineChartTime( 91 111 "UsedMemory", 92 112 Url.Action("UsedMemory", "ChartData"), … … 94 114 minY: 0) 95 115 96 97 98 99 100 101 116 <script> 117 $(document).ready(function () { 118 $(".date").datepicker({ 119 dateFormat: "yy-mm-dd", 120 onSelect: function () { refreshCharts(); } 121 }); 102 122 103 $("#refresh").click(function() {104 105 123 $("#Refresh").click(function () { 124 refreshCharts(); 125 }); 106 126 107 108 }); 109 110 function refreshCharts() { 111 var startDate = $('#Start').val(); 112 var endDate = $('#End').val(); 127 //resizeSmoothie(); 128 //createSmoothie(); 129 }); 113 130 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> 119 187 }
Note: See TracChangeset
for help on using the changeset viewer.