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
  • master
1 result

Target

Select target project
  • iml-open-source/appmonitor-dashboard
1 result
Select Git revision
  • master
1 result
Show changes
Commits on Source (3)
Hide whitespace changes
Inline Side-by-side
README.md
View file @ 5bf0ab08
......@@ -2,58 +2,11 @@
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/> \
📜 License: GNU GPL 3.0
## 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.
📜 License: GNU GPL 3.0 \
📗 Docs: <https://os-docs.iml.unibe.ch/appmonitor-dashboard/>
## Screenshot ##
![Screenshot](docs/images/screenshot_main.png "Screenshot")
\ No newline at end of file
![Screenshot](docs/images/screenshot_main.png "Screenshot")
docs/10_Description.md 0 → 100644
View file @ 5bf0ab08
## 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")
docs/20_Installation.md 0 → 100644
View file @ 5bf0ab08
## 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.
docs/_index.md 0 → 100644
View file @ 5bf0ab08
<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/>
docs/config.json
View file @ 5bf0ab08
{
"title": "__PRODUCT__",
"title": "IML Appmonitor Dashboard",
"author": "Axel Hahn",
"tagline": "__DESCRIPTION__",
"tagline": "Proof of concept client dashboard using appmonitor API",
"ignore": {
"files": ["30_PHP-client/Plugins/Checks/_skeleton.md"],
"folders": ["99_Not_Ready"]
......@@ -12,12 +12,13 @@
"date_modified": false,
"jump_buttons": true,
"edit_on_github_": "iml-it/__PROJECT__/tree/master/docs",
"edit_on_": {
"edit_on": {
"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": {
"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",
"search": true
......
docs/style.css
View file @ 5bf0ab08
/*
patch css elements of daux.io blue theme
version 2022-05-13
override css elements of daux.io blue theme
version 2022-11-30
*/
/* ---------- vars ---------- */
:root{
/* background colors */
--bg:none;
--bg-body: #fff;
--bg-navlinkactive:#f4f4f4;
--bg-navlinkactive: linear-gradient(-90deg,rgba(0,0,0,0), rgba(40,60,80,0.05) 30%);
--bg-pre:#f8f8f8;
--bg-toc: #fff;
/* foreground colors */
--color: #234;
--navlinkactive:#f33;
--title: #aaa;
--link:#12a;
--toclink:rgba(40,60,80,0.8);
--h1: rgba(40,60,80,0.8);
--h1-bottom: 1px solid rgba(40,60,80,0.1);
--h2: #468;
--h3: #579;
:root {
/* Axels Overrides */
--color-text: #222;
--link-color: #822;
--brand-color: var(--color-secondary);
--brand-background: var(--body-background);
--hr-color: none;
--search-field-background: none;
--search-field-border-color: none;
--sidebar-background: var(--body-background);
--sidebar-border-color: none;
--sidebar-link-active-background: #e8f4f6;
--sidebar-link-active-background: #eee;
/* Axels custom values */
--axel_bg-toc: var(--body-background);
--axel_bg-toc-head: #f8f8f8;
--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: #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 {
background: rgb(255,0,51);
color: #fff;
background: var(--axel_brand-pre-background);
color: #fff;
font-family: arial;
font-weight: bold;
padding: 0.5em 0.3em;
content: 'IML';
font-weight: bold;
padding: 0.5em 0.3em;
content: 'IML';
margin-right: 0.4em;
float: left;
}
body, *{color: var(--color);}
body{background: var(--bg-body);}
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);
a.Brand:hover::before {
background: var(--axel_brand-pre-background-hover);
}
/* ---------- classes ---------- */
.required{color:#a42;}
.optional{color:#888;}
a.Brand {
background: var(--axel_brand-background);
font-size: 200%;
height: 4em;
}
/* ---------- page header: breadcrumb ---------- */
.Page__header {
border: none;
}
/* ----- top left */
.Brand,
.Columns__left {
background: var(--bg);
border-right: 0px solid #e7e7e9;
color: var(--color);
.Page__header a {
color: var(--axel_h1_header);
}
.Brand{font-size: 200%;
background_: linear-gradient(-10deg,#fff 50%, #ddd);
background: var(--bg);
.Page__header h1 {
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{
background: none;
color: var(--navlinkactive) !important;
.s-content h2 {
background: var(--axel_h2-bg);
color: var(--axel_h2);
font-size: 180%;
font-weight: bold;
margin-top: 4em;
border-bottom: var(--axel_h2-bottom);
}
.Nav__item--active {
border-right_: 0.3em solid var(--navlinkactive);
h1:first-of-type {
margin-top: 0em;
}
.Nav__item--active > a{
background: var(--bg-navlinkactive);
color: var(--navlinkactive);
h2:first-of-type {
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"]{
background: url("/icons/house.png") no-repeat 10px 4px ;
padding-left: 40px;
/* FIX smaller fnt size in tables */
.s-content table {
font-size: 1em;
}
.Nav a[href*="__How_does_it_work"]{
background: url("/icons/light-bulb.png") no-repeat 10px 4px ;
padding-left: 40px;
.s-content table th {
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 ---------- */
.required {
color: #a42;
}
/* FIX smaller fnt size in tables */
.s-content table {
font-size: 1em;
.optional {
color: #888;
}
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 */
@media(min-width:1700px){
.TableOfContentsContainer{
/* ---------- TOC ---------- */
@media(min-width:1700px) {
.TableOfContentsContainer {
position: fixed;
right: 2em;
top: 1em;
}
}
.TableOfContentsContainer{
border-top-left-radius: 1em;
background-color: var(--bg-toc);
border-left: 2px solid rgba(0,0,0,0.05);
padding: 0em;
.TableOfContentsContainer {
background-color: var(--axel_bg-toc);
padding: 0.5em;
}
.TableOfContentsContainer__content {
border: none;
font-size: 0.5em;
.s-content .TableOfContentsContainer h4 {
background-color: var(--axel_bg-toc-head);
border-top-left-radius: 1em;
font-size: 1.1em;
margin: 0;
padding: 0;
}
.TableOfContentsContainer__content {
border-width: 1px;
font-size: 0.5em;
}
ul.TableOfContents ul{
list-style-type: none;
ul.TableOfContents ul {
list-style-type: none;
padding-left: 1em;
}
.TableOfContentsContainer a{ color:var(--toclink);}
.TableOfContentsContainer__content > .TableOfContents > li + li {
border-top: none;
}
.TableOfContentsContainer__content > .TableOfContents > li {
border-bottom: 1px dashed #ddd;
}
/* ----- Icons on links --- */
/* pager - prev .. next */
.s-content{
margin-bottom: 6em;
.EditOn a::before{
content: '✏️ ';
}
.Pager{
border-top: 1px dashed #aaa; margin: 0; padding: 1em;
.Links a[href^="https://github.com/"]::before {
content: '🌐 ';
}
.Pager a{
color:var(--navlinkactive);
.Links a[href^="https://git-repo.iml.unibe.ch/"]::before {
content: '🌐 ';
}
.Links a[href^="https://os-docs.iml.unibe.ch"]::before {
content: '📗 ';
}
\ No newline at end of file