diff --git a/.gitignore b/.gitignore
index c33037ff0b64c419744354d087e6b9345bffe1bb..e18140b1c371feed6451cd61b1cd58a71c8e8f8c 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 05c350d36b57b792e5e7ee188de2876a92c649b9..01020cea1ce187cf47b4f82bef9070bbc7a53f98 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 1b67e8fb198a075767019efbfaa74f645b059941..4ab2bb92d17dfc04d102f44e98ba9c6df9a90ef8 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 0000000000000000000000000000000000000000..38713f1cd57d73e8951652c3517294e01525925d
--- /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 d0c7dac24f0bbd90e86a492ca4336a0bdb3bfc40..46babda1be671c4495e5cdc891999d464aba8c51 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 867dcfa7029364b7f82a7e16728863b5b9457b5a..9581b9a049f3e80440f0f68bbff7dfd3c1f69826 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 97091033cb390e09b0600102d87523f5123e31b7..227b15ee493ed37eb89682cc999e574149eb3c33 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 b032e025a8b0694759b0e8f11b7b9c2b41875d6a..a4d8d201a5cc476a4c4bbdc70497898882d36049 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;}