165 lines
4.4 KiB
Markdown
165 lines
4.4 KiB
Markdown
# 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:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd radar
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Start the development server:
|
|
```bash
|
|
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](https://github.com/settings/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`:
|
|
```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 |