@memberjunction/ng-dashboards 5.35.0 → 5.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AI/components/agents/agent-configuration.component.js +3 -3
- package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
- package/dist/AI/components/analytics/ai-analytics-resource.component.d.ts +22 -1
- package/dist/AI/components/analytics/ai-analytics-resource.component.d.ts.map +1 -1
- package/dist/AI/components/analytics/ai-analytics-resource.component.js +157 -137
- package/dist/AI/components/analytics/ai-analytics-resource.component.js.map +1 -1
- package/dist/AI/components/autotagging/autotagging-pipeline-resource.component.d.ts +28 -0
- package/dist/AI/components/autotagging/autotagging-pipeline-resource.component.d.ts.map +1 -1
- package/dist/AI/components/autotagging/autotagging-pipeline-resource.component.js +2075 -2068
- package/dist/AI/components/autotagging/autotagging-pipeline-resource.component.js.map +1 -1
- package/dist/AI/components/models/model-management.component.js +4 -4
- package/dist/AI/components/models/model-management.component.js.map +1 -1
- package/dist/AI/components/prompts/prompt-management.component.js +3 -3
- package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
- package/dist/AI/components/tags/tags-resource.component.d.ts +15 -0
- package/dist/AI/components/tags/tags-resource.component.d.ts.map +1 -1
- package/dist/AI/components/tags/tags-resource.component.js +1411 -1424
- package/dist/AI/components/tags/tags-resource.component.js.map +1 -1
- package/dist/APIKeys/api-keys-resource.component.d.ts +12 -8
- package/dist/APIKeys/api-keys-resource.component.d.ts.map +1 -1
- package/dist/APIKeys/api-keys-resource.component.js +329 -371
- package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
- package/dist/Actions/components/actions-overview.component.js +137 -142
- package/dist/Actions/components/actions-overview.component.js.map +1 -1
- package/dist/Actions/components/execution-monitoring.component.js +111 -116
- package/dist/Actions/components/execution-monitoring.component.js.map +1 -1
- package/dist/Admin/admin-data-schema.component.js +13 -65
- package/dist/Admin/admin-data-schema.component.js.map +1 -1
- package/dist/Admin/admin-dev-tools-resource.component.js +13 -65
- package/dist/Admin/admin-dev-tools-resource.component.js.map +1 -1
- package/dist/Admin/admin-identity-access.component.js +13 -65
- package/dist/Admin/admin-identity-access.component.js.map +1 -1
- package/dist/Admin/admin-monitoring.component.js +13 -65
- package/dist/Admin/admin-monitoring.component.js.map +1 -1
- package/dist/Admin/base-admin-container.component.d.ts +9 -7
- package/dist/Admin/base-admin-container.component.d.ts.map +1 -1
- package/dist/Admin/base-admin-container.component.js +26 -17
- package/dist/Admin/base-admin-container.component.js.map +1 -1
- package/dist/ApplicationRoles/application-roles-resource.component.js +74 -67
- package/dist/ApplicationRoles/application-roles-resource.component.js.map +1 -1
- package/dist/Communication/communication-new-message-resource.component.d.ts +93 -0
- package/dist/Communication/communication-new-message-resource.component.d.ts.map +1 -0
- package/dist/Communication/communication-new-message-resource.component.js +661 -0
- package/dist/Communication/communication-new-message-resource.component.js.map +1 -0
- package/dist/Credentials/components/credentials-categories-resource.component.js +152 -159
- package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-types-resource.component.js +151 -155
- package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
- package/dist/DatabaseDesigner/components/database-designer-dashboard.component.js +20 -21
- package/dist/DatabaseDesigner/components/database-designer-dashboard.component.js.map +1 -1
- package/dist/DatabaseDesigner/components/entity-list.component.d.ts +2 -0
- package/dist/DatabaseDesigner/components/entity-list.component.d.ts.map +1 -1
- package/dist/DatabaseDesigner/components/entity-list.component.js +131 -125
- package/dist/DatabaseDesigner/components/entity-list.component.js.map +1 -1
- package/dist/DatabaseDesigner/database-designer-dashboards.module.d.ts +1 -1
- package/dist/DatabaseDesigner/database-designer-dashboards.module.d.ts.map +1 -1
- package/dist/DatabaseDesigner/database-designer-dashboards.module.js +7 -1
- package/dist/DatabaseDesigner/database-designer-dashboards.module.js.map +1 -1
- package/dist/DevTools/app-state-inspector.component.d.ts +5 -0
- package/dist/DevTools/app-state-inspector.component.d.ts.map +1 -1
- package/dist/DevTools/app-state-inspector.component.js +46 -72
- package/dist/DevTools/app-state-inspector.component.js.map +1 -1
- package/dist/DevTools/class-registry.component.js +88 -100
- package/dist/DevTools/class-registry.component.js.map +1 -1
- package/dist/DevTools/event-monitor.component.js +158 -168
- package/dist/DevTools/event-monitor.component.js.map +1 -1
- package/dist/DevTools/graphql-console.component.js +257 -264
- package/dist/DevTools/graphql-console.component.js.map +1 -1
- package/dist/DevTools/layout-inspector.component.d.ts +5 -0
- package/dist/DevTools/layout-inspector.component.d.ts.map +1 -1
- package/dist/DevTools/layout-inspector.component.js +46 -64
- package/dist/DevTools/layout-inspector.component.js.map +1 -1
- package/dist/DevTools/lazy-module-status.component.js +75 -84
- package/dist/DevTools/lazy-module-status.component.js.map +1 -1
- package/dist/DevTools/settings-explorer.component.js +76 -85
- package/dist/DevTools/settings-explorer.component.js.map +1 -1
- package/dist/EntityAdmin/entity-admin-dashboard.component.d.ts +2 -0
- package/dist/EntityAdmin/entity-admin-dashboard.component.d.ts.map +1 -1
- package/dist/EntityAdmin/entity-admin-dashboard.component.js +7 -3
- package/dist/EntityAdmin/entity-admin-dashboard.component.js.map +1 -1
- package/dist/Integration/components/activity/activity.component.js +97 -99
- package/dist/Integration/components/activity/activity.component.js.map +1 -1
- package/dist/Integration/components/connections/connections.component.js +842 -855
- package/dist/Integration/components/connections/connections.component.js.map +1 -1
- package/dist/Integration/components/pipelines/pipelines.component.js +502 -517
- package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.js +78 -89
- package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
- package/dist/KnowledgeHub/components/analytics/analytics-resource.component.d.ts +5 -0
- package/dist/KnowledgeHub/components/analytics/analytics-resource.component.d.ts.map +1 -1
- package/dist/KnowledgeHub/components/analytics/analytics-resource.component.js +1120 -1128
- package/dist/KnowledgeHub/components/analytics/analytics-resource.component.js.map +1 -1
- package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.d.ts +11 -0
- package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.d.ts.map +1 -1
- package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.js +606 -661
- package/dist/KnowledgeHub/components/config/knowledge-config-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.d.ts +102 -0
- package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.js +1179 -504
- package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-operations-resource.component.d.ts +133 -3
- package/dist/Lists/components/lists-operations-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-operations-resource.component.js +1527 -327
- package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-shared-with-me-resource.component.d.ts +29 -0
- package/dist/Lists/components/lists-shared-with-me-resource.component.d.ts.map +1 -0
- package/dist/Lists/components/lists-shared-with-me-resource.component.js +77 -0
- package/dist/Lists/components/lists-shared-with-me-resource.component.js.map +1 -0
- package/dist/Lists/components/venn-diagram/venn-diagram.component.d.ts +6 -0
- package/dist/Lists/components/venn-diagram/venn-diagram.component.d.ts.map +1 -1
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js +35 -7
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
- package/dist/Lists/index.d.ts +1 -0
- package/dist/Lists/index.d.ts.map +1 -1
- package/dist/Lists/index.js +1 -0
- package/dist/Lists/index.js.map +1 -1
- package/dist/Lists/services/list-set-operations.service.d.ts +93 -2
- package/dist/Lists/services/list-set-operations.service.d.ts.map +1 -1
- package/dist/Lists/services/list-set-operations.service.js +236 -10
- package/dist/Lists/services/list-set-operations.service.js.map +1 -1
- package/dist/MCP/mcp-dashboard.component.js +19 -19
- package/dist/MCP/mcp-dashboard.component.js.map +1 -1
- package/dist/Scheduling/scheduling-dashboard.component.js +58 -60
- package/dist/Scheduling/scheduling-dashboard.component.js.map +1 -1
- package/dist/SystemDiagnostics/system-diagnostics.component.d.ts +13 -3
- package/dist/SystemDiagnostics/system-diagnostics.component.d.ts.map +1 -1
- package/dist/SystemDiagnostics/system-diagnostics.component.js +1007 -1252
- package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
- package/dist/Testing/components/testing-explorer.component.d.ts +31 -6
- package/dist/Testing/components/testing-explorer.component.d.ts.map +1 -1
- package/dist/Testing/components/testing-explorer.component.js +543 -629
- package/dist/Testing/components/testing-explorer.component.js.map +1 -1
- package/dist/Testing/testing-dashboard.component.js +50 -49
- package/dist/Testing/testing-dashboard.component.js.map +1 -1
- package/dist/ai-dashboards.module.d.ts +1 -1
- package/dist/ai-dashboards.module.d.ts.map +1 -1
- package/dist/ai-dashboards.module.js +16 -1
- package/dist/ai-dashboards.module.js.map +1 -1
- package/dist/communication-dashboards.module.d.ts +9 -7
- package/dist/communication-dashboards.module.d.ts.map +1 -1
- package/dist/communication-dashboards.module.js +13 -4
- package/dist/communication-dashboards.module.js.map +1 -1
- package/dist/core-dashboards.module.d.ts +1 -1
- package/dist/core-dashboards.module.d.ts.map +1 -1
- package/dist/core-dashboards.module.js +16 -1
- package/dist/core-dashboards.module.js.map +1 -1
- package/dist/lists-dashboards.module.d.ts +10 -9
- package/dist/lists-dashboards.module.d.ts.map +1 -1
- package/dist/lists-dashboards.module.js +13 -2
- package/dist/lists-dashboards.module.js.map +1 -1
- package/dist/public-api.d.ts +1 -0
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +1 -0
- package/dist/public-api.js.map +1 -1
- package/dist/testing-dashboards.module.d.ts +1 -1
- package/dist/testing-dashboards.module.d.ts.map +1 -1
- package/dist/testing-dashboards.module.js +13 -1
- package/dist/testing-dashboards.module.js.map +1 -1
- package/package.json +53 -52
|
@@ -16,15 +16,15 @@ import * as i2 from "@memberjunction/ng-shared-generic";
|
|
|
16
16
|
import * as i3 from "@angular/common";
|
|
17
17
|
const _forTrack0 = ($index, $item) => $item.date;
|
|
18
18
|
const _forTrack1 = ($index, $item) => $item.ID;
|
|
19
|
-
function
|
|
20
|
-
i0.ɵɵelementStart(0, "div",
|
|
21
|
-
i0.ɵɵelement(2, "div",
|
|
19
|
+
function ActionExecutionMonitoringComponent_Conditional_69_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
20
|
+
i0.ɵɵelementStart(0, "div", 38)(1, "div", 43);
|
|
21
|
+
i0.ɵɵelement(2, "div", 44)(3, "div", 45);
|
|
22
22
|
i0.ɵɵelementEnd();
|
|
23
|
-
i0.ɵɵelementStart(4, "div",
|
|
23
|
+
i0.ɵɵelementStart(4, "div", 46);
|
|
24
24
|
i0.ɵɵtext(5);
|
|
25
25
|
i0.ɵɵpipe(6, "date");
|
|
26
26
|
i0.ɵɵelementEnd();
|
|
27
|
-
i0.ɵɵelementStart(7, "div",
|
|
27
|
+
i0.ɵɵelementStart(7, "div", 47);
|
|
28
28
|
i0.ɵɵtext(8);
|
|
29
29
|
i0.ɵɵelementEnd()();
|
|
30
30
|
} if (rf & 2) {
|
|
@@ -38,17 +38,17 @@ function ActionExecutionMonitoringComponent_Conditional_71_For_2_Template(rf, ct
|
|
|
38
38
|
i0.ɵɵadvance(3);
|
|
39
39
|
i0.ɵɵtextInterpolate(trend_r1.total);
|
|
40
40
|
} }
|
|
41
|
-
function
|
|
42
|
-
i0.ɵɵelementStart(0, "div",
|
|
43
|
-
i0.ɵɵrepeaterCreate(1,
|
|
41
|
+
function ActionExecutionMonitoringComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
|
|
42
|
+
i0.ɵɵelementStart(0, "div", 37);
|
|
43
|
+
i0.ɵɵrepeaterCreate(1, ActionExecutionMonitoringComponent_Conditional_69_For_2_Template, 9, 9, "div", 38, _forTrack0);
|
|
44
44
|
i0.ɵɵelementEnd();
|
|
45
|
-
i0.ɵɵelementStart(3, "div",
|
|
46
|
-
i0.ɵɵelement(5, "div",
|
|
45
|
+
i0.ɵɵelementStart(3, "div", 39)(4, "div", 40);
|
|
46
|
+
i0.ɵɵelement(5, "div", 41);
|
|
47
47
|
i0.ɵɵelementStart(6, "span");
|
|
48
48
|
i0.ɵɵtext(7, "Successful");
|
|
49
49
|
i0.ɵɵelementEnd()();
|
|
50
|
-
i0.ɵɵelementStart(8, "div",
|
|
51
|
-
i0.ɵɵelement(9, "div",
|
|
50
|
+
i0.ɵɵelementStart(8, "div", 40);
|
|
51
|
+
i0.ɵɵelement(9, "div", 42);
|
|
52
52
|
i0.ɵɵelementStart(10, "span");
|
|
53
53
|
i0.ɵɵtext(11, "Failed");
|
|
54
54
|
i0.ɵɵelementEnd()()();
|
|
@@ -57,40 +57,40 @@ function ActionExecutionMonitoringComponent_Conditional_71_Template(rf, ctx) { i
|
|
|
57
57
|
i0.ɵɵadvance();
|
|
58
58
|
i0.ɵɵrepeater(ctx_r1.executionTrends);
|
|
59
59
|
} }
|
|
60
|
-
function
|
|
61
|
-
i0.ɵɵelementStart(0, "div",
|
|
62
|
-
i0.ɵɵelement(1, "i",
|
|
60
|
+
function ActionExecutionMonitoringComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
|
|
61
|
+
i0.ɵɵelementStart(0, "div", 30);
|
|
62
|
+
i0.ɵɵelement(1, "i", 28);
|
|
63
63
|
i0.ɵɵelementStart(2, "p");
|
|
64
64
|
i0.ɵɵtext(3, "No execution trends available");
|
|
65
65
|
i0.ɵɵelementEnd()();
|
|
66
66
|
} }
|
|
67
|
-
function
|
|
67
|
+
function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
68
68
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
69
|
-
i0.ɵɵelementStart(0, "div",
|
|
70
|
-
i0.ɵɵlistener("click", function
|
|
71
|
-
i0.ɵɵelementStart(1, "div",
|
|
69
|
+
i0.ɵɵelementStart(0, "div", 49);
|
|
70
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_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)); });
|
|
71
|
+
i0.ɵɵelementStart(1, "div", 50);
|
|
72
72
|
i0.ɵɵelement(2, "i");
|
|
73
73
|
i0.ɵɵelementEnd();
|
|
74
|
-
i0.ɵɵelementStart(3, "div",
|
|
75
|
-
i0.ɵɵlistener("click", function
|
|
74
|
+
i0.ɵɵelementStart(3, "div", 51)(4, "div", 52);
|
|
75
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_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()); });
|
|
76
76
|
i0.ɵɵtext(5);
|
|
77
77
|
i0.ɵɵelementEnd();
|
|
78
|
-
i0.ɵɵelementStart(6, "div",
|
|
78
|
+
i0.ɵɵelementStart(6, "div", 53)(7, "span", 54);
|
|
79
79
|
i0.ɵɵtext(8);
|
|
80
80
|
i0.ɵɵpipe(9, "date");
|
|
81
81
|
i0.ɵɵelementEnd();
|
|
82
|
-
i0.ɵɵelementStart(10, "span",
|
|
82
|
+
i0.ɵɵelementStart(10, "span", 55);
|
|
83
83
|
i0.ɵɵtext(11);
|
|
84
84
|
i0.ɵɵelementEnd();
|
|
85
|
-
i0.ɵɵelementStart(12, "span",
|
|
85
|
+
i0.ɵɵelementStart(12, "span", 56);
|
|
86
86
|
i0.ɵɵtext(13);
|
|
87
87
|
i0.ɵɵelementEnd()()();
|
|
88
|
-
i0.ɵɵelementStart(14, "div",
|
|
88
|
+
i0.ɵɵelementStart(14, "div", 57)(15, "span", 58);
|
|
89
89
|
i0.ɵɵtext(16);
|
|
90
90
|
i0.ɵɵelementEnd()();
|
|
91
|
-
i0.ɵɵelementStart(17, "div",
|
|
92
|
-
i0.ɵɵlistener("click", function
|
|
93
|
-
i0.ɵɵelement(19, "i",
|
|
91
|
+
i0.ɵɵelementStart(17, "div", 59)(18, "button", 60);
|
|
92
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
93
|
+
i0.ɵɵelement(19, "i", 61);
|
|
94
94
|
i0.ɵɵelementEnd()()();
|
|
95
95
|
} if (rf & 2) {
|
|
96
96
|
const execution_r4 = ctx.$implicit;
|
|
@@ -110,15 +110,15 @@ function ActionExecutionMonitoringComponent_Conditional_81_For_1_Template(rf, ct
|
|
|
110
110
|
i0.ɵɵadvance();
|
|
111
111
|
i0.ɵɵtextInterpolate1(" ", execution_r4.ResultCode || "Unknown", " ");
|
|
112
112
|
} }
|
|
113
|
-
function
|
|
114
|
-
i0.ɵɵrepeaterCreate(0,
|
|
113
|
+
function ActionExecutionMonitoringComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
|
|
114
|
+
i0.ɵɵrepeaterCreate(0, ActionExecutionMonitoringComponent_Conditional_79_For_1_Template, 20, 11, "div", 48, _forTrack1);
|
|
115
115
|
} if (rf & 2) {
|
|
116
116
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
117
117
|
i0.ɵɵrepeater(ctx_r1.filteredExecutions);
|
|
118
118
|
} }
|
|
119
|
-
function
|
|
120
|
-
i0.ɵɵelementStart(0, "div",
|
|
121
|
-
i0.ɵɵelement(1, "i",
|
|
119
|
+
function ActionExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
|
|
120
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
121
|
+
i0.ɵɵelement(1, "i", 62);
|
|
122
122
|
i0.ɵɵelementStart(2, "h5");
|
|
123
123
|
i0.ɵɵtext(3, "No executions found");
|
|
124
124
|
i0.ɵɵelementEnd();
|
|
@@ -126,9 +126,9 @@ function ActionExecutionMonitoringComponent_Conditional_82_Template(rf, ctx) { i
|
|
|
126
126
|
i0.ɵɵtext(5, "Try adjusting your filters or search terms");
|
|
127
127
|
i0.ɵɵelementEnd()();
|
|
128
128
|
} }
|
|
129
|
-
function
|
|
130
|
-
i0.ɵɵelementStart(0, "div",
|
|
131
|
-
i0.ɵɵelement(1, "mj-loading",
|
|
129
|
+
function ActionExecutionMonitoringComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
|
|
130
|
+
i0.ɵɵelementStart(0, "div", 36);
|
|
131
|
+
i0.ɵɵelement(1, "mj-loading", 63);
|
|
132
132
|
i0.ɵɵelementEnd();
|
|
133
133
|
} if (rf & 2) {
|
|
134
134
|
i0.ɵɵadvance();
|
|
@@ -510,112 +510,107 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
|
|
|
510
510
|
return 'fa-solid fa-chart-line';
|
|
511
511
|
}
|
|
512
512
|
static ɵfac = function ActionExecutionMonitoringComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
513
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls:
|
|
514
|
-
i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
|
|
515
|
-
i0.ɵɵ
|
|
516
|
-
i0.ɵɵ
|
|
517
|
-
i0.ɵɵ
|
|
518
|
-
i0.ɵɵlistener("ClearAllRequested", function ActionExecutionMonitoringComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.resetFilters(); });
|
|
519
|
-
i0.ɵɵelementStart(6, "mj-filter-panel", 5);
|
|
520
|
-
i0.ɵɵlistener("ValuesChange", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_Reset_6_listener() { return ctx.resetFilters(); });
|
|
513
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 82, vars: 18, consts: [["Title", "Execution Monitor", "Icon", "fa-solid fa-chart-line", "Subtitle", "Action execution history, latency, and error rates"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "Clicked"], ["toolbar", ""], ["Placeholder", "Search executions...", 3, "ValueChange", "Value"], [1, "execution-monitoring"], [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, "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"], [1, "status-chip"], [1, "execution-actions"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "fa-solid", "fa-search"], ["size", "medium", 3, "showText"]], template: function ActionExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
|
|
514
|
+
i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "mj-filter-popover", 2);
|
|
515
|
+
i0.ɵɵlistener("ClearAllRequested", function ActionExecutionMonitoringComponent_Template_mj_filter_popover_ClearAllRequested_3_listener() { return ctx.resetFilters(); });
|
|
516
|
+
i0.ɵɵelementStart(4, "mj-filter-panel", 3);
|
|
517
|
+
i0.ɵɵlistener("ValuesChange", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_ValuesChange_4_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_Reset_4_listener() { return ctx.resetFilters(); });
|
|
521
518
|
i0.ɵɵelementEnd()();
|
|
522
|
-
i0.ɵɵelementStart(
|
|
523
|
-
i0.ɵɵlistener("Clicked", function
|
|
519
|
+
i0.ɵɵelementStart(5, "mj-refresh-button", 4);
|
|
520
|
+
i0.ɵɵlistener("Clicked", function ActionExecutionMonitoringComponent_Template_mj_refresh_button_Clicked_5_listener() { return ctx.refreshData(); });
|
|
524
521
|
i0.ɵɵelementEnd()();
|
|
525
|
-
i0.ɵɵelementStart(
|
|
526
|
-
i0.ɵɵlistener("ValueChange", function
|
|
522
|
+
i0.ɵɵelementStart(6, "div", 5)(7, "mj-page-search", 6);
|
|
523
|
+
i0.ɵɵlistener("ValueChange", function ActionExecutionMonitoringComponent_Template_mj_page_search_ValueChange_7_listener($event) { return ctx.onSearchChange($event); });
|
|
527
524
|
i0.ɵɵelementEnd()()();
|
|
528
|
-
i0.ɵɵelementStart(
|
|
529
|
-
i0.ɵɵlistener("click", function
|
|
530
|
-
i0.ɵɵelementStart(
|
|
531
|
-
i0.ɵɵelement(
|
|
525
|
+
i0.ɵɵelementStart(8, "mj-page-body")(9, "div", 7)(10, "div", 8)(11, "div", 9);
|
|
526
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_11_listener() { return ctx.onTotalExecutionsClick(); });
|
|
527
|
+
i0.ɵɵelementStart(12, "div", 10);
|
|
528
|
+
i0.ɵɵelement(13, "i", 11);
|
|
532
529
|
i0.ɵɵelementEnd();
|
|
533
|
-
i0.ɵɵelementStart(
|
|
534
|
-
i0.ɵɵtext(
|
|
530
|
+
i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
|
|
531
|
+
i0.ɵɵtext(16);
|
|
535
532
|
i0.ɵɵelementEnd();
|
|
536
|
-
i0.ɵɵelementStart(
|
|
537
|
-
i0.ɵɵtext(
|
|
533
|
+
i0.ɵɵelementStart(17, "div", 14);
|
|
534
|
+
i0.ɵɵtext(18, "Total Executions");
|
|
538
535
|
i0.ɵɵelementEnd()()();
|
|
539
|
-
i0.ɵɵelementStart(
|
|
540
|
-
i0.ɵɵlistener("click", function
|
|
541
|
-
i0.ɵɵelementStart(
|
|
542
|
-
i0.ɵɵelement(
|
|
536
|
+
i0.ɵɵelementStart(19, "div", 15);
|
|
537
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_19_listener() { return ctx.onSuccessRateClick(); });
|
|
538
|
+
i0.ɵɵelementStart(20, "div", 10);
|
|
539
|
+
i0.ɵɵelement(21, "i", 16);
|
|
543
540
|
i0.ɵɵelementEnd();
|
|
544
|
-
i0.ɵɵelementStart(
|
|
545
|
-
i0.ɵɵtext(
|
|
541
|
+
i0.ɵɵelementStart(22, "div", 12)(23, "div", 13);
|
|
542
|
+
i0.ɵɵtext(24);
|
|
546
543
|
i0.ɵɵelementEnd();
|
|
547
|
-
i0.ɵɵelementStart(
|
|
548
|
-
i0.ɵɵtext(
|
|
544
|
+
i0.ɵɵelementStart(25, "div", 14);
|
|
545
|
+
i0.ɵɵtext(26, "Success Rate");
|
|
549
546
|
i0.ɵɵelementEnd();
|
|
550
|
-
i0.ɵɵelementStart(
|
|
551
|
-
i0.ɵɵtext(
|
|
547
|
+
i0.ɵɵelementStart(27, "div", 17);
|
|
548
|
+
i0.ɵɵtext(28);
|
|
552
549
|
i0.ɵɵelementEnd()()();
|
|
553
|
-
i0.ɵɵelementStart(
|
|
554
|
-
i0.ɵɵlistener("click", function
|
|
555
|
-
i0.ɵɵelementStart(
|
|
556
|
-
i0.ɵɵelement(
|
|
550
|
+
i0.ɵɵelementStart(29, "div", 18);
|
|
551
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_29_listener() { return ctx.onFailedExecutionsClick(); });
|
|
552
|
+
i0.ɵɵelementStart(30, "div", 10);
|
|
553
|
+
i0.ɵɵelement(31, "i", 19);
|
|
557
554
|
i0.ɵɵelementEnd();
|
|
558
|
-
i0.ɵɵelementStart(
|
|
559
|
-
i0.ɵɵtext(
|
|
555
|
+
i0.ɵɵelementStart(32, "div", 12)(33, "div", 13);
|
|
556
|
+
i0.ɵɵtext(34);
|
|
560
557
|
i0.ɵɵelementEnd();
|
|
561
|
-
i0.ɵɵelementStart(
|
|
562
|
-
i0.ɵɵtext(
|
|
558
|
+
i0.ɵɵelementStart(35, "div", 14);
|
|
559
|
+
i0.ɵɵtext(36, "Failed Executions");
|
|
563
560
|
i0.ɵɵelementEnd()()();
|
|
564
|
-
i0.ɵɵelementStart(
|
|
565
|
-
i0.ɵɵelement(
|
|
561
|
+
i0.ɵɵelementStart(37, "div", 20)(38, "div", 10);
|
|
562
|
+
i0.ɵɵelement(39, "i", 21);
|
|
566
563
|
i0.ɵɵelementEnd();
|
|
567
|
-
i0.ɵɵelementStart(
|
|
568
|
-
i0.ɵɵtext(
|
|
564
|
+
i0.ɵɵelementStart(40, "div", 12)(41, "div", 13);
|
|
565
|
+
i0.ɵɵtext(42);
|
|
569
566
|
i0.ɵɵelementEnd();
|
|
570
|
-
i0.ɵɵelementStart(
|
|
571
|
-
i0.ɵɵtext(
|
|
567
|
+
i0.ɵɵelementStart(43, "div", 14);
|
|
568
|
+
i0.ɵɵtext(44, "Avg Duration");
|
|
572
569
|
i0.ɵɵelementEnd()()();
|
|
573
|
-
i0.ɵɵelementStart(
|
|
574
|
-
i0.ɵɵelement(
|
|
570
|
+
i0.ɵɵelementStart(45, "div", 22)(46, "div", 10);
|
|
571
|
+
i0.ɵɵelement(47, "i", 23);
|
|
575
572
|
i0.ɵɵelementEnd();
|
|
576
|
-
i0.ɵɵelementStart(
|
|
577
|
-
i0.ɵɵtext(
|
|
573
|
+
i0.ɵɵelementStart(48, "div", 12)(49, "div", 13);
|
|
574
|
+
i0.ɵɵtext(50);
|
|
578
575
|
i0.ɵɵelementEnd();
|
|
579
|
-
i0.ɵɵelementStart(
|
|
580
|
-
i0.ɵɵtext(
|
|
576
|
+
i0.ɵɵelementStart(51, "div", 14);
|
|
577
|
+
i0.ɵɵtext(52, "Today");
|
|
581
578
|
i0.ɵɵelementEnd();
|
|
582
|
-
i0.ɵɵelementStart(
|
|
583
|
-
i0.ɵɵtext(
|
|
579
|
+
i0.ɵɵelementStart(53, "div", 17);
|
|
580
|
+
i0.ɵɵtext(54);
|
|
584
581
|
i0.ɵɵelementEnd()()();
|
|
585
|
-
i0.ɵɵelementStart(
|
|
586
|
-
i0.ɵɵlistener("click", function
|
|
587
|
-
i0.ɵɵelementStart(
|
|
588
|
-
i0.ɵɵelement(
|
|
582
|
+
i0.ɵɵelementStart(55, "div", 24);
|
|
583
|
+
i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_55_listener() { return ctx.onRunningExecutionsClick(); });
|
|
584
|
+
i0.ɵɵelementStart(56, "div", 10);
|
|
585
|
+
i0.ɵɵelement(57, "i", 25);
|
|
589
586
|
i0.ɵɵelementEnd();
|
|
590
|
-
i0.ɵɵelementStart(
|
|
591
|
-
i0.ɵɵtext(
|
|
587
|
+
i0.ɵɵelementStart(58, "div", 12)(59, "div", 13);
|
|
588
|
+
i0.ɵɵtext(60);
|
|
592
589
|
i0.ɵɵelementEnd();
|
|
593
|
-
i0.ɵɵelementStart(
|
|
594
|
-
i0.ɵɵtext(
|
|
590
|
+
i0.ɵɵelementStart(61, "div", 14);
|
|
591
|
+
i0.ɵɵtext(62, "Currently Running");
|
|
595
592
|
i0.ɵɵelementEnd()()()();
|
|
596
|
-
i0.ɵɵelementStart(
|
|
597
|
-
i0.ɵɵelement(
|
|
598
|
-
i0.ɵɵtext(
|
|
593
|
+
i0.ɵɵelementStart(63, "div", 26)(64, "div", 27)(65, "h4");
|
|
594
|
+
i0.ɵɵelement(66, "i", 28);
|
|
595
|
+
i0.ɵɵtext(67, " 7-Day Execution Trends");
|
|
599
596
|
i0.ɵɵelementEnd()();
|
|
600
|
-
i0.ɵɵelementStart(
|
|
601
|
-
i0.ɵɵconditionalCreate(
|
|
597
|
+
i0.ɵɵelementStart(68, "div", 29);
|
|
598
|
+
i0.ɵɵconditionalCreate(69, ActionExecutionMonitoringComponent_Conditional_69_Template, 12, 0)(70, ActionExecutionMonitoringComponent_Conditional_70_Template, 4, 0, "div", 30);
|
|
602
599
|
i0.ɵɵelementEnd()();
|
|
603
|
-
i0.ɵɵelementStart(
|
|
604
|
-
i0.ɵɵelement(
|
|
605
|
-
i0.ɵɵtext(
|
|
600
|
+
i0.ɵɵelementStart(71, "div", 31)(72, "div", 27)(73, "h4");
|
|
601
|
+
i0.ɵɵelement(74, "i", 32);
|
|
602
|
+
i0.ɵɵtext(75, " Recent Executions");
|
|
606
603
|
i0.ɵɵelementEnd();
|
|
607
|
-
i0.ɵɵelementStart(
|
|
608
|
-
i0.ɵɵtext(
|
|
604
|
+
i0.ɵɵelementStart(76, "div", 33);
|
|
605
|
+
i0.ɵɵtext(77);
|
|
609
606
|
i0.ɵɵelementEnd()();
|
|
610
|
-
i0.ɵɵelementStart(
|
|
611
|
-
i0.ɵɵconditionalCreate(
|
|
607
|
+
i0.ɵɵelementStart(78, "div", 34);
|
|
608
|
+
i0.ɵɵconditionalCreate(79, ActionExecutionMonitoringComponent_Conditional_79_Template, 2, 0)(80, ActionExecutionMonitoringComponent_Conditional_80_Template, 6, 0, "div", 35);
|
|
612
609
|
i0.ɵɵelementEnd()();
|
|
613
|
-
i0.ɵɵconditionalCreate(
|
|
610
|
+
i0.ɵɵconditionalCreate(81, ActionExecutionMonitoringComponent_Conditional_81_Template, 2, 1, "div", 36);
|
|
614
611
|
i0.ɵɵelementEnd()()();
|
|
615
612
|
} if (rf & 2) {
|
|
616
613
|
i0.ɵɵadvance(3);
|
|
617
|
-
i0.ɵɵproperty("Count", ctx.metrics.totalExecutions);
|
|
618
|
-
i0.ɵɵadvance(2);
|
|
619
614
|
i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
|
|
620
615
|
i0.ɵɵadvance();
|
|
621
616
|
i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues);
|
|
@@ -638,14 +633,14 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
|
|
|
638
633
|
i0.ɵɵadvance(6);
|
|
639
634
|
i0.ɵɵtextInterpolate(ctx.metrics.currentlyRunning);
|
|
640
635
|
i0.ɵɵadvance(9);
|
|
641
|
-
i0.ɵɵconditional(ctx.executionTrends.length > 0 ?
|
|
636
|
+
i0.ɵɵconditional(ctx.executionTrends.length > 0 ? 69 : 70);
|
|
642
637
|
i0.ɵɵadvance(8);
|
|
643
638
|
i0.ɵɵtextInterpolate1("", ctx.filteredExecutions.length, " executions");
|
|
644
639
|
i0.ɵɵadvance(2);
|
|
645
|
-
i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ?
|
|
640
|
+
i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 79 : 80);
|
|
646
641
|
i0.ɵɵadvance(2);
|
|
647
|
-
i0.ɵɵconditional(ctx.isLoading ?
|
|
648
|
-
} }, dependencies: [i1.MJButtonDirective, i1.MJPageBodyComponent, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageSearchComponent, i1.MJFilterPopoverComponent, i1.MJFilterPanelComponent, i1.MJStatBadgeComponent, i1.MJRefreshButtonComponent, i2.LoadingComponent, i3.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\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.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-detail[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.total[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.error[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.duration[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.activity[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.running[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] {\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(--mj-border-default);\n position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-total[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\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.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-check-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-exclamation-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-spinner[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-question[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\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(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n}"] });
|
|
642
|
+
i0.ɵɵconditional(ctx.isLoading ? 81 : -1);
|
|
643
|
+
} }, dependencies: [i1.MJButtonDirective, i1.MJPageBodyComponent, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageSearchComponent, i1.MJFilterPopoverComponent, i1.MJFilterPanelComponent, i1.MJRefreshButtonComponent, i2.LoadingComponent, i3.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\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.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-detail[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.total[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.error[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.duration[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.activity[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.running[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] {\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(--mj-border-default);\n position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-total[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\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.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-check-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-exclamation-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-spinner[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-question[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\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(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n}"] });
|
|
649
644
|
};
|
|
650
645
|
ActionExecutionMonitoringComponent = __decorate([
|
|
651
646
|
RegisterClass(BaseResourceComponent, 'ActionsMonitorResource')
|
|
@@ -653,7 +648,7 @@ ActionExecutionMonitoringComponent = __decorate([
|
|
|
653
648
|
export { ActionExecutionMonitoringComponent };
|
|
654
649
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionExecutionMonitoringComponent, [{
|
|
655
650
|
type: Component,
|
|
656
|
-
args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<mj-page-layout>\n <mj-page-header\n Title=\"Execution Monitor\"\n Icon=\"fa-solid fa-chart-line\"\n Subtitle=\"Action execution history, latency, and error rates\">\n <div meta>\n <mj-stat-badge\n [Count]=\"metrics.totalExecutions\"\n Label=\"executions\">\n </mj-stat-badge>\n </div>\n <div actions>\n <mj-filter-popover\n [ActiveCount]=\"ActiveFilterCount\"\n [ShowClearAll]=\"ActiveFilterCount > 0\"\n (ClearAllRequested)=\"resetFilters()\">\n <mj-filter-panel\n [Fields]=\"FilterFields\"\n [Values]=\"FilterValues\"\n (ValuesChange)=\"onFilterValuesChange($event)\"\n (Reset)=\"resetFilters()\">\n </mj-filter-panel>\n </mj-filter-popover>\n <mj-refresh-button (Clicked)=\"refreshData()\"></mj-refresh-button>\n </div>\n <div toolbar>\n <mj-page-search\n Placeholder=\"Search executions...\"\n [Value]=\"searchTerm$.value\"\n (ValueChange)=\"onSearchChange($event)\">\n </mj-page-search>\n </div>\n </mj-page-header>\n\n <mj-page-body>\n <div class=\"execution-monitoring\" >\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 <span class=\"status-chip\" [attr.data-color]=\"getResultColor(execution.ResultCode)\">\n {{ execution.ResultCode || 'Unknown' }}\n </span>\n </div>\n \n <div class=\"execution-actions\">\n <button mjButton\n variant=\"flat\"\n (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\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 <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>\n </mj-page-body>\n</mj-page-layout>", styles: [".execution-monitoring {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n color: var(--mj-text-primary);\n}\n.execution-monitoring .metrics-summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable {\n cursor: pointer;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring .metrics-summary .metric-card .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.execution-monitoring .metrics-summary .metric-card .metric-icon i {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content {\n flex: 1;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-label {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-detail {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n background: var(--mj-status-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n background: var(--mj-status-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n background: var(--mj-status-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header 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.execution-monitoring .trends-section .section-header h4 i {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .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(--mj-border-default);\n position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-failed {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-label {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-total {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.success {\n background: var(--mj-status-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n background: var(--mj-status-error);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart i {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart p {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring .executions-section {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring .executions-section .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.execution-monitoring .executions-section .section-header 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.execution-monitoring .executions-section .section-header h4 i {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i {\n font-size: 1rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-check-circle {\n color: var(--mj-status-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n color: var(--mj-status-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n color: var(--mj-status-warning);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-info-circle, .execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-question {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main {\n flex: 1;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-time {\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-user {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-duration {\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-result {\n flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions {\n flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions button {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover .execution-actions button {\n opacity: 1;\n}\n.execution-monitoring .executions-section .executions-list .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(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .empty-state i {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring .executions-section .executions-list .empty-state h5 {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .empty-state p {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring .metrics-summary {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring .metrics-summary {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring .metrics-summary .metric-card {\n padding: 1rem;\n }\n .execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n font-size: 1.25rem;\n }\n .execution-monitoring .monitoring-header .header-title {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring .monitoring-header .filters-row {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring .monitoring-header .filters-row .search-container,\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n min-width: unset;\n }\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring .trends-section .trends-chart .trend-bars {\n gap: 0.5rem;\n }\n}\n"] }]
|
|
651
|
+
args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<mj-page-layout>\n <mj-page-header\n Title=\"Execution Monitor\"\n Icon=\"fa-solid fa-chart-line\"\n Subtitle=\"Action execution history, latency, and error rates\">\n <!-- [meta] intentionally omitted \u2014 chrome slot discipline audit Task B.\n totalExecutions was a single inventory count duplicated by the\n body's metrics cards. -->\n <div actions>\n <mj-filter-popover\n [ActiveCount]=\"ActiveFilterCount\"\n [ShowClearAll]=\"ActiveFilterCount > 0\"\n (ClearAllRequested)=\"resetFilters()\">\n <mj-filter-panel\n [Fields]=\"FilterFields\"\n [Values]=\"FilterValues\"\n (ValuesChange)=\"onFilterValuesChange($event)\"\n (Reset)=\"resetFilters()\">\n </mj-filter-panel>\n </mj-filter-popover>\n <mj-refresh-button (Clicked)=\"refreshData()\"></mj-refresh-button>\n </div>\n <div toolbar>\n <mj-page-search\n Placeholder=\"Search executions...\"\n [Value]=\"searchTerm$.value\"\n (ValueChange)=\"onSearchChange($event)\">\n </mj-page-search>\n </div>\n </mj-page-header>\n\n <mj-page-body>\n <div class=\"execution-monitoring\" >\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 <span class=\"status-chip\" [attr.data-color]=\"getResultColor(execution.ResultCode)\">\n {{ execution.ResultCode || 'Unknown' }}\n </span>\n </div>\n \n <div class=\"execution-actions\">\n <button mjButton\n variant=\"flat\"\n (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\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 <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>\n </mj-page-body>\n</mj-page-layout>", styles: [".execution-monitoring {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n color: var(--mj-text-primary);\n}\n.execution-monitoring .metrics-summary {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable {\n cursor: pointer;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring .metrics-summary .metric-card .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.execution-monitoring .metrics-summary .metric-card .metric-icon i {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content {\n flex: 1;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-label {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-detail {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n background: var(--mj-status-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n background: var(--mj-status-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n background: var(--mj-status-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header 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.execution-monitoring .trends-section .section-header h4 i {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .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(--mj-border-default);\n position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-failed {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-label {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-total {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.success {\n background: var(--mj-status-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n background: var(--mj-status-error);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart i {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart p {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring .executions-section {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring .executions-section .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.execution-monitoring .executions-section .section-header 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.execution-monitoring .executions-section .section-header h4 i {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i {\n font-size: 1rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-check-circle {\n color: var(--mj-status-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n color: var(--mj-status-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n color: var(--mj-status-warning);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-info-circle, .execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-question {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main {\n flex: 1;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-time {\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-user {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-duration {\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-result {\n flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions {\n flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions button {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover .execution-actions button {\n opacity: 1;\n}\n.execution-monitoring .executions-section .executions-list .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(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .empty-state i {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring .executions-section .executions-list .empty-state h5 {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .empty-state p {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring .metrics-summary {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring .metrics-summary {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring .metrics-summary .metric-card {\n padding: 1rem;\n }\n .execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n font-size: 1.25rem;\n }\n .execution-monitoring .monitoring-header .header-title {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring .monitoring-header .filters-row {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring .monitoring-header .filters-row .search-container,\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n min-width: unset;\n }\n .execution-monitoring .monitoring-header .filters-row .filter-group {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring .trends-section .trends-chart .trend-bars {\n gap: 0.5rem;\n }\n}\n"] }]
|
|
657
652
|
}], () => [{ type: i0.ChangeDetectorRef }], null); })();
|
|
658
653
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExecutionMonitoringComponent, { className: "ActionExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 36 }); })();
|
|
659
654
|
//# sourceMappingURL=execution-monitoring.component.js.map
|