GitHub Actions Radar

A web application that displays GitHub Actions workflow runs across multiple repositories and organizations in a unified dashboard.

Features

• 📊 Unified Dashboard: View workflow runs from multiple repositories in one place
• 🔍 Filtering: Filter by status (success, failure, in progress) and repository
• 📈 Statistics: Overview of total runs, success rate, and current activity
• 🔄 Real-time Updates: Refresh workflow run data with a single click
• 🎨 Clean UI: Modern, responsive interface with status indicators
• ⚙️ Easy Configuration: Simple setup for GitHub tokens and repositories

Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• GitHub Personal Access Token

Installation

1. Clone the repository:

git clone <repository-url>
cd radar

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:3000

Configuration

1. Create configuration file: Copy config.example.json to config.json
2. GitHub Token Setup:
   • Go to GitHub Settings > Developer settings > Personal access tokens
   • Click "Generate new token (classic)"
   • Give it a descriptive name like "GitHub Actions Radar"
   • Select the following permissions:
     • repo (Full control of private repositories)
     • actions:read (Read access to actions and workflows)
   • Click "Generate token"
   • Copy the token and paste it in config.json
3. Add repositories: List the repositories you want to monitor in the repositories array
4. Configure cache (optional): Set cache timeout in minutes (defaults to 5 minutes if not specified)

Example config.json:

{
  "github": {
    "token": "ghp_your_github_token_here",
    "repositories": [
      {
        "owner": "facebook",
        "name": "react"
      },
      {
        "owner": "your-org",
        "name": "your-repo"
      }
    ]
  },
  "server": {
    "port": 3001,
    "host": "0.0.0.0"
  },
  "cache": {
    "timeoutMinutes": 5
  }
}

Usage

Dashboard Features

• Status Cards: Quick overview of total runs, successes, failures, and in-progress workflows
• Filters: Use the dropdown filters to focus on specific statuses or repositories
• Workflow Cards: Each card shows:
  • Repository name and run number
  • Branch and commit information
  • Actor (who triggered the run)
  • Time since the run started
  • Direct link to GitHub

Refresh Data

Click the "Refresh" button to fetch the latest workflow runs from all configured repositories.

Update Configuration

To update your configuration:

1. Edit the config.json file
2. Restart the application (the server will automatically reload the configuration)

Development

Available Scripts

• npm run dev - Start development server (both frontend and backend)
• npm run server - Start backend server only
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Project Structure

src/
├── components/
│   ├── Dashboard.tsx          # Main dashboard component
│   └── CompactWorkflowCard.tsx # Compact workflow run display
├── services/
│   └── api.ts                 # Backend API client
├── types/
│   └── github.ts              # TypeScript interfaces
├── App.tsx                    # Main application component
└── main.tsx                   # Application entry point

server/
├── config.ts                  # Configuration loading
├── github.ts                  # GitHub API integration
└── index.ts                   # Express server

Technology Stack

• React - Frontend framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Vite - Build tool and dev server
• Express - Backend server
• Axios - HTTP client
• date-fns - Date formatting
• Lucide React - Icons

Security

• GitHub tokens are stored in server-side configuration file
• Tokens are only used for API calls to GitHub
• No data is sent to external servers
• All communication is directly with GitHub's API
• Configuration file is excluded from version control

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT License - see LICENSE file for details