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

update to use pretty print api urls

parent 07f5a365
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
public_html/index.html
+ 8
− 3
View file @ 856798e3
......@@ -10,11 +10,16 @@
<body>
<header>
<h1>📋 Dashboard</h1>
<h1>📋 Appmonitor dashboard</h1>
</header>
<section id="app-section"><h2>📦 fetching...</h2></section>
<section id="msg-section"><h2>🛎️ fetching...</h2></section>
<section id="tag-section"><h2>🕛 fetching...</h2></section>
<section id="app-section"><h2>🕛 fetching...</h2></section>
<!--
<section id="msg-section"><h2>🛎️ Messages (coming soon)</h2></section>
-->
<br><br><br><br>
<footer>
POC :: &copy; IML 2022
......
public_html/javascript/functions.js
+ 160
− 13
View file @ 856798e3
......@@ -15,28 +15,162 @@ const AM_RESULTS={
3: 'error'
};
const OUT_ID_APPS='app-section';
const OUT_ID_TAGS='tag-section';
const ID_TAGINPUT='E_TAGS';
// ----------------------------------------------------------------------
// VARS
// ----------------------------------------------------------------------
var AM_TAGURL=false;
// ----------------------------------------------------------------------
// FUNCTIONS
// ----------------------------------------------------------------------
/**
* get url to fetch the tags
* @returns string
*/
function _getUrlForTags(){
return AM_SERVER_URL+'/v1/apps/tags';
}
/**
* get url to fetch all applications with given tags
* @param {string} tags list of tags - separated by comma
* @returns
*/
function _getUrlWithTags(tags){
return AM_SERVER_URL+'/v1/apps/tags/'+tags+'/all';
}
/**
* helper: get a table row with data of an application
* @param {string} sLabel
* @param {string} sText
* @returns string
*/
function _appItem(sLabel,sText){
return '<tr><td>'+sLabel+'&nbsp;&nbsp;</td><td>'+sText+'</td></tr>'
}
function _getSingleAppStatus(sData){
/**
* helper: get a 2 digit count
* @param {int} i
* @returns
*/
function _2digits(i){
return i<10 ? "0"+i : i;
}
// ----------------------------------------------------------------------
// FUNCTIONS :: TAGS
// ----------------------------------------------------------------------
function tagAdd(tagname){
var o=document.getElementById(ID_TAGINPUT);
o.value+=(o.value ? "," : "") +tagname;
getAppstatus();
}
function tagClear(){
var o=document.getElementById(ID_TAGINPUT);
o.value="";
getAppstatus();
}
/**
* called from getTags
* @param {string} sData JSOM Response
* @returns
*/
function _getTaglist(sData){
var sReturn='';
var sTags='';
let aData=JSON.parse(sData);
sReturn+='<input id="'+ID_TAGINPUT+'" type="text" size="50" value="'+AM_TAGS+'"'
+' onchange="getAppstatus()"'
+' onkeypress="getAppstatus()"'
+' onkeydown="getAppstatus()"'
+' onkeyup="getAppstatus()"'
+'>'
+'<button onclick="tagClear();return false;"> ❌ </button><br><br>'
;
for (var s in aData['tags']){
sTags+=(sTags ? ",": "") + aData['tags'][s];
sReturn+='<button onclick="tagAdd(\''+aData['tags'][s]+'\'); return false;">'+aData['tags'][s]+'</button>'
}
return sReturn;
}
/**
* fetch appmonitor api - taglist
* called from getAppstatus
*/
async function getTags(){
let out = '<h2>🏷️ Tags</h2>';
AM_TAGURL=_getUrlForTags();
let response = await fetch(AM_TAGURL);
if (response.ok) {
out+=_getTaglist(await response.text());
} else {
out+='<div class="app result1">'
+'ERROR '+response.status+': '+response.statusText + ' - '
+AM_TAGURL
+'</div>';
}
o=document.getElementById(OUT_ID_TAGS);
o.innerHTML=out;
}
// ----------------------------------------------------------------------
// FUNCTIONS :: APPS
// ----------------------------------------------------------------------
/**
* loop over apps and render results as html
* @param {string} sData response body from api request (JSON string)
* @returns string
*/
function _getAllAppsStatus(sData){
var sReturn="";
var oDate=new Date;
sReturn+=''
+'<h3>Tags: ' + tags + '</h3>'
+ '<p>'
+_2digits(oDate.getHours())
+':'+_2digits(oDate.getMinutes())
+':'+_2digits(oDate.getSeconds())
+' (update every '+REFRESHTIME+' sec)'
+'</p>';
let aAllData=JSON.parse(sData);
for (var key in aAllData){
sReturn+=_getSingleAppStatus(aAllData[key]);
}
return sReturn;
}
/**
* render application status of a single application as html
* @param {array} aData monitoring data from appmonitor api
* @returns string
*/
function _getSingleAppStatus(aData){
// let aData=JSON.parse(sData);
// DEBUG
console.log(aData);
// console.log(aData);
// ------ checks
let sChecks='';
......@@ -55,6 +189,7 @@ function _getSingleAppStatus(sData){
let sReturn='<div class="app result'+ aData.meta.result +'">'
+'<div class="title" onclick="$(this).next().toggle()">'
+'<span class="float-right">'+AM_RESULTS[aData.meta.result]+'</span>'
+'<span class="float-right url">'+aData.result.url+'</span>'
+aData.meta.website
+'</div>'
;
......@@ -79,23 +214,35 @@ function _getSingleAppStatus(sData){
return sReturn;
}
/**
* fetch appmonitor api - status of apps
*/
async function getAppstatus(){
let out = '<h2>📦 Applications</h2>';
if(!AM_TAGURL){
getTags();
}
for (var i=0; i<AM_URLS.length; i++){
var o=document.getElementById(ID_TAGINPUT);
tags=o ? o.value : AM_TAGS;
let out = '<h2>📦 Applications</h2>';
// for (var i=0; i<AM_TAGS.length; i++){
let response = await fetch(AM_SERVER_URL + AM_URLS[i]);
// let apiurl=_getUrlWithTags(AM_TAGS[i])
let apiurl=_getUrlWithTags(tags)
let response = await fetch(apiurl);
if (response.ok) {
out+=_getSingleAppStatus(await response.text());
out+=_getAllAppsStatus(await response.text());
} else {
out+='<div class="app result1">ERROR: '
+AM_SERVER_URL + AM_URLS[i]
out+='<div class="app result1">'
+'ERROR '+response.status+': '+response.statusText + ' - '
+apiurl
+'</div>';
}
}
// }
o=document.getElementById(OUT_ID_APPS);
o.innerHTML=out;
window.setTimeout("getAppstatus()", REFRESHTIME*1000);
}
......@@ -104,7 +251,7 @@ async function getAppstatus(){
// ----------------------------------------------------------------------
window.setTimeout("getAppstatus()", 300);
window.setTimeout("getAppstatus()", 500);
// ----------------------------------------------------------------------
public_html/javascript/inc_config.js.dist 0 → 100644
+ 3
− 0
View file @ 856798e3
const AM_SERVER_URL='https://appmonitor.example.com/api';
const AM_TAGS='live,myapp';
const REFRESHTIME=30; // in sec
public_html/main.css
+ 13
− 6
View file @ 856798e3
......@@ -3,7 +3,7 @@
:root{
--color-0: #345;
--color-h1: #c54;
--color-h2: #567;
--color-h2: #569;
--color-links: #8ae;
--color-result-0:
......@@ -13,27 +13,33 @@
a{color: var(--color-links);}
body{
font-size: 1em;
margin: 1em;
color: var(--color-0);
background: var(--bg-0);
font-family: verdana,arial;
}
button{ border:1px solid #ccc; background: linear-gradient(#f8f8f8, #eee); border-radius: 0.3em; margin: 0 0.5em 0.5em 0; padding: 0.5em;}
button:hover{ background: linear-gradient(#eee, #ddd); border-radius: 0.3em; margin: 0 0.5em 0.5em 0; padding: 0.5em;}
button:active{ border:1px solid #fc2;}
input{ border:1px solid #ccc; padding: 0.4em;}
footer{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 1em; background: #eee; text-align: center;}
h1{color: var(--color-h1)}
h2{color: var(--color-h2)}
h2{color: var(--color-h2); margin-left: -1em;}
section{
margin: 1em 0;
padding: 0.2em;
border-top: 2px solid #eee;
margin: 2em 0;
padding: 0.2em 2em;
border-top: 0px solid #abc;
border-radius: 1em;
}
td{vertical-align: top;}
.app{
margin: 1em;
margin: 1em 0;
border: 2px solid;
border-radius: 0.3em;
padding: 1em;
......@@ -43,6 +49,7 @@ td{vertical-align: top;}
.app .title{font-weight: bold; font-size: 130%; cursor: pointer;}
.app .url{font-size: 80%; font-weight: normal; margin-right: 2em;}
.app .details{display: none;}
.result0{background:#dfd !important; background: linear-gradient(#dfd,#beb)!important; color:#080}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment