mirror of https://gitee.com/bigwinds/arangodb
stat windows now complete draggable resizable
This commit is contained in:
Heiko Kernbach
parent
649657d2c4
commit
e2afd5d42e
|
|
@ -1,3 +1,7 @@
|
|||
#requestChoices label {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.statDisabled {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
|
@ -45,14 +49,14 @@
|
|||
text-transform: none;
|
||||
}
|
||||
|
||||
.resizable {
|
||||
.resizable, .draggable {
|
||||
position:fixed !important;
|
||||
box-shadow: 5px 5px 5px #888;
|
||||
}
|
||||
|
||||
.placeholderBox {
|
||||
margin-top: 10px;
|
||||
font-size: 0.8em;
|
||||
width: 98%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
|
|
@ -96,8 +100,7 @@
|
|||
text-align: left;
|
||||
width: 500px;
|
||||
background-color: #F3F1EE;
|
||||
|
||||
|
||||
border: solid 1px #525252;
|
||||
}
|
||||
|
||||
.statsBoxes {
|
||||
|
|
@ -113,7 +116,7 @@
|
|||
padding-top: 2px;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
height: 20px;
|
||||
height: 22px;
|
||||
background-color: #525252;
|
||||
}
|
||||
|
||||
|
|
@ -131,16 +134,17 @@
|
|||
box-shadow: inset 0 0 1px 1px #f6f6f6;
|
||||
}
|
||||
|
||||
#statisticRadioDiv {
|
||||
height:28px !important;
|
||||
.radioFormat {
|
||||
height:26px !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#statisticRadioDiv .ui-state-active {
|
||||
.radioFormat .ui-state-active {
|
||||
background-color: #9EAF5A !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#statisticRadioDiv .ui-state-default {
|
||||
.radioFormat .ui-state-default {
|
||||
color: #555555;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -401,18 +401,9 @@
|
|||
|
||||
<div id="statusView" style="display: none">
|
||||
|
||||
<div id="statisticRadioDiv">
|
||||
<form action="#" id="statsRadio" style="float: left; font-size:0.8em;">
|
||||
<input type="radio" id="radio1" name="statsRadio" value="minutes" checked/>
|
||||
<label for="radio1" class="cb-enable selected">Minutes</label>
|
||||
<input type="radio" id="radio2" name="statsRadio" value="hours"/>
|
||||
<label for="radio2" class="cb-disable">Hours</label>
|
||||
<input type="radio" id="radio3" name="statsRadio" value="days"/>
|
||||
<label for="radio3" class="cb-disable">Days</label>
|
||||
</form>
|
||||
|
||||
<div id="statisticRadioDiv" class="radioFormat">
|
||||
<div class="ItemActionButtons">
|
||||
<div id="divSaveButton" class="buttonset" style="float: left; font-size:0.6em; margin-left: 10px; ">
|
||||
<div id="divSaveButton" class="buttonset" style="float: left; font-size:0.6em; ">
|
||||
<input id="btnAddNewStat" class="button" value="Add..." onclick="ItemActionButtons.onSaveExtraClick.apply(this)" type="button"></input>
|
||||
<ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions">
|
||||
<li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.ShowConnectionsStats.apply(this)"id="addconnectionsLiBtn">Connections</li>
|
||||
|
|
@ -424,24 +415,75 @@
|
|||
</div>
|
||||
|
||||
<ul id="sortable">
|
||||
|
||||
<li id="connectionsLi" class="resizable">
|
||||
<li id="connectionsLi" class="resizable draggable">
|
||||
<div id="connectionsDiv" class="statsBoxes">
|
||||
<div class="greydiv">
|
||||
<a class="statsHeader">Connections</a>
|
||||
<a class="statsClose">X</a>
|
||||
|
||||
<button id="connectionsClose" class="statsClose" style="float:right; padding-right: 0 ">
|
||||
<img src="/_admin/html/media/icons/whitedelete_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
<button id="connectionsSettings" class="statsSettings" style="float:right;">
|
||||
<img src="/_admin/html/media/icons/settings_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
<button id="connectionsChart" class="statsCharts" style="float:right;">
|
||||
<img src="/_admin/html/media/icons/whitechart_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
</div>
|
||||
<div id="placeholderConnection" class="placeholderBox"></div>
|
||||
<div id="placeholderConnectionSettings" class="placeholderBox" style="display:none;">
|
||||
|
||||
<div id="connectionsGranularityDiv" class="radioFormat" style="width:100%;">
|
||||
<form action="#" id="connectionsGranularity" class="radioFormat" style="float: left; font-size:0.8em;">
|
||||
<input type="radio" id="connectionsMinutes" name="connectionsGranularity" value="minutes" checked/>
|
||||
<label for="connectionsMinutes" class="cb-enable selected">Minutes</label>
|
||||
<input type="radio" id="connectionsHours" name="connectionsGranularity" value="hours"/>
|
||||
<label for="connectionsHours" class="cb-disable">Hours</label>
|
||||
<input type="radio" id="connectionsDays" name="connectionsGranularity" value="days"/>
|
||||
<label for="connectionsDays" class="cb-disable">Days</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li id="requestsLi" class="resizable">
|
||||
<li id="requestsLi" class="resizable draggable" style="left:540">
|
||||
<div id="requestsDiv" class="statsBoxes">
|
||||
<div class="greydiv">
|
||||
<a class="statsHeader">Requests</a>
|
||||
<a class="statsClose">X</a>
|
||||
<button id="requestsClose" class="statsClose" style="float:right; padding-right: 0; ">
|
||||
<img src="/_admin/html/media/icons/whitedelete_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
<button id="requestsSettings" class="statsSettings" style="float:right;">
|
||||
<img src="/_admin/html/media/icons/settings_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
<button id="requestsChart" class="statsCharts" style="float:right;">
|
||||
<img src="/_admin/html/media/icons/whitechart_icon16.png" width="16" height="16">
|
||||
</button>
|
||||
</div>
|
||||
<div id="placeholderBytesSent" class="placeholderBox"></div>
|
||||
<div id="placeholderBytesSentSettings" class="placeholderBox" style="display:none;">
|
||||
<div id="requestsGranularityDiv" class="radioFormat">
|
||||
<form action="#" id="requestsGranularity" class="radioFormat" style="float: left; font-size:0.8em;">
|
||||
<input type="radio" id="requestsMinutes" name="requestsGranularity" value="minutes" checked/>
|
||||
<label for="requestsMinutes" class="cb-enable selected">Minutes</label>
|
||||
<input type="radio" id="requestsHours" name="requestsGranularity" value="hours"/>
|
||||
<label for="requestsHours" class="cb-disable">Hours</label>
|
||||
<input type="radio" id="requestsDays" name="requestsGranularity" value="days"/>
|
||||
<label for="requestsDays" class="cb-disable">Days</label>
|
||||
</form>
|
||||
<br>
|
||||
<p id="requestChoices" >
|
||||
<br>
|
||||
<input id="idsent" type="checkbox" checked="checked" name="bytessent">
|
||||
<label for="idsent">Bytes sent</label>
|
||||
<br>
|
||||
<input id="idreceived" type="checkbox" checked="checked" name="bytesreceived">
|
||||
<label for="idreceived">Bytes received</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -92,10 +92,36 @@ $("#documents_last").live('click', function () {
|
|||
createLastPagination("#documentsTable");
|
||||
});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
//statistics live click buttons close
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$(".statsClose").live('click', function () {
|
||||
var id = $(this).closest("li").attr("id");
|
||||
$("#"+id).hide();
|
||||
$("#"+id).fadeOut();
|
||||
});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// show statistic settings
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$(".statsSettings").live('click', function () {
|
||||
var chartID = $(this).parent().next("div");
|
||||
var settingsID = $(this).parent().next("div").next("div");
|
||||
$(chartID).hide();
|
||||
$(settingsID).fadeIn();
|
||||
});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// show statistics charts
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$(".statsCharts").live('click', function () {
|
||||
var chartID = $(this).parent().next("div");
|
||||
var settingsID = $(this).parent().next("div").next("div");
|
||||
updateGraphs(false);
|
||||
$(settingsID).hide();
|
||||
$(chartID).fadeIn();
|
||||
});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -579,17 +605,49 @@ var logTable = $('#logTableID').dataTable({
|
|||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
else if (location.hash == "#status") {
|
||||
var connectionsPos = localStorage.getItem("#connectionsLi");
|
||||
var requestsPos = localStorage.getItem("#requestsLi");
|
||||
var parsedConPos = JSON.parse(connectionsPos);
|
||||
var parsedReqPos = JSON.parse(requestsPos);
|
||||
if ( parsedConPos != null && parsedReqPos != null ) {
|
||||
$('#connectionsLi').css('top', parsedConPos[0]);
|
||||
$('#connectionsLi').css('left', parsedConPos[1]);
|
||||
$('#connectionsLi').css('width', parsedConPos[2]);
|
||||
$('#requestsLi').css('top', parsedReqPos[0]);
|
||||
$('#requestsLi').css('left', parsedReqPos[1]);
|
||||
$('#requestsLi').css('width', parsedReqPos[2]);
|
||||
}
|
||||
|
||||
hideAllSubDivs();
|
||||
$('#collectionsView').hide();
|
||||
$('#statusView').show();
|
||||
createnav ("Statistics");
|
||||
$( "#sortable" ).sortable();
|
||||
$( "#sortable" ).disableSelection();
|
||||
$( ".resizable" ).resizable({handles: 'e'});
|
||||
$( ".resizable" ).resizable({
|
||||
handles: 'e, w',
|
||||
stop: function (event, ui) {
|
||||
var connectionspos = $("#connectionsLi").position();
|
||||
var conwidth = $("#connectionsLi").width();
|
||||
var requestspos = $("#requestsLi").position();
|
||||
var reqwidth = $("#requestsLi").width();
|
||||
localStorage.setItem("#connectionsLi", JSON.stringify([connectionspos.top, connectionspos.left, conwidth]));
|
||||
localStorage.setItem("#requestsLi", JSON.stringify([requestspos.top, requestspos.left, reqwidth]));
|
||||
}
|
||||
});
|
||||
$( ".draggable" ).draggable({
|
||||
containment: "#centerView",
|
||||
stop: function (event, ui) {
|
||||
var connectionspos = $("#connectionsLi").position();
|
||||
var conwidth = $("#connectionsLi").width();
|
||||
var requestspos = $("#requestsLi").position();
|
||||
var reqwidth = $("#requestsLi").width();
|
||||
localStorage.setItem("#connectionsLi", JSON.stringify([connectionspos.top, connectionspos.left, conwidth]));
|
||||
localStorage.setItem("#requestsLi", JSON.stringify([requestspos.top, requestspos.left, reqwidth]));
|
||||
}
|
||||
});
|
||||
//TODO
|
||||
$( "#statisticRadioDiv" ).buttonset();
|
||||
var name = $('input[name=statsRadio]:checked', '#statsRadio').val();
|
||||
drawStatistics(name);
|
||||
$( "#connectionsGranularityDiv" ).buttonset();
|
||||
$( "#requestsGranularityDiv" ).buttonset();
|
||||
updateGraphs();
|
||||
}
|
||||
|
||||
|
|
@ -2450,26 +2508,34 @@ function validate(evt) {
|
|||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
/// live click statistic radio buttons
|
||||
/// live click connections radio buttons
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$('#radio1').live('click', function () {
|
||||
drawStatistics("minutes");
|
||||
$('#connectionsMinutes').live('click', function () {
|
||||
drawConnections("minutes");
|
||||
});
|
||||
|
||||
$('#radio2').live('click', function () {
|
||||
drawStatistics("hours");
|
||||
$('#connectionsHours').live('click', function () {
|
||||
drawConnections("hours");
|
||||
});
|
||||
|
||||
$('#radio3').live('click', function () {
|
||||
drawStatistics("days");
|
||||
$('#connectionsDays').live('click', function () {
|
||||
drawConnections("days");
|
||||
});
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
/// live click requests radio buttons
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
$('#requestsMinutes').live('click', function () {
|
||||
drawRequests("minutes");
|
||||
});
|
||||
$('#requestsHours').live('click', function () {
|
||||
drawRequests("hours");
|
||||
});
|
||||
$('#requestsDays').live('click', function () {
|
||||
drawRequests("days");
|
||||
});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
/// draw hours statistics
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
function drawStatistics (granularity) {
|
||||
function drawConnections (granularity) {
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
/// draw connections (granularity)
|
||||
|
|
@ -2568,11 +2634,13 @@ function drawStatistics (granularity) {
|
|||
error: function(data) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
/// draw requests (granularity)
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
function drawRequests (granularity) {
|
||||
var arraySent = [];
|
||||
var arrayReceived = [];
|
||||
$.ajax({
|
||||
|
|
@ -2619,8 +2687,21 @@ function drawStatistics (granularity) {
|
|||
}
|
||||
};
|
||||
|
||||
$.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}, {label: "Bytes received", data: arrayReceived}], options);
|
||||
var sent = $('input:checkbox[name=bytessent]:checked').val();
|
||||
var received = $('input:checkbox[name=bytesreceived]:checked').val();
|
||||
|
||||
if ( sent == "on" && received == "on" ) {
|
||||
$.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}, {label: "Bytes received", data: arrayReceived}], options);
|
||||
}
|
||||
else if ( sent == "on" && received == undefined ) {
|
||||
$.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}], options);
|
||||
}
|
||||
else if ( sent == undefined && received == "on" ) {
|
||||
$.plot($("#placeholderBytesSent"), [{ label: "Bytes received", data: arrayReceived}], options);
|
||||
}
|
||||
else if ( sent == undefined && received == undefined ) {
|
||||
$.plot($("#placeholderBytesSent"), [], options);
|
||||
}
|
||||
|
||||
$("#placeholderBytesSent").qtip({
|
||||
prerender: true,
|
||||
|
|
@ -2676,14 +2757,18 @@ function drawStatistics (granularity) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateGraphs() {
|
||||
var name = $('input[name=statsRadio]:checked', '#statsRadio').val();
|
||||
drawStatistics(name);
|
||||
setTimeout(updateGraphs, 60000);
|
||||
function updateGraphs(timeout) {
|
||||
var connections = $('input[name=connectionsGranularity]:checked', '#connectionsGranularity').val();
|
||||
var requests = $('input[name=requestsGranularity]:checked', '#requestsGranularity').val();
|
||||
drawConnections(connections);
|
||||
drawRequests(requests);
|
||||
if (timeout == true) {
|
||||
setTimeout(updateGraphs, 60000);
|
||||
}
|
||||
else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$(document).delegate('#btnAddNewStat', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) });
|
||||
$(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; });
|
||||
$(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; });
|
||||
|
|
@ -2735,10 +2820,10 @@ var ItemActionButtons = {
|
|||
$('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop);
|
||||
},
|
||||
ShowConnectionsStats: function () {
|
||||
$("#connectionsLi").show();
|
||||
$("#connectionsLi").fadeIn();
|
||||
},
|
||||
ShowRequestsStats: function () {
|
||||
$("#requestsLi").show();
|
||||
$("#requestsLi").fadeIn();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
Loading…
Reference in New Issue