@fleetbase/ember-core 0.1.1 → 0.1.3

package/addon/services/crud.js

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { dasherize } from '@ember/string';
+import { later } from '@ember/runloop';
 import { pluralize } from 'ember-inflector';
 import { format as formatDate } from 'date-fns';
 import getModelName from '../utils/get-model-name';
@@ -193,6 +194,7 @@ export default class CrudService extends Service {
         this.modalsManager.show('modals/export-form', {
             title: `Export ${pluralize(modelName)}`,
             acceptButtonText: 'Download',
+            modalClass: 'modal-sm',
             formatOptions: ['csv', 'xlsx', 'xls', 'html', 'pdf'],
             setFormat: ({ target }) => {
                 this.modalsManager.setOption('format', target.value || null);
@@ -211,9 +213,13 @@ export default class CrudService extends Service {
                         }
                     )
                     .then(() => {
-                        setTimeout(() => {
-                            return done();
-                        }, 600);
+                        later(
+                            this,
+                            () => {
+                                return done();
+                            },
+                            600
+                        );
                     })
                     .catch((error) => {
                         modal.stopLoading();

package/addon/services/fetch.js

@@ -538,7 +538,10 @@ export default class FetchService extends Service {
                     withCredentials: true,
                     headers,
                 })
-                .then((response) => response.json());
+                .then((response) => response.json())
+                .catch((error) => {
+                    this.notifications.serverError(error, `Upload failed.`);
+                });
 
             const model = this.store.push(this.store.normalize('file', upload.file));
             set(file, 'model', model);

package/addon/services/notifications.js

@@ -1,22 +1,19 @@
 import EmberNotificationsService from 'ember-cli-notifications/services/notifications';
 import { isArray } from '@ember/array';
+import getWithDefault from '../utils/get-with-default';
 
 export default class NotificationsService extends EmberNotificationsService {
-    /**
-     * Handles errors from the server
-     *
-     * @param {Error} error
-     * @void
-     */
-    serverError(error, fallbackMessage = 'Oops! Something went wrong with your request.', options) {
+    serverError(error, fallbackMessage = 'Oops! Something went wrong with your request.', options = {}) {
         if (isArray(error.errors)) {
-            const errorMessage = error.errors.firstObject;
+            const errors = getWithDefault(error, 'errors');
+            const errorMessage = getWithDefault(errors, '0', fallbackMessage);
 
-            return this.error(errorMessage ?? fallbackMessage, options);
+            return this.error(errorMessage, options);
         }
 
         if (error instanceof Error) {
-            return this.error(error.message ?? fallbackMessage, options);
+            const errorMessage = getWithDefault(error, 'message', fallbackMessage);
+            return this.error(errorMessage, options);
         }
 
         return this.error(error ?? fallbackMessage, options);

package/addon/services/socket.js

@@ -31,18 +31,20 @@ export default class SocketService extends Service {
     async listen(channelId, callback) {
         const channel = this.socket.subscribe(channelId);
 
-        // track channel
+        // Track channel
         this.channels.pushObject(channel);
 
-        // listen to channel for events
+        // Listen to channel for events
         await channel.listener('subscribe').once();
 
-        // get incoming data and console out
-        for await (let output of channel) {
-            if (typeof callback === 'function') {
-                callback(output);
+        // Listen for channel subscription
+        (async () => {
+            for await (let output of channel) {
+                if (typeof callback === 'function') {
+                    callback(output);
+                }
             }
-        }
+        })();
     }
 
     closeChannels() {

package/addon/services/universe.js

@@ -5,7 +5,8 @@ import { inject as service } from '@ember/service';
 import { computed, action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { isArray } from '@ember/array';
-import { dasherize } from '@ember/string';
+import { later } from '@ember/runloop';
+import { dasherize, camelize } from '@ember/string';
 import { getOwner } from '@ember/application';
 import { assert } from '@ember/debug';
 import RSVP from 'rsvp';
@@ -106,6 +107,148 @@ export default class UniverseService extends Service.extend(Evented) {
         return this.router.transitionTo(route, slug, 'index');
     }
 
+    /**
+     * @action
+     * Creates a new registry with the given name and options.
+    
+     * @memberof UniverseService
+     * @param {string} registryName - The name of the registry to create.
+     * @param {Object} [options={}] - Optional settings for the registry.
+     * @param {Array} [options.menuItems=[]] - An array of menu items for the registry.
+     * @param {Array} [options.menuPanel=[]] - An array of menu panels for the registry.
+     *
+     * @fires registry.created - Event triggered when a new registry is created.
+     *
+     * @returns {UniverseService} Returns the current UniverseService for chaining.
+     *
+     * @example
+     * createRegistry('myRegistry', { menuItems: ['item1', 'item2'], menuPanel: ['panel1', 'panel2'] });
+     */
+    @action createRegistry(registryName, options = {}) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+
+        this[internalRegistryName] = {
+            name: registryName,
+            menuItems: [],
+            menuPanels: [],
+            ...options,
+        };
+
+        // trigger registry created event
+        this.trigger('registry.created', this[internalRegistryName]);
+
+        return this;
+    }
+
+    /**
+     * @action
+     * Retrieves the entire registry with the given name.
+     *
+     * @memberof UniverseService
+     * @param {string} registryName - The name of the registry to retrieve.
+     *
+     * @returns {Object|null} Returns the registry object if it exists; otherwise, returns null.
+     *
+     * @example
+     * const myRegistry = getRegistry('myRegistry');
+     */
+    @action getRegistry(registryName) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
+
+        if (!isBlank(registry)) {
+            return registry;
+        }
+
+        return null;
+    }
+
+    /**
+     * Looks up a registry by its name and returns it as a Promise.
+     *
+     * @memberof UniverseService
+     * @param {string} registryName - The name of the registry to look up.
+     *
+     * @returns {Promise<Object|null>} A Promise that resolves to the registry object if it exists; otherwise, rejects with null.
+     *
+     * @example
+     * lookupRegistry('myRegistry')
+     *   .then((registry) => {
+     *     // Do something with the registry
+     *   })
+     *   .catch((error) => {
+     *     // Handle the error or absence of the registry
+     *   });
+     */
+    lookupRegistry(registryName) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
+
+        return new Promise((resolve, reject) => {
+            if (!isBlank(registry)) {
+                return resolve(registry);
+            }
+
+            later(
+                this,
+                () => {
+                    if (!isBlank(registry)) {
+                        return resolve(registry);
+                    }
+                },
+                100
+            );
+
+            reject(null);
+        });
+    }
+
+    /**
+     * @action
+     * Retrieves the menu items from a registry with the given name.
+     *
+     * @memberof UniverseService
+     * @param {string} registryName - The name of the registry to retrieve menu items from.
+     *
+     * @returns {Array} Returns an array of menu items if the registry exists and has menu items; otherwise, returns an empty array.
+     *
+     * @example
+     * const items = getMenuItemsFromRegistry('myRegistry');
+     */
+    @action getMenuItemsFromRegistry(registryName) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
+
+        if (!isBlank(registry) && isArray(registry.menuItems)) {
+            return registry.menuItems;
+        }
+
+        return [];
+    }
+
+    /**
+     * @action
+     * Retrieves the menu panels from a registry with the given name.
+     *
+     * @memberof UniverseService
+     * @param {string} registryName - The name of the registry to retrieve menu panels from.
+     *
+     * @returns {Array} Returns an array of menu panels if the registry exists and has menu panels; otherwise, returns an empty array.
+     *
+     * @example
+     * const panels = getMenuPanelsFromRegistry('myRegistry');
+     */
+    @action getMenuPanelsFromRegistry(registryName) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
+
+        if (!isBlank(registry) && isArray(registry.menuPanels)) {
+            return registry.menuPanels;
+        }
+
+        return [];
+    }
+
     /**
      * Loads a component from the specified registry based on a given slug and view.
      *
@@ -116,15 +259,16 @@ export default class UniverseService extends Service.extend(Evented) {
      * @returns {Promise} Returns a Promise that resolves with the component if it is found, or null.
      */
     loadComponentFromRegistry(registryName, slug, view = null) {
-        const registry = this[`${registryName}Registry`];
-
-        if (isBlank(registry)) {
-            return null;
-        }
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
 
         return new Promise((resolve) => {
             let component = null;
 
+            if (isBlank(registry)) {
+                return resolve(component);
+            }
+
             // check menu items first
             for (let i = 0; i < registry.menuItems.length; i++) {
                 const menuItem = registry.menuItems[i];
@@ -177,15 +321,16 @@ export default class UniverseService extends Service.extend(Evented) {
      * @returns {Promise} Returns a Promise that resolves with the menu item if it is found, or null.
      */
     lookupMenuItemFromRegistry(registryName, slug, view = null) {
-        const registry = this[`${registryName}Registry`];
-
-        if (isBlank(registry)) {
-            return null;
-        }
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const registry = this[internalRegistryName];
 
         return new Promise((resolve) => {
             let foundMenuItem = null;
 
+            if (isBlank(registry)) {
+                return resolve(foundMenuItem);
+            }
+
             // check menu items first
             for (let i = 0; i < registry.menuItems.length; i++) {
                 const menuItem = registry.menuItems[i];
@@ -240,10 +385,10 @@ export default class UniverseService extends Service.extend(Evented) {
      * @param {Object} options Additional options for the panel
      */
     registerMenuPanel(registryName, title, items = [], options = {}) {
+        const internalRegistryName = this.createInternalRegistryName(registryName);
         const open = this._getOption(options, 'open', true);
         const slug = this._getOption(options, 'slug', dasherize(title));
-
-        this[`${registryName}Registry`].menuPanels.pushObject({
+        const menuPanel = {
             title,
             open,
             items: items.map(({ title, route, ...options }) => {
@@ -252,7 +397,13 @@ export default class UniverseService extends Service.extend(Evented) {
 
                 return this._createMenuItem(title, route, options);
             }),
-        });
+        };
+
+        // register menu panel
+        this[internalRegistryName].menuPanels.pushObject(menuPanel);
+
+        // trigger menu panel registered event
+        this.trigger('menuPanel.registered', menuPanel, this[internalRegistryName]);
     }
 
     /**
@@ -267,7 +418,8 @@ export default class UniverseService extends Service.extend(Evented) {
      * @param {Object} options Additional options for the item
      */
     registerMenuItem(registryName, title, options = {}) {
-        const route = this._getOption(options, 'route', `console.${registryName}.virtual`);
+        const internalRegistryName = this.createInternalRegistryName(registryName);
+        const route = this._getOption(options, 'route', `console.${dasherize(registryName)}.virtual`);
         options.slug = this._getOption(options, 'slug', '~');
         options.view = this._getOption(options, 'view', dasherize(title));
 
@@ -276,7 +428,45 @@ export default class UniverseService extends Service.extend(Evented) {
             options.view = null;
         }
 
-        this[`${registryName}Registry`].menuItems.pushObject(this._createMenuItem(title, route, options));
+        // register component if applicable
+        this.registerMenuItemComponentToEngine(options);
+
+        // create menu item
+        const menuItem = this._createMenuItem(title, route, options);
+
+        // register menu item
+        this[internalRegistryName].menuItems.pushObject(menuItem);
+
+        // trigger menu panel registered event
+        this.trigger('menuItem.registered', menuItem, this[internalRegistryName]);
+    }
+
+    /**
+     * Registers a menu item's component to one or multiple engines.
+     *
+     * @method registerMenuItemComponentToEngine
+     * @public
+     * @memberof UniverseService
+     * @param {Object} options - An object containing the following properties:
+     *   - `registerComponentToEngine`: A string or an array of strings representing the engine names where the component should be registered.
+     *   - `component`: The component class to register, which should have a 'name' property.
+     */
+    registerMenuItemComponentToEngine(options) {
+        // Register component if applicable
+        if (typeof options.registerComponentToEngine === 'string') {
+            this.registerComponentInEngine(options.registerComponentToEngine, options.component);
+        }
+
+        // register to multiple engines
+        if (isArray(options.registerComponentToEngine)) {
+            for (let i = 0; i < options.registerComponentInEngine.length; i++) {
+                const engineName = options.registerComponentInEngine.objectAt(i);
+
+                if (typeof engineName === 'string') {
+                    this.registerComponentInEngine(engineName, options.component);
+                }
+            }
+        }
     }
 
     /**
@@ -424,6 +614,14 @@ export default class UniverseService extends Service.extend(Evented) {
         const onClick = this._getOption(options, 'onClick', null);
         const section = this._getOption(options, 'section', null);
 
+        // dasherize route segments
+        if (typeof route === 'string') {
+            route = route
+                .split('.')
+                .map((segment) => dasherize(segment))
+                .join('.');
+        }
+
         // todo: create menu item class
         const menuItem = {
             title,
@@ -450,6 +648,35 @@ export default class UniverseService extends Service.extend(Evented) {
         return menuItem;
     }
 
+    /**
+     * Creates an internal registry name by camelizing the provided registry name and appending "Registry" to it.
+     *
+     * @method createInternalRegistryName
+     * @public
+     * @memberof UniverseService
+     * @param {String} registryName - The name of the registry to be camelized and formatted.
+     * @returns {String} The formatted internal registry name.
+     */
+    createInternalRegistryName(registryName) {
+        return `${camelize(registryName.replace(/[^a-zA-Z0-9]/g, '-'))}Registry`;
+    }
+
+    /**
+     * Manually registers a component in a specified engine.
+     *
+     * @method registerComponentInEngine
+     * @public
+     * @memberof UniverseService
+     * @param {String} engineName - The name of the engine where the component should be registered.
+     * @param {Object} componentClass - The component class to register, which should have a 'name' property.
+     */
+    registerComponentInEngine(engineName, componentClass) {
+        const engineInstance = this.getEngineInstance(engineName);
+        if (engineInstance && !isBlank(componentClass) && typeof componentClass.name === 'string') {
+            engineInstance.register(`component:${componentClass.name}`, componentClass);
+        }
+    }
+
     /**
      * Load the specified engine. If it is not loaded yet, it will use assetLoader
      * to load it and then register it to the router.
@@ -529,6 +756,28 @@ export default class UniverseService extends Service.extend(Evented) {
         });
     }
 
+    /**
+     * Retrieve an existing engine instance by its name and instanceId.
+     *
+     * @method getEngineInstance
+     * @public
+     * @memberof UniverseService
+     * @param {String} name The name of the engine
+     * @param {String} [instanceId='manual'] The id of the engine instance (defaults to 'manual')
+     * @returns {Object|null} The engine instance if it exists, otherwise null
+     */
+    getEngineInstance(name, instanceId = 'manual') {
+        const owner = getOwner(this);
+        const router = owner.lookup('router:main');
+        const engineInstances = router._engineInstances;
+
+        if (engineInstances && engineInstances[name]) {
+            return engineInstances[name][instanceId] || null;
+        }
+
+        return null;
+    }
+
     /**
      * Alias for intl service `t`
      *

package/addon/utils/console-url.js

@@ -2,55 +2,39 @@ import config from '@fleetbase/console/config/environment';
 import { isBlank } from '@ember/utils';
 
 const isDevelopment = ['local', 'development'].includes(config.environment);
-const isProduction = ['production'].includes(config.environment);
 
-function queryString(params) {
+export function queryString(params) {
     return Object.keys(params)
-        .map((key) => `${key}=${params[key]}`)
+        .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
         .join('&');
 }
 
-function extractHostAndPort(url) {
+export function extractHostAndPort(url) {
     try {
-        const parsedUrl = new URL(url);
-        const host = parsedUrl.hostname;
-        const port = parsedUrl.port;
-
-        return {
-            host: host,
-            port: port || null,
-        };
+        const { hostname: host, port = null } = new URL(url);
+        return { host, port };
     } catch (error) {
-        console.error('Invalid URL:', error);
-        return null;
+        return { host: null, port: null };
     }
 }
 
-export default function consoleUrl(path = '', queryParams = {}, subdomain = 'console', host = 'fleetbase.io') {
-    let parsedHost = extractHostAndPort(host);
-    let url = isDevelopment ? 'http://' : 'https://';
-
-    if (subdomain) {
-        url += subdomain + '.';
-    }
-
-    let urlParams = !isBlank(queryParams) ? queryString(queryParams) : '';
-
-    if (!isProduction && !isDevelopment) {
-        url += `${config.environment}.`;
+export default function consoleUrl(path = '', queryParams = {}, subdomain = null, host = null) {
+    if (subdomain === null || host === null) {
+        const { hostname, host: currentHost } = window.location;
+        if (subdomain === null) {
+            const parts = hostname.split('.');
+            subdomain = parts.length > 2 ? parts[0] : null;
+        }
+        if (host === null) {
+            host = currentHost;
+        }
     }
 
-    url += parsedHost.host;
-
-    if (parsedHost.port) {
-        url += `:${parsedHost.port}`;
-    }
-
-    url += `/${path}`;
-
-    if (urlParams) {
-        url += `?${urlParams}`;
-    }
+    const { host: parsedHost, port } = extractHostAndPort(host);
+    const protocol = isDevelopment ? 'http://' : 'https://';
+    const urlParams = !isBlank(queryParams) ? queryString(queryParams) : '';
+    const portSegment = port ? `:${port}` : '';
+    const pathSegment = path.startsWith('/') ? path : `/${path}`;
 
-    return url;
+    return `${protocol}${subdomain ? subdomain + '.' : ''}${parsedHost}${portSegment}${pathSegment}${urlParams ? '?' + urlParams : ''}`;
 }

package/addon/utils/corslite.js

@@ -1,3 +1,5 @@
+import { later } from '@ember/runloop';
+
 function corslite(url, callback, cors) {
     var sent = false;
 
@@ -28,11 +30,13 @@ function corslite(url, callback, cors) {
             if (sent) {
                 original.apply(this, arguments);
             } else {
-                var that = this,
-                    args = arguments;
-                setTimeout(function () {
-                    original.apply(that, args);
-                }, 0);
+                later(
+                    this,
+                    function () {
+                        original.apply(this, arguments);
+                    },
+                    0
+                );
             }
         };
     }

package/addon/utils/download.js

@@ -1,3 +1,5 @@
+import { later } from '@ember/runloop';
+
 export default function download(data, strFileName, strMimeType) {
     var self = window, // this script is only for browsers anyway...
         defaultMime = 'application/octet-stream', // this default mime also triggers iframe downloads
@@ -33,9 +35,13 @@ export default function download(data, strFileName, strMimeType) {
             ajax.onload = function (e) {
                 download(e.target.response, fileName, defaultMime);
             };
-            setTimeout(function () {
-                ajax.send();
-            }, 0); // allows setting custom ajax headers using the return:
+            later(
+                this,
+                function () {
+                    ajax.send();
+                },
+                0
+            ); // allows setting custom ajax headers using the return:
             return ajax;
         } // end if valid url?
     } // end if url?
@@ -90,15 +96,23 @@ export default function download(data, strFileName, strMimeType) {
                 this.removeEventListener('click', arguments.callee);
             });
             document.body.appendChild(anchor);
-            setTimeout(function () {
-                anchor.click();
-                document.body.removeChild(anchor);
-                if (winMode === true) {
-                    setTimeout(function () {
-                        self.URL.revokeObjectURL(anchor.href);
-                    }, 250);
-                }
-            }, 66);
+            later(
+                this,
+                function () {
+                    anchor.click();
+                    document.body.removeChild(anchor);
+                    if (winMode === true) {
+                        later(
+                            this,
+                            function () {
+                                self.URL.revokeObjectURL(anchor.href);
+                            },
+                            250
+                        );
+                    }
+                },
+                66
+            );
             return true;
         }
 
@@ -123,9 +137,13 @@ export default function download(data, strFileName, strMimeType) {
             url = 'data:' + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
         }
         f.src = url;
-        setTimeout(function () {
-            document.body.removeChild(f);
-        }, 333);
+        later(
+            this,
+            function () {
+                document.body.removeChild(f);
+            },
+            333
+        );
     } //end saver
 
     if (navigator.msSaveBlob) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-core",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "description": "Provides all the core services, decorators and utilities for building a Fleetbase extension for the Console.",
     "keywords": [
         "fleetbase-core",