## AI Master Prompt: BGP Security Dashboard SaaS## PROJECT OVERVIEW
**Project Title:** BGP Security Dashboard
**1. Project Overview:**
This project aims to develop a Single Page Application (SPA) that serves as a comprehensive dashboard for monitoring and managing the security of the Border Gateway Protocol (BGP) using Resource Public Key Infrastructure (RPKI). BGP is the fundamental routing protocol of the Internet, responsible for directing traffic across networks. However, its inherent lack of security has led to significant disruptions and vulnerabilities, such as route hijacking. This application provides Internet Service Providers (ISPs), network administrators, and other critical internet infrastructure operators with a user-friendly interface to check the RPKI validity status of BGP routes, monitor their network's compliance, and receive timely alerts about potential security threats. The core value proposition is to empower organizations to proactively secure their BGP routing, enhance Internet stability, and mitigate risks associated with insecure routing practices.
**2. Tech Stack:**
* **Frontend Framework:** React.js (with Vite for fast development server and build)
* **Styling:** Tailwind CSS (for utility-first CSS framework)
* **State Management:** Zustand (lightweight and performant state management)
* **Routing:** React Router DOM (for client-side routing)
* **API Client:** Axios (for making HTTP requests)
* **UI Components:** Headless UI (for accessible and customizable components), potentially Heroicons for icons.
* **Charting Library:** Chart.js or Recharts (for data visualization)
* **Form Handling:** React Hook Form (for efficient form validation)
* **Deployment:** Vercel or Netlify (for seamless SPA deployment)
**3. Core Features:**
* **Feature 1: BGP Route RPKI Validity Check**
* **User Flow:**
1. User navigates to the 'RPKI Validator' section.
2. User inputs a single Autonomous System Number (ASN) or an IP prefix (e.g., 'AS6762' or '192.0.2.0/24').
3. The application sends a request to a backend service (or a public RPKI validator API if available) to check the RPKI status of the provided ASN/prefix.
4. The result is displayed clearly: 'Valid', 'Invalid', 'NotFound', or 'Unknown'.
5. If invalid, relevant details like the conflicting ROA (Route Origin Authorization) or the reason for invalidity are shown.
* **Details:** This is the primary tool for ad-hoc security checks.
* **Feature 2: ISP/Operator RPKI Compliance Dashboard**
* **User Flow:**
1. User navigates to the 'Compliance Dashboard'.
2. User adds and verifies their own ASN or one they peer with (requires a backend mechanism for verification, possibly via peeringdb or manual confirmation).
3. The dashboard fetches data (either from a backend that aggregates public data or via direct API calls to RIRs/ROAs) about the RPKI adoption and filtering status of major ISPs and transit providers.
4. Data is presented in a sortable and filterable table, showing ASN, Operator Name, Country, RPKI Filtering Status (e.g., 'Filtering Invalid', 'Validating', 'Not Active'), and Last Update Date.
5. Visual indicators (e.g., color-coding) highlight the security posture of different operators.
* **Details:** Provides a broader view of the ecosystem's security and helps identify risks from peering partners.
* **Feature 3: Anomaly Alerting System**
* **User Flow:**
1. User configures alert preferences in the 'Alert Settings' section (e.g., for specific ASNs they monitor, or types of invalidity).
2. The backend service periodically checks for new RPKI invalid routes or significant changes in the compliance status of key operators.
3. If an anomaly matching the user's criteria is detected, an alert is triggered.
4. Alerts are displayed within the dashboard (e.g., a notification badge) and can optionally be sent via email (requires backend email service integration).
* **Details:** Enables proactive response to emerging threats.
* **Feature 4: Educational Resources Hub**
* **User Flow:**
1. User navigates to the 'Resources' section.
2. Content includes articles, FAQs, links to official RPKI documentation, and explanations of BGP security concepts.
3. Content is categorized for easy browsing (e.g., 'Getting Started with RPKI', 'Understanding BGP Vulnerabilities', 'Best Practices').
* **Details:** Improves user understanding and adoption of BGP security measures.
**4. UI/UX Design:**
* **Layout:** Clean, modern, single-page application layout. A persistent sidebar navigation for core sections (Dashboard, RPKI Validator, Compliance, Alerts, Resources, Settings). Main content area displays the selected section's components.
* **Color Palette:** Primary: Deep Blue (#1a202c - dark background). Secondary: Teal (#38a169 - for success states, valid indicators). Accent: Orange/Red (#dd6b20 / #e53e3e - for warnings, invalid indicators). Neutral: Grays (#e2e8f0, #a0aec0, #4a5568) for text, borders, and backgrounds.
* **Typography:** Sans-serif font (e.g., Inter or Roboto) for readability. Clear hierarchy using font sizes and weights. Headings: Bold, larger sizes. Body text: Regular weight, comfortable line height.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content sections reflow and stack vertically. Ensure all interactive elements are easily tappable. Tables should have horizontal scrolling or column adaptation on mobile.
* **Interactivity:** Subtle hover effects on buttons and links. Smooth transitions between page states. Clear loading indicators (spinners or skeletons) for data fetching.
**5. Data Model (State Management - Zustand):**
* `useRPKIStore`: Stores the state for the RPKI validator feature.
* `query`: string (user input for ASN/prefix)
* `result`: object | null (e.g., `{ status: 'Valid', details: '...' }` or `{ status: 'Invalid', details: '...' }`)
* `isLoading`: boolean
* `error`: string | null
* `checkRPKIValidity(query)`: async function
* `useComplianceStore`: Manages data for the compliance dashboard.
* `operators`: array ([{ asn: string, name: string, country: string, status: 'Validating' | 'Filtering Invalid' | 'Not Active', lastUpdate: string, roaCount: number }])
* `isLoading`: boolean
* `fetchOperators()`: async function
* `filterParams`: object (for filtering the table)
* `sortParams`: object (for sorting the table)
* `useAlertStore`: Handles alert configurations and status.
* `alerts`: array ([{ id: string, criteria: string, isEnabled: boolean, lastTriggered: string }])
* `newAlertConfig`: object
* `addAlert()`: function
* `updateAlertStatus(id, status)`: function
* `fetchAlerts()`: async function
* `useUserStore`: Basic user settings (e.g., preferred ASN for monitoring).
* `userSettings`: object { monitoredASN: string | null }
* `updateSettings(settings)`: function
* **Mock Data Formats:**
* RPKI Result: `{ "originator": "AS6762", "prefix": "192.0.2.0/24", "maxLength": 24, "validity": "Valid", "roas": [ { "asn": "AS6762", "prefix": "192.0.2.0/24", "maxLength": 24 } ], "errorMessage": null }`
* Operator Entry: `{ "asn": "AS701", "name": "Verizon", "country": "US", "status": "Validating", "lastUpdate": "2024-01-24T00:00:00Z", "roaCount": 1500 }`
**6. Component Breakdown:**
* **`App.js`:** Main application component, sets up routing and global layout.
* `children`: React nodes
* **`Layout.js`:** Main layout component including header and sidebar.
* `children`: React nodes
* **`Sidebar.js`:** Navigation menu component.
* `navItems`: array ([{ name: string, path: string, icon: ReactNode }])
* **`Header.js`:** Top bar with app title and user actions.
* **`RPKIChecker.js`:** Component for the RPKI validation feature.
* `query`: string (from Zustand store)
* `result`: object (from Zustand store)
* `isLoading`: boolean (from Zustand store)
* `onQueryChange`: function
* `onCheckClick`: function
* **`QueryInput.js`:** Reusable input field for ASN/prefix.
* `label`: string
* `value`: string
* `onChange`: function
* `placeholder`: string
* `error`: string | null
* **`ResultDisplay.js`:** Component to show the RPKI validation result.
* `result`: object
* **`ComplianceTable.js`:** Displays the list of operators and their RPKI status.
* `data`: array (operator objects)
* `isLoading`: boolean
* `onSort`: function
* `onFilter`: function
* **`OperatorRow.js`:** Represents a single row in the ComplianceTable.
* `operator`: object
* **`AlertsPanel.js`:** Shows configured alerts and recent triggers.
* `alerts`: array
* **`AlertConfigurationForm.js`:** Form to add or edit alerts.
* `onSubmit`: function
* **`ResourceCard.js`:** Component for displaying educational resources.
* `title`: string
* `description`: string
* `link`: string
* **`LoadingSpinner.js`:** Generic loading indicator.
* **`ErrorMessage.js`:** Displays error messages.
* `message`: string
**7. Animations & Interactions:**
* **Page Transitions:** Subtle fade-in/fade-out using `react-transition-group` or CSS transitions between route changes.
* **Button Hovers:** Slight scale-up or background color change on button hover using Tailwind CSS transitions.
* **Loading States:** Skeleton loaders or spinners displayed while data is being fetched. For tables, rows can have a pulsing background animation.
* **Input Focus:** Subtle border color change or glow effect on input focus.
* **Status Indicators:** Color transitions for validity status (e.g., green to red if status changes).
* **Table Row Hover:** Slight background color change on table row hover for better row identification.
**8. Edge Cases & Error Handling:**
* **Empty States:** Display user-friendly messages and potentially CTAs (e.g., 'No alerts configured yet. Add one now.') when data lists are empty.
* **API Errors:** Gracefully handle network errors or API failures. Display informative error messages to the user (e.g., 'Failed to fetch data. Please try again later.') using the `ErrorMessage` component. Log errors to a monitoring service.
* **Invalid Input:** Implement input validation (using React Hook Form) for ASN and IP prefixes. Provide clear inline error messages next to the input fields.
* **RPKI Unknown Status:** Clearly distinguish between 'Valid', 'Invalid', and 'Unknown' or 'NotFound' statuses returned by RPKI validators.
* **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Provide ARIA attributes where necessary, especially for dynamic content and interactive elements. Keyboard navigation must be fully supported.
* **Rate Limiting:** Be mindful of potential rate limits on public RPKI APIs. Implement appropriate caching or delays if necessary.
**9. Sample Data:**
* **RPKI Check Response (Valid):**
```json
{
"query": "AS6762",
"result": {
"status": "Valid",
"details": "RPKI validation successful for AS6762. Associated ROAs cover the announced prefixes.",
"coveredPrefixes": ["198.51.100.0/24", "203.0.113.0/23"]
}
}
```
* **RPKI Check Response (Invalid):**
```json
{
"query": "AS3320",
"result": {
"status": "Invalid",
"details": "Route announced by AS3320 for 192.0.0.0/24 is not covered by any valid ROA for this ASN.",
"conflictingROA": {
"asn": "AS3320",
"prefix": "192.0.0.0/24",
"maxLength": 24
}
}
}
```
* **Operator Data (Example):**
```json
[
{
"asn": "AS701",
"name": "Verizon",
"country": "US",
"status": "Validating",
"lastUpdate": "2024-01-24T10:30:00Z",
"roaCount": 1500,
"securityScore": 8.5
},
{
"asn": "AS3320",
"name": "Deutsche Telekom",
"country": "DE",
"status": "Filtering Invalid",
"lastUpdate": "2024-02-22T09:00:00Z",
"roaCount": 2100,
"securityScore": 9.1
},
{
"asn": "AS577",
"name": "Bell Canada",
"country": "CA",
"status": "Filtering Invalid",
"lastUpdate": "2025-08-28T14:15:00Z",
"roaCount": 800,
"securityScore": 8.9
},
{
"asn": "AS8075",
"name": "Microsoft",
"country": "US",
"status": "Validating",
"lastUpdate": "2022-10-19T11:00:00Z",
"roaCount": 50,
"securityScore": 7.0
}
]
```
* **Alert Configuration (Example):**
```json
{
"id": "alert-123",
"criteria": "ANY_INVALID_FOR_AS_701",
"isEnabled": true,
"lastTriggered": "2023-05-10T14:00:00Z"
}
```
**10. Deployment Notes:**
* **Build:** Configure Vite for production build (`npm run build`). Ensure environment variables are correctly handled.
* **Environment Variables:** Use `.env` files for API keys (if any), base API URLs, etc. Use `import.meta.env.VITE_YOUR_VARIABLE` syntax.
* **Hosting:** Deploy the static build output to Vercel or Netlify. Configure the hosting provider to handle SPA routing (e.g., redirect all non-file requests to `index.html`).
* **Backend:** The prompt assumes a separate backend service for tasks like RPKI data aggregation or alert processing. If a backend is needed, specify Node.js/Express or a serverless function (e.g., Vercel Serverless Functions) as the stack.
* **Performance:** Optimize bundle size by code-splitting routes/components. Lazy load components. Optimize image assets if any are used. Ensure efficient state management to prevent unnecessary re-renders.
* **CI/CD:** Set up a Continuous Integration/Continuous Deployment pipeline (e.g., using GitHub Actions) to automate testing and deployment on code pushes.