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

initialize docs

parent 6f042930
No related branches found
No related tags found
1 merge request!75915 update docs
Show whitespace changes
Inline Side-by-side
docs/10_Description.md 0 → 100644
+ 27
− 0
View file @ 6c5c31bb
## 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 @ 6c5c31bb
## 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 @ 6c5c31bb
<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 @ 6c5c31bb
{ {
"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 @ 6c5c31bb
/* /*
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment