asab_webui_shell 26.1.3 → 26.3.1-alpha.2

package/dist/config/ConfigService.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asab_webui_components = require("asab_webui_components");
 var _ConfigReducer = _interopRequireDefault(require("./ConfigReducer"));
 var _actions = require("../actions");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 class ConfigService extends _asab_webui_components.Service {
   constructor(app) {
     var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ConfigService";
@@ -19,53 +16,25 @@ class ConfigService extends _asab_webui_components.Service {
     this.Config = new Config();
   }
   initialize() {
-    var _document$getElements, _document$getElements2, _document$getElements3, _document$getElements4, _document$getElements5, _document$getElements6;
-    // Initialization of dynamic configuration
-    var headerLogoFull = (_document$getElements = document.getElementsByName('header-logo-full')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
-    var headerLogoMini = (_document$getElements2 = document.getElementsByName('header-logo-minimized')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.content;
-    var headerLogoFullDark = (_document$getElements3 = document.getElementsByName('header-logo-full-dark')[0]) === null || _document$getElements3 === void 0 ? void 0 : _document$getElements3.content;
-    var headerLogoMiniDark = (_document$getElements4 = document.getElementsByName('header-logo-minimized-dark')[0]) === null || _document$getElements4 === void 0 ? void 0 : _document$getElements4.content;
-    var title = (_document$getElements5 = document.getElementsByName('title')[0]) === null || _document$getElements5 === void 0 ? void 0 : _document$getElements5.content;
-    var customCSS = (_document$getElements6 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements6 === void 0 ? void 0 : _document$getElements6.content;
+    var _document$getElements, _document$getElements2;
+    /*
+    	Initialization of dynamic configuration
+    		Dynamic branding of the header logo can be done via nginx location configuration.
+    	The support of meta tags for configuration of the header logo brand image has been striped of in 09/2025
+    	from ASAB WebUI Shell version 26.3.1
+    		Example of setting up the nginx location for full logo. Same way it can be done for minimized variation.
+    		...
+    		location /<app path>/media/logo/header-logo-full-dark.svg {
+    		alias /<path to logo>/<logo name for dark theme>.svg;
+    	}
+    		location /<app path>/media/logo/header-logo-full.svg {
+    		alias /<path to logo>/<logo name for light theme>.svg;
+    	}
+    		...
+    	*/
+    var title = (_document$getElements = document.getElementsByName('title')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
+    var customCSS = (_document$getElements2 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.content;
     var dynamicConfig = {};
-    // determine if any logos have been dynamically configured and assign brandImage property as an empty object
-    if (headerLogoFull != undefined && headerLogoFull != "" || headerLogoFullDark != undefined && headerLogoFullDark != "" || headerLogoMini != undefined && headerLogoMini != "" || headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
-      dynamicConfig.brandImage = {};
-    }
-    // If header's full light logo has been configured, add it to dynamic config object
-    if (headerLogoFull != undefined && headerLogoFull != "") {
-      Object.assign(dynamicConfig.brandImage, {
-        "light": {
-          "full": headerLogoFull
-        }
-      });
-    }
-    // If header's full dark logo has been configured, extend/add it to dynamic config's brandImage property
-    if (headerLogoFullDark != undefined && headerLogoFullDark != "") {
-      Object.assign(dynamicConfig.brandImage, {
-        "dark": {
-          "full": headerLogoFullDark
-        }
-      });
-    }
-    // If header's minimized light logo has been configured, extend/add it to dynamic config brandImage property
-    if (headerLogoMini != undefined && headerLogoMini != "") {
-      var _dynamicConfig$brandI;
-      Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
-        "light": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI = dynamicConfig.brandImage) === null || _dynamicConfig$brandI === void 0 ? void 0 : _dynamicConfig$brandI.light), {}, {
-          "minimized": headerLogoMini
-        })
-      }));
-    }
-    // If header's minimized dark logo has been configured, extend/add it to dynamic config brandImage property
-    if (headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
-      var _dynamicConfig$brandI2;
-      Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
-        "dark": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI2 = dynamicConfig.brandImage) === null || _dynamicConfig$brandI2 === void 0 ? void 0 : _dynamicConfig$brandI2.dark), {}, {
-          "minimized": headerLogoMiniDark
-        })
-      }));
-    }
 
     // Add custom title
     if (title != undefined && title != "") {

package/dist/containers/Application.js

@@ -25,9 +25,7 @@ var _reducer4 = _interopRequireDefault(require("./Navigation/reducer"));
 var _reducer5 = _interopRequireDefault(require("./Router/reducer"));
 var _reducer6 = _interopRequireDefault(require("./FullscreenMode/reducer"));
 var _reducer7 = _interopRequireDefault(require("./AdvancedMode/reducer"));
-var _reducer8 = _interopRequireDefault(require("./AttentionRequired/reducer"));
 var _ReduxService = _interopRequireDefault(require("../services/ReduxService"));
-var _AttentionRequiredService = _interopRequireDefault(require("../services/AttentionRequiredService"));
 var _ConfigService = _interopRequireDefault(require("../config/ConfigService"));
 var _HeaderService = _interopRequireDefault(require("../services/HeaderService"));
 var _ThemeService = _interopRequireDefault(require("../theme/ThemeService"));
@@ -43,42 +41,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 class Application extends _react.Component {
-  /*
-  Example of use hasSidebar.
-  It must be set in Application.
-  If not set, it is considered as true.
-  
-  ...
-  
-  const config = {
-  	hasSidebar: false,
-  }
-  
-  
-  ReactDOM.render((
-  	<BrowserRouter>
-  		<Application modules={modules} {...config}/>
-  	</BrowserRouter>
-  ), document.getElementById('app'));
-  
-  ...
-  
-  Example of settings in Module of the Application
-  Following above settings, this will show the item in
-  the header and when the screen is diminished (e.g. screening
-  using the mobile phone), the item is moved to the sidebar and
-  it is accessible by the sidebar toggler button.
-  
-  ...
-  
-  	app.Navigation.addItem({
-  		name: 'Item 1',
-  		url: '',
-  	});
-  
-  ...
-  	*/
-
   constructor(props) {
     super(props);
 
@@ -91,7 +53,6 @@ class Application extends _react.Component {
     this.Config = this.ConfigService.Config;
 
     // Register reducers which are not part of any app service
-    this.ReduxService.addReducer("attentionrequired", _reducer8.default);
     this.ReduxService.addReducer("alerts", _reducer.default);
     this.ReduxService.addReducer("advmode", _reducer7.default);
     this.ReduxService.addReducer("fullscreenmode", _reducer6.default);
@@ -104,7 +65,6 @@ class Application extends _react.Component {
     this.SplashscreenRequestors = new Set(); // If not empty, the splash screen will be rendered
     this.AxiosInterceptors = new Set();
     this.WebSocketInterceptors = new Set();
-    this.AttentionRequiredService = new _AttentionRequiredService.default(this, "AttentionRequired");
     this.HeaderService = new _HeaderService.default(this, "HeaderService");
     this.ThemeService = new _ThemeService.default(this, "ThemeService");
     this.BrandingService = new _BrandingService.default(this, "BrandingService");
@@ -280,7 +240,18 @@ class Application extends _react.Component {
     	define recognition of the requests from the service perspective
     */
     axios.interceptors.request.use(function (config) {
-      that.pushNetworkingIndicator();
+      var _config$headers, _config$headers2;
+      /* Usage of networking indicator is optional and can be set as following among other headers:
+      	headers: { 'X-Networking-Indicator': 'off' }
+      */
+      var networkingIndicatorOff = (config === null || config === void 0 || (_config$headers = config.headers) === null || _config$headers === void 0 ? void 0 : _config$headers['X-Networking-Indicator']) === 'off';
+      // Store flag in config for response interceptors to access
+      config._networkingIndicatorOff = networkingIndicatorOff;
+      if (!networkingIndicatorOff) {
+        that.pushNetworkingIndicator();
+      }
+      // Remove the X-Networking-Indicator header before sending to service (its only for internal use)
+      config === null || config === void 0 || (_config$headers2 = config.headers) === null || _config$headers2 === void 0 || delete _config$headers2['X-Networking-Indicator'];
       config.headers['X-App'] = "webui"; // Include X-App header in every axios API request
       config.headers['X-Request-Id'] = that._generateUID(); // Include X-Request-Id header in every axios API request
       return config;
@@ -292,7 +263,9 @@ class Application extends _react.Component {
     axios.interceptors.response.use(function (response) {
       var _response$headers$con;
       // Call the `popNetworkingIndicator` method to remove the networking indicator (e.g., loading spinner)
-      that.popNetworkingIndicator();
+      if (!response.config._networkingIndicatorOff) {
+        that.popNetworkingIndicator();
+      }
 
       /*
       	Custom flag to control JSON parsing for specific requests.
@@ -333,8 +306,10 @@ class Application extends _react.Component {
       // If the request was satisfied (application/json and presence of BigInt) return the modified object. If not, we return unchanged object
       return response;
     }, function (error) {
-      var _error$response, _error$response2;
-      that.popNetworkingIndicator();
+      var _error$config, _error$response, _error$response2;
+      if (!((_error$config = error.config) !== null && _error$config !== void 0 && _error$config._networkingIndicatorOff)) {
+        that.popNetworkingIndicator();
+      }
       var contentType = error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 || (_error$response = _error$response.headers) === null || _error$response === void 0 ? void 0 : _error$response['content-type'];
       // Check if the response content type is 'application/json' and data is a string
       if (contentType !== null && contentType !== void 0 && contentType.startsWith('application/json') && typeof (error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) === 'string') {

package/dist/containers/Application.scss

@@ -45,6 +45,16 @@
 			opacity: 0%;
 		}
 	}
+
+	&.sidebar-hidden {
+		> #app-sidebar {
+			display: none;
+		}
+
+		> #app-main {
+			grid-area: 2 / 1 / 4 / 3;
+		}
+	}
 }
 
 body {

package/dist/containers/Header/ApplicationScreenTitle/ApplicationScreenTitle.js

@@ -9,6 +9,28 @@ var _reactI18next = require("react-i18next");
 var _asab_webui_components = require("asab_webui_components");
 require("./ApplicationScreenTitle.scss");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/*
+	Example of use hasHeaderTitle.
+	It must be set in App configuration.
+	If not set to `false` or at all, it is considered as true.
+
+	...
+
+	const ConfigDefaults = {
+		...
+		hasHeaderTitle: false,
+	}
+
+	root.render(
+		<HashRouter>
+			<Application
+				configdefaults={ConfigDefaults} 
+				modules={modules}
+			/>
+		</HashRouter>
+	);
+*/
+
 var ApplicationScreenTitle = props => {
   var _props$routes;
   var subtitle = (0, _asab_webui_components.useAppSelector)(state => {
@@ -19,6 +41,10 @@ var ApplicationScreenTitle = props => {
     var _state$config;
     return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
   });
+  var hasHeaderTitle = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$config2;
+    return state === null || state === void 0 || (_state$config2 = state.config) === null || _state$config2 === void 0 ? void 0 : _state$config2.hasHeaderTitle;
+  });
   var {
     t
   } = (0, _reactI18next.useTranslation)();
@@ -33,6 +59,11 @@ var ApplicationScreenTitle = props => {
   (0, _react.useEffect)(() => {
     document.title = title && routeName ? "".concat(title, " | ").concat(routeName) : title;
   }, [routeName, t]);
+
+  // If specifically declared in the configuration, that header title should not be available, dont display header title
+  if (hasHeaderTitle === false) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "application-screen-title text-primary"
   }, /*#__PURE__*/_react.default.createElement("h4", {

package/dist/containers/Sidebar/SidebarItem.js

@@ -38,7 +38,7 @@ var SidebarItem = _ref => {
   var [isActive, setActive] = (0, _react.useState)(false);
   var lowercasedItemName = item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase();
   // Attention requred flag
-  var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : attentionRequired["beacon.".concat(lowercasedItemName)];
+  var itemBeacon = beacon ? beacon["beacon.".concat(lowercasedItemName)] : attentionRequired === null || attentionRequired === void 0 ? void 0 : attentionRequired["beacon.".concat(lowercasedItemName)];
   (0, _react.useEffect)(() => {
     // TODO: refactor the handling of active and open states, since it does not behave as expected in some cases
     if (isOpen && !isActive) {

package/dist/containers/Sidebar/index.js

@@ -14,6 +14,28 @@ var _BrandImage = require("../../components/branding/BrandImage");
 require("./sidebar.scss");
 var _SidebarItemRenderer = require("./SidebarItemRenderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/*
+	Example of use hasSidebar.
+	It must be set in App configuration.
+	If not set to `false` or at all, it is considered as true.
+
+	...
+
+	const ConfigDefaults = {
+		...
+		hasSidebar: false,
+	}
+
+	root.render(
+		<HashRouter>
+			<Application
+				configdefaults={ConfigDefaults} 
+				modules={modules}
+			/>
+		</HashRouter>
+	);
+*/
+
 function Sidebar(props) {
   var [isSmallResolution, setIsSmallResolution] = (0, _react.useState)(false);
   var [sidebarBottomBranding, setSidebarBottomBranding] = (0, _react.useState)({});
@@ -22,6 +44,10 @@ function Sidebar(props) {
     var _state$navigation;
     return (_state$navigation = state.navigation) === null || _state$navigation === void 0 ? void 0 : _state$navigation.navItems;
   });
+  var hasSidebar = (0, _asab_webui_components.useAppSelector)(state => {
+    var _state$config;
+    return state === null || state === void 0 || (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.hasSidebar;
+  });
   var sessionExpired = (0, _asab_webui_components.useAppSelector)(state => {
     var _state$auth;
     return (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.sessionExpired;
@@ -30,6 +56,22 @@ function Sidebar(props) {
   var {
     dispatch
   } = (0, _asab_webui_components.useAppStore)();
+
+  // Handling sidebar-hidden app class
+  (0, _react.useEffect)(() => {
+    var appElement = document.getElementById("app");
+    if (!appElement) return;
+    if (hasSidebar === false) {
+      appElement.classList.add("sidebar-hidden");
+    } else {
+      appElement.classList.remove("sidebar-hidden");
+    }
+  }, [hasSidebar]);
+
+  // If specifically declared in the configuration, that sidebar should not be available, dont display sidebar at all
+  if (hasSidebar === false) {
+    return null;
+  }
   (0, _react.useEffect)(() => {
     // Collapse sidebar if innerWidth is smaller or equal to 944px on page initialization
     if (window.innerWidth <= 944) {

package/dist/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "Application", {
     return _Application.default;
   }
 });
+Object.defineProperty(exports, "AttentionRequiredModule", {
+  enumerable: true,
+  get: function get() {
+    return _index2.default;
+  }
+});
 Object.defineProperty(exports, "AuthModule", {
   enumerable: true,
   get: function get() {
@@ -46,4 +52,5 @@ var _BrandImage = require("./components/branding/BrandImage");
 var _i18n = _interopRequireDefault(require("./modules/i18n"));
 var _tenant = _interopRequireDefault(require("./modules/tenant"));
 var _auth = _interopRequireDefault(require("./modules/auth"));
-var _about = _interopRequireDefault(require("./modules/about"));
+var _about = _interopRequireDefault(require("./modules/about"));
+var _index2 = _interopRequireDefault(require("./modules/attentionrequired/index.js"));

package/dist/modules/attentionrequired/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _asab_webui_components = require("asab_webui_components");
+var _service = _interopRequireDefault(require("./service.js"));
+var _reducer = _interopRequireDefault(require("./reducer.js"));
+class AttentionRequiredModule extends _asab_webui_components.Module {
+  constructor(app) {
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "AttentionRequiredModule";
+    super(app, name);
+    this.App = app;
+    this.AttentionRequiredService = new _service.default(app, "AttentionRequiredService");
+    this.App.ReduxService.addReducer("attentionrequired", _reducer.default);
+  }
+}
+exports.default = AttentionRequiredModule;

package/dist/modules/attentionrequired/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Module } from 'asab_webui_components';
+import AttentionRequiredService from './service.jsx';
+import reducer from './reducer.jsx';
+
+export default class AttentionRequiredModule extends Module {
+
+	constructor(app, name = "AttentionRequiredModule") {
+		super(app, name);
+		this.App = app;
+
+		this.AttentionRequiredService = new AttentionRequiredService(app, "AttentionRequiredService");
+
+		this.App.ReduxService.addReducer("attentionrequired", reducer);
+	}
+
+}

package/dist/modules/attentionrequired/reducer.jsx

@@ -0,0 +1,20 @@
+import { SET_ATTENTION_REQUIRED_BEACON } from "../../actions";
+
+const initialState = {
+	beacon: {},
+}
+
+// Reducer for attention required, returning beacon
+export default function attentionRequiredReducer(state = initialState, action) {
+	switch (action.type) {
+		case SET_ATTENTION_REQUIRED_BEACON: {
+			return {
+				...state,
+				beacon: action.beacon
+			}
+		}
+
+		default:
+			return state;
+	}
+}

package/dist/{services/AttentionRequiredService.js → modules/attentionrequired/service.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _asab_webui_components = require("asab_webui_components");
-var _actions = require("../actions");
+var _actions = require("../../actions");
 // Service handling attention required
 class AttentionRequiredService extends _asab_webui_components.Service {
   constructor(app) {
@@ -101,6 +101,7 @@ class AttentionRequiredService extends _asab_webui_components.Service {
   distributeData(data) {
     var _this$App2, _this$App2$dispatch;
     var transformedData = this.transformData(data);
+    // TODO: use a pubsub instead of the appstore dispatch
     (_this$App2 = this.App) === null || _this$App2 === void 0 || (_this$App2 = _this$App2.AppStore) === null || _this$App2 === void 0 || (_this$App2$dispatch = _this$App2.dispatch) === null || _this$App2$dispatch === void 0 || _this$App2$dispatch.call(_this$App2, {
       type: _actions.SET_ATTENTION_REQUIRED_BEACON,
       beacon: transformedData

package/dist/modules/attentionrequired/service.jsx

@@ -0,0 +1,141 @@
+import { Service } from 'asab_webui_components';
+import { SET_ATTENTION_REQUIRED_BEACON } from '../../actions';
+
+// Service handling attention required
+export default class AttentionRequiredService extends Service {
+
+	constructor(app, serviceName="AttentionRequiredService"){
+		super(app, serviceName);
+		this.beaconWebSocket = null; // beacon websocket variable
+		this.reconnectTimeout = null; // timeout variable
+		this.reconnectInterval = 5000; // initial reconnection interval (5 seconds)
+	}
+
+	// Start beacon websocket connection on initialization
+	initialize() {
+		this.connectBeaconWebSocket();
+	}
+
+	// Method for connection to beacon websocket
+	connectBeaconWebSocket() {
+		// Retrieve current tenant
+		const currentTenant = this.App?.Services?.TenantService?.getCurrentTenant();
+		// Gracefully reconnect if tenant was not found
+		if (!currentTenant) {
+			console.error("Beacon WebSocket error: Tenant was not found!");
+			this.reconnectBeaconWebSocket();
+			return;
+		}
+
+		const BeaconServiceClient = this.App.createWebSocket('asab-remote-control', `/beacon/${currentTenant}/ws`);
+		this.beaconWebSocket = BeaconServiceClient;
+
+		this.beaconWebSocket.onopen = () => {
+			// TODO: may be removed
+			console.log('Beacon WebSocket connection established.');
+		};
+
+		this.beaconWebSocket.onmessage = (message) => {
+			try {
+				const data = JSON.parse(message.data);
+				// TODO: implement some type based recognition
+				this.distributeData(data);
+			} catch (e) {
+				console.error("Error parsing Beacon WebSocket message data:", e);
+				this.distributeData({});
+			}
+		};
+
+		this.beaconWebSocket.onerror = (error) => {
+			console.error("Beacon WebSocket error:", error);
+			console.error("Beacon WebSocket is attempting to reconnect...");
+			this.distributeData({});
+			this.reconnectBeaconWebSocket();
+		};
+
+		this.beaconWebSocket.onclose = () => {
+			/*
+				WebSocket connection is closed by the browser automatically when user
+				leaves the application (not the screen).
+			*/
+			if (this.beaconWebSocket) {
+				// Close the WebSocket connection
+				this.beaconWebSocket.close();
+
+				// Clean up event listeners
+				this.beaconWebSocket.onopen = null;
+				this.beaconWebSocket.onmessage = null;
+				this.beaconWebSocket.onerror = null;
+				this.beaconWebSocket.onclose = null;
+
+				// Set WebSocket reference to null to free up memory
+				this.beaconWebSocket = null;
+			}
+
+			// Clear the reconnect timeout if it exists
+			if (this.reconnectTimeout) {
+				clearTimeout(this.reconnectTimeout);
+				this.reconnectTimeout = null;
+			}
+
+			console.log("Beacon WebSocket connection closed.");
+		};
+	}
+
+	// Method for reconnection to beacon websocket
+	reconnectBeaconWebSocket() {
+		if (this.reconnectTimeout) {
+			clearTimeout(this.reconnectTimeout);
+		}
+		this.reconnectTimeout = setTimeout(() => {
+			this.connectBeaconWebSocket();
+		}, this.reconnectInterval); // Retry connection after the reconnection interval
+
+		// Increase reconnection time by 5s, the limit is 60s (so that we dont overload the server)
+		if ((this.reconnectInterval + 5000) <= 60000) {
+			this.reconnectInterval += 5000;
+		}
+	}
+
+	// Method for distributing the data into Application store
+	distributeData(data) {
+		const transformedData = this.transformData(data);
+		// TODO: use a pubsub instead of the appstore dispatch
+		this.App?.AppStore?.dispatch?.({ type: SET_ATTENTION_REQUIRED_BEACON, beacon: transformedData });
+	}
+
+	// Transform and group beacon data
+	transformData(inputData) {
+		// Validate if input data are array
+		if (!Array.isArray(inputData)) {
+			return {};
+		}
+
+		return inputData.reduce((acc, entry) => {
+			const { type, _c, reference_path } = entry;
+
+			// Identify the dynamic key (it could be 'library', 'configuration', 'services', etc.)
+			const dynamicKey = Object.keys(entry).find(key => (typeof entry[key] === 'object') && (entry[key] !== null) && !Array.isArray(entry[key]));
+
+			if (!dynamicKey) {
+				// Skip if no valid dynamic key is found
+				return acc;
+			}
+
+			const data = entry[dynamicKey];
+			// Ensure type is present in the accumulator
+			if (!acc[type]) {
+				acc[type] = {
+					count: 0,
+					data: []
+				};
+			}
+			// Push each entry into the data array
+			acc[type].data.push(data);
+			// Increment count for the type
+			acc[type].count += 1;
+
+			return acc;
+		}, {});
+	};
+}

package/package.json

@@ -1,57 +1,57 @@
 {
-  "name": "asab_webui_shell",
-  "version": "26.1.3",
-  "license": "BSD-3-Clause",
-  "description": "TeskaLabs ASAB WebUI Shell Application",
-  "contributors": [
-    {
-      "name": "TeskaLabs",
-      "email": "info@teskalabs.com",
-      "url": "https://teskalabs.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:TeskaLabs/asab-webui-shell-lib.git"
-  },
-  "bugs": {
-    "url": "https://github.com/TeskaLabs/asab-webui-shell-lib/issues"
-  },
-  "homepage": "https://github.com/TeskaLabs/asab-webui-shell-lib",
-  "main": "dist/index.js",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "i18next-browser-languagedetector": "^6.1.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.22.11",
-    "@babel/core": "^7.22.11",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "copyfiles": "^2.4.1",
-    "rimraf": "^5.0.0"
-  },
-  "peerDependencies": {
-    "asab_webui_components": "^26.1.1",
-    "@babel/runtime": "^7.22.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "axios": "^1.8.4",
-    "i18next": "^20.3.5",
-    "react-i18next": "^11.8.12",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "reactstrap": "^9.2.0"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "babel src --extensions '.js,.jsx' --out-dir dist && copyfiles -u 1 'src/**/*.{scss,jsx}' dist"
-  }
-}
+	"name": "asab_webui_shell",
+	"version": "26.3.1-alpha.2",
+	"license": "BSD-3-Clause",
+	"description": "TeskaLabs ASAB WebUI Shell Application",
+	"contributors": [
+		{
+			"name": "TeskaLabs",
+			"email": "info@teskalabs.com",
+			"url": "https://teskalabs.com"
+		}
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+ssh://git@github.com:TeskaLabs/asab-webui-shell-lib.git"
+	},
+	"bugs": {
+		"url": "https://github.com/TeskaLabs/asab-webui-shell-lib/issues"
+	},
+	"homepage": "https://github.com/TeskaLabs/asab-webui-shell-lib",
+	"main": "dist/index.js",
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+	    "registry": "https://registry.npmjs.org/"
+	 },
+	"scripts": {
+		"clean": "rimraf dist",
+		"build": "babel src --extensions '.js,.jsx' --out-dir dist && copyfiles -u 1 'src/**/*.{scss,jsx}' dist"
+	},
+	"dependencies": {
+		"i18next-browser-languagedetector": "^6.1.2"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.22.11",
+		"@babel/core": "^7.22.11",
+		"@babel/plugin-transform-runtime": "^7.22.10",
+		"@babel/preset-env": "^7.22.10",
+		"@babel/preset-react": "^7.22.5",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"copyfiles": "^2.4.1",
+		"rimraf": "^5.0.0"
+	},
+	"peerDependencies": {
+		"asab_webui_components": "^26.1.1",
+		"@babel/runtime": "^7.22.11",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"axios": "^1.8.4",
+		"i18next": "^20.3.5",
+		"react-i18next": "^11.8.12",
+		"react-router": "^6.16.0",
+		"react-router-dom": "^6.16.0",
+		"reactstrap": "^9.2.0"
+	}
+}