@memberjunction/ng-dashboards 2.47.0 → 2.49.0

package/dist/Actions/components/execution-monitoring.component.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, Output, EventEmitter } from '@angular/core';
 import { RunView, LogError } from '@memberjunction/core';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
@@ -143,45 +134,44 @@ function ExecutionMonitoringComponent_Conditional_87_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("themeColor", "primary");
 } }
 export class ExecutionMonitoringComponent {
-    constructor() {
-        this.openEntityRecord = new EventEmitter();
-        this.showExecutionsListView = new EventEmitter();
-        this.isLoading = true;
-        this.executions = [];
-        this.filteredExecutions = [];
-        this.actions = new Map();
-        this.metrics = {
-            totalExecutions: 0,
-            successfulExecutions: 0,
-            failedExecutions: 0,
-            averageDuration: 0,
-            executionsToday: 0,
-            executionsThisWeek: 0,
-            currentlyRunning: 0
-        };
-        this.executionTrends = [];
-        this.searchTerm$ = new BehaviorSubject('');
-        this.selectedResult$ = new BehaviorSubject('all');
-        this.selectedTimeRange$ = new BehaviorSubject('7days');
-        this.selectedAction$ = new BehaviorSubject('all');
-        this.timeRangeOptions = [
-            { text: 'Last 24 Hours', value: '24hours' },
-            { text: 'Last 7 Days', value: '7days' },
-            { text: 'Last 30 Days', value: '30days' },
-            { text: 'Last 90 Days', value: '90days' }
-        ];
-        this.resultOptions = [
-            { text: 'All Results', value: 'all' },
-            { text: 'Success', value: 'Success' },
-            { text: 'Failed', value: 'Failed' },
-            { text: 'Error', value: 'Error' },
-            { text: 'Running', value: 'Running' }
-        ];
-        this.actionOptions = [
-            { text: 'All Actions', value: 'all' }
-        ];
-        this.destroy$ = new Subject();
-    }
+    openEntityRecord = new EventEmitter();
+    showExecutionsListView = new EventEmitter();
+    isLoading = true;
+    executions = [];
+    filteredExecutions = [];
+    actions = new Map();
+    metrics = {
+        totalExecutions: 0,
+        successfulExecutions: 0,
+        failedExecutions: 0,
+        averageDuration: 0,
+        executionsToday: 0,
+        executionsThisWeek: 0,
+        currentlyRunning: 0
+    };
+    executionTrends = [];
+    searchTerm$ = new BehaviorSubject('');
+    selectedResult$ = new BehaviorSubject('all');
+    selectedTimeRange$ = new BehaviorSubject('7days');
+    selectedAction$ = new BehaviorSubject('all');
+    timeRangeOptions = [
+        { text: 'Last 24 Hours', value: '24hours' },
+        { text: 'Last 7 Days', value: '7days' },
+        { text: 'Last 30 Days', value: '30days' },
+        { text: 'Last 90 Days', value: '90days' }
+    ];
+    resultOptions = [
+        { text: 'All Results', value: 'all' },
+        { text: 'Success', value: 'Success' },
+        { text: 'Failed', value: 'Failed' },
+        { text: 'Error', value: 'Error' },
+        { text: 'Running', value: 'Running' }
+    ];
+    actionOptions = [
+        { text: 'All Actions', value: 'all' }
+    ];
+    destroy$ = new Subject();
+    constructor() { }
     ngOnInit() {
         this.setupFilters();
         this.loadData();
@@ -200,66 +190,60 @@ export class ExecutionMonitoringComponent {
             this.applyFilters();
         });
     }
-    loadData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.isLoading = true;
-                const [executions, actions] = yield Promise.all([
-                    this.loadExecutions(),
-                    this.loadActions()
-                ]);
-                this.executions = executions;
-                this.populateActionsMap(actions);
-                this.buildActionOptions(actions);
-                this.calculateMetrics();
-                this.generateExecutionTrends();
-                this.applyFilters();
-            }
-            catch (error) {
-                LogError('Failed to load execution monitoring data', undefined, error);
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
+    async loadData() {
+        try {
+            this.isLoading = true;
+            const [executions, actions] = await Promise.all([
+                this.loadExecutions(),
+                this.loadActions()
+            ]);
+            this.executions = executions;
+            this.populateActionsMap(actions);
+            this.buildActionOptions(actions);
+            this.calculateMetrics();
+            this.generateExecutionTrends();
+            this.applyFilters();
+        }
+        catch (error) {
+            LogError('Failed to load execution monitoring data', undefined, error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    loadExecutions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Action Execution Logs',
-                ExtraFilter: '',
-                OrderBy: 'StartedAt DESC',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 5000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load action execution logs');
-            }
+    async loadExecutions() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Action Execution Logs',
+            ExtraFilter: '',
+            OrderBy: 'StartedAt DESC',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 5000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load action execution logs');
+        }
     }
-    loadActions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Actions',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load actions');
-            }
+    async loadActions() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Actions',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load actions');
+        }
     }
     populateActionsMap(actions) {
         this.actions.clear();
@@ -362,11 +346,10 @@ export class ExecutionMonitoringComponent {
         const searchTerm = this.searchTerm$.value.toLowerCase();
         if (searchTerm) {
             filtered = filtered.filter(e => {
-                var _a, _b;
                 const action = this.actions.get(e.ActionID);
-                return ((action === null || action === void 0 ? void 0 : action.Name.toLowerCase().includes(searchTerm)) ||
-                    ((_a = e.ResultCode) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm)) ||
-                    ((_b = e.UserID) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchTerm)));
+                return (action?.Name.toLowerCase().includes(searchTerm) ||
+                    e.ResultCode?.toLowerCase().includes(searchTerm) ||
+                    e.UserID?.toLowerCase().includes(searchTerm));
             });
         }
         this.filteredExecutions = filtered;
