[Epic] cruise

[kgpoj]

Overview

Implement the AGENT page of cruise platform, so that users can view agents' status and manage agents

UI Design

Desktop

Tablet

Mobile

In Scope

• [x] Implement the basic layout (header + sider + blank content)(including responsive, likewise for the rest)
• [x] Implement the top three status presentation components
• [x] Implement the tab filter
• [x] Implement list of agent items UI (based on mock data, excluding interaction)
• [x] Implement the agent item interaction
• [ ] Implement the search component
• [x] Get data from the back end

Out of Scope

• Route to other pages
• User information
• List data rearrange
• Interaction when clicking deny
• History in sider

Technical Approach

Scaffold

Option 1: create-react-app

pros:

• easy to start
• simple folder structure

cons:

• need to implement every thing from scratch

Option 2: Antd pro cli

pros:

• comes with the basic layout, routing, loading page...

cons:

• heavy
• more effort to remove redundant files

Test Strategy

specific test strategies will be included in each card

Question

• What does search box should allow users to search?
• What is agent, what is the data structure?

  
  type ResourceName = 'Firefox' | 'Chrome' | 'Safari' | 'Ubuntu';

interface Resource { id: string; name: ResourceName; // name: string }

interface Agent { id: string; name: string; iconUrl: string; ipAddress: string; availability: 'building' | 'idle'; agentType: 'physical' | 'virtual'; resources: Resource[]; }

- What should sider looks like in mobile?

[kgpoj]

search： name，resources，ipAddress 模糊