diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss index 68dc6a7cce..b66a3e6a98 100644 --- a/public/themes/bootstrap/scss/_common.scss +++ b/public/themes/bootstrap/scss/_common.scss @@ -508,8 +508,6 @@ div { } &#queryAnalyzerDialog { - min-width: 700px; - div { &.CodeMirror-scroll { height: auto; diff --git a/public/themes/metro/scss/_common.scss b/public/themes/metro/scss/_common.scss index 61977561e0..0e762b627a 100644 --- a/public/themes/metro/scss/_common.scss +++ b/public/themes/metro/scss/_common.scss @@ -761,8 +761,6 @@ div { } &#queryAnalyzerDialog { - min-width: 700px; - div { &.CodeMirror-scroll { height: auto; diff --git a/public/themes/pmahomme/scss/_common.scss b/public/themes/pmahomme/scss/_common.scss index 65b2890cbe..3554adecfc 100644 --- a/public/themes/pmahomme/scss/_common.scss +++ b/public/themes/pmahomme/scss/_common.scss @@ -694,8 +694,6 @@ div { } &#queryAnalyzerDialog { - min-width: 700px; - div { &.CodeMirror-scroll { height: auto; diff --git a/resources/js/src/server/status/monitor.ts b/resources/js/src/server/status/monitor.ts index 7647432992..8e34fd6752 100644 --- a/resources/js/src/server/status/monitor.ts +++ b/resources/js/src/server/status/monitor.ts @@ -24,34 +24,11 @@ var chartSize; var monitorSettings; function serverResponseError () { - var btns = { - [window.Messages.strReloadPage]: { - text: window.Messages.strReloadPage, - class: 'btn btn-primary', - click: function () { - window.location.reload(); - }, - }, - }; - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - title: window.Messages.strRefreshFailed - }); + window.bootstrap.Modal.getOrCreateInstance('#serverResponseErrorModal').show(); +} - $('#emptyDialog').html( - getImageTag('s_attention') + - window.Messages.strInvalidResponseExplanation - ); - - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - // @ts-ignore - buttons: btns - }); +function serverResponseErrorModalReloadEventHandler () { + window.location.reload(); } /** @@ -111,6 +88,9 @@ AJAX.registerOnload('server/status/monitor.js', function () { }); AJAX.registerTeardown('server/status/monitor.js', function () { + const serverResponseErrorModalReloadButton = document.getElementById('serverResponseErrorModalReloadButton'); + serverResponseErrorModalReloadButton?.removeEventListener('click', serverResponseErrorModalReloadEventHandler); + $('#monitorRearrangeChartButton').off('click'); $('#monitorDoneRearrangeChartButton').off('click'); $('#monitorChartColumnsSelect').off('change'); @@ -134,6 +114,9 @@ AJAX.registerTeardown('server/status/monitor.js', function () { }); AJAX.registerOnload('server/status/monitor.js', function () { + const serverResponseErrorModalReloadButton = document.getElementById('serverResponseErrorModalReloadButton'); + serverResponseErrorModalReloadButton?.addEventListener('click', serverResponseErrorModalReloadEventHandler); + $('#loadingMonitorIcon').remove(); // Codemirror is loaded on demand so we might need to initialize it if (! window.codeMirrorEditor) { @@ -782,7 +765,10 @@ AJAX.registerOnload('server/status/monitor.js', function () { if (typeof data !== 'undefined' && data.success === true) { logVars = data.message; } else { - return serverResponseError(); + window.bootstrap.Modal.getOrCreateInstance('#monitorInstructionsModal').hide(); + serverResponseError(); + + return; } var icon = getImageTag('s_success'); @@ -1033,33 +1019,7 @@ AJAX.registerOnload('server/status/monitor.js', function () { && typeof window.localStorage.monitorVersion !== 'undefined' && monitorProtocolVersion !== window.localStorage.monitorVersion ) { - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - title: window.Messages.strIncompatibleMonitorConfig - }); - - $('#emptyDialog').html(window.Messages.strIncompatibleMonitorConfigDescription); - - var dlgBtns = { - [window.Messages.strClose]: { - text: window.Messages.strClose, - class: 'btn btn-primary', - click: function () { - $(this).dialog('close'); - } - }, - }; - - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - width: 400, - // @ts-ignore - buttons: dlgBtns - }); + window.bootstrap.Modal.getOrCreateInstance('#incompatibleMonitorConfigModal').show(); } } @@ -1389,61 +1349,58 @@ AJAX.registerOnload('server/status/monitor.js', function () { } function getLogAnalyseDialog (min: Date, max: Date) { - var $logAnalyseDialog = $('#logAnalyseDialog'); - var $dateStart = $logAnalyseDialog.find('input[name="dateStart"]'); - var $dateEnd = $logAnalyseDialog.find('input[name="dateEnd"]'); - $dateStart.prop('readonly', true); - $dateEnd.prop('readonly', true); + const logAnalyseModal = document.getElementById('logAnalyseModal'); - var dlgBtns = { - [window.Messages.strFromSlowLog]: { - text: window.Messages.strFromSlowLog, - class: 'btn btn-secondary', - }, - [window.Messages.strFromGeneralLog]: { - text: window.Messages.strFromGeneralLog, - class: 'btn btn-secondary', - }, - }; - - // @ts-ignore - dlgBtns[window.Messages.strFromSlowLog].click = function () { + function logAnalyseModalSlowLogEventHandler () { + window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide(); loadLog('slow', min, max); - $(this).dialog('close'); - }; + } - // @ts-ignore - dlgBtns[window.Messages.strFromGeneralLog].click = function () { + function logAnalyseModalGeneralLogEventHandler () { + window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide(); loadLog('general', min, max); - $(this).dialog('close'); - }; + } - $logAnalyseDialog.dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - width: 'auto', - height: 'auto', - // @ts-ignore - buttons: dlgBtns + logAnalyseModal.addEventListener('shown.bs.modal', function () { + const logAnalyseModalSlowLogButton = document.getElementById('logAnalyseModalSlowLogButton'); + logAnalyseModalSlowLogButton?.addEventListener('click', logAnalyseModalSlowLogEventHandler); + + const logAnalyseModalGeneralLogButton = document.getElementById('logAnalyseModalGeneralLogButton'); + logAnalyseModalGeneralLogButton?.addEventListener('click', logAnalyseModalGeneralLogEventHandler); + + const $logAnalyseDialog = $('#logAnalyseDialog'); + const $dateStart = $logAnalyseDialog.find('input[name="dateStart"]'); + const $dateEnd = $logAnalyseDialog.find('input[name="dateEnd"]'); + $dateStart.prop('readonly', true); + $dateEnd.prop('readonly', true); + + addDatepicker($dateStart, 'datetime', { + showMillisec: false, + showMicrosec: false, + timeFormat: 'HH:mm:ss', + firstDay: window.firstDayOfCalendar + }); + + addDatepicker($dateEnd, 'datetime', { + showMillisec: false, + showMicrosec: false, + timeFormat: 'HH:mm:ss', + firstDay: window.firstDayOfCalendar + }); + + $dateStart.datepicker('setDate', min); + $dateEnd.datepicker('setDate', max); }); - addDatepicker($dateStart, 'datetime', { - showMillisec: false, - showMicrosec: false, - timeFormat: 'HH:mm:ss', - firstDay: window.firstDayOfCalendar + logAnalyseModal.addEventListener('hidden.bs.modal', function () { + const logAnalyseModalSlowLogButton = document.getElementById('logAnalyseModalSlowLogButton'); + logAnalyseModalSlowLogButton?.removeEventListener('click', logAnalyseModalSlowLogEventHandler); + + const logAnalyseModalGeneralLogButton = document.getElementById('logAnalyseModalGeneralLogButton'); + logAnalyseModalGeneralLogButton?.removeEventListener('click', logAnalyseModalGeneralLogEventHandler); }); - addDatepicker($dateEnd, 'datetime', { - showMillisec: false, - showMicrosec: false, - timeFormat: 'HH:mm:ss', - firstDay: window.firstDayOfCalendar - }); - - $dateStart.datepicker('setDate', min); - $dateEnd.datepicker('setDate', max); + window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).show(); } function loadLog (type: string, min: Date, max: Date) { @@ -1471,7 +1428,9 @@ AJAX.registerOnload('server/status/monitor.js', function () { if (typeof data !== 'undefined' && data.success === true) { chartData = data.message; } else { - return serverResponseError(); + serverResponseError(); + + return; } var value; @@ -1697,43 +1656,16 @@ AJAX.registerOnload('server/status/monitor.js', function () { opts.limitTypes = false; } - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - title: window.Messages.strAnalysingLogsTitle - }); + const analysingLogsModal = document.getElementById('analysingLogsModal'); - $('#emptyDialog').html(window.Messages.strAnalysingLogs + - ' '); - - var dlgBtns = { - [window.Messages.strCancelRequest]: { - text: window.Messages.strCancelRequest, - class: 'btn btn-primary', - }, - }; - - // @ts-ignore - dlgBtns[window.Messages.strCancelRequest].click = function () { + analysingLogsModal.addEventListener('hidden.bs.modal', function () { if (logRequest !== null) { logRequest.abort(); } - - $(this).dialog('close'); - }; - - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - width: 'auto', - height: 'auto', - // @ts-ignore - buttons: dlgBtns }); + window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).show(); + var url = 'index.php?route=/server/status/monitor/slow-log'; if (opts.src === 'general') { url = 'index.php?route=/server/status/monitor/general-log'; @@ -1751,56 +1683,32 @@ AJAX.registerOnload('server/status/monitor.js', function () { }, function (data) { var logData; - var dlgBtns = { - [window.Messages.strClose]: { - text: window.Messages.strClose, - class: 'btn btn-primary', - }, - }; if (typeof data !== 'undefined' && data.success === true) { logData = data.message; } else { - return serverResponseError(); + window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide(); + serverResponseError(); + + return; } if (logData.rows.length === 0) { - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - title: window.Messages.strNoDataFoundTitle, - }); - - $('#emptyDialog').html('

