139 lines
6.6 KiB
Markdown
139 lines
6.6 KiB
Markdown
# Warm Telemetry Node Card Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Replace the segmented Fleet node card with the approved warm telemetry card while preserving navigation, selection, restart behavior, and responsive matrix geometry.
|
|
|
|
**Architecture:** Keep Fleet data and operation execution in `FleetPage`; only restructure the card DOM and add one local menu-open state. Let the existing final Fleet cascade remain the single styling owner, replacing its card selectors instead of appending a new theme block. Extend the existing component and real-browser tests to lock semantic order, menu behavior, and geometry.
|
|
|
|
**Tech Stack:** React 19, TypeScript, animal-island-ui, Vitest, Testing Library, Vite, Playwright-driven real Chrome script.
|
|
|
|
## Global Constraints
|
|
|
|
- Preserve the desktop left sidebar and the 1 / 2 / 2 / 3 / 4 card matrix at 390 / 768 / 1024 / 1440 / 1920 pixels.
|
|
- Use the existing cream, warm-brown, mint, warning, and danger tokens; do not add photographic backgrounds, glass blur, diagonal stripes, red decorative borders, or card shadows.
|
|
- Keep the current dashboard link, external origin link, confirmation prompts, and operation-client behavior.
|
|
- The checkbox remains hidden outside batch mode and stays in the header control cluster when shown.
|
|
- Do not add dependencies, do not refactor unrelated modules, and do not commit the existing dirty worktree.
|
|
|
|
---
|
|
|
|
### Task 1: Lock The Card Semantic Contract
|
|
|
|
**Files:**
|
|
|
|
- Modify: `apps/web/src/fleet/fleet-page.test.tsx`
|
|
- Test: `apps/web/src/fleet/fleet-page.test.tsx`
|
|
|
|
**Interfaces:**
|
|
|
|
- Consumes: `FleetPage`, `FleetSnapshot`, existing accessible card names and operation client injection.
|
|
- Produces: regression coverage for `.fleet-card-metadata`, `.fleet-card-hardware`, `.fleet-card-telemetry`, `.fleet-card-footer`, and the `实例操作 <name>` menu trigger.
|
|
|
|
- [ ] **Step 1: Replace the old section-order assertions with the approved scan order**
|
|
|
|
```tsx
|
|
const metadata = card.querySelector('.fleet-card-metadata')!;
|
|
const hardware = within(card).getByRole('group', { name: '节点硬件信息' });
|
|
const telemetry = within(card).getByRole('region', { name: '资源遥测' });
|
|
const footer = within(card).getByRole('region', { name: '短信状态' });
|
|
expect(metadata.compareDocumentPosition(hardware) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
|
|
expect(hardware.compareDocumentPosition(telemetry) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
|
|
expect(telemetry.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
|
|
```
|
|
|
|
- [ ] **Step 2: Assert restart controls are menu-only**
|
|
|
|
```tsx
|
|
expect(within(card).queryByRole('button', { name: '重启服务 Alpha modem' })).toBeNull();
|
|
const trigger = within(card).getByRole('button', { name: '实例操作 Alpha modem' });
|
|
expect(trigger.getAttribute('aria-expanded')).toBe('false');
|
|
fireEvent.click(trigger);
|
|
expect(within(card).getByRole('menuitem', { name: '重启服务 Alpha modem' })).toBeTruthy();
|
|
expect(within(card).getByRole('menuitem', { name: '系统重启 Alpha modem' })).toBeTruthy();
|
|
```
|
|
|
|
- [ ] **Step 3: Run the focused test and verify RED**
|
|
|
|
Run: `corepack pnpm --filter @multi-simadmin/web test -- src/fleet/fleet-page.test.tsx`
|
|
|
|
Expected: FAIL because the new regions and menu trigger do not exist and the old buttons are still visible.
|
|
|
|
### Task 2: Build The Warm Telemetry Card Structure
|
|
|
|
**Files:**
|
|
|
|
- Modify: `apps/web/src/fleet/fleet-page.tsx`
|
|
- Test: `apps/web/src/fleet/fleet-page.test.tsx`
|
|
|
|
**Interfaces:**
|
|
|
|
- Consumes: `runCardAction(id, kind)`, `messageStates`, `Progress`, `Tag`, and `Icon`.
|
|
- Produces: `cardMenuId: string | undefined` state and accessible card action menus.
|
|
|
|
- [ ] **Step 1: Add local action-menu state**
|
|
|
|
```tsx
|
|
const [cardMenuId, setCardMenuId] = useState<string>();
|
|
```
|
|
|
|
- [ ] **Step 2: Replace the segmented card body**
|
|
|
|
Create the approved DOM order: `header`, `.fleet-card-metadata`, `.fleet-card-hardware`, `.fleet-card-telemetry`, and `.fleet-card-footer`. Move origin and both tag groups into metadata; keep phone and temperature in the hardware group; reuse the two existing `Progress` components in telemetry rows.
|
|
|
|
- [ ] **Step 3: Replace the bottom action bar with a header menu**
|
|
|
|
Use the existing `Icon name="more"`. The trigger must expose `aria-label`, `aria-haspopup="menu"`, and `aria-expanded`. Each menu item calls `setCardMenuId(undefined)` before `runCardAction` and preserves the current per-operation accessible labels.
|
|
|
|
- [ ] **Step 4: Run the focused test and verify GREEN**
|
|
|
|
Run: `corepack pnpm --filter @multi-simadmin/web test -- src/fleet/fleet-page.test.tsx`
|
|
|
|
Expected: all Fleet tests pass with no warnings.
|
|
|
|
### Task 3: Replace Card Styling And Verify Browser Geometry
|
|
|
|
**Files:**
|
|
|
|
- Modify: `apps/web/src/styles.css`
|
|
- Modify: `scripts/real-browser-e2e.mjs`
|
|
- Test: `scripts/real-browser-e2e.mjs`
|
|
|
|
**Interfaces:**
|
|
|
|
- Consumes: final Fleet cascade selectors and the new card class names from Task 2.
|
|
- Produces: a shadowless warm telemetry card, compact floating menu, and geometry assertions for every supported viewport.
|
|
|
|
- [ ] **Step 1: Update browser selectors before CSS**
|
|
|
|
Add assertions that `.fleet-card-telemetry`, `.fleet-card-footer`, and `.fleet-card-menu-trigger` stay inside each card and viewport, and that desktop card columns remain 3 at 1440px and 4 at 1920px.
|
|
|
|
- [ ] **Step 2: Run browser E2E and verify RED**
|
|
|
|
Run: `corepack pnpm run test:e2e:browser`
|
|
|
|
Expected: FAIL because the new selectors are not yet styled to the approved geometry.
|
|
|
|
- [ ] **Step 3: Replace the final Fleet card selector group**
|
|
|
|
Use one hairline outer border, 12px radius, no card shadow, compact header controls, one muted hardware strip, uniform telemetry grid rows, one footer hairline, and a floating warm menu. Remove final-cascade ownership of `.fleet-card-facts`, `.fleet-card-resources`, `.fleet-card-sms`, and `.fleet-card-admin-actions`.
|
|
|
|
- [ ] **Step 4: Run focused and full web verification**
|
|
|
|
Run:
|
|
|
|
```powershell
|
|
corepack pnpm --filter @multi-simadmin/web test
|
|
corepack pnpm --filter @multi-simadmin/web typecheck
|
|
corepack pnpm lint
|
|
corepack pnpm format:check
|
|
corepack pnpm --filter @multi-simadmin/web build
|
|
corepack pnpm run test:e2e:browser
|
|
```
|
|
|
|
Expected: all commands exit 0; real Chrome passes at 390, 768, 1024, 1440, and 1920 pixels and writes updated review screenshots.
|
|
|
|
- [ ] **Step 5: Inspect 390px, 1440px, and 1920px screenshots**
|
|
|
|
Confirm the left sidebar remains left on desktop, outer gutters remain fluid, no text or menu overlaps, no card has the former bottom action bar, and telemetry values align consistently.
|