@memberjunction/ng-dashboards 2.42.0

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

@@ -0,0 +1,629 @@
+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';
+import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-indicators";
+import * as i2 from "@progress/kendo-angular-dropdowns";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@memberjunction/ng-container-directives";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.date;
+const _forTrack1 = ($index, $item) => $item.ID;
+function ExecutionMonitoringComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+} }
+function ExecutionMonitoringComponent_Conditional_75_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42)(1, "div", 47);
+    i0.ɵɵelement(2, "div", 48)(3, "div", 49);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 50);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const trend_r1 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("height", trend_r1.total > 0 ? trend_r1.successful / trend_r1.total * 100 : 0, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("height", trend_r1.total > 0 ? trend_r1.failed / trend_r1.total * 100 : 0, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(6, 6, trend_r1.date, "MMM d"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(trend_r1.total);
+} }
+function ExecutionMonitoringComponent_Conditional_75_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_75_For_2_Template, 9, 9, "div", 42, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 43)(4, "div", 44);
+    i0.ɵɵelement(5, "div", 45);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Successful");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 44);
+    i0.ɵɵelement(9, "div", 46);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11, "Failed");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.executionTrends);
+} }
+function ExecutionMonitoringComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No execution trends available");
+    i0.ɵɵelementEnd()();
+} }
+function ExecutionMonitoringComponent_Conditional_85_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_85_For_1_Template_div_click_0_listener() { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openExecution(execution_r4)); });
+    i0.ɵɵelementStart(1, "div", 54);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 55)(4, "div", 56);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_85_For_1_Template_div_click_4_listener($event) { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openAction(execution_r4.ActionID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 57)(7, "span", 58);
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 59);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 60);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "div", 61)(15, "kendo-chip", 62);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 63)(18, "button", 64);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_85_For_1_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const execution_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getResultIcon(execution_r4.ResultCode));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getActionName(execution_r4.ActionID), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 11, execution_r4.StartedAt, "MMM d, HH:mm:ss"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(execution_r4.UserID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getDuration(execution_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("themeColor", ctx_r1.getResultColor(execution_r4.ResultCode))("size", "small");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", execution_r4.ResultCode || "Unknown", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("fillMode", "flat")("icon", "more-vertical");
+} }
+function ExecutionMonitoringComponent_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ExecutionMonitoringComponent_Conditional_85_For_1_Template, 19, 14, "div", 52, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.filteredExecutions);
+} }
+function ExecutionMonitoringComponent_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(2, "h5");
+    i0.ɵɵtext(3, "No executions found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Try adjusting your filters or search terms");
+    i0.ɵɵelementEnd()();
+} }
+function ExecutionMonitoringComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "kendo-loader", 65);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    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();
+    }
+    ngOnInit() {
+        this.setupFilters();
+        this.loadData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupFilters() {
+        combineLatest([
+            this.searchTerm$.pipe(debounceTime(300), distinctUntilChanged()),
+            this.selectedResult$.pipe(distinctUntilChanged()),
+            this.selectedTimeRange$.pipe(distinctUntilChanged()),
+            this.selectedAction$.pipe(distinctUntilChanged())
+        ]).pipe(takeUntil(this.destroy$)).subscribe(() => {
+            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;
+            }
+        });
+    }
+    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');
+            }
+        });
+    }
+    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');
+            }
+        });
+    }
+    populateActionsMap(actions) {
+        this.actions.clear();
+        actions.forEach(action => {
+            this.actions.set(action.ID, action);
+        });
+    }
+    buildActionOptions(actions) {
+        this.actionOptions = [
+            { text: 'All Actions', value: 'all' },
+            ...actions.map(action => ({
+                text: action.Name,
+                value: action.ID
+            }))
+        ];
+    }
+    calculateMetrics() {
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        this.metrics = {
+            totalExecutions: this.executions.length,
+            successfulExecutions: this.executions.filter(e => e.ResultCode === 'Success').length,
+            failedExecutions: this.executions.filter(e => e.ResultCode && ['Failed', 'Error'].includes(e.ResultCode)).length,
+            averageDuration: this.calculateAverageDuration(),
+            executionsToday: this.executions.filter(e => new Date(e.StartedAt) >= today).length,
+            executionsThisWeek: this.executions.filter(e => new Date(e.StartedAt) >= weekAgo).length,
+            currentlyRunning: this.executions.filter(e => e.ResultCode === 'Running' || !e.EndedAt).length
+        };
+    }
+    calculateAverageDuration() {
+        const completedExecutions = this.executions.filter(e => e.StartedAt && e.EndedAt);
+        if (completedExecutions.length === 0)
+            return 0;
+        const totalDuration = completedExecutions.reduce((sum, execution) => {
+            const start = new Date(execution.StartedAt).getTime();
+            const end = new Date(execution.EndedAt).getTime();
+            return sum + (end - start);
+        }, 0);
+        return Math.round(totalDuration / completedExecutions.length / 1000); // Average in seconds
+    }
+    generateExecutionTrends() {
+        const trends = new Map();
+        const last7Days = Array.from({ length: 7 }, (_, i) => {
+            const date = new Date();
+            date.setDate(date.getDate() - i);
+            return date.toISOString().split('T')[0];
+        }).reverse();
+        // Initialize trends for last 7 days
+        last7Days.forEach(date => {
+            trends.set(date, {
+                date,
+                successful: 0,
+                failed: 0,
+                total: 0
+            });
+        });
+        // Populate trends with execution data
+        this.executions.forEach(execution => {
+            if (!execution.StartedAt)
+                return;
+            const date = new Date(execution.StartedAt).toISOString().split('T')[0];
+            const trend = trends.get(date);
+            if (trend) {
+                trend.total++;
+                if (execution.ResultCode === 'Success') {
+                    trend.successful++;
+                }
+                else if (execution.ResultCode && ['Failed', 'Error'].includes(execution.ResultCode)) {
+                    trend.failed++;
+                }
+            }
+        });
+        this.executionTrends = Array.from(trends.values());
+    }
+    applyFilters() {
+        let filtered = [...this.executions];
+        // Apply time range filter
+        const timeRange = this.selectedTimeRange$.value;
+        if (timeRange !== 'all') {
+            const cutoffDate = this.getTimeRangeCutoff(timeRange);
+            filtered = filtered.filter(e => e.StartedAt && new Date(e.StartedAt) >= cutoffDate);
+        }
+        // Apply result filter
+        const result = this.selectedResult$.value;
+        if (result !== 'all') {
+            if (result === 'Running') {
+                filtered = filtered.filter(e => !e.EndedAt || e.ResultCode === 'Running');
+            }
+            else {
+                filtered = filtered.filter(e => e.ResultCode === result);
+            }
+        }
+        // Apply action filter
+        const actionId = this.selectedAction$.value;
+        if (actionId !== 'all') {
+            filtered = filtered.filter(e => e.ActionID === actionId);
+        }
+        // Apply search filter
+        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)));
+            });
+        }
+        this.filteredExecutions = filtered;
+    }
+    getTimeRangeCutoff(timeRange) {
+        const now = new Date();
+        switch (timeRange) {
+            case '24hours':
+                return new Date(now.getTime() - 24 * 60 * 60 * 1000);
+            case '7days':
+                return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+            case '30days':
+                return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+            case '90days':
+                return new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
+            default:
+                return new Date(0);
+        }
+    }
+    onSearchChange(searchTerm) {
+        this.searchTerm$.next(searchTerm);
+    }
+    onResultFilterChange(result) {
+        this.selectedResult$.next(result);
+    }
+    onTimeRangeChange(timeRange) {
+        this.selectedTimeRange$.next(timeRange);
+    }
+    onActionFilterChange(actionId) {
+        this.selectedAction$.next(actionId);
+    }
+    openExecution(execution) {
+        this.openEntityRecord.emit({
+            entityName: 'Action Execution Logs',
+            recordId: execution.ID
+        });
+    }
+    openAction(actionId) {
+        this.openEntityRecord.emit({
+            entityName: 'Actions',
+            recordId: actionId
+        });
+    }
+    getActionName(actionId) {
+        var _a;
+        return ((_a = this.actions.get(actionId)) === null || _a === void 0 ? void 0 : _a.Name) || `Action ${actionId}`;
+    }
+    getResultColor(resultCode) {
+        if (!resultCode)
+            return 'info';
+        switch (resultCode.toLowerCase()) {
+            case 'success': return 'success';
+            case 'failed':
+            case 'error': return 'error';
+            case 'running': return 'warning';
+            default: return 'info';
+        }
+    }
+    getResultIcon(resultCode) {
+        if (!resultCode)
+            return 'fa-solid fa-question';
+        switch (resultCode.toLowerCase()) {
+            case 'success': return 'fa-solid fa-check-circle';
+            case 'failed':
+            case 'error': return 'fa-solid fa-exclamation-circle';
+            case 'running': return 'fa-solid fa-spinner fa-spin';
+            default: return 'fa-solid fa-info-circle';
+        }
+    }
+    getDuration(execution) {
+        if (!execution.StartedAt || !execution.EndedAt) {
+            return execution.EndedAt ? 'Unknown' : 'Running';
+        }
+        const start = new Date(execution.StartedAt).getTime();
+        const end = new Date(execution.EndedAt).getTime();
+        const duration = Math.round((end - start) / 1000);
+        if (duration < 60)
+            return `${duration}s`;
+        if (duration < 3600)
+            return `${Math.round(duration / 60)}m`;
+        return `${Math.round(duration / 3600)}h`;
+    }
+    getSuccessRate() {
+        if (this.metrics.totalExecutions === 0)
+            return 0;
+        return Math.round((this.metrics.successfulExecutions / this.metrics.totalExecutions) * 100);
+    }
+    refreshData() {
+        this.loadData();
+    }
+    // Metric card click handlers
+    onTotalExecutionsClick() {
+        this.showExecutionsListView.emit();
+    }
+    onSuccessRateClick() {
+        this.selectedResult$.next('Success');
+    }
+    onFailedExecutionsClick() {
+        this.selectedResult$.next('Failed');
+    }
+    onRunningExecutionsClick() {
+        this.selectedResult$.next('Running');
+    }
+}
+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}"] }]
+    }], () => [], { openEntityRecord: [{
+            type: Output
+        }], showExecutionsListView: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 29 }); })();
+//# sourceMappingURL=execution-monitoring.component.js.map