A React-based dashboard application for cloud security monitoring. The app displays three types of dashboards with interactive charts and widgets that you can create and customize.
This dashboard helps you visualize cloud security data through three main sections:
- CSPM Dashboard: Shows pie charts for security metrics
- CWPP Dashboard: Displays line graphs for monitoring data
- Registry Dashboard: Shows progress bars for vulnerability scans
You can add your own widgets with custom data, search through them, and all your data saves automatically when you refresh the page.
- Node.js installed on your computer
- A web browser
-
Open your terminal and go to the project folder
cd cloud-security-dashboard -
Install the required packages
npm install
-
Start the application
npm start
-
Open your browser Go to
http://localhost:3000and you'll see the dashboard
From the Top Menu:
- Click "Add Widget" in the header
- Choose which dashboard type you want
- Fill in your data and click create
From Each Dashboard:
- Click the "Add Widget" box in any dashboard section
- Add your widget name and description
- Enter your data points with labels and numbers
- Click "Create Widget"
- Search: Use the search bar to find specific widgets
- Time Filter: Change between different time periods
- Auto Save: Your widgets save automatically
- Responsive: Works on desktop, tablet, and mobile
- Pie Charts: For CSPM dashboard - shows data as colored slices
- Line Graphs: For CWPP dashboard - shows trends over time
- Progress Bars: For Registry dashboard - shows data as colored segments
- React with TypeScript
- Redux for data management
- Recharts for creating charts
- CSS for styling
- App won't start: Delete the
node_modulesfolder and runnpm installagain - Widgets disappeared: Check if your browser allows local storage
- Charts not showing: Try refreshing the page
That's it! The app is designed to be simple to use while providing powerful visualization capabilities for your security data.