Skip to content

Commit 98d2f27

Browse files
warwickschroederjohnsimons
warwickschroeder
and
johnsimons
authored
Add platform capability section to dashboard and All Messages page (#2719)
* Replace moment with dayjs This should save ~286KB gzipped * Initial checkin for the Platform Capabilities section on the dashboard * Remove unused styles * Change help URL * Add a banner to the All Messages view if no successful messages * Update naming for view data button * Update icon on All Messages page * Remove concept of Partially Available * Update message constants * Remove unused styles * WIP * WIP - Clean and change the way config is grabbed * Update capability cards WIP * WIP - add promo modal pages * WIP - audit wizard promo * Update auditing and monitoring promo pages * Finish initial audit and monitoring promo work * Add error instance capability * Clean styling * Remove additional monitoring instance config * Add new mocked endpoints for new and updated stores * Move styles into component files. * Fix issues caused by master branch refactoring * Revert to master for specific files * Support remote servicecontrol instances. Now will cache remotes. Add ability to hide individual cards, or entire platform capability section. * Add tests for capability cards * Update based off feedback * Update from feedback - only a single error instance * Add tests for platform capability cards * Refactor, clean, consolidate * Update small comment * Merge conflicts with auth PR * Revert manual changes to gitignore --------- Co-authored-by: John Simons <john.simons@particular.net>
1 parent af04070 commit 98d2f27

93 files changed

Lines changed: 5127 additions & 12 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,4 @@ src/scaffolding.config
100100
*.sln.iml
101101

102102
# Visual Studio Code
103-
.vscode
104-
105-
# AI
106-
.claude
107-
CLAUDE.md
108-
109-
# local testing
110-
.local
103+
.vscode

‎docs/frontend/audit-capability-card.md‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
# Audit Capability Card Testing Guide
2+
3+
This document describes the audit capability card component, its various states, and how to test them both manually and automatically.
4+
5+
## Overview
6+
7+
The Audit Capability Card displays on the ServicePulse dashboard and shows the status of the auditing feature. The card's status depends on:
8+
9+
1. Whether audit instances are configured
10+
2. Whether audit instances are available (online)
11+
3. Whether successful messages exist (endpoints configured for auditing)
12+
4. Whether the ServiceControl version supports the "All Messages" feature (>= 6.6.0)
13+
14+
## Card States
15+
16+
| Status | Condition | Badge | Action Button |
17+
|--------------------------|--------------------------------------------------|-------------|---------------|
18+
| Instance Not Configured | No audit instances configured | - | Get Started |
19+
| Unavailable | All audit instances offline | Unavailable | Learn More |
20+
| Degraded | Some audit instances offline | Degraded | - |
21+
| Endpoints Not Configured | Instance available but no messages OR SC < 6.6.0 | - | Learn More |
22+
| Available | Instance available with messages AND SC >= 6.6.0 | Available | View Messages |
23+
24+
## Manual Testing with Mock Scenarios
25+
26+
### Prerequisites
27+
28+
```bash
29+
cd src/Frontend
30+
npm install
31+
```
32+
33+
### Running the Dev Server with Mocks
34+
35+
```bash
36+
npm run dev:mocks
37+
```
38+
39+
This starts the dev server at `http://localhost:5173` with MSW (Mock Service Worker) intercepting API calls.
40+
41+
### Switching Between Scenarios
42+
43+
Set the `VITE_MOCK_SCENARIO` environment variable before running the dev server:
44+
45+
```bash
46+
# Linux/macOS
47+
VITE_MOCK_SCENARIO=audit-available npm run dev:mocks
48+
49+
# Windows CMD
50+
set VITE_MOCK_SCENARIO=audit-available && npm run dev:mocks
51+
52+
# Windows PowerShell
53+
$env:VITE_MOCK_SCENARIO="audit-available"; npm run dev:mocks
54+
```
55+
56+
Open the browser console to see available scenarios.
57+
58+
#### Available Audit Scenarios
59+
60+
| Scenario | Status | Badge | Button | Description | Indicators |
61+
|----------------------------|--------------------------|-------------|---------------|------------------------------------------------------------------------------------------------------|-------------------------------------------|
62+
| `audit-no-instance` | Instance Not Configured | - | Get Started | "A ServiceControl Audit instance has not been configured..." | None |
63+
| `audit-unavailable` | Unavailable | Unavailable | Learn More | "All ServiceControl Audit instances are configured but not responding..." | Instance: ❌ |
64+
| `audit-degraded` | Partially Unavailable | Degraded | - | "Some ServiceControl Audit instances are not responding." | Instance 1: ✅, Instance 2: ❌, Messages: ✅ |
65+
| `audit-available` | Available | Available | View Messages | "All ServiceControl Audit instances are available and endpoints have been configured..." | Instance: ✅, Messages: ✅ |
66+
| `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) |
67+
| `audit-no-messages` | Endpoints Not Configured | - | Learn More | "A ServiceControl Audit instance is connected but no successful messages have been processed yet..." | Instance: ✅, Messages: ⚠️ |
68+
| `audit-multiple-instances` | Available | Available | View Messages | "All ServiceControl Audit instances are available..." | Instance 1: ✅, Instance 2: ✅, Messages: ✅ |
69+
70+
**Indicator Legend:** ✅ = Available/Success, ❌ = Unavailable/Error, ⚠️ = Warning/Not Configured
71+
72+
### Adding New Scenarios
73+
74+
1. Add a scenario precondition to `src/Frontend/test/preconditions/platformCapabilities.ts`:
75+
76+
```typescript
77+
export const scenarioMyScenario = async ({ driver }: SetupFactoryOptions) => {
78+
await driver.setUp(precondition.serviceControlWithMonitoring);
79+
// Add scenario-specific preconditions here
80+
};
81+
```
82+
83+
2. Create a new file in `src/Frontend/test/mocks/scenarios/` (e.g., `my-scenario.ts`):
84+
85+
```typescript
86+
import { setupWorker } from "msw/browser";
87+
import { Driver } from "../../driver";
88+
import { makeMockEndpoint, makeMockEndpointDynamic } from "../../mock-endpoint";
89+
import * as precondition from "../../preconditions";
90+
91+
export const worker = setupWorker();
92+
const mockEndpoint = makeMockEndpoint({ mockServer: worker });
93+
const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker });
94+
95+
const makeDriver = (): Driver => ({
96+
goTo() { throw new Error("Not implemented"); },
97+
mockEndpoint,
98+
mockEndpointDynamic,
99+
setUp(factory) { return factory({ driver: this }); },
100+
disposeApp() { throw new Error("Not implemented"); },
101+
});
102+
103+
const driver = makeDriver();
104+
105+
export const setupComplete = (async () => {
106+
await driver.setUp(precondition.scenarioMyScenario);
107+
})();
108+
```
109+
110+
1. Register it in `src/Frontend/test/mocks/scenarios/index.ts`:
111+
112+
```typescript
113+
const scenarios: Record<string, () => Promise<ScenarioModule>> = {
114+
// ... existing scenarios
115+
"my-scenario": () => import("./my-scenario"),
116+
};
117+
```
118+
119+
## Automated Tests
120+
121+
### Test Files
122+
123+
| File | Type | Description |
124+
|------------------------------------------------------------------------------------|-------------|-----------------------------------------|
125+
| `src/Frontend/test/specs/platformcapabilities/audit-capability-card.spec.ts` | Application | End-to-end tests for the card component |
126+
| `src/Frontend/test/specs/platformcapabilities/auditing-capability-helpers.spec.ts` | Unit | Tests for helper functions |
127+
128+
### Running Automated Tests
129+
130+
From the `src/Frontend` directory:
131+
132+
```bash
133+
# Run all audit capability tests
134+
npx vitest run test/specs/platformcapabilities/audit-capability-card.spec.ts
135+
136+
# Run helper function unit tests
137+
npx vitest run test/specs/platformcapabilities/auditing-capability-helpers.spec.ts
138+
139+
# Run all platform capability tests
140+
npx vitest run test/specs/platformcapabilities/
141+
```
142+
143+
### Test Coverage
144+
145+
#### Application Tests (`audit-capability-card.spec.ts`)
146+
147+
| Rule | Test Case |
148+
|---------------------------------|---------------------------------------------------------------|
149+
| No audit instance configured | Shows "Get Started" button |
150+
| Audit instance unavailable | Shows "Unavailable" status |
151+
| Partially unavailable instances | Shows "Degraded" status |
152+
| Available but no messages | Shows "Endpoints Not Configured" status |
153+
| Available with messages | Shows "Available" status + "View Messages" button |
154+
| ServiceControl < 6.6.0 | Shows "Endpoints Not Configured" (All Messages not supported) |
155+
| Single instance indicator | Shows "Instance" label |
156+
| Messages indicator | Shows "Messages" label when messages exist |
157+
| Multiple instances | Shows numbered "Instance 1", "Instance 2" labels |
158+
159+
#### Unit Tests (`auditing-capability-helpers.spec.ts`)
160+
161+
| Function | Test Cases |
162+
|-----------------------------------------|--------------------------------------------------------------------|
163+
| `isAuditInstance` | Audit type, error type, unknown type, undefined type |
164+
| `filterAuditInstances` | null, undefined, empty, mixed, no audit, all audit |
165+
| `allAuditInstancesUnavailable` | null, undefined, empty, all unavailable, all online, mixed, single |
166+
| `hasUnavailableAuditInstances` | null, undefined, empty, at least one, all, none |
167+
| `hasAvailableAuditInstances` | null, undefined, empty, at least one, all, none |
168+
| `hasPartiallyUnavailableAuditInstances` | null, undefined, empty, mixed, all online, all unavailable, single |
169+
170+
## Key Source Files
171+
172+
| File | Purpose |
173+
|---------------------------------------------------------------------------------------|----------------------------------------|
174+
| `src/Frontend/src/components/platformcapabilities/capabilities/AuditingCapability.ts` | Main composable and helper functions |
175+
| `src/Frontend/src/components/audit/isAllMessagesSupported.ts` | Version check for All Messages feature |
176+
| `src/Frontend/test/preconditions/platformCapabilities.ts` | Test preconditions and fixtures |
177+
| `src/Frontend/test/mocks/scenarios/` | Manual testing scenarios |
178+
179+
## Troubleshooting
180+
181+
### Scenario not loading
182+
183+
1. Check the browser console for errors
184+
2. Verify the scenario name matches exactly (case-sensitive)
185+
3. Ensure MSW is enabled (look for "[MSW] Mocking enabled" in console)
186+
187+
### Tests failing
188+
189+
1. Run `npm run type-check` to verify TypeScript compilation
190+
2. Check if preconditions are properly set up
191+
3. Use `--reporter=verbose` for detailed test output:
192+
193+
```bash
194+
npx vitest run test/specs/platformcapabilities/ --reporter=verbose
195+
```

0 commit comments

Comments
 (0)