' + window.Messages.strNoDataFound + '

'); - - // @ts-ignore - dlgBtns[window.Messages.strClose].click = function () { - $(this).dialog('close'); - }; - - $('#emptyDialog').dialog('option', 'buttons', dlgBtns); + window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide(); + window.bootstrap.Modal.getOrCreateInstance('#analysingLogsNoDataFoundModal').show(); return; } runtime.logDataCols = buildLogTable(logData, opts.removeVariables); - /* Show some stats in the dialog */ - $('#emptyDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - title: window.Messages.strLoadingLogs - }); - - $('#emptyDialog').html('

' + window.Messages.strLogDataLoaded + '

'); + const analysingLogsLogDataLoadedModalBody = $('#analysingLogsLogDataLoadedModal .modal-body'); $.each(logData.sum, function (key: string, value) { var newKey = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase(); if (newKey === 'Total') { newKey = '' + newKey + ''; } - $('#emptyDialog').append(newKey + ': ' + value + '
'); + analysingLogsLogDataLoadedModalBody.append(newKey + ': ' + value + '
'); }); /* Add filter options if more than a bunch of rows there to filter */ @@ -1832,17 +1740,25 @@ AJAX.registerOnload('server/status/monitor.js', function () { } } - dlgBtns[window.Messages.strJumpToTable] = { - text: window.Messages.strJumpToTable, - class: 'btn btn-secondary', - // @ts-ignore - click: function () { - $(this).dialog('close'); - $(document).scrollTop($('#logTable').offset().top); - }, - }; + const analysingLogsLogDataLoadedModal = document.getElementById('analysingLogsLogDataLoadedModal'); - $('#emptyDialog').dialog('option', 'buttons', dlgBtns); + function analysingLogsLogDataLoadedModalJumpEventHandler () { + window.bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).hide(); + $(document).scrollTop($('#logTable').offset().top); + } + + analysingLogsLogDataLoadedModal.addEventListener('shown.bs.modal', function () { + const analysingLogsLogDataLoadedModalJumpButton = document.getElementById('analysingLogsLogDataLoadedModalJumpButton'); + analysingLogsLogDataLoadedModalJumpButton?.addEventListener('click', analysingLogsLogDataLoadedModalJumpEventHandler); + }); + + analysingLogsLogDataLoadedModal.addEventListener('hidden.bs.modal', function () { + const analysingLogsLogDataLoadedModalJumpButton = document.getElementById('analysingLogsLogDataLoadedModalJumpButton'); + analysingLogsLogDataLoadedModalJumpButton?.removeEventListener('click', analysingLogsLogDataLoadedModalJumpEventHandler); + }); + + window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide(); + window.bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).show(); } ); @@ -2116,64 +2032,48 @@ AJAX.registerOnload('server/status/monitor.js', function () { /* Opens the query analyzer dialog */ function openQueryAnalyzer () { - var rowData = $(this).parent().data('query'); - var query = rowData.argument || rowData.sql_text; + const rowData = $(this).parent().data('query'); + let profilingChart = null; - if (window.codeMirrorEditor) { - window.codeMirrorEditor.setValue(query); - // Codemirror is bugged, it doesn't refresh properly sometimes. - // Following lines seem to fix that - setTimeout(function () { - window.codeMirrorEditor.refresh(); - }, 50); - } else { - $('#sqlquery').val(query); + function queryAnalyzerModalSaveEventHandler () { + profilingChart = loadQueryAnalysis(rowData); } - var profilingChart = null; - var dlgBtns = { - [window.Messages.strAnalyzeQuery]: { - text: window.Messages.strAnalyzeQuery, - class: 'btn btn-primary', - }, - [window.Messages.strClose]: { - text: window.Messages.strClose, - class: 'btn btn-secondary', - }, - }; + const queryAnalyzerModal = document.getElementById('queryAnalyzerModal'); + queryAnalyzerModal.addEventListener('shown.bs.modal', function () { + const queryAnalyzerModalAnalyseButton = document.getElementById('queryAnalyzerModalAnalyseButton'); + queryAnalyzerModalAnalyseButton?.addEventListener('click', queryAnalyzerModalSaveEventHandler); - // @ts-ignore - dlgBtns[window.Messages.strAnalyzeQuery].click = function () { - profilingChart = loadQueryAnalysis(rowData); - }; - - // @ts-ignore - dlgBtns[window.Messages.strClose].click = function () { - $(this).dialog('close'); - }; - - $('#queryAnalyzerDialog').dialog({ - classes: { - 'ui-dialog-titlebar-close': 'btn-close' - }, - width: 'auto', - height: 'auto', - resizable: true, - // @ts-ignore - buttons: dlgBtns, - close: function () { - if (profilingChart !== null) { - profilingChart.destroy(); - } - - $('#queryAnalyzerDialog').find('div.placeHolder').html(''); - if (window.codeMirrorEditor) { - window.codeMirrorEditor.setValue(''); - } else { - $('#sqlquery').val(''); - } + const query = rowData.argument || rowData.sql_text; + if (window.codeMirrorEditor) { + window.codeMirrorEditor.setValue(query); + // Codemirror is bugged, it doesn't refresh properly sometimes. + // Following lines seem to fix that + setTimeout(function () { + window.codeMirrorEditor.refresh(); + }, 50); + } else { + $('#sqlquery').val(query); } }); + + queryAnalyzerModal.addEventListener('hidden.bs.modal', function () { + const queryAnalyzerModalAnalyseButton = document.getElementById('queryAnalyzerModalAnalyseButton'); + queryAnalyzerModalAnalyseButton?.removeEventListener('click', queryAnalyzerModalSaveEventHandler); + + if (profilingChart !== null) { + profilingChart.destroy(); + } + + queryAnalyzerModal.querySelector('div.placeHolder').textContent = ''; + if (window.codeMirrorEditor) { + window.codeMirrorEditor.setValue(''); + } else { + $('#sqlquery').val(''); + } + }); + + window.bootstrap.Modal.getOrCreateInstance(queryAnalyzerModal).show(); } /* Loads and displays the analyzed query data */ diff --git a/resources/templates/server/status/monitor/index.twig b/resources/templates/server/status/monitor/index.twig index f3f2db5ddb..006f205951 100644 --- a/resources/templates/server/status/monitor/index.twig +++ b/resources/templates/server/status/monitor/index.twig @@ -216,37 +216,164 @@ -
-

