diff --git a/.gitignore b/.gitignore index 5bf25ccac6..3a703b0f97 100644 --- a/.gitignore +++ b/.gitignore @@ -101,3 +101,10 @@ src/scaffolding.config # Visual Studio Code .vscode + +# AI +.claude +CLAUDE.md + +# local testing +.local \ No newline at end of file diff --git a/docs/frontend/audit-capability-card.md b/docs/frontend/audit-capability-card.md new file mode 100644 index 0000000000..67b919b458 --- /dev/null +++ b/docs/frontend/audit-capability-card.md @@ -0,0 +1,195 @@ +# Audit Capability Card Testing Guide + +This document describes the audit capability card component, its various states, and how to test them both manually and automatically. + +## Overview + +The Audit Capability Card displays on the ServicePulse dashboard and shows the status of the auditing feature. The card's status depends on: + +1. Whether audit instances are configured +2. Whether audit instances are available (online) +3. Whether successful messages exist (endpoints configured for auditing) +4. Whether the ServiceControl version supports the "All Messages" feature (>= 6.6.0) + +## Card States + +| Status | Condition | Badge | Action Button | +|--------------------------|--------------------------------------------------|-------------|---------------| +| Instance Not Configured | No audit instances configured | - | Get Started | +| Unavailable | All audit instances offline | Unavailable | Learn More | +| Degraded | Some audit instances offline | Degraded | - | +| Endpoints Not Configured | Instance available but no messages OR SC < 6.6.0 | - | Learn More | +| Available | Instance available with messages AND SC >= 6.6.0 | Available | View Messages | + +## Manual Testing with Mock Scenarios + +### Prerequisites + +```bash +cd src/Frontend +npm install +``` + +### Running the Dev Server with Mocks + +```bash +npm run dev:mocks +``` + +This starts the dev server at `http://localhost:5173` with MSW (Mock Service Worker) intercepting API calls. + +### Switching Between Scenarios + +Set the `VITE_MOCK_SCENARIO` environment variable before running the dev server: + +```bash +# Linux/macOS +VITE_MOCK_SCENARIO=audit-available npm run dev:mocks + +# Windows CMD +set VITE_MOCK_SCENARIO=audit-available && npm run dev:mocks + +# Windows PowerShell +$env:VITE_MOCK_SCENARIO="audit-available"; npm run dev:mocks +``` + +Open the browser console to see available scenarios. + +#### Available Audit Scenarios + +| Scenario | Status | Badge | Button | Description | Indicators | +|----------------------------|--------------------------|-------------|---------------|------------------------------------------------------------------------------------------------------|-------------------------------------------| +| `audit-no-instance` | Instance Not Configured | - | Get Started | "A ServiceControl Audit instance has not been configured..." | None | +| `audit-unavailable` | Unavailable | Unavailable | Learn More | "All ServiceControl Audit instances are configured but not responding..." | Instance: ❌ | +| `audit-degraded` | Partially Unavailable | Degraded | - | "Some ServiceControl Audit instances are not responding." | Instance 1: ✅, Instance 2: ❌, Messages: ✅ | +| `audit-available` | Available | Available | View Messages | "All ServiceControl Audit instances are available and endpoints have been configured..." | Instance: ✅, Messages: ✅ | +| `audit-old-sc-version` | Endpoints Not Configured | - | Learn More | "A ServiceControl Audit instance is connected but no successful messages..." | Instance: ✅, Messages: ⚠️ (SC < 6.6.0) | +| `audit-no-messages` | Endpoints Not Configured | - | Learn More | "A ServiceControl Audit instance is connected but no successful messages have been processed yet..." | Instance: ✅, Messages: ⚠️ | +| `audit-multiple-instances` | Available | Available | View Messages | "All ServiceControl Audit instances are available..." | Instance 1: ✅, Instance 2: ✅, Messages: ✅ | + +**Indicator Legend:** ✅ = Available/Success, ❌ = Unavailable/Error, ⚠️ = Warning/Not Configured + +### Adding New Scenarios + +1. Add a scenario precondition to `src/Frontend/test/preconditions/platformCapabilities.ts`: + +```typescript +export const scenarioMyScenario = async ({ driver }: SetupFactoryOptions) => { + await driver.setUp(precondition.serviceControlWithMonitoring); + // Add scenario-specific preconditions here +}; +``` + +2. Create a new file in `src/Frontend/test/mocks/scenarios/` (e.g., `my-scenario.ts`): + +```typescript +import { setupWorker } from "msw/browser"; +import { Driver } from "../../driver"; +import { makeMockEndpoint, makeMockEndpointDynamic } from "../../mock-endpoint"; +import * as precondition from "../../preconditions"; + +export const worker = setupWorker(); +const mockEndpoint = makeMockEndpoint({ mockServer: worker }); +const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker }); + +const makeDriver = (): Driver => ({ + goTo() { throw new Error("Not implemented"); }, + mockEndpoint, + mockEndpointDynamic, + setUp(factory) { return factory({ driver: this }); }, + disposeApp() { throw new Error("Not implemented"); }, +}); + +const driver = makeDriver(); + +export const setupComplete = (async () => { + await driver.setUp(precondition.scenarioMyScenario); +})(); +``` + +1. Register it in `src/Frontend/test/mocks/scenarios/index.ts`: + +```typescript +const scenarios: Record Promise> = { + // ... existing scenarios + "my-scenario": () => import("./my-scenario"), +}; +``` + +## Automated Tests + +### Test Files + +| File | Type | Description | +|------------------------------------------------------------------------------------|-------------|-----------------------------------------| +| `src/Frontend/test/specs/platformcapabilities/audit-capability-card.spec.ts` | Application | End-to-end tests for the card component | +| `src/Frontend/test/specs/platformcapabilities/auditing-capability-helpers.spec.ts` | Unit | Tests for helper functions | + +### Running Automated Tests + +From the `src/Frontend` directory: + +```bash +# Run all audit capability tests +npx vitest run test/specs/platformcapabilities/audit-capability-card.spec.ts + +# Run helper function unit tests +npx vitest run test/specs/platformcapabilities/auditing-capability-helpers.spec.ts + +# Run all platform capability tests +npx vitest run test/specs/platformcapabilities/ +``` + +### Test Coverage + +#### Application Tests (`audit-capability-card.spec.ts`) + +| Rule | Test Case | +|---------------------------------|---------------------------------------------------------------| +| No audit instance configured | Shows "Get Started" button | +| Audit instance unavailable | Shows "Unavailable" status | +| Partially unavailable instances | Shows "Degraded" status | +| Available but no messages | Shows "Endpoints Not Configured" status | +| Available with messages | Shows "Available" status + "View Messages" button | +| ServiceControl < 6.6.0 | Shows "Endpoints Not Configured" (All Messages not supported) | +| Single instance indicator | Shows "Instance" label | +| Messages indicator | Shows "Messages" label when messages exist | +| Multiple instances | Shows numbered "Instance 1", "Instance 2" labels | + +#### Unit Tests (`auditing-capability-helpers.spec.ts`) + +| Function | Test Cases | +|-----------------------------------------|--------------------------------------------------------------------| +| `isAuditInstance` | Audit type, error type, unknown type, undefined type | +| `filterAuditInstances` | null, undefined, empty, mixed, no audit, all audit | +| `allAuditInstancesUnavailable` | null, undefined, empty, all unavailable, all online, mixed, single | +| `hasUnavailableAuditInstances` | null, undefined, empty, at least one, all, none | +| `hasAvailableAuditInstances` | null, undefined, empty, at least one, all, none | +| `hasPartiallyUnavailableAuditInstances` | null, undefined, empty, mixed, all online, all unavailable, single | + +## Key Source Files + +| File | Purpose | +|---------------------------------------------------------------------------------------|----------------------------------------| +| `src/Frontend/src/components/platformcapabilities/capabilities/AuditingCapability.ts` | Main composable and helper functions | +| `src/Frontend/src/components/audit/isAllMessagesSupported.ts` | Version check for All Messages feature | +| `src/Frontend/test/preconditions/platformCapabilities.ts` | Test preconditions and fixtures | +| `src/Frontend/test/mocks/scenarios/` | Manual testing scenarios | + +## Troubleshooting + +### Scenario not loading + +1. Check the browser console for errors +2. Verify the scenario name matches exactly (case-sensitive) +3. Ensure MSW is enabled (look for "[MSW] Mocking enabled" in console) + +### Tests failing + +1. Run `npm run type-check` to verify TypeScript compilation +2. Check if preconditions are properly set up +3. Use `--reporter=verbose` for detailed test output: + + ```bash + npx vitest run test/specs/platformcapabilities/ --reporter=verbose + ``` diff --git a/docs/frontend/error-capability-card.md b/docs/frontend/error-capability-card.md new file mode 100644 index 0000000000..574102b58c --- /dev/null +++ b/docs/frontend/error-capability-card.md @@ -0,0 +1,206 @@ +# Error/Recoverability Capability Card Testing Guide + +This document describes the error/recoverability capability card component, its various states, and how to test them both manually and automatically. + +## Overview + +The Recoverability Capability Card displays on the ServicePulse dashboard and shows the status of the error handling (recoverability) feature. The card's status depends on whether the ServiceControl instance is available and responding. + +Unlike the Monitoring and Auditing cards, the Recoverability card has a simpler state model because: + +- ServiceControl is required for the dashboard to function +- If ServiceControl is unavailable, the entire dashboard shows a connection error view +- There is no "not configured" state because ServiceControl is always configured for the dashboard to work + +## Card States + +| Status | Condition | Badge | Action Button | +|-------------|-------------------------------------------|-------------|----------------------| +| Unavailable | ServiceControl instance is not responding | Unavailable | Learn More | +| Available | ServiceControl instance is available | Available | View Failed Messages | + +## Manual Testing with Mock Scenarios + +### Prerequisites + +```bash +cd src/Frontend +npm install +``` + +### Running the Dev Server with Mocks + +```bash +npm run dev:mocks +``` + +This starts the dev server at `http://localhost:5173` with MSW (Mock Service Worker) intercepting API calls. + +### Switching Between Scenarios + +Set the `VITE_MOCK_SCENARIO` environment variable before running the dev server: + +```bash +# Linux/macOS +VITE_MOCK_SCENARIO=recoverability-available npm run dev:mocks + +# Windows CMD +set VITE_MOCK_SCENARIO=recoverability-available && npm run dev:mocks + +# Windows PowerShell +$env:VITE_MOCK_SCENARIO="recoverability-available"; npm run dev:mocks +``` + +Open the browser console to see available scenarios. + +#### Available Recoverability Scenarios + +| Scenario | Status | Badge | Button | Description | Indicators | +|----------------------------|-----------|-----------|----------------------|---------------------------------------------|---------------------| +| `recoverability-available` | Available | Available | View Failed Messages | "The ServiceControl instance is available." | Instance: Available | + +### Testing "Unavailable" State + +The "Unavailable" state cannot be tested via mock scenarios because when ServiceControl is unavailable, the entire dashboard is replaced with a connection error view. The recoverability card is only visible when ServiceControl is connected. + +To observe the connection error behavior: + +1. Edit `src/Frontend/public/js/app.constants.js` +2. Set `service_control_url` to an invalid/unreachable URL +3. Run `npm run dev` (without mocks) + +### Adding New Scenarios + +1. Add a scenario precondition to `src/Frontend/test/preconditions/platformCapabilities.ts`: + +```typescript +export const scenarioMyScenario = async ({ driver }: SetupFactoryOptions) => { + await driver.setUp(precondition.serviceControlWithMonitoring); + // Add scenario-specific preconditions here +}; +``` + +1. Create a new file in `src/Frontend/test/mocks/scenarios/` (e.g., `my-scenario.ts`): + +```typescript +import { setupWorker } from "msw/browser"; +import { Driver } from "../../driver"; +import { makeMockEndpoint, makeMockEndpointDynamic } from "../../mock-endpoint"; +import * as precondition from "../../preconditions"; + +export const worker = setupWorker(); +const mockEndpoint = makeMockEndpoint({ mockServer: worker }); +const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker }); + +const makeDriver = (): Driver => ({ + goTo() { throw new Error("Not implemented"); }, + mockEndpoint, + mockEndpointDynamic, + setUp(factory) { return factory({ driver: this }); }, + disposeApp() { throw new Error("Not implemented"); }, +}); + +const driver = makeDriver(); + +export const setupComplete = (async () => { + await driver.setUp(precondition.scenarioMyScenario); +})(); +``` + +1. Register it in `src/Frontend/test/mocks/scenarios/index.ts`: + +```typescript +const scenarios: Record Promise> = { + // ... existing scenarios + "my-scenario": () => import("./my-scenario"), +}; +``` + +## Automated Tests + +### Test Files + +| File | Type | Description | +|---------------------------------------------------------------------------------------|-------------|-----------------------------------------| +| `src/Frontend/test/specs/platformcapabilities/recoverability-capability-card.spec.ts` | Application | End-to-end tests for the card component | + +### Running Automated Tests + +From the `src/Frontend` directory: + +```bash +# Run all recoverability capability tests +npx vitest run test/specs/platformcapabilities/recoverability-capability-card.spec.ts + +# Run all platform capability tests +npx vitest run test/specs/platformcapabilities/ +``` + +### Test Coverage + +#### Application Tests (`recoverability-capability-card.spec.ts`) + +| Rule | Test Case | +|-----------------------------------|----------------------------------------------------------| +| ServiceControl instance available | Shows "Available" status + "View Failed Messages" button | +| Instance indicator | Shows "Instance" indicator with version info | + +**Note:** The "Unavailable" state is not tested because when ServiceControl is unavailable, the entire dashboard is replaced with a connection error view, making the recoverability card inaccessible. + +## Key Source Files + +| File | Purpose | +|------------------------------------------------------------------------------------------|-----------------------------------------| +| `src/Frontend/src/components/platformcapabilities/capabilities/ErrorCapability.ts` | Main composable for recoverability card | +| `src/Frontend/src/stores/ConnectionsAndStatsStore.ts` | Connection state management | +| `src/Frontend/test/specs/platformcapabilities/questions/recoverabilityCapabilityCard.ts` | Test helper functions | +| `src/Frontend/test/mocks/scenarios/` | Manual testing scenarios | + +## How Recoverability Status is Determined + +The recoverability status is determined by checking the ServiceControl connection state: + +```typescript +// Simplified status determination logic +const isConnected = connectionState.connected && !connectionState.unableToConnect; + +if (!isConnected) { + return CapabilityStatus.Unavailable; +} +return CapabilityStatus.Available; +``` + +## Status Indicators + +The recoverability card shows a single "Instance" indicator that displays: + +- The ServiceControl instance URL +- The ServiceControl version number +- Connection status (Available or Unavailable icon) + +## Relationship with Dashboard + +The Recoverability capability card is tightly coupled to the main ServiceControl connection: + +- When ServiceControl connects successfully, the dashboard loads and the card shows "Available" +- When ServiceControl fails to connect, the dashboard shows a full-page connection error instead of loading the dashboard with an "Unavailable" card + +This is different from the Monitoring and Auditing cards, which can show "Unavailable" states independently while the dashboard remains functional. + +## Troubleshooting + +### Scenario not loading + +1. Check the browser console for errors +2. Verify the scenario name matches exactly (case-sensitive) +3. Ensure MSW is enabled (look for "[MSW] Mocking enabled" in console) + +### Tests failing + +1. Run `npm run type-check` to verify TypeScript compilation +2. Check if preconditions are properly set up +3. Use `--reporter=verbose` for detailed test output: + + ```bash + npx vitest run test/specs/platformcapabilities/ --reporter=verbose + ``` diff --git a/docs/frontend/monitoring-capability-card.md b/docs/frontend/monitoring-capability-card.md new file mode 100644 index 0000000000..3fe1c7762a --- /dev/null +++ b/docs/frontend/monitoring-capability-card.md @@ -0,0 +1,208 @@ +# Monitoring Capability Card Testing Guide + +This document describes the monitoring capability card component, its various states, and how to test them both manually and automatically. + +## Overview + +The Monitoring Capability Card displays on the ServicePulse dashboard and shows the status of the monitoring feature. The card's status depends on: + +1. Whether the monitoring instance is configured in ServicePulse +2. Whether the monitoring instance is available (responding) +3. Whether endpoints are sending throughput data (monitoring plugin enabled) + +## Card States + +| Status | Condition | Badge | Action Button | +|--------------------------|---------------------------------------------------|-------------|---------------| +| Instance Not Configured | Monitoring URL not configured in ServicePulse | - | Get Started | +| Unavailable | Monitoring instance configured but not responding | Unavailable | Learn More | +| Endpoints Not Configured | Instance available but no endpoints sending data | - | Learn More | +| Available | Instance available with endpoints sending data | Available | View Metrics | + +## Manual Testing with Mock Scenarios + +### Prerequisites + +```bash +cd src/Frontend +npm install +``` + +### Running the Dev Server with Mocks + +```bash +npm run dev:mocks +``` + +This starts the dev server at `http://localhost:5173` with MSW (Mock Service Worker) intercepting API calls. + +### Switching Between Scenarios + +Set the `VITE_MOCK_SCENARIO` environment variable before running the dev server: + +```bash +# Linux/macOS +VITE_MOCK_SCENARIO=monitoring-available npm run dev:mocks + +# Windows CMD +set VITE_MOCK_SCENARIO=monitoring-available && npm run dev:mocks + +# Windows PowerShell +$env:VITE_MOCK_SCENARIO="monitoring-available"; npm run dev:mocks +``` + +Open the browser console to see available scenarios. + +#### Available Monitoring Scenarios + +| Scenario | Status | Badge | Button | Description | Indicators | +|---------------------------|--------------------------|-------------|--------------|-------------------------------------------------------------------------------------------------------------------|--------------------------| +| `monitoring-available` | Available | Available | View Metrics | "The ServiceControl Monitoring instance is available and endpoints have been configured to send throughput data." | Instance: ✅, Metrics: ✅ | +| `monitoring-unavailable` | Unavailable | Unavailable | Learn More | "The ServiceControl Monitoring instance is configured but not responding..." | Instance: ❌ | +| `monitoring-no-endpoints` | Endpoints Not Configured | - | Learn More | "The ServiceControl Monitoring instance is connected but no endpoints are sending throughput data..." | Instance: ✅, Metrics: ⚠️ | + +**Indicator Legend:** ✅ = Available/Success, ❌ = Unavailable/Error, ⚠️ = Warning/Not Configured + +### Testing "Instance Not Configured" State + +The "Instance Not Configured" state cannot be tested via mock scenarios because it requires modifying the ServicePulse configuration. To test this state: + +1. Edit `src/Frontend/public/js/app.constants.js` +2. Change `monitoring_urls` to `['!']` or `[]` +3. Run `npm run dev` (without mocks) + +```javascript +window.defaultConfig = { + // ... other config + monitoring_urls: ['!'], // Disables monitoring +}; +``` + +### Adding New Scenarios + +1. Add a scenario precondition to `src/Frontend/test/preconditions/platformCapabilities.ts`: + +```typescript +export const scenarioMyScenario = async ({ driver }: SetupFactoryOptions) => { + await driver.setUp(precondition.serviceControlWithMonitoring); + // Add scenario-specific preconditions here +}; +``` + +1. Create a new file in `src/Frontend/test/mocks/scenarios/` (e.g., `my-scenario.ts`): + +```typescript +import { setupWorker } from "msw/browser"; +import { Driver } from "../../driver"; +import { makeMockEndpoint, makeMockEndpointDynamic } from "../../mock-endpoint"; +import * as precondition from "../../preconditions"; + +export const worker = setupWorker(); +const mockEndpoint = makeMockEndpoint({ mockServer: worker }); +const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker }); + +const makeDriver = (): Driver => ({ + goTo() { throw new Error("Not implemented"); }, + mockEndpoint, + mockEndpointDynamic, + setUp(factory) { return factory({ driver: this }); }, + disposeApp() { throw new Error("Not implemented"); }, +}); + +const driver = makeDriver(); + +export const setupComplete = (async () => { + await driver.setUp(precondition.scenarioMyScenario); +})(); +``` + +1. Register it in `src/Frontend/test/mocks/scenarios/index.ts`: + +```typescript +const scenarios: Record Promise> = { + // ... existing scenarios + "my-scenario": () => import("./my-scenario"), +}; +``` + +## Automated Tests + +### Test Files + +| File | Type | Description | +|-----------------------------------------------------------------------------------|-------------|-----------------------------------------| +| `src/Frontend/test/specs/platformcapabilities/monitoring-capability-card.spec.ts` | Application | End-to-end tests for the card component | + +### Running Automated Tests + +From the `src/Frontend` directory: + +```bash +# Run all monitoring capability tests +npx vitest run test/specs/platformcapabilities/monitoring-capability-card.spec.ts + +# Run all platform capability tests +npx vitest run test/specs/platformcapabilities/ +``` + +### Test Coverage + +#### Application Tests (`monitoring-capability-card.spec.ts`) + +| Rule | Test Case | +|-------------------------------------------|------------------------------------------------------| +| Available with endpoints sending data | Shows "Available" status + "View Metrics" button | +| Available but no endpoints sending data | Shows "Endpoints Not Configured" status | +| Instance configured but not responding | Shows "Unavailable" status | +| Monitoring not configured in ServicePulse | Shows "Get Started" button | +| Instance indicator | Shows "Instance" label when monitoring is configured | +| Metrics indicator | Shows "Metrics" label when instance is connected | + +## Key Source Files + +| File | Purpose | +|-----------------------------------------------------------------------------------------|-------------------------------------| +| `src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts` | Main composable for monitoring card | +| `src/Frontend/src/components/monitoring/monitoringClient.ts` | Monitoring API client | +| `src/Frontend/test/preconditions/platformCapabilities.ts` | Test preconditions and fixtures | +| `src/Frontend/test/mocks/scenarios/` | Manual testing scenarios | + +## How Monitoring Status is Determined + +The monitoring status is determined by checking three conditions in order: + +1. **Is monitoring configured?** - Checks if `monitoring_urls` contains a valid URL (not "!" or empty) +2. **Is the instance responding?** - Checks if the connection to the monitoring instance succeeds +3. **Are endpoints sending data?** - Checks if any monitored endpoints exist + +```typescript +// Simplified status determination logic +if (!isMonitoringEnabled) { + return CapabilityStatus.InstanceNotConfigured; +} +if (!connectionSuccessful) { + return CapabilityStatus.Unavailable; +} +if (!hasMonitoredEndpoints) { + return CapabilityStatus.EndpointsNotConfigured; +} +return CapabilityStatus.Available; +``` + +## Troubleshooting + +### Scenario not loading + +1. Check the browser console for errors +2. Verify the scenario name matches exactly (case-sensitive) +3. Ensure MSW is enabled (look for "[MSW] Mocking enabled" in console) + +### Tests failing + +1. Run `npm run type-check` to verify TypeScript compilation +2. Check if preconditions are properly set up +3. Use `--reporter=verbose` for detailed test output: + + ```bash + npx vitest run test/specs/platformcapabilities/ --reporter=verbose + ``` diff --git a/src/Frontend/public/img/all-messages-filter.png b/src/Frontend/public/img/all-messages-filter.png new file mode 100644 index 0000000000..31ed8ffdb2 Binary files /dev/null and b/src/Frontend/public/img/all-messages-filter.png differ diff --git a/src/Frontend/public/img/all-messages-refresh.png b/src/Frontend/public/img/all-messages-refresh.png new file mode 100644 index 0000000000..e6836a0f66 Binary files /dev/null and b/src/Frontend/public/img/all-messages-refresh.png differ diff --git a/src/Frontend/public/img/all-messages-sort.png b/src/Frontend/public/img/all-messages-sort.png new file mode 100644 index 0000000000..73fa5836e8 Binary files /dev/null and b/src/Frontend/public/img/all-messages-sort.png differ diff --git a/src/Frontend/public/img/all-messages.png b/src/Frontend/public/img/all-messages.png new file mode 100644 index 0000000000..95942c43ed Binary files /dev/null and b/src/Frontend/public/img/all-messages.png differ diff --git a/src/Frontend/public/img/audit-instance-overview.png b/src/Frontend/public/img/audit-instance-overview.png new file mode 100644 index 0000000000..4e15ca3865 Binary files /dev/null and b/src/Frontend/public/img/audit-instance-overview.png differ diff --git a/src/Frontend/public/img/failed-message-page.png b/src/Frontend/public/img/failed-message-page.png new file mode 100644 index 0000000000..8caa4b2205 Binary files /dev/null and b/src/Frontend/public/img/failed-message-page.png differ diff --git a/src/Frontend/public/img/flow-diagram-nodes.png b/src/Frontend/public/img/flow-diagram-nodes.png new file mode 100644 index 0000000000..72efb59595 Binary files /dev/null and b/src/Frontend/public/img/flow-diagram-nodes.png differ diff --git a/src/Frontend/public/img/flow-diagram.png b/src/Frontend/public/img/flow-diagram.png new file mode 100644 index 0000000000..b49bb072d8 Binary files /dev/null and b/src/Frontend/public/img/flow-diagram.png differ diff --git a/src/Frontend/public/img/message-details-body.png b/src/Frontend/public/img/message-details-body.png new file mode 100644 index 0000000000..9b5c08647a Binary files /dev/null and b/src/Frontend/public/img/message-details-body.png differ diff --git a/src/Frontend/public/img/message-details-headers.png b/src/Frontend/public/img/message-details-headers.png new file mode 100644 index 0000000000..910d330554 Binary files /dev/null and b/src/Frontend/public/img/message-details-headers.png differ diff --git a/src/Frontend/public/img/message-metadata.png b/src/Frontend/public/img/message-metadata.png new file mode 100644 index 0000000000..05c3fd0d27 Binary files /dev/null and b/src/Frontend/public/img/message-metadata.png differ diff --git a/src/Frontend/public/img/monitor-instance-overview.png b/src/Frontend/public/img/monitor-instance-overview.png new file mode 100644 index 0000000000..f642f37cd5 Binary files /dev/null and b/src/Frontend/public/img/monitor-instance-overview.png differ diff --git a/src/Frontend/public/img/saga-diagram-overview.png b/src/Frontend/public/img/saga-diagram-overview.png new file mode 100644 index 0000000000..49ea00398e Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-overview.png differ diff --git a/src/Frontend/public/img/saga-diagram-state-change.png b/src/Frontend/public/img/saga-diagram-state-change.png new file mode 100644 index 0000000000..78cc414fc9 Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-state-change.png differ diff --git a/src/Frontend/public/img/saga-diagram-timeout-view.png b/src/Frontend/public/img/saga-diagram-timeout-view.png new file mode 100644 index 0000000000..c61f395eee Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-timeout-view.png differ diff --git a/src/Frontend/public/img/sequence-diagram.png b/src/Frontend/public/img/sequence-diagram.png new file mode 100644 index 0000000000..51c632ada1 Binary files /dev/null and b/src/Frontend/public/img/sequence-diagram.png differ diff --git a/src/Frontend/public/img/servicepulse-monitoring-details.png b/src/Frontend/public/img/servicepulse-monitoring-details.png new file mode 100644 index 0000000000..e5380d0f15 Binary files /dev/null and b/src/Frontend/public/img/servicepulse-monitoring-details.png differ diff --git a/src/Frontend/public/img/servicepulse-monitoring-tab.png b/src/Frontend/public/img/servicepulse-monitoring-tab.png new file mode 100644 index 0000000000..4deeec55b9 Binary files /dev/null and b/src/Frontend/public/img/servicepulse-monitoring-tab.png differ diff --git a/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png b/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png new file mode 100644 index 0000000000..207f2abade Binary files /dev/null and b/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png differ diff --git a/src/Frontend/src/components/PageBanner.vue b/src/Frontend/src/components/PageBanner.vue new file mode 100644 index 0000000000..9ccd3feee1 --- /dev/null +++ b/src/Frontend/src/components/PageBanner.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue index 0a18780519..851c973f29 100644 --- a/src/Frontend/src/components/audit/AuditList.vue +++ b/src/Frontend/src/components/audit/AuditList.vue @@ -5,10 +5,16 @@ import { useRoute, useRouter } from "vue-router"; import ResultsCount from "@/components/ResultsCount.vue"; import FiltersPanel from "@/components/audit/FiltersPanel.vue"; import AuditListItem from "@/components/audit/AuditListItem.vue"; -import { onBeforeMount, ref, watch } from "vue"; +import { computed, onBeforeMount, ref, watch } from "vue"; import RefreshConfig from "../RefreshConfig.vue"; import LoadingSpinner from "@/components/LoadingSpinner.vue"; import useFetchWithAutoRefresh from "@/composables/autoRefresh"; +import WizardDialog from "@/components/platformcapabilities/WizardDialog.vue"; +import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages"; +import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability"; +import { CapabilityStatus } from "@/components/platformcapabilities/constants"; +import PageBanner, { type BannerMessage } from "@/components/PageBanner.vue"; +import { useConfigurationStore } from "@/stores/ConfigurationStore"; const store = useAuditStore(); const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store); @@ -17,6 +23,40 @@ const router = useRouter(); const autoRefreshValue = ref(null); const { refreshNow, isRefreshing, updateInterval, isActive, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 0); const firstLoad = ref(true); +const showWizard = ref(false); +const { status: auditStatus } = useAuditingCapability(); +const wizardPages = computed(() => getAuditingWizardPages(auditStatus.value)); +const configurationStore = useConfigurationStore(); +const { isMassTransitConnected } = storeToRefs(configurationStore); + +const bannerMessage = computed(() => { + switch (auditStatus.value) { + case CapabilityStatus.InstanceNotConfigured: + return { + title: "No ServiceControl Audit instance configured.", + description: "A ServiceControl Audit instance is required to view processed messages. Click 'Get Started' to learn how to set one up.", + }; + case CapabilityStatus.EndpointsNotConfigured: + return { + title: "No successful audit messages found.", + description: "Auditing may not be enabled on your endpoints. Click 'Get Started' to find out how to enable auditing.", + }; + case CapabilityStatus.Unavailable: + return { + title: "All ServiceControl Audit instances are not responding.", + description: "The configured audit instances appears to be offline or unreachable. Check that the service is running and accessible.", + }; + case CapabilityStatus.PartiallyUnavailable: + return { + title: "Some ServiceControl Audit instances are not responding.", + description: "One or more audit instances appear to be offline. Some audit data may be unavailable until all instances are restored.", + }; + default: + return null; + } +}); + +const showBannerAction = computed(() => auditStatus.value !== CapabilityStatus.Unavailable && auditStatus.value !== CapabilityStatus.PartiallyUnavailable); onBeforeMount(() => { setQuery(); @@ -100,7 +140,9 @@ watch(autoRefreshValue, (newValue) => {
+ +