openremote · richturner · Sep 5, 2025 · May 14, 2025 · May 14, 2025 · May 14, 2025
diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -14,9 +14,13 @@ COPY frontend/ ./
 # Define build arguments
 ARG ML_SERVICE_URL
 ARG ML_WEB_ROOT_PATH
+ARG ML_OR_KEYCLOAK_URL
+ARG ML_OR_URL
 
 RUN ML_SERVICE_URL=${ML_SERVICE_URL:-/services/ml-forecast} \
     ML_WEB_ROOT_PATH=${ML_WEB_ROOT_PATH:-/services/ml-forecast/ui} \
+    ML_OR_KEYCLOAK_URL=${ML_OR_KEYCLOAK_URL:-/auth} \
+    ML_OR_URL=${ML_OR_URL:-} \
     npm run build:prod
 
 # --- Python Build Phase -------------------------------------------------------

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -6,19 +6,21 @@ services:
       context: ..
       dockerfile: docker/Dockerfile
       args:
-        ML_SERVICE_URL: ${ML_SERVICE_URL:-/services/ml-forecast} # Url to reach the back-end service, should be the same as ML_API_ROOT_PATH
-        ML_WEB_ROOT_PATH: ${ML_WEB_ROOT_PATH:-/services/ml-forecast/ui} # Public path for the front-end (e.g. when behind a reverse proxy)
+        ML_OR_URL: ${ML_OR_URL} # OpenRemote URL
+        ML_OR_KEYCLOAK_URL: ${ML_OR_KEYCLOAK_URL} # OpenRemote Keycloak URL
+        ML_SERVICE_URL: ${ML_SERVICE_URL} # Url to reach the back-end service, should be the same as ML_API_ROOT_PATH
+        ML_WEB_ROOT_PATH: ${ML_WEB_ROOT_PATH} # Public path for the front-end (e.g. when behind a reverse proxy)
     container_name: service-ml-forecast
     ports:
       - "8000:8000"
     environment:
