Replace import monitor config jQuery UI's dialog with a modal
Signed-off-by: Maurício Meneghini Fauth <mauricio@mfauth.net>
This commit is contained in:
Maurício Meneghini Fauth
parent
65a4eed88f
commit
13ce962cb5
@ -117,7 +117,6 @@ AJAX.registerTeardown('server/status/monitor.js', function () {
|
||||
$('#monitorChartRefreshRateSelect').off('change');
|
||||
$('#monitorAddNewChartButton').off('click');
|
||||
$('#monitorExportConfigButton').off('click');
|
||||
$('#monitorImportConfigButton').off('click');
|
||||
$('#monitorResetConfigButton').off('click');
|
||||
$('#monitorPauseResumeButton').off('click');
|
||||
$('#monitorInstructionsButton').off('click');
|
||||
@ -677,99 +676,71 @@ AJAX.registerOnload('server/status/monitor.js', function () {
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$('#monitorImportConfigButton').on('click', function () {
|
||||
$('#emptyDialog').dialog({
|
||||
classes: {
|
||||
'ui-dialog-titlebar-close': 'btn-close'
|
||||
},
|
||||
title: window.Messages.strImportDialogTitle
|
||||
});
|
||||
function monitorImportConfigImportEventHandler () {
|
||||
var input = ($('#monitorImportConfigModal').find('#import_file') as JQuery<HTMLInputElement>)[0];
|
||||
var reader = new FileReader();
|
||||
|
||||
$('#emptyDialog').html(window.Messages.strImportDialogMessage + '<br><form>' +
|
||||
'<input type="file" name="file" id="import_file"> </form>');
|
||||
|
||||
var dlgBtns = {
|
||||
[window.Messages.strImport]: {
|
||||
text: window.Messages.strImport,
|
||||
class: 'btn btn-primary',
|
||||
},
|
||||
[window.Messages.strCancel]: {
|
||||
text: window.Messages.strCancel,
|
||||
class: 'btn btn-secondary',
|
||||
},
|
||||
reader.onerror = function (event) {
|
||||
alert(window.Messages.strFailedParsingConfig + '\n' + event.target.error.code);
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
dlgBtns[window.Messages.strImport].click = function () {
|
||||
var input = ($('#emptyDialog').find('#import_file') as JQuery<HTMLInputElement>)[0];
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var data = (e.target.result as string);
|
||||
var json = null;
|
||||
// Try loading config
|
||||
try {
|
||||
json = JSON.parse(data);
|
||||
} catch (err) {
|
||||
alert(window.Messages.strFailedParsingConfig);
|
||||
window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
|
||||
|
||||
reader.onerror = function (event) {
|
||||
alert(window.Messages.strFailedParsingConfig + '\n' + event.target.error.code);
|
||||
};
|
||||
|
||||
reader.onload = function (e) {
|
||||
var data = (e.target.result as string);
|
||||
var json = null;
|
||||
// Try loading config
|
||||
try {
|
||||
json = JSON.parse(data);
|
||||
} catch (err) {
|
||||
alert(window.Messages.strFailedParsingConfig);
|
||||
$('#emptyDialog').dialog('close');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic check, is this a monitor config json?
|
||||
if (! json || ! json.monitorCharts || ! json.monitorCharts) {
|
||||
alert(window.Messages.strFailedParsingConfig);
|
||||
$('#emptyDialog').dialog('close');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// If json ok, try applying config
|
||||
try {
|
||||
if (isStorageSupported('localStorage')) {
|
||||
window.localStorage.monitorCharts = JSON.stringify(json.monitorCharts);
|
||||
window.localStorage.monitorSettings = JSON.stringify(json.monitorSettings);
|
||||
}
|
||||
|
||||
rebuildGrid();
|
||||
} catch (err) {
|
||||
alert(window.Messages.strFailedBuildingGrid);
|
||||
// If an exception is thrown, load default again
|
||||
if (isStorageSupported('localStorage')) {
|
||||
window.localStorage.removeItem('monitorCharts');
|
||||
window.localStorage.removeItem('monitorSettings');
|
||||
}
|
||||
|
||||
rebuildGrid();
|
||||
}
|
||||
|
||||
$('#emptyDialog').dialog('close');
|
||||
};
|
||||
|
||||
if (input.files[0]) {
|
||||
reader.readAsText(input.files[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic check, is this a monitor config json?
|
||||
if (! json || ! json.monitorCharts || ! json.monitorCharts) {
|
||||
alert(window.Messages.strFailedParsingConfig);
|
||||
window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// If json ok, try applying config
|
||||
try {
|
||||
if (isStorageSupported('localStorage')) {
|
||||
window.localStorage.monitorCharts = JSON.stringify(json.monitorCharts);
|
||||
window.localStorage.monitorSettings = JSON.stringify(json.monitorSettings);
|
||||
}
|
||||
|
||||
rebuildGrid();
|
||||
} catch (err) {
|
||||
alert(window.Messages.strFailedBuildingGrid);
|
||||
// If an exception is thrown, load default again
|
||||
if (isStorageSupported('localStorage')) {
|
||||
window.localStorage.removeItem('monitorCharts');
|
||||
window.localStorage.removeItem('monitorSettings');
|
||||
}
|
||||
|
||||
rebuildGrid();
|
||||
}
|
||||
|
||||
window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
dlgBtns[window.Messages.strCancel].click = function () {
|
||||
$(this).dialog('close');
|
||||
};
|
||||
if (input.files[0]) {
|
||||
reader.readAsText(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
$('#emptyDialog').dialog({
|
||||
classes: {
|
||||
'ui-dialog-titlebar-close': 'btn-close'
|
||||
},
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
// @ts-ignore
|
||||
buttons: dlgBtns
|
||||
});
|
||||
const monitorImportConfigModal = document.getElementById('monitorImportConfigModal');
|
||||
monitorImportConfigModal.addEventListener('shown.bs.modal', function () {
|
||||
const monitorImportConfigImportButton = document.getElementById('monitorImportConfigImportButton');
|
||||
monitorImportConfigImportButton?.addEventListener('click', monitorImportConfigImportEventHandler);
|
||||
});
|
||||
|
||||
monitorImportConfigModal.addEventListener('hidden.bs.modal', function () {
|
||||
const monitorImportConfigImportButton = document.getElementById('monitorImportConfigImportButton');
|
||||
monitorImportConfigImportButton?.removeEventListener('click', monitorImportConfigImportEventHandler);
|
||||
});
|
||||
|
||||
$('#monitorResetConfigButton').on('click', function () {
|
||||
|
||||
@ -50,7 +50,28 @@
|
||||
<span class="text-body-secondary">{{ t('The arrangement of the charts is stored to the browsers local storage. You may want to export it if you have a complicated set up.') }}</span>
|
||||
</p>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary" id="monitorImportConfigButton">{{ t('Import') }}</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#monitorImportConfigModal">{{ t('Import') }}</button>
|
||||
<div class="modal fade" id="monitorImportConfigModal" tabindex="-1" aria-labelledby="monitorImportConfigModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="monitorImportConfigModalLabel">{{ t('Importing system monitor configuration') }}</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<label for="import_file" class="form-label">{{ t('Please select the file you want to import:') }}</label>
|
||||
<input class="form-control" type="file" name="file" id="import_file">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
|
||||
<button type="button" class="btn btn-primary" id="monitorImportConfigImportButton">{{ t('Import') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-secondary" id="monitorExportConfigButton">{{ t('Export') }}</button>
|
||||
<button type="button" class="btn btn-secondary" id="monitorResetConfigButton">{{ t('Reset to default') }}</button>
|
||||
</div>
|
||||
|
||||
@ -324,8 +324,6 @@ final class JavaScriptMessagesController implements InvocableController
|
||||
'strFailedBuildingGrid' => __(
|
||||
'Failed building chart grid with imported config. Resetting to default config…',
|
||||
),
|
||||
'strImport' => __('Import'),
|
||||
'strImportDialogTitle' => __('Import monitor configuration'),
|
||||
'strImportDialogMessage' => __('Please select the file you want to import:'),
|
||||
'strTableNameDialogMessage' => __('Please enter a valid table name.'),
|
||||
'strDBNameDialogMessage' => __('Please enter a valid database name.'),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
