@cqa-lib/cqa-ui 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/compare-runs/compare-runs.component.mjs +3 -6
- package/esm2020/lib/configuration-card/configuration-card.component.mjs +3 -3
- package/esm2020/lib/failed-step-card/failed-step-card.component.mjs +77 -0
- package/esm2020/lib/iterations-loop/iterations-loop.component.mjs +174 -0
- package/esm2020/lib/ui-kit.module.mjs +15 -5
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +267 -12
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +259 -12
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/compare-runs/compare-runs.component.d.ts +7 -10
- package/lib/failed-step-card/failed-step-card.component.d.ts +41 -0
- package/lib/iterations-loop/iterations-loop.component.d.ts +39 -0
- package/lib/ui-kit.module.d.ts +18 -16
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/styles.css +1 -1
|
@@ -6025,10 +6025,10 @@ class ConfigurationCardComponent {
|
|
|
6025
6025
|
}
|
|
6026
6026
|
}
|
|
6027
6027
|
ConfigurationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6028
|
-
ConfigurationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: { icon: "icon", title: "title", data: "data" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px
|
|
6028
|
+
ConfigurationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: { icon: "icon", title: "title", data: "data" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n\t<div class=\"cqa-bg-white cqa-rounded-lg\" style=\"border: 1px solid #E2E8F0; height: 100%;\">\n\t\t<!-- Section Header -->\n\t\t<div class=\"cqa-p-3 cqa-pb-2 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F5F5F566]\"\n\t\t\tstyle=\"border-bottom: 1px solid #E2E8F0;\">\n\t\t\t<ng-container *ngIf=\"icon\">\n\t\t\t\t<mat-icon [ngStyle]=\"headerIconStyles\">\n\t\t\t\t\t{{ icon }}\n\t\t\t\t</mat-icon>\n\t\t\t</ng-container>\n\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-color-[#636363] cqa-leading-normal\">\n\t\t\t\t{{ title }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Configuration Items -->\n\t\t<div class=\"cqa-p-4 cqa-pt-3\" *ngIf=\"data.length > 0\">\n\t\t\t<div class=\"cqa-grid cqa-grid-cols-1 cqa-gap-y-[10px]\">\n\t\t\t\t<ng-container *ngFor=\"let item of data\">\n\t\t\t\t\t<!-- *ngIf=\"!isBoolean(item.value)\" -->\n\t\t\t\t\t<div class=\"cqa-flex cqa-gap-2 cqa-justify-between cqa-items-center cqa-h-[15px]\"\n\t\t\t\t\t\t[ngClass]=\"{ 'cqa-h-[21px]': isBoolean(item.value) || item.isFlag }\">\n\t\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#64748B] cqa-font-regular\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<!-- Value -->\n\t\t\t\t\t\t<div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"item.icon\" class=\"material-icons cqa-text-[#94A3B8] cqa-text-[12px]\n\t\t\t\t\t\t\t\tcqa-w-3 cqa-h-3\">\n\t\t\t\t\t\t\t\t{{ item.icon }}\n\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!item.isFlag\">\n\t\t\t\t\t\t\t\t<span *ngIf=\"!isBoolean(item.value)\" class=\"cqa-text-xs cqa-text-[#334155] cqa-font-regular\">\n\t\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span *ngIf=\"isBoolean(item.value)\" class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F1F5F9] cqa-rounded-[4px] cqa-font-regular cqa-py-1 cqa-px-[6px]\"\n\t\t\t\t\t\t\t\t\t[ngStyle]=\"{ border: '1px solid #E2E8F0' }\">\n\t\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t<span *ngIf=\"item.isFlag\" class=\"cqa-text-xs cqa-rounded-[4px] cqa-font-medium cqa-py-1 cqa-px-[6px]\"\n\t\t\t\t\t\t\t\t[ngClass]=\"getValueClass(item)\"\n\t\t\t\t\t\t\t\t[ngStyle]=\"{ border: getValueBorder(item) }\">\n\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6029
6029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, decorators: [{
|
|
6030
6030
|
type: Component,
|
|
6031
|
-
args: [{ selector: 'cqa-configuration-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px
|
|
6031
|
+
args: [{ selector: 'cqa-configuration-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n\t<div class=\"cqa-bg-white cqa-rounded-lg\" style=\"border: 1px solid #E2E8F0; height: 100%;\">\n\t\t<!-- Section Header -->\n\t\t<div class=\"cqa-p-3 cqa-pb-2 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F5F5F566]\"\n\t\t\tstyle=\"border-bottom: 1px solid #E2E8F0;\">\n\t\t\t<ng-container *ngIf=\"icon\">\n\t\t\t\t<mat-icon [ngStyle]=\"headerIconStyles\">\n\t\t\t\t\t{{ icon }}\n\t\t\t\t</mat-icon>\n\t\t\t</ng-container>\n\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-color-[#636363] cqa-leading-normal\">\n\t\t\t\t{{ title }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Configuration Items -->\n\t\t<div class=\"cqa-p-4 cqa-pt-3\" *ngIf=\"data.length > 0\">\n\t\t\t<div class=\"cqa-grid cqa-grid-cols-1 cqa-gap-y-[10px]\">\n\t\t\t\t<ng-container *ngFor=\"let item of data\">\n\t\t\t\t\t<!-- *ngIf=\"!isBoolean(item.value)\" -->\n\t\t\t\t\t<div class=\"cqa-flex cqa-gap-2 cqa-justify-between cqa-items-center cqa-h-[15px]\"\n\t\t\t\t\t\t[ngClass]=\"{ 'cqa-h-[21px]': isBoolean(item.value) || item.isFlag }\">\n\t\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#64748B] cqa-font-regular\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<!-- Value -->\n\t\t\t\t\t\t<div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n\t\t\t\t\t\t\t<mat-icon *ngIf=\"item.icon\" class=\"material-icons cqa-text-[#94A3B8] cqa-text-[12px]\n\t\t\t\t\t\t\t\tcqa-w-3 cqa-h-3\">\n\t\t\t\t\t\t\t\t{{ item.icon }}\n\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!item.isFlag\">\n\t\t\t\t\t\t\t\t<span *ngIf=\"!isBoolean(item.value)\" class=\"cqa-text-xs cqa-text-[#334155] cqa-font-regular\">\n\t\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span *ngIf=\"isBoolean(item.value)\" class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F1F5F9] cqa-rounded-[4px] cqa-font-regular cqa-py-1 cqa-px-[6px]\"\n\t\t\t\t\t\t\t\t\t[ngStyle]=\"{ border: '1px solid #E2E8F0' }\">\n\t\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t<span *ngIf=\"item.isFlag\" class=\"cqa-text-xs cqa-rounded-[4px] cqa-font-medium cqa-py-1 cqa-px-[6px]\"\n\t\t\t\t\t\t\t\t[ngClass]=\"getValueClass(item)\"\n\t\t\t\t\t\t\t\t[ngStyle]=\"{ border: getValueBorder(item) }\">\n\t\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [] }]
|
|
6032
6032
|
}], propDecorators: { icon: [{
|
|
6033
6033
|
type: Input
|
|
6034
6034
|
}], title: [{
|
|
@@ -6045,7 +6045,6 @@ class CompareRunsComponent {
|
|
|
6045
6045
|
this.isLoadingRuns = false;
|
|
6046
6046
|
this.hasMoreRuns = false;
|
|
6047
6047
|
this.isComparingRuns = false;
|
|
6048
|
-
this.isTableDataLoading = false;
|
|
6049
6048
|
this.searchRuns = new EventEmitter();
|
|
6050
6049
|
this.loadMoreRuns = new EventEmitter();
|
|
6051
6050
|
this.compareRuns = new EventEmitter();
|
|
@@ -6452,10 +6451,10 @@ class CompareRunsComponent {
|
|
|
6452
6451
|
}
|
|
6453
6452
|
}
|
|
6454
6453
|
CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6455
|
-
CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", isTableDataLoading: "isTableDataLoading" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 70px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"showComparison\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#E17100]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6454
|
+
CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#E17100]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6456
6455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
6457
6456
|
type: Component,
|
|
6458
|
-
args: [{ selector: 'cqa-compare-runs', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 70px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"showComparison\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#E17100]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
6457
|
+
args: [{ selector: 'cqa-compare-runs', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div *ngIf=\"selectedRunA\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runAStatusBgColor\"\n [style.border-color]=\"runAStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"selectedRunB\" \n class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n [style.background-color]=\"runBStatusBgColor\"\n [style.border-color]=\"runBStatusBorderColor\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Dataset: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#E17100]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
|
|
6459
6458
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
|
|
6460
6459
|
type: Input
|
|
6461
6460
|
}], comparisonData: [{
|
|
@@ -6466,8 +6465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6466
6465
|
type: Input
|
|
6467
6466
|
}], isComparingRuns: [{
|
|
6468
6467
|
type: Input
|
|
6469
|
-
}], isTableDataLoading: [{
|
|
6470
|
-
type: Input
|
|
6471
6468
|
}], searchRuns: [{
|
|
6472
6469
|
type: Output
|
|
6473
6470
|
}], loadMoreRuns: [{
|
|
@@ -6476,6 +6473,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6476
6473
|
type: Output
|
|
6477
6474
|
}] } });
|
|
6478
6475
|
|
|
6476
|
+
class IterationsLoopComponent {
|
|
6477
|
+
constructor() {
|
|
6478
|
+
this.iterations = [];
|
|
6479
|
+
this.isTableDataLoading = false;
|
|
6480
|
+
this.tableColumns = [];
|
|
6481
|
+
this.pageIndex = 0;
|
|
6482
|
+
this.pageSize = 5;
|
|
6483
|
+
this.emptyStateConfig = {
|
|
6484
|
+
title: 'No Iterations',
|
|
6485
|
+
description: 'There are no iterations to display for this loop.',
|
|
6486
|
+
imageUrl: EMPTY_STATE_IMAGES.DASHBOARD,
|
|
6487
|
+
actions: []
|
|
6488
|
+
};
|
|
6489
|
+
}
|
|
6490
|
+
ngOnInit() {
|
|
6491
|
+
this.setupTableColumns();
|
|
6492
|
+
}
|
|
6493
|
+
ngOnChanges(changes) {
|
|
6494
|
+
if (changes['iterations']) {
|
|
6495
|
+
this.pageIndex = 0;
|
|
6496
|
+
}
|
|
6497
|
+
}
|
|
6498
|
+
setupTableColumns() {
|
|
6499
|
+
this.tableColumns = [
|
|
6500
|
+
{
|
|
6501
|
+
fieldId: 'index',
|
|
6502
|
+
fieldName: '#',
|
|
6503
|
+
fieldValue: 'index',
|
|
6504
|
+
isShow: true,
|
|
6505
|
+
weight: 0.5,
|
|
6506
|
+
render: (row) => {
|
|
6507
|
+
return `<span class="cqa-text-[16px] cqa-text-[#0A0A0A] cqa-font-regular">${row.index}</span>`;
|
|
6508
|
+
}
|
|
6509
|
+
},
|
|
6510
|
+
{
|
|
6511
|
+
fieldId: 'datasetId',
|
|
6512
|
+
fieldName: 'Dataset ID',
|
|
6513
|
+
fieldValue: 'datasetId',
|
|
6514
|
+
isShow: true,
|
|
6515
|
+
weight: 1.5,
|
|
6516
|
+
render: (row) => {
|
|
6517
|
+
return `<span class="cqa-text-sm cqa-text-[#0A0A0A] cqa-font-regular">${row.datasetId}</span>`;
|
|
6518
|
+
}
|
|
6519
|
+
},
|
|
6520
|
+
{
|
|
6521
|
+
fieldId: 'variables',
|
|
6522
|
+
fieldName: 'Variables',
|
|
6523
|
+
isShow: true,
|
|
6524
|
+
weight: 2,
|
|
6525
|
+
render: (row) => {
|
|
6526
|
+
const variableEntries = Object.entries(row.variables || {});
|
|
6527
|
+
const variablesHtml = variableEntries.map(([key, value], index) => {
|
|
6528
|
+
return `<div class="cqa-flex cqa-items-center cqa-gap-0.5 ${index === variableEntries.length - 1 ? 'cqa-mb-0' : 'cqa-mb-1'}">
|
|
6529
|
+
<span class="cqa-px-1 cqa-text-[12px] cqa-text-[#4A5565] cqa-bg-[#F3F4F6] cqa-rounded-[4px]">${key}:</span>
|
|
6530
|
+
<span class="cqa-text-sm cqa-text-[#4A5565] cqa-font-medium">${value}</span>
|
|
6531
|
+
</div>`;
|
|
6532
|
+
}).join('');
|
|
6533
|
+
return `<div class="cqa-flex cqa-flex-col">${variablesHtml}</div>`;
|
|
6534
|
+
}
|
|
6535
|
+
},
|
|
6536
|
+
{
|
|
6537
|
+
fieldId: 'status',
|
|
6538
|
+
fieldName: 'Status',
|
|
6539
|
+
fieldValue: 'status',
|
|
6540
|
+
isShow: true,
|
|
6541
|
+
weight: 1,
|
|
6542
|
+
render: (row) => {
|
|
6543
|
+
return this.renderStatusIcon(row.status);
|
|
6544
|
+
}
|
|
6545
|
+
},
|
|
6546
|
+
{
|
|
6547
|
+
fieldId: 'duration',
|
|
6548
|
+
fieldName: 'Duration',
|
|
6549
|
+
isShow: true,
|
|
6550
|
+
weight: 1,
|
|
6551
|
+
render: (row) => {
|
|
6552
|
+
return `
|
|
6553
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1">
|
|
6554
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
6555
|
+
<path d="M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z" stroke="#636363" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6556
|
+
<path d="M7 3.5V7L9.33333 8.16667" stroke="#636363" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6557
|
+
</svg>
|
|
6558
|
+
<span class="cqa-text-xs cqa-text-[#4A5565]">${this.formatDuration(row.duration)}</span>
|
|
6559
|
+
</div>
|
|
6560
|
+
`;
|
|
6561
|
+
}
|
|
6562
|
+
}
|
|
6563
|
+
];
|
|
6564
|
+
}
|
|
6565
|
+
renderStatusIcon(status) {
|
|
6566
|
+
const upperStatus = status.toUpperCase();
|
|
6567
|
+
if (upperStatus === 'PASS') {
|
|
6568
|
+
return `
|
|
6569
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6570
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6571
|
+
<circle cx="8" cy="8" r="7" stroke="#008236" stroke-width="1.5" fill="none"/>
|
|
6572
|
+
<path d="M5.5 8L7 9.5L10.5 6" stroke="#008236" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6573
|
+
</svg>
|
|
6574
|
+
<span class="cqa-rounded-[4px] cqa-leading-4 cqa-px-2 cqa-py-0.5 cqa-bg-[#DCFCE7] cqa-text-xs cqa-text-[#008236]">Pass</span>
|
|
6575
|
+
</div>
|
|
6576
|
+
`;
|
|
6577
|
+
}
|
|
6578
|
+
else if (upperStatus === 'FAIL') {
|
|
6579
|
+
return `
|
|
6580
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6581
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6582
|
+
<circle cx="8" cy="8" r="7" stroke="#C10007" stroke-width="1.5" fill="none"/>
|
|
6583
|
+
<path d="M10 6L6 10M6 6L10 10" stroke="#C10007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6584
|
+
</svg>
|
|
6585
|
+
<span class="cqa-rounded-[4px] cqa-leading-4 cqa-px-2 cqa-py-0.5 cqa-bg-[#FFE2E2] cqa-text-xs cqa-text-[#C10007]">Fail</span>
|
|
6586
|
+
</div>
|
|
6587
|
+
`;
|
|
6588
|
+
}
|
|
6589
|
+
else if (upperStatus === 'IN_PROGRESS') {
|
|
6590
|
+
return `
|
|
6591
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6592
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6593
|
+
<circle cx="8" cy="8" r="7" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
|
|
6594
|
+
</svg>
|
|
6595
|
+
<span class="cqa-rounded-[4px] cqa-leading-4 cqa-px-2 cqa-py-0.5 cqa-bg-[#EFF6FF] cqa-text-xs cqa-text-[#3B82F6]">In Progress</span>
|
|
6596
|
+
</div>
|
|
6597
|
+
`;
|
|
6598
|
+
}
|
|
6599
|
+
else {
|
|
6600
|
+
return `<span class="cqa-rounded-[4px] cqa-leading-4 cqa-px-2 cqa-py-0.5 cqa-text-xs cqa-text-[#9CA3AF]">—</span>`;
|
|
6601
|
+
}
|
|
6602
|
+
}
|
|
6603
|
+
formatDuration(milliseconds) {
|
|
6604
|
+
const seconds = milliseconds / 1000;
|
|
6605
|
+
if (seconds < 60) {
|
|
6606
|
+
return `${seconds.toFixed(1)}s`;
|
|
6607
|
+
}
|
|
6608
|
+
const minutes = Math.floor(seconds / 60);
|
|
6609
|
+
const remainingSeconds = Math.floor(seconds % 60);
|
|
6610
|
+
return `${minutes}m ${remainingSeconds}s`;
|
|
6611
|
+
}
|
|
6612
|
+
onPageChange(event) {
|
|
6613
|
+
this.pageIndex = event.pageIndex;
|
|
6614
|
+
this.pageSize = event.pageSize;
|
|
6615
|
+
}
|
|
6616
|
+
get isEmptyState() {
|
|
6617
|
+
return !this.iterations || this.iterations.length === 0;
|
|
6618
|
+
}
|
|
6619
|
+
get computedSummary() {
|
|
6620
|
+
if (this.summary) {
|
|
6621
|
+
return this.summary;
|
|
6622
|
+
}
|
|
6623
|
+
const passed = this.iterations.filter(i => i.status === 'PASS').length;
|
|
6624
|
+
const failed = this.iterations.filter(i => i.status === 'FAIL').length;
|
|
6625
|
+
return {
|
|
6626
|
+
totalIterations: this.iterations.length,
|
|
6627
|
+
passed,
|
|
6628
|
+
failed
|
|
6629
|
+
};
|
|
6630
|
+
}
|
|
6631
|
+
}
|
|
6632
|
+
IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6633
|
+
IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-bg-white\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"iterations\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
|
|
6635
|
+
type: Component,
|
|
6636
|
+
args: [{ selector: 'cqa-iterations-loop', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-bg-white\">\n <cqa-table-template\n [columns]=\"tableColumns\"\n [data]=\"iterations\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isTableDataLoading\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n <div *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6637
|
+
}], propDecorators: { iterations: [{
|
|
6638
|
+
type: Input
|
|
6639
|
+
}], summary: [{
|
|
6640
|
+
type: Input
|
|
6641
|
+
}], isTableDataLoading: [{
|
|
6642
|
+
type: Input
|
|
6643
|
+
}] } });
|
|
6644
|
+
|
|
6645
|
+
class FailedStepCardComponent {
|
|
6646
|
+
constructor() {
|
|
6647
|
+
this.jumpToStep = new EventEmitter();
|
|
6648
|
+
this.openInVideo = new EventEmitter();
|
|
6649
|
+
this.showExpectedMore = false;
|
|
6650
|
+
this.showActualMore = false;
|
|
6651
|
+
}
|
|
6652
|
+
get headerTitle() {
|
|
6653
|
+
var _a, _b;
|
|
6654
|
+
if ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.stepTitle) {
|
|
6655
|
+
return `Failed at Step ${this.failedStepData.failed_step_index}: ${this.failedStepData.stepTitle}`;
|
|
6656
|
+
}
|
|
6657
|
+
return `Failed at Step ${((_b = this.failedStepData) === null || _b === void 0 ? void 0 : _b.failed_step_index) || ''}`;
|
|
6658
|
+
}
|
|
6659
|
+
get errorText() {
|
|
6660
|
+
var _a, _b;
|
|
6661
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.errorMessage) || ((_b = this.failedStepData) === null || _b === void 0 ? void 0 : _b.reason) || 'An error occurred';
|
|
6662
|
+
}
|
|
6663
|
+
get videoTimestamp() {
|
|
6664
|
+
var _a;
|
|
6665
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.timestamp) || '00:00';
|
|
6666
|
+
}
|
|
6667
|
+
get durationText() {
|
|
6668
|
+
var _a;
|
|
6669
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.duration) || '0s';
|
|
6670
|
+
}
|
|
6671
|
+
get expectedResult() {
|
|
6672
|
+
var _a;
|
|
6673
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.expected_result) || '';
|
|
6674
|
+
}
|
|
6675
|
+
get actualResult() {
|
|
6676
|
+
var _a;
|
|
6677
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.actual_result) || '';
|
|
6678
|
+
}
|
|
6679
|
+
get suggestions() {
|
|
6680
|
+
var _a;
|
|
6681
|
+
return ((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.suggestions) || '';
|
|
6682
|
+
}
|
|
6683
|
+
get hasSuggestions() {
|
|
6684
|
+
var _a;
|
|
6685
|
+
return !!((_a = this.failedStepData) === null || _a === void 0 ? void 0 : _a.suggestions) && this.failedStepData.suggestions.trim().length > 0;
|
|
6686
|
+
}
|
|
6687
|
+
toggleExpectedMore() {
|
|
6688
|
+
this.showExpectedMore = !this.showExpectedMore;
|
|
6689
|
+
}
|
|
6690
|
+
toggleActualMore() {
|
|
6691
|
+
this.showActualMore = !this.showActualMore;
|
|
6692
|
+
}
|
|
6693
|
+
onJumpToStep() {
|
|
6694
|
+
this.jumpToStep.emit(this.failedStepData);
|
|
6695
|
+
}
|
|
6696
|
+
onOpenInVideo() {
|
|
6697
|
+
this.openInVideo.emit(this.failedStepData);
|
|
6698
|
+
}
|
|
6699
|
+
shouldShowViewMore(text, maxLength = 100) {
|
|
6700
|
+
return !!(text && text.length > maxLength);
|
|
6701
|
+
}
|
|
6702
|
+
getTruncatedText(text, maxLength = 100) {
|
|
6703
|
+
if (!text)
|
|
6704
|
+
return '';
|
|
6705
|
+
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
|
|
6706
|
+
}
|
|
6707
|
+
getFormattedSuggestions() {
|
|
6708
|
+
if (!this.suggestions)
|
|
6709
|
+
return [];
|
|
6710
|
+
return this.suggestions.split('\n').filter(s => s.trim().length > 0);
|
|
6711
|
+
}
|
|
6712
|
+
}
|
|
6713
|
+
FailedStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6714
|
+
FailedStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepCardComponent, selector: "cqa-failed-step-card", inputs: { failedStepData: "failedStepData" }, outputs: { jumpToStep: "jumpToStep", openInVideo: "openInVideo" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed\">\n <ng-container *ngIf=\"!showExpectedMore && shouldShowViewMore(expectedResult)\">\n {{ getTruncatedText(expectedResult) }}\n </ng-container>\n <ng-container *ngIf=\"showExpectedMore || !shouldShowViewMore(expectedResult)\">\n {{ expectedResult }}\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"shouldShowViewMore(expectedResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n iconPosition=\"end\"\n [text]=\"showExpectedMore ? 'View Less' : 'View More'\"\n [inlineStyles]=\"showExpectedMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n (clicked)=\"toggleExpectedMore()\">\n </cqa-button>\n </div>\n </div>\n\n <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-font-medium\">\n <ng-container *ngIf=\"!showActualMore && shouldShowViewMore(actualResult)\">\n {{ getTruncatedText(actualResult) }}\n </ng-container>\n <ng-container *ngIf=\"showActualMore || !shouldShowViewMore(actualResult)\">\n {{ actualResult }}\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"shouldShowViewMore(actualResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n iconPosition=\"end\"\n [text]=\"showActualMore ? 'View Less' : 'View More'\"\n [inlineStyles]=\"showActualMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n (clicked)=\"toggleActualMore()\">\n </cqa-button>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-border-t cqa-border-[#E4E4E4] cqa-flex cqa-flex-wrap cqa-items-center cqa-justify-end cqa-gap-2\">\n <cqa-button\n variant=\"outlined\"\n icon=\"play_arrow\"\n iconLibrary=\"mat\"\n [text]=\"'Jump to step'\"\n btnSize=\"lg\"\n (clicked)=\"onJumpToStep()\">\n </cqa-button>\n <cqa-button\n variant=\"outlined\"\n icon=\"videocam\"\n iconLibrary=\"mat\"\n [text]=\"'Open In Video'\"\n btnSize=\"lg\"\n (clicked)=\"onOpenInVideo()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, decorators: [{
|
|
6716
|
+
type: Component,
|
|
6717
|
+
args: [{ selector: 'cqa-failed-step-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed\">\n <ng-container *ngIf=\"!showExpectedMore && shouldShowViewMore(expectedResult)\">\n {{ getTruncatedText(expectedResult) }}\n </ng-container>\n <ng-container *ngIf=\"showExpectedMore || !shouldShowViewMore(expectedResult)\">\n {{ expectedResult }}\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"shouldShowViewMore(expectedResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n iconPosition=\"end\"\n [text]=\"showExpectedMore ? 'View Less' : 'View More'\"\n [inlineStyles]=\"showExpectedMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n (clicked)=\"toggleExpectedMore()\">\n </cqa-button>\n </div>\n </div>\n\n <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-font-medium\">\n <ng-container *ngIf=\"!showActualMore && shouldShowViewMore(actualResult)\">\n {{ getTruncatedText(actualResult) }}\n </ng-container>\n <ng-container *ngIf=\"showActualMore || !shouldShowViewMore(actualResult)\">\n {{ actualResult }}\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"shouldShowViewMore(actualResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n iconPosition=\"end\"\n [text]=\"showActualMore ? 'View Less' : 'View More'\"\n [inlineStyles]=\"showActualMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n (clicked)=\"toggleActualMore()\">\n </cqa-button>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-border-t cqa-border-[#E4E4E4] cqa-flex cqa-flex-wrap cqa-items-center cqa-justify-end cqa-gap-2\">\n <cqa-button\n variant=\"outlined\"\n icon=\"play_arrow\"\n iconLibrary=\"mat\"\n [text]=\"'Jump to step'\"\n btnSize=\"lg\"\n (clicked)=\"onJumpToStep()\">\n </cqa-button>\n <cqa-button\n variant=\"outlined\"\n icon=\"videocam\"\n iconLibrary=\"mat\"\n [text]=\"'Open In Video'\"\n btnSize=\"lg\"\n (clicked)=\"onOpenInVideo()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6718
|
+
}], propDecorators: { failedStepData: [{
|
|
6719
|
+
type: Input
|
|
6720
|
+
}], jumpToStep: [{
|
|
6721
|
+
type: Output
|
|
6722
|
+
}], openInVideo: [{
|
|
6723
|
+
type: Output
|
|
6724
|
+
}] } });
|
|
6725
|
+
|
|
6479
6726
|
class UiKitModule {
|
|
6480
6727
|
constructor(iconRegistry) {
|
|
6481
6728
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -6523,7 +6770,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6523
6770
|
RunHistoryCardComponent,
|
|
6524
6771
|
ViewImageModalComponent,
|
|
6525
6772
|
ConfigurationCardComponent,
|
|
6526
|
-
CompareRunsComponent
|
|
6773
|
+
CompareRunsComponent,
|
|
6774
|
+
IterationsLoopComponent,
|
|
6775
|
+
FailedStepCardComponent], imports: [CommonModule,
|
|
6527
6776
|
FormsModule,
|
|
6528
6777
|
ReactiveFormsModule,
|
|
6529
6778
|
MatIconModule,
|
|
@@ -6579,7 +6828,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6579
6828
|
RunHistoryCardComponent,
|
|
6580
6829
|
ViewImageModalComponent,
|
|
6581
6830
|
ConfigurationCardComponent,
|
|
6582
|
-
CompareRunsComponent
|
|
6831
|
+
CompareRunsComponent,
|
|
6832
|
+
IterationsLoopComponent,
|
|
6833
|
+
FailedStepCardComponent] });
|
|
6583
6834
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
6584
6835
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
6585
6836
|
], imports: [[
|
|
@@ -6646,7 +6897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6646
6897
|
RunHistoryCardComponent,
|
|
6647
6898
|
ViewImageModalComponent,
|
|
6648
6899
|
ConfigurationCardComponent,
|
|
6649
|
-
CompareRunsComponent
|
|
6900
|
+
CompareRunsComponent,
|
|
6901
|
+
IterationsLoopComponent,
|
|
6902
|
+
FailedStepCardComponent
|
|
6650
6903
|
],
|
|
6651
6904
|
imports: [
|
|
6652
6905
|
CommonModule,
|
|
@@ -6708,7 +6961,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6708
6961
|
RunHistoryCardComponent,
|
|
6709
6962
|
ViewImageModalComponent,
|
|
6710
6963
|
ConfigurationCardComponent,
|
|
6711
|
-
CompareRunsComponent
|
|
6964
|
+
CompareRunsComponent,
|
|
6965
|
+
IterationsLoopComponent,
|
|
6966
|
+
FailedStepCardComponent
|
|
6712
6967
|
],
|
|
6713
6968
|
providers: [
|
|
6714
6969
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
@@ -6852,5 +7107,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6852
7107
|
* Generated bundle index. Do not edit.
|
|
6853
7108
|
*/
|
|
6854
7109
|
|
|
6855
|
-
export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, ViewImageModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
7110
|
+
export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedStepCardComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, ViewImageModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
6856
7111
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|