Docs link to webui settings in user's install (#13176)

* Docs link to webui settings in user's install * Add note to re-assure users
2024-10-07 16:52:45 +00:00 · 2021-08-27 06:48:17 -05:00
parent b3e2309af6
commit 1ec694595e
4 changed files with 137 additions and 1 deletions
--- a/doc/js/docs-install-tab.js
+++ b/doc/js/docs-install-tab.js
--- a/doc/js/docs-settings-links.js
+++ b/doc/js/docs-settings-links.js
@@ -0,0 +1,88 @@
+function findGetParameter(parameterName) {
+    let result = null, tmp = [];
+    location.search
+        .substr(1)
+        .split("&")
+        .forEach(function (item) {
+            tmp = item.split("=");
+            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
+        });
+    return result;
+}
+
+function isValidHttpUrl(string) {
+    let url;
+
+    try {
+        url = new URL(string);
+    } catch (_) {
+        return false;
+    }
+
+    return url.protocol === "http:" || url.protocol === "https:";
+}
+
+function promptSettingUrl(e) {
+    e.preventDefault();
+    let librenmsUrl = prompt("Enter your LibreNMS URL to get direct settings link.\nNote: This URL is only stored in your browser.");
+
+    if (! isValidHttpUrl(librenmsUrl)) {
+        alert("Invalid url, must start with http:// or https://")
+        return false;
+    }
+
+    wrapSettingsLinks(librenmsUrl);
+    return false;
+}
+
+
+function wrapSettingsLinks(librenmsUrl) {
+    // fetch saved url
+    if (! librenmsUrl) {
+        librenmsUrl = localStorage.getItem('librenms_url');
+    }
+
+    if (librenmsUrl) {
+        localStorage.setItem('librenms_url', librenmsUrl);
+        librenmsUrl = librenmsUrl.replace(/\/+$/i, ''); // trim trailing /
+        [].forEach.call(document.querySelectorAll('.admonition.setting>.admonition-title'), function (el) {
+            if (! el.dataset.setting_url) {
+                el.dataset.setting_url = el.innerText;
+            }
+
+            let link = document.createElement('a');
+            link.classList.add('setting-link');
+            link.href = librenmsUrl + '/settings/' + el.dataset.setting_url;
+            link.innerText = link.href;
+            link.target = '_blank';
+
+            let edit = document.createElement('a');
+            edit.classList.add('url-edit-link');
+            edit.title = "Change setting base url"
+            edit.onclick = promptSettingUrl;
+            edit.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>'
+
+            el.innerText = '';
+            el.appendChild(link);
+            el.appendChild(document.createTextNode(' '))
+            el.appendChild(edit);
+        });
+    } else {
+        [].forEach.call(document.querySelectorAll('.admonition.setting>.admonition-title'), function (el) {
+            if (!el.dataset.setting_url) {
+                el.dataset.setting_url = el.innerText;
+            }
+
+            let link = document.createElement('a');
+            link.classList.add('setting-link');
+            link.onclick = promptSettingUrl;
+            link.innerText = 'https://<your librenms url>/' + el.dataset.setting_url;
+            el.innerText = '';
+            el.appendChild(link);
+        });
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    wrapSettingsLinks(findGetParameter('librenms_url'));
+}, false);
--- a/doc/librenms.css
+++ b/doc/librenms.css
@@ -60,4 +60,50 @@
  }
 }

+/* Setting admonition */
+:root {
+    --md-admonition-icon--setting: url('data:image/svg+xml;charset=utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/></svg>')
+}

+.md-typeset .admonition.setting,
+.md-typeset details.setting {
+    border-color: rgb(43, 155, 70);
+}
+.md-typeset .setting > .admonition-title,
+.md-typeset .setting > summary {
+    background-color: rgba(43, 155, 70, 0.1);
+    border-color: rgb(43, 155, 70);
+}
+.md-typeset .setting > .admonition-title::before,
+.md-typeset .setting > summary::before {
+    background-color: rgb(43, 155, 70);
+    -webkit-mask-image: var(--md-admonition-icon--setting);
+    mask-image: var(--md-admonition-icon--setting);
+}
+.url-edit-link > svg {
+    float: right;
+    height: 1rem;
+    width: 1rem;
+    /*line-height: 1em;*/
+    fill: rgb(43, 155, 70);
+    cursor: pointer;
+}
+.url-edit-link > svg:hover {
+    fill: rgb(37, 133, 59);
+}
+.setting-link {
+    /*font-size: 1.1em;*/
+    /*line-height: 1em;*/
+    cursor: pointer;
+}
+a.setting-link, a.setting-link:visited {
+    color: #000;
+}
+
+a.setting-link:focus, a.setting-link:hover {
+    color: rgb(37, 133, 59);
+}
+
+.md-typeset .admonition, .md-typeset details {
+    font-size: 1em;
+}
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,6 +11,7 @@ theme:
 site_dir: out
 site_url: https://docs.librenms.org
 markdown_extensions:
+    - admonition
    - pymdownx.tasklist
    - pymdownx.tilde
    - pymdownx.superfences
@@ -35,7 +36,8 @@ extra_css:
    - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
    - librenms.css
 extra_javascript:
-    - librenms-docs.js
+    - js/docs-install-tab.js
+    - js/docs-settings-links.js
 extra:
    article_nav_top: false
    article_nav_bottom: true