@memberjunction/ng-dashboards 5.11.0 → 5.13.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.d.ts +34 -2
- package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-configuration.component.js +586 -223
- package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
- package/dist/AI/components/agents/agent-editor.component.js +2 -2
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
- package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
- package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
- package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
- package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.js +23 -8
- package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
- package/dist/AI/components/execution-monitoring.component.js +2 -2
- package/dist/AI/components/execution-monitoring.component.js.map +1 -1
- package/dist/AI/components/models/model-management.component.js +2 -2
- package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
- package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
- 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/prompts/prompt-version-control.component.js +2 -2
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
- package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
- package/dist/AI/components/system/system-configuration.component.js +2 -2
- package/dist/AI/components/widgets/kpi-card.component.js +7 -7
- package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
- package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
- package/dist/AI/index.d.ts +1 -0
- package/dist/AI/index.d.ts.map +1 -1
- package/dist/AI/index.js +2 -0
- package/dist/AI/index.js.map +1 -1
- package/dist/APIKeys/api-applications-panel.component.js +3 -3
- package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
- package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-list.component.js +3 -3
- package/dist/APIKeys/api-key-list.component.js.map +1 -1
- package/dist/APIKeys/api-keys-resource.component.js +1 -1
- package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
- package/dist/APIKeys/api-scopes-panel.component.js +2 -2
- package/dist/APIKeys/api-usage-panel.component.js +2 -2
- package/dist/Actions/components/actions-overview.component.js +2 -2
- package/dist/Actions/components/execution-monitoring.component.js +2 -2
- package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
- package/dist/Actions/components/explorer/action-card.component.js +2 -2
- package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
- package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
- package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
- package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
- package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
- package/dist/Communication/communication-dashboard.component.js +2 -2
- package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-logs-resource.component.js +3 -3
- package/dist/Communication/communication-logs-resource.component.js.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.js +5 -5
- package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
- package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-providers-resource.component.js +3 -3
- package/dist/Communication/communication-providers-resource.component.js.map +1 -1
- package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-runs-resource.component.js +3 -3
- package/dist/Communication/communication-runs-resource.component.js.map +1 -1
- package/dist/Communication/communication-templates-resource.component.js +2 -2
- package/dist/Communication/communication-templates-resource.component.js.map +1 -1
- package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
- package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
- package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
- package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
- package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
- package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
- package/dist/Credentials/credentials-dashboard.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
- package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
- package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
- package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
- package/dist/DataExplorer/data-explorer-dashboard.component.js +4 -4
- package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
- package/dist/Home/home-dashboard.component.js +2 -2
- package/dist/Integration/components/activity/activity.component.d.ts +1 -1
- package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
- package/dist/Integration/components/activity/activity.component.js +5 -5
- package/dist/Integration/components/activity/activity.component.js.map +1 -1
- package/dist/Integration/components/connections/connections.component.d.ts +31 -2
- package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
- package/dist/Integration/components/connections/connections.component.js +753 -412
- package/dist/Integration/components/connections/connections.component.js.map +1 -1
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
- package/dist/Integration/components/overview/overview.component.d.ts +0 -1
- package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
- package/dist/Integration/components/overview/overview.component.js +3 -6
- package/dist/Integration/components/overview/overview.component.js.map +1 -1
- package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
- package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
- package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.js +97 -5
- package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
- package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
- package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
- package/dist/Integration/components/widgets/integration-card.component.js +5 -1
- package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
- package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
- package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
- package/dist/Integration/integration.module.d.ts +2 -1
- package/dist/Integration/integration.module.d.ts.map +1 -1
- package/dist/Integration/integration.module.js +7 -3
- package/dist/Integration/integration.module.js.map +1 -1
- package/dist/Integration/services/integration-data.service.d.ts +27 -2
- package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
- package/dist/Integration/services/integration-data.service.js +107 -4
- package/dist/Integration/services/integration-data.service.js.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.js +25 -24
- package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-categories-resource.component.js +2 -2
- package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.js +26 -25
- package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-operations-resource.component.js +2 -2
- package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
- package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
- package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
- package/dist/MCP/mcp-dashboard.component.js +2 -2
- package/dist/MCP/mcp-filter-panel.component.js +2 -2
- package/dist/QueryBrowser/query-browser-resource.component.js +7 -7
- package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
- package/dist/Scheduling/components/index.d.ts +0 -1
- package/dist/Scheduling/components/index.d.ts.map +1 -1
- package/dist/Scheduling/components/index.js +0 -1
- package/dist/Scheduling/components/index.js.map +1 -1
- package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
- package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
- package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
- package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
- package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
- package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
- package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
- package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
- package/dist/Testing/components/testing-analytics.component.js +2 -2
- package/dist/Testing/components/testing-analytics.component.js.map +1 -1
- package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
- package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
- package/dist/Testing/components/testing-explorer.component.js +2 -2
- package/dist/Testing/components/testing-explorer.component.js.map +1 -1
- package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
- package/dist/Testing/components/testing-review.component.js +5 -5
- package/dist/Testing/components/testing-review.component.js.map +1 -1
- package/dist/Testing/components/testing-runs.component.js +2 -2
- package/dist/Testing/components/testing-runs.component.js.map +1 -1
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
- package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
- package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
- package/dist/Testing/testing-dashboard.component.js +2 -2
- package/dist/VersionHistory/components/diff-resource.component.js +2 -2
- package/dist/VersionHistory/components/graph-resource.component.js +2 -2
- package/dist/VersionHistory/components/labels-resource.component.js +3 -3
- package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
- package/dist/VersionHistory/components/restore-resource.component.js +3 -3
- package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
- package/dist/__tests__/integration-data-service.test.js +1 -0
- package/dist/__tests__/integration-data-service.test.js.map +1 -1
- package/dist/module.d.ts +52 -49
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +25 -6
- package/dist/module.js.map +1 -1
- package/dist/public-api.d.ts +1 -1
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +1 -1
- package/dist/public-api.js.map +1 -1
- package/package.json +42 -40
- package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
- package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
- package/dist/Scheduling/components/job-slideout.component.js +0 -459
- package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
|
@@ -597,7 +597,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
|
|
|
597
597
|
i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 85 : 86);
|
|
598
598
|
i0.ɵɵadvance(2);
|
|
599
599
|
i0.ɵɵconditional(ctx.isLoading ? 87 : -1);
|
|
600
|
-
} }, dependencies: [i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i4.ChipComponent, i5.LoadingComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .refresh-btn[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\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(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n}\n.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 rgba(0, 0, 0, 0.15);\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: white;\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(--kendo-color-subtle);\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(--kendo-color-subtle);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.total[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.error[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.duration[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-info);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.activity[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.running[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--kendo-color-secondary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.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(--kendo-color-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(--kendo-color-border);\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(--kendo-color-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(--kendo-color-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(--kendo-color-subtle);\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(--kendo-color-on-app-surface);\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(--kendo-color-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(--kendo-color-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(--kendo-color-subtle);\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(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.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(--kendo-color-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(--kendo-color-subtle);\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(--kendo-color-border);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.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(--kendo-color-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(--kendo-color-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(--kendo-color-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(--kendo-color-info);\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(--kendo-color-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(--kendo-color-primary-darker);\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(--kendo-color-subtle);\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(--kendo-color-info);\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(--kendo-color-subtle);\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: rgba(255, 255, 255, 0.8);\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}"] });
|
|
600
|
+
} }, dependencies: [i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i4.ChipComponent, i5.LoadingComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .refresh-btn[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\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}"] });
|
|
601
601
|
};
|
|
602
602
|
ExecutionMonitoringComponent = __decorate([
|
|
603
603
|
RegisterClass(BaseResourceComponent, 'ActionsMonitorResource')
|
|
@@ -605,7 +605,7 @@ ExecutionMonitoringComponent = __decorate([
|
|
|
605
605
|
export { ExecutionMonitoringComponent };
|
|
606
606
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
|
|
607
607
|
type: Component,
|
|
608
|
-
args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<div class=\"execution-monitoring\" >\n <!-- Header with filters -->\n <div class=\"monitoring-header\">\n <div class=\"header-title\">\n <h3><i class=\"fa-solid fa-chart-line\"></i> Execution Monitoring</h3>\n <button kendoButton [primary]=\"true\" [icon]=\"'refresh'\" (click)=\"refreshData()\" class=\"refresh-btn\">\n Refresh\n </button>\n </div>\n \n <div class=\"filters-row\">\n <div class=\"search-container\">\n <kendo-textbox \n placeholder=\"Search executions...\" \n [value]=\"searchTerm$.value\"\n (valueChange)=\"onSearchChange($event)\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-search\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n \n <div class=\"filter-group\">\n <kendo-dropdownlist \n [data]=\"timeRangeOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedTimeRange$.value\"\n (valueChange)=\"onTimeRangeChange($event)\">\n </kendo-dropdownlist>\n \n <kendo-dropdownlist \n [data]=\"resultOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedResult$.value\"\n (valueChange)=\"onResultFilterChange($event)\">\n </kendo-dropdownlist>\n \n <kendo-dropdownlist \n [data]=\"actionOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedAction$.value\"\n (valueChange)=\"onActionFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n\n <!-- Metrics Summary -->\n <div class=\"metrics-summary\">\n <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-play-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n <div class=\"metric-label\">Total Executions</div>\n </div>\n </div>\n\n <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n <div class=\"metric-label\">Success Rate</div>\n <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n </div>\n </div>\n\n <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n <div class=\"metric-label\">Failed Executions</div>\n </div>\n </div>\n\n <div class=\"metric-card duration\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-clock\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n <div class=\"metric-label\">Avg Duration</div>\n </div>\n </div>\n\n <div class=\"metric-card activity\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-calendar-day\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n <div class=\"metric-label\">Today</div>\n <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n </div>\n </div>\n\n <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n <div class=\"metric-label\">Currently Running</div>\n </div>\n </div>\n </div>\n\n <!-- Execution Trends Chart -->\n <div class=\"trends-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n </div>\n <div class=\"trends-chart\">\n @if (executionTrends.length > 0) {\n <div class=\"trend-bars\">\n @for (trend of executionTrends; track trend.date) {\n <div class=\"trend-bar\">\n <div class=\"bar-container\">\n <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n </div>\n <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n <div class=\"bar-total\">{{ trend.total }}</div>\n </div>\n }\n </div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\">\n <div class=\"legend-color success\"></div>\n <span>Successful</span>\n </div>\n <div class=\"legend-item\">\n <div class=\"legend-color failed\"></div>\n <span>Failed</span>\n </div>\n </div>\n } @else {\n <div class=\"empty-chart\">\n <i class=\"fa-solid fa-chart-area\"></i>\n <p>No execution trends available</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Execution List -->\n <div class=\"executions-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n </div>\n \n <div class=\"executions-list\">\n @if (filteredExecutions.length > 0) {\n @for (execution of filteredExecutions; track execution.ID) {\n <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n <div class=\"execution-status\">\n <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n </div>\n \n <div class=\"execution-main\">\n <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n {{ getActionName(execution.ActionID!) }}\n </div>\n <div class=\"execution-details\">\n <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n <span class=\"execution-user\">{{ execution.UserID }}</span>\n <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n </div>\n </div>\n \n <div class=\"execution-result\">\n <kendo-chip \n [themeColor]=\"getResultColor(execution.ResultCode)\"\n [size]=\"'small'\">\n {{ execution.ResultCode || 'Unknown' }}\n </kendo-chip>\n </div>\n \n <div class=\"execution-actions\">\n <button kendoButton \n [fillMode]=\"'flat'\" \n [icon]=\"'more-vertical'\"\n (click)=\"$event.stopPropagation()\">\n </button>\n </div>\n </div>\n }\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-search\"></i>\n <h5>No executions found</h5>\n <p>Try adjusting your filters or search terms</p>\n </div>\n }\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"loading-overlay\">\n <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>", styles: [".execution-monitoring {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n}\n.execution-monitoring .monitoring-header .header-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 i {\n color: var(--kendo-color-primary);\n}\n.execution-monitoring .monitoring-header .header-title .refresh-btn {\n gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .filters-row {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container kendo-textbox {\n width: 100%;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group kendo-dropdownlist {\n min-width: 140px;\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(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: all 0.2s ease;\n}\n.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 rgba(0, 0, 0, 0.15);\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: white;\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(--kendo-color-subtle);\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(--kendo-color-subtle);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n background: var(--kendo-color-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n background: var(--kendo-color-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n background: var(--kendo-color-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n background: var(--kendo-color-info);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n background: var(--kendo-color-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n background: var(--kendo-color-secondary);\n}\n.execution-monitoring .trends-section {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.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(--kendo-color-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(--kendo-color-border);\n position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n background: var(--kendo-color-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(--kendo-color-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(--kendo-color-subtle);\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(--kendo-color-on-app-surface);\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(--kendo-color-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n background: var(--kendo-color-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(--kendo-color-subtle);\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(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.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(--kendo-color-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\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(--kendo-color-border);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.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(--kendo-color-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n color: var(--kendo-color-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n color: var(--kendo-color-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(--kendo-color-info);\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(--kendo-color-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(--kendo-color-primary-darker);\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(--kendo-color-subtle);\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(--kendo-color-info);\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(--kendo-color-subtle);\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: rgba(255, 255, 255, 0.8);\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"] }]
|
|
608
|
+
args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<div class=\"execution-monitoring\" >\n <!-- Header with filters -->\n <div class=\"monitoring-header\">\n <div class=\"header-title\">\n <h3><i class=\"fa-solid fa-chart-line\"></i> Execution Monitoring</h3>\n <button kendoButton [primary]=\"true\" [icon]=\"'refresh'\" (click)=\"refreshData()\" class=\"refresh-btn\">\n Refresh\n </button>\n </div>\n \n <div class=\"filters-row\">\n <div class=\"search-container\">\n <kendo-textbox \n placeholder=\"Search executions...\" \n [value]=\"searchTerm$.value\"\n (valueChange)=\"onSearchChange($event)\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-search\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n \n <div class=\"filter-group\">\n <kendo-dropdownlist \n [data]=\"timeRangeOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedTimeRange$.value\"\n (valueChange)=\"onTimeRangeChange($event)\">\n </kendo-dropdownlist>\n \n <kendo-dropdownlist \n [data]=\"resultOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedResult$.value\"\n (valueChange)=\"onResultFilterChange($event)\">\n </kendo-dropdownlist>\n \n <kendo-dropdownlist \n [data]=\"actionOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"selectedAction$.value\"\n (valueChange)=\"onActionFilterChange($event)\">\n </kendo-dropdownlist>\n </div>\n </div>\n </div>\n\n <!-- Metrics Summary -->\n <div class=\"metrics-summary\">\n <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-play-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n <div class=\"metric-label\">Total Executions</div>\n </div>\n </div>\n\n <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n <div class=\"metric-label\">Success Rate</div>\n <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n </div>\n </div>\n\n <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n <div class=\"metric-label\">Failed Executions</div>\n </div>\n </div>\n\n <div class=\"metric-card duration\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-clock\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n <div class=\"metric-label\">Avg Duration</div>\n </div>\n </div>\n\n <div class=\"metric-card activity\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-calendar-day\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n <div class=\"metric-label\">Today</div>\n <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n </div>\n </div>\n\n <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n <div class=\"metric-icon\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n <div class=\"metric-label\">Currently Running</div>\n </div>\n </div>\n </div>\n\n <!-- Execution Trends Chart -->\n <div class=\"trends-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n </div>\n <div class=\"trends-chart\">\n @if (executionTrends.length > 0) {\n <div class=\"trend-bars\">\n @for (trend of executionTrends; track trend.date) {\n <div class=\"trend-bar\">\n <div class=\"bar-container\">\n <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n </div>\n <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n <div class=\"bar-total\">{{ trend.total }}</div>\n </div>\n }\n </div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\">\n <div class=\"legend-color success\"></div>\n <span>Successful</span>\n </div>\n <div class=\"legend-item\">\n <div class=\"legend-color failed\"></div>\n <span>Failed</span>\n </div>\n </div>\n } @else {\n <div class=\"empty-chart\">\n <i class=\"fa-solid fa-chart-area\"></i>\n <p>No execution trends available</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Execution List -->\n <div class=\"executions-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n </div>\n \n <div class=\"executions-list\">\n @if (filteredExecutions.length > 0) {\n @for (execution of filteredExecutions; track execution.ID) {\n <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n <div class=\"execution-status\">\n <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n </div>\n \n <div class=\"execution-main\">\n <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n {{ getActionName(execution.ActionID!) }}\n </div>\n <div class=\"execution-details\">\n <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n <span class=\"execution-user\">{{ execution.UserID }}</span>\n <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n </div>\n </div>\n \n <div class=\"execution-result\">\n <kendo-chip \n [themeColor]=\"getResultColor(execution.ResultCode)\"\n [size]=\"'small'\">\n {{ execution.ResultCode || 'Unknown' }}\n </kendo-chip>\n </div>\n \n <div class=\"execution-actions\">\n <button kendoButton \n [fillMode]=\"'flat'\" \n [icon]=\"'more-vertical'\"\n (click)=\"$event.stopPropagation()\">\n </button>\n </div>\n </div>\n }\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-search\"></i>\n <h5>No executions found</h5>\n <p>Try adjusting your filters or search terms</p>\n </div>\n }\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"loading-overlay\">\n <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n </div>\n }\n</div>", styles: [".execution-monitoring {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n color: var(--mj-text-primary);\n}\n.execution-monitoring .monitoring-header .header-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 i {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring .monitoring-header .header-title .refresh-btn {\n gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .filters-row {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container kendo-textbox {\n width: 100%;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group kendo-dropdownlist {\n min-width: 140px;\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"] }]
|
|
609
609
|
}], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
|
|
610
610
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 35 }); })();
|
|
611
611
|
//# sourceMappingURL=execution-monitoring.component.js.map
|
|
@@ -123,11 +123,11 @@ export class ActionBreadcrumbComponent {
|
|
|
123
123
|
} if (rf & 2) {
|
|
124
124
|
i0.ɵɵadvance();
|
|
125
125
|
i0.ɵɵrepeater(ctx.Breadcrumbs);
|
|
126
|
-
} }, styles: [".action-breadcrumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n background: var(--
|
|
126
|
+
} }, styles: [".action-breadcrumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n overflow-x: auto;\n white-space: nowrap;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border: none;\n background: transparent;\n border-radius: 4px;\n font-size: 13px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n color: var(--mj-text-muted);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n@media (max-width: 640px) {\n .breadcrumb-text[_ngcontent-%COMP%] {\n max-width: 80px;\n }\n}"], changeDetection: 0 });
|
|
127
127
|
}
|
|
128
128
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionBreadcrumbComponent, [{
|
|
129
129
|
type: Component,
|
|
130
|
-
args: [{ standalone: false, selector: 'mj-action-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"action-breadcrumb\" aria-label=\"Category navigation\">\n @for (item of Breadcrumbs; track item.id; let i = $index; let last = $last) {\n @if (!last) {\n <button class=\"breadcrumb-item\"\n (click)=\"selectCategory(item.id)\"\n [title]=\"item.name\">\n @if (i === 0) {\n <i [class]=\"item.icon\"></i>\n }\n <span class=\"breadcrumb-text\">{{ item.name }}</span>\n </button>\n <span class=\"breadcrumb-separator\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </span>\n } @else {\n <span class=\"breadcrumb-item current\" [title]=\"item.name\">\n @if (Breadcrumbs.length === 1) {\n <i [class]=\"item.icon\"></i>\n } @else {\n <i class=\"fa-solid fa-folder-open\"></i>\n }\n <span class=\"breadcrumb-text\">{{ item.name }}</span>\n </span>\n }\n }\n</nav>\n", styles: [".action-breadcrumb {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n background: var(--
|
|
130
|
+
args: [{ standalone: false, selector: 'mj-action-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"action-breadcrumb\" aria-label=\"Category navigation\">\n @for (item of Breadcrumbs; track item.id; let i = $index; let last = $last) {\n @if (!last) {\n <button class=\"breadcrumb-item\"\n (click)=\"selectCategory(item.id)\"\n [title]=\"item.name\">\n @if (i === 0) {\n <i [class]=\"item.icon\"></i>\n }\n <span class=\"breadcrumb-text\">{{ item.name }}</span>\n </button>\n <span class=\"breadcrumb-separator\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </span>\n } @else {\n <span class=\"breadcrumb-item current\" [title]=\"item.name\">\n @if (Breadcrumbs.length === 1) {\n <i [class]=\"item.icon\"></i>\n } @else {\n <i class=\"fa-solid fa-folder-open\"></i>\n }\n <span class=\"breadcrumb-text\">{{ item.name }}</span>\n </span>\n }\n }\n</nav>\n", styles: [".action-breadcrumb {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n overflow-x: auto;\n white-space: nowrap;\n}\n\n.breadcrumb-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border: none;\n background: transparent;\n border-radius: 4px;\n font-size: 13px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.breadcrumb-item:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.breadcrumb-item.current {\n color: var(--mj-text-primary);\n font-weight: 600;\n cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n background: transparent;\n}\n\n.breadcrumb-item i {\n font-size: 12px;\n}\n\n.breadcrumb-item.current i {\n color: var(--mj-status-warning);\n}\n\n.breadcrumb-text {\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-separator {\n display: flex;\n align-items: center;\n color: var(--mj-text-muted);\n}\n\n.breadcrumb-separator i {\n font-size: 10px;\n}\n\n/* Responsive - collapse middle items on small screens */\n@media (max-width: 640px) {\n .breadcrumb-text {\n max-width: 80px;\n }\n}\n"] }]
|
|
131
131
|
}], null, { SelectedCategoryId: [{
|
|
132
132
|
type: Input
|
|
133
133
|
}], Categories: [{
|
|
@@ -389,11 +389,11 @@ export class ActionCardComponent {
|
|
|
389
389
|
i0.ɵɵproperty("fillMode", "flat")("size", "small");
|
|
390
390
|
i0.ɵɵadvance(2);
|
|
391
391
|
i0.ɵɵconditional(ctx.IsExpanded ? 28 : -1);
|
|
392
|
-
} }, dependencies: [i1.ButtonComponent, i1.ChipComponent, i2.LoadingComponent], styles: [".action-card[_ngcontent-%COMP%] {\n background: var(--
|
|
392
|
+
} }, dependencies: [i1.ButtonComponent, i1.ChipComponent, i2.LoadingComponent], styles: [".action-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n transform: translateY(-2px);\n}\n\n.action-card.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n}\n\n.card-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n}\n\n\n\n.action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n flex-shrink: 0;\n}\n\n.action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: var(--mj-brand-primary);\n}\n\n.action-icon.ai-generated[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n}\n\n.action-icon.ai-generated[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-status-info), var(--mj-brand-primary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n\n\n.action-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.action-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.action-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.action-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.action-badges[_ngcontent-%COMP%] kendo-chip[_ngcontent-%COMP%]:has(i) {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.action-badges[_ngcontent-%COMP%] kendo-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.action-description[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.action-meta[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: none;\n border: none;\n padding: 0;\n cursor: default;\n}\n\n.meta-item.category[_ngcontent-%COMP%] {\n cursor: pointer;\n padding: 2px 6px;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.meta-item.category[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-brand-primary);\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n.meta-item[data-status=\"Approved\"][_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.meta-item[data-status=\"Pending\"][_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.meta-item[data-status=\"Rejected\"][_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.action-card[_ngcontent-%COMP%]:hover .action-buttons[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.action-buttons[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 6px;\n}\n\n\n\n.card-expanded[_ngcontent-%COMP%] {\n padding: 0 20px 20px 20px;\n border-top: 1px solid var(--mj-border-default);\n margin-top: -1px;\n padding-top: 16px;\n background: var(--mj-bg-page);\n}\n\n.stats-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 20px;\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.stats-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n text-align: center;\n padding: 12px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.stat-value.success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.stat-value.warning[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.stat-value.error[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.params-preview[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n}\n\n.params-header[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.params-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.params-list[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.param-tag[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 4px 10px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 14px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.param-tag.required[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.required-marker[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n.param-more[_ngcontent-%COMP%] {\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n@media (max-width: 640px) {\n .card-main[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .action-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n }\n\n .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .action-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n flex-direction: row;\n opacity: 1;\n width: 100%;\n justify-content: flex-end;\n }\n\n .stats-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n}"], changeDetection: 0 });
|
|
393
393
|
}
|
|
394
394
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionCardComponent, [{
|
|
395
395
|
type: Component,
|
|
396
|
-
args: [{ standalone: false, selector: 'mj-action-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-card\" [class.expanded]=\"IsExpanded\" (click)=\"onCardClick()\">\n <div class=\"card-main\">\n <!-- Icon -->\n <div class=\"action-icon\" [class.ai-generated]=\"Action.Type === 'Generated'\">\n <i [class]=\"getActionIcon()\"></i>\n </div>\n\n <!-- Content -->\n <div class=\"action-content\">\n <div class=\"action-header\">\n <h3 class=\"action-name\" [title]=\"Action.Name\">{{ Action.Name }}</h3>\n <div class=\"action-badges\">\n <kendo-chip\n [themeColor]=\"getStatusColor()\"\n [size]=\"'small'\">\n {{ Action.Status }}\n </kendo-chip>\n @if (Action.Type === 'Generated') {\n <kendo-chip themeColor=\"info\" [size]=\"'small'\">\n <i class=\"fa-solid fa-robot\"></i> AI\n </kendo-chip>\n }\n </div>\n </div>\n\n <p class=\"action-description\" [title]=\"Action.Description || 'No description'\">\n {{ Action.Description || 'No description available' }}\n </p>\n\n <div class=\"action-meta\">\n <button class=\"meta-item category\" (click)=\"onCategoryClick($event)\" [title]=\"'View category: ' + getCategoryName()\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ getCategoryName() }}</span>\n </button>\n\n @if (Action.__mj_UpdatedAt) {\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span>{{ formatDate(Action.__mj_UpdatedAt) }}</span>\n </span>\n }\n\n @if (Action.Type === 'Generated' && Action.CodeApprovalStatus) {\n <span class=\"meta-item\" [attr.data-status]=\"Action.CodeApprovalStatus\">\n <i [class]=\"getApprovalStatusIcon()\"></i>\n <span>{{ Action.CodeApprovalStatus }}</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"action-buttons\">\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"View Stats\"\n (click)=\"toggleExpanded($event)\">\n <i [class]=\"IsExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chart-line'\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n [themeColor]=\"'primary'\"\n title=\"Run Action\"\n [disabled]=\"Action.Status !== 'Active'\"\n (click)=\"onRunClick($event)\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Edit Action\"\n (click)=\"onEditClick($event)\">\n <i class=\"fa-solid fa-pen\"></i>\n </button>\n </div>\n </div>\n\n <!-- Expanded Stats Section -->\n @if (IsExpanded) {\n <div class=\"card-expanded\">\n @if (ExecutionStats.isLoading) {\n <div class=\"stats-loading\">\n <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n <span>Loading execution stats...</span>\n </div>\n } @else {\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ ExecutionStats.totalExecutions }}</div>\n <div class=\"stat-label\">Total Runs</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" [class.success]=\"ExecutionStats.successRate >= 90\" [class.warning]=\"ExecutionStats.successRate >= 50 && ExecutionStats.successRate < 90\" [class.error]=\"ExecutionStats.successRate < 50\">\n {{ ExecutionStats.successRate }}%\n </div>\n <div class=\"stat-label\">Success Rate</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ formatDate(ExecutionStats.lastExecuted) }}</div>\n <div class=\"stat-label\">Last Run</div>\n </div>\n <div class=\"stat-item params\">\n <div class=\"stat-value\">{{ Action.Params.length || 0 }}</div>\n <div class=\"stat-label\">Parameters</div>\n </div>\n </div>\n\n @if (Action.Params && Action.Params.length > 0) {\n <div class=\"params-preview\">\n <div class=\"params-header\">\n <i class=\"fa-solid fa-sliders\"></i>\n Parameters\n </div>\n <div class=\"params-list\">\n @for (param of Action.Params.slice(0, 4); track param.Name) {\n <span class=\"param-tag\" [class.required]=\"param.IsRequired\">\n {{ param.Name }}\n @if (param.IsRequired) {\n <span class=\"required-marker\">*</span>\n }\n </span>\n }\n @if (Action.Params.length > 4) {\n <span class=\"param-more\">+{{ Action.Params.length - 4 }} more</span>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".action-card {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-card:hover {\n border-color: var(--kendo-color-primary);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n transform: translateY(-2px);\n}\n\n.action-card.expanded {\n border-color: var(--kendo-color-primary);\n}\n\n.card-main {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n}\n\n/* Icon */\n.action-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--kendo-color-primary-subtle);\n flex-shrink: 0;\n}\n\n.action-icon i {\n font-size: 20px;\n color: var(--kendo-color-primary);\n}\n\n.action-icon.ai-generated {\n background: linear-gradient(135deg, var(--kendo-color-info-subtle), var(--kendo-color-primary-subtle));\n}\n\n.action-icon.ai-generated i {\n background: linear-gradient(135deg, var(--kendo-color-info), var(--kendo-color-primary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* Content */\n.action-content {\n flex: 1;\n min-width: 0;\n}\n\n.action-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.action-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--kendo-color-on-app-surface);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.action-badges {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.action-badges kendo-chip:has(i) {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.action-badges kendo-chip i {\n font-size: 10px;\n}\n\n.action-description {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--kendo-color-subtle);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.action-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--kendo-color-subtle);\n background: none;\n border: none;\n padding: 0;\n cursor: default;\n}\n\n.meta-item.category {\n cursor: pointer;\n padding: 2px 6px;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.meta-item.category:hover {\n background: var(--kendo-color-base-hover);\n color: var(--kendo-color-primary);\n}\n\n.meta-item i {\n font-size: 11px;\n color: var(--kendo-color-primary);\n}\n\n.meta-item[data-status=\"Approved\"] i {\n color: var(--kendo-color-success);\n}\n\n.meta-item[data-status=\"Pending\"] i {\n color: var(--kendo-color-warning);\n}\n\n.meta-item[data-status=\"Rejected\"] i {\n color: var(--kendo-color-error);\n}\n\n/* Action Buttons */\n.action-buttons {\n display: flex;\n flex-direction: column;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.action-card:hover .action-buttons {\n opacity: 1;\n}\n\n.action-buttons button {\n padding: 6px;\n}\n\n/* Expanded Section */\n.card-expanded {\n padding: 0 20px 20px 20px;\n border-top: 1px solid var(--kendo-color-border);\n margin-top: -1px;\n padding-top: 16px;\n background: var(--kendo-color-app-surface);\n}\n\n.stats-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 20px;\n color: var(--kendo-color-subtle);\n font-size: 13px;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.stat-item {\n text-align: center;\n padding: 12px 8px;\n background: var(--kendo-color-surface);\n border-radius: 8px;\n}\n\n.stat-value {\n font-size: 20px;\n font-weight: 700;\n color: var(--kendo-color-on-app-surface);\n margin-bottom: 4px;\n}\n\n.stat-value.success {\n color: var(--kendo-color-success);\n}\n\n.stat-value.warning {\n color: var(--kendo-color-warning);\n}\n\n.stat-value.error {\n color: var(--kendo-color-error);\n}\n\n.stat-label {\n font-size: 11px;\n color: var(--kendo-color-subtle);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Params Preview */\n.params-preview {\n padding: 12px;\n background: var(--kendo-color-surface);\n border-radius: 8px;\n}\n\n.params-header {\n font-size: 11px;\n font-weight: 600;\n color: var(--kendo-color-subtle);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.params-header i {\n font-size: 12px;\n}\n\n.params-list {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.param-tag {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 4px 10px;\n background: var(--kendo-color-base-subtle);\n border-radius: 14px;\n font-size: 12px;\n color: var(--kendo-color-on-app-surface);\n}\n\n.param-tag.required {\n background: var(--kendo-color-primary-subtle);\n color: var(--kendo-color-primary);\n}\n\n.required-marker {\n color: var(--kendo-color-error);\n font-weight: 600;\n}\n\n.param-more {\n padding: 4px 10px;\n font-size: 12px;\n color: var(--kendo-color-subtle);\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .card-main {\n flex-wrap: wrap;\n }\n\n .action-icon {\n width: 40px;\n height: 40px;\n }\n\n .action-icon i {\n font-size: 16px;\n }\n\n .action-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .action-buttons {\n flex-direction: row;\n opacity: 1;\n width: 100%;\n justify-content: flex-end;\n }\n\n .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n"] }]
|
|
396
|
+
args: [{ standalone: false, selector: 'mj-action-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-card\" [class.expanded]=\"IsExpanded\" (click)=\"onCardClick()\">\n <div class=\"card-main\">\n <!-- Icon -->\n <div class=\"action-icon\" [class.ai-generated]=\"Action.Type === 'Generated'\">\n <i [class]=\"getActionIcon()\"></i>\n </div>\n\n <!-- Content -->\n <div class=\"action-content\">\n <div class=\"action-header\">\n <h3 class=\"action-name\" [title]=\"Action.Name\">{{ Action.Name }}</h3>\n <div class=\"action-badges\">\n <kendo-chip\n [themeColor]=\"getStatusColor()\"\n [size]=\"'small'\">\n {{ Action.Status }}\n </kendo-chip>\n @if (Action.Type === 'Generated') {\n <kendo-chip themeColor=\"info\" [size]=\"'small'\">\n <i class=\"fa-solid fa-robot\"></i> AI\n </kendo-chip>\n }\n </div>\n </div>\n\n <p class=\"action-description\" [title]=\"Action.Description || 'No description'\">\n {{ Action.Description || 'No description available' }}\n </p>\n\n <div class=\"action-meta\">\n <button class=\"meta-item category\" (click)=\"onCategoryClick($event)\" [title]=\"'View category: ' + getCategoryName()\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ getCategoryName() }}</span>\n </button>\n\n @if (Action.__mj_UpdatedAt) {\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span>{{ formatDate(Action.__mj_UpdatedAt) }}</span>\n </span>\n }\n\n @if (Action.Type === 'Generated' && Action.CodeApprovalStatus) {\n <span class=\"meta-item\" [attr.data-status]=\"Action.CodeApprovalStatus\">\n <i [class]=\"getApprovalStatusIcon()\"></i>\n <span>{{ Action.CodeApprovalStatus }}</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"action-buttons\">\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"View Stats\"\n (click)=\"toggleExpanded($event)\">\n <i [class]=\"IsExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chart-line'\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n [themeColor]=\"'primary'\"\n title=\"Run Action\"\n [disabled]=\"Action.Status !== 'Active'\"\n (click)=\"onRunClick($event)\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Edit Action\"\n (click)=\"onEditClick($event)\">\n <i class=\"fa-solid fa-pen\"></i>\n </button>\n </div>\n </div>\n\n <!-- Expanded Stats Section -->\n @if (IsExpanded) {\n <div class=\"card-expanded\">\n @if (ExecutionStats.isLoading) {\n <div class=\"stats-loading\">\n <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n <span>Loading execution stats...</span>\n </div>\n } @else {\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ ExecutionStats.totalExecutions }}</div>\n <div class=\"stat-label\">Total Runs</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" [class.success]=\"ExecutionStats.successRate >= 90\" [class.warning]=\"ExecutionStats.successRate >= 50 && ExecutionStats.successRate < 90\" [class.error]=\"ExecutionStats.successRate < 50\">\n {{ ExecutionStats.successRate }}%\n </div>\n <div class=\"stat-label\">Success Rate</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ formatDate(ExecutionStats.lastExecuted) }}</div>\n <div class=\"stat-label\">Last Run</div>\n </div>\n <div class=\"stat-item params\">\n <div class=\"stat-value\">{{ Action.Params.length || 0 }}</div>\n <div class=\"stat-label\">Parameters</div>\n </div>\n </div>\n\n @if (Action.Params && Action.Params.length > 0) {\n <div class=\"params-preview\">\n <div class=\"params-header\">\n <i class=\"fa-solid fa-sliders\"></i>\n Parameters\n </div>\n <div class=\"params-list\">\n @for (param of Action.Params.slice(0, 4); track param.Name) {\n <span class=\"param-tag\" [class.required]=\"param.IsRequired\">\n {{ param.Name }}\n @if (param.IsRequired) {\n <span class=\"required-marker\">*</span>\n }\n </span>\n }\n @if (Action.Params.length > 4) {\n <span class=\"param-more\">+{{ Action.Params.length - 4 }} more</span>\n }\n </div>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".action-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.action-card:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n transform: translateY(-2px);\n}\n\n.action-card.expanded {\n border-color: var(--mj-brand-primary);\n}\n\n.card-main {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 20px;\n}\n\n/* Icon */\n.action-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n flex-shrink: 0;\n}\n\n.action-icon i {\n font-size: 20px;\n color: var(--mj-brand-primary);\n}\n\n.action-icon.ai-generated {\n background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n}\n\n.action-icon.ai-generated i {\n background: linear-gradient(135deg, var(--mj-status-info), var(--mj-brand-primary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* Content */\n.action-content {\n flex: 1;\n min-width: 0;\n}\n\n.action-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.action-name {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.action-badges {\n display: flex;\n gap: 6px;\n flex-shrink: 0;\n}\n\n.action-badges kendo-chip:has(i) {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.action-badges kendo-chip i {\n font-size: 10px;\n}\n\n.action-description {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.action-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-muted);\n background: none;\n border: none;\n padding: 0;\n cursor: default;\n}\n\n.meta-item.category {\n cursor: pointer;\n padding: 2px 6px;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.meta-item.category:hover {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-brand-primary);\n}\n\n.meta-item i {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n.meta-item[data-status=\"Approved\"] i {\n color: var(--mj-status-success);\n}\n\n.meta-item[data-status=\"Pending\"] i {\n color: var(--mj-status-warning);\n}\n\n.meta-item[data-status=\"Rejected\"] i {\n color: var(--mj-status-error);\n}\n\n/* Action Buttons */\n.action-buttons {\n display: flex;\n flex-direction: column;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.action-card:hover .action-buttons {\n opacity: 1;\n}\n\n.action-buttons button {\n padding: 6px;\n}\n\n/* Expanded Section */\n.card-expanded {\n padding: 0 20px 20px 20px;\n border-top: 1px solid var(--mj-border-default);\n margin-top: -1px;\n padding-top: 16px;\n background: var(--mj-bg-page);\n}\n\n.stats-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 20px;\n color: var(--mj-text-muted);\n font-size: 13px;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.stat-item {\n text-align: center;\n padding: 12px 8px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n}\n\n.stat-value {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.stat-value.success {\n color: var(--mj-status-success);\n}\n\n.stat-value.warning {\n color: var(--mj-status-warning);\n}\n\n.stat-value.error {\n color: var(--mj-status-error);\n}\n\n.stat-label {\n font-size: 11px;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Params Preview */\n.params-preview {\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n}\n\n.params-header {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.params-header i {\n font-size: 12px;\n}\n\n.params-list {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.param-tag {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 4px 10px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 14px;\n font-size: 12px;\n color: var(--mj-text-primary);\n}\n\n.param-tag.required {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.required-marker {\n color: var(--mj-status-error);\n font-weight: 600;\n}\n\n.param-more {\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .card-main {\n flex-wrap: wrap;\n }\n\n .action-icon {\n width: 40px;\n height: 40px;\n }\n\n .action-icon i {\n font-size: 16px;\n }\n\n .action-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .action-buttons {\n flex-direction: row;\n opacity: 1;\n width: 100%;\n justify-content: flex-end;\n }\n\n .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n"] }]
|
|
397
397
|
}], () => [{ type: i0.ChangeDetectorRef }], { Action: [{
|
|
398
398
|
type: Input
|
|
399
399
|
}], Categories: [{
|
|
@@ -506,7 +506,7 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
|
|
|
506
506
|
i0.ɵɵproperty("Categories", ctx.Categories);
|
|
507
507
|
i0.ɵɵadvance();
|
|
508
508
|
i0.ɵɵconditional(ctx.SelectedActionForRun ? 11 : -1);
|
|
509
|
-
} }, dependencies: [i4.ButtonComponent, i5.ActionTestHarnessDialogComponent, i6.LoadingComponent, i7.ActionTreePanelComponent, i8.ActionToolbarComponent, i9.ActionBreadcrumbComponent, i10.ActionCardComponent, i11.ActionListItemComponent, i12.NewCategoryPanelComponent, i13.NewActionPanelComponent], styles: [".action-explorer[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--
|
|
509
|
+
} }, dependencies: [i4.ButtonComponent, i5.ActionTestHarnessDialogComponent, i6.LoadingComponent, i7.ActionTreePanelComponent, i8.ActionToolbarComponent, i9.ActionBreadcrumbComponent, i10.ActionCardComponent, i11.ActionListItemComponent, i12.NewCategoryPanelComponent, i13.NewActionPanelComponent], styles: [".action-explorer[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n\n\n.explorer-main[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n.explorer-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n z-index: 100;\n backdrop-filter: blur(2px);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 300px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 20px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 20px 0;\n font-size: 14px;\n}\n\n.empty-state[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n gap: 20px;\n}\n\n\n\n.list-view[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.header-icon[_ngcontent-%COMP%] {\n \n\n}\n\n\n\n.compact-view[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n\n\n@media (max-width: 1200px) {\n .card-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n }\n}\n\n@media (max-width: 1024px) {\n .list-header[_ngcontent-%COMP%] {\n grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n }\n\n .list-header[_ngcontent-%COMP%] .header-category[_ngcontent-%COMP%], \n .list-header[_ngcontent-%COMP%] .header-params[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n@media (max-width: 768px) {\n .explorer-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .card-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .list-header[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 8px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-default);\n border-radius: 4px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-muted);\n}"], changeDetection: 0 });
|
|
510
510
|
};
|
|
511
511
|
ActionExplorerComponent = __decorate([
|
|
512
512
|
RegisterClass(BaseResourceComponent, 'ActionExplorerResource')
|
|
@@ -514,7 +514,7 @@ ActionExplorerComponent = __decorate([
|
|
|
514
514
|
export { ActionExplorerComponent };
|
|
515
515
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionExplorerComponent, [{
|
|
516
516
|
type: Component,
|
|
517
|
-
args: [{ standalone: false, selector: 'mj-action-explorer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ActionExplorerStateService], template: "<div class=\"action-explorer\">\n <!-- Full-page Loading Overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\">\n <mj-loading text=\"Loading actions...\" size=\"medium\"></mj-loading>\n </div>\n }\n\n <!-- Tree Panel (Left Sidebar) -->\n <mj-action-tree-panel\n [Categories]=\"Categories\"\n [Actions]=\"Actions\"\n (CategorySelected)=\"onCategorySelect($event)\"\n (NewCategoryClick)=\"onNewCategory($event)\"\n (EditCategoryClick)=\"onEditCategory($event)\">\n </mj-action-tree-panel>\n\n <!-- Main Content Area -->\n <div class=\"explorer-main\">\n <!-- Toolbar -->\n <mj-action-toolbar\n [TotalCount]=\"Actions.length\"\n [FilteredCount]=\"FilteredActions.length\"\n (NewActionClick)=\"onNewAction()\"\n (RefreshClick)=\"onRefresh()\">\n </mj-action-toolbar>\n\n <!-- Breadcrumb -->\n <mj-action-breadcrumb\n [SelectedCategoryId]=\"SelectedCategoryId\"\n [Categories]=\"Categories\"\n (CategorySelect)=\"onCategorySelect($event)\">\n </mj-action-breadcrumb>\n\n <!-- Content Area -->\n <div class=\"explorer-content\">\n @if (FilteredActions.length === 0 && !IsLoading) {\n <div class=\"empty-state\">\n @if (StateService.hasActiveFilters() || SelectedCategoryId !== 'all') {\n <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n <h3>No actions match your filters</h3>\n <p>Try adjusting your search or filter criteria</p>\n <button kendoButton\n [fillMode]=\"'outline'\"\n (click)=\"StateService.clearFilters(); StateService.setSelectedCategoryId('all')\">\n <i class=\"fa-solid fa-times\"></i>\n Clear All Filters\n </button>\n } @else {\n <i class=\"fa-solid fa-bolt\"></i>\n <h3>No actions yet</h3>\n <p>Create your first action to get started</p>\n <button kendoButton\n [fillMode]=\"'solid'\"\n [themeColor]=\"'primary'\"\n (click)=\"onNewAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Action\n </button>\n }\n </div>\n } @else {\n <!-- Card View -->\n @if (ViewMode === 'card') {\n <div class=\"card-grid\">\n @for (action of FilteredActions; track action.ID) {\n <mj-action-card\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-card>\n }\n </div>\n }\n\n <!-- List View -->\n @if (ViewMode === 'list') {\n <div class=\"list-view\">\n <div class=\"list-header\">\n <div class=\"header-icon\"></div>\n <div class=\"header-name\">Name</div>\n <div class=\"header-category\">Category</div>\n <div class=\"header-status\">Status</div>\n <div class=\"header-type\">Type</div>\n <div class=\"header-params\">Params</div>\n <div class=\"header-updated\">Updated</div>\n <div class=\"header-actions\"></div>\n </div>\n @for (action of FilteredActions; track action.ID) {\n <mj-action-list-item\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n [IsCompact]=\"false\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-list-item>\n }\n </div>\n }\n\n <!-- Compact View -->\n @if (ViewMode === 'compact') {\n <div class=\"compact-view\">\n @for (action of FilteredActions; track action.ID) {\n <mj-action-list-item\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n [IsCompact]=\"true\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-list-item>\n }\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Slide-in Panels -->\n <mj-new-category-panel\n [Categories]=\"Categories\"\n [PreselectedParentId]=\"NewCategoryParentId\"\n (CategoryCreated)=\"onCategoryCreated($event)\"\n (Close)=\"NewCategoryParentId = null\">\n </mj-new-category-panel>\n\n <mj-new-action-panel\n [Categories]=\"Categories\"\n (ActionCreated)=\"onActionCreated()\">\n </mj-new-action-panel>\n\n <!-- Action Run Dialog -->\n @if (SelectedActionForRun) {\n <mj-action-test-harness-dialog\n [Action]=\"SelectedActionForRun\"\n [ActionParams]=\"SelectedActionParams\"\n [IsOpen]=\"IsRunDialogOpen\"\n (Close)=\"OnRunDialogClose()\">\n </mj-action-test-harness-dialog>\n }\n</div>\n", styles: [".action-explorer {\n display: flex;\n height: 100%;\n background: var(--
|
|
517
|
+
args: [{ standalone: false, selector: 'mj-action-explorer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ActionExplorerStateService], template: "<div class=\"action-explorer\">\n <!-- Full-page Loading Overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\">\n <mj-loading text=\"Loading actions...\" size=\"medium\"></mj-loading>\n </div>\n }\n\n <!-- Tree Panel (Left Sidebar) -->\n <mj-action-tree-panel\n [Categories]=\"Categories\"\n [Actions]=\"Actions\"\n (CategorySelected)=\"onCategorySelect($event)\"\n (NewCategoryClick)=\"onNewCategory($event)\"\n (EditCategoryClick)=\"onEditCategory($event)\">\n </mj-action-tree-panel>\n\n <!-- Main Content Area -->\n <div class=\"explorer-main\">\n <!-- Toolbar -->\n <mj-action-toolbar\n [TotalCount]=\"Actions.length\"\n [FilteredCount]=\"FilteredActions.length\"\n (NewActionClick)=\"onNewAction()\"\n (RefreshClick)=\"onRefresh()\">\n </mj-action-toolbar>\n\n <!-- Breadcrumb -->\n <mj-action-breadcrumb\n [SelectedCategoryId]=\"SelectedCategoryId\"\n [Categories]=\"Categories\"\n (CategorySelect)=\"onCategorySelect($event)\">\n </mj-action-breadcrumb>\n\n <!-- Content Area -->\n <div class=\"explorer-content\">\n @if (FilteredActions.length === 0 && !IsLoading) {\n <div class=\"empty-state\">\n @if (StateService.hasActiveFilters() || SelectedCategoryId !== 'all') {\n <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n <h3>No actions match your filters</h3>\n <p>Try adjusting your search or filter criteria</p>\n <button kendoButton\n [fillMode]=\"'outline'\"\n (click)=\"StateService.clearFilters(); StateService.setSelectedCategoryId('all')\">\n <i class=\"fa-solid fa-times\"></i>\n Clear All Filters\n </button>\n } @else {\n <i class=\"fa-solid fa-bolt\"></i>\n <h3>No actions yet</h3>\n <p>Create your first action to get started</p>\n <button kendoButton\n [fillMode]=\"'solid'\"\n [themeColor]=\"'primary'\"\n (click)=\"onNewAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Action\n </button>\n }\n </div>\n } @else {\n <!-- Card View -->\n @if (ViewMode === 'card') {\n <div class=\"card-grid\">\n @for (action of FilteredActions; track action.ID) {\n <mj-action-card\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-card>\n }\n </div>\n }\n\n <!-- List View -->\n @if (ViewMode === 'list') {\n <div class=\"list-view\">\n <div class=\"list-header\">\n <div class=\"header-icon\"></div>\n <div class=\"header-name\">Name</div>\n <div class=\"header-category\">Category</div>\n <div class=\"header-status\">Status</div>\n <div class=\"header-type\">Type</div>\n <div class=\"header-params\">Params</div>\n <div class=\"header-updated\">Updated</div>\n <div class=\"header-actions\"></div>\n </div>\n @for (action of FilteredActions; track action.ID) {\n <mj-action-list-item\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n [IsCompact]=\"false\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-list-item>\n }\n </div>\n }\n\n <!-- Compact View -->\n @if (ViewMode === 'compact') {\n <div class=\"compact-view\">\n @for (action of FilteredActions; track action.ID) {\n <mj-action-list-item\n [Action]=\"action\"\n [Categories]=\"CategoriesMap\"\n [IsCompact]=\"true\"\n (ActionClick)=\"onActionClick($event)\"\n (EditClick)=\"onActionEdit($event)\"\n (RunClick)=\"onActionRun($event)\"\n (CategoryClick)=\"onCategoryClick($event)\">\n </mj-action-list-item>\n }\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Slide-in Panels -->\n <mj-new-category-panel\n [Categories]=\"Categories\"\n [PreselectedParentId]=\"NewCategoryParentId\"\n (CategoryCreated)=\"onCategoryCreated($event)\"\n (Close)=\"NewCategoryParentId = null\">\n </mj-new-category-panel>\n\n <mj-new-action-panel\n [Categories]=\"Categories\"\n (ActionCreated)=\"onActionCreated()\">\n </mj-new-action-panel>\n\n <!-- Action Run Dialog -->\n @if (SelectedActionForRun) {\n <mj-action-test-harness-dialog\n [Action]=\"SelectedActionForRun\"\n [ActionParams]=\"SelectedActionParams\"\n [IsOpen]=\"IsRunDialogOpen\"\n (Close)=\"OnRunDialogClose()\">\n </mj-action-test-harness-dialog>\n }\n</div>\n", styles: [".action-explorer {\n display: flex;\n height: 100%;\n background: var(--mj-bg-page);\n overflow: hidden;\n position: relative;\n}\n\n/* Main Content Area */\n.explorer-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n.explorer-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Full-page Loading Overlay */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n z-index: 100;\n backdrop-filter: blur(2px);\n}\n\n/* Legacy loading container (kept for backwards compatibility) */\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 300px;\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 48px;\n margin-bottom: 20px;\n opacity: 0.5;\n}\n\n.empty-state h3 {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.empty-state p {\n margin: 0 0 20px 0;\n font-size: 14px;\n}\n\n.empty-state button {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Card Grid */\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n gap: 20px;\n}\n\n/* List View */\n.list-view {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.list-header {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n}\n\n.header-icon {\n /* Empty column for icon */\n}\n\n/* Compact View */\n.compact-view {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n .card-grid {\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n }\n}\n\n@media (max-width: 1024px) {\n .list-header {\n grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n }\n\n .list-header .header-category,\n .list-header .header-params {\n display: none;\n }\n}\n\n@media (max-width: 768px) {\n .explorer-content {\n padding: 12px;\n }\n\n .card-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n .list-header {\n display: none;\n }\n}\n\n/* Scrollbar Styling */\n.explorer-content::-webkit-scrollbar {\n width: 8px;\n}\n\n.explorer-content::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.explorer-content::-webkit-scrollbar-thumb {\n background: var(--mj-border-default);\n border-radius: 4px;\n}\n\n.explorer-content::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-muted);\n}\n"] }]
|
|
518
518
|
}], () => [{ type: i1.ActionExplorerStateService }, { type: i2.NavigationService }, { type: i3.Router }, { type: i0.ChangeDetectorRef }], { TreePanel: [{
|
|
519
519
|
type: ViewChild,
|
|
520
520
|
args: [ActionTreePanelComponent]
|
|
@@ -186,11 +186,11 @@ export class ActionListItemComponent {
|
|
|
186
186
|
i0.ɵɵproperty("fillMode", "flat")("size", "small")("disabled", ctx.Action.Status !== "Active");
|
|
187
187
|
i0.ɵɵadvance(2);
|
|
188
188
|
i0.ɵɵproperty("fillMode", "flat")("size", "small");
|
|
189
|
-
} }, dependencies: [i1.ButtonComponent, i1.ChipComponent, i2.DatePipe], styles: [".action-list-item[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--
|
|
189
|
+
} }, dependencies: [i1.ButtonComponent, i1.ChipComponent, i2.DatePipe], styles: [".action-list-item[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.action-list-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.action-list-item.compact[_ngcontent-%COMP%] {\n grid-template-columns: 32px 1fr 120px 80px 50px 80px 60px;\n padding: 8px 16px;\n gap: 8px;\n}\n\n\n\n.item-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.compact[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border-radius: 6px;\n}\n\n.item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-brand-primary);\n}\n\n.compact[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.item-icon.ai-generated[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n}\n\n\n\n.item-main[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.compact[_ngcontent-%COMP%] .item-name[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.item-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.item-category[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border: none;\n background: transparent;\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item-category[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-active);\n color: var(--mj-brand-primary);\n}\n\n.item-category[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-status-warning);\n flex-shrink: 0;\n}\n\n.item-category[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.item-status[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n}\n\n\n\n.item-type[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.type-badge.ai[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.type-badge.custom[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-muted);\n}\n\n.type-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.item-params[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.item-params[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.item-updated[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n}\n\n\n\n.item-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.action-list-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.item-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 4px;\n}\n\n.item-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n@media (max-width: 1024px) {\n .action-list-item[_ngcontent-%COMP%] {\n grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n }\n\n .action-list-item[_ngcontent-%COMP%] .item-category[_ngcontent-%COMP%], \n .action-list-item[_ngcontent-%COMP%] .item-params[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n@media (max-width: 768px) {\n .action-list-item[_ngcontent-%COMP%] {\n grid-template-columns: 32px 1fr 70px 70px;\n }\n\n .action-list-item[_ngcontent-%COMP%] .item-type[_ngcontent-%COMP%], \n .action-list-item[_ngcontent-%COMP%] .item-updated[_ngcontent-%COMP%] {\n display: none;\n }\n\n .item-actions[_ngcontent-%COMP%] {\n opacity: 1;\n }\n}"], changeDetection: 0 });
|
|
190
190
|
}
|
|
191
191
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionListItemComponent, [{
|
|
192
192
|
type: Component,
|
|
193
|
-
args: [{ standalone: false, selector: 'mj-action-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-list-item\" [class.compact]=\"IsCompact\" (click)=\"onRowClick()\">\n <!-- Icon -->\n <div class=\"item-icon\" [class.ai-generated]=\"Action.Type === 'Generated'\">\n <i [class]=\"getActionIcon()\"></i>\n </div>\n\n <!-- Name & Description -->\n <div class=\"item-main\">\n <span class=\"item-name\" [title]=\"Action.Name\">{{ Action.Name }}</span>\n @if (!IsCompact && Action.Description) {\n <span class=\"item-description\" [title]=\"Action.Description\">{{ Action.Description }}</span>\n }\n </div>\n\n <!-- Category -->\n <button class=\"item-category\" (click)=\"onCategoryClick($event)\" [title]=\"'View category: ' + getCategoryName()\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ getCategoryName() }}</span>\n </button>\n\n <!-- Status -->\n <div class=\"item-status\">\n <kendo-chip\n [themeColor]=\"getStatusColor()\"\n [size]=\"'small'\">\n {{ Action.Status }}\n </kendo-chip>\n </div>\n\n <!-- Type -->\n <div class=\"item-type\">\n @if (Action.Type === 'Generated') {\n <span class=\"type-badge ai\">\n <i class=\"fa-solid fa-robot\"></i>\n @if (!IsCompact) {\n AI\n }\n </span>\n } @else {\n <span class=\"type-badge custom\">\n <i class=\"fa-solid fa-code\"></i>\n @if (!IsCompact) {\n Custom\n }\n </span>\n }\n </div>\n\n <!-- Params Count -->\n @if (!IsCompact) {\n <div class=\"item-params\" [title]=\"(Action.Params.length || 0) + ' parameters'\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>{{ Action.Params.length || 0 }}</span>\n </div>\n }\n\n <!-- Updated -->\n <div class=\"item-updated\" [title]=\"Action.__mj_UpdatedAt | date:'full'\">\n {{ formatDate(Action.__mj_UpdatedAt) }}\n </div>\n\n <!-- Actions -->\n <div class=\"item-actions\">\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Run Action\"\n [disabled]=\"Action.Status !== 'Active'\"\n (click)=\"onRunClick($event)\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Edit Action\"\n (click)=\"onEditClick($event)\">\n <i class=\"fa-solid fa-pen\"></i>\n </button>\n </div>\n</div>\n", styles: [".action-list-item {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--
|
|
193
|
+
args: [{ standalone: false, selector: 'mj-action-list-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"action-list-item\" [class.compact]=\"IsCompact\" (click)=\"onRowClick()\">\n <!-- Icon -->\n <div class=\"item-icon\" [class.ai-generated]=\"Action.Type === 'Generated'\">\n <i [class]=\"getActionIcon()\"></i>\n </div>\n\n <!-- Name & Description -->\n <div class=\"item-main\">\n <span class=\"item-name\" [title]=\"Action.Name\">{{ Action.Name }}</span>\n @if (!IsCompact && Action.Description) {\n <span class=\"item-description\" [title]=\"Action.Description\">{{ Action.Description }}</span>\n }\n </div>\n\n <!-- Category -->\n <button class=\"item-category\" (click)=\"onCategoryClick($event)\" [title]=\"'View category: ' + getCategoryName()\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ getCategoryName() }}</span>\n </button>\n\n <!-- Status -->\n <div class=\"item-status\">\n <kendo-chip\n [themeColor]=\"getStatusColor()\"\n [size]=\"'small'\">\n {{ Action.Status }}\n </kendo-chip>\n </div>\n\n <!-- Type -->\n <div class=\"item-type\">\n @if (Action.Type === 'Generated') {\n <span class=\"type-badge ai\">\n <i class=\"fa-solid fa-robot\"></i>\n @if (!IsCompact) {\n AI\n }\n </span>\n } @else {\n <span class=\"type-badge custom\">\n <i class=\"fa-solid fa-code\"></i>\n @if (!IsCompact) {\n Custom\n }\n </span>\n }\n </div>\n\n <!-- Params Count -->\n @if (!IsCompact) {\n <div class=\"item-params\" [title]=\"(Action.Params.length || 0) + ' parameters'\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>{{ Action.Params.length || 0 }}</span>\n </div>\n }\n\n <!-- Updated -->\n <div class=\"item-updated\" [title]=\"Action.__mj_UpdatedAt | date:'full'\">\n {{ formatDate(Action.__mj_UpdatedAt) }}\n </div>\n\n <!-- Actions -->\n <div class=\"item-actions\">\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Run Action\"\n [disabled]=\"Action.Status !== 'Active'\"\n (click)=\"onRunClick($event)\">\n <i class=\"fa-solid fa-play\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n title=\"Edit Action\"\n (click)=\"onEditClick($event)\">\n <i class=\"fa-solid fa-pen\"></i>\n </button>\n </div>\n</div>\n", styles: [".action-list-item {\n display: grid;\n grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.action-list-item:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.action-list-item.compact {\n grid-template-columns: 32px 1fr 120px 80px 50px 80px 60px;\n padding: 8px 16px;\n gap: 8px;\n}\n\n/* Icon */\n.item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.compact .item-icon {\n width: 28px;\n height: 28px;\n border-radius: 6px;\n}\n\n.item-icon i {\n font-size: 14px;\n color: var(--mj-brand-primary);\n}\n\n.compact .item-icon i {\n font-size: 12px;\n}\n\n.item-icon.ai-generated {\n background: linear-gradient(135deg, color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface)), color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)));\n}\n\n/* Main */\n.item-main {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.item-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.compact .item-name {\n font-size: 13px;\n}\n\n.item-description {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Category */\n.item-category {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border: none;\n background: transparent;\n border-radius: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item-category:hover {\n background: var(--mj-bg-surface-active);\n color: var(--mj-brand-primary);\n}\n\n.item-category i {\n font-size: 11px;\n color: var(--mj-status-warning);\n flex-shrink: 0;\n}\n\n.item-category span {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Status */\n.item-status {\n display: flex;\n justify-content: flex-start;\n}\n\n/* Type */\n.item-type {\n display: flex;\n justify-content: flex-start;\n}\n\n.type-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n padding: 2px 8px;\n border-radius: 10px;\n}\n\n.type-badge.ai {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.type-badge.custom {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-muted);\n}\n\n.type-badge i {\n font-size: 10px;\n}\n\n/* Params */\n.item-params {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.item-params i {\n font-size: 11px;\n}\n\n/* Updated */\n.item-updated {\n font-size: 12px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n}\n\n/* Actions */\n.item-actions {\n display: flex;\n gap: 2px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.action-list-item:hover .item-actions {\n opacity: 1;\n}\n\n.item-actions button {\n padding: 4px;\n}\n\n.item-actions button i {\n font-size: 12px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n .action-list-item {\n grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n }\n\n .action-list-item .item-category,\n .action-list-item .item-params {\n display: none;\n }\n}\n\n@media (max-width: 768px) {\n .action-list-item {\n grid-template-columns: 32px 1fr 70px 70px;\n }\n\n .action-list-item .item-type,\n .action-list-item .item-updated {\n display: none;\n }\n\n .item-actions {\n opacity: 1;\n }\n}\n"] }]
|
|
194
194
|
}], null, { Action: [{
|
|
195
195
|
type: Input
|
|
196
196
|
}], Categories: [{
|