@@ -411,8 +394,7 @@ export class ExecutionMonitoringComponent {
         });
     }
     getActionName(actionId) {
-        var _a;
-        return ((_a = this.actions.get(actionId)) === null || _a === void 0 ? void 0 : _a.Name) || `Action ${actionId}`;
+        return this.actions.get(actionId)?.Name || `Action ${actionId}`;
     }
     getResultColor(resultCode) {
         if (!resultCode)
@@ -470,153 +452,153 @@ export class ExecutionMonitoringComponent {
     onRunningExecutionsClick() {
         this.selectedResult$.next('Running');
     }
+    static ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], outputs: { openEntityRecord: "openEntityRecord", showExecutionsListView: "showExecutionsListView" }, decls: 88, vars: 22, consts: [["mjFillContainer", "", 1, "execution-monitoring"], [1, "monitoring-header"], [1, "header-title"], [1, "fa-solid", "fa-chart-line"], ["kendoButton", "", 1, "refresh-btn", 3, "click", "primary", "icon"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search executions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-group"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "metrics-summary"], [1, "metric-card", "total", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-play-circle"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "metric-detail"], [1, "metric-card", "error", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "metric-card", "duration"], [1, "fa-solid", "fa-clock"], [1, "metric-card", "activity"], [1, "fa-solid", "fa-calendar-day"], [1, "metric-card", "running", "clickable", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "trends-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-area"], [1, "trends-chart"], [1, "empty-chart"], [1, "executions-section"], [1, "fa-solid", "fa-list"], [1, "results-count"], [1, "executions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "trend-bars"], [1, "trend-bar"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "bar-container"], [1, "bar-success"], [1, "bar-failed"], [1, "bar-label"], [1, "bar-total"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-status"], [1, "execution-main"], [1, "execution-action", 3, "click"], [1, "execution-details"], [1, "execution-time"], [1, "execution-user"], [1, "execution-duration"], [1, "execution-result"], [3, "themeColor", "size"], [1, "execution-actions"], ["kendoButton", "", 3, "click", "fillMode", "icon"], ["type", "converging-spinner", 3, "themeColor"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5, " Execution Monitoring");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 4);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_6_listener() { return ctx.refreshData(); });
+            i0.ɵɵtext(7, " Refresh ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7);
+            i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_textbox_valueChange_10_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵtemplate(11, ExecutionMonitoringComponent_ng_template_11_Template, 1, 0, "ng-template", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 9)(13, "kendo-dropdownlist", 10);
+            i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_13_listener($event) { return ctx.onTimeRangeChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "kendo-dropdownlist", 10);
+            i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_14_listener($event) { return ctx.onResultFilterChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "kendo-dropdownlist", 10);
+            i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_15_listener($event) { return ctx.onActionFilterChange($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(16, "div", 11)(17, "div", 12);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_17_listener() { return ctx.onTotalExecutionsClick(); });
+            i0.ɵɵelementStart(18, "div", 13);
+            i0.ɵɵelement(19, "i", 14);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "div", 15)(21, "div", 16);
+            i0.ɵɵtext(22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 17);
+            i0.ɵɵtext(24, "Total Executions");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(25, "div", 18);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_25_listener() { return ctx.onSuccessRateClick(); });
+            i0.ɵɵelementStart(26, "div", 13);
+            i0.ɵɵelement(27, "i", 19);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "div", 15)(29, "div", 16);
+            i0.ɵɵtext(30);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(31, "div", 17);
+            i0.ɵɵtext(32, "Success Rate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "div", 20);
+            i0.ɵɵtext(34);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(35, "div", 21);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_35_listener() { return ctx.onFailedExecutionsClick(); });
+            i0.ɵɵelementStart(36, "div", 13);
+            i0.ɵɵelement(37, "i", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(38, "div", 15)(39, "div", 16);
+            i0.ɵɵtext(40);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(41, "div", 17);
+            i0.ɵɵtext(42, "Failed Executions");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(43, "div", 23)(44, "div", 13);
+            i0.ɵɵelement(45, "i", 24);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(46, "div", 15)(47, "div", 16);
+            i0.ɵɵtext(48);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(49, "div", 17);
+            i0.ɵɵtext(50, "Avg Duration");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(51, "div", 25)(52, "div", 13);
+            i0.ɵɵelement(53, "i", 26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(54, "div", 15)(55, "div", 16);
+            i0.ɵɵtext(56);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "div", 17);
+            i0.ɵɵtext(58, "Today");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(59, "div", 20);
+            i0.ɵɵtext(60);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(61, "div", 27);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_61_listener() { return ctx.onRunningExecutionsClick(); });
+            i0.ɵɵelementStart(62, "div", 13);
+            i0.ɵɵelement(63, "i", 28);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(64, "div", 15)(65, "div", 16);
+            i0.ɵɵtext(66);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(67, "div", 17);
+            i0.ɵɵtext(68, "Currently Running");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(69, "div", 29)(70, "div", 30)(71, "h4");
+            i0.ɵɵelement(72, "i", 31);
+            i0.ɵɵtext(73, " 7-Day Execution Trends");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(74, "div", 32);
+            i0.ɵɵtemplate(75, ExecutionMonitoringComponent_Conditional_75_Template, 12, 0)(76, ExecutionMonitoringComponent_Conditional_76_Template, 4, 0, "div", 33);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(77, "div", 34)(78, "div", 30)(79, "h4");
+            i0.ɵɵelement(80, "i", 35);
+            i0.ɵɵtext(81, " Recent Executions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(82, "div", 36);
+            i0.ɵɵtext(83);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(84, "div", 37);
+            i0.ɵɵtemplate(85, ExecutionMonitoringComponent_Conditional_85_Template, 2, 0)(86, ExecutionMonitoringComponent_Conditional_86_Template, 6, 0, "div", 38);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(87, ExecutionMonitoringComponent_Conditional_87_Template, 2, 1, "div", 39);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("primary", true)("icon", "refresh");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("value", ctx.searchTerm$.value);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("data", ctx.timeRangeOptions)("value", ctx.selectedTimeRange$.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.resultOptions)("value", ctx.selectedResult$.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.actionOptions)("value", ctx.selectedAction$.value);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate(ctx.metrics.totalExecutions);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate1("", ctx.getSuccessRate(), "%");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2("", ctx.metrics.successfulExecutions, "/", ctx.metrics.totalExecutions, "");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.metrics.failedExecutions);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.averageDuration, "s");
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.metrics.executionsToday);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.executionsThisWeek, " this week");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.metrics.currentlyRunning);
+            i0.ɵɵadvance(9);
+            i0.ɵɵconditional(ctx.executionTrends.length > 0 ? 75 : 76);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate1("", ctx.filteredExecutions.length, " executions");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 85 : 86);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 87 : -1);
+        } }, dependencies: [i1.LoaderComponent, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.FillContainer, i5.ButtonComponent, i5.ChipComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .monitoring-header {\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h3 {\n        margin: 0;\n        font-size: 1.25rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .refresh-btn {\n        gap: 0.5rem;\n      }\n    }\n\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n      }\n    }\n  }\n\n  .metrics-summary {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.25rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2.5rem;\n        height: 2.5rem;\n        border-radius: 0.5rem;\n        font-size: 1rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.5rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.75rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.125rem;\n        }\n\n        .metric-detail {\n          font-size: 0.625rem;\n          color: var(--kendo-color-subtle);\n        }\n      }\n\n      &.total .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.error .metric-icon { background: var(--kendo-color-error); }\n      &.duration .metric-icon { background: var(--kendo-color-info); }\n      &.activity .metric-icon { background: var(--kendo-color-warning); }\n      &.running .metric-icon { background: var(--kendo-color-secondary); }\n    }\n  }\n\n  .trends-section {\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    padding: 1.5rem;\n\n    .section-header {\n      margin-bottom: 1.5rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n    }\n\n    .trends-chart {\n      .trend-bars {\n        display: flex;\n        align-items: end;\n        gap: 1rem;\n        height: 120px;\n        margin-bottom: 1rem;\n\n        .trend-bar {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 0.5rem;\n\n          .bar-container {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            min-height: 80px;\n            border-radius: 0.25rem;\n            overflow: hidden;\n            background: var(--kendo-color-border);\n            position: relative;\n\n            .bar-success {\n              background: var(--kendo-color-success);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n\n            .bar-failed {\n              background: var(--kendo-color-error);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n          }\n\n          .bar-label {\n            font-size: 0.625rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n          }\n\n          .bar-total {\n            font-size: 0.75rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n        }\n      }\n\n      .chart-legend {\n        display: flex;\n        justify-content: center;\n        gap: 1.5rem;\n\n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n          font-size: 0.75rem;\n\n          .legend-color {\n            width: 12px;\n            height: 12px;\n            border-radius: 2px;\n\n            &.success { background: var(--kendo-color-success); }\n            &.failed { background: var(--kendo-color-error); }\n          }\n        }\n      }\n\n      .empty-chart {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 120px;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 2rem;\n          margin-bottom: 0.5rem;\n          opacity: 0.5;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .executions-section {\n    flex: 1;\n    min-height: 0;\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    display: flex;\n    flex-direction: column;\n\n    .section-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem 0;\n      margin-bottom: 1rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .results-count {\n        font-size: 0.75rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\n    .executions-list {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: 0 1.5rem 1.5rem;\n\n      .execution-item {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        padding: 1rem;\n        border: 1px solid var(--kendo-color-border);\n        border-radius: 0.5rem;\n        margin-bottom: 0.75rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          background: var(--kendo-color-base-hover);\n          border-color: var(--kendo-color-primary);\n          transform: translateY(-1px);\n          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n\n        .execution-status {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 2rem;\n          height: 2rem;\n\n          i {\n            font-size: 1rem;\n\n            &.fa-check-circle { color: var(--kendo-color-success); }\n            &.fa-exclamation-circle { color: var(--kendo-color-error); }\n            &.fa-spinner { color: var(--kendo-color-warning); }\n            &.fa-info-circle,\n            &.fa-question { color: var(--kendo-color-info); }\n          }\n        }\n\n        .execution-main {\n          flex: 1;\n\n          .execution-action {\n            font-weight: 600;\n            margin-bottom: 0.25rem;\n            color: var(--kendo-color-primary);\n            cursor: pointer;\n            transition: color 0.2s ease;\n\n            &:hover {\n              color: var(--kendo-color-primary-darker);\n              text-decoration: underline;\n            }\n          }\n\n          .execution-details {\n            display: flex;\n            gap: 1rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            .execution-time {\n              font-weight: 600;\n            }\n\n            .execution-user {\n              color: var(--kendo-color-info);\n            }\n\n            .execution-duration {\n              font-weight: 600;\n            }\n          }\n        }\n\n        .execution-result {\n          flex-shrink: 0;\n        }\n\n        .execution-actions {\n          flex-shrink: 0;\n\n          button {\n            opacity: 0;\n            transition: opacity 0.2s ease;\n          }\n        }\n\n        &:hover .execution-actions button {\n          opacity: 1;\n        }\n      }\n\n      .empty-state {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 3rem 2rem;\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h5 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   design\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .execution-monitoring {\n    .metrics-summary {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .monitoring-header .filters-row {\n      .filter-group {\n        flex-wrap: wrap;\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .execution-monitoring[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-summary {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.75rem;\n\n      .metric-card {\n        padding: 1rem;\n\n        .metric-content .metric-value {\n          font-size: 1.25rem;\n        }\n      }\n    }\n\n    .monitoring-header {\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 1rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .trends-section .trends-chart .trend-bars {\n      gap: 0.5rem;\n    }\n  }\n}"] });
 }
-ExecutionMonitoringComponent.ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(); };
-ExecutionMonitoringComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], outputs: { openEntityRecord: "openEntityRecord", showExecutionsListView: "showExecutionsListView" }, decls: 88, vars: 22, consts: [["mjFillContainer", "", 1, "execution-monitoring"], [1, "monitoring-header"], [1, "header-title"], [1, "fa-solid", "fa-chart-line"], ["kendoButton", "", 1, "refresh-btn", 3, "click", "primary", "icon"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search executions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-group"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "metrics-summary"], [1, "metric-card", "total", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-play-circle"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "metric-detail"], [1, "metric-card", "error", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "metric-card", "duration"], [1, "fa-solid", "fa-clock"], [1, "metric-card", "activity"], [1, "fa-solid", "fa-calendar-day"], [1, "metric-card", "running", "clickable", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "trends-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-area"], [1, "trends-chart"], [1, "empty-chart"], [1, "executions-section"], [1, "fa-solid", "fa-list"], [1, "results-count"], [1, "executions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "trend-bars"], [1, "trend-bar"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "bar-container"], [1, "bar-success"], [1, "bar-failed"], [1, "bar-label"], [1, "bar-total"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-status"], [1, "execution-main"], [1, "execution-action", 3, "click"], [1, "execution-details"], [1, "execution-time"], [1, "execution-user"], [1, "execution-duration"], [1, "execution-result"], [3, "themeColor", "size"], [1, "execution-actions"], ["kendoButton", "", 3, "click", "fillMode", "icon"], ["type", "converging-spinner", 3, "themeColor"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
-        i0.ɵɵelement(4, "i", 3);
-        i0.ɵɵtext(5, " Execution Monitoring");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "button", 4);
-        i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_6_listener() { return ctx.refreshData(); });
-        i0.ɵɵtext(7, " Refresh ");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7);
-        i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_textbox_valueChange_10_listener($event) { return ctx.onSearchChange($event); });
-        i0.ɵɵtemplate(11, ExecutionMonitoringComponent_ng_template_11_Template, 1, 0, "ng-template", 8);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(12, "div", 9)(13, "kendo-dropdownlist", 10);
-        i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_13_listener($event) { return ctx.onTimeRangeChange($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(14, "kendo-dropdownlist", 10);
-        i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_14_listener($event) { return ctx.onResultFilterChange($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(15, "kendo-dropdownlist", 10);
-        i0.ɵɵlistener("valueChange", function ExecutionMonitoringComponent_Template_kendo_dropdownlist_valueChange_15_listener($event) { return ctx.onActionFilterChange($event); });
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(16, "div", 11)(17, "div", 12);
-        i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_17_listener() { return ctx.onTotalExecutionsClick(); });
-        i0.ɵɵelementStart(18, "div", 13);
-        i0.ɵɵelement(19, "i", 14);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(20, "div", 15)(21, "div", 16);
-        i0.ɵɵtext(22);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(23, "div", 17);
-        i0.ɵɵtext(24, "Total Executions");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(25, "div", 18);
-        i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_25_listener() { return ctx.onSuccessRateClick(); });
-        i0.ɵɵelementStart(26, "div", 13);
-        i0.ɵɵelement(27, "i", 19);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(28, "div", 15)(29, "div", 16);
-        i0.ɵɵtext(30);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(31, "div", 17);
-        i0.ɵɵtext(32, "Success Rate");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(33, "div", 20);
-        i0.ɵɵtext(34);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(35, "div", 21);
-        i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_35_listener() { return ctx.onFailedExecutionsClick(); });
-        i0.ɵɵelementStart(36, "div", 13);
-        i0.ɵɵelement(37, "i", 22);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(38, "div", 15)(39, "div", 16);
-        i0.ɵɵtext(40);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(41, "div", 17);
-        i0.ɵɵtext(42, "Failed Executions");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(43, "div", 23)(44, "div", 13);
-        i0.ɵɵelement(45, "i", 24);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(46, "div", 15)(47, "div", 16);
-        i0.ɵɵtext(48);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(49, "div", 17);
-        i0.ɵɵtext(50, "Avg Duration");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(51, "div", 25)(52, "div", 13);
-        i0.ɵɵelement(53, "i", 26);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(54, "div", 15)(55, "div", 16);
-        i0.ɵɵtext(56);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(57, "div", 17);
-        i0.ɵɵtext(58, "Today");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(59, "div", 20);
-        i0.ɵɵtext(60);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(61, "div", 27);
-        i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_61_listener() { return ctx.onRunningExecutionsClick(); });
-        i0.ɵɵelementStart(62, "div", 13);
-        i0.ɵɵelement(63, "i", 28);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(64, "div", 15)(65, "div", 16);
-        i0.ɵɵtext(66);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(67, "div", 17);
-        i0.ɵɵtext(68, "Currently Running");
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(69, "div", 29)(70, "div", 30)(71, "h4");
-        i0.ɵɵelement(72, "i", 31);
-        i0.ɵɵtext(73, " 7-Day Execution Trends");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(74, "div", 32);
-        i0.ɵɵtemplate(75, ExecutionMonitoringComponent_Conditional_75_Template, 12, 0)(76, ExecutionMonitoringComponent_Conditional_76_Template, 4, 0, "div", 33);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(77, "div", 34)(78, "div", 30)(79, "h4");
-        i0.ɵɵelement(80, "i", 35);
-        i0.ɵɵtext(81, " Recent Executions");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(82, "div", 36);
-        i0.ɵɵtext(83);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(84, "div", 37);
-        i0.ɵɵtemplate(85, ExecutionMonitoringComponent_Conditional_85_Template, 2, 0)(86, ExecutionMonitoringComponent_Conditional_86_Template, 6, 0, "div", 38);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(87, ExecutionMonitoringComponent_Conditional_87_Template, 2, 1, "div", 39);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("primary", true)("icon", "refresh");
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("value", ctx.searchTerm$.value);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("data", ctx.timeRangeOptions)("value", ctx.selectedTimeRange$.value);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.resultOptions)("value", ctx.selectedResult$.value);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.actionOptions)("value", ctx.selectedAction$.value);
-        i0.ɵɵadvance(7);
-        i0.ɵɵtextInterpolate(ctx.metrics.totalExecutions);
-        i0.ɵɵadvance(8);
-        i0.ɵɵtextInterpolate1("", ctx.getSuccessRate(), "%");
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate2("", ctx.metrics.successfulExecutions, "/", ctx.metrics.totalExecutions, "");
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(ctx.metrics.failedExecutions);
-        i0.ɵɵadvance(8);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.averageDuration, "s");
-        i0.ɵɵadvance(8);
-        i0.ɵɵtextInterpolate(ctx.metrics.executionsToday);
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.executionsThisWeek, " this week");
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(ctx.metrics.currentlyRunning);
-        i0.ɵɵadvance(9);
-        i0.ɵɵconditional(ctx.executionTrends.length > 0 ? 75 : 76);
-        i0.ɵɵadvance(8);
-        i0.ɵɵtextInterpolate1("", ctx.filteredExecutions.length, " executions");
-        i0.ɵɵadvance(2);
-        i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 85 : 86);
-        i0.ɵɵadvance(2);
-        i0.ɵɵconditional(ctx.isLoading ? 87 : -1);
-    } }, dependencies: [i1.LoaderComponent, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.FillContainer, i5.ButtonComponent, i5.ChipComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .monitoring-header {\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h3 {\n        margin: 0;\n        font-size: 1.25rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .refresh-btn {\n        gap: 0.5rem;\n      }\n    }\n\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n      }\n    }\n  }\n\n  .metrics-summary {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.25rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2.5rem;\n        height: 2.5rem;\n        border-radius: 0.5rem;\n        font-size: 1rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.5rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.75rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.125rem;\n        }\n\n        .metric-detail {\n          font-size: 0.625rem;\n          color: var(--kendo-color-subtle);\n        }\n      }\n\n      &.total .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.error .metric-icon { background: var(--kendo-color-error); }\n      &.duration .metric-icon { background: var(--kendo-color-info); }\n      &.activity .metric-icon { background: var(--kendo-color-warning); }\n      &.running .metric-icon { background: var(--kendo-color-secondary); }\n    }\n  }\n\n  .trends-section {\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    padding: 1.5rem;\n\n    .section-header {\n      margin-bottom: 1.5rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n    }\n\n    .trends-chart {\n      .trend-bars {\n        display: flex;\n        align-items: end;\n        gap: 1rem;\n        height: 120px;\n        margin-bottom: 1rem;\n\n        .trend-bar {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 0.5rem;\n\n          .bar-container {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            min-height: 80px;\n            border-radius: 0.25rem;\n            overflow: hidden;\n            background: var(--kendo-color-border);\n            position: relative;\n\n            .bar-success {\n              background: var(--kendo-color-success);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n\n            .bar-failed {\n              background: var(--kendo-color-error);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n          }\n\n          .bar-label {\n            font-size: 0.625rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n          }\n\n          .bar-total {\n            font-size: 0.75rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n        }\n      }\n\n      .chart-legend {\n        display: flex;\n        justify-content: center;\n        gap: 1.5rem;\n\n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n          font-size: 0.75rem;\n\n          .legend-color {\n            width: 12px;\n            height: 12px;\n            border-radius: 2px;\n\n            &.success { background: var(--kendo-color-success); }\n            &.failed { background: var(--kendo-color-error); }\n          }\n        }\n      }\n\n      .empty-chart {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 120px;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 2rem;\n          margin-bottom: 0.5rem;\n          opacity: 0.5;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .executions-section {\n    flex: 1;\n    min-height: 0;\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    display: flex;\n    flex-direction: column;\n\n    .section-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem 0;\n      margin-bottom: 1rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .results-count {\n        font-size: 0.75rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\n    .executions-list {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: 0 1.5rem 1.5rem;\n\n      .execution-item {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        padding: 1rem;\n        border: 1px solid var(--kendo-color-border);\n        border-radius: 0.5rem;\n        margin-bottom: 0.75rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          background: var(--kendo-color-base-hover);\n          border-color: var(--kendo-color-primary);\n          transform: translateY(-1px);\n          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n\n        .execution-status {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 2rem;\n          height: 2rem;\n\n          i {\n            font-size: 1rem;\n\n            &.fa-check-circle { color: var(--kendo-color-success); }\n            &.fa-exclamation-circle { color: var(--kendo-color-error); }\n            &.fa-spinner { color: var(--kendo-color-warning); }\n            &.fa-info-circle,\n            &.fa-question { color: var(--kendo-color-info); }\n          }\n        }\n\n        .execution-main {\n          flex: 1;\n\n          .execution-action {\n            font-weight: 600;\n            margin-bottom: 0.25rem;\n            color: var(--kendo-color-primary);\n            cursor: pointer;\n            transition: color 0.2s ease;\n\n            &:hover {\n              color: var(--kendo-color-primary-darker);\n              text-decoration: underline;\n            }\n          }\n\n          .execution-details {\n            display: flex;\n            gap: 1rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            .execution-time {\n              font-weight: 600;\n            }\n\n            .execution-user {\n              color: var(--kendo-color-info);\n            }\n\n            .execution-duration {\n              font-weight: 600;\n            }\n          }\n        }\n\n        .execution-result {\n          flex-shrink: 0;\n        }\n\n        .execution-actions {\n          flex-shrink: 0;\n\n          button {\n            opacity: 0;\n            transition: opacity 0.2s ease;\n          }\n        }\n\n        &:hover .execution-actions button {\n          opacity: 1;\n        }\n      }\n\n      .empty-state {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 3rem 2rem;\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h5 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   design\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .execution-monitoring {\n    .metrics-summary {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .monitoring-header .filters-row {\n      .filter-group {\n        flex-wrap: wrap;\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .execution-monitoring[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-summary {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.75rem;\n\n      .metric-card {\n        padding: 1rem;\n\n        .metric-content .metric-value {\n          font-size: 1.25rem;\n        }\n      }\n    }\n\n    .monitoring-header {\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 1rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .trends-section .trends-chart .trend-bars {\n      gap: 0.5rem;\n    }\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
         type: Component,
         args: [{ selector: 'mj-execution-monitoring', template: "<div class=\"execution-monitoring\" mjFillContainer>\n  <!-- Header with filters -->\n  <div class=\"monitoring-header\">\n    <div class=\"header-title\">\n      <h3><i class=\"fa-solid fa-chart-line\"></i> Execution Monitoring</h3>\n      <button kendoButton [primary]=\"true\" [icon]=\"'refresh'\" (click)=\"refreshData()\" class=\"refresh-btn\">\n        Refresh\n      </button>\n    </div>\n    \n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <kendo-textbox \n          placeholder=\"Search executions...\" \n          [value]=\"searchTerm$.value\"\n          (valueChange)=\"onSearchChange($event)\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <i class=\"fa-solid fa-search\"></i>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      \n      <div class=\"filter-group\">\n        <kendo-dropdownlist \n          [data]=\"timeRangeOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedTimeRange$.value\"\n          (valueChange)=\"onTimeRangeChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"resultOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedResult$.value\"\n          (valueChange)=\"onResultFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"actionOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedAction$.value\"\n          (valueChange)=\"onActionFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Metrics Summary -->\n  <div class=\"metrics-summary\">\n    <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n        <div class=\"metric-label\">Success Rate</div>\n        <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-exclamation-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n        <div class=\"metric-label\">Failed Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card duration\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-clock\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n        <div class=\"metric-label\">Avg Duration</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card activity\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-calendar-day\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n        <div class=\"metric-label\">Today</div>\n        <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n        <div class=\"metric-label\">Currently Running</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Execution Trends Chart -->\n  <div class=\"trends-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n    </div>\n    <div class=\"trends-chart\">\n      @if (executionTrends.length > 0) {\n        <div class=\"trend-bars\">\n          @for (trend of executionTrends; track trend.date) {\n            <div class=\"trend-bar\">\n              <div class=\"bar-container\">\n                <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n                <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n              </div>\n              <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n              <div class=\"bar-total\">{{ trend.total }}</div>\n            </div>\n          }\n        </div>\n        <div class=\"chart-legend\">\n          <div class=\"legend-item\">\n            <div class=\"legend-color success\"></div>\n            <span>Successful</span>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-color failed\"></div>\n            <span>Failed</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <p>No execution trends available</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Execution List -->\n  <div class=\"executions-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n      <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n    </div>\n    \n    <div class=\"executions-list\">\n      @if (filteredExecutions.length > 0) {\n        @for (execution of filteredExecutions; track execution.ID) {\n          <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n            <div class=\"execution-status\">\n              <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n            </div>\n            \n            <div class=\"execution-main\">\n              <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n                {{ getActionName(execution.ActionID!) }}\n              </div>\n              <div class=\"execution-details\">\n                <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n                <span class=\"execution-user\">{{ execution.UserID }}</span>\n                <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n              </div>\n            </div>\n            \n            <div class=\"execution-result\">\n              <kendo-chip \n                [themeColor]=\"getResultColor(execution.ResultCode)\"\n                [size]=\"'small'\">\n                {{ execution.ResultCode || 'Unknown' }}\n              </kendo-chip>\n            </div>\n            \n            <div class=\"execution-actions\">\n              <button kendoButton \n                [fillMode]=\"'flat'\" \n                [icon]=\"'more-vertical'\"\n                (click)=\"$event.stopPropagation()\">\n              </button>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search\"></i>\n          <h5>No executions found</h5>\n          <p>Try adjusting your filters or search terms</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <kendo-loader type=\"converging-spinner\" [themeColor]=\"'primary'\"></kendo-loader>\n    </div>\n  }\n</div>", styles: [".execution-monitoring {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .monitoring-header {\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h3 {\n        margin: 0;\n        font-size: 1.25rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .refresh-btn {\n        gap: 0.5rem;\n      }\n    }\n\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n      }\n    }\n  }\n\n  .metrics-summary {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.25rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2.5rem;\n        height: 2.5rem;\n        border-radius: 0.5rem;\n        font-size: 1rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.5rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.75rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.125rem;\n        }\n\n        .metric-detail {\n          font-size: 0.625rem;\n          color: var(--kendo-color-subtle);\n        }\n      }\n\n      &.total .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.error .metric-icon { background: var(--kendo-color-error); }\n      &.duration .metric-icon { background: var(--kendo-color-info); }\n      &.activity .metric-icon { background: var(--kendo-color-warning); }\n      &.running .metric-icon { background: var(--kendo-color-secondary); }\n    }\n  }\n\n  .trends-section {\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    padding: 1.5rem;\n\n    .section-header {\n      margin-bottom: 1.5rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n    }\n\n    .trends-chart {\n      .trend-bars {\n        display: flex;\n        align-items: end;\n        gap: 1rem;\n        height: 120px;\n        margin-bottom: 1rem;\n\n        .trend-bar {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 0.5rem;\n\n          .bar-container {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            min-height: 80px;\n            border-radius: 0.25rem;\n            overflow: hidden;\n            background: var(--kendo-color-border);\n            position: relative;\n\n            .bar-success {\n              background: var(--kendo-color-success);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n\n            .bar-failed {\n              background: var(--kendo-color-error);\n              width: 100%;\n              min-height: 2px;\n              transition: height 0.3s ease;\n            }\n          }\n\n          .bar-label {\n            font-size: 0.625rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n          }\n\n          .bar-total {\n            font-size: 0.75rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n        }\n      }\n\n      .chart-legend {\n        display: flex;\n        justify-content: center;\n        gap: 1.5rem;\n\n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n          font-size: 0.75rem;\n\n          .legend-color {\n            width: 12px;\n            height: 12px;\n            border-radius: 2px;\n\n            &.success { background: var(--kendo-color-success); }\n            &.failed { background: var(--kendo-color-error); }\n          }\n        }\n      }\n\n      .empty-chart {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 120px;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 2rem;\n          margin-bottom: 0.5rem;\n          opacity: 0.5;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .executions-section {\n    flex: 1;\n    min-height: 0;\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 0.75rem;\n    display: flex;\n    flex-direction: column;\n\n    .section-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem 0;\n      margin-bottom: 1rem;\n\n      h4 {\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n\n        i {\n          color: var(--kendo-color-primary);\n        }\n      }\n\n      .results-count {\n        font-size: 0.75rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\n    .executions-list {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: 0 1.5rem 1.5rem;\n\n      .execution-item {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        padding: 1rem;\n        border: 1px solid var(--kendo-color-border);\n        border-radius: 0.5rem;\n        margin-bottom: 0.75rem;\n        cursor: pointer;\n        transition: all 0.2s ease;\n\n        &:hover {\n          background: var(--kendo-color-base-hover);\n          border-color: var(--kendo-color-primary);\n          transform: translateY(-1px);\n          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n\n        .execution-status {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 2rem;\n          height: 2rem;\n\n          i {\n            font-size: 1rem;\n\n            &.fa-check-circle { color: var(--kendo-color-success); }\n            &.fa-exclamation-circle { color: var(--kendo-color-error); }\n            &.fa-spinner { color: var(--kendo-color-warning); }\n            &.fa-info-circle,\n            &.fa-question { color: var(--kendo-color-info); }\n          }\n        }\n\n        .execution-main {\n          flex: 1;\n\n          .execution-action {\n            font-weight: 600;\n            margin-bottom: 0.25rem;\n            color: var(--kendo-color-primary);\n            cursor: pointer;\n            transition: color 0.2s ease;\n\n            &:hover {\n              color: var(--kendo-color-primary-darker);\n              text-decoration: underline;\n            }\n          }\n\n          .execution-details {\n            display: flex;\n            gap: 1rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            .execution-time {\n              font-weight: 600;\n            }\n\n            .execution-user {\n              color: var(--kendo-color-info);\n            }\n\n            .execution-duration {\n              font-weight: 600;\n            }\n          }\n        }\n\n        .execution-result {\n          flex-shrink: 0;\n        }\n\n        .execution-actions {\n          flex-shrink: 0;\n\n          button {\n            opacity: 0;\n            transition: opacity 0.2s ease;\n          }\n        }\n\n        &:hover .execution-actions button {\n          opacity: 1;\n        }\n      }\n\n      .empty-state {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 3rem 2rem;\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h5 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n// Responsive design\n@media (max-width: 1200px) {\n  .execution-monitoring {\n    .metrics-summary {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .monitoring-header .filters-row {\n      .filter-group {\n        flex-wrap: wrap;\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .execution-monitoring {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-summary {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 0.75rem;\n\n      .metric-card {\n        padding: 1rem;\n\n        .metric-content .metric-value {\n          font-size: 1.25rem;\n        }\n      }\n    }\n\n    .monitoring-header {\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 1rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .trends-section .trends-chart .trend-bars {\n      gap: 0.5rem;\n    }\n  }\n}"] }]