A modern, responsive web application for managing 5G network slices, VNFs, service chains, and infrastructure resources. This platform enables network operators and service providers to efficiently create, manage, and monitor network slices with an intuitive user interface.
Network slicing is a key technology for 5G networks that allows operators to create multiple virtual networks (slices) on top of a shared physical infrastructure. Each slice can be optimized for specific use cases such as IoT, autonomous vehicles, or enhanced mobile broadband.
This management platform provides a comprehensive solution for:
- Creating and configuring network slices with specific QoS parameters
- Managing VNFs (Virtual Network Functions) and their lifecycle
- Orchestrating resources across compute, network, and storage domains
- Monitoring performance and ensuring SLA compliance
- Providing analytics and recommendations for optimization
- Slice Creation Wizard: Step-by-step guide to create slices with defined QoS parameters
- Template Management: Save and reuse slice configurations as templates
- Lifecycle Management: Create, update, scale, and terminate slices
- SLA Monitoring: Track service level agreement compliance in real-time
- Topology Visualization: Interactive view of slice architecture and components
- VNF Catalog: Browse and deploy from a library of network functions
- Configuration: Customize VNF parameters and connectivity
- Scaling: Horizontal and vertical scaling of VNF resources
- Health Monitoring: Real-time status and performance metrics
- Version Control: Manage VNF versions and updates
- Visual Chain Builder: Drag-and-drop interface for creating service chains
- Traffic Steering: Configure traffic flows between VNFs
- Chain Templates: Create and save reusable chain configurations
- Validation: Automatic validation of chain configurations
- Testing Tools: Simulate traffic and validate chain performance
- Infrastructure Management: Unified view of compute, network, and storage resources
- Auto-scaling: Policy-based scaling of resources based on demand
- Resource Optimization: ML-based recommendations for resource allocation
- Reservation: Reserve resources for high-priority slices
- Multi-domain Support: Manage resources across multiple domains and locations
- Real-time Dashboards: Visual representation of key performance indicators
- Alert System: Configurable alerts for performance thresholds
- Historical Analysis: Trend visualization and pattern recognition
- Report Generation: Automated reports on slice performance
- Troubleshooting Tools: Root cause analysis and resolution recommendations
- Multi-language Support: Full internationalization with English and German
- Role-based Access Control: Granular permissions for different user roles
- Dark/Light Theme: Customizable UI appearance
- Responsive Design: Optimized for desktop and mobile devices
- API Integration: RESTful APIs for integration with other systems
(Insert screenshots here)
The Network Slicing Management Platform follows a client-server architecture with a React-based frontend and a modular structure for maintainability and scalability.
┌────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ │ │ │ │ │
│ Presentation │ │ Application │ │ Services │
│ Layer │◄────►│ Layer │◄────►│ Layer │
│ │ │ │ │ │
└────────────────────┘ └─────────────────────┘ └─────────────────────┘
▲ ▲ ▲
│ │ │
▼ ▼ ▼
┌────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ │ │ │ │ │
│ React UI │ │ Context Providers │ │ API Integrations │
│ Components │ │ & Data Models │ │ & Data Services │
│ │ │ │ │ │
└────────────────────┘ └─────────────────────┘ └─────────────────────┘
-
Component-Based Architecture
- Modular UI components with focused responsibilities
- Hierarchical component composition for complex interfaces
- Reusable component library for consistent design
-
Context API for State Management
- Centralized state management using React Context
- Dedicated context providers for different domains:
AuthContext: User authentication and permissionsThemeContext: UI theme managementSliceContext: Network slice data and operationsResourceContext: Infrastructure resource management
-
Custom Hooks Pattern
- Encapsulates complex logic and state management
- Provides reusable functionality across components
- Examples:
useForm,useAuth,useSlice,useResource
-
Service Layer Pattern
- Isolates API communication and data transformation
- Handles data fetching, caching, and error management
- Provides domain-specific services for different features
- React 17: Component-based UI development
- Material-UI: Modern and responsive component library
- React Router: Navigation and routing
- i18next: Internationalization framework
- Chart.js: Interactive data visualization
- Context API: State management
- ESLint: Code quality and style checking
- Prettier: Code formatting
- Jest: Unit and integration testing
- Husky: Git hooks for pre-commit quality checks
- npm: Package management
/src
/frontend # Frontend application
/public # Static assets
/images # Image assets
/locales # Translation files (public)
index.html # HTML entry point
favicon.ico # Application favicon
manifest.json # Progressive Web App manifest
robots.txt # SEO configuration
/src # Source code
/components # React components organized by feature
/Auth # Authentication components
LoginPage.js # Login page component
AuthContext.js # Authentication context provider
ProtectedRoute.js # Route protection component
/Dashboard # Dashboard components
Dashboard.js # Main dashboard component
DashboardCard.js # Reusable dashboard card component
StatusWidget.js # Status display widget
MetricsChart.js # Performance metrics visualization
/NetworkSlices # Network slice management
SliceList.js # List of network slices
SliceDetail.js # Detailed view of a slice
SliceCreation.js # Slice creation wizard
SliceContext.js # Slice data context provider
/QoSMonitoring # QoS monitoring components
PerformanceChart.js # Performance visualization
AlertList.js # Performance alerts component
MetricsTable.js # Detailed metrics display
SLAMonitor.js # SLA compliance monitoring
/ResourceOrchestration # Resource orchestration
ResourceDashboard.js # Resource overview dashboard
ResourceDetail.js # Detailed resource view
AllocationForm.js # Resource allocation form
ResourceOrchestrator.js # Main orchestration component
/ServiceChaining # Service chaining components
ChainBuilder.js # Visual chain building interface
ChainList.js # List of service chains
ChainDetail.js # Detailed chain view
TrafficFlow.js # Traffic flow configuration
/Settings # User settings and preferences
Settings.js # Settings page component
ProfileEditor.js # User profile editor
PreferencesForm.js # User preferences form
/Theme # Theme components
ThemeProvider.js # Theme context provider
ThemeSelector.js # Theme selection component
/Utils # Utility components
ErrorBoundary.js # Error handling component
Loader.js # Loading indicator component
ConfirmDialog.js # Confirmation dialog component
formatUtils.js # Formatting utility functions
/VNF # VNF management components
VNFCatalog.js # VNF catalog browser
VNFDetail.js # Detailed VNF view
VNFDeployment.js # VNF deployment interface
/contexts # React context providers
AuthContext.js # Authentication state management
ThemeContext.js # Theme state management
NotificationContext.js # Notification system
PreferencesContext.js # User preferences
/hooks # Custom React hooks
useForm.js # Form handling hook
useFetch.js # Data fetching hook
useLocalStorage.js # Local storage hook
useNotification.js # Notification hook
/i18n # Internationalization files
i18n.js # i18n configuration
/locales # Translation files
en.js # English translations
de.js # German translations
/services # API and service integrations
api.js # Base API configuration
authService.js # Authentication service
sliceService.js # Network slice service
resourceService.js # Resource management service
monitoringService.js # Monitoring service
/styles # Global styles
theme.js # Theme configuration
globalStyles.js # Global CSS styles
/utils # Utility functions
formatter.js # Data formatting utilities
validators.js # Form validation utilities
helpers.js # General helper functions
constants.js # Application constants
App.js # Main application component
index.js # Entry point
routes.js # Application routes
/backend # Backend services (if applicable)
/api # API endpoints
/models # Data models
/services # Business logic
/utils # Utility functions
server.js # Server entry point
The application follows a unidirectional data flow pattern to ensure predictable state management:
┌──────────────────┐ ┌───────────────────┐ ┌──────────────────┐
│ │ │ │ │ │
│ User Interface │──────►│ Context/State │──────►│ API Services │
│ Components │ │ Management │ │ │
│ │ │ │ │ │
└──────────────────┘ └───────────────────┘ └──────────────────┘
▲ │ │
│ │ │
└──────────────────────────┴───────────────────────────┘
Data Flow
- UI Components dispatch actions or update requests
- Context Providers process these actions and update state
- Service Layer handles API communication when needed
- Updated State flows back to components for re-rendering
- Provider Pattern: Context providers encapsulate domain-specific state and logic
- Compound Components: Related components that work together (e.g., Form and FormField)
- Render Props: Components that take a function as a child to customize rendering
- Higher-Order Components: For cross-cutting concerns like authentication
- Custom Hooks: Encapsulate and reuse stateful logic across components
- Node.js 14.x or higher
- npm 6.x or higher
- Modern web browser (Chrome, Firefox, Edge, Safari)
-
Clone the repository:
git clone https://github.com/muratyigitartuk/network-slicing-platform.git cd network-slicing-platform -
Install frontend dependencies:
cd src/frontend npm install -
Start the development server:
npm start
-
Access the application at
http://localhost:3000
For demo purposes, the application uses a simulated authentication system with the following credentials:
-
Admin user: username
adminwith passwordadmin123- Full access to all platform features
- Can create, modify, and delete all resources
-
Operator user: username
operatorwith passwordoperator123- View-only access to most resources
- Limited modification capabilities
Note: In a production environment, you would replace this with a proper authentication system using JWT tokens, OAuth, or another secure authentication method.
Run the test suite to ensure everything is working correctly:
npm testRun tests with coverage report:
npm test -- --coverageCreate an optimized production build:
npm run buildThe build artifacts will be stored in the build/ directory.
The application supports multiple languages through the i18next framework:
- English: Default language
- German: Complete translation
To add a new language:
- Create a new translation file in
src/frontend/src/i18n/locales/ - Add the language to the language options in
src/frontend/src/i18n/i18n.js - Update the language selector component
This project maintains high code quality standards through:
-
ESLint: Enforces code style and catches potential issues
- Run
npm run lintto check for issues - Run
npm run lint:fixto automatically fix issues
- Run
-
Prettier: Ensures consistent code formatting
- Run
npm run formatto format all files
- Run
-
Jest: Comprehensive test suite
- Component tests
- Utility function tests
- Integration tests
-
Husky: Pre-commit hooks
- Prevents committing code with linting errors
- Ensures all tests pass before commits
The application is compatible with:
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Edge (last 2 versions)
- Safari (last 2 versions)
The application implements several performance optimizations:
- Code splitting and lazy loading for faster initial load times
- Memoization of expensive computations
- Efficient rendering with React.memo and useMemo
- Optimized bundle size through tree shaking
We welcome contributions to improve the Network Slicing Management Platform!
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
Please read our CONTRIBUTING.md for details on our code of conduct and development process.
- Authentication Issues: Clear local storage and cookies, then try logging in again
- Missing Dependencies: Run
npm installto ensure all dependencies are installed - Style Inconsistencies: Run
npm run formatto ensure consistent formatting
For more issues, please check the GitHub issues section or create a new issue.
Future plans for the platform include:
- Enhanced Analytics: Advanced ML-based performance prediction
- Multi-cloud Support: Manage resources across different cloud providers
- Additional Languages: Support for more international languages
- Mobile App: Native mobile applications for on-the-go management
- Integration APIs: Expanded API support for third-party integrations
This project is licensed under the MIT License - see the LICENSE file for details.
- Material-UI for the UI components
- React-i18next for internationalization
- React Router for navigation
- Chart.js for data visualization
- ESLint for code quality
- Jest for testing
- Prettier for code formatting "# 5G-Network-Slice-Manager"