Azure Data Migration Dashboard

A modern, clean ReactJS + TailwindCSS frontend dashboard for monitoring Azure Data Migration pipelines. This dashboard provides real-time monitoring, data preview capabilities, and pipeline management features.

Features

Home Page: Start new migration pipelines with a single click
Pipeline Status: Monitor pipeline runs with real-time status updates and colored badges
Data Preview: Preview migrated data with statistics and validation
Responsive Design: Works seamlessly on desktop and mobile devices
Modern UI: Clean, professional interface built with TailwindCSS
Loading States: Smooth loading spinners and error handling
API Integration: Ready-to-use Axios integration for backend communication

Tech Stack

React 18 - Frontend framework
React Router 6 - Client-side routing
TailwindCSS 3 - Utility-first CSS framework
Axios - HTTP client for API calls
Create React App - Build tooling

Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn

Installation

Clone the repository:

git clone <repository-url>
cd azure-data-migration-dashboard

Install dependencies:

npm install

Start the development server:

npm start

Open http://localhost:3000 to view it in the browser.

Building for Production

npm run build

This builds the app for production to the build folder.

Project Structure

src/
├── components/
│   ├── Navbar.js          # Navigation component
│   └── LoadingSpinner.js  # Loading spinner component
├── pages/
│   ├── Home.js            # Home page with start migration button
│   ├── PipelineStatus.js  # Pipeline monitoring page
│   └── DataPreview.js     # Data preview page
├── services/
│   └── api.js             # Axios API configuration
├── App.js                 # Main app component with routing
├── index.js               # App entry point
└── index.css              # TailwindCSS imports and custom styles

API Endpoints

The dashboard expects the following API endpoints:

POST /api/start-pipeline - Start a new migration pipeline
GET /api/pipeline-status - Get pipeline status information
GET /api/data-preview - Get preview of migrated data

API Response Formats

Pipeline Status Response

[
  {
    "id": "pipeline-001",
    "status": "Succeeded",
    "startTime": "2024-01-15T10:30:00Z",
    "endTime": "2024-01-15T11:45:00Z",
    "duration": "1h 15m"
  }
]

Data Preview Response

{
  "rows": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john.doe@example.com",
      "department": "Engineering",
      "salary": 75000
    }
  ],
  "totalRows": 1000,
  "lastUpdated": "2024-01-15T12:00:00Z"
}

Configuration

Environment Variables

Create a .env file in the root directory to configure the API base URL:

REACT_APP_API_BASE_URL=http://localhost:3001/api

Customization

The dashboard uses TailwindCSS with custom color schemes. You can modify the colors in tailwind.config.js:

theme: {
  extend: {
    colors: {
      'azure-blue': '#0078d4',
      'azure-dark': '#106ebe',
      'success': '#10b981',
      'warning': '#f59e0b',
      'error': '#ef4444'
    }
  }
}

Features in Detail

Home Page

Clean, modern landing page with Azure branding
Prominent "Start Migration" button
Quick access cards for different features
Real-time feedback on migration start status

Pipeline Status Page

Responsive table view for desktop
Card view for mobile devices
Color-coded status badges (Green: Success, Red: Failed, Yellow: Running)
Real-time status updates with refresh functionality
Detailed timing information

Data Preview Page

Statistics cards showing total rows and last updated time
Responsive data table with sample migrated data
Department badges and formatted currency
Additional information cards about data integrity and security

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

License

This project is licensed under the MIT License.

nirajshevade/Data-Migration-Dashboard