🔀 Merge pull request #779 from Lissy93/FEATURE/widget-labeld

[FEATURE] Option for labeled widgets
Closes #769

docs/configuring.md

@@ -253,6 +253,8 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`updateInterval`** | `number` | _Optional_ | You can keep a widget constantly updated by specifying an update interval, in seconds. See [Continuous Updates Docs](/docs/widgets.md#continuous-updates) for more info
 **`useProxy`** | `boolean` | _Optional_ | Some widgets make API requests to services that are not CORS-enabled. For these instances, you will need to route requests through a proxy, Dashy has a built in CORS-proxy, which you can use by setting this option to `true`. Defaults to `false`. See the [Proxying Requests Docs](/docs/widgets.md#proxying-requests) for more info
 **`timeout`** | `number` | _Optional_ | Request timeout in milliseconds, defaults to ½ a second (`500`)
+**`ignoreErrors`** | `boolean` | _Optional_ | Prevent an error message being displayed, if a network request or something else fails. Useful for false-positives
+**`label`** | `string` | _Optional_ | Add custom label to a given widget. Useful for identification, if there are multiple of the same type of widget in a single section 
 
 **[⬆️ Back to Top](#configuring)**
 

docs/widgets.md

@@ -80,6 +80,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Continuous Updates](#continuous-updates)
   - [Proxying Requests](#proxying-requests)
   - [Setting Timeout](#setting-timeout)
+  - [Adding Labels](#adding-labels)
   - [Ignoring Errors](#ignoring-errors)
   - [Custom CSS Styling](#widget-styling)
   - [Customizing Charts](#customizing-charts)
@@ -2265,6 +2266,32 @@ For example:
 
 ---
 
+### Adding Labels
+
+If you have multiple widgets of the same type in a single section, it may not be clear what each one is. To overcome this, you can add a custom label to any given widget, using the `label` property.
+
+For example:
+
+```yaml
+- name: CPU Usage
+  icon: fas fa-tachometer
+  widgets:
+  - type: gl-current-cpu
+    label: Meida Server
+    options:
+      hostname: http://media-server.lan:61208
+  - type: gl-current-cpu
+    label: Firewall
+    options:
+      hostname: http://firewall.lan:61208
+  - type: gl-current-cpu
+    label: File Sync Server
+    options:
+      hostname: http://file-sync.lan:61208
+```
+
+---
+
 ### Ignoring Errors
 
 When there's an error fetching or displaying a widgets data, then it will be highlighted in yellow, and a message displayed on the UI.

src/components/LinkItems/Collapsable.vue

@@ -2,7 +2,7 @@
   <div
     v-bind:class="[
     { 'is-open': isExpanded, 'full-height': cutToHeight },
-    `collapsable ${rowColSpanClass}`
+    `collapsable ${rowColSpanClass}`, sectionClassName
     ]"
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
@@ -74,6 +74,10 @@ export default {
       const { rows, cols, checkSpanNum } = this;
       return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
     },
+    sectionClassName() {
+      if (!this.title) return 'unnamed-section';
+      return `section_${this.title.replaceAll(' ', '-').toLowerCase()}`;
+    },
     /* Used to fetch initial collapse state, and set new collapse state on change */
     isExpanded: {
       get() {

src/components/LinkItems/ItemIcon.vue

@@ -123,7 +123,7 @@ export default {
       if (emojiLookup[emojiCode]) {
         return emojiLookup[emojiCode];
       } else {
-        this.imageNotFound(`No emoji found with name '${emojiCode}'`);
+        // this.imageNotFound(`No emoji found with name '${emojiCode}'`);
         return null;
       }
     },

src/components/Widgets/WidgetBase.vue

@@ -18,6 +18,8 @@
       <p class="error-output">{{ errorMsg }}</p>
       <p class="retry-link" @click="update">Retry</p>
     </div>
+    <!-- Widget Label -->
+    <div class="widget-label" v-if="widgetOptions.label">{{ widgetOptions.label }}</div>
     <!-- Widget -->
     <div :class="`widget-wrap ${ error ? 'has-error' : '' }`">
       <component
@@ -142,11 +144,12 @@ export default {
       const options = this.widget.options || {};
       const timeout = this.widget.timeout || null;
       const ignoreErrors = this.widget.ignoreErrors || false;
+      const label = this.widget.label || null;
       const useProxy = this.appConfig.widgetsAlwaysUseProxy || !!this.widget.useProxy;
       const updateInterval = this.widget.updateInterval !== undefined
         ? this.widget.updateInterval : null;
       return {
-        timeout, ignoreErrors, useProxy, updateInterval, ...options,
+        timeout, ignoreErrors, label, useProxy, updateInterval, ...options,
       };
     },
     /* A unique string to reference the widget by */
@@ -219,7 +222,11 @@ export default {
       right: 1.75rem;
     }
   }
-
+  // Optional widget label
+  .widget-label {
+    color: var(--widget-text-color);
+  }
+  // Actual widget container
   .widget-wrap {
     &.has-error {
       cursor: not-allowed;