@openremote/or-dashboard-builder 1.2.0-snapshot.20240512162641 → 1.2.0-snapshot.20240819101332

package/src/settings/gateway-settings.ts

@@ -0,0 +1,144 @@
+import { customElement } from "lit/decorators.js";
+import {WidgetSettings} from "../util/widget-settings";
+import {TemplateResult, html} from "lit";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {i18next} from "@openremote/or-translate";
+import {Asset, AssetQuery, GatewayTunnelInfoType} from "@openremote/model";
+import {GatewayWidgetConfig} from "../widgets/gateway-widget";
+import {Task} from "@lit/task";
+import manager from "@openremote/core";
+
+@customElement("gateway-settings")
+export class GatewaySettings extends WidgetSettings {
+
+    protected GATEWAY_ASSET_TYPES: string[] = ["GatewayAsset"];
+    protected GATEWAY_TUNNEL_TYPES: GatewayTunnelInfoType[] = [GatewayTunnelInfoType.HTTPS, GatewayTunnelInfoType.HTTP, GatewayTunnelInfoType.TCP];
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: GatewayWidgetConfig;
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    protected render(): TemplateResult {
+        const disabled = !this.widgetConfig.gatewayId;
+        return html`
+            <div>
+                <settings-panel displayName="gatewayTunnels.settings" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <div>
+                            ${this._fetchAssetsTask.render({
+                                pending: () => html`
+                                    <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;" disabled
+                                                  label="${i18next.t('gatewayTunnels.selectAsset')}"
+                                    ></or-mwc-input>
+                                `,
+                                complete: (gatewayAssets) => {
+                                    const options: [string, string][] = gatewayAssets.map(a => [a.id, a.name]);
+                                    const selected = gatewayAssets.find(a => a.id === this.widgetConfig.gatewayId);
+                                    const value = selected ? [selected.id, selected.name] as [string, string] : undefined;
+                                    return html`
+                                        <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;"
+                                                      .options="${options}" .value="${value}"
+                                                      label="${i18next.t('gatewayTunnels.selectAsset')}"
+                                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onAssetSelect(ev)}"
+                                        ></or-mwc-input>
+                                    `;
+                                },
+                                error: () => html`
+                                    <or-mwc-input .type="${InputType.TEXT}" compact style="width: 100%;" disabled
+                                                  label="${i18next.t('gatewayTunnels.selectAsset')}" .value="${i18next.t('errorOccurred')}"
+                                    ></or-mwc-input>
+                                `
+                            })}
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;"
+                                          .disabled="${disabled}" .options="${this.GATEWAY_TUNNEL_TYPES}" .value="${this.widgetConfig.type}"
+                                          label="${i18next.t('gatewayTunnels.protocol')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTypeSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.TEXT}" style="width: 100%;"
+                                          .disabled="${disabled}" .value="${this.widgetConfig.target}"
+                                          label="${i18next.t('gatewayTunnels.target')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTargetSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.NUMBER}" style="width: 100%;"
+                                          .disabled="${disabled}" .value="${this.widgetConfig.targetPort}"
+                                          label="${i18next.t('gatewayTunnels.targetPort')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTargetPortSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    protected _onAssetSelect(ev: OrInputChangedEvent): void {
+        this.widgetConfig.gatewayId = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTypeSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.type = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTargetSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.target = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTargetPortSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.targetPort = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+
+    protected _fetchAssetsTask = new Task(this, {
+        task: async ([], {signal}) => {
+            return await this._fetchAssets(true, signal);
+        },
+        args: () => []
+    });
+
+    protected async _fetchAssets(requireTunnelSupport = true, signal?: AbortSignal): Promise<Asset[]> {
+        const query = {
+            realm: {name: manager.displayRealm},
+            select: {attributes: ["tunnelingSupported"]},
+            types: this.GATEWAY_ASSET_TYPES,
+            attributes: requireTunnelSupport ? {
+                items: [
+                    {
+                        name: {
+                            predicateType: "string",
+                            value: "tunnelingSupported"
+                        },
+                        value: {
+                            predicateType: "boolean",
+                            value: true
+                        },
+                    },
+                    {
+                        name: {
+                            predicateType: "string",
+                            value: "gatewayStatus"
+                        },
+                        value: {
+                            predicateType: "string",
+                            value: "CONNECTED"
+                        },
+                    }
+                ]
+            } : undefined
+        } as AssetQuery;
+        return (await manager.rest.api.AssetResource.queryAssets(query)).data;
+    }
+
+}

package/src/settings/gauge-settings.ts

@@ -7,7 +7,6 @@ import {AttributesSelectEvent} from "../panels/attributes-panel";
 import {Attribute} from "@openremote/model";
 import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
 import {ThresholdChangeEvent} from "../panels/thresholds-panel";
-import "../panels/thresholds-panel";
 
 @customElement("gauge-settings")
 export class GaugeSettings extends WidgetSettings {
@@ -72,10 +71,27 @@ export class GaugeSettings extends WidgetSettings {
 
     protected onMinMaxValueChange(type: 'min' | 'max', ev: OrInputChangedEvent) {
         switch (type) {
-            case "max":
-                this.widgetConfig.max = ev.detail.value; break;
-            case "min":
-                this.widgetConfig.min = ev.detail.value; break;
+            case "max": {
+                this.widgetConfig.max = ev.detail.value;
+
+                // Make sure every threshold value is not higher than what is allowed.
+                const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => y[0] - x[0]);
+                sortedThresholds.forEach((t, index) => {
+                    t[0] = Math.max(Math.min(t[0], (ev.detail.value - index - 1)), this.widgetConfig.min);
+                });
+                break;
+            }
+            case "min": {
+                this.widgetConfig.min = ev.detail.value;
+
+                // Update the lowest (locked) threshold value to minimum value, and make sure every threshold value is not lower than what is allowed.
+                const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => (x[0] < y[0]) ? -1 : 1);
+                sortedThresholds[0][0] = ev.detail.value;
+                sortedThresholds.forEach((t, index) => {
+                    t[0] = Math.min(Math.max(t[0], (ev.detail.value + index)), this.widgetConfig.max);
+                })
+                break;
+            }
         }
         this.notifyConfigUpdate();
     }

package/src/settings/image-settings.ts

@@ -53,7 +53,7 @@ export class ImageSettings extends AssetWidgetSettings {
         return html`
             <div>
                 <!-- Attributes selector -->
-                <settings-panel displayName="'attributes" expanded="${true}">
+                <settings-panel displayName="attributes" expanded="${true}">
                     <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${false}" multi="${true}"
                                       @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
                     ></attributes-panel>

package/src/widgets/gateway-widget.ts

@@ -0,0 +1,386 @@
+import {customElement, state} from "lit/decorators.js";
+import {OrWidget, WidgetManifest} from "../util/or-widget";
+import {css, html, PropertyValues, TemplateResult} from "lit";
+import {WidgetSettings} from "../util/widget-settings";
+import {WidgetConfig} from "../util/widget-config";
+import {GatewaySettings} from "../settings/gateway-settings";
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import {GatewayTunnelInfo, GatewayTunnelInfoType} from "@openremote/model";
+import manager from "@openremote/core";
+import {when} from "lit/directives/when.js";
+import {i18next} from "@openremote/or-translate";
+import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
+
+const styling = css`
+    #gateway-widget-wrapper {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    #gateway-widget-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        max-height: 48px;
+        flex-wrap: wrap;
+        position: relative;
+    }
+`
+
+export interface GatewayWidgetConfig extends WidgetConfig {
+    gatewayId?: string;
+    type: GatewayTunnelInfoType;
+    target: string;
+    targetPort: number;
+}
+
+function getDefaultWidgetConfig(): GatewayWidgetConfig {
+    return {
+        type: GatewayTunnelInfoType.HTTPS,
+        target: "localhost",
+        targetPort: 443,
+    };
+}
+
+@customElement("gateway-widget")
+export class GatewayWidget extends OrWidget {
+
+    protected widgetConfig!: GatewayWidgetConfig;
+
+    @state()
+    protected _loading = true;
+
+    @state()
+    protected _activeTunnel?: GatewayTunnelInfo;
+
+    protected _startedByUser = false;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Gateway",
+            displayIcon: "lan-connect",
+            minColumnWidth: 1,
+            minColumnHeight: 1,
+            getContentHtml(config: GatewayWidgetConfig): OrWidget {
+                return new GatewayWidget(config);
+            },
+            getSettingsHtml(config: GatewayWidgetConfig): WidgetSettings {
+                return new GatewaySettings(config);
+            },
+            getDefaultConfig(): GatewayWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    refreshContent(force: boolean): void {
+        this.widgetConfig = JSON.parse(JSON.stringify(this.widgetConfig)) as GatewayWidgetConfig;
+    }
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    disconnectedCallback() {
+        if(this._activeTunnel) {
+            if(this._startedByUser) {
+                this._stopTunnel(this._activeTunnel).then(() => {
+                    console.warn("Stopped the active tunnel, as it was created through the widget.")
+                });
+            } else {
+                console.warn("Keeping the active tunnel open, as it is not started through the widget.")
+            }
+        }
+        super.disconnectedCallback();
+    }
+
+    protected firstUpdated(_changedProps: PropertyValues) {
+        if(this.widgetConfig) {
+
+            // Apply a timeout of 500 millis, so the tunnel has time to close upon disconnectedCallback() of a different widget.
+            setTimeout(() => {
+
+                // Check if the tunnel is already active upon widget initialization
+                const tunnelInfo = this._getTunnelInfoByConfig(this.widgetConfig);
+                this._getActiveTunnel(tunnelInfo).then(info => {
+                    if(info) {
+                        console.log("Existing tunnel found!", info);
+                        this._setActiveTunnel(info, true)
+                    }
+                }).catch(e => {
+                    console.error(e);
+                }).finally(() => {
+                    this._loading = false;
+                });
+
+            }, 500)
+        }
+    }
+
+    protected render(): TemplateResult {
+        const disabled = this.getEditMode?.() || !this._isConfigComplete(this.widgetConfig);
+        return html`
+            <div id="gateway-widget-wrapper">
+                <div id="gateway-widget-container">
+                    ${when(this._loading, () => html`
+                        <or-loading-indicator></or-loading-indicator>
+                    `, () => {
+                        if (this._activeTunnel) {
+                            return html`
+
+                                <or-mwc-input .type="${InputType.BUTTON}" icon="stop" label="${i18next.t('gatewayTunnels.stop')}" .disabled="${disabled}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onStopTunnelClick(ev)}"
+                                ></or-mwc-input>
+                                
+                                ${when(this.widgetConfig.type === GatewayTunnelInfoType.TCP, () => html`
+                                    <or-mwc-input .type="${InputType.BUTTON}" icon="content-copy" label="${i18next.t('gatewayTunnels.copyAddress')}" outlined .disabled="${disabled}"
+                                                  @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onCopyTunnelAddressClick(ev)}"
+                                    ></or-mwc-input>
+                                `, () => html`
+                                    <or-mwc-input .type="${InputType.BUTTON}" icon="open-in-new" label="${i18next.t('gatewayTunnels.open')}" outlined .disabled="${disabled}"
+                                                  @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelNavigateClick(ev)}"
+                                    ></or-mwc-input>
+                                `)}
+                                
+                            `;
+                        } else {
+                            return html`
+                                <or-mwc-input .type="${InputType.BUTTON}" label="${i18next.t('gatewayTunnels.start')}" outlined .disabled="${disabled}"
+                                              @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onStartTunnelClick(ev)}"
+                                ></or-mwc-input>
+                            `;
+                        }
+                    })}
+                </div>
+            </div>
+        `;
+    }
+
+    /**
+     * HTML callback function when 'copy address' button is pressed for a TCP tunnel.
+     */
+    protected _onCopyTunnelAddressClick(ev: OrInputChangedEvent) {
+        if (this._isConfigComplete(this.widgetConfig)) {
+            const tunnelInfo = this._getTunnelInfoByConfig(this.widgetConfig);
+            const address = this._getTunnelAddress(tunnelInfo);
+            if(address) {
+                navigator.clipboard.writeText(address).finally(() => {
+                    showSnackbar(undefined, i18next.t('gatewayTunnels.copySuccess'));
+                });
+            } else {
+                console.warn("Could not copy tunnel address as it could not be found.");
+                showSnackbar(undefined, i18next.t('errorOccurred'));
+            }
+        } else {
+            console.warn("Could not copy tunnel address as configuration is not complete.");
+            showSnackbar(undefined, i18next.t('errorOccurred'));
+        }
+    }
+
+    /**
+     * HTML callback function when 'start' button is pressed, meant to create / start a new tunnel.
+     */
+    protected _onStartTunnelClick(ev: OrInputChangedEvent) {
+        this._tryStartTunnel(this.widgetConfig);
+    }
+
+    /**
+     * HTML callback function when 'stop' button is pressed, meant to destroy the active tunnel.
+     */
+    protected _onStopTunnelClick(ev: OrInputChangedEvent) {
+        this._tryStopTunnel(this.widgetConfig);
+    }
+
+    /**
+     * HTML callback function when 'open' button is pressed, meant to start using the tunnel.
+     */
+    protected _onTunnelNavigateClick(ev: OrInputChangedEvent) {
+        if (this._isConfigComplete(this.widgetConfig)) {
+            this._navigateToTunnel(this._getTunnelInfoByConfig(this.widgetConfig));
+        } else {
+            console.warn("Could not navigate to tunnel as configuration is not complete.")
+        }
+    }
+
+    /**
+     * Internal function to set the active tunnel.
+     * Navigates the user to the tunnel after updating. This can be disabled using the {@link silent} parameter.
+     */
+    protected _setActiveTunnel(tunnelInfo?: GatewayTunnelInfo, silent = false) {
+        this._activeTunnel = tunnelInfo;
+        if(tunnelInfo && !silent) {
+            this._navigateToTunnel(tunnelInfo);
+        }
+    }
+
+    /**
+     * Function that tries to start the tunnel. It checks the configuration beforehand,
+     * and acts as a controller to call the correct functions throughout the starting process.
+     */
+    protected _tryStartTunnel(widgetConfig: GatewayWidgetConfig): void {
+        if (this._isConfigComplete(widgetConfig)) {
+
+            const tunnelInfo = this._getTunnelInfoByConfig(widgetConfig);
+            this._loading = true;
+
+            this._getActiveTunnel(tunnelInfo).then(activeTunnel => {
+
+                if (activeTunnel) {
+                    console.log("Found an active tunnel!", activeTunnel);
+                    this._setActiveTunnel(activeTunnel);
+                    this._loading = false;
+
+                } else {
+                    this._startTunnel(tunnelInfo).then(newTunnel => {
+
+                        if (newTunnel) {
+                            console.log("Started a new tunnel!", newTunnel);
+                            this._setActiveTunnel(newTunnel);
+                            this._startedByUser = true;
+
+                        } else {
+                            console.warn("No new tunnel!");
+                        }
+                    }).catch(e => {
+                        console.error(e);
+                        showSnackbar(undefined, i18next.t("errorOccurred"));
+                    }).finally(() => {
+                        this._loading = false;
+                    });
+                }
+
+            }).catch(e => {
+                console.error(e);
+                showSnackbar(undefined, i18next.t("errorOccurred"));
+                this._loading = false;
+            })
+        }
+    }
+
+    /**
+     * Internal function that starts the tunnel by communicating with the Manager API.
+     */
+    protected async _startTunnel(info: GatewayTunnelInfo): Promise<GatewayTunnelInfo | undefined> {
+        if (!info.realm || !info.gatewayId || !info.target || !info.targetPort) {
+            throw new Error("Could not start tunnel, as some provided information was not set.");
+        }
+        return (await manager.rest.api.GatewayServiceResource.startTunnel(info)).data;
+    }
+
+    /**
+     * Internal function that requests the Manager API for the active tunnel based on the {@link GatewayTunnelInfo} parameter.
+     * Returns `undefined` if no tunnel could be found on the Manager instance.
+     */
+    protected async _getActiveTunnel(info: GatewayTunnelInfo): Promise<GatewayTunnelInfo | undefined> {
+        if (!info.realm || !info.gatewayId || !info.target || !info.targetPort) {
+            throw new Error("Could not get active tunnel, as some provided information was not set.")
+        }
+        const response = await manager.rest.api.GatewayServiceResource.getActiveTunnelInfo(info.realm, info.gatewayId, info.target, info.targetPort);
+        if(response.status === 204) {
+            return undefined;
+        } else {
+            return response.data;
+        }
+    }
+
+    /**
+     * Function that tries to destroy the currently active tunnel.
+     */
+    protected _tryStopTunnel(config: GatewayWidgetConfig): void {
+        const tunnelInfo = this._getTunnelInfoByConfig(config);
+        this._loading = true;
+        this._stopTunnel(tunnelInfo)
+            .then(() => {
+                this._setActiveTunnel(undefined);
+                this._startedByUser = false;
+            })
+            .catch(e => {
+                console.warn(e);
+            })
+            .finally(() => {
+                this._loading = false;
+            });
+    }
+
+    /**
+     * Internal function that requests the Manager API to destroy a tunnel that is in line with the {@link GatewayTunnelInfo} parameter.
+     */
+    protected async _stopTunnel(info: GatewayTunnelInfo): Promise<void> {
+        return (await manager.rest.api.GatewayServiceResource.stopTunnel(info)).data;
+    }
+
+    /**
+     * Function that navigates the user to an HTTP web page that interacts with a service through the tunnel.
+     * It will open in a new browser tab automatically.
+     */
+    protected _navigateToTunnel(info: GatewayTunnelInfo): void {
+        if (!info.realm || !info.gatewayId || !info.target || !info.targetPort) {
+            console.warn("Could not navigate to tunnel, as some provided information was not set.");
+        }
+        const address = this._getTunnelAddress(info);
+        switch (info.type) {
+            case GatewayTunnelInfoType.HTTPS:
+            case GatewayTunnelInfoType.HTTP:
+                window.open(address)?.focus();
+                break;
+            default:
+                console.error("Unknown error when navigating to tunnel.");
+                break;
+        }
+    }
+
+    /**
+     * Internal function to get the tunnel address based on {@link GatewayTunnelInfo}
+     */
+    protected _getTunnelAddress(info: GatewayTunnelInfo): string | undefined {
+        switch (info.type) {
+            case GatewayTunnelInfoType.HTTPS:
+            case GatewayTunnelInfoType.HTTP:
+                return "//" + info.id + "." + window.location.host;
+            case GatewayTunnelInfoType.TCP:
+                return info.id + "." + window.location.hostname + ":" + info.assignedPort;
+        }
+    }
+
+    /**
+     * Internal function to check whether the {@link GatewayWidgetConfig} includes the necessary information to control the tunnel.
+     * Uses several `undefined` or empty checks. Useful for checking the object before interacting with Manager APIs.
+     */
+    protected _isConfigComplete(widgetConfig: GatewayWidgetConfig): boolean {
+        if (!widgetConfig.gatewayId) {
+            console.error("Could not start tunnel, since no gateway asset was configured.");
+            return false;
+        }
+        if (!widgetConfig.type) {
+            console.error("Could not start tunnel, since no gateway type / protocol was configured.");
+            return false;
+        }
+        if (!widgetConfig.target) {
+            console.error("Could not start tunnel, since no gateway target was configured.");
+            return false;
+        }
+        if (!widgetConfig.targetPort) {
+            console.error("Could not start tunnel, since no gateway target port was configured.");
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Internal function that parses a {@link GatewayWidgetConfig} into a new {@link GatewayTunnelInfo}.
+     */
+    protected _getTunnelInfoByConfig(config: GatewayWidgetConfig): GatewayTunnelInfo {
+        return {
+            realm: manager.displayRealm,
+            gatewayId: config.gatewayId,
+            type: config.type,
+            target: config.target,
+            targetPort: config.targetPort
+        } as GatewayTunnelInfo;
+    }
+
+}