@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
|
@@ -5960,10 +5960,10 @@ class ConfigurationCardComponent {
|
|
|
5960
5960
|
}
|
|
5961
5961
|
}
|
|
5962
5962
|
ConfigurationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5963
|
-
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
|
|
5963
|
+
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"] }] });
|
|
5964
5964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, decorators: [{
|
|
5965
5965
|
type: Component,
|
|
5966
|
-
args: [{ selector: 'cqa-configuration-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px
|
|
5966
|
+
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: [] }]
|
|
5967
5967
|
}], propDecorators: { icon: [{
|
|
5968
5968
|
type: Input
|
|
5969
5969
|
}], title: [{
|
|
@@ -5980,7 +5980,6 @@ class CompareRunsComponent {
|
|
|
5980
5980
|
this.isLoadingRuns = false;
|
|
5981
5981
|
this.hasMoreRuns = false;
|
|
5982
5982
|
this.isComparingRuns = false;
|
|
5983
|
-
this.isTableDataLoading = false;
|
|
5984
5983
|
this.searchRuns = new EventEmitter();
|
|
5985
5984
|
this.loadMoreRuns = new EventEmitter();
|
|
5986
5985
|
this.compareRuns = new EventEmitter();
|
|
@@ -6390,10 +6389,10 @@ class CompareRunsComponent {
|
|
|
6390
6389
|
}
|
|
6391
6390
|
}
|
|
6392
6391
|
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 });
|
|
6393
|
-
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"] }] });
|
|
6392
|
+
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"] }] });
|
|
6394
6393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
|
|
6395
6394
|
type: Component,
|
|
6396
|
-
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: [] }]
|
|
6395
|
+
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: [] }]
|
|
6397
6396
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
|
|
6398
6397
|
type: Input
|
|
6399
6398
|
}], comparisonData: [{
|
|
@@ -6404,8 +6403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6404
6403
|
type: Input
|
|
6405
6404
|
}], isComparingRuns: [{
|
|
6406
6405
|
type: Input
|
|
6407
|
-
}], isTableDataLoading: [{
|
|
6408
|
-
type: Input
|
|
6409
6406
|
}], searchRuns: [{
|
|
6410
6407
|
type: Output
|
|
6411
6408
|
}], loadMoreRuns: [{
|
|
@@ -6414,6 +6411,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6414
6411
|
type: Output
|
|
6415
6412
|
}] } });
|
|
6416
6413
|
|
|
6414
|
+
class IterationsLoopComponent {
|
|
6415
|
+
constructor() {
|
|
6416
|
+
this.iterations = [];
|
|
6417
|
+
this.isTableDataLoading = false;
|
|
6418
|
+
this.tableColumns = [];
|
|
6419
|
+
this.pageIndex = 0;
|
|
6420
|
+
this.pageSize = 5;
|
|
6421
|
+
this.emptyStateConfig = {
|
|
6422
|
+
title: 'No Iterations',
|
|
6423
|
+
description: 'There are no iterations to display for this loop.',
|
|
6424
|
+
imageUrl: EMPTY_STATE_IMAGES.DASHBOARD,
|
|
6425
|
+
actions: []
|
|
6426
|
+
};
|
|
6427
|
+
}
|
|
6428
|
+
ngOnInit() {
|
|
6429
|
+
this.setupTableColumns();
|
|
6430
|
+
}
|
|
6431
|
+
ngOnChanges(changes) {
|
|
6432
|
+
if (changes['iterations']) {
|
|
6433
|
+
this.pageIndex = 0;
|
|
6434
|
+
}
|
|
6435
|
+
}
|
|
6436
|
+
setupTableColumns() {
|
|
6437
|
+
this.tableColumns = [
|
|
6438
|
+
{
|
|
6439
|
+
fieldId: 'index',
|
|
6440
|
+
fieldName: '#',
|
|
6441
|
+
fieldValue: 'index',
|
|
6442
|
+
isShow: true,
|
|
6443
|
+
weight: 0.5,
|
|
6444
|
+
render: (row) => {
|
|
6445
|
+
return `<span class="cqa-text-[16px] cqa-text-[#0A0A0A] cqa-font-regular">${row.index}</span>`;
|
|
6446
|
+
}
|
|
6447
|
+
},
|
|
6448
|
+
{
|
|
6449
|
+
fieldId: 'datasetId',
|
|
6450
|
+
fieldName: 'Dataset ID',
|
|
6451
|
+
fieldValue: 'datasetId',
|
|
6452
|
+
isShow: true,
|
|
6453
|
+
weight: 1.5,
|
|
6454
|
+
render: (row) => {
|
|
6455
|
+
return `<span class="cqa-text-sm cqa-text-[#0A0A0A] cqa-font-regular">${row.datasetId}</span>`;
|
|
6456
|
+
}
|
|
6457
|
+
},
|
|
6458
|
+
{
|
|
6459
|
+
fieldId: 'variables',
|
|
6460
|
+
fieldName: 'Variables',
|
|
6461
|
+
isShow: true,
|
|
6462
|
+
weight: 2,
|
|
6463
|
+
render: (row) => {
|
|
6464
|
+
const variableEntries = Object.entries(row.variables || {});
|
|
6465
|
+
const variablesHtml = variableEntries.map(([key, value], index) => {
|
|
6466
|
+
return `<div class="cqa-flex cqa-items-center cqa-gap-0.5 ${index === variableEntries.length - 1 ? 'cqa-mb-0' : 'cqa-mb-1'}">
|
|
6467
|
+
<span class="cqa-px-1 cqa-text-[12px] cqa-text-[#4A5565] cqa-bg-[#F3F4F6] cqa-rounded-[4px]">${key}:</span>
|
|
6468
|
+
<span class="cqa-text-sm cqa-text-[#4A5565] cqa-font-medium">${value}</span>
|
|
6469
|
+
</div>`;
|
|
6470
|
+
}).join('');
|
|
6471
|
+
return `<div class="cqa-flex cqa-flex-col">${variablesHtml}</div>`;
|
|
6472
|
+
}
|
|
6473
|
+
},
|
|
6474
|
+
{
|
|
6475
|
+
fieldId: 'status',
|
|
6476
|
+
fieldName: 'Status',
|
|
6477
|
+
fieldValue: 'status',
|
|
6478
|
+
isShow: true,
|
|
6479
|
+
weight: 1,
|
|
6480
|
+
render: (row) => {
|
|
6481
|
+
return this.renderStatusIcon(row.status);
|
|
6482
|
+
}
|
|
6483
|
+
},
|
|
6484
|
+
{
|
|
6485
|
+
fieldId: 'duration',
|
|
6486
|
+
fieldName: 'Duration',
|
|
6487
|
+
isShow: true,
|
|
6488
|
+
weight: 1,
|
|
6489
|
+
render: (row) => {
|
|
6490
|
+
return `
|
|
6491
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1">
|
|
6492
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
6493
|
+
<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"/>
|
|
6494
|
+
<path d="M7 3.5V7L9.33333 8.16667" stroke="#636363" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6495
|
+
</svg>
|
|
6496
|
+
<span class="cqa-text-xs cqa-text-[#4A5565]">${this.formatDuration(row.duration)}</span>
|
|
6497
|
+
</div>
|
|
6498
|
+
`;
|
|
6499
|
+
}
|
|
6500
|
+
}
|
|
6501
|
+
];
|
|
6502
|
+
}
|
|
6503
|
+
renderStatusIcon(status) {
|
|
6504
|
+
const upperStatus = status.toUpperCase();
|
|
6505
|
+
if (upperStatus === 'PASS') {
|
|
6506
|
+
return `
|
|
6507
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6508
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6509
|
+
<circle cx="8" cy="8" r="7" stroke="#008236" stroke-width="1.5" fill="none"/>
|
|
6510
|
+
<path d="M5.5 8L7 9.5L10.5 6" stroke="#008236" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6511
|
+
</svg>
|
|
6512
|
+
<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>
|
|
6513
|
+
</div>
|
|
6514
|
+
`;
|
|
6515
|
+
}
|
|
6516
|
+
else if (upperStatus === 'FAIL') {
|
|
6517
|
+
return `
|
|
6518
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6519
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6520
|
+
<circle cx="8" cy="8" r="7" stroke="#C10007" stroke-width="1.5" fill="none"/>
|
|
6521
|
+
<path d="M10 6L6 10M6 6L10 10" stroke="#C10007" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6522
|
+
</svg>
|
|
6523
|
+
<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>
|
|
6524
|
+
</div>
|
|
6525
|
+
`;
|
|
6526
|
+
}
|
|
6527
|
+
else if (upperStatus === 'IN_PROGRESS') {
|
|
6528
|
+
return `
|
|
6529
|
+
<div class="cqa-flex cqa-items-center cqa-gap-1.5">
|
|
6530
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
6531
|
+
<circle cx="8" cy="8" r="7" stroke="#3B82F6" stroke-width="1.5" fill="none"/>
|
|
6532
|
+
</svg>
|
|
6533
|
+
<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>
|
|
6534
|
+
</div>
|
|
6535
|
+
`;
|
|
6536
|
+
}
|
|
6537
|
+
else {
|
|
6538
|
+
return `<span class="cqa-rounded-[4px] cqa-leading-4 cqa-px-2 cqa-py-0.5 cqa-text-xs cqa-text-[#9CA3AF]">—</span>`;
|
|
6539
|
+
}
|
|
6540
|
+
}
|
|
6541
|
+
formatDuration(milliseconds) {
|
|
6542
|
+
const seconds = milliseconds / 1000;
|
|
6543
|
+
if (seconds < 60) {
|
|
6544
|
+
return `${seconds.toFixed(1)}s`;
|
|
6545
|
+
}
|
|
6546
|
+
const minutes = Math.floor(seconds / 60);
|
|
6547
|
+
const remainingSeconds = Math.floor(seconds % 60);
|
|
6548
|
+
return `${minutes}m ${remainingSeconds}s`;
|
|
6549
|
+
}
|
|
6550
|
+
onPageChange(event) {
|
|
6551
|
+
this.pageIndex = event.pageIndex;
|
|
6552
|
+
this.pageSize = event.pageSize;
|
|
6553
|
+
}
|
|
6554
|
+
get isEmptyState() {
|
|
6555
|
+
return !this.iterations || this.iterations.length === 0;
|
|
6556
|
+
}
|
|
6557
|
+
get computedSummary() {
|
|
6558
|
+
if (this.summary) {
|
|
6559
|
+
return this.summary;
|
|
6560
|
+
}
|
|
6561
|
+
const passed = this.iterations.filter(i => i.status === 'PASS').length;
|
|
6562
|
+
const failed = this.iterations.filter(i => i.status === 'FAIL').length;
|
|
6563
|
+
return {
|
|
6564
|
+
totalIterations: this.iterations.length,
|
|
6565
|
+
passed,
|
|
6566
|
+
failed
|
|
6567
|
+
};
|
|
6568
|
+
}
|
|
6569
|
+
}
|
|
6570
|
+
IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6571
|
+
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"] }] });
|
|
6572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
|
|
6573
|
+
type: Component,
|
|
6574
|
+
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: [] }]
|
|
6575
|
+
}], propDecorators: { iterations: [{
|
|
6576
|
+
type: Input
|
|
6577
|
+
}], summary: [{
|
|
6578
|
+
type: Input
|
|
6579
|
+
}], isTableDataLoading: [{
|
|
6580
|
+
type: Input
|
|
6581
|
+
}] } });
|
|
6582
|
+
|
|
6583
|
+
class FailedStepCardComponent {
|
|
6584
|
+
constructor() {
|
|
6585
|
+
this.jumpToStep = new EventEmitter();
|
|
6586
|
+
this.openInVideo = new EventEmitter();
|
|
6587
|
+
this.showExpectedMore = false;
|
|
6588
|
+
this.showActualMore = false;
|
|
6589
|
+
}
|
|
6590
|
+
get headerTitle() {
|
|
6591
|
+
if (this.failedStepData?.stepTitle) {
|
|
6592
|
+
return `Failed at Step ${this.failedStepData.failed_step_index}: ${this.failedStepData.stepTitle}`;
|
|
6593
|
+
}
|
|
6594
|
+
return `Failed at Step ${this.failedStepData?.failed_step_index || ''}`;
|
|
6595
|
+
}
|
|
6596
|
+
get errorText() {
|
|
6597
|
+
return this.failedStepData?.errorMessage || this.failedStepData?.reason || 'An error occurred';
|
|
6598
|
+
}
|
|
6599
|
+
get videoTimestamp() {
|
|
6600
|
+
return this.failedStepData?.timestamp || '00:00';
|
|
6601
|
+
}
|
|
6602
|
+
get durationText() {
|
|
6603
|
+
return this.failedStepData?.duration || '0s';
|
|
6604
|
+
}
|
|
6605
|
+
get expectedResult() {
|
|
6606
|
+
return this.failedStepData?.expected_result || '';
|
|
6607
|
+
}
|
|
6608
|
+
get actualResult() {
|
|
6609
|
+
return this.failedStepData?.actual_result || '';
|
|
6610
|
+
}
|
|
6611
|
+
get suggestions() {
|
|
6612
|
+
return this.failedStepData?.suggestions || '';
|
|
6613
|
+
}
|
|
6614
|
+
get hasSuggestions() {
|
|
6615
|
+
return !!this.failedStepData?.suggestions && this.failedStepData.suggestions.trim().length > 0;
|
|
6616
|
+
}
|
|
6617
|
+
toggleExpectedMore() {
|
|
6618
|
+
this.showExpectedMore = !this.showExpectedMore;
|
|
6619
|
+
}
|
|
6620
|
+
toggleActualMore() {
|
|
6621
|
+
this.showActualMore = !this.showActualMore;
|
|
6622
|
+
}
|
|
6623
|
+
onJumpToStep() {
|
|
6624
|
+
this.jumpToStep.emit(this.failedStepData);
|
|
6625
|
+
}
|
|
6626
|
+
onOpenInVideo() {
|
|
6627
|
+
this.openInVideo.emit(this.failedStepData);
|
|
6628
|
+
}
|
|
6629
|
+
shouldShowViewMore(text, maxLength = 100) {
|
|
6630
|
+
return !!(text && text.length > maxLength);
|
|
6631
|
+
}
|
|
6632
|
+
getTruncatedText(text, maxLength = 100) {
|
|
6633
|
+
if (!text)
|
|
6634
|
+
return '';
|
|
6635
|
+
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
|
|
6636
|
+
}
|
|
6637
|
+
getFormattedSuggestions() {
|
|
6638
|
+
if (!this.suggestions)
|
|
6639
|
+
return [];
|
|
6640
|
+
return this.suggestions.split('\n').filter(s => s.trim().length > 0);
|
|
6641
|
+
}
|
|
6642
|
+
}
|
|
6643
|
+
FailedStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6644
|
+
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"] }] });
|
|
6645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, decorators: [{
|
|
6646
|
+
type: Component,
|
|
6647
|
+
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: [] }]
|
|
6648
|
+
}], propDecorators: { failedStepData: [{
|
|
6649
|
+
type: Input
|
|
6650
|
+
}], jumpToStep: [{
|
|
6651
|
+
type: Output
|
|
6652
|
+
}], openInVideo: [{
|
|
6653
|
+
type: Output
|
|
6654
|
+
}] } });
|
|
6655
|
+
|
|
6417
6656
|
class UiKitModule {
|
|
6418
6657
|
constructor(iconRegistry) {
|
|
6419
6658
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -6461,7 +6700,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6461
6700
|
RunHistoryCardComponent,
|
|
6462
6701
|
ViewImageModalComponent,
|
|
6463
6702
|
ConfigurationCardComponent,
|
|
6464
|
-
CompareRunsComponent
|
|
6703
|
+
CompareRunsComponent,
|
|
6704
|
+
IterationsLoopComponent,
|
|
6705
|
+
FailedStepCardComponent], imports: [CommonModule,
|
|
6465
6706
|
FormsModule,
|
|
6466
6707
|
ReactiveFormsModule,
|
|
6467
6708
|
MatIconModule,
|
|
@@ -6517,7 +6758,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6517
6758
|
RunHistoryCardComponent,
|
|
6518
6759
|
ViewImageModalComponent,
|
|
6519
6760
|
ConfigurationCardComponent,
|
|
6520
|
-
CompareRunsComponent
|
|
6761
|
+
CompareRunsComponent,
|
|
6762
|
+
IterationsLoopComponent,
|
|
6763
|
+
FailedStepCardComponent] });
|
|
6521
6764
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
6522
6765
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
6523
6766
|
], imports: [[
|
|
@@ -6584,7 +6827,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6584
6827
|
RunHistoryCardComponent,
|
|
6585
6828
|
ViewImageModalComponent,
|
|
6586
6829
|
ConfigurationCardComponent,
|
|
6587
|
-
CompareRunsComponent
|
|
6830
|
+
CompareRunsComponent,
|
|
6831
|
+
IterationsLoopComponent,
|
|
6832
|
+
FailedStepCardComponent
|
|
6588
6833
|
],
|
|
6589
6834
|
imports: [
|
|
6590
6835
|
CommonModule,
|
|
@@ -6646,7 +6891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6646
6891
|
RunHistoryCardComponent,
|
|
6647
6892
|
ViewImageModalComponent,
|
|
6648
6893
|
ConfigurationCardComponent,
|
|
6649
|
-
CompareRunsComponent
|
|
6894
|
+
CompareRunsComponent,
|
|
6895
|
+
IterationsLoopComponent,
|
|
6896
|
+
FailedStepCardComponent
|
|
6650
6897
|
],
|
|
6651
6898
|
providers: [
|
|
6652
6899
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
@@ -6788,5 +7035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6788
7035
|
* Generated bundle index. Do not edit.
|
|
6789
7036
|
*/
|
|
6790
7037
|
|
|
6791
|
-
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 };
|
|
7038
|
+
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 };
|
|
6792
7039
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|