From bf635bd6c9763d7aa6340642427494e00f936962 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 23 Aug 2021 22:34:42 +0100 Subject: [PATCH 01/11] :zap: Use v-cloak directive to hide unloaded content --- src/styles/global-styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss index 1c3eaf29..0303bf0f 100644 --- a/src/styles/global-styles.scss +++ b/src/styles/global-styles.scss @@ -22,6 +22,10 @@ html { } } +/* Hide text, and show 'Loading...' while Vue is intializing tags */ +[v-cloak] > * { display:none } +[v-cloak]::before { content: "loading…" } + /* Overriding styles for the modal component */ .vm--modal, .dashy-modal { box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important; From e7557832d8a621944eca13e1a1d3deacf6e5088f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 22:17:16 +0100 Subject: [PATCH 02/11] :sparkles: Re: #181 Option to ignore SSL in ping route --- services/ping.js | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/services/ping.js b/services/ping.js index 35e273e2..cebd2645 100644 --- a/services/ping.js +++ b/services/ping.js @@ -4,6 +4,7 @@ * endpoint, and then resolve the response status code, time taken, and short message */ const axios = require('axios').default; +const https = require('https'); /* Determines if successful from the HTTP response code */ const getResponseType = (code) => { @@ -26,9 +27,14 @@ const makeErrorMessage2 = (data) => '❌ Service Error - ' + `${data.status} - ${data.statusText}`; /* Kicks of a HTTP request, then formats and renders results */ -const makeRequest = (url, render) => { +const makeRequest = (url, headers, insecure, render) => { const startTime = new Date(); - axios.get(url) + const requestMaker = axios.create({ + httpsAgent: new https.Agent({ + rejectUnauthorized: !insecure, + }), + }); + requestMaker.get(url, { headers }) .then((response) => { const statusCode = response.status; const { statusText } = response; @@ -52,15 +58,29 @@ const makeRequest = (url, render) => { }); }; +const decodeHeaders = (maybeHeaders) => { + if (!maybeHeaders) return {}; + const decodedHeaders = decodeURIComponent(maybeHeaders); + let parsedHeaders = {}; + try { + parsedHeaders = JSON.parse(decodedHeaders); + } catch (e) { /* Not valid JSON, will just return false */ } + return parsedHeaders; +}; + /* Main function, will check if a URL present, and call function */ -module.exports = (params, render) => { - if (!params || !params.includes('=')) { +module.exports = (paramStr, render) => { + if (!paramStr || !paramStr.includes('=')) { render(JSON.stringify({ success: false, message: '❌ Malformed URL', })); } else { - const url = params.split('=')[1]; - makeRequest(url, render); + // Prepare the parameters, which are got from the URL + const params = new URLSearchParams(paramStr); + const url = decodeURIComponent(params.get('url')); + const headers = decodeHeaders(params.get('headers')); + const enableInsecure = !!params.get('enableInsecure'); + makeRequest(url, headers, enableInsecure, render); } }; From f343af3b002e3d9992abc759946c1c053e977350 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 22:18:21 +0100 Subject: [PATCH 03/11] :sparkles: Re: #181 Adds option to ignore SSL in ping --- src/components/LinkItems/Item.vue | 30 +++++++++++++++++++++------- src/components/LinkItems/Section.vue | 1 + 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 1a33a818..0177d886 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -72,6 +72,7 @@ export default { statusCheckHeaders: Object, statusCheckUrl: String, statusCheckInterval: Number, + statusCheckAllowInsecure: Boolean, }, data() { return { @@ -144,18 +145,33 @@ export default { default: return '"\\f054"'; } }, + /* Pulls together all user options, returns URL + Get params for ping endpoint */ + makeApiUrl() { + const { + url, statusCheckUrl, statusCheckHeaders, statusCheckAllowInsecure, + } = this; + const encode = (str) => encodeURIComponent(str); + this.statusResponse = undefined; + // Find base URL, where the API is hosted + const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin; + // Find correct URL to check, and encode + const urlToCheck = `?&url=${encode(statusCheckUrl || url)}`; + // Get, stringify and encode any headers + const headers = statusCheckHeaders + ? `&headers=${encode(JSON.stringify(statusCheckHeaders))}` : ''; + // Deterimine if user disabled security + const enableInsecure = statusCheckAllowInsecure ? '&enableInsecure=true' : ''; + // Construct the full API endpoint's URL with GET params + return `${baseUrl}/ping/${urlToCheck}${headers}${enableInsecure}`; + }, /* Checks if a given service is currently online */ checkWebsiteStatus() { - this.statusResponse = undefined; - const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin; - const urlToCheck = this.statusCheckUrl || this.url; - const headers = this.statusCheckHeaders || {}; - const endpoint = `${baseUrl}/ping?url=${urlToCheck}`; - axios.get(endpoint, { headers }) + const endpoint = this.makeApiUrl(); + axios.get(endpoint) .then((response) => { if (response.data) this.statusResponse = response.data; }) - .catch(() => { + .catch(() => { // Something went very wrong. this.statusResponse = { statusText: 'Failed to make request', statusSuccess: false, diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index f9bc3afa..c88ad459 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -33,6 +33,7 @@ :hotkey="item.hotkey" :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)" :statusCheckInterval="getStatusCheckInterval()" + :statusCheckAllowInsecure="item.statusCheckAllowInsecure" @itemClicked="$emit('itemClicked')" @triggerModal="triggerModal" /> From a86ad4fc3ca5aeb33e6553dc887464d33fdfeab8 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 22:30:27 +0100 Subject: [PATCH 04/11] :memo: Adds docs for disabling security checks --- docs/status-indicators.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/status-indicators.md b/docs/status-indicators.md index 8f2a8469..ff45ecad 100644 --- a/docs/status-indicators.md +++ b/docs/status-indicators.md @@ -57,6 +57,9 @@ You can set the `statusCheckUrl` property on any given item in order to do this. If your service is responding with an error, despite being up and running, it is most likely because custom headers for authentication, authorization or encoding are required. You can define these headers under the `statusCheckHeaders` property for any service. It should be defined as an object format, with the name of header as the key, and header content as the value. For example, `statusCheckHeaders: { 'X-Custom-Header': 'foobar' }` +## Disabling Security +By default, (if you're using HTTPS) any requests to insecure or non-HTTPS content will be blocked. This will likely cause the status check to fail. If you trust the endpoint (e.g. you're self-hosting it), then you can disable this security measure for an individual item. This is done by setting `statusCheckAllowInsecure: true` + ## Troubleshooting Failing Status Checks If the status is always returning an error, despite the service being online, then it is most likely an issue with access control, and should be fixed with the correct headers. Hover over the failing status to see the error code and response, in order to know where to start with addressing it. If your service requires requests to include any authorization in the headers, then use the `statusCheckHeaders` property, as described above. From fe57a266f1779f2d17aeaf82690fbbaed1182b03 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 22:31:14 +0100 Subject: [PATCH 05/11] :card_file_box: Adds statusCheckAllowInsecure to Schema and docs --- docs/configuring.md | 1 + src/utils/ConfigSchema.json | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/docs/configuring.md b/docs/configuring.md index ca7add0e..b08a995f 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -154,6 +154,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)** **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping the URL associated with the current service, and display its status as a dot next to the item. The value here will override `appConfig.statusCheck` so you can turn off or on checks for a given service. Defaults to `appConfig.statusCheck`, falls back to `false` **`statusCheckUrl`** | `string` | _Optional_ | If you've enabled `statusCheck`, and want to use a different URL to what is defined under the item, then specify it here **`statusCheckHeaders`** | `object` | _Optional_ | If you're endpoint requires any specific headers for the status checking, then define them here +**`statusCheckAllowInsecure`** | `boolean` | By default, any request to insecure content will be blocked. Setting this option to `true` will disable the `rejectUnauthorized` option, enabling you to ping non-HTTPS services. Should only be used when needed, and for URLs that you know are safe. Defaults to `false` **`color`** | `string` | _Optional_ | An optional color for the text and font-awesome icon to be displayed in. Note that this will override the current theme and so may not display well **`backgroundColor`** | `string` | _Optional_ | An optional background fill color for the that given item. Again, this will override the current theme and so might not display well against the background **`provider`** | `string` | _Optional_ | The name of the provider for a given service, useful for when including hosted apps. In some themes, this is visible under the item name diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index a21798d9..12a85dcc 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -499,6 +499,11 @@ "statusCheckHeaders": { "type": "object", "description": " If you're endpoint requires any specific headers for the status checking, then define them here" + }, + "statusCheckAllowInsecure": { + "type": "boolean", + "default": false, + "description": "Allows for running status checks on insecure content/ non-HTTPS apps" } } } From f16059d5e9db8fe4a5356654e65344626f7f7da9 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 23:01:36 +0100 Subject: [PATCH 06/11] :zap: Uses regex for parsing versions, as more efficient --- services/update-checker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/update-checker.js b/services/update-checker.js index c55492fd..8f503888 100644 --- a/services/update-checker.js +++ b/services/update-checker.js @@ -5,7 +5,7 @@ const currentVersion = require('../package.json').version; const packageUrl = 'https://raw.githubusercontent.com/Lissy93/dashy/master/package.json'; const makeMsg = (latestVersion) => { - const parse = (version) => parseInt(version.replaceAll('.', ''), 10); + const parse = (version) => parseInt(version.replace(/\./g, ''), 10); const difference = parse(latestVersion) - parse(currentVersion); let msg = ''; if (difference <= 0) { From 91f3ae28d6a2aae7e4eee0a4a59cfbd63aa0b67a Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 23:02:22 +0100 Subject: [PATCH 07/11] :memo: Updates info section of status check docs --- docs/status-indicators.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/status-indicators.md b/docs/status-indicators.md index ff45ecad..ad9e6724 100644 --- a/docs/status-indicators.md +++ b/docs/status-indicators.md @@ -1,6 +1,6 @@ # Status Indicators -Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. +Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This can be useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. The status feature will show response time, response code, online/ offline check and if applicable, a relevant error message

@@ -24,21 +24,21 @@ sections: description: Firewall Central Management icon: networking/opnsense.png url: https://192.168.1.1 - statusCheck: false + statusCheck: false - title: MalTrail description: Malicious traffic detection system icon: networking/maltrail.png url: http://192.168.1.1:8338 - statusCheck: true + statusCheck: true - title: Ntopng description: Network traffic probe and network use monitor icon: networking/ntop.png url: http://192.168.1.1:3001 - statusCheck: true + statusCheck: true ``` ## Continuous Checking -By default, with status indicators enabled Dashy will check an applications status on page load, and will not keep indicators updated. This is usually desirable behavior. However, if you do want the status indicators to continue to poll your running services, this can be enabled by setting the `statusCheckInterval` attribute. Here you define an interval in seconds, and Dashy will poll your apps every x seconds. Note that if this number is very low (below 5 seconds), you may notice the app running slightly slower. +By default, with status indicators enabled Dashy will check an applications status on page load, and will not keep indicators updated. This is usually desirable behavior. However, if you do want the status indicators to continue to poll your running services, this can be enabled by setting the `statusCheckInterval` attribute. Here you define an interval as an integer in seconds, and Dashy will poll your apps every x seconds. Note that if this number is very low (below 5 seconds), you may notice the app running slightly slower. The following example, will instruct Dashy to continuously check the status of your services every 20 seconds @@ -58,7 +58,7 @@ If your service is responding with an error, despite being up and running, it is For example, `statusCheckHeaders: { 'X-Custom-Header': 'foobar' }` ## Disabling Security -By default, (if you're using HTTPS) any requests to insecure or non-HTTPS content will be blocked. This will likely cause the status check to fail. If you trust the endpoint (e.g. you're self-hosting it), then you can disable this security measure for an individual item. This is done by setting `statusCheckAllowInsecure: true` +By default, (if you're using HTTPS) any requests to insecure or non-HTTPS content will be blocked. This will cause the status check to fail. If you trust the endpoint (e.g. you're self-hosting it), then you can disable this security measure for an individual item. This is done by setting `statusCheckAllowInsecure: true` ## Troubleshooting Failing Status Checks If the status is always returning an error, despite the service being online, then it is most likely an issue with access control, and should be fixed with the correct headers. Hover over the failing status to see the error code and response, in order to know where to start with addressing it. @@ -68,12 +68,16 @@ If you are still having issues, it may be because your target application is blo Access-Control-Allow-Origin: https://location-of-dashy/ Vary: Origin ``` +If the URL you are checking is not using HTTPS, then you may need to disable the rejection of insecure requests. This can be done by setting `statusCheckAllowInsecure` to true for a given item. + +If you're serving Dashy though a CDN, instead of using the Node server or Docker image, then the Node endpoint that makes requests will not be available to you, and all requests will fail. A workaround for this may be implemented in the future, but in the meantime, your only option is to use the Docker or Node deployment method. + For further troubleshooting, use an application like [Postman](https://postman.com) to diagnose the issue. ## How it Works -When Dashy is loaded, items with `statusCheck` enabled will make a request, to `https://[your-host-name]/ping?url=[address-or-servce]`, which in turn will ping that running service, and respond with a status code. Response time is calculated from the difference between start and end time of the request. +When the app is loaded, if `appConfig.statusCheck: true` is set, or if any items have the `statusCheck: true` enabled, then Dashy will make a request, to `https://[your-host-name]/ping?url=[address-or-servce]` (may al include GET params for headers and the secure flag), which in turn will ping that running service, and respond with a status code. Response time is calculated from the difference between start and end time of the request. When the response completes, an indicator will display next to each item. The color denotes the status: Yellow while waiting for the response to return, green if request was successful, red if it failed, and grey if it was unable to make the request all together. -All requests are made straight from your server, there is no intermediary. So providing you are hosting Dashy yourself, and are checking the status of other self-hosted services, there shouldn't be any privacy concerns. Requests are made asynchronously, so this won't have any impact on page load speeds. However recurring requests (using `statusCheckInterval`) may run more slowly if the interval between requests is very short. +All requests are made straight from your server, there is no intermediary. So providing you are hosting Dashy yourself, and are checking the status of other self-hosted services, there shouldn't be any privacy concerns. Requests are made asynchronously, so this won't have any significant impact on page load speeds. However recurring requests (using `statusCheckInterval`) may run more slowly if the interval between requests is very short. From 11c26aeeeed3d29eb32393dfcdb261defd7fb3fe Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 23:03:26 +0100 Subject: [PATCH 08/11] :zap: Uses HOST env var instead --- services/print-message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/print-message.js b/services/print-message.js index d7d19ed0..b15d2899 100644 --- a/services/print-message.js +++ b/services/print-message.js @@ -23,7 +23,7 @@ module.exports = (ip, port, isDocker) => { const blanks = (count) => printChars(count, ' '); if (isDocker) { // Prepare message for Docker users - const containerId = process.env.HOSTNAME || undefined; + const containerId = process.env.HOST || undefined; msg = `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}` + `${chars.CYAN}Welcome to Dashy! 🚀${chars.RESET}${chars.BR}` + `${chars.GREEN}Your new dashboard is now up and running ` From 1b2807433d803687913eab1b44168234d294d7af Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 26 Aug 2021 23:05:13 +0100 Subject: [PATCH 09/11] :wrench: Updated .env template --- .env | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.env b/.env index 8894dd20..10bad36e 100644 --- a/.env +++ b/.env @@ -1,5 +1,9 @@ # Store environmental variables here. All variables are optional. -# PORT=4000 # The port to expose the running application on # NODE_ENV=production # Can be either development, production or test -# BASE_URL=/ # The default base path for serving up static assets \ No newline at end of file +# PORT=4000 # The port to expose the running application on +# HOST=localhost # The host that Dashy is running on, domain or IP +# BASE_URL=./ # The default base path for serving up static assets +# VUE_APP_DOMAIN # Usually the same as BASE_URL, but accessible in frontend +# IS_DOCKER=true # Usually already set, should be true if running in container +# VUE_APP_VERSION # Again, set automatically using package.json during build From ff82a3adc788a856c762068f987388a4776de2db Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 27 Aug 2021 00:10:11 +0100 Subject: [PATCH 10/11] :bookmark: Bumps to V 1.6.7 and updates changelog --- .github/CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index e51a8b43..d320c7b4 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## ⚡️ 1.6.7 - Option for non-SSL status checks plus minor things [PR #182](https://github.com/Lissy93/dashy/pull/182) +- Adds an option for user to use status checks with non-HTTPS services, Re: #181 +- Updates the .env template, plus the variables used in the server +- Uses the v-cloak to hide text before it's finished loading +- Fixed the parsing of the update-checker during build + ## ⚡️ 1.6.6 - Improved Search & Shortcuts [PR #175](https://github.com/Lissy93/dashy/pull/175) - Refactors the search algorithm to improve performance and code reusability - Updates search to ignore case, special characters and minor-typos diff --git a/package.json b/package.json index 522bf7cf..de8b201b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.6.6", + "version": "1.6.7", "license": "MIT", "main": "server", "scripts": { From ff663f8647fcb09f9b1791c8aa2b9d55465e5fe2 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 27 Aug 2021 20:50:19 +0100 Subject: [PATCH 11/11] :lipstick: Fixes styles for status check tooltip --- src/components/LinkItems/StatusIndicator.vue | 1 + src/styles/color-themes.scss | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/LinkItems/StatusIndicator.vue b/src/components/LinkItems/StatusIndicator.vue index 7775fa62..8976f345 100644 --- a/src/components/LinkItems/StatusIndicator.vue +++ b/src/components/LinkItems/StatusIndicator.vue @@ -48,6 +48,7 @@ export default { padding: 5px; transition: all .2s ease-in-out; cursor: help; + z-index: 5; &:hover { transform: scale(1.25); filter: saturate(2); diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 690eab84..9b1ad553 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -509,6 +509,7 @@ html[data-theme='material'] { // --login-form-background-secondary: #f5f5f5cc; --context-menu-secondary-color: #f5f5f5; --transparent-white-50: #00000080; + --status-check-tooltip-background: #fff; --minimal-view-background-color: var(--background); --minimal-view-title-color: var(--background-darker); @@ -596,6 +597,9 @@ html[data-theme='material-dark'] { --nav-link-text-color-hover: #08B0BB; --nav-link-background-color-hover: #131a1fc7; --nav-link-border-color-hover: transparent; + + --status-check-tooltip-background: #131a1f; + --status-check-tooltip-color: #e0e0e0; --curve-factor: 2px; --curve-factor-navbar: 0; @@ -605,7 +609,6 @@ html[data-theme='material-dark'] { --config-settings-color: #41e2ed; --scroll-bar-color: #08B0BB; --scroll-bar-background: #131a1f; - --status-check-tooltip-color: #131a1f; // --login-form-color: #131a1f; --login-form-background-secondary: #131a1f; @@ -741,6 +744,7 @@ html[data-theme='vaporware'] { --curve-factor-navbar: 6px; --login-form-color: #09bfe6; --config-settings-background: #100e2c; + --status-check-tooltip-background: #100e2c; .home { background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%); @@ -823,6 +827,7 @@ html[data-theme='cyberpunk'] { --footer-background: var(--aqua); --welcome-popup-background: var(--pink); --welcome-popup-text-color: var(--blue); +--status-check-tooltip-background: var(--blue); --font-headings: 'Audiowide', cursive; }