Initial commit

README.md

@@ -0,0 +1,165 @@
+# 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