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

Merge branch '5915-update-docs' into 'master' 

5915 update docs

See merge request !7
parents 6f042930 00b59229
Branches master
No related tags found
1 merge request!75915 update docs
Hide whitespace changes
Inline Side-by-side
README.md
+ 4
− 51
View file @ 5bf0ab08
...@@ -2,58 +2,11 @@ ...@@ -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. 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 ##
![Screenshot](docs/images/screenshot_main.png "Screenshot") ![Screenshot](docs/images/screenshot_main.png "Screenshot")
\ No newline at end of file
docs/10_Description.md 0 → 100644
+ 27
− 0
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
+ 40
− 0
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
+ 11
− 0
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
+ 6
− 5
View file @ 5bf0ab08
{ {
"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
......
docs/style.css
+ 212
− 121
View file @ 5bf0ab08
/* /*
override css elements of daux.io blue theme
patch css elements of daux.io blue theme version 2022-11-30
version 2022-05-13
*/ */
:root {
/* Axels Overrides */
/* ---------- vars ---------- */ --color-text: #222;
--link-color: #822;
:root{ --brand-color: var(--color-secondary);
--brand-background: var(--body-background);
/* background colors */ --hr-color: none;
--bg:none; --search-field-background: none;
--bg-body: #fff; --search-field-border-color: none;
--bg-navlinkactive:#f4f4f4; --sidebar-background: var(--body-background);
--bg-navlinkactive: linear-gradient(-90deg,rgba(0,0,0,0), rgba(40,60,80,0.05) 30%); --sidebar-border-color: none;
--bg-pre:#f8f8f8; --sidebar-link-active-background: #e8f4f6;
--bg-toc: #fff; --sidebar-link-active-background: #eee;
/* Axels custom values */
/* foreground colors */ --axel_bg-toc: var(--body-background);
--color: #234; --axel_bg-toc-head: #f8f8f8;
--navlinkactive:#f33; --axel_brand-background: none;
--title: #aaa; --axel_brand-pre-background: rgb(255, 0, 51);
;
--link:#12a; --axel_brand-pre-background-hover: rgb(255, 0, 51);
--toclink:rgba(40,60,80,0.8); ;
--axel_h1_header: none;
--h1: rgba(40,60,80,0.8); --axel_h1: #345;
--h1-bottom: 1px solid rgba(40,60,80,0.1); --axel_h1-bg: none;
--h2: #468; --axel_h1-bottom: 3px solid none;
--h3: #579; --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;
right: 2em; right: 2em;
top: 1em; top: 1em;
} }
} }
.TableOfContentsContainer{ .TableOfContentsContainer {
border-top-left-radius: 1em; background-color: var(--axel_bg-toc);
background-color: var(--bg-toc); padding: 0.5em;
border-left: 2px solid rgba(0,0,0,0.05);
padding: 0em;
} }
.TableOfContentsContainer__content {
border: none; .s-content .TableOfContentsContainer h4 {
font-size: 0.5em; 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; padding-left: 1em;
} }
.TableOfContentsContainer a{ color:var(--toclink);}
.TableOfContentsContainer__content > .TableOfContents > li + li { /* ----- Icons on links --- */
border-top: none;
}
.TableOfContentsContainer__content > .TableOfContents > li {
border-bottom: 1px dashed #ddd;
}
/* pager - prev .. next */ .EditOn a::before{
.s-content{ content: '✏️ ';
margin-bottom: 6em;
} }
.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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment