import { Component, DestroyRef, EventEmitter, inject } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { ActionBarItemComponent, AppStateService, BreadcrumbModule, BytesPipe, C8yTranslatePipe, DataGridModule, EmptyStateComponent, EmptyStateContextDirective, gettext, HeaderModule, IconDirective, LoadingComponent } from '@c8y/ngx-components';
import { AsyncPipe, DecimalPipe, NgClass, NgIf, PercentPipe } from '@angular/common';
import { MessagingNamespacesService } from '../../api/services/messaging-namespaces.service';
import { BacklogQuotaLimitPipe } from '../../utils/backlog-quota-limit.pipe';
import { UsageComponent } from '../shared/usage/usage.component';
import { TimeToLivePipe } from '../../utils/time-to-live.pipe';
import { NAMESPACE_PROPS } from '../../utils/namespace-props';
import { TranslateService } from '@ngx-translate/core';
import { TopicsDataGridService } from './topics-data-grid.service';
import { map, shareReplay, switchMap, tap } from 'rxjs/operators';
import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
export class TopicListViewComponent {
    constructor() {
        this.route = inject(ActivatedRoute);
        this.appState = inject(AppStateService);
        this.namespacesService = inject(MessagingNamespacesService);
        this.topicsDataGridService = inject(TopicsDataGridService);
        this.translateService = inject(TranslateService);
        this.destroyRef = inject(DestroyRef);
        this.loading$ = new BehaviorSubject(false);
        this.refresh = new EventEmitter();
        this.tenantId$ = this.appState.currentTenant.pipe(map(tenant => tenant.name));
        this.namespaceId$ = this.route.params.pipe(map(params => params['namespace']));
        this.namespaceLabel$ = this.namespaceId$.pipe(map(namespaceId => this.translateService.instant(NAMESPACE_PROPS[namespaceId].label)));
        this.icon$ = this.namespaceId$.pipe(map(namespaceId => NAMESPACE_PROPS[namespaceId].icon));
        this.namespaceDetails$ = combineLatest([this.tenantId$, this.namespaceId$, this.refresh]).pipe(tap(() => this.loading$.next(true)), switchMap(([tenantId, namespaceId]) => this.namespacesService.getNamespaceDetails(tenantId, namespaceId)), tap(() => this.loading$.next(false)), shareReplay(1));
        this.tableTitle = gettext('Topics');
        this.loadingItemsLabel = gettext('Loading topics...');
        this.loadMoreItemsLabel = gettext('Load more topics');
        this.noResultsMessage = gettext('No matching topics found.');
        this.noResultsSubtitle = gettext('Refine your search terms or check your spelling.');
        this.noDataMessage = gettext('No topics to display.');
        this.noDataSubtitle = gettext('Create new topics to monitor them here.');
        this.columns = this.topicsDataGridService.getColumns();
        this.pagination = {
            pageSize: 20,
            currentPage: 1
        };
        this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
    }
    async onDataSourceModifier(dataSourceModifier) {
        return firstValueFrom(combineLatest([this.tenantId$, this.namespaceId$]).pipe(switchMap(([tenantId, namespaceId]) => this.topicsDataGridService.getServerSideData(tenantId, namespaceId, dataSourceModifier))));
    }
    ngAfterViewInit() {
        this.route.params
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => this.refresh.emit());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopicListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopicListViewComponent, isStandalone: true, selector: "app-topic-list-view", ngImport: i0, template: "<c8y-title>{{ namespaceLabel$ | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'monitoring'\"\n    [label]=\"'Monitoring' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [label]=\"'Messaging service' | translate\"\n    [path]=\"'/monitoring/messaging-service'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"namespaceLabel$ | async\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <a\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"refresh.emit()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': loading$ | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </a>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-flex d-col\">\n  <div class=\"bg-level-1 separator-bottom flex-no-shrink\">\n    <div\n      class=\"card-block\"\n      style=\"min-height: 172px\"\n    >\n      <div\n        class=\"col-md-4 m-b-24 col-xs-12 d-flex p-t-24 gap-16 text-default a-i-center a-s-stretch\"\n      >\n        <div class=\"text-center d-col\">\n          <i\n            class=\"m-b-8 icon-40 c8y-icon-duocolor\"\n            [c8yIcon]=\"icon$ | async\"\n          ></i>\n          <span class=\"tag tag--info\">{{ 'Service' | translate }}</span>\n        </div>\n        <span class=\"h4 text-break-all\">{{ namespaceLabel$ | async }}</span>\n      </div>\n      <div class=\"col-md-4\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            {{ 'Service usage/limits' | translate }}\n          </legend>\n\n          <ng-container *ngIf=\"loading$ | async; else serviceUsageLimits\">\n            <c8y-loading></c8y-loading>\n          </ng-container>\n\n          <ng-template #serviceUsageLimits>\n            <ng-container *ngIf=\"(namespaceDetails$ | async)?.namespace as namespace\">\n              <ul class=\"list-unstyled small animated fadeIn\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Topics' | translate }}</label>\n                  <ng-container *ngIf=\"namespace?.topics?.limit !== 0\">\n                    <app-usage\n                      [count]=\"namespace?.topics?.count\"\n                      [limit]=\"namespace?.topics?.limit\"\n                    ></app-usage>\n                    <span class=\"m-l-16\">\n                      {{ namespace?.topics?.count | number }} /\n                      {{ namespace?.topics?.limit | backlogQuotaLimit }}\n                    </span>\n                  </ng-container>\n                  <ng-container *ngIf=\"namespace?.topics?.limit === 0\">\n                    <span class=\"m-l-16\">{{ namespace?.topics?.count | number }}</span>\n                  </ng-container>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Subscribers' | translate }}</label>\n                  <span class=\"m-l-16\">\n                    {{ namespace?.subscribers?.count | number }}\n                  </span>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Publishers' | translate }}</label>\n                  <span class=\"m-l-16\">\n                    {{ namespace?.publishers?.count | number }}\n                  </span>\n                </li>\n              </ul>\n            </ng-container>\n          </ng-template>\n        </fieldset>\n      </div>\n      <div class=\"col-md-4\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Service message backlog limits' | translate }}</legend>\n\n          <ng-container *ngIf=\"loading$ | async; else serviceMessageBacklogLimits\">\n            <c8y-loading></c8y-loading>\n          </ng-container>\n\n          <ng-template #serviceMessageBacklogLimits>\n            <ng-container *ngIf=\"(namespaceDetails$ | async)?.policies as policies\">\n              <ul class=\"list-unstyled small animated fadeIn\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">\n                    {{ 'Backlog quota (per topic)' | translate }}\n                  </label>\n                  <span\n                    title=\"{{\n                      policies?.backlogQuota?.limit > 0\n                        ? (policies.backlogQuota.limit | bytes: 0 : true)\n                        : '-'\n                    }}\"\n                  >\n                    {{\n                      policies?.backlogQuota?.limit > 0\n                        ? (policies.backlogQuota.limit | bytes: 0)\n                        : '-'\n                    }}\n                  </span>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">\n                    {{ 'Backlog time to live (TTL)' | translate }}\n                  </label>\n                  <span>{{ policies?.messageTTL | timeToLive }}</span>\n                </li>\n              </ul>\n            </ng-container>\n          </ng-template>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"tableTitle | translate\"\n    [loadingItemsLabel]=\"loadingItemsLabel | translate\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel | translate\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [refresh]=\"refresh\"\n    [hideReload]=\"true\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'day-view'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    ></c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <a\n          title=\"{{ context.value }}\"\n          [routerLink]=\"['topic', context.item.id]\"\n        >\n          {{ context.value }}\n        </a>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"msgRateIn\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | number }}\">\n          {{ context.value | number }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"msgRateOut\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | number }}\">\n          {{ context.value | number }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"subscribers\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <a\n          title=\"{{ context.value | number }}\"\n          [routerLink]=\"['topic', context.item.id, 'subscribers']\"\n        >\n          {{ context.value | number }}\n        </a>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"backlogSize\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | bytes: 2 : true }}\">\n          {{ context.value | bytes: 2 }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"backlogUsagePercentage\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value / 100 | percent: '1.0-2' }}\">\n          {{ context.value / 100 | percent: '1.0-2' }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: HeaderModule }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: DataGridModule }, { kind: "directive", type: i1.CellRendererDefDirective, selector: "[c8yCellRendererDef]" }, { kind: "directive", type: i1.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i1.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "hideReload"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: BacklogQuotaLimitPipe, name: "backlogQuotaLimit" }, { kind: "component", type: UsageComponent, selector: "app-usage", inputs: ["count", "limit", "percentage"] }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeToLivePipe, name: "timeToLive" }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopicListViewComponent, decorators: [{
            type: Component,
            args: [{ imports: [
                        RouterLink,
                        HeaderModule,
                        DataGridModule,
                        DecimalPipe,
                        C8yTranslatePipe,
                        BacklogQuotaLimitPipe,
                        UsageComponent,
                        BytesPipe,
                        TimeToLivePipe,
                        BreadcrumbModule,
                        LoadingComponent,
                        NgIf,
                        ActionBarItemComponent,
                        NgClass,
                        IconDirective,
                        PercentPipe,
                        EmptyStateComponent,
                        EmptyStateContextDirective,
                        AsyncPipe
                    ], selector: 'app-topic-list-view', standalone: true, template: "<c8y-title>{{ namespaceLabel$ | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'monitoring'\"\n    [label]=\"'Monitoring' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [label]=\"'Messaging service' | translate\"\n    [path]=\"'/monitoring/messaging-service'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item [label]=\"namespaceLabel$ | async\"></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <a\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"refresh.emit()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': loading$ | async }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </a>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage d-flex d-col\">\n  <div class=\"bg-level-1 separator-bottom flex-no-shrink\">\n    <div\n      class=\"card-block\"\n      style=\"min-height: 172px\"\n    >\n      <div\n        class=\"col-md-4 m-b-24 col-xs-12 d-flex p-t-24 gap-16 text-default a-i-center a-s-stretch\"\n      >\n        <div class=\"text-center d-col\">\n          <i\n            class=\"m-b-8 icon-40 c8y-icon-duocolor\"\n            [c8yIcon]=\"icon$ | async\"\n          ></i>\n          <span class=\"tag tag--info\">{{ 'Service' | translate }}</span>\n        </div>\n        <span class=\"h4 text-break-all\">{{ namespaceLabel$ | async }}</span>\n      </div>\n      <div class=\"col-md-4\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            {{ 'Service usage/limits' | translate }}\n          </legend>\n\n          <ng-container *ngIf=\"loading$ | async; else serviceUsageLimits\">\n            <c8y-loading></c8y-loading>\n          </ng-container>\n\n          <ng-template #serviceUsageLimits>\n            <ng-container *ngIf=\"(namespaceDetails$ | async)?.namespace as namespace\">\n              <ul class=\"list-unstyled small animated fadeIn\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Topics' | translate }}</label>\n                  <ng-container *ngIf=\"namespace?.topics?.limit !== 0\">\n                    <app-usage\n                      [count]=\"namespace?.topics?.count\"\n                      [limit]=\"namespace?.topics?.limit\"\n                    ></app-usage>\n                    <span class=\"m-l-16\">\n                      {{ namespace?.topics?.count | number }} /\n                      {{ namespace?.topics?.limit | backlogQuotaLimit }}\n                    </span>\n                  </ng-container>\n                  <ng-container *ngIf=\"namespace?.topics?.limit === 0\">\n                    <span class=\"m-l-16\">{{ namespace?.topics?.count | number }}</span>\n                  </ng-container>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Subscribers' | translate }}</label>\n                  <span class=\"m-l-16\">\n                    {{ namespace?.subscribers?.count | number }}\n                  </span>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">{{ 'Publishers' | translate }}</label>\n                  <span class=\"m-l-16\">\n                    {{ namespace?.publishers?.count | number }}\n                  </span>\n                </li>\n              </ul>\n            </ng-container>\n          </ng-template>\n        </fieldset>\n      </div>\n      <div class=\"col-md-4\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Service message backlog limits' | translate }}</legend>\n\n          <ng-container *ngIf=\"loading$ | async; else serviceMessageBacklogLimits\">\n            <c8y-loading></c8y-loading>\n          </ng-container>\n\n          <ng-template #serviceMessageBacklogLimits>\n            <ng-container *ngIf=\"(namespaceDetails$ | async)?.policies as policies\">\n              <ul class=\"list-unstyled small animated fadeIn\">\n                <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">\n                    {{ 'Backlog quota (per topic)' | translate }}\n                  </label>\n                  <span\n                    title=\"{{\n                      policies?.backlogQuota?.limit > 0\n                        ? (policies.backlogQuota.limit | bytes: 0 : true)\n                        : '-'\n                    }}\"\n                  >\n                    {{\n                      policies?.backlogQuota?.limit > 0\n                        ? (policies.backlogQuota.limit | bytes: 0)\n                        : '-'\n                    }}\n                  </span>\n                </li>\n\n                <li class=\"p-t-4 p-b-4 d-flex text-nowrap\">\n                  <label class=\"small m-b-0 m-r-auto\">\n                    {{ 'Backlog time to live (TTL)' | translate }}\n                  </label>\n                  <span>{{ policies?.messageTTL | timeToLive }}</span>\n                </li>\n              </ul>\n            </ng-container>\n          </ng-template>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n\n  <c8y-data-grid\n    class=\"d-contents\"\n    [title]=\"tableTitle | translate\"\n    [loadingItemsLabel]=\"loadingItemsLabel | translate\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel | translate\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [refresh]=\"refresh\"\n    [hideReload]=\"true\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'day-view'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    ></c8y-ui-empty-state>\n\n    <c8y-column name=\"name\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <a\n          title=\"{{ context.value }}\"\n          [routerLink]=\"['topic', context.item.id]\"\n        >\n          {{ context.value }}\n        </a>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"msgRateIn\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | number }}\">\n          {{ context.value | number }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"msgRateOut\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | number }}\">\n          {{ context.value | number }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"subscribers\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <a\n          title=\"{{ context.value | number }}\"\n          [routerLink]=\"['topic', context.item.id, 'subscribers']\"\n        >\n          {{ context.value | number }}\n        </a>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"backlogSize\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value | bytes: 2 : true }}\">\n          {{ context.value | bytes: 2 }}\n        </span>\n      </ng-container>\n    </c8y-column>\n\n    <c8y-column name=\"backlogUsagePercentage\">\n      <ng-container *c8yCellRendererDef=\"let context\">\n        <span title=\"{{ context.value / 100 | percent: '1.0-2' }}\">\n          {{ context.value / 100 | percent: '1.0-2' }}\n        </span>\n      </ng-container>\n    </c8y-column>\n  </c8y-data-grid>\n</div>\n" }]
        }] });
//# sourceMappingURL=data:application/json;base64, 