Replace system monitor tab links with buttons
Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth
parent
7196073b00
commit
ddbc1afd28
@ -99,7 +99,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
*/
|
||||
AJAX.registerTeardown('server/status/monitor.js', function () {
|
||||
$('#emptyDialog').remove();
|
||||
$('a.popupLink').off('click');
|
||||
$('#monitorSettingsButton').off('click');
|
||||
$('body').off('click');
|
||||
});
|
||||
|
||||
@ -111,14 +111,12 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
.attr('id', 'emptyDialog')
|
||||
.appendTo('#page_content');
|
||||
|
||||
$('a.popupLink').on('click', function () {
|
||||
$('#monitorSettingsButton').on('click', function () {
|
||||
var $link = $(this);
|
||||
$('div.' + $link.attr('href').substring(1))
|
||||
$('div.settingsPopup')
|
||||
.show()
|
||||
.offset({ top: $link.offset().top + $link.height() + 5, left: $link.offset().left })
|
||||
.addClass('openedPopup');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('body').on('click', function (event) {
|
||||
@ -136,15 +134,16 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
});
|
||||
|
||||
AJAX.registerTeardown('server/status/monitor.js', function () {
|
||||
$('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').off('click');
|
||||
$('a[href="#rearrangeCharts"]').off('click');
|
||||
$('#monitorRearrangeChartButton').off('click');
|
||||
$('div.popupContent select[name="chartColumns"]').off('change');
|
||||
$('div.popupContent select[name="gridChartRefresh"]').off('change');
|
||||
$('a[href="#addNewChart"]').off('click');
|
||||
$('a[href="#exportMonitorConfig"]').off('click');
|
||||
$('a[href="#importMonitorConfig"]').off('click');
|
||||
$('a[href="#clearMonitorConfig"]').off('click');
|
||||
$('a[href="#pauseCharts"]').off('click');
|
||||
$('a[href="#monitorInstructionsDialog"]').off('click');
|
||||
$('#monitorPauseResumeButton').off('click');
|
||||
$('#monitorInstructionsButton').off('click');
|
||||
$('input[name="chartType"]').off('click');
|
||||
$('input[name="useDivisor"]').off('click');
|
||||
$('input[name="useUnit"]').off('click');
|
||||
@ -160,8 +159,6 @@ AJAX.registerTeardown('server/status/monitor.js', function () {
|
||||
});
|
||||
|
||||
AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
// Show tab links
|
||||
$('div.tabLinks').show();
|
||||
$('#loadingMonitorIcon').remove();
|
||||
// Codemirror is loaded on demand so we might need to initialize it
|
||||
if (! window.codeMirrorEditor) {
|
||||
@ -483,36 +480,36 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
defaultChartGrid.c5 = presetCharts.swap;
|
||||
}
|
||||
|
||||
$('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').on('click', function (event) {
|
||||
$('a[href="#rearrangeCharts"]').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
editMode = ! editMode;
|
||||
if ($(this).attr('href') === '#endChartEditMode') {
|
||||
editMode = false;
|
||||
}
|
||||
editMode = true;
|
||||
|
||||
$('a[href="#endChartEditMode"]').toggle(editMode);
|
||||
$('#monitorRearrangeChartButton').removeClass('d-none');
|
||||
|
||||
if (editMode) {
|
||||
// Close the settings popup
|
||||
$('div.popupContent').hide().removeClass('openedPopup');
|
||||
// Close the settings popup
|
||||
$('div.popupContent').hide().removeClass('openedPopup');
|
||||
|
||||
$('#chartGrid').sortableTable({
|
||||
ignoreRect: {
|
||||
top: 8,
|
||||
left: chartSize.width - 63,
|
||||
width: 54,
|
||||
height: 24
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#chartGrid').sortableTable('destroy');
|
||||
}
|
||||
$('#chartGrid').sortableTable({
|
||||
ignoreRect: {
|
||||
top: 8,
|
||||
left: chartSize.width - 63,
|
||||
width: 54,
|
||||
height: 24
|
||||
}
|
||||
});
|
||||
|
||||
saveMonitor(); // Save settings
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#monitorRearrangeChartButton').on('click', function (event) {
|
||||
editMode = false;
|
||||
$('#chartGrid').sortableTable('destroy');
|
||||
saveMonitor();
|
||||
$('#monitorRearrangeChartButton').addClass('d-none');
|
||||
});
|
||||
|
||||
// global settings
|
||||
($('div.popupContent select[name="chartColumns"]') as JQuery<HTMLSelectElement>).on('change', function () {
|
||||
monitorSettings.columns = parseInt(this.value, 10);
|
||||
@ -821,8 +818,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
rebuildGrid();
|
||||
});
|
||||
|
||||
$('a[href="#pauseCharts"]').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
$('#monitorPauseResumeButton').on('click', function () {
|
||||
runtime.redrawCharts = ! runtime.redrawCharts;
|
||||
if (! runtime.redrawCharts) {
|
||||
$(this).html(getImageTag('play') + window.Messages.strResumeMonitor);
|
||||
@ -830,16 +826,11 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
$(this).html(getImageTag('pause') + window.Messages.strPauseMonitor);
|
||||
if (! runtime.charts) {
|
||||
initGrid();
|
||||
$('a[href="#settingsPopup"]').show();
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('a[href="#monitorInstructionsDialog"]').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
$('#monitorInstructionsButton').on('click', function () {
|
||||
var $dialog = $('#monitorInstructionsDialog');
|
||||
var dlgBtns = {
|
||||
[window.Messages.strClose]: {
|
||||
@ -2469,5 +2460,5 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
|
||||
// Run the monitor once loaded
|
||||
AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
$('a[href="#pauseCharts"]').trigger('click');
|
||||
$('#monitorPauseResumeButton').trigger('click');
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="row d-print-none">
|
||||
<ul class="nav nav-pills m-2">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/server/status') }}" class="nav-link{{ active == 'status' ? ' active' }} disableAjax">
|
||||
|
||||
@ -1,25 +1,14 @@
|
||||
{% extends 'server/status/base.twig' %}
|
||||
{% set active = 'monitor' %}
|
||||
{% block content %}
|
||||
<h2 class="mb-3">{{ 'System monitor'|trans }}</h2>
|
||||
|
||||
<div class="tabLinks row">
|
||||
<a href="#pauseCharts">
|
||||
{{ get_image('play') }}
|
||||
{%- trans 'Start Monitor' -%}
|
||||
</a>
|
||||
<a href="#settingsPopup" class="popupLink">
|
||||
{{ get_image('s_cog') }}
|
||||
{%- trans 'Settings' -%}
|
||||
</a>
|
||||
<a href="#monitorInstructionsDialog">
|
||||
{{ get_image('b_help') }}
|
||||
{%- trans 'Instructions/Setup' -%}
|
||||
</a>
|
||||
<a href="#endChartEditMode" class="hide">
|
||||
{{ get_image('s_okay') }}
|
||||
{%- trans 'Done dragging (rearranging) charts' -%}
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-3 d-print-none">
|
||||
<button type="button" class="btn btn-secondary" id="monitorPauseResumeButton">{{ get_icon('play', 'Start monitor'|trans) }}</button>
|
||||
<button type="button" class="btn btn-secondary" id="monitorSettingsButton">{{ get_icon('s_cog', 'Settings'|trans) }}</button>
|
||||
<button type="button" class="btn btn-secondary" id="monitorInstructionsButton">{{ get_icon('b_help', 'Instructions/Setup'|trans) }}</button>
|
||||
<button type="button" class="btn btn-primary d-none" id="monitorRearrangeChartButton">{{ get_icon('s_okay', 'Done dragging (rearranging) charts'|trans) }}</button>
|
||||
</div>
|
||||
|
||||
<div class="popupContent settingsPopup">
|
||||
<a href="#addNewChart">
|
||||
|
||||
@ -64,11 +64,7 @@ class MonitorControllerTest extends AbstractTestCase
|
||||
$this->dummyDbi->assertAllSelectsConsumed();
|
||||
$html = $response->getHTMLResult();
|
||||
|
||||
$this->assertStringContainsString('<div class="tabLinks row">', $html);
|
||||
$this->assertStringContainsString(
|
||||
__('Start Monitor'),
|
||||
$html,
|
||||
);
|
||||
$this->assertStringContainsString(__('Start monitor'), $html);
|
||||
$this->assertStringContainsString(
|
||||
__('Settings'),
|
||||
$html,
|
||||
@ -79,7 +75,6 @@ class MonitorControllerTest extends AbstractTestCase
|
||||
);
|
||||
|
||||
$this->assertStringContainsString('<div class="popupContent settingsPopup">', $html);
|
||||
$this->assertStringContainsString('<a href="#settingsPopup" class="popupLink">', $html);
|
||||
$this->assertStringContainsString(
|
||||
__('Enable charts dragging'),
|
||||
$html,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
