@c8y/ngx-components 1018.0.215 → 1018.0.222

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

@@ -21,7 +21,7 @@ import { tap, switchMap, shareReplay, takeUntil, map } from 'rxjs/operators';
 import * as i6 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { uniq } from 'lodash-es';
+import { pick, uniq } from 'lodash-es';
 import { LicenseConfirmModule } from '@c8y/ngx-components/ecosystem/license-confirm';
 
 class ActivityLogComponent {
@@ -1219,12 +1219,21 @@ class DeployApplicationComponent {
         }
         try {
             this.deployedApp = await this.ecosystemService.deployApp(this.package, formGroupValue, this.model);
+            const applicationCustomEventInfo = pick(this.package, [
+                'id',
+                'name',
+                'contextPath',
+                'label',
+                'key'
+            ]);
             this.deployedWithSuccess = true;
             this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.DEPLOY_APPLICATION, {
                 component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
                 action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
                 result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.DEPLOYED,
-                url: this.CURRENT_LOCATION
+                url: this.CURRENT_LOCATION,
+                ...applicationCustomEventInfo,
+                package: this.deployedApp?.manifest?.package ?? null
             });
         }
         catch (error) {
@@ -1233,7 +1242,8 @@ class DeployApplicationComponent {
                 component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.DEPLOY_APPLICATION,
                 action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.DEPLOY_APPLICATION,
                 result: PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.SERVER_FAILURE,
-                url: this.CURRENT_LOCATION
+                url: this.CURRENT_LOCATION,
+                error
             });
         }
         finally {
@@ -1393,11 +1403,6 @@ class PluginListComponent {
         await this.updateAppRemotes(plugin, 'install');
     }
     async uninstallPlugin(plugin) {
-        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
-            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
-            action: PRODUCT_EXPERIENCE.APPLICATIONS.ACTIONS.INSTALL_PLUGIN,
-            url: this.CURRENT_LOCATION
-        });
         await this.updateAppRemotes(plugin, 'uninstall');
     }
     async updateAppRemotes(plugin, updateType) {
@@ -1444,22 +1449,40 @@ class PluginListComponent {
                     })
                     : this.translateService.instant(gettext('Plugin uninstalled from 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
-                });
+                this.onUpdateEventHandleGS(plugin, app, updateType);
             }
-            catch {
+            catch (error) {
                 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
+                    url: this.CURRENT_LOCATION,
+                    error
                 });
             }
         }
         this.updatingPluginId[updateType] = '';
     }
+    onUpdateEventHandleGS(plugin, app, updateType) {
+        const pluginCustomEventInfo = pick(plugin, [
+            'name',
+            'contextPath',
+            'module',
+            'version',
+            'type',
+            'id'
+        ]);
+        const gsEventResult = updateType === 'install'
+            ? PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_INSTALLED
+            : PRODUCT_EXPERIENCE.APPLICATIONS.RESULTS.PLUGIN_REMOVED;
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.APPLICATIONS.EVENTS.PACKAGE_PLUGINS, {
+            component: PRODUCT_EXPERIENCE.APPLICATIONS.COMPONENTS.PLUGIN_LIST,
+            result: gsEventResult,
+            url: this.CURRENT_LOCATION,
+            ...pluginCustomEventInfo,
+            targetApplicationName: app.name,
+            targetApplicationContextPath: app.contextPath
+        });
+    }
     async getAppsForUpdate(plugin, updateType) {
         let apps = (await this.ecosystemService.getWebApplications()).filter(app => this.ecosystemService.isOwner(app) && app.type !== ApplicationType.EXTERNAL);
         if (updateType === 'install') {
@@ -2296,10 +2319,23 @@ 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
+            pluginsToAdd.forEach(plugin => {
+                const pluginCustomEventInfo = pick(plugin, [
+                    'name',
+                    'contextPath',
+                    'module',
+                    'version',
+                    'type',
+                    'id'
+                ]);
+                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,
+                    ...pluginCustomEventInfo,
+                    targetApplicationName: this.app.name,
+                    targetApplicationContextPath: this.app.contextPath
+                });
             });
         }
         catch (ex) {
@@ -2308,7 +2344,8 @@ class ApplicationPluginsComponent {
                 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
+                    url: this.CURRENT_LOCATION,
+                    error: ex
                 });
             }
         }
@@ -2324,10 +2361,15 @@ 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
+            plugins.forEach(plugin => {
+                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,
+                    id: plugin,
+                    targetApplicationName: this.app.name,
+                    targetApplicationContextPath: this.app.contextPath
+                });
             });
         }
         catch (ex) {
@@ -2336,7 +2378,8 @@ class ApplicationPluginsComponent {
                 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
+                    url: this.CURRENT_LOCATION,
+                    error: ex
                 });
             }
         }
@@ -2570,10 +2613,10 @@ class ApplicationPluginsComponent {
     }
 }
 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/application'\"\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", "suppressDataOverriding"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] });
+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/application'\"\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" }] });
 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/application'\"\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" }]
+            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/application'\"\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 }, { type: i2.GainsightService }]; }, propDecorators: { appId: [{
                 type: Input
             }], dataGrid: [{