Skip to content
Snippets Groups Projects
Commit 9f016da6 authored by Hahn Axel (hahn)'s avatar Hahn Axel (hahn)
Browse files

added support of multiple instances

parent 96a8429d
Branches
No related tags found
1 merge request!4added support of multiple instances
Show whitespace changes
Inline Side-by-side
README.md
+ 16
− 3
View file @ 9f016da6
......@@ -21,14 +21,27 @@ Extract the archive (or use git pull).
We need to setup the url for the api of the IML Appmonitor instance. In `public_html/javascript` copy the dist file inc_config.js.dist to inc_config.js
Replace values in AM_SERVER_URL and AM_TAGS with your real data:
Replace values in the first object in the AM_INSTANCES array with your real data:
```js
const AM_SERVER_URL='https://appmonitor.example.com/api';
const AM_TAGS='live,myapp';
/**
* you can add multiple instances of appmonitor servers
*/
const AM_INSTANCES=[
{
'label': 'local Docker',
'url': 'http://localhost:8001',
'tags': 'monitoring',
'user': 'api',
'password': 'hello'
}
];
const REFRESHTIME=30; // in sec
```
You can multiple instances of appmonitor servers with creating an additional object here. You get a select box to switch between them.
Open the file `public_html/index.html` in your webbrowser.
## Troubleshooting ##
......
public_html/javascript/functions.js
+ 73
− 38
View file @ 9f016da6
......@@ -24,7 +24,7 @@ const OUT_ID_MAIN='header-section';
const OUT_ID_APPS='app-section';
const OUT_ID_TAGS='tag-section';
const ID_TAGINPUT='E_TAGS';
const ID_DELTAGS='button-disable-all-tags';
// callback object after changing a tag filter
const FILTER_CALLBACK="oUbdApps.update()";
......@@ -48,8 +48,8 @@ var AM_TAGLIST={};
*/
function _getAMApiUrl(sPath){
return AM_PRETTYURL
? AM_SERVER_URL+sPath
: AM_SERVER_URL+'/index.php?request='+sPath
? AM_SERVER_URL+'/api'+sPath
: AM_SERVER_URL+'/api/index.php?request='+sPath
;
}
......@@ -119,6 +119,7 @@ function _2digits(i){
}
if(sLast!==sReturn){
document.getElementById(ID_TAGINPUT).value=sReturn;
document.getElementById(ID_DELTAGS).style.display=sReturn ? 'inline' : 'none';
eval(FILTER_CALLBACK);
}
}
......@@ -156,7 +157,7 @@ function _renderTaglist(aData){
: ''
);
}
sReturn+='<button onclick="cbTagToggle(true);return false;"> ❌ </button>'
sReturn+='<button id="'+ID_DELTAGS+'" onclick="cbTagToggle(true);return false;"> '+AM_ICONS['delete']+' </button>'
// sReturn+='<input id="'+ID_TAGINPUT+'" type="text" size="20" value="'+AM_TAGS+'"'+'>'
sReturn+='<input id="'+ID_TAGINPUT+'" type="hidden" size="20" value="'+AM_TAGS+'">'
AM_TAGLIST=_TAGLIST;
......@@ -187,9 +188,11 @@ function _getAllAppsStatus(aAllData){
+' (update every '+REFRESHTIME+' sec)'
// +'</p>';
// let aAllData=JSON.parse(sData);
var appOut='';
for (var key in aAllData){
sReturn+=_getSingleAppStatus(aAllData[key]);
appOut+=_getSingleAppStatus(aAllData[key]);
}
sReturn+=appOut ? appOut : '<div class="app result2">NO DATA.<br>No application matches this combination of tags.</div>';
return sReturn;
}
......@@ -262,19 +265,30 @@ function _getSingleAppStatus(aData){
}
// ----------------------------------------------------------------------
// MAIN
// init instance
// ----------------------------------------------------------------------
/**
* set a appmonitor instance that are defined in AM_INSTANCES
* see inc_config.js
*
* @param {integer} i number of instance to activate
*/
function initInstance(i){
AM_SERVER_URL=AM_INSTANCES[i]['url'];
AM_TAGS=AM_INSTANCES[i]['tags'];
AM_USER=AM_INSTANCES[i]['user'];
AM_PASSWORD=AM_INSTANCES[i]['password'];
// for auth header with basic auth
let oHeaders=(AM_USER)
? { "Authorization": "Basic " + btoa(AM_USER + ":" + AM_PASSWORD) }
: {}
;
document.getElementById(OUT_ID_MAIN).innerHTML=''+AM_ICONS['connect']+' Connected instance <a href="'+AM_SERVER_URL+'">'+AM_SERVER_URL+'</a>';
// initialize tags
var oUbdTag=new ubd(
oUbdTag=new ubd(
{
'domid': OUT_ID_TAGS,
'url': _getUrlForTags(),
......@@ -285,7 +299,7 @@ var oUbdTag=new ubd(
);
// initialize visible apps
var oUbdApps=new ubd(
oUbdApps=new ubd(
{
'domid': OUT_ID_APPS,
'url': _getUrlWithTags, // remark: this is a function
......@@ -296,10 +310,31 @@ var oUbdApps=new ubd(
);
let sInstances='';
for (var j=0; j<AM_INSTANCES.length; j++){
sInstances+='<option value="'+j+'" '
+(i==j ? 'selected ' : '')
+ '>'+AM_INSTANCES[j]['label']+'</option>';
}
sInstances=sInstances
? AM_ICONS['connect']+' Connected instance '
+ '<select onchange="initInstance(this.value); return false;">'+sInstances+'</select> '
+ ' <a href="'+AM_SERVER_URL+'">'+AM_SERVER_URL+'</a>'
: '';
document.getElementById(OUT_ID_MAIN).innerHTML= sInstances;
// fill in initial values ... and update based on given ttl
oUbdTag.update();
oUbdApps.update();
window.setTimeout("oUbdTag.update();", 50);
window.setTimeout("oUbdApps.update();", 400);
}
// ----------------------------------------------------------------------
// MAIN
// ----------------------------------------------------------------------
initInstance(0);
// ----------------------------------------------------------------------
\ No newline at end of file
public_html/javascript/inc_config.js.dist
+ 13
− 7
View file @ 9f016da6
const AM_SERVER_URL='https://appmonitor.example.com/api';
const AM_TAGS='live,myapp';
// optional: BASIC AUTH
const AM_USER='';
const AM_PASSWORD='';
/**
* you can add multiple instances of appmonitor servers
*/
const AM_INSTANCES=[
{
'label': 'local Docker',
'url': 'http://localhost:8001',
'tags': 'monitoring',
'user': 'api',
'password': 'hello'
}
];
const REFRESHTIME=30; // in sec
\ No newline at end of file
public_html/javascript/ubd.class.js
+ 83
− 87
View file @ 9f016da6
......@@ -15,7 +15,22 @@
* ======================================================================
*/
var ubd = function(){
/**
* Url binded to a dom id
* @return class
*/
class ubd {
/**
* initialize data for a dom object
* @param {object} oConfig optional config object with those subkeys:
* domid - id of a dom object
* url - url to an api
* header - http request header data
* renderer - renderer function to visualize data
* ttl - ttl in sec (TODO)
* @returns {undefined}
*/
constructor(oConfig) {
this._sDomId = '';
this._oDomObject = false;
......@@ -28,17 +43,9 @@ var ubd = function(){
this._body = '';
/**
* initialize data for a dom object
* @parm {object} oConfig optional config object with those subkeys:
* domid - id of a dom object
* url - url to an api
* header - http request header data
* renderer - renderer function to visualize data
* ttl - ttl in sec (TODO)
* @returns {undefined}
*/
this.init = function(oConfig){
oConfig = arguments ? arguments[0] : false;
if (oConfig) {
if (oConfig['domid']) {
this.setDomid(oConfig['domid']);
......@@ -56,7 +63,7 @@ var ubd = function(){
this.setTtl(oConfig['ttl']);
}
}
},
}
// ----------------------------------------------------------------------
// public SETTER for properties
......@@ -66,7 +73,7 @@ var ubd = function(){
* set domid that will by updated
* @param {string} sDomid if of a domobject
*/
this.setDomid = function(sDomid){
setDomid(sDomid) {
if (document.getElementById(sDomid)) {
this._sDomId = sDomid;
this._oDomObject = document.getElementById(sDomid);
......@@ -75,54 +82,52 @@ var ubd = function(){
this._oDomObject = false;
console.error('ERROR: setDomid("' + sDomid + '") got an invalid string - this domid does not exist.');
}
},
}
/**
* set a rendering function that visualized data after a http request
* @param {string|function} oFunction reference to a function ... or false to disable rendering
*/
this.setRenderfunction = function(oFunction){
setRenderfunction (oFunction) {
this._sRenderfunction = oFunction;
},
}
/**
* Set time to live in seconds
* @param {int} iTTL
*/
this.setTtl = function(iTTL){
setTtl(iTTL) {
this._iTTL = iTTL / 1;
this.resetTimer();
},
}
/**
* set an url to be requested
* @param {string|function} sUrl static value or reference of a function
*/
this.setUrl = function(sUrl){
setUrl(sUrl) {
this._sUrl2Fetch = sUrl;
},
}
/**
* set header obejct for 2nd param in javascript fetch() function
* @param {object} oHeader
*/
this.setHeaders = function(oHeader){
setHeaders(oHeader) {
this._oHeader = oHeader;
},
}
/**
* helper: dump current object instance to console
*/
this.dumpme = function(){
dumpme() {
console.log('---------- DUMP ubd');
console.log(this);
console.log('---------- /DUMP ubd');
},
}
// ----------------------------------------------------------------------
// public ACTIONS
// ----------------------------------------------------------------------
/**
* show rendered html content into set domid using the render function.
* If no rendering function was set then the response will be written
......@@ -136,33 +141,33 @@ var ubd = function(){
*
* @param {string} sHtml optional: htmlcode of an error message
*/
this.render = function(sHtml) {
render(sHtml) {
let out = sHtml ? sHtml :
(this._sRenderfunction
? this._sRenderfunction(this._body)
: this._body
);
this._oDomObject.innerHTML = out;
},
}
/**
* reset timer to update the content in dom id after reaching TTL
* used in setTtl
*/
this.resetTimer = function(){
resetTimer() {
clearTimeout(this._oTimer);
// clearInterval(this._oTimer);
if (this._iTTL) {
let self = this;
self._oTimer=window.setTimeout( function(){ self.update() }, this._iTTL*1000);
self._oTimer = window.setTimeout(function () { self.update(); }, this._iTTL * 1000);
// self._oTimer=window.setInterval(self.update, this._iTTL*1000);
}
},
}
/**
* make http request and call the renderer
*/
this.update = async function(){
async update() {
let self = this;
let url = (typeof this._sUrl2Fetch == "function") ? this._sUrl2Fetch() : this._sUrl2Fetch;
console.log("update from url [" + url + "]");
......@@ -193,14 +198,5 @@ var ubd = function(){
this.resetTimer();
}
// ----------------------------------------------------------------------
// MAIN
// ----------------------------------------------------------------------
if (arguments) {
this.init(arguments[0]);
} else {
this.init();
}
\ No newline at end of file
};
\ No newline at end of file
public_html/main.css
+ 12
− 4
View file @ 9f016da6
:root{
--color-0: #345;
--color-h1: #abc;
--color-h1: #789;
--color-h2: #579;
--color-links: #349;
......@@ -19,8 +19,8 @@ body{
font-family: verdana,arial;
}
button{ border: 1px solid rgba(0,0,0,0.1); background: linear-gradient(#f8f8f8, #ddd); border-radius: 0.3em; margin: 0 0.5em 0.5em 0; padding: 0.5em;}
button:hover{ background: linear-gradient(#eee, #ccc); border-radius: 0.3em; margin: 0 0.5em 0.5em 0; padding: 0.5em;}
button{ border: 1px solid rgba(0,0,0,0.1); background: linear-gradient(#f8f8f8, #ddd); border-radius: 0.3em; margin: 0 0.5em 0; padding: 0.5em;}
button:hover{ background: linear-gradient(#eee, #ccc);}
button:active{ border:1px solid #fc2;}
input{ border:1px solid #ccc; padding: 0.4em;}
......@@ -52,7 +52,15 @@ section input[type=checkbox]:checked + label {
section input[type=checkbox]+ label:hover {
border-color: #89a;
}
select{
background: #fff;
border: 2px solid #f8f8f8;
color: var(--color-0);
font-size: 110%;
}
select:hover{
background: #fec;
}
td{vertical-align: top;}
#main{
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment