Monitor: Usability improvements
This commit is contained in:
Tyron Madlener
parent
23a248b980
commit
b0e977c835
@ -43,21 +43,29 @@ $(function() {
|
||||
|
||||
|
||||
// Popup behaviour
|
||||
$('div.popupMenu a[href="#popupLink"]').click( function() {
|
||||
$(this).parent().find('.popupContent').show();
|
||||
$('a[rel="popupLink"]').click( function() {
|
||||
var $link = $(this);
|
||||
|
||||
$('.' + $link.attr('href').substr(1))
|
||||
.show()
|
||||
.offset({ top: $link.offset().top + $link.height() + 5, left: $link.offset().left })
|
||||
.addClass('openedPopup');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).click( function(event) {
|
||||
var $cnt = $('div.popupMenu .popupContent');
|
||||
var pos = $cnt.offset();
|
||||
|
||||
// Hide if the mouseclick is outside the popupcontent
|
||||
if(event.pageX < pos.left || event.pageY < pos.top || event.pageX > pos.left + $cnt.outerWidth() || event.pageY > pos.top + $cnt.outerHeight())
|
||||
$cnt.hide();
|
||||
$('.openedPopup').each(function() {
|
||||
var $cnt = $(this);
|
||||
var pos = $(this).offset();
|
||||
|
||||
// Hide if the mouseclick is outside the popupcontent
|
||||
if(event.pageX < pos.left || event.pageY < pos.top || event.pageX > pos.left + $cnt.outerWidth() || event.pageY > pos.top + $cnt.outerHeight())
|
||||
$cnt.hide();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
// Filters for status variables
|
||||
var textFilter=null;
|
||||
@ -532,6 +540,9 @@ $(function() {
|
||||
|
||||
var xmin=-1, xmax=-1;
|
||||
|
||||
// Allows drag and drop rearrange and print/edit icons on charts
|
||||
var editMode = false;
|
||||
|
||||
var presetCharts = {
|
||||
'cpu-WINNT': {
|
||||
title: 'System CPU Usage',
|
||||
@ -657,19 +668,41 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
$('div#statustabs_charting div.popupContent input[name="newChartWidth"]').attr('value',chartSize.width);
|
||||
$('div#statustabs_charting div.popupContent input[name="newChartHeight"]').attr('value',chartSize.height);
|
||||
|
||||
$('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').click(function() {
|
||||
editMode = !editMode;
|
||||
if($(this).attr('href') == '#endChartEditMode') editMode = false;
|
||||
|
||||
// Icon graphics have zIndex 19,20 and 21. Let's just hope nothing else has the same zIndex
|
||||
$('ul#chartGrid li svg *[zIndex=20], li svg *[zIndex=21], li svg *[zIndex=19]').toggle(editMode)
|
||||
|
||||
$('a[href="#endChartEditMode"]').toggle(editMode);
|
||||
|
||||
if(editMode) {
|
||||
$( "#chartGrid" ).sortable();
|
||||
$( "#chartGrid" ).disableSelection();
|
||||
} else {
|
||||
$( "#chartGrid" ).sortable('destroy');
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// global settings
|
||||
$('div#statustabs_charting div.popupMenu input[name="setSize"]').click(function() {
|
||||
$('div#statustabs_charting div.popupContent input[name="newChartWidth"], div#statustabs_charting div.popupContent input[name="newChartHeight"]').change(function() {
|
||||
chartSize = {
|
||||
width: parseInt($('div#statustabs_charting div.popupMenu input[name="width"]').attr('value')) || chartSize.width,
|
||||
height: parseInt($('div#statustabs_charting div.popupMenu input[name="height"]').attr('value')) || chartSize.height
|
||||
width: parseInt($('div#statustabs_charting div.popupContent input[name="newChartWidth"]').attr('value')) || chartSize.width,
|
||||
height: parseInt($('div#statustabs_charting div.popupContent input[name="newChartHeight"]').attr('value')) || chartSize.height
|
||||
};
|
||||
|
||||
$.each(chartGrid, function(key, value) {
|
||||
value.chart.setSize(chartSize.width, chartSize.height);
|
||||
value.chart.setSize(chartSize.width, chartSize.height, false);
|
||||
});
|
||||
});
|
||||
|
||||
$('div#statustabs_charting div.popupMenu select[name="gridChartRefresh"]').change(function() {
|
||||
$('div#statustabs_charting div.popupContent select[name="gridChartRefresh"]').change(function() {
|
||||
gridRefresh = parseInt(this.value) * 1000;
|
||||
clearTimeout(refreshTimeout);
|
||||
|
||||
@ -732,7 +765,7 @@ $(function() {
|
||||
$(this).html('<img src="' + pma_theme_image + 'pause.png" alt="Pause"/> Pause Monitor');
|
||||
if(chartGrid == null) {
|
||||
initGrid();
|
||||
$('a[href="#popupLink"]').show();
|
||||
$('a[href="#settingsPopup"]').show();
|
||||
}
|
||||
}
|
||||
return false;
|
||||
@ -920,9 +953,6 @@ $(function() {
|
||||
|
||||
buildRequiredDataList();
|
||||
refreshChartGrid();
|
||||
|
||||
//$( "#chartGrid" ).sortable();
|
||||
//$( "#chartGrid" ).disableSelection();
|
||||
}
|
||||
|
||||
function addChart(chartObj, initialize) {
|
||||
@ -940,10 +970,12 @@ $(function() {
|
||||
renderTo: 'gridchart' + chartAI,
|
||||
width: chartSize.width,
|
||||
height: chartSize.height,
|
||||
marginRight: 0,
|
||||
marginRight: 5,
|
||||
zoomType: 'x',
|
||||
events: {
|
||||
selection: function(event) {
|
||||
if(editMode) return false;
|
||||
|
||||
var extremesObject = event.xAxis[0],
|
||||
min = extremesObject.min,
|
||||
max = extremesObject.max;
|
||||
@ -1024,6 +1056,9 @@ $(function() {
|
||||
buildRequiredDataList();
|
||||
}
|
||||
|
||||
// Edit,Print icon only in edit mode
|
||||
$('ul#chartGrid li svg *[zIndex=20], li svg *[zIndex=21], li svg *[zIndex=19]').toggle(editMode)
|
||||
|
||||
chartAI++;
|
||||
}
|
||||
|
||||
@ -1119,10 +1154,10 @@ $(function() {
|
||||
function loadLogStatistics(opts) {
|
||||
var tableStr = '';
|
||||
var logRequest = null;
|
||||
var groupInsert = false;
|
||||
|
||||
if(opts.groupInserts)
|
||||
groupInserts = true;
|
||||
var groupInsert = false;
|
||||
|
||||
if(opts.groupInserts)
|
||||
groupInserts = true;
|
||||
|
||||
$('#loadingLogsDialog').html('Analysing & loading logs. This may take a while. <img class="ajaxIcon" src="' + pma_theme_image + 'ajax_clock_small.gif" alt="">');
|
||||
|
||||
@ -1164,7 +1199,7 @@ $(function() {
|
||||
$.each(rows[0],function(key, value) {
|
||||
cols.push(key);
|
||||
});
|
||||
tableStr += '<tr><th>' + cols.join('</th><th>') + '</th></tr>';
|
||||
tableStr += '<tr><th class="nowrap">' + cols.join('</th><th class="nowrap">') + '</th></tr>';
|
||||
tableStr += '</thead><tbody>';
|
||||
}
|
||||
|
||||
@ -1178,6 +1213,26 @@ $(function() {
|
||||
|
||||
$('#logTable').html(tableStr);
|
||||
|
||||
// Append a tooltip to the count column, if there exist one
|
||||
if($('#logTable th:last').html() == '#') {
|
||||
$('#logTable th:last').append(' <img class="qroupedQueryInfoIcon" src="' + pma_theme_image + 'b_docs.png" alt="" />');
|
||||
|
||||
var qtipContent = 'This columns shows the amount of identical queries that are grouped together. However only the SQL Text is being compared, thus the queries other attributes such as start time may differ.';
|
||||
if(groupInserts) qtipContent += '<p>Since grouping of INSERTs queries has been selected, INSERT queries into the same table are also being grouped together, disregarding of the inserted data.</p>';
|
||||
|
||||
$('img.qroupedQueryInfoIcon').qtip({
|
||||
content: qtipContent,
|
||||
position: {
|
||||
corner: {
|
||||
target: 'bottomMiddle',
|
||||
tooltip: 'topRight'
|
||||
}
|
||||
|
||||
},
|
||||
hide: { delay: 1000 }
|
||||
})
|
||||
}
|
||||
|
||||
$('div#logTable table').tablesorter({
|
||||
sortList: [[0,1]],
|
||||
widgets: ['zebra']
|
||||
|
||||
@ -205,7 +205,6 @@ if (isset($_REQUEST['ajax_request']) && $_REQUEST['ajax_request'] == true) {
|
||||
$insertTables = array();
|
||||
$insertTablesFirst = -1;
|
||||
$i = 0;
|
||||
$moo = array();
|
||||
|
||||
while ($row = PMA_DBI_fetch_assoc($result)) {
|
||||
preg_match('/^(\w+)\s/',$row['argument'],$match);
|
||||
@ -634,7 +633,7 @@ echo __('Runtime Information');
|
||||
</div>
|
||||
</fieldset>
|
||||
<div id="linkSuggestions" class="defaultLinks" style="display:none">
|
||||
<p><?php echo __('Related links:'); ?>
|
||||
<p class="notice"><?php echo __('Related links:'); ?>
|
||||
<?php
|
||||
foreach ($links as $section_name => $section_links) {
|
||||
echo '<span class="status_'.$section_name.'"> ';
|
||||
@ -790,7 +789,7 @@ function printServerTraffic() {
|
||||
?>
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<p class="notice">
|
||||
<?php
|
||||
echo sprintf(__('This MySQL server has been running for %1$s. It started up on %2$s.'),
|
||||
PMA_timespanFormat($server_status['Uptime']),
|
||||
@ -800,7 +799,7 @@ function printServerTraffic() {
|
||||
|
||||
<?php
|
||||
if ($server_master_status || $server_slave_status) {
|
||||
echo '<p>';
|
||||
echo '<p class="notice">';
|
||||
if ($server_master_status && $server_slave_status) {
|
||||
echo __('This MySQL server works as <b>master</b> and <b>slave</b> in <b>replication</b> process.');
|
||||
} elseif ($server_master_status) {
|
||||
@ -1257,20 +1256,20 @@ function printVariablesTable() {
|
||||
function printMonitor() {
|
||||
global $server_status;
|
||||
?>
|
||||
<div class="popupMenu">
|
||||
<div class="monitorLinks">
|
||||
<a href="#pauseCharts"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>play.png" alt="Start"/> Start Monitor</a>
|
||||
<a href="#popupLink" style="display:none;"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>s_cog.png" alt="Settings"/> Settings</a>
|
||||
<a href="#settingsPopup" rel="popupLink" style="display:none;"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>s_cog.png" alt="Settings"/> Settings</a>
|
||||
<a href="#monitorInstructionsDialog"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>b_help.png" alt="Instructions"/> Instructions/Setup</a>
|
||||
<ul class="popupContent">
|
||||
<li><a href="#addNewChart"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>b_chart.png" alt="Add chart"/> Add chart</a><br></li>
|
||||
<li>
|
||||
Refresh rate: <?php refreshList('gridChartRefresh'); ?><br>
|
||||
</li>
|
||||
<li> Chart size: <br>
|
||||
<input type="text" name="width" size="3" value="300"> x <input type="text" size="3" name="height" value="300">
|
||||
<input type="submit" name="setSize" value="Set">
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#endChartEditMode" style="display:none;"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>s_okay.png" alt="End editing"/> Done rearranging/editing charts</a>
|
||||
</div>
|
||||
|
||||
<div class="popupContent settingsPopup">
|
||||
<a href="#addNewChart"><img src="<?php echo $GLOBALS['pmaThemeImage'];?>b_chart.png" alt="Add chart"/> Add chart</a> | <a href="#rearrangeCharts"> Rearrange/edit charts</a><br>
|
||||
<p>
|
||||
Refresh rate: <?php refreshList('gridChartRefresh'); ?><br>
|
||||
</p>
|
||||
<p> Chart size: <input type="text" name="newChartWidth" size="3" /> x <input type="text" size="3" name="newChartHeight" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="monitorInstructionsDialog" title="Monitor Instructions" style="display:none;">
|
||||
|
||||
@ -1265,18 +1265,13 @@ ul#chartGrid li {
|
||||
background: #EBEBEB;
|
||||
}
|
||||
|
||||
div#statustabs_charting div.popupMenu {
|
||||
div#statustabs_charting div.monitorLinks {
|
||||
float:<?php echo $left; ?>;
|
||||
}
|
||||
|
||||
.popupMenu {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.popupContent {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
border: 1px solid #CCC;
|
||||
margin:0;
|
||||
padding:3px;
|
||||
@ -1287,13 +1282,6 @@ div#statustabs_charting div.popupMenu {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.popupContent li {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
margin:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
div#logTable {
|
||||
padding-top: 10px;
|
||||
clear: both;
|
||||
@ -1338,6 +1326,37 @@ table#serverVariables td {
|
||||
|
||||
/* end server variables */
|
||||
|
||||
|
||||
p.notice {
|
||||
margin: 1.5em 0px;
|
||||
border: 1px solid #000;
|
||||
<?php if ($GLOBALS['cfg']['ErrorIconic']) { ?>
|
||||
background-repeat: no-repeat;
|
||||
<?php if ($GLOBALS['text_dir'] === 'ltr') { ?>
|
||||
background-position: 10px 50%;
|
||||
padding: 10px 10px 10px 25px;
|
||||
<?php } else { ?>
|
||||
background-position: 99% 50%;
|
||||
padding: 25px 10px 10px 10px
|
||||
<?php } ?>
|
||||
<?php } else { ?>
|
||||
padding: 0.3em;
|
||||
<?php } ?>
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
border-radius:5px;
|
||||
-moz-box-shadow: 0px 1px 2px #fff inset;
|
||||
-webkit-box-shadow: 0px 1px 2px #fff inset;
|
||||
box-shadow:0px 1px 2px #fff; inset;
|
||||
background:#555;
|
||||
color:#d4fb6a;
|
||||
}
|
||||
|
||||
p.notice a {
|
||||
color:#fff;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
/* querywindow */
|
||||
body#bodyquerywindow {
|
||||
margin: 0;
|
||||
@ -1382,32 +1401,6 @@ div#profilingchart {
|
||||
|
||||
#togglequerybox{margin:0 10px}
|
||||
|
||||
#serverstatus p {
|
||||
|
||||
margin: 1.5em 0px;
|
||||
border: 1px solid #000;
|
||||
<?php if ($GLOBALS['cfg']['ErrorIconic']) { ?>
|
||||
background-repeat: no-repeat;
|
||||
<?php if ($GLOBALS['text_dir'] === 'ltr') { ?>
|
||||
background-position: 10px 50%;
|
||||
padding: 10px 10px 10px 25px;
|
||||
<?php } else { ?>
|
||||
background-position: 99% 50%;
|
||||
padding: 25px 10px 10px 10px
|
||||
<?php } ?>
|
||||
<?php } else { ?>
|
||||
padding: 0.3em;
|
||||
<?php } ?>
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
border-radius:5px;
|
||||
-moz-box-shadow: 0px 1px 2px #fff inset;
|
||||
-webkit-box-shadow: 0px 1px 2px #fff inset;
|
||||
box-shadow:0px 1px 2px #fff; inset;
|
||||
background:#555;
|
||||
color:#d4fb6a;
|
||||
}
|
||||
#serverstatus p a{color:#fff;text-decoration:underline;}
|
||||
#serverstatus h3
|
||||
{
|
||||
margin: 15px 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
