UNPKG

@alauda-fe/common

Version:

Alauda frontend team common codes.

586 lines • 92.6 kB

JavaScript

import { __decorate, __metadata } from "tslib"; import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, } from '@angular/core'; import { difference } from 'lodash-es'; import { plural } from 'pluralize'; import { Observable, ReplaySubject, combineLatest, map, startWith } from 'rxjs'; import { ObservableInput } from '../../../../core/public-api'; import { ConfigurableField, } from '../../types'; import * as i0 from "@angular/core"; const _c0 = ["grid"]; const _c1 = [[["", "aclResourceGridHeader", ""]]]; const _c2 = ["[aclResourceGridHeader]"]; const _c3 = a0 => ({ "header--lite": a0 }); const _c4 = a0 => ({ "switch-btn--selected": a0 }); const _c5 = (a0, a1, a2) => ({ "grid--card": a0, "grid--popup": a1, "grid--popup--lite": a2 }); const _c6 = (a0, a1) => ({ "grid__item--selected": a0, "grid__item--disabled": a1 }); const _c7 = a0 => ({ highlighted: a0 }); const _c8 = a0 => ({ $implicit: a0 }); function ResourceDataGridComponent_div_9_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 10); i0.ɵɵprojection(1); i0.ɵɵelementEnd(); } } function ResourceDataGridComponent_div_10_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "div", 11); } } function ResourceDataGridComponent_span_13_Template(rf, ctx) { if (rf & 1) { const _r1 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "span", 12)(1, "span", 13); i0.ɵɵlistener("click", function ResourceDataGridComponent_span_13_Template_span_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setDisplayMode("row")); }); i0.ɵɵelement(2, "aui-icon", 14); i0.ɵɵelementEnd(); i0.ɵɵelementStart(3, "span", 13); i0.ɵɵlistener("click", function ResourceDataGridComponent_span_13_Template_span_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setDisplayMode("card")); }); i0.ɵɵelement(4, "aui-icon", 15); i0.ɵɵelementEnd()(); } if (rf & 2) { const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵadvance(); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4, ctx_r1.displayMode !== "card")); i0.ɵɵadvance(2); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c4, ctx_r1.displayMode === "card")); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_aui_icon_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "aui-icon", 34); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_ng_container_6_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵelementStart(1, "span", 35); i0.ɵɵtext(2); i0.ɵɵelementEnd(); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const str_r5 = ctx.$implicit; i0.ɵɵadvance(); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c7, str_r5.isHighlighted)); i0.ɵɵadvance(); i0.ɵɵtextInterpolate(str_r5.text); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_7_ng_container_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵelementStart(1, "span", 35); i0.ɵɵtext(2); i0.ɵɵelementEnd(); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const str_r6 = ctx.$implicit; i0.ɵɵadvance(); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c7, str_r6.isHighlighted)); i0.ɵɵadvance(); i0.ɵɵtextInterpolate(str_r6.text); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_7_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 36); i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_7_ng_container_1_Template, 3, 4, "ng-container", 27); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵadvance(); i0.ɵɵproperty("ngForOf", ctx_r1.getHighlightedDisplayNameStrs(item_r4)); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_ng_container_8_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtext(1); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵadvance(); i0.ɵɵtextInterpolate1("(", item_r4.clusterDisplayName, ")"); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_aui_tag_9_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "aui-tag", 42); i0.ɵɵtext(1); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵadvance(); i0.ɵɵtextInterpolate1(" ", item_r4.clusterArch, " "); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 37)(1, "span", 38); i0.ɵɵpipe(2, "translate"); i0.ɵɵelementStart(3, "span", 39); i0.ɵɵtext(4); i0.ɵɵpipe(5, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(6, "span", 40); i0.ɵɵtext(7); i0.ɵɵtemplate(8, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_ng_container_8_Template, 2, 1, "ng-container", 8); i0.ɵɵelementEnd(); i0.ɵɵtemplate(9, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_aui_tag_9_Template, 2, 1, "aui-tag", 41); i0.ɵɵelementEnd()(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(); i0.ɵɵpropertyInterpolate("auiTooltip", i0.ɵɵpipeBind1(2, 5, "belonged_cluster") + ": " + item_r4.cluster); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 7, "belonged_cluster")); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate(item_r4.cluster); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", item_r4.clusterDisplayName); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", item_r4.clusterArch); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_9_label_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "label", 45); i0.ɵɵtext(1); i0.ɵɵpipe(2, "translate"); i0.ɵɵelementEnd(); } if (rf & 2) { i0.ɵɵadvance(); i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, "status"), ":"); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_9_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div"); i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_9_label_1_Template, 3, 3, "label", 43); i0.ɵɵelementStart(2, "span", 39); i0.ɵɵtext(3); i0.ɵɵpipe(4, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelement(5, "aui-icon", 44); i0.ɵɵtext(6); i0.ɵɵpipe(7, "translate"); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵclassMapInterpolate1("grid__field grid__field-status ", "grid__field-status--" + item_r4.status, ""); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.popupLite); i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 11, "status")); i0.ɵɵadvance(2); i0.ɵɵclassMap("icon-" + item_r4.status); i0.ɵɵproperty("icon", ctx_r1.statusIcon[item_r4.status])("background", ctx_r1.statusIcon[item_r4.status].endsWith("_triangle_s") ? "triangle" : "circle"); i0.ɵɵadvance(); i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 13, item_r4.status), " "); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_10_ng_container_7_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtext(1); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵadvance(); i0.ɵɵtextInterpolate1("(Istio ", item_r4.serviceMeshIstioVersion, ")"); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_10_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 46)(1, "span", 39); i0.ɵɵtext(2); i0.ɵɵpipe(3, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "span"); i0.ɵɵtext(5); i0.ɵɵelementEnd(); i0.ɵɵelementStart(6, "div", 36); i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_10_ng_container_7_Template, 2, 1, "ng-container", 8); i0.ɵɵelementEnd()(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 3, "belonged_servicemesh")); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate1(" ", item_r4.serviceMeshName, " "); i0.ɵɵadvance(2); i0.ɵɵproperty("ngIf", item_r4.serviceMeshIstioVersion); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_ng_container_6_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtext(1); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵadvance(); i0.ɵɵtextInterpolate1("(", item_r4.clusterDisplayName, ")"); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_aui_tag_7_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "aui-tag", 42); i0.ɵɵtext(1); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵadvance(); i0.ɵɵtextInterpolate1(" ", item_r4.clusterArch, " "); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 46)(1, "span", 39); i0.ɵɵtext(2); i0.ɵɵpipe(3, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "span"); i0.ɵɵtext(5); i0.ɵɵtemplate(6, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_ng_container_6_Template, 2, 1, "ng-container", 8); i0.ɵɵelementEnd(); i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_aui_tag_7_Template, 2, 1, "aui-tag", 41); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "cluster")); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate(item_r4.cluster); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", item_r4.clusterDisplayName); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", item_r4.clusterArch); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_12_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 46)(1, "span", 39); i0.ɵɵtext(2); i0.ɵɵpipe(3, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "span"); i0.ɵɵtext(5); i0.ɵɵelementEnd()(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "cluster")); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate1("", item_r4.cluster, " "); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_13_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 46)(1, "span", 39); i0.ɵɵtext(2); i0.ɵɵelementEnd(); i0.ɵɵelementStart(3, "span"); i0.ɵɵtext(4); i0.ɵɵpipe(5, "translate"); i0.ɵɵelementEnd()(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(2); i0.ɵɵtextInterpolate("Istio"); i0.ɵɵadvance(2); i0.ɵɵtextInterpolate1("", item_r4.serviceMeshIstioVersion || i0.ɵɵpipeBind1(5, 2, "not_deployed"), " "); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_14_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 47)(1, "span", 39); i0.ɵɵtext(2); i0.ɵɵpipe(3, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "span"); i0.ɵɵtext(5); i0.ɵɵpipe(6, "aclRelativeTime"); i0.ɵɵelementEnd()(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "created_at")); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, item_r4.timestamp)); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_15_Template(rf, ctx) { if (rf & 1) { const _r7 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "div", 48); i0.ɵɵlistener("click", function ResourceDataGridComponent_ng_container_14_div_1_div_2_div_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); }); i0.ɵɵelementContainer(1, 49); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionTemplateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c8, item_r4.__origin)); } } function ResourceDataGridComponent_ng_container_14_div_1_div_2_Template(rf, ctx) { if (rf & 1) { const _r3 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "div", 21); i0.ɵɵlistener("click", function ResourceDataGridComponent_ng_container_14_div_1_div_2_Template_div_click_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSelect(item_r4)); }); i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_14_div_1_div_2_aui_icon_1_Template, 1, 0, "aui-icon", 22); i0.ɵɵelementStart(2, "div", 23); i0.ɵɵelement(3, "acl-resource-icon", 24); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "div", 25)(5, "div", 26); i0.ɵɵtemplate(6, ResourceDataGridComponent_ng_container_14_div_1_div_2_ng_container_6_Template, 3, 4, "ng-container", 27); i0.ɵɵelementEnd(); i0.ɵɵtemplate(7, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_7_Template, 2, 1, "div", 28); i0.ɵɵelementEnd(); i0.ɵɵtemplate(8, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_8_Template, 10, 9, "div", 29)(9, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_9_Template, 8, 15, "div", 30)(10, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_10_Template, 8, 5, "div", 31)(11, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_11_Template, 8, 6, "div", 31)(12, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_12_Template, 6, 4, "div", 31)(13, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_13_Template, 6, 4, "div", 31)(14, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_14_Template, 7, 6, "div", 32)(15, ResourceDataGridComponent_ng_container_14_div_1_div_2_div_15_Template, 2, 4, "div", 33); i0.ɵɵelementEnd(); } if (rf & 2) { const item_r4 = ctx.$implicit; const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c6, ctx_r1.context === "popup" && ctx_r1.selectedUid === item_r4.__origin.metadata.uid, item_r4.state == null ? null : item_r4.state.disabled))("auiTooltip", item_r4.state == null ? null : item_r4.state.tooltip)("auiTooltipDisabled", !(item_r4.state == null ? null : item_r4.state.disabled) || !(item_r4.state == null ? null : item_r4.state.tooltip)); i0.ɵɵattribute("data-test", item_r4.name + "/" + item_r4.cluster); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.selectedUid === item_r4.__origin.metadata.uid); i0.ɵɵadvance(2); i0.ɵɵproperty("type", ctx_r1.type)("color", ctx_r1.context === "popup" && !ctx_r1.popupLite && ctx_r1.selectedUid === item_r4.__origin.metadata.uid ? "white" : "blue")("displayMode", ctx_r1.displayMode); i0.ɵɵadvance(3); i0.ɵɵproperty("ngForOf", ctx_r1.getHighlightedNameStrs(item_r4)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r1.popupLite); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.Cluster)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.Status)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.ServiceMesh)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.ServiceMesh)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.ServiceMeshGroup)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.ServiceMeshGroup)); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.Time) && !ctx_r1.popupLite); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r1.fields.includes(ctx_r1.fieldsDef.Action) && ctx_r1.actionTemplateRef && ctx_r1.context !== "popup"); } } function ResourceDataGridComponent_ng_container_14_div_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 19, 0); i0.ɵɵtemplate(2, ResourceDataGridComponent_ng_container_14_div_1_div_2_Template, 16, 21, "div", 20); i0.ɵɵelementEnd(); } if (rf & 2) { const displayData_r8 = i0.ɵɵnextContext().ngIf; const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c5, ctx_r1.displayMode === "card" && ctx_r1.context !== "popup", ctx_r1.context === "popup", ctx_r1.context === "popup" && ctx_r1.popupLite)); i0.ɵɵadvance(2); i0.ɵɵproperty("ngForOf", displayData_r8); } } function ResourceDataGridComponent_ng_container_14_acl_resource_no_data_2_Template(rf, ctx) { if (rf & 1) { const _r9 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "acl-resource-no-data", 50); i0.ɵɵlistener("refresh", function ResourceDataGridComponent_ng_container_14_acl_resource_no_data_2_Template_acl_resource_no_data_refresh_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.reload.emit()); })("clear", function ResourceDataGridComponent_ng_container_14_acl_resource_no_data_2_Template_acl_resource_no_data_clear_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.keywordChange("")); }); i0.ɵɵelementEnd(); } if (rf & 2) { const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵproperty("isFiltered", !!ctx_r1.keyword)("type", ctx_r1.type); } } function ResourceDataGridComponent_ng_container_14_acl_zero_state_4_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "acl-zero-state", 51); } } function ResourceDataGridComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, ResourceDataGridComponent_ng_container_14_div_1_Template, 3, 6, "div", 16)(2, ResourceDataGridComponent_ng_container_14_acl_resource_no_data_2_Template, 1, 2, "acl-resource-no-data", 17); i0.ɵɵpipe(3, "async"); i0.ɵɵtemplate(4, ResourceDataGridComponent_ng_container_14_acl_zero_state_4_Template, 1, 0, "acl-zero-state", 18); i0.ɵɵpipe(5, "async"); i0.ɵɵelementContainerEnd(); } if (rf & 2) { let tmp_3_0; let tmp_4_0; const displayData_r8 = ctx.ngIf; const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", displayData_r8.length); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r1.popupLite && !((tmp_3_0 = i0.ɵɵpipeBind1(3, 3, ctx_r1.displayData$)) == null ? null : tmp_3_0.length)); i0.ɵɵadvance(2); i0.ɵɵproperty("ngIf", ctx_r1.popupLite && !((tmp_4_0 = i0.ɵɵpipeBind1(5, 5, ctx_r1.displayData$)) == null ? null : tmp_4_0.length)); } } function ResourceDataGridComponent_div_18_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "div", 52); i0.ɵɵelement(1, "acl-loading-mask", 53); i0.ɵɵelementEnd(); } if (rf & 2) { const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵadvance(); i0.ɵɵproperty("loading", ctx_r1.loading); } } export class ResourceDataGridComponent { constructor() { this.context = 'page'; this.popupLite = false; this.data = []; this.type = 'namespace'; this.fields = [ConfigurableField.Time]; this.loading = true; this.selectItem = new EventEmitter(); this.filter = new EventEmitter(); this.reload = new EventEmitter(); this.keyword = ''; this.fieldsDef = ConfigurableField; this.displayMode = 'row'; this.filter$ = new ReplaySubject(1); this.displayModeKey = 'acl_display_mode'; this.scrollInitialized = false; this.statusIcon = { normal: 'check_circle_s', abnormal: 'exclamation_triangle_s', enabled: 'check_circle_s', disabled: 'minus_circle_s', }; this.getHighlightedNameStrs = (item) => { if (!this.keyword) { return [ { text: item.name, }, ]; } const original = item.name; const strs = item.name.toLowerCase().split(this.keyword.toLowerCase()); const ret = []; let pos = 0; for (const [i, str] of strs.entries()) { const end = pos + str.length; ret.push({ text: original.slice(pos, end), }); if (i !== strs.length - 1) { ret.push({ text: original.slice(end, end + this.keyword.length), isHighlighted: true, }); } pos = end + this.keyword.length; } return ret; }; this.getHighlightedDisplayNameStrs = (item) => { if (!this.keyword) { return [ { text: item.displayName, }, ]; } const original = item.displayName; const strs = item.displayName .toLowerCase() .split(this.keyword.toLowerCase()); const ret = []; let pos = 0; for (const [i, str] of strs.entries()) { const end = pos + str.length; ret.push({ text: original.slice(pos, end), }); if (i !== strs.length - 1) { ret.push({ text: original.slice(end, end + this.keyword.length), isHighlighted: true, }); } pos = end + this.keyword.length; } return ret; }; this.sortWithoutIstio = (data) => { const withoutIstio = data.filter(item => !item?.serviceMeshIstioVersion); return [...difference(data, withoutIstio), ...withoutIstio]; }; } set grid(grid) { if (grid) { this.initScroll(grid.nativeElement); } } ngOnInit() { const displayMode = window.localStorage.getItem(this.displayModeKey); this.displayMode = this.context === 'popup' ? this.popupLite ? 'row-lite' : 'row' : ['row', 'card'].includes(displayMode) ? displayMode : 'row'; this.displayData$ = combineLatest([ this.data$, this.filter$.pipe(startWith('')), ]).pipe(map(([data, keyword]) => data.filter(item => { const k = keyword.toLowerCase(); return (item.name.toLowerCase().includes(k) || item.displayName?.toLowerCase()?.includes(k)); }))); } initScroll(scrollEl) { if (this.context === 'page' || this.scrollInitialized || !this.data?.length) { return; } const currentIndex = this.data.findIndex(item => item.__origin.metadata.uid === this.selectedUid); const rowHeight = scrollEl.scrollHeight / this.data.length; if (currentIndex > -1 && rowHeight * (currentIndex + 1) > scrollEl.offsetHeight) { scrollEl.scrollTo({ top: rowHeight * currentIndex, }); } this.scrollInitialized = true; } onSelect(item) { if (item.state?.disabled || this.selectedUid === item.__origin.metadata.uid) { return; } this.selectedUid = item.name; this.selectItem.emit(item); } setDisplayMode(mode) { this.displayMode = mode; window.localStorage.setItem(this.displayModeKey, mode); } keywordChange(keyword) { this.keyword = keyword; this.filter$.next(keyword); } filterDisabledData(data, context) { // workaround for typings in template return (context === 'page' ? data : data.filter(item => !item.state?.disabled)); } pluralForm(type) { return plural(type); } static { this.ɵfac = function ResourceDataGridComponent_Factory(t) { return new (t || ResourceDataGridComponent)(); }; } static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceDataGridComponent, selectors: [["acl-resource-data-grid"]], viewQuery: function ResourceDataGridComponent_Query(rf, ctx) { if (rf & 1) { i0.ɵɵviewQuery(_c0, 5); } if (rf & 2) { let _t; i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.grid = _t.first); } }, inputs: { context: "context", popupLite: "popupLite", data: "data", type: "type", fields: "fields", actionTemplateRef: "actionTemplateRef", selectedUid: "selectedUid", loading: "loading" }, outputs: { selectItem: "selectItem", filter: "filter", reload: "reload" }, ngContentSelectors: _c2, decls: 19, vars: 32, consts: [["grid", ""], [1, "header", 3, "ngClass"], [1, "header__title"], [1, "header__desc"], ["class", "header__custom", 4, "ngIf"], ["class", "tw-flex-1", 4, "ngIf"], ["size", "small", 3, "keywordChange", "searchButton", "placeholder", "keyword", "clearable"], ["class", "header__display-mode", 4, "ngIf"], [4, "ngIf"], ["class", "loading", 4, "ngIf"], [1, "header__custom"], [1, "tw-flex-1"], [1, "header__display-mode"], [1, "switch-btn", 3, "click", "ngClass"], ["icon", "list"], ["icon", "grid"], ["class", "grid", 3, "ngClass", 4, "ngIf"], [3, "isFiltered", "type", "refresh", "clear", 4, "ngIf"], ["context", "table", 4, "ngIf"], [1, "grid", 3, "ngClass"], ["class", "grid__item", 3, "ngClass", "auiTooltip", "auiTooltipDisabled", "click", 4, "ngFor", "ngForOf"], [1, "grid__item", 3, "click", "ngClass", "auiTooltip", "auiTooltipDisabled"], ["class", "check-triangle-badge", "icon", "check", 4, "ngIf"], [1, "grid__field", "grid__field-icon"], [3, "type", "color", "displayMode"], [1, "grid__field", "grid__field-name"], [1, "name"], [4, "ngFor", "ngForOf"], ["class", "des", 4, "ngIf"], ["class", "grid__field flex grid__field-cluster", 4, "ngIf"], [3, "class", 4, "ngIf"], ["class", "grid__field grid__field-servicemesh", 4, "ngIf"], ["class", "grid__field grid__field-time", 4, "ngIf"], ["class", "grid__field grid__field-action", 3, "click", 4, "ngIf"], ["icon", "check", 1, "check-triangle-badge"], [3, "ngClass"], [1, "des"], [1, "grid__field", "flex", "grid__field-cluster"], [1, "belonged-cluster", "tw-flex", 3, "auiTooltip"], [1, "with-colon"], [1, "tw-text-ellipsis", "tw-overflow-hidden"], ["type", "primary", "size", "mini", 4, "ngIf"], ["type", "primary", "size", "mini"], ["class", "tw-text-help-text tw-mr-8", 4, "ngIf"], [3, "icon", "background"], [1, "tw-text-help-text", "tw-mr-8"], [1, "grid__field", "grid__field-servicemesh"], [1, "grid__field", "grid__field-time"], [1, "grid__field", "grid__field-action", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "refresh", "clear", "isFiltered", "type"], ["context", "table"], [1, "loading"], ["type", "content", 3, "loading"]], template: function ResourceDataGridComponent_Template(rf, ctx) { if (rf & 1) { i0.ɵɵprojectionDef(_c1); i0.ɵɵelementStart(0, "div", 1)(1, "span", 2)(2, "span"); i0.ɵɵtext(3); i0.ɵɵpipe(4, "pure"); i0.ɵɵpipe(5, "translate"); i0.ɵɵelementEnd(); i0.ɵɵelementStart(6, "span", 3); i0.ɵɵtext(7); i0.ɵɵpipe(8, "async"); i0.ɵɵelementEnd()(); i0.ɵɵtemplate(9, ResourceDataGridComponent_div_9_Template, 2, 0, "div", 4)(10, ResourceDataGridComponent_div_10_Template, 1, 0, "div", 5); i0.ɵɵelementStart(11, "aui-search", 6); i0.ɵɵpipe(12, "translate"); i0.ɵɵlistener("keywordChange", function ResourceDataGridComponent_Template_aui_search_keywordChange_11_listener($event) { return ctx.keywordChange($event); }); i0.ɵɵelementEnd(); i0.ɵɵtemplate(13, ResourceDataGridComponent_span_13_Template, 5, 6, "span", 7); i0.ɵɵelementEnd(); i0.ɵɵtemplate(14, ResourceDataGridComponent_ng_container_14_Template, 6, 7, "ng-container", 8); i0.ɵɵpipe(15, "async"); i0.ɵɵpipe(16, "pure"); i0.ɵɵpipe(17, "pure"); i0.ɵɵtemplate(18, ResourceDataGridComponent_div_18_Template, 2, 1, "div", 9); } if (rf & 2) { let tmp_2_0; i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(30, _c3, ctx.popupLite)); i0.ɵɵadvance(3); i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 15, i0.ɵɵpipeBind2(4, 12, ctx.type, ctx.pluralForm))); i0.ɵɵadvance(4); i0.ɵɵtextInterpolate1("\uFF08", ((tmp_2_0 = i0.ɵɵpipeBind1(8, 17, ctx.displayData$)) == null ? null : tmp_2_0.length) || 0, "\uFF09"); i0.ɵɵadvance(2); i0.ɵɵproperty("ngIf", !ctx.popupLite); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx.popupLite); i0.ɵɵadvance(); i0.ɵɵproperty("searchButton", false)("placeholder", i0.ɵɵpipeBind1(12, 19, "filter_by_name_or_display_name"))("keyword", ctx.keyword)("clearable", true); i0.ɵɵadvance(2); i0.ɵɵproperty("ngIf", ctx.context === "page"); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx.loading && i0.ɵɵpipeBind3(17, 26, i0.ɵɵpipeBind2(16, 23, i0.ɵɵpipeBind1(15, 21, ctx.displayData$), ctx.sortWithoutIstio), ctx.filterDisabledData, ctx.context)); i0.ɵɵadvance(4); i0.ɵɵproperty("ngIf", ctx.loading); } }, styles: ["[_nghost-%COMP%]{display:flex;flex-direction:column;box-shadow:0 0 4px rgba(var(--aui-color-n-1),.16);padding:22px 20px 20px;background-color:rgb(var(--aui-color-n-10));border-radius:4px}.header[_ngcontent-%COMP%]{display:flex;align-items:center;margin-bottom:20px;height:28px}.header--lite[_ngcontent-%COMP%]{margin-bottom:12px}.header--lite[_ngcontent-%COMP%] .header__title[_ngcontent-%COMP%]{font-size:16px;font-weight:var(--aui-font-weight-bolder);line-height:22px}.header[_ngcontent-%COMP%] aui-search[_ngcontent-%COMP%]{width:260px}.header__title[_ngcontent-%COMP%]{font-size:18px;font-weight:500;line-height:28px;color:rgb(var(--aui-color-n-1))}.header__desc[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-4))}.header__custom[_ngcontent-%COMP%]{flex:1;padding:0 36px}.header__display-mode[_ngcontent-%COMP%]{display:flex;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-m);margin-left:16px;padding:1px}.switch-btn[_ngcontent-%COMP%]{cursor:pointer;width:24px;height:24px;border-radius:var(--aui-border-radius-m);display:inline-flex;align-items:center;justify-content:center}.switch-btn[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{width:12px;height:12px}.switch-btn--selected[_ngcontent-%COMP%]{background-color:rgb(var(--aui-color-n-10));color:rgb(var(--aui-color-primary))}.grid[_ngcontent-%COMP%]{overflow-y:auto;padding:20px;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l)}.grid[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:4px}.grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.grid[_ngcontent-%COMP%]::-webkit-scrollbar-corner{background-color:transparent}.grid__item[_ngcontent-%COMP%]{display:flex;position:relative;flex-direction:row;border-radius:var(--aui-border-radius-l);padding:9px 20px;min-height:60px;color:rgb(var(--aui-color-n-1));align-items:center;cursor:pointer;background-color:rgb(var(--aui-color-n-10))}.grid__item[_ngcontent-%COMP%]:not(:last-child){margin-bottom:8px}.grid__item[_ngcontent-%COMP%]:not(.grid__item--disabled):hover{border-color:rgb(var(--aui-color-primary));box-shadow:0 0 8px rgba(var(--aui-color-primary),.5)}.grid__item--disabled[_ngcontent-%COMP%]{cursor:default}.grid__item--disabled[_ngcontent-%COMP%], .grid__item--disabled[_ngcontent-%COMP%]:hover{background-color:rgb(var(--aui-color-n-9))}.grid__item--disabled[_ngcontent-%COMP%] .grid__field[_ngcontent-%COMP%]{opacity:.3}.grid__item--disabled[_ngcontent-%COMP%] .grid__field-servicemesh[_ngcontent-%COMP%], .grid__item--disabled[_ngcontent-%COMP%] .grid__field-action[_ngcontent-%COMP%]{opacity:1}.grid__field[_ngcontent-%COMP%]{flex:2;line-height:20px}.grid__field[_ngcontent-%COMP%]:not(.grid__field-status){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.grid__field[_ngcontent-%COMP%]:not(:last-child){margin-right:20px}.grid__field-servicemesh[_ngcontent-%COMP%]{flex:2;align-items:stretch;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-servicemesh[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-servicemesh[_ngcontent-%COMP%] aui-tag[_ngcontent-%COMP%]{margin-left:8px}.grid__field-status[_ngcontent-%COMP%]{display:flex;align-items:center}.grid__field-status[_ngcontent-%COMP%] aui-icon[_ngcontent-%COMP%]{font-size:16px;display:inline-flex;margin-right:4px}.grid__field-status[_ngcontent-%COMP%] .with-colon[_ngcontent-%COMP%]{display:none}.grid__field-icon[_ngcontent-%COMP%]{max-width:30px;display:inline-flex}.grid__field-name[_ngcontent-%COMP%]{flex:2;flex-direction:column;max-width:280px}.grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%], .grid__field-name[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%]{font-size:14px;font-weight:500;line-height:20px}.grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%] aui-icon[_ngcontent-%COMP%]{margin-left:4px}.grid__field-name[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{font-size:12px;line-height:16px;color:rgb(var(--aui-color-n-4))}.grid__field-action[_ngcontent-%COMP%]{max-width:30px}.grid--popup[_ngcontent-%COMP%]{max-height:382px;padding:12px}.grid--popup[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%]{font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);font-weight:var(--aui-font-weight-normal)}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]{padding:10px 20px;min-height:60px;font-size:14px;background-color:rgb(var(--aui-color-n-10))}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%]{border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-l);background-color:rgb(var(--aui-color-primary));border-color:rgb(var(--aui-color-primary));color:#fff;cursor:default}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%]:hover{box-shadow:none}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%] .highlighted[_ngcontent-%COMP%]{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-10))}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%] .with-colon[_ngcontent-%COMP%]{font-weight:500}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{color:#fff}.grid--popup[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item--selected[_ngcontent-%COMP%] .aui-tag--primary{background-color:#fff;color:rgb(var(--aui-color-primary))}.grid--popup--lite[_ngcontent-%COMP%]{background-color:rgb(var(--aui-color-n-10));padding:0}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%]{padding:10px 14px;min-height:44px;border:1px solid rgb(var(--aui-color-n-7))}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .grid__field[_ngcontent-%COMP%]:not(:last-child){margin-right:12px}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%]{font-size:14px;line-height:25px;font-weight:400}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .grid__field-icon[_ngcontent-%COMP%]{max-width:24px}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .grid__item-selected-icon[_ngcontent-%COMP%]{display:inline-flex}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .highlighted[_ngcontent-%COMP%]{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-10))}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .with-colon[_ngcontent-%COMP%]{font-weight:500}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{color:#fff}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .aui-tag--primary{background-color:#fff;color:rgb(var(--aui-color-primary))}.grid--popup--lite[_ngcontent-%COMP%] .grid__item--selected[_ngcontent-%COMP%]{background-color:rgb(var(--aui-color-b-7));border:1px solid rgb(var(--aui-color-primary))}.grid--popup--lite[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%]:hover{border:1px solid rgb(var(--aui-color-primary));box-shadow:none}.grid--card[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:20px}.grid--card[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%]{margin-bottom:0;height:290px;display:block;text-align:center;padding:40px 20px;border-radius:var(--aui-border-radius-l);position:relative}.grid--card[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] .belonged-cluster[_ngcontent-%COMP%]{position:static;padding-right:0}.grid--card[_ngcontent-%COMP%] .grid__item[_ngcontent-%COMP%] aui-tag[_ngcontent-%COMP%]{position:absolute;top:8px;right:8px}.grid--card[_ngcontent-%COMP%] .grid__field[_ngcontent-%COMP%]{margin-right:0;justify-content:center}.grid--card[_ngcontent-%COMP%] .grid__field-icon[_ngcontent-%COMP%]{max-width:100%;vertical-align:middle}.grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%]{margin:20px 0 24px}.grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%], .grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{justify-content:center}.grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .name[_ngcontent-%COMP%]{font-size:20px;font-weight:500;line-height:28px;margin-bottom:2px}.grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] .des[_ngcontent-%COMP%]{font-size:14px;height:20px}.grid--card[_ngcontent-%COMP%] .grid__field-name[_ngcontent-%COMP%] ~ .grid__field[_ngcontent-%COMP%]:not(.grid__field-status){line-height:20px;font-size:14px;text-align:center}.grid--card[_ngcontent-%COMP%] .grid__field-status[_ngcontent-%COMP%] .with-colon[_ngcontent-%COMP%]{display:inline}.grid--card[_ngcontent-%COMP%] .grid__field-servicemesh[_ngcontent-%COMP%]:not(:last-of-type){margin-bottom:4px}.grid--card[_ngcontent-%COMP%] .grid__field-cluster[_ngcontent-%COMP%]{margin-bottom:4px}.grid--card[_ngcontent-%COMP%] .grid__field-action[_ngcontent-%COMP%]{position:absolute;right:10px;top:10px}.grid[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]:not(.grid__item--selected){position:relative}.grid[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):after{position:absolute;content:\"\";top:0;right:0;bottom:0;left:0;border:1px solid rgb(var(--aui-color-n-7));border-radius:4px;pointer-events:none;transition:all .2s ease-in-out}.grid[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]:not(.grid__item--selected).disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6));cursor:not-allowed}.grid[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):not(.disabled):hover:after{top:-4px;right:-4px;bottom:-4px;left:-4px;border-color:rgb(var(--aui-color-primary));box-shadow:inset 0 0 0 4px rgb(var(--aui-color-n-10)),0 0 8px rgba(var(--aui-color-primary),.5)}.grid[_ngcontent-%COMP%]:not(.grid--popup--lite) .grid__item[_ngcontent-%COMP%]:not(.grid__item--selected):not(.disabled):active:after{top:0;right:0;bottom:0;left:0;box-shadow:0 0 4px rgba(var(--aui-color-primary),.5)}.flex[_ngcontent-%COMP%]{display:flex}.highlighted[_ngcontent-%COMP%]{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-n-8))}.with-colon[_ngcontent-%COMP%]{font-weight:500}.with-colon[_ngcontent-%COMP%]:after{content:\":\";margin-right:8px}.icon-normal[_ngcontent-%COMP%], .icon-enabled[_ngcontent-%COMP%]{color:rgb(var(--aui-color-green))}.icon-abnormal[_ngcontent-%COMP%]{color:rgb(var(--aui-color-red))}.icon-disabled[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-6))}.belonged-cluster[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-right:44px}.belonged-cluster[_ngcontent-%COMP%] .with-colon[_ngcontent-%COMP%] + span[_ngcontent-%COMP%]{margin-right:8px}.belonged-cluster[_ngcontent-%COMP%] aui-tag[_ngcontent-%COMP%]{display:inline-flex}.loading[_ngcontent-%COMP%]{display:flex;height:60px;align-items:center;justify-content:center}acl-resource-no-data[_ngcontent-%COMP%]{flex:1;margin:40px 0 80px}acl-zero-state[_ngcontent-%COMP%] .zero-placeholder{min-height:44px;padding:12px 10px}"], changeDetection: 0 }); } } __decorate([ ObservableInput(), __metadata("design:type", Observable) ], ResourceDataGridComponent.prototype, "data$", void 0); (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceDataGridComponent, [{ type: Component, args: [{ selector: 'acl-resource-data-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"header\"\n [ngClass]=\"{ 'header--lite': popupLite }\"\n>\n <span class=\"header__title\">\n <span>{{ type | pure: pluralForm | translate }}</span\n ><span class=\"header__desc\"\n >\uFF08{{ (displayData$ | async)?.length || 0 }}\uFF09</span\n >\n </span>\n <div\n class=\"header__custom\"\n *ngIf=\"!popupLite\"\n >\n <ng-content select=\"[aclResourceGridHeader]\"></ng-content>\n </div>\n <div\n class=\"tw-flex-1\"\n *ngIf=\"popupLite\"\n ></div>\n <aui-search\n [searchButton]=\"false\"\n [placeholder]=\"'filter_by_name_or_display_name' | translate\"\n [keyword]=\"keyword\"\n (keywordChange)=\"keywordChange($event)\"\n [clearable]=\"true\"\n size=\"small\"\n ></aui-search>\n <span\n class=\"header__display-mode\"\n *ngIf=\"context === 'page'\"\n >\n <span\n class=\"switch-btn\"\n [ngClass]=\"{ 'switch-btn--selected': displayMode !== 'card' }\"\n (click)=\"setDisplayMode('row')\"\n >\n <aui-icon icon=\"list\"></aui-icon>\n </span>\n <span\n class=\"switch-btn\"\n [ngClass]=\"{ 'switch-btn--selected': displayMode === 'card' }\"\n (click)=\"setDisplayMode('card')\"\n >\n <aui-icon icon=\"grid\"></aui-icon>\n </span>\n </span>\n</div>\n<ng-container\n *ngIf=\"\n !loading &&\n (displayData$\n | async\n | pure: sortWithoutIstio\n | pure: filterDisabledData : context) as displayData\n \"\n>\n <div\n class=\"grid\"\n *ngIf=\"displayData.length\"\n #grid\n [ngClass]=\"{\n 'grid--card': displayMode === 'card' && context !== 'popup',\n 'grid--popup': context === 'popup',\n 'grid--popup--lite': context === 'popup' && popupLite,\n }\"\n >\n <div\n class=\"grid__item\"\n *ngFor=\"let item of displayData\"\n [ngClass]=\"{\n 'grid__item--selected':\n context === 'popup' && selectedUid === item.__origin.metadata.uid,\n 'grid__item--disabled': item.state?.disabled,\n }\"\n (click)=\"onSelect(item)\"\n [attr.data-test]=\"item.name + '/' + item.cluster\"\n [auiTooltip]=\"item.state?.tooltip\"\n [auiTooltipDisabled]=\"!item.state?.disabled || !item.state?.tooltip\"\n >\n <aui-icon\n *ngIf=\"selectedUid === item.__origin.metadata.uid\"\n class=\"check-triangle-badge\"\n icon=\"check\"\n ></aui-icon>\n \n <div class=\"grid__field grid__field-icon\">\n <acl-resource-icon\n [type]=\"type\"\n [color]=\"\n context === 'popup' &&\n !popupLite &&\n selectedUid === item.__origin.metadata.uid\n ? 'white'\n : 'blue'\n \"\n [displayMode]=\"displayMode\"\n ></acl-resource-icon>\n </div>\n \n <div class=\"grid__field grid__field-name\">\n <div class=\"name\">\n <ng-container *ngFor=\"let str of getHighlightedNameStrs(item)\">\n <span [ngClass]=\"{ highlighted: str.isHighlighted }\">{{\n str.text\n }}</span>\n </ng-container>\n </div>\n <div\n class=\"des\"\n *ngIf=\"!popupLite\"\n >\n <ng-container *ngFor=\"let str of getHighlightedDisplayNameStrs(item)\">\n <span [ngClass]=\"{ highlighted: str.isHighlighted }\">{{\n str.text\n }}</span>\n </ng-container>\n </div>\n </div>\n \n <div\n class=\"grid__field flex grid__field-cluster\"\n *ngIf=\"fields.includes(fieldsDef.Cluster)\"\n >\n <span\n class=\"belonged-cluster tw-flex\"\n auiTooltip=\"{{\n ('belonged_cluster' | translate) + ': ' + item.cluster\n }}\"\n >\n <span class=\"with-colon\">{{ 'belonged_cluster' | translate }}</span>\n <span class=\"tw-text-ellipsis tw-overflow-hidden\"\n >{{ item.cluster\n }}<ng-container *ngIf=\"item.clusterDisplayName\"\n >({{ item.clusterDisplayName }})</ng-container\n >\n </span>\n <aui-tag\n type=\"primary\"\n size=\"mini\"\n *ngIf=\"item.clusterArch\"\n >\n {{ item.clusterArch }}\n </aui-tag>\n </span>\n </div>\n \n <div\n class=\"grid__field grid__field-status {{\n 'grid__field-status--' + item.status\n }}\"\n *ngIf=\"fields.includes(fieldsDef.Status)\"\n >\n <label\n *ngIf=\"popupLite\"\n class=\"tw-text-help-text tw-mr-8\"\n >{{ 'status' | translate }}:</label\n >\n <span class=\"with-colon\">{{ 'status' | translate }}</span>\n <aui-icon\n [icon]=\"statusIcon[item.status]\"\n [background]=\"\n statusIcon[item.status].endsWith('_triangle_s')\n ? 'triangle'\n : 'circle'\n \"\n class=\"{{ 'icon-' + item.status }}\"\n ></aui-icon>\n {{ item.status | translate }}\n </div>\n \n <div\n class=\"grid__field grid__field-servicemesh\"\n *ngIf=\"fields.includes(fieldsDef.ServiceMesh)\"\n >\n <span class=\"with-colon\">{{ 'belonged_servicemesh' | translate }}</span>\n <span> {{ item.serviceMeshName }} </span>\n <div class=\"des\">\n <ng-container *ngIf=\"item.serviceMeshIstioVersion\"\n >(Istio {{ item.serviceMeshIstioVersion }})</ng-container\n >\n </div>\n </div>\n\n <div\n class=\"grid__field grid__field-servicemesh\"\n *ngIf=\"fields.includes(fieldsDef.ServiceMesh)\"\n >\n <span class=\"with-colon\">{{ 'cluster' | translate }}</span>\n <span\n >{{ item.cluster\n }}<ng-container *ngIf=\"item.clusterDisplayName\"\n >({{ item.clusterDisplayName }})</ng-container\n >\n </span>\n <aui-tag\n type=\"primary\"\n size=\"mini\"\n *ngIf=\"item.clusterArch\"\n >\n {{ item.clusterArch }}\n </aui-tag>\n </div>\n\n \n\n <div\n class=\"grid__field grid__field-servicemesh\"\n *ngIf=\"fields.includes(fieldsDef.ServiceMeshGroup)\"\n >\n <span class=\"with-colon\">{{ 'cluster' | translate }}</span>\n <span>{{ item.cluster }} </span>\n </div>\n \n <div\n class=\"grid__field grid__field-servicemesh\"\n *ngIf=\"fields.includes(fieldsDef.ServiceMeshGroup)\"\n >\n <span class=\"with-colon\">{{ 'Istio' }}</span>\n <span\n >{{ item.serviceMeshIstioVersion || ('not_deployed' | translate) }}\n </span>\n </div>\n\n \n <div\n class=\"grid__field grid__field-time\"\n *ngIf=\"fields.includes(fieldsDef.Time) && !popupLite\"\n >\n <span class=\"with-colon\">{{ 'created_at' | translate }}</span>\n <span>{{ item.timestamp | aclRelativeTime }}</span>\n </div>\n \n <div\n class=\"grid__field grid__field-action\"\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"\n fields.includes(fieldsDef.Action) &&\n actionTemplateRef &&\n context !== 'popup'\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"actionTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: item.__origin,\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n <acl-resource-no-data\n *ngIf=\"!popupLite && !(displayData$ | async)?.length\"\n [isFiltered]=\"!!keyword\"\n [type]