- {{ t('Selected time range:') }} - - - - -

+ -
- -
-
+ + + + + + + + + + +
diff --git a/src/Controllers/JavaScriptMessagesController.php b/src/Controllers/JavaScriptMessagesController.php index f0f46090ab..dfb8af9da1 100644 --- a/src/Controllers/JavaScriptMessagesController.php +++ b/src/Controllers/JavaScriptMessagesController.php @@ -172,15 +172,6 @@ final class JavaScriptMessagesController implements InvocableController 'numberOfStatements' => __('Number of statements'), - /* server status monitor */ - 'strIncompatibleMonitorConfig' => __('Local monitor configuration incompatible!'), - 'strIncompatibleMonitorConfigDescription' => __( - 'The chart arrangement configuration in your browsers local storage is not ' - . 'compatible anymore to the newer version of the monitor dialog. It is very ' - . 'likely that your current configuration will not work anymore. Please reset ' - . 'your configuration to default in the Settings menu.', - ), - 'strQueryCacheEfficiency' => __('Query cache efficiency'), 'strQueryCacheUsage' => __('Query cache usage'), 'strQueryCacheUsed' => __('Query cache used'), @@ -265,12 +256,7 @@ final class JavaScriptMessagesController implements InvocableController 'strDividedBy' => __('Divided by %s'), 'strUnit' => __('Unit'), - 'strFromSlowLog' => __('From slow log'), - 'strFromGeneralLog' => __('From general log'), 'strServerLogError' => __('The database name is not known for this query in the server\'s logs.'), - 'strAnalysingLogsTitle' => __('Analysing logs'), - 'strAnalysingLogs' => __('Analysing & loading logs. This may take a while.'), - 'strCancelRequest' => __('Cancel request'), 'strCountColumnExplanation' => __( 'This column shows the amount of identical queries that are grouped together. ' . 'However only the SQL query itself has been used as a grouping criteria, so ' @@ -281,11 +267,6 @@ final class JavaScriptMessagesController implements InvocableController . 'same table are also being grouped together, disregarding of the inserted ' . 'data.', ), - 'strLogDataLoaded' => __('Log data loaded. Queries executed in this time span:'), - - 'strJumpToTable' => __('Jump to Log table'), - 'strNoDataFoundTitle' => __('No data found'), - 'strNoDataFound' => __('Log analysed, but no data found in this time span.'), 'strAnalyzing' => __('Analyzing…'), 'strExplainOutput' => __('Explain output'), @@ -309,15 +290,6 @@ final class JavaScriptMessagesController implements InvocableController 'strSumRows' => __('Sum of grouped rows:'), 'strTotal' => __('Total:'), - 'strLoadingLogs' => __('Loading logs'), - 'strRefreshFailed' => __('Monitor refresh failed'), - 'strInvalidResponseExplanation' => __( - 'While requesting new chart data the server returned an invalid response. This ' - . 'is most likely because your session expired. Reloading the page and ' - . 'reentering your credentials should help.', - ), - 'strReloadPage' => __('Reload page'), - 'strAffectedRows' => __('Affected rows:'), 'strFailedParsingConfig' => __('Failed parsing config file. It doesn\'t seem to be valid JSON code.'), @@ -329,8 +301,6 @@ final class JavaScriptMessagesController implements InvocableController 'strDBNameDialogMessage' => __('Please enter a valid database name.'), 'strNoImportFile' => __('No files available on server for import!'), - 'strAnalyzeQuery' => __('Analyse query'), - /* For query editor */ 'strFormatting' => __('Formatting SQL…'), 'strNoParam' => __('No parameters found!'),