Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
Loading items

Target

Select target project
  • iml-open-source/appmonitor-dashboard
1 result
Select Git revision
Loading items
Show changes
Commits on Source (3)
...@@ -2,57 +2,10 @@ ...@@ -2,57 +2,10 @@
Demo of a custom Dashboard for IML Appmonitor using the API to fetch data. It works offline without a webserver using the Javascript fetch() function. Demo of a custom Dashboard for IML Appmonitor using the API to fetch data. It works offline without a webserver using the Javascript fetch() function.
The Dashboards reads the tags from the IML appmonitor. You can enable/ disable each existing tag. The application section shows the application status of matching apps. The view will be refreshed in the given interval. 👤 Author: Axel Hahn; Institute for Medical Education; University of Bern \
Author: Axel Hahn; Institute for Medical Education; University of Bern
📄 Source: <https://git-repo.iml.unibe.ch/iml-open-source/appmonitor-dashboard/> \ 📄 Source: <https://git-repo.iml.unibe.ch/iml-open-source/appmonitor-dashboard/> \
📜 License: GNU GPL 3.0 📜 License: GNU GPL 3.0 \
📗 Docs: <https://os-docs.iml.unibe.ch/appmonitor-dashboard/>
## Requirements ##
* an already running IML Appmonitor instance - <https://github.com/iml-it/appmonitor>
* Appmonitor API must allow access from your ip address in its config (api -> sourceips)
* Your application checks use tags
## Installation ##
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 the first object in the AM_INSTANCES array with your real data:
```js
/**
* 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 ##
* "no response" error \
--> Open the requested api url in the browser. Reasons why does it fail are:
* the base url in AM_SERVER_URL does not point to the api url
* your ip address is not whitelisted in the appmonitor api config. The api request with the browser identifies a non configured ip as a JSON message.
* Error 404
* no application matches the given tag or tag combination. Delete the tags with button [X] and try to start with a single tag.
## Screenshot ## ## Screenshot ##
......
## About the project
This is a demo of a custom Dashboard for IML Appmonitor using the API to fetch data. It works offline without a webserver using the Javascript fetch() function.
The Dashboards reads the tags from the IML appmonitor. You can enable/ disable each existing tag. The application section shows the application status of matching apps. The view will be refreshed in the given interval.
Related project:
* **IML Appmonitor**\
[Docs](https://os-docs.iml.unibe.ch/appmonitor/) |
[Source on Github](https://github.com/iml-it/appmonitor)
### Requirements
locally:
* just a webbrowser
somewhere in the network:
* an already running IML Appmonitor instance
* Appmonitor API must allow access from your ip address in its config (api -> sourceips)
* Your application clients use tags
### Screenshot
![Screenshot](/images/screenshot_main.png "Screenshot")
## Get sources
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
## Configure
Replace values in the first object in the AM_INSTANCES array with your real data:
```js
/**
* 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
* "no response" error \
--> Open the requested api url in the browser. Reasons why does it fail are:
* the base url in AM_SERVER_URL does not point to the api url
* your ip address is not whitelisted in the appmonitor api config. The api request with the browser identifies a non configured ip as a JSON message.
* Error 404
* no application matches the given tag or tag combination. Delete the tags with button [X] and try to start with a single tag.
<html>
<div class="hero">
<h2>IML Appmonitor Dashboard</h2>
Proof of concept client dashboard using appmonitor API
</div>
</html>
👤 Author: Axel Hahn; Institute for Medical Education; University of Bern \
📄 Source: <https://git-repo.iml.unibe.ch/iml-open-source/appmonitor-dashboard/> \
📜 License: GNU GPL 3.0 \
📗 Docs: <https://os-docs.iml.unibe.ch/appmonitor-dashboard/>
{ {
"title": "__PRODUCT__", "title": "IML Appmonitor Dashboard",
"author": "Axel Hahn", "author": "Axel Hahn",
"tagline": "__DESCRIPTION__", "tagline": "Proof of concept client dashboard using appmonitor API",
"ignore": { "ignore": {
"files": ["30_PHP-client/Plugins/Checks/_skeleton.md"], "files": ["30_PHP-client/Plugins/Checks/_skeleton.md"],
"folders": ["99_Not_Ready"] "folders": ["99_Not_Ready"]
...@@ -12,12 +12,13 @@ ...@@ -12,12 +12,13 @@
"date_modified": false, "date_modified": false,
"jump_buttons": true, "jump_buttons": true,
"edit_on_github_": "iml-it/__PROJECT__/tree/master/docs", "edit_on_github_": "iml-it/__PROJECT__/tree/master/docs",
"edit_on_": { "edit_on": {
"name": "Gitlab", "name": "Gitlab",
"basepath": "https://git-repo.iml.unibe.ch/iml-open-source/__PROJECT__/tree/master/docs" "basepath": "https://git-repo.iml.unibe.ch/iml-open-source/appmonitor-dashboard/tree/master/docs"
}, },
"links": { "links": {
"Git Repo": "__GITURL__" "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/appmonitor-dashboard",
"IML Opensource": "https://os-docs.iml.unibe.ch/"
}, },
"theme": "daux-blue", "theme": "daux-blue",
"search": true "search": true
......
/* /*
override css elements of daux.io blue theme
patch css elements of daux.io blue theme version 2022-11-30
version 2022-05-13
*/ */
/* ---------- vars ---------- */
:root { :root {
/* Axels Overrides */
/* background colors */ --color-text: #222;
--bg:none; --link-color: #822;
--bg-body: #fff; --brand-color: var(--color-secondary);
--bg-navlinkactive:#f4f4f4; --brand-background: var(--body-background);
--bg-navlinkactive: linear-gradient(-90deg,rgba(0,0,0,0), rgba(40,60,80,0.05) 30%); --hr-color: none;
--bg-pre:#f8f8f8; --search-field-background: none;
--bg-toc: #fff; --search-field-border-color: none;
--sidebar-background: var(--body-background);
/* foreground colors */ --sidebar-border-color: none;
--color: #234; --sidebar-link-active-background: #e8f4f6;
--navlinkactive:#f33; --sidebar-link-active-background: #eee;
--title: #aaa; /* Axels custom values */
--axel_bg-toc: var(--body-background);
--link:#12a; --axel_bg-toc-head: #f8f8f8;
--toclink:rgba(40,60,80,0.8); --axel_brand-background: none;
--axel_brand-pre-background: rgb(255, 0, 51);
--h1: rgba(40,60,80,0.8); ;
--h1-bottom: 1px solid rgba(40,60,80,0.1); --axel_brand-pre-background-hover: rgb(255, 0, 51);
--h2: #468; ;
--h3: #579; --axel_h1_header: none;
--axel_h1: #345;
--axel_h1-bg: none;
--axel_h1-bottom: 3px solid none;
--axel_h2: #156;
--axel_h2-bg: #f8fafb;
--axel_h2-bottom: 2px solid #467;
--axel_h2-hero-bottom: 2px solid #912;
--axel_h3: #278;
--axel_h3-bottom: 1px solid #ddd;
--axel_hero_bg: #f8f8f8;
--axel_nav-bg: #fcfcfc;
--axel_nav-buttomborder: #ddd;
--axel_pre-background: #f8f8f8;
--axel-th-background: #d0e0e8;
--axel-article-nav-border-top: 0px dotted #ddd;
} }
/* ---------- tags ---------- */ .dark {
/* Axels Overrides */
--color-text: #c0c0c0;
--link-color: #b44;
--brand-color: var(--color-text);
--brand-background: var(--body-background);
--hr-color: none;
--code-tag-background-color_: #bcc;
--search-field-background: none;
--search-field-border-color: none;
--sidebar-background: var(--body-background);
--sidebar-border-color: none;
--sidebar-link-active-background: #333;
/* Axels custom values */
--axel_bg-toc: var(--body-background);
--axel_bg-toc-head: #333;
--axel_brand-background: none;
--axel_brand-pre-background: rgb(255, 0, 51);
;
--axel_brand-pre-background-hover: rgb(255, 0, 51);
;
--axel_h1_header: none;
--axel_h1: #777;
--axel_h1-bg: none;
--axel_h1-bottom: none;
--axel_h2: #467;
--axel_h2-bg: #202020;
--axel_h2-bottom: 2px solid #256;
--axel_h2-hero-bottom: 2px solid #712;
--axel_h3: #589;
--axel_h3-bottom: 1px solid #333;
--axel_hero_bg: #242424;
--axel_nav-bg: #242424;
--axel_nav-buttomborder: #555;
--axel_pre-background: #bcc;
--axel-th-background: #203038;
--axel-article-nav-border-top: 0px dotted #234;
}
/* ---------- left side ---------- */
a.Brand::before { a.Brand::before {
background: rgb(255,0,51); background: var(--axel_brand-pre-background);
color: #fff; color: #fff;
font-family: arial; font-family: arial;
font-weight: bold; font-weight: bold;
padding: 0.5em 0.3em; padding: 0.5em 0.3em;
content: 'IML'; content: 'IML';
margin-right: 0.4em; margin-right: 0.4em;
float: left;
} }
body, *{color: var(--color);} a.Brand:hover::before {
body{background: var(--bg-body);} background: var(--axel_brand-pre-background-hover);
a{color: var(--link);}
a:hover{opacity: 0.7;}
h1>a{ color:var(--title);}
_h1:nth-child(1){position: fixed; background: var(--bg); box-shadow: 0 0 1em #ccc; padding: 0 1em}
h1:nth-child(1)>a{ color:var(--navlinkactive); }
.s-content h1{color: var(--h1); font-size: 200%; font-weight:bold; margin-top: 2em; border-bottom: var(--h1-bottom);}
.s-content h2{color: var(--h2); font-size: 160%; }
.s-content h3{color: var(--h3); font-size: 140%; }
.s-content h4{margin: 0; font-size: 100%; text-align: center; background-color: rgba(0,0,0,0.05);padding: 0.3em;}
.s-content pre{
background: var(--bg-pre);
} }
/* ---------- classes ---------- */ a.Brand {
background: var(--axel_brand-background);
.required{color:#a42;} font-size: 200%;
.optional{color:#888;} height: 4em;
}
/* ---------- page header: breadcrumb ---------- */
.Page__header {
border: none;
}
/* ----- top left */ .Page__header a {
.Brand, color: var(--axel_h1_header);
.Columns__left {
background: var(--bg);
border-right: 0px solid #e7e7e9;
color: var(--color);
} }
.Brand{font-size: 200%;
background_: linear-gradient(-10deg,#fff 50%, #ddd); .Page__header h1 {
background: var(--bg); font-size: 1.3em;
} }
.Columns__right__content {
background: var(--bg); /* ---------- page content ---------- */
.s-content {
padding-top: 1em;
} }
/* ----- Navi left */ .s-content h1 {
background: var(--axel_h1-bg);
color: var(--axel_h1);
font-size: 200%;
font-weight: bold;
margin-bottom: 2em;
margin-top: 2em;
border-bottom: var(--axel_h1-bottom);
}
.Nav a:hover{ .s-content h2 {
background: none; background: var(--axel_h2-bg);
color: var(--navlinkactive) !important; color: var(--axel_h2);
font-size: 180%;
font-weight: bold;
margin-top: 4em;
border-bottom: var(--axel_h2-bottom);
} }
.Nav__item--active { h1:first-of-type {
border-right_: 0.3em solid var(--navlinkactive); margin-top: 0em;
} }
.Nav__item--active > a{
background: var(--bg-navlinkactive); h2:first-of-type {
color: var(--navlinkactive); margin-top: 0em;
} }
.Nav .Nav .Nav__item--active a {
color: var(--navlinkactive); .s-content h3 {
background: var(--axel_h3-bg);
color: var(--axel_h3);
font-size: 150%;
font-weight: bold;
margin-top: 3em;
border-bottom: var(--axel_h3-bottom);
} }
.Nav .Nav .Nav__item a {
opacity: 1; .s-content h4 {
margin: 0;
font-size: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.05);
padding: 0.3em;
} }
.Nav__item--open > a {
background-color: var(--bg); .s-content pre {
background: var(--axel_pre-background);
} }
.Nav a[href*="__Welcome"]{ /* FIX smaller fnt size in tables */
background: url("/icons/house.png") no-repeat 10px 4px ; .s-content table {
padding-left: 40px; font-size: 1em;
} }
.Nav a[href*="__How_does_it_work"]{
background: url("/icons/light-bulb.png") no-repeat 10px 4px ; .s-content table th {
padding-left: 40px; background: var(--axel-th-background);
} }
.s-content h3 code {
border: none;
background: none;
}
article nav {
border-top: var(--axel-article-nav-border-top);
margin: 8em 0 5em;
}
.Pager li>a {
padding: 1em 2em;
}
/* ---------- classes ---------- */ /* ---------- classes ---------- */
.required {
color: #a42;
}
/* FIX smaller fnt size in tables */ .optional {
.s-content table { color: #888;
font-size: 1em;
} }
div.hero {
background: var(--axel_hero_bg);
border-radius: 2em;
padding: 5em 2em;
text-align: center;
margin-bottom: 1.5em;
}
div.hero h2 {
color: var(--color-text);
background: none;
border-bottom: var(--axel_h2-hero-bottom);
font-size: 300%;
margin: 0 0 2em;
}
/* TOC */ /* ---------- TOC ---------- */
@media(min-width:1700px) { @media(min-width:1700px) {
.TableOfContentsContainer { .TableOfContentsContainer {
position: fixed; position: fixed;
...@@ -140,37 +226,42 @@ h1:nth-child(1)>a{ color:var(--navlinkactive); } ...@@ -140,37 +226,42 @@ h1:nth-child(1)>a{ color:var(--navlinkactive); }
} }
.TableOfContentsContainer { .TableOfContentsContainer {
background-color: var(--axel_bg-toc);
padding: 0.5em;
}
.s-content .TableOfContentsContainer h4 {
background-color: var(--axel_bg-toc-head);
border-top-left-radius: 1em; border-top-left-radius: 1em;
background-color: var(--bg-toc); font-size: 1.1em;
border-left: 2px solid rgba(0,0,0,0.05); margin: 0;
padding: 0em; padding: 0;
} }
.TableOfContentsContainer__content {
border: none; .TableOfContentsContainer__content {
border-width: 1px;
font-size: 0.5em; font-size: 0.5em;
} }
ul.TableOfContents ul { ul.TableOfContents ul {
list-style-type: none; list-style-type: none;
padding-left: 1em; padding-left: 1em;
} }
.TableOfContentsContainer a{ color:var(--toclink);}
.TableOfContentsContainer__content > .TableOfContents > li + li { /* ----- Icons on links --- */
border-top: none;
} .EditOn a::before{
.TableOfContentsContainer__content > .TableOfContents > li { content: '✏️ ';
border-bottom: 1px dashed #ddd;
} }
/* pager - prev .. next */ .Links a[href^="https://github.com/"]::before {
.s-content{ content: '🌐 ';
margin-bottom: 6em;
} }
.Pager{
border-top: 1px dashed #aaa; margin: 0; padding: 1em; .Links a[href^="https://git-repo.iml.unibe.ch/"]::before {
content: '🌐 ';
} }
.Pager a{
color:var(--navlinkactive); .Links a[href^="https://os-docs.iml.unibe.ch"]::before {
content: '📗 ';
} }
\ No newline at end of file