-      - ML_LOG_LEVEL=${ML_LOG_LEVEL:-INFO} # Log level to use
-      - ML_ENVIRONMENT=${ML_ENVIRONMENT:-production} # Environment to run the service in
-      - ML_API_ROOT_PATH=${ML_API_ROOT_PATH:-/services/ml-forecast} # Public path for the back-end (e.g. when behind a reverse proxy)
-      - ML_OR_URL=${ML_OR_URL:-http://host.docker.internal:8080} # OpenRemote URL
-      - ML_OR_KEYCLOAK_URL=${ML_OR_KEYCLOAK_URL:-http://host.docker.internal:8081} # OpenRemote Keycloak URL
-      - ML_OR_SERVICE_USER=${ML_OR_SERVICE_USER:-serviceuser} # OpenRemote service user
-      - ML_OR_SERVICE_USER_SECRET=${ML_OR_SERVICE_USER_SECRET:-secret} # OpenRemote service user secret
+      - ML_LOG_LEVEL=${ML_LOG_LEVEL} # Log level to use
+      - ML_ENVIRONMENT=${ML_ENVIRONMENT} # Environment to run the service in
+      - ML_API_ROOT_PATH=${ML_API_ROOT_PATH} # Public path for the back-end (e.g. when behind a reverse proxy)
+      - ML_OR_URL=${ML_OR_URL} # OpenRemote URL
+      - ML_OR_KEYCLOAK_URL=${ML_OR_KEYCLOAK_URL} # OpenRemote Keycloak URL
+      - ML_OR_SERVICE_USER=${ML_OR_SERVICE_USER} # OpenRemote service user
+      - ML_OR_SERVICE_USER_SECRET=${ML_OR_SERVICE_USER_SECRET} # OpenRemote service user secret
     volumes:
       # Model storage
       - ../deployment/data/models:/app/deployment/data/models

diff --git a/frontend/index.html b/frontend/index.html
@@ -3,6 +3,10 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <!-- Prevent index.html from being cached -->
+        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+        <meta http-equiv="Pragma" content="no-cache" />
+        <meta http-equiv="Expires" content="0" />
         <link rel="icon" href="<%= templateRootPath %>/assets/images/logo.svg" />
         <style>
             /* Global styles */

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,8 +5,7 @@
     "type": "module",
     "scripts": {
         "serve": "cross-env rspack serve",
-        "build:dev": "cross-env rspack build --mode development",
-        "build:prod": "cross-env SERVICE_URL=${SERVICE_URL:-/services/ml-forecast} ML_WEB_ROOT_PATH=${ML_WEB_ROOT_PATH:-/services/ml-forecast/ui} rspack build --mode production",
+        "build:prod": "cross-env ML_OR_KEYCLOAK_URL=${ML_OR_KEYCLOAK_URL:-/auth} ML_OR_URL=${ML_OR_URL} ML_SERVICE_URL=${ML_SERVICE_URL:-/services/ml-forecast} ML_WEB_ROOT_PATH=${ML_WEB_ROOT_PATH:-/services/ml-forecast/ui} rspack build --mode production",
         "build:analyze": "rspack build --mode production --analyze",
         "lint": "eslint && prettier . --check",
         "format": "prettier . --write"

diff --git a/frontend/rspack.config.js b/frontend/rspack.config.js
@@ -7,8 +7,10 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const isProduction = process.env.NODE_ENV === 'production';
-const serviceUrl = process.env.ML_SERVICE_URL || 'http://localhost:8000'; // Default to default dev backend
 const rootPath = process.env.ML_WEB_ROOT_PATH;
+const serviceUrl = process.env.ML_SERVICE_URL || 'http://localhost:8000'; // Default to default service backend
+const keycloakUrl = process.env.ML_OR_KEYCLOAK_URL || 'http://localhost:8081/auth'; // Default to openremote keycloak address
+const openremoteUrl = process.env.ML_OR_URL !== undefined ? process.env.ML_OR_URL : 'http://localhost:8080'; // Default to openremote url
 
 export default {
     mode: isProduction ? 'production' : 'development',
@@ -20,7 +22,6 @@ export default {
         filename: `bundle.[contenthash].js`,
         clean: true,
         path: path.resolve(__dirname, 'dist'),
-        // prefix for the bundle, use root path or fallback to '/'
         publicPath: rootPath ? rootPath : '/'
     },
     resolve: {
@@ -65,7 +66,9 @@ export default {
             patterns: [{ from: 'assets', to: 'assets' }]
         }),
         new rspack.DefinePlugin({
-            'process.env.ML_SERVICE_URL': JSON.stringify(serviceUrl)
+            'process.env.ML_SERVICE_URL': JSON.stringify(serviceUrl),
+            'process.env.ML_OR_KEYCLOAK_URL': JSON.stringify(keycloakUrl),
+            'process.env.ML_OR_URL': JSON.stringify(openremoteUrl)
         })
     ],
     devServer: {

diff --git a/frontend/src/common/constants.ts b/frontend/src/common/constants.ts
@@ -18,3 +18,8 @@
 export const APP_OUTLET = document.querySelector('#outlet') as HTMLElement;
 export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
 export const ML_SERVICE_URL = (process.env.ML_SERVICE_URL || '').replace(/\/$/, '');
+export const ML_OR_URL = process.env.ML_OR_URL || '';
+export const ML_OR_KEYCLOAK_URL = process.env.ML_OR_KEYCLOAK_URL || '';
+
+// Returns true if the app is embedded in an iframe
+export const IS_EMBEDDED = window.top !== window.self;
diff --git a/frontend/src/common/theme.ts b/frontend/src/common/theme.ts
@@ -18,23 +18,13 @@
 import { IconSet, IconSets, OrIconSet, createSvgIconSet } from '@openremote/or-icon';
 import { html } from 'lit';
 import * as Core from '@openremote/core';
-import { APIService } from '../services/api-service';
 import { getRootPath } from './util';
+import { manager } from '@openremote/core';
 
 /**
- * Base theme settings
- */
-const BASE_THEME = {
-    color1: Core.DefaultColor1,
-    color2: Core.DefaultColor2,
-    color3: Core.DefaultColor3,
-    color4: Core.DefaultColor4,
-    color5: Core.DefaultColor5,
-    color6: Core.DefaultColor6
-};
-
-/**
- * Setup the MDI-Icons for or-icon element
+ * Initialize icon sets, overriding the default createMdiIconSet with a custom implementation to allow custom urls
+ * Creates a custom MDI icon set that uses static font files from the assets directory
+ * and registers both MDI and OR icon sets for use with or-icon elements
  */
 export function setupORIcons() {
     function createMdiIconSet(): IconSet {
@@ -67,6 +57,18 @@ export function setupORIcons() {
     IconSets.addIconSet('or', createSvgIconSet(OrIconSet.size, OrIconSet.icons));
 }
 
+/**
+ * Base theme settings
+ */
+const BASE_THEME = {
+    color1: Core.DefaultColor1,
+    color2: Core.DefaultColor2,
+    color3: Core.DefaultColor3,
+    color4: Core.DefaultColor4,
+    color5: Core.DefaultColor5,
+    color6: Core.DefaultColor6
+};
+
 /**
  * Theme settings
  */
@@ -92,9 +94,11 @@ export async function setRealmTheme(realm: string) {
     }
 
     try {
-        const config = await APIService.getOpenRemoteRealmConfig(realm);
-        if (config && config.styles) {
-            const cssString = config.styles;
+        const config = (await manager.rest.api.ConfigurationResource.getManagerConfig()).data;
+        const styles = config.realms?.[realm]?.styles;
+
+        if (styles) {
+            const cssString = styles;
             const colorRegex = /--or-app-color(\d+):\s*(#[0-9a-fA-F]{6})/g;
             let match: RegExpExecArray | null;
 
@@ -128,7 +132,6 @@ export async function setRealmTheme(realm: string) {
     } catch {
         console.warn('Was unable to retrieve realm specific theme settings, falling back to default');
     }
-
     setTheme(theme);
 }
 

diff --git a/frontend/src/common/util.ts b/frontend/src/common/util.ts
@@ -24,11 +24,24 @@
 export function getRootPath() {
     const scriptElement = document.querySelector('script[src*="bundle"]');
 
-    if (scriptElement && scriptElement.getAttribute('src')) {
+    if (scriptElement?.getAttribute('src')) {
         const scriptPath = new URL(scriptElement.getAttribute('src')!, window.location.href).pathname;
         // Positive lookahead to match everything up to bundle.js
-        const match = scriptPath.match(/(.*?)(?=bundle)/);
-        return match ? (match[1].endsWith('/') ? match[1].slice(0, -1) : match[1]) : '';
+        const regex = /(.*?)(?=bundle)/;
+        const match = regex.exec(scriptPath);
+        let rootPath = '';
+        if (match) {
+            rootPath = match[1].endsWith('/') ? match[1].slice(0, -1) : match[1];
+        }
+        return rootPath;
     }
     return '';
 }
+
+/**
+ * Get the realm search param from the url (?realm=)
+ * @returns The realm search param
+ */
+export const getRealmSearchParam = () => {
+    return new URLSearchParams(window.location.search).get('realm');
+};
diff --git a/frontend/src/components/configs-table.ts b/frontend/src/components/configs-table.ts
@@ -18,10 +18,11 @@
 import { OrMwcTable, TableColumn, TableConfig, TableRow } from '@openremote/or-mwc-components/or-mwc-table';
 import { css, html, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { BasicAsset, ModelConfig } from '../services/models';
+import { ModelConfig } from '../services/models';
 import { getRootPath } from '../common/util';
 import { Router } from '@vaadin/router';
 import { InputType } from '@openremote/or-mwc-components/or-mwc-input';
+import * as Model from '@openremote/model';
 
 @customElement('configs-table')
 export class ConfigsTable extends OrMwcTable {
@@ -88,7 +89,7 @@ export class ConfigsTable extends OrMwcTable {
     public modelConfigs: ModelConfig[] = [];
 
     @property({ type: Array })
-    public configAssets: BasicAsset[] = [];
+    public configAssets: Model.Asset[] = [];
 
     @property({ type: String })
     public realm: string = '';

diff --git a/frontend/src/components/custom-duration-input.ts b/frontend/src/components/custom-duration-input.ts
@@ -26,17 +26,37 @@ export enum DurationInputType {
 }
 
 // ISO 8601
-enum TimeDurationUnit {
-    MINUTE = 'M',
-    HOUR = 'H'
+export enum TimeDurationUnit {
+    MINUTE = 'PT%M',
+    HOUR = 'PT%H',
+    DAY = 'P%D',
+    WEEK = 'P%W',
+    MONTH = 'P%M',
+    YEAR = 'P%Y'
 }
 
+// Display name for the ISO 8601 units
+const TimeDurationUnitDisplay: Record<TimeDurationUnit, string> = {
+    [TimeDurationUnit.MINUTE]: 'Minutes',
+    [TimeDurationUnit.HOUR]: 'Hours',
+    [TimeDurationUnit.DAY]: 'Days',
+    [TimeDurationUnit.WEEK]: 'Weeks',
+    [TimeDurationUnit.MONTH]: 'Months',
+    [TimeDurationUnit.YEAR]: 'Years'
+};
+
 // Pandas Frequency
-enum PandasTimeUnit {
-    MINUTE = 'min',
-    HOUR = 'h'
+export enum PandasTimeUnit {
+    MINUTE = '%min',
+    HOUR = '%h'
 }
 
+// Display name for the Pandas units
+const PandasTimeUnitDisplay: Record<PandasTimeUnit, string> = {
+    [PandasTimeUnit.MINUTE]: 'Minutes',
+    [PandasTimeUnit.HOUR]: 'Hours'
+};
+
 // This is a input component that renders both a number input and a dropdown for the unit of the duration
 @customElement('custom-duration-input')
 export class CustomDurationInput extends LitElement {
@@ -79,12 +99,17 @@ export class CustomDurationInput extends LitElement {
                 break;
         }
 
+        if (!this.unit || !this.number) {
+            return;
+        }
+
+        // Replace the % in the unit with the number and set the value
         switch (this.type) {
             case DurationInputType.ISO_8601:
-                this.value = `PT${this.number}${this.unit}`;
+                this.value = `${this.unit.replace('%', this.number.toString())}`;
                 break;
             case DurationInputType.PANDAS_FREQ:
-                this.value = `${this.number}${this.unit}`;
+                this.value = `${this.unit.replace('%', this.number.toString())}`;
         }
 
         // Fire event to notify parent component that the value has changed
@@ -105,20 +130,29 @@ export class CustomDurationInput extends LitElement {
     @property({ type: String })
     public value: string = '';
 
+    @property({ type: Array })
+    public iso_units: TimeDurationUnit[] = [TimeDurationUnit.MINUTE, TimeDurationUnit.HOUR];
+
+    @property({ type: Array })
+    public pandas_units: PandasTimeUnit[] = [PandasTimeUnit.MINUTE, PandasTimeUnit.HOUR];
+
     protected number: number | null = null;
 
     protected unit: TimeDurationUnit | PandasTimeUnit | null = null;
 
     // Extract the number from the ISO 8601 Duration string
     getNumberFromDuration(duration: string): number | null {
-        const match = /PT(\d+)([HM])/.exec(duration);
+        const match = /P(?:T)?(\d+)([HMDWMOY]+)/.exec(duration);
         return match ? parseInt(match[1], 10) : null;
     }
 
     // Extract the unit from the ISO 8601 Duration string
     getUnitFromDuration(duration: string): TimeDurationUnit | null {
-        const match = /PT(\d+)([HM])/.exec(duration);
-        return match ? (match[2] as TimeDurationUnit) : null;
+        const match = /P(?:T)?(\d+)([HMDWMOY]+)/.exec(duration);
+
+        // replace the number in the full match with % to get the unit
+        const unit = match?.[0]?.replace(match?.[1], '%');
+        return unit as TimeDurationUnit;
     }
 
     // Extract the number from the Pandas Frequency string
@@ -130,7 +164,21 @@ export class CustomDurationInput extends LitElement {
     // Extract the unit from the Pandas Frequency string
     getUnitFromPandasFrequency(freq: string): PandasTimeUnit | null {
         const match = /(\d+)(min|h)/.exec(freq);
-        return match ? (match[2] as PandasTimeUnit) : null;
+
+        // replace the number in the full match with % to get the unit
+        const unit = match?.[0]?.replace(match?.[1], '%');
+        return unit as PandasTimeUnit;
+    }
+
+    // Get available unit options based on the units property or defaults
+    getUnitOptions(): [string, string][] {
+        if (this.type === DurationInputType.ISO_8601) {
+            return this.iso_units.map((unit) => [unit, TimeDurationUnitDisplay[unit]]);
+        } else if (this.type === DurationInputType.PANDAS_FREQ) {
+            return this.pandas_units.map((unit) => [unit, PandasTimeUnitDisplay[unit]]);
+        }
+
+        return [];
     }
 
     render() {
@@ -153,15 +201,7 @@ export class CustomDurationInput extends LitElement {
                 label="Unit"
                 .value=${this.unit}
                 @or-mwc-input-changed=${this.onInput}
-                .options="${this.type === DurationInputType.ISO_8601
-                    ? [
-                          [TimeDurationUnit.MINUTE, 'Minutes'],
-                          [TimeDurationUnit.HOUR, 'Hours']
-                      ]
-                    : [
-                          [PandasTimeUnit.MINUTE, 'Minutes'],
-                          [PandasTimeUnit.HOUR, 'Hours']
-                      ]}"
+                .options="${this.getUnitOptions()}"
             ></or-mwc-input>
         `;
     }