Move action-list from icingadb-web

asset/js/compat/ActionListBehavior.js

@@ -0,0 +1,245 @@
+define(["../widget/ActionList", "icinga/legacy-app/Icinga"],function (ActionList, Icinga) {
+
+    "use strict";
+
+    class ActionListBehavior extends Icinga.EventListener {
+        constructor(icinga) {
+            super(icinga);
+
+            this.on('beforerender', '#main > .container', this.onBeforeRender, this);
+            this.on('rendered', '#main > .container', this.onRendered, this);
+            this.on('close-column', '#main > #col2', this.onColumnClose, this);
+            this.on('column-moved', this.onColumnMoved, this);
+            this.on('selection-start', this.onSelectionStart, this);
+            this.on('selection-end', this.onSelectionEnd, this);
+            this.on('all-deselected', this.allDeselected, this);
+
+            /**
+             * Action lists
+             *
+             * @type {WeakMap<object, ActionList>}
+             * @private
+             */
+            this._actionLists = new WeakMap();
+
+            /**
+             * Cached action lists
+             *
+             * Holds values only during the time between `beforerender` and `rendered`
+             *
+             * @type {{}}
+             * @private
+             */
+            this._cachedActionLists = {};
+        }
+
+        /**
+         * @param event
+         * @param content
+         * @param action
+         * @param autorefresh
+         * @param scripted
+         */
+        onBeforeRender(event, content, action, autorefresh, scripted) {
+            if (! autorefresh) {
+                return;
+            }
+
+            let _this = event.data.self;
+            let lists = _this.getActionLists(event.target)
+
+            // Remember current instances
+            lists.forEach((list) => {
+                let actionList = _this._actionLists.get(list);
+                if (actionList) {
+                    _this._cachedActionLists[_this.icinga.utils.getDomPath(list).join(' > ')] = actionList;
+                }
+            });
+        }
+
+        /**
+         * @param event
+         * @param autorefresh
+         * @param scripted
+         */
+        onRendered(event, autorefresh, scripted) {
+            let _this = event.data.self;
+            let container = event.target;
+            let detailUrl = _this.getDetailUrl();
+
+            if (autorefresh) {
+                // Apply remembered instances
+                for (let listPath in _this._cachedActionLists) {
+                    let actionList = _this._cachedActionLists[listPath];
+                    let list = container.querySelector(listPath);
+                    if (list !== null) {
+                        actionList.refresh(list, container.querySelector('.footer'), detailUrl);
+                        _this._actionLists.set(list, actionList);
+                    } else {
+                        actionList.destroy();
+                    }
+
+                    delete _this._cachedActionLists[listPath];
+                }
+            }
+
+            let lists = _this.getActionLists(event.currentTarget);
+            lists.forEach(list => {
+                let actionList = _this._actionLists.get(list);
+                if (! actionList) {
+                    let isPrimary = _this.isPrimaryList(list);
+                    let isMultiSelectable = list.matches('[data-icinga-multiselect-url]');
+                    let container = list.closest('.container');
+                    let footer = container.querySelector('.footer');
+                    if (! footer && isPrimary && isMultiSelectable) {
+                        footer = document.createElement('div');
+                        footer.classList.add('footer')
+                        footer.dataset.actionListAutomaticallyAdded = true;
+
+                        container.appendChild(footer);
+                    }
+
+                    actionList = new ActionList(list)
+                        .setIsPrimary(isPrimary)
+                        .setIsMultiSelectable(isMultiSelectable)
+                        .setFooter(footer);
+
+                    actionList.load(detailUrl);
+
+                    _this._actionLists.set(list, actionList);
+                } else {
+                    actionList.load(detailUrl); // navigated back to the same page
+                }
+            });
+
+            if (event.target.id === 'col2') { // navigated back/forward and the detail url is changed
+                let lists = _this.getActionLists();
+                lists.forEach(list => {
+                    let actionList = _this._actionLists.get(list);
+
+                    if (actionList) {
+                        actionList.load(detailUrl);
+                    }
+                });
+            }
+        }
+
+        onColumnClose(event)
+        {
+            let _this = event.data.self;
+            let lists = _this.getActionLists();
+            lists.forEach((list) => {
+                let actionList = _this._actionLists.get(list);
+                if (actionList) {
+                    actionList.load();
+                }
+            });
+        }
+
+        /**
+         * Triggers when column is moved to left or right
+         *
+         * @param event
+         * @param sourceId The content is moved from
+         */
+         onColumnMoved(event, sourceId) {
+            // col1 moved to col2 (browser-back)
+            let col1Moved = event.target.id === 'col2' && sourceId === 'col1';
+
+            // col2 moved to col1 (col1 closed, browser-forward)
+            let col2Moved = event.target.id === 'col1' && sourceId === 'col2';
+
+            if (col1Moved || col2Moved) {
+                let _this = event.data.self;
+                let lists = _this.getActionLists(event.target);
+                lists.forEach((list) => {
+                    let actionList = _this._actionLists.get(list);
+                    if (actionList) {
+                        if (col1Moved) {
+                            actionList.setIsPrimary(false).load();
+                        } else if (col2Moved) {
+                            actionList.setIsPrimary(_this.isPrimaryList(list));
+                        }
+                    }
+                });
+            }
+         }
+
+        /**
+         * Selection started and in process
+         *
+         * @param event
+         */
+        onSelectionStart(event) {
+            const container = event.target.closest('.container');
+            container.dataset.suspendAutorefresh = '';
+        }
+
+        /**
+         * Triggers when selection ends, the url can be loaded now
+         * @param event
+         */
+        onSelectionEnd(event) {
+            let _this = event.data.self;
+
+            let req = _this.icinga.loader.loadUrl(
+                event.detail.url,
+                _this.icinga.loader.getLinkTargetFor($(event.target.firstChild))
+            );
+
+            req.always((_, __, errorThrown) => {
+                if (errorThrown !== 'abort') {
+                    delete event.target.closest('.container').dataset.suspendAutorefresh;
+                    event.detail.actionList.setProcessing(false);
+                }
+            });
+        }
+
+        allDeselected(event) {
+            let _this = event.data.self;
+            if (_this.icinga.loader.getLinkTargetFor($(event.target), false).attr('id') === 'col2') {
+                _this.icinga.ui.layout1col();
+                _this.icinga.history.pushCurrentState();
+                delete event.target.closest('.container').dataset.suspendAutorefresh;
+            }
+        }
+
+        getDetailUrl() {
+            return this.icinga.utils.parseUrl(
+                this.icinga.history.getCol2State().replace(/^#!/, '')
+            );
+        }
+
+        /**
+         * Whether the specified list should be considered the primary list
+         *
+         * @param {Element} list
+         *
+         * @return {boolean}
+         */
+        isPrimaryList(list) {
+            return list.parentElement.matches('#main > #col1 > .content');
+        }
+
+        /**
+         * Get action lists from the given element
+         *
+         * If element is not provided, all action lists from col1 will be returned
+         *
+         * @param element
+         *
+         * @return NodeList
+         */
+        getActionLists(element = null) {
+            if (element === null) {
+                return document.querySelectorAll('#col1 [data-interactable-action-list]');
+            }
+
+            return element.querySelectorAll('[data-interactable-action-list]');
+        }
+    }
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    Icinga.Behaviors.ActionListBehavior = ActionListBehavior;
+});

asset/js/compat/LoadMoreBehavior.js

@@ -0,0 +1,86 @@
+define(["../widget/LoadMore", "icinga/legacy-app/Icinga"],function (LoadMore, Icinga) {
+
+    "use strict";
+
+    class LoadMoreBehavior extends Icinga.EventListener {
+        constructor(icinga) {
+            super(icinga);
+
+            this.on('rendered', '#main > .container', this.onRendered, this);
+            this.on('load', this.onLoad, this);
+
+            /**
+             * Load More elements
+             *
+             * @type {WeakMap<object, LoadMore>}
+             * @private
+             */
+            this._loadMoreElements = new WeakMap();
+        }
+
+        /**
+         * @param event
+         */
+        onRendered(event)
+        {
+            let _this = event.data.self;
+
+            event.currentTarget.querySelectorAll('.load-more').forEach(element => {
+                _this._loadMoreElements.set(element, new LoadMore(element));
+            });
+        }
+
+        onLoad(event) {
+            let _this = event.data.self;
+            let anchor = event.target;
+            let showMore = anchor.parentElement;
+            var progressTimer = _this.icinga.timer.register(function () {
+                var label = anchor.innerText;
+
+                var dots = label.substr(-3);
+                if (dots.slice(0, 1) !== '.') {
+                    dots = '.  ';
+                } else {
+                    label = label.slice(0, -3);
+                    if (dots === '...') {
+                        dots = '.  ';
+                    } else if (dots === '.. ') {
+                        dots = '...';
+                    } else if (dots === '.  ') {
+                        dots = '.. ';
+                    }
+                }
+
+                anchor.innerText = label + dots;
+            }, null, 250);
+
+            let url = anchor.getAttribute('href');
+
+            let req = _this.icinga.loader.loadUrl(
+                // Add showCompact, we don't want controls in paged results
+                _this.icinga.utils.addUrlFlag(url, 'showCompact'),
+                $(showMore.parentElement),
+                undefined,
+                undefined,
+                'append',
+                false,
+                progressTimer
+            );
+            req.addToHistory = false;
+            req.done(function () {
+                showMore.remove();
+
+                // Set data-icinga-url to make it available for Icinga.History.getCurrentState()
+                req.$target.closest('.container').data('icingaUrl', url);
+
+                _this.icinga.history.replaceCurrentState();
+            });
+
+            return req;
+        }
+    }
+
+    Icinga.Behaviors = Icinga.Behaviors || {};
+
+    Icinga.Behaviors.ActionListBehavior = LoadMoreBehavior;
+});