@c8y/ngx-components 1017.0.30 → 1017.0.32

package/fesm2020/c8y-ngx-components-ecosystem-application-plugins.mjs

@@ -3,7 +3,7 @@ import { Pipe, Component, Input, EventEmitter, Output, ViewChild, Injectable, Ng
 import * as i2 from '@c8y/ngx-components';
 import { gettext, ApplicationPluginStatus, DataGridComponent, CoreModule, hookRoute, ViewContext } from '@c8y/ngx-components';
 import * as i1 from '@c8y/ngx-components/ecosystem/shared';
-import { SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
+import { PRODUCT_EXPERIENCE, SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
 import * as i1$2 from '@angular/router';
 import * as i4 from '@ngx-translate/core';
 import * as i1$1 from 'ngx-bootstrap/modal';
@@ -88,12 +88,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }] } });
 
 class PluginListComponent {
-    constructor(ecosystemService, bsModalService, pluginsService, alertService, translateService) {
+    constructor(ecosystemService, bsModalService, pluginsService, alertService, translateService, gainsightService) {
         this.ecosystemService = ecosystemService;
         this.bsModalService = bsModalService;
         this.pluginsService = pluginsService;
         this.alertService = alertService;
         this.translateService = translateService;
+        this.gainsightService = gainsightService;
+        this.CURRENT_LOCATION = location.href;
         this.emptyListText = '';
         /**
          * Shows the install button for each plugin separately. Currently used in package-details view.
@@ -136,9 +138,19 @@ class PluginListComponent {
                 await this.handleRemotesInstallation(app, plugin);
                 const successText = this.translateService.instant(gettext('Plugin installed successfully to app "{{ appName }}".'), { appName: app.name });
                 this.alertService.success(successText);
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
+                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_INSTALLED,
+                    url: this.CURRENT_LOCATION
+                });
             }
             catch {
                 // nothing to do
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
+                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                    url: this.CURRENT_LOCATION
+                });
             }
         }
         this.installingPluginId = '';
@@ -184,12 +196,12 @@ class PluginListComponent {
         }
     }
 }
-PluginListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PluginListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, deps: [{ token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i4.TranslateService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
 PluginListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: PluginListComponent, selector: "c8y-plugin-list", inputs: { plugins$: "plugins$", emptyListText: "emptyListText", selectable: "selectable", installable: "installable", package: "package" }, outputs: { selectedItems: "selectedItems" }, ngImport: i0, template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin?.id)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === installingPluginId }\"\n            [disabled]=\"installingPluginId && plugin.id !== installingPluginId\"\n            class=\"btn btn-default btn-sm m-l-4\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: PluginListItemComponent, selector: "c8y-plugin-list-item", inputs: ["plugin", "selectable"], outputs: ["isItemSelected"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: PluginListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-plugin-list', template: "<c8y-list-group class=\"bg-inherit\">\n  <ng-container *ngIf=\"(plugins$ | async)?.length !== 0; else emptyList\">\n    <ng-container *ngFor=\"let plugin of plugins$ | async\">\n      <c8y-li [ngClass]=\"{ disabled: plugin.installed }\" class=\"bg-inherit\">\n        <c8y-plugin-list-item\n          (isItemSelected)=\"updateSelectedItems($event, plugin?.id)\"\n          [plugin]=\"plugin\"\n          [selectable]=\"selectable\"\n          class=\"d-flex\"\n        ></c8y-plugin-list-item>\n        <div class=\"p-l-40 m-t-4\">\n          <button\n            *ngIf=\"installable\"\n            (click)=\"installPlugin(plugin)\"\n            [ngClass]=\"{ 'btn-pending': plugin.id === installingPluginId }\"\n            [disabled]=\"installingPluginId && plugin.id !== installingPluginId\"\n            class=\"btn btn-default btn-sm m-l-4\"\n            title=\"{{ 'Install plugin' | translate }}\"\n            translate\n          >\n            Install plugin\n          </button>\n        </div>\n      </c8y-li>\n    </ng-container>\n  </ng-container>\n</c8y-list-group>\n<ng-template #emptyList>\n  <div class=\"c8y-empty-state text-left\" *ngIf=\"emptyListText\">\n    <h1 c8yIcon=\"plugin\"></h1>\n    <p>\n      {{ emptyListText | translate }}\n    </p>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4.TranslateService }]; }, propDecorators: { plugins$: [{
+        }], ctorParameters: function () { return [{ type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i4.TranslateService }, { type: i2.GainsightService }]; }, propDecorators: { plugins$: [{
                 type: Input
             }], emptyListText: [{
                 type: Input
@@ -316,10 +328,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
         }], ctorParameters: function () { return [{ type: i2.CellRendererContext }]; } });
 
 class UpdatePluginOfAppComponent {
-    constructor(bsModalRef, pluginsService, alert) {
+    constructor(bsModalRef, pluginsService, alert, gainsightService) {
         this.bsModalRef = bsModalRef;
         this.pluginsService = pluginsService;
         this.alert = alert;
+        this.gainsightService = gainsightService;
+        this.CURRENT_LOCATION = location.href;
         this.result = new Promise((resolve, reject) => {
             this._install = resolve;
             this._cancel = reject;
@@ -369,9 +383,21 @@ class UpdatePluginOfAppComponent {
         try {
             await this.pluginsService.updateRemotesInAppConfig(this.app, newRemotes);
             this.alert.success(gettext(`Switched the version of plugin.`));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
+                action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
+                result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_VERSION_CHANGED,
+                url: this.CURRENT_LOCATION
+            });
         }
         catch (e) {
             this.alert.addServerFailure(e);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.UPDATE_PLUGIN_OF_APP,
+                action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.CHANGE_PLUGIN_VERSION,
+                result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                url: this.CURRENT_LOCATION
+            });
         }
         this.bsModalRef.hide();
         this._install();
@@ -381,15 +407,15 @@ class UpdatePluginOfAppComponent {
         this._cancel();
     }
 }
-UpdatePluginOfAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+UpdatePluginOfAppComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdatePluginOfAppComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
 UpdatePluginOfAppComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UpdatePluginOfAppComponent, selector: "c8y-update-plugin-of-app", ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.PackageVersionSelectComponent, selector: "c8y-package-version-select", inputs: ["label", "packageContextPath", "packageId"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UpdatePluginOfAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-update-plugin-of-app', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"'c8y-modules'\"></i>\n    <h4 *ngIf=\"!downgrade\" id=\"modal-title\" translate>Update plugin</h4>\n    <h4 *ngIf=\"downgrade\" id=\"modal-title\" translate>Downgrade plugin</h4>\n  </div>\n  <div class=\"inner-scroll\" id=\"modal-body\">\n    <div class=\"p-16\">\n      <div class=\"d-block fit-w bg-gray-white\">\n        <c8y-package-version-select\n          [packageContextPath]=\"plugin?.contextPath\"\n          [(ngModel)]=\"applicationVersion\"\n        ></c8y-package-version-select>\n        <div\n          *ngIf=\"plugin?.version && plugin.version === applicationVersion?.version\"\n          class=\"alert alert-info\"\n          role=\"alert\"\n        >\n          <span translate ngNonBindable [translateParams]=\"applicationVersion\">\n            Select another version, as {{ version }} is currently used.\n          </span>\n        </div>\n      </div>\n\n      <div class=\"form-group\">\n        <label class=\"c8y-checkbox\">\n          <input [(ngModel)]=\"updateAll\" type=\"checkbox\" />\n          <span></span>\n          <span translate ngNonBindable [translateParams]=\"plugin\">\n            Set version for all plugins using the same context path \"{{ contextPath }}\".\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Set version' | translate }}\"\n      [disabled]=\"!applicationVersion || plugin?.version === applicationVersion?.version\"\n      (click)=\"update()\"\n    >\n      {{ 'Set version' | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.BsModalRef }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }]; } });
 
 class ApplicationPluginsComponent {
-    constructor(activatedRoute, ecosystemService, bsModalService, modal, translateService, pluginsService, alertService) {
+    constructor(activatedRoute, ecosystemService, bsModalService, modal, translateService, pluginsService, alertService, gainsightService) {
         this.activatedRoute = activatedRoute;
         this.ecosystemService = ecosystemService;
         this.bsModalService = bsModalService;
@@ -397,6 +423,9 @@ class ApplicationPluginsComponent {
         this.translateService = translateService;
         this.pluginsService = pluginsService;
         this.alertService = alertService;
+        this.gainsightService = gainsightService;
+        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE;
+        this.CURRENT_LOCATION = location.href;
         this.exportedPlugins$ = new BehaviorSubject([]);
         this.remotePlugins$ = new BehaviorSubject({});
         this.allAvailablePlugins$ = new BehaviorSubject([]);
@@ -482,10 +511,20 @@ class ApplicationPluginsComponent {
             this.isLoading = true;
             await this.handleRemotesInstallation(pluginsToAdd);
             this.alertService.success(gettext('Plugins installed.'));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_INSTALLED,
+                url: this.CURRENT_LOCATION
+            });
         }
         catch (ex) {
             if (ex) {
                 this.alertService.addServerFailure(ex);
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                    url: this.CURRENT_LOCATION
+                });
             }
         }
         finally {
@@ -500,10 +539,20 @@ class ApplicationPluginsComponent {
             this.isLoading = false;
             this.dataGrid.cancel();
             this.alertService.success(gettext('Plugins removed.'));
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_REMOVED,
+                url: this.CURRENT_LOCATION
+            });
         }
         catch (ex) {
             if (ex) {
                 this.alertService.addServerFailure(ex);
+                this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS, {
+                    component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,
+                    result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
+                    url: this.CURRENT_LOCATION
+                });
             }
         }
         finally {
@@ -735,12 +784,12 @@ class ApplicationPluginsComponent {
         return value.replace(/(@|\/)/g, '');
     }
 }
-ApplicationPluginsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.ModalService }, { token: i4.TranslateService }, { token: i2.PluginsService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ApplicationPluginsComponent, selector: "c8y-app-plugins", inputs: { appId: "appId" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'All applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] });
+ApplicationPluginsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1.EcosystemService }, { token: i1$1.BsModalService }, { token: i2.ModalService }, { token: i4.TranslateService }, { token: i2.PluginsService }, { token: i2.AlertService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component });
+ApplicationPluginsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ApplicationPluginsComponent, selector: "c8y-app-plugins", inputs: { appId: "appId" }, viewQueries: [{ propertyName: "dataGrid", first: true, predicate: DataGridComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'All applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,\n            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGINS,\n            url: CURRENT_LOCATION\n          }\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ApplicationPluginsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-app-plugins', template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'All applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.ModalService }, { type: i4.TranslateService }, { type: i2.PluginsService }, { type: i2.AlertService }]; }, propDecorators: { appId: [{
+            args: [{ selector: 'c8y-app-plugins', template: "<c8y-title>{{ app | humanizeAppName | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item [icon]=\"'c8y-atom'\" [label]=\"'Ecosystem' | translate\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'Applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-modules'\"\n    [label]=\"'All applications' | translate\"\n    [path]=\"'ecosystem/applications'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"app | humanizeAppName | async\"></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"'Plugins' | translate\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    (click)=\"installPlugins()\"\n    [ngClass]=\"{ 'btn-pending': isLoading }\"\n    class=\"btn btn-link\"\n    title=\"{{ 'Install plugins' | translate }}\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Install plugins' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<ng-container *ngIf=\"orphanedPlugins$ | async as orphanedPlugins\">\n  <c8y-action-bar-item *ngIf=\"orphanedPlugins?.length\" [placement]=\"'right'\">\n    <button\n      (click)=\"cleanupOrphanedPlugins(orphanedPlugins)\"\n      [ngClass]=\"{ 'btn-pending': isLoading }\"\n      class=\"btn btn-link\"\n      title=\"{{ 'Clean up orphaned plugins' | translate }}\"\n    >\n      <i c8yIcon=\"erase\"></i>\n      {{ 'Clean up orphaned plugins' | translate }}\n    </button>\n  </c8y-action-bar-item>\n</ng-container>\n\n<div class=\"content-fullpage d-flex d-col border-top\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [displayOptions]=\"displayOptions\"\n    [columns]=\"columns\"\n    [rows]=\"installedPlugins$ | async\"\n    [pagination]=\"pagination\"\n    [selectable]=\"true\"\n    [actionControls]=\"actionControls\"\n    [bulkActionControls]=\"bulkActionControls\"\n    [headerActionControls]=\"headerActionControls\"\n    (onReload)=\"refresh()\"\n    class=\"d-contents\"\n  >\n    <!-- No search/filtered results empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"(installedPlugins$ | async)?.length\"\n      [icon]=\"'search'\"\n      [title]=\"'No plugins to display.' | translate\"\n      [subtitle]=\"'Refine your search terms or check your spelling.' | translate\"\n      [horizontal]=\"true\"\n    >\n    </c8y-ui-empty-state>\n    <!-- No installed plugins empty state -->\n    <c8y-ui-empty-state\n      *ngIf=\"!(installedPlugins$ | async)?.length && !isLoading\"\n      [icon]=\"'plugin'\"\n      [title]=\"'No plugins installed.' | translate\"\n      [subtitle]=\"'This application doesn\\'t have any plugin. Click below to install.' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div class=\"fit-w p-t-16\">\n        <button\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.INSTALLED_PLUGINS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.APPLICATION_PLUGINS,\n            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGINS,\n            url: CURRENT_LOCATION\n          }\"\n          (click)=\"installPlugins()\"\n          [ngClass]=\"{ 'btn-pending': isLoading }\"\n          class=\"btn btn-primary btn-sm\"\n          title=\"{{ 'Install plugins' | translate }}\"\n          translate\n        >\n          Install plugins\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1.EcosystemService }, { type: i1$1.BsModalService }, { type: i2.ModalService }, { type: i4.TranslateService }, { type: i2.PluginsService }, { type: i2.AlertService }, { type: i2.GainsightService }]; }, propDecorators: { appId: [{
                 type: Input
             }], dataGrid: [{
                 type: ViewChild,