A React-based monitoring dashboard for Microsoft MSTIC (Microsoft Threat Intelligence Center) data pipelines, built with TypeScript, modern web technologies, and Azure integration.
Production: https://arielsoothy.github.io/MS-Monitor/
Optimized for both desktop and mobile devices with responsive design
- React 18 with TypeScript for type safety
- Vite for fast development and optimized builds
- React Router DOM for single-page application routing
- Recharts for data visualization and analytics
- CSS Modules with dark theme matching Azure portal aesthetic
- Lucide React for consistent iconography
- Azure Functions proxy for secure AI API calls
- REST API integration with proper error handling
- CORS-aware fallback mechanisms
- Environment-based configuration management
- 160+ Mock Pipelines with realistic threat intelligence sources
- Real-time Monitoring with pipeline status tracking
- AI Assistant powered by OpenAI/Azure OpenAI integration
- Data Lineage Visualization with interactive pipeline flows
- Alert Management with priority-based categorization
- Mobile-First Design with responsive interface
Monitoring pipelines from major threat intelligence sources:
- LinkedIn - Social engineering detection
- Twitter/X - Threat actor communication
- Office365 - Email security monitoring
- Azure AD - Identity threat detection
- GitHub - Code security scanning
- Telegram - Dark web monitoring
- Discord - Gaming platform threats
- And many more...
- Node.js 18+
- npm or yarn
- Modern web browser
# Clone repository
git clone <repository-url>
cd "MS Monitor"
# Install dependencies
npm install
# Start development server
npm run devnpm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run deploy- Deploy to GitHub Pages
The dashboard includes an AI-powered pipeline assistant with multiple integration options:
- Azure Function Proxy (Recommended for production)
- Direct API Integration (Development)
- Enhanced Mock Responses (Demo/offline mode)
See AI_SETUP.md for detailed configuration instructions.
The AI assistant uses mock responses for demonstration purposes. In production, this would integrate with a secure backend proxy for API calls.
Fully responsive design optimized for:
- Touch Navigation - Mobile-friendly controls
- Responsive Layout - Adapts to all screen sizes
- Performance - Fast loading on mobile networks
- Accessibility - Screen reader compatible
This project demonstrates enterprise-grade patterns used in Microsoft environments:
- Azure-first Architecture with Functions and cloud services
- TypeScript for enterprise code quality
- Component-based Design following React best practices
- Security with API key protection and CORS handling
- Scalability with modular, maintainable code structure
- DevOps with automated deployment pipelines
- Type Safety - Full TypeScript implementation
- Performance - Optimized bundle size and loading
- Security - API keys protected server-side
- Accessibility - WCAG compliant interface
- Testing - Comprehensive error handling
- Documentation - Clear setup and deployment guides
- Pipeline Health - Real-time status monitoring
- Performance Metrics - Processing time and throughput
- Failure Analysis - Error rate tracking and alerting
- Data Quality - Record validation and processing stats
- Trend Analysis - Historical performance visualization
Built for demonstrating enterprise-grade data pipeline monitoring solutions in Microsoft threat intelligence environments.