diff --git a/README.md b/README.md
index 60e18e8fca46637199807dfc0e01e7f241d881eb..549ff19a44ac27db0edb1a3aa313d6a6506b2443 100644
--- a/README.md
+++ b/README.md
@@ -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 ##
-
\ No newline at end of file
+
diff --git a/docs/10_Description.md b/docs/10_Description.md
new file mode 100644
index 0000000000000000000000000000000000000000..db13b3cf10523135d084933cbfeb199c91c7732e
--- /dev/null
+++ b/docs/10_Description.md
@@ -0,0 +1,27 @@
+## 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
+
+
diff --git a/docs/20_Installation.md b/docs/20_Installation.md
new file mode 100644
index 0000000000000000000000000000000000000000..e557321785ab48d19b64e91f5aaeaaf6b69ebe71
--- /dev/null
+++ b/docs/20_Installation.md
@@ -0,0 +1,40 @@
+## 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.
diff --git a/docs/_index.md b/docs/_index.md
new file mode 100644
index 0000000000000000000000000000000000000000..bef0c57d63f6df38f175864ee10e5a90f7ef5927
--- /dev/null
+++ b/docs/_index.md
@@ -0,0 +1,11 @@
+<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/>
diff --git a/docs/config.json b/docs/config.json
index dc16cac02146f1825e3528f257441e35a9092bf0..5a42f17f449b8e85560d3ed5acb575f7bff9178e 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -1,7 +1,7 @@
{
- "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
diff --git a/docs/style.css b/docs/style.css
index 909562cb91d2a8335f4470332ef1e07bdb2ee44c..18463c799d9cd101d8f9b27a282128cde4494d99 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,176 +1,267 @@
/*
-
- 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