From d864f2f06b3198083561d0cd489b6070f91bdc89 Mon Sep 17 00:00:00 2001 From: "Hahn Axel (hahn)" <axel.hahn@iml.unibe.ch> Date: Wed, 10 Oct 2018 11:13:00 +0200 Subject: [PATCH] - show logfile in overlay - show hints --- .gitignore | 3 +- classes/cronlog-renderer.class.php | 132 +++++++++++++------ classes/cronlog.class.php | 8 +- classes/cronlog_cfg.php | 6 + get.php | 2 +- index.html | 32 +++-- js/functions.js | 197 +++++++++++++++++------------ main.css | 18 +-- 8 files changed, 254 insertions(+), 144 deletions(-) create mode 100644 classes/cronlog_cfg.php diff --git a/.gitignore b/.gitignore index c33037f..e18140b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /data/ -/cronjobs.html \ No newline at end of file +/cronjobs.html +/winscp.rnd \ No newline at end of file diff --git a/classes/cronlog-renderer.class.php b/classes/cronlog-renderer.class.php index 05c350d..01020ce 100644 --- a/classes/cronlog-renderer.class.php +++ b/classes/cronlog-renderer.class.php @@ -18,6 +18,22 @@ class cronlogrenderer extends cronlog{ protected $_iMinTime4Timeline = 60; + /** + * show date of last data and last access + * @param type $iLast + * @return string + */ + protected function _renderAccessAndAge($iLast){ + if(!$iLast){ + return ''; + } + $iAge=round((date('U')-$iLast)/60); + return '' + . 'Abruf: '.date("Y-m-d H:i:s").' min<br>' + . 'letzter Eintrag: vor '.$iAge.' min<br><br>' + ; + } + /** * get html code for a table with events of executed cronjobs * @@ -44,16 +60,16 @@ class cronlogrenderer extends cronlog{ // Array ( [SCRIPTNAME] => apt-get update [SCRIPTTTL] => 1440 [SCRIPTSTARTTIME] => 2016-06-21 06:00:02, 1466481602 [SCRIPTLABEL] => apt-get [SCRIPTENDTIME] => 2016-06-21 06:00:49, 1466481649 [SCRIPTEXECTIME] => 47 s [SCRIPTRC] => 0 ) foreach($aData as $sDtakey=>$aEntry){ if(!$sTblHead){ - foreach(array('SCRIPTSTARTTIME', 'SCRIPTLABEL', 'Server', 'SCRIPTEXECTIME', 'SCRIPTTTL', 'SCRIPTRC', 'Kommentar' /*, 'Aktionen'*/) as $sKey){ + foreach(array('Startzeit', 'Label', 'Server', 'Dauer', 'TTL', 'Exitcode', 'Kommentar' /*, 'Aktionen'*/) as $sKey){ $sTblHead.='<th>'.$sKey.'</th>'; } - $iLast=date("U", $aEntry['SCRIPTSTARTTIME']); } // $sViewerUrl='viewer.php?host='.$aEntry['host'].'&job='.$aEntry['job']; // $sClass='message-'.($aEntry['SCRIPTRC']?'error':'ok'); + $iLast=max(array($iLast, date("U", $aEntry['SCRIPTSTARTTIME']))); $aErrors=array(); - $iNextRun=$aEntry['SCRIPTSTARTTIME']+((int)$aEntry['SCRIPTTTL']*60); + $iNextRun=$aEntry['SCRIPTSTARTTIME']+((int)$aEntry['SCRIPTTTL']*1.5*60); if($iNextRun < date("U")){ $aErrors[]='outdated'; @@ -90,16 +106,17 @@ class cronlogrenderer extends cronlog{ . '</tr>' ; } - $iAge=round((date('U')-$iLast)/60); $sIdTable='datatable1'; $sHtml=' <!-- START '.__METHOD__.' --> ' . '<h3>Letztes Logfile pro Job</h3>' + . '<p class="hint">' + . 'Von jedem Cronjob kann man das jeweils letzte Log im Detail ansehen. Mit Klick in der Tabelle wird die Logdatei geöffnet.' + . '</p>' . '<div>' - . 'Abruf: '.date("Y-m-d H:i:s").' min<br>' - . 'letzter Eintrag: vor '.$iAge.' min<br><br>' + . $this->_renderAccessAndAge($iLast) . 'gesamt: <strong>' . count($aData).'</strong>' . ($iErrors ? ' (Fehler: <strong>' . $iErrors.'</strong>... OK: <strong>' . $iOK.'</strong>)' : '') . '<br><br>' @@ -136,7 +153,7 @@ class cronlogrenderer extends cronlog{ } /** - * get html code for a table with events of executed cronjobs + * get html code for a table with history of executed cronjobs * * @param array $aData result of $oCL->getServerLogs() * @return string @@ -160,11 +177,11 @@ class cronlogrenderer extends cronlog{ // job=dok-kvm-instances:host=kalium:start=1538358001:end=1538358001:exectime=0:ttl=60:rc=0 foreach($aData as $aEntry){ if(!$sTblHead){ - foreach(array('start', 'end', 'job', 'host', 'exectime', 'ttl', 'rc') as $sKey){ + foreach(array('Startzeit', /*'Ende',*/ 'Label', 'Server', 'Dauer', 'TTL', 'Exitcode') as $sKey){ $sTblHead.='<th>'.$sKey.'</th>'; } - $iLast=date("U", $aEntry['start']); } + $iLast=max(array($iLast, date("U", $aEntry['start']))); // $sViewerUrl='viewer.php?host='.$aEntry['host'].'&job='.$aEntry['job']; $sClass='message-'.($aEntry['rc']?'error':'ok'); @@ -176,7 +193,7 @@ class cronlogrenderer extends cronlog{ $sHtml.='<tr class="'.$sClass.'">' . '<td>'.date("Y-m-d H:i:s", $aEntry['start']).'</td>' - . '<td>'.date("Y-m-d H:i:s", $aEntry['end']).'</td>' + // . '<td>'.date("Y-m-d H:i:s", $aEntry['end']).'</td>' . '<td>'.$aEntry['job'].'</td>' . '<td>'.$aEntry['host'].'</td>' . '<td>' @@ -188,16 +205,17 @@ class cronlogrenderer extends cronlog{ . '</tr>' ; } - $iAge=round((date('U')-$iLast)/60); $sIdTable='datatable2'; $sHtml=' <!-- START '.__METHOD__.' --> ' . '<h3>History</h3>' + . '<p class="hint">' + . 'Von den gestarteten Cronjobs werden die Ausführungen und deren Exitcode für 6 Tage aufgehoben.' + . '</p>' . '<div>' - . 'Abruf: '.date("Y-m-d H:i:s").' min<br>' - . 'letzter Eintrag: vor '.$iAge.' min<br><br>' + . $this->_renderAccessAndAge($iLast) . 'gesamt: <strong>' . count($aData).'</strong>' . ($iErrors ? ' (Fehler: <strong>' . $iErrors.'</strong>... OK: <strong>' . $iOK.'</strong>)' : '') . '<br><br>' @@ -211,7 +229,7 @@ class cronlogrenderer extends cronlog{ // init datatable . '<script>' - . '$(document).ready( function () {$(\'#'.$sIdTable.'\').DataTable({"retrieve": true, "aaSorting":[[0,"desc"]]});} );' + . '$(document).ready( function () {$(\'#'.$sIdTable.'\').DataTable({"retrieve": true, "aaSorting":[[0,"desc"]],"aaSorting":[[0,"desc"]], "aLengthMenu":[[10,25,100,-1],[10,25,100,"---"]]});} );' . '</script>' . ' @@ -244,6 +262,11 @@ class cronlogrenderer extends cronlog{ * @return string */ public function renderJobGraph($aData=false){ + $sTaskId=__FUNCTION__.'-'.$this->_sActiveServer; + $sHtml=$this->_getCacheData($sTaskId); + if($sHtml){ + return $sHtml; + } $sHtml=''; static $iGraphCounter; if(!isset($iGraphCounter)){ @@ -256,14 +279,27 @@ class cronlogrenderer extends cronlog{ $sDivId='vis-timeline-'.$iGraphCounter; $aDataset=array(); + $iLast=false; $iEntry=0; foreach($aData as $aEntry){ - $iEntry++; if($aEntry['exectime']>$this->_iMinTime4Timeline){ + $iEntry++; + $iLast=max(array($iLast, date("U", $aEntry['start']))); $aDataset[]=array( 'id'=>$iEntry, - 'start'=>date("Y-m-d H:i:s", $aEntry['start']), - 'end'=>date("Y-m-d H:i:s", $aEntry['end']), + /* + 'start'=>(int)date("U", $aEntry['start']), + 'end'=>(int)date("U", $aEntry['end']), + * + 'start'=>'Date'.date('Y-m-d\TH:i:s.000\Z', $aEntry['start']), + 'end'=>'Date'.date('Y-m-d\TH:i:s.000\Z', $aEntry['end']), + * + 'start'=>date('Y-m-d\TH:i:s.000\Z', $aEntry['start']), + 'end'=>date('Y-m-d\TH:i:s.000\Z', $aEntry['end']), + * + */ + 'start'=>(int)date("U", $aEntry['start'])*1000, + 'end'=>(int)date("U", $aEntry['end'])*1000, 'content'=>$aEntry['job'].'@'.$aEntry['host'], 'className'=>'timeline-result-'.($aEntry['rc'] ? 'error' : 'ok'), 'title'=>'<strong>'.$aEntry['job'].'@'.$aEntry['host'].'</strong><br>' @@ -276,6 +312,7 @@ class cronlogrenderer extends cronlog{ . 'rc = ' . $aEntry['rc'].'<br>' , ); + // if($iEntry>=265){break;} } } @@ -284,32 +321,51 @@ class cronlogrenderer extends cronlog{ <!-- START '.__METHOD__.' --> <h3>Graph mit Timeline</h3> + <p class="hint"> + Aus der History der letzten 6 Tage werden die Ceonjobs mit mehr als '.$this->_iMinTime4Timeline.' Sekunden Laufzeit dargestellt.<br> + So kann man ggf. Konflikte und Ungereimtheiten finden.<br> + Innerhalb der Timeline kann man mit dem Mausrad den Zoom verändern. + </p> <p> - Jobs ges.: <strong>'.count($aData).'</strong> ... davon mit mehr als '.$this->_iMinTime4Timeline.'s Laufzeit: <strong>'.count($aDataset).'</strong> + Jobs mit mehr als '.$this->_iMinTime4Timeline.'s Laufzeit: <strong>'.count($aDataset).'</strong> (ges.: '.count($aData).')<br><br> + '. (count($aDataset) ? $this->_renderAccessAndAge($iLast) : '' ).' </p> + ' + .(count($aDataset) ? + '<div id="'.$sDivId.'"></div> - <div id="'.$sDivId.'"></div> + <script type="text/javascript"> + // DOM element where the Timeline will be attached + var container = document.getElementById("'.$sDivId.'"); - <script type="text/javascript"> - // DOM element where the Timeline will be attached - var container = document.getElementById("'.$sDivId.'"); + // Create a DataSet (allows two way data-binding) + var items = new vis.DataSet('.json_encode($aDataset).'); - // Create a DataSet (allows two way data-binding) - var items = new vis.DataSet('.json_encode($aDataset).'); + // Configuration for the Timeline + var options = { + zoomMin: 1000 * 60 * 60, // an hour + zoomMax: 1000 * 60 * 60 * 24 * 14 // 2 weeks + }; - // Configuration for the Timeline - var options = {}; + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + + // fix: some timelines do not properly wirk ... but I make them visible + $(\'#'.$sDivId.' .vis-timeline\').css(\'visibility\', \'visible\'); + </script> + ' : '(kein Graph)<br>') + .' - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); - </script> - <!-- ENDE '.__METHOD__.'--> '; + $this->_writeCacheData($sTaskId, $sHtml); - return $sHtml; + return '' + .$sHtml + // . strlen($sHtml).' byte - ' . '<pre>'.htmlentities($sHtml).'</pre><br>' + ; } public function renderJobGraphOfAllServers(){ @@ -331,8 +387,9 @@ class cronlogrenderer extends cronlog{ * @return string */ public function renderLogfile($sLogfile){ - $sHtml='<link rel="stylesheet" type="text/css" href="main.css"><h3>Logfile '.basename($sLogfile).'</h3>' - . '<button onclick="showFileBack();">back</button><br><br>' + $sHtml='' + . '<button style="position: fixed;" onclick="closeOverlay();"><i class="fas fa-chevron-left"></i> back</button><br><br>' + . '<h3>Logfile '.basename($sLogfile).'</h3>' ; if(!$sLogfile){ return $sHtml . 'ERROR: empty filename for log file was given.'; @@ -340,14 +397,15 @@ class cronlogrenderer extends cronlog{ if(strstr($sLogfile, '..')){ return $sHtml . 'ERROR: wrong log file chars [..] are not allowed.'; } - $sMyFile=$this->_getServerlogDir().'/'.$sLogfile; + // $sMyFile=$this->_getServerlogDir().'/'.$sLogfile; + $sMyFile=$this->_sDataDir.'/'.$sLogfile; if(!file_exists($sMyFile)){ - return $sHtml . 'ERROR: The requested logfile ['.$sMyFile.'] does not exist (anymore).'; + return $sHtml . 'ERROR: The requested logfile<br>['.$sMyFile.']<br>does not exist (anymore).'; } if ($fileHandle = fopen($sMyFile, "r")) { - $sHtml.='<div style="float: left;" onclick="showFileBack();" title="Klick=zurück"><pre>'; + $sHtml.='<div style="float: left;"><pre>'; while (($line = fgets($fileHandle)) !== false) { # do same stuff with the $line $bIsComment=strstr($line, 'REM '); @@ -384,7 +442,7 @@ class cronlogrenderer extends cronlog{ public function renderServerlist($sSelectedItem=false){ $sHtml=''; $sHtml.='<option value="ALL"' - .($sSelectedItem===false ? ' selected="selected"' : '') + .($sSelectedItem===false || $sSelectedItem==='ALL' ? ' selected="selected"' : '') . '>[ALLE]</option>'; foreach($this->getServers() as $sServer=>$aData){ $sHtml.='<option value="'.$sServer.'"' diff --git a/classes/cronlog.class.php b/classes/cronlog.class.php index 1b67e8f..4ab2bb9 100644 --- a/classes/cronlog.class.php +++ b/classes/cronlog.class.php @@ -26,6 +26,9 @@ class cronlog { public function __construct() { + if (file_exists(__DIR__.'/cronlog_cfg.php')){ + include(__DIR__.'/cronlog_cfg.php'); + } $this->_sDataDir = str_replace("__DIR__", dirname(dirname(__FILE__)), $this->_sDataDir); $this->_sDataDir = str_replace('\\', '/', $this->_sDataDir); @@ -109,8 +112,8 @@ class cronlog { $this->_aServers=array(); // echo "DEBUG DATADIR: " . $this->_sDataDir."<br>"; if (!is_dir($this->_sDataDir)){ - echo "HINWEIS: leer ... oder es existiert nicht.<br>"; - return false; + echo "WARNING: no data. variable _sDataDir is wrong (or somehting is not mounted).<br>"; + die(); } if ($handle = opendir($this->_sDataDir)) { @@ -122,6 +125,7 @@ class cronlog { } closedir($handle); } + ksort($this->_aServers); return $this->_aServers; } diff --git a/classes/cronlog_cfg.php b/classes/cronlog_cfg.php new file mode 100644 index 0000000..38713f1 --- /dev/null +++ b/classes/cronlog_cfg.php @@ -0,0 +1,6 @@ +<?php +$sLithiumDir='/var/www/cronlogs'; + +if(is_dir($sLithiumDir)){ + $this->_sDataDir = $sLithiumDir; +} \ No newline at end of file diff --git a/get.php b/get.php index d0c7dac..46babda 100644 --- a/get.php +++ b/get.php @@ -20,7 +20,7 @@ if($sServer){ $oCL->setServer($sServer); } switch ($sItem){ - case 'crontable': + case 'cronhistory': if($sServer==='ALL'){ $sHtml.=$oCL->renderJoblistOfAllServers(); } else { diff --git a/index.html b/index.html index 867dcfa..9581b9a 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,8 @@ <!doctype html> -<html> +<html lang="de"> <head> + <meta charset="utf-8" /> + <meta http-equiv="Pragma" content="no-cache"> <title>Cronjob-Viewer</title> <script type="text/javascript" src="vendor/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="js/functions.js"></script> @@ -15,11 +17,9 @@ <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> - <div id="errorlog"> - - </div> - <span style="float: right">Coded by Axel :-)</span> - <h1><span class="imllogo"></span> CronjobViewer</h1> + <div id="errorlog"></div> + <span style="float: right">Coded by Axel in 2018 :-)</span> + <h1><a href="?"><span class="imllogo"></span> CronjobViewer</a></h1> <nav class="servers"> <div id="selectserver" class="active">...</div> </nav> @@ -28,18 +28,24 @@ <h2 id="lblServername">Server wählen...</h2> <nav class="tabs"> - <a href="#cronlogs" onclick="setTab(this); return false;" class="active"><i class="far fa-file-alt"></i> Logs</a> - <a href="#crontable" onclick="setTab(this); return false;"><i class="fas fa-history"></i> History</a> - <a href="#graph" onclick="setTab(this); return false;"><i class="far fa-chart-bar"></i> Timeline</a> + <a href="#cronlogs" onclick="setTab(this); return false;" class="active"><i class="far fa-file-alt"></i> Logs</a> + <a href="#cronhistory" onclick="setTab(this); return false;"><i class="fas fa-history"></i> History</a> + <a href="#graph" onclick="setTab(this); return false;"><i class="far fa-chart-bar"></i> Timeline</a> - </nav><br><br><br> + </nav><br><br> + <!-- <button onclick="refreshPage(); return false;"><i class="fas fa-sync"></i> Reload</button> + --> + <div id="tabcontent"> - <div id="cronlogs" class="active"></div> - <div id="crontable"></div> - <div id="graph"></div> + <div id="cronlogs" class="active">Moment ...</div> + <div id="cronhistory">Moment ...</div> + <div id="graph">Moment ...</div> </div> </div> + <div id="overlay" ondblclick="closeOverlay();"> + <div id="showlog" class="active">Moment ...</div> + </div> </body></html> \ No newline at end of file diff --git a/js/functions.js b/js/functions.js index 9709103..227b15e 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1,68 +1,78 @@ -var sSELECTEDSERVER=''; -var sACTIVESERVERTAB='cronlogs'; -var bSETADDRESSBAR=false; +var sSELECTEDSERVER = ''; +var sACTIVESERVERTAB = 'cronlogs'; +var bSETADDRESSBAR = false; +var bDEBUG=0; +/** + * show log on console ... if bDEBUG is true + * @param {string} sMessage + * @returns {undefined} + */ +function clog(sMessage){ + if(bDEBUG){ + console.log("--- DEBUG: "+sMessage); + } +} /** * get query parameters from url as object * @returns {object} */ function getQueryParams() { - qs = document.location.search.split('+').join(' '); - + var qs = document.location.search.split('+').join(' '); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; - while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } - return params; } /** * make an ajax-request and put response content into given div id - * @param {string} id id of the div to be filled + * @param {string} id id of the div to be filled + * @param {type} sMoreData more data for get param * @returns {undefined} */ -function getPageItem(id, sData) { - // $('#'+id).html('reading ...'); - if(!$('#'+id).hasClass('active')){ - $('#errorlog').html('#'+id+' is not active') ; - return false; - } - var phpscript='get.php'; - $('#'+id).css('opacity', '0.2'); - - if(!sData){ - sData='item='+id+'&server='+sSELECTEDSERVER; - } +function getPageItem(id, sMoreData, bNoAdressbarUpdate) { + clog("getPageItem('"+id+"', '"+sMoreData+"')"); + // $('#'+id).html('reading ...'); + if (!$('#' + id).hasClass('active')) { + $('#errorlog').html('#' + id + ' is not active'); + return false; + } + var phpscript = 'get.php'; + $('#' + id).css('opacity', '0.2'); + + sData = 'item=' + id + '&server=' + sSELECTEDSERVER + (sMoreData ? '&'+sMoreData : ''); + if(!bNoAdressbarUpdate){ setAdressbar(); - jQuery.ajax({ - url: phpscript, - data: sData, - type: "GET", - success:function(data){ - $('#'+id).css('opacity', '1'); - $('#'+id).html(data); - }, - error:function(){ - $('#'+id).css('opacity', false); - $('#'+id).html('Failed :-/'); - $('#errorlog').html( - $('#errorlog').html('AJAX error: <a href="'+phpscript+'?' + sData+'">'+phpscript+'?' + sData+'</a>') + } + jQuery.ajax({ + url: phpscript, + data: sData, + type: "GET", + success: function (data) { + $('#' + id).css('opacity', '1'); + $('#' + id).html(data); + }, + error: function () { + $('#' + id).css('opacity', false); + $('#' + id).html('Failed :-/'); + $('#errorlog').html( + $('#errorlog').html('AJAX error: <a href="' + phpscript + '?' + sData + '">' + phpscript + '?' + sData + '</a>') ); - } - }); + } + }); } /** * refresh content with ajax requests * @returns {undefined} */ -function refreshPage(){ +function refreshPage() { getPageItem('selectserver'); getPageItem(sACTIVESERVERTAB); } @@ -73,70 +83,92 @@ function refreshPage(){ * @returns {undefined} */ function setAdressbar() { - // console.log("--- setAdressbar()"); console.log(aViewFilters); // ?server=neon&tab=graph&q=backup - if(!bSETADDRESSBAR){ + if (!bSETADDRESSBAR) { return false; } var url = '?' - + 'server=' + sSELECTEDSERVER - + '&tab=' + sACTIVESERVERTAB - + '&q=' // + $('#datatable1_filter label input').val()+$('#datatable2_filter label input').val() - ; + + 'server=' + sSELECTEDSERVER + + '&tab=' + sACTIVESERVERTAB + + '&q=' // + $('#datatable1_filter label input').val()+$('#datatable2_filter label input').val() + ; window.history.pushState('dummy', 'Title', url); + // window.location.reload(); } /** - * set server (show its navigation) + * set server and show show its current content item (log, graph, ...) * this action is used after clicking a servername in the navigation * * @param {string} sServer * @returns {undefined} */ -function setServer(sServer){ - if(!sServer){ +function setServer(sServer) { + clog("setServer('"+sServer+"')"); + if (!sServer) { return false; } - sSELECTEDSERVER=sServer; - $('#lblServername').html('<i class="far fa-hdd"></i> '+sSELECTEDSERVER); + sSELECTEDSERVER = sServer; + + // write name + $('#lblServername').html('<i class="far fa-hdd"></i> ' + sSELECTEDSERVER); + + // load current content item getPageItem(sACTIVESERVERTAB); } /** * onclick callback for tabs crontable, crontabs, graph - * @param {object} oLink clicked link + * @param {object} oLink clicked link + * @param {string} sTabid id of active div * @returns {undefined} */ -function setTab(oLink){ - sTabid=$(oLink).attr('href').replace(/^#/, ''); - sACTIVESERVERTAB=sTabid; +function setTab(oLink,sTabid) { + var sTabid = $(oLink).attr('href').replace(/^#/, ''); - $('nav.tabs a').each(function(){ + $('nav.tabs a').each(function () { $(this).removeClass('active'); }); $(oLink).addClass('active'); - $('#tabcontent div').each(function(){ + setTabId(sTabid); + setServer(sSELECTEDSERVER); +} + +/** + * activate a div to get content via AJAX + * + * @param {string} sTabid + * @returns {undefined} + */ +function setTabId(sTabid){ + clog("setTabId('"+sTabid+"')"); + sACTIVESERVERTAB = sTabid; + $('#tabcontent div').each(function () { $(this).removeClass('active'); + // $(this).html('Moment...'); }); - $('#'+sTabid).addClass('active'); + $('#' + sTabid).addClass('active'); - setServer(sSELECTEDSERVER); + // setServer(sSELECTEDSERVER); } -function showFile(sLogfile){ - getPageItem(sACTIVESERVERTAB, 'item=showlog&logfile='+sLogfile); +function showFile(sLogfile) { + clog("showFile('"+sLogfile+"')"); + $('#overlay').show(); + sLOGFILE=sLogfile; + getPageItem('showlog', 'logfile=' + sLOGFILE, true); } -function showFileBack(){ - getPageItem(sACTIVESERVERTAB); +function closeOverlay() { + $('#overlay').fadeOut(300); } -function updateFilterFields(q){ - if($('#datatable1_filter label input')){ - $('#datatable1_filter label input').val(q); +function updateFilterFields(q) { + if ($('#datatable1_filter label input')) { + $('#datatable1_filter label input').val(q); $('#datatable1').dataTable().fnFilter(q); // $('#datatable1').dataTable().bind('filter', 'setAdressbar()'); } - if($('#datatable2_filter label input')){ - $('#datatable2_filter label input').val(q); + if ($('#datatable2_filter label input')) { + $('#datatable2_filter label input').val(q); $('#datatable2').dataTable().fnFilter(q); // $('#datatable1').dataTable().bind('filter', 'setAdressbar()'); } @@ -147,30 +179,31 @@ function updateFilterFields(q){ // MAIN // ---------------------------------------------------------------------- -$(document).ready( function () { - - // draw navigation with servers - - // check query params and set filter - // ?server=neon&tab=crontable&q=123 +$(document).ready(function () { - var oQuery=getQueryParams(); - var sServer=oQuery.server ? oQuery.server : 'ALL'; - var q=oQuery.q ? oQuery.q : ''; - var sTab=oQuery.tab ? oQuery.tab : ''; + var oQuery = getQueryParams(); + var sServer = oQuery.server ? oQuery.server : 'ALL'; + var q = oQuery.q ? oQuery.q : ''; + var sTab = oQuery.tab ? oQuery.tab : ''; setServer(sServer); getPageItem('selectserver'); - if(sTab){ - var oLink=$('a[href="#'+sTab+'"]').first(); + if (sTab) { + var oLink = $('a[href="#' + sTab + '"]').first(); setTab(oLink); } - console.log('suchfield ' + q); if (q) { - // window.setTimeout("$('#datatable1_filter label input').val('"+q+"'); $('#datatable1').dataTable().fnFilter('"+q+"')" , 500); - window.setTimeout("updateFilterFields('"+q+"');" , 500); + window.setTimeout("updateFilterFields('" + q + "');", 500); } - bSETADDRESSBAR=true; - // window.setInterval('refreshPage()', 60000); -}); \ No newline at end of file + bSETADDRESSBAR = true; + window.setInterval('refreshPage()', 60000); +}); + +/* +window.onpopstate = function(event) +{ + history.back(); + refreshPage(); +}; +*/ \ No newline at end of file diff --git a/main.css b/main.css index b032e02..a4d8d20 100644 --- a/main.css +++ b/main.css @@ -1,8 +1,3 @@ -/* -To change this license header, choose License Headers in Project Properties. -To change this template file, choose Tools | Templates -and open the template in the editor. -*/ /* Created on : 19.09.2018, 09:10:07 Author : hahn @@ -11,14 +6,17 @@ and open the template in the editor. a {color: #38a;text-decoration: none;} a:hover {text-decoration: underline;} body{background:#fff; color:#456; font-family: verdana,arial; font-size:1.0em;} -button{background:#468; border: none; color:#fff; padding: 0.5em 1em; border-radius: 0.3em; border: 1px solid rgba(0,0,0,0.1)} +button{background:#46a; border: none; color:#fff; padding: 0.5em 1em; border-radius: 0.3em; border: 2px solid rgba(0,0,0,0.1); box-shadow: 0.2em 0.2em 0.5em #aaa;} button.add{background:#8c8;} button.del{background:#c88;} -button:hover{background:#cde; color:#000;} +button:hover{background:#68c;} +button:active{box-shadow: none; } footer{background: rgba(0,60,60,0.05); border-top: 1px solid #ccc; padding: 1em; margin-top: 5em;} footer a{color:#678;} +h1{border-bottom: 0px solid ;} +h1 a:hover{text-decoration: none;} i.fa{font-size: 150%; } i.fa.lookup{font-size: 100%; opacity: 0.4;} @@ -31,6 +29,7 @@ nav.tabs a.active{background: #cdd; border-color: rgb(255,0,51);; } option{font-family: verdana,arial; font-size:1.0em; } select{border: 0;} +p.hint{margin-bottom: 1em; background:#fec; padding: 1em; } table{border: 1px solid #ccc;} tr:hover{background:#eee;} th{background:#cdd; padding:0.5em;} @@ -39,9 +38,12 @@ td{padding:0.3em;} .imllogo:before {background: rgb(255,0,51);color: #fff;padding: 0.5em 0.3em;content: 'IML'; font-family: "arial"; text-shadow: none;} /* ----- tabbed content */ -#crontable,#cronlogs,#graph{display: none;} +#cronhistory,#cronlogs,#graph,#overlay{display: none;} #tabcontent div.active{display: block;} +#overlay{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.4); top:0; left: 0;} +#showlog{background:#fff; border: 3px solid #888; padding: 1em; margin: 2%; height: 90%; overflow: scroll;} + .log-rem{color:#aaa; font-style: italic;} .log-var{color:#088;} .log-value{color:#008;} -- GitLab