|
| 1 | +# GitHub Copilot Metrics Viewer |
| 2 | + |
| 3 | +GitHub Copilot Metrics Viewer is a Nuxt 3 web application that displays GitHub Copilot usage metrics and analytics for organizations and enterprises. The application visualizes data from the GitHub Copilot Metrics API using Vue.js, TypeScript, Vuetify, and Chart.js. |
| 4 | + |
| 5 | +Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. |
| 6 | + |
| 7 | +## Working Effectively |
| 8 | + |
| 9 | +### Initial Setup |
| 10 | +- **Node.js requirement**: Uses Node.js 20+ (verified: v20.19.4 works) |
| 11 | +- Install dependencies: `npm install` |
| 12 | + - **NEVER CANCEL**: Takes 3 minutes to complete. Set timeout to 5+ minutes. |
| 13 | + - Includes postinstall script that runs `nuxt prepare` |
| 14 | + |
| 15 | +### Build and Development |
| 16 | +- **Development server**: `npm run dev` |
| 17 | + - Starts on http://localhost:3000/ |
| 18 | + - **Font provider warnings are normal** - application works despite "Could not fetch fonts" errors |
| 19 | + - Supports hot reload and auto-refresh |
| 20 | +- **Production build**: `npm run build` |
| 21 | + - **NEVER CANCEL**: Takes 30 seconds to complete. Set timeout to 2+ minutes. |
| 22 | + - Builds successfully despite font provider connection warnings |
| 23 | + - Outputs to `.output/` directory |
| 24 | +- **Production preview**: Built server requires proper environment setup |
| 25 | + - After build: `NUXT_SESSION_PASSWORD=something_long_and_random_thats_at_least_32_characters node .output/server/index.mjs` |
| 26 | + - **NOTE**: Health endpoints may not work correctly in built mode in some environments |
| 27 | + - **Recommendation**: Use `npm run dev` for development and testing validation scenarios |
| 28 | + |
| 29 | +### Testing |
| 30 | +- **Unit tests**: `npm test` (using Vitest) |
| 31 | + - **NEVER CANCEL**: Takes 15 seconds to complete. Set timeout to 2+ minutes. |
| 32 | + - Runs 83 tests, all should pass |
| 33 | + - Uses mocked data environment |
| 34 | +- **E2E tests**: `npm run test:e2e` (using Playwright) |
| 35 | + - **NOTE**: Playwright browser installation may fail in some environments due to download issues |
| 36 | + - Install browsers first: `npx playwright install` |
| 37 | + - Uses mocked data for testing |
| 38 | +- **Type checking**: `npm run typecheck` |
| 39 | + - **KNOWN ISSUE**: Currently fails with 18 TypeScript errors |
| 40 | + - Takes 10 seconds to complete |
| 41 | + - Errors are in existing codebase, not blocking for development |
| 42 | + |
| 43 | +### Code Quality |
| 44 | +- **Linting**: `npm run lint` |
| 45 | + - **KNOWN ISSUE**: Currently fails with 43 ESLint errors (mostly @typescript-eslint/no-explicit-any) |
| 46 | + - Takes 3 seconds to complete |
| 47 | + - `npm run lint:fix` can fix some formatting issues but not the core errors |
| 48 | + - **Always run linting** but expect failures in current codebase |
| 49 | + |
| 50 | +## Environment Configuration |
| 51 | + |
| 52 | +### Required Environment Variables |
| 53 | +- **NUXT_SESSION_PASSWORD**: Required, minimum 32 characters |
| 54 | + - Used for session encryption |
| 55 | + - Example: `NUXT_SESSION_PASSWORD=something_long_and_random_thats_at_least_32_characters` |
| 56 | + |
| 57 | +### GitHub Integration |
| 58 | +- **Mock mode (default)**: `NUXT_PUBLIC_IS_DATA_MOCKED=true` |
| 59 | + - Works without GitHub tokens |
| 60 | + - Uses sample data for development and testing |
| 61 | +- **Real GitHub data**: Requires GitHub Personal Access Token |
| 62 | + - `NUXT_GITHUB_TOKEN=<your_token>` |
| 63 | + - Token needs scopes: copilot, manage_billing:copilot, manage_billing:enterprise, read:enterprise, read:org |
| 64 | + |
| 65 | +### Scope Configuration |
| 66 | +- **NUXT_PUBLIC_SCOPE**: Sets default scope ('organization', 'enterprise', 'team-organization', 'team-enterprise') |
| 67 | +- **NUXT_PUBLIC_GITHUB_ORG**: Target organization name |
| 68 | +- **NUXT_PUBLIC_GITHUB_ENT**: Target enterprise name |
| 69 | +- **NUXT_PUBLIC_GITHUB_TEAM**: Target team name (optional) |
| 70 | + |
| 71 | +### OAuth Configuration (Optional) |
| 72 | +- **NUXT_PUBLIC_USING_GITHUB_AUTH**: Enable GitHub OAuth (default: false) |
| 73 | +- **NUXT_OAUTH_GITHUB_CLIENT_ID**: GitHub App client ID |
| 74 | +- **NUXT_OAUTH_GITHUB_CLIENT_SECRET**: GitHub App client secret |
| 75 | + |
| 76 | +## Validation |
| 77 | + |
| 78 | +### Manual Testing Scenarios |
| 79 | +Always test these scenarios after making changes (use development mode for reliable validation): |
| 80 | + |
| 81 | +1. **Health Check Endpoints** (use dev server: `npm run dev`): |
| 82 | + - Test: `curl http://localhost:3000/api/health` |
| 83 | + - Expected: JSON response with status, timestamp, version, uptime |
| 84 | + - Test: `curl http://localhost:3000/api/ready` |
| 85 | + - Expected: JSON response with status, checks object |
| 86 | + - Test: `curl http://localhost:3000/api/live` |
| 87 | + - Expected: JSON response with status, memory usage, process info |
| 88 | + |
| 89 | +2. **Mock Data Functionality**: |
| 90 | + - Start dev server: `npm run dev` |
| 91 | + - Navigate to: http://localhost:3000/orgs/mocked-org?mock=true |
| 92 | + - Verify: Page loads showing metrics dashboard with charts |
| 93 | + - Test language breakdown, seat analysis, and chat metrics tabs |
| 94 | + |
| 95 | +3. **Different Scope URLs**: |
| 96 | + - Organizations: `http://localhost:3000/orgs/octodemo` |
| 97 | + - Enterprises: `http://localhost:3000/enterprises/octo-demo-ent` |
| 98 | + - Teams: `http://localhost:3000/orgs/octodemo/teams/the-a-team` |
| 99 | + |
| 100 | +### Docker Support |
| 101 | +- **Build**: `docker build -t copilot-metrics-viewer .` |
| 102 | + - **NOTE**: May fail in environments with certificate/proxy issues |
| 103 | + - Uses multi-stage build with Node.js Alpine images |
| 104 | +- **Playwright mode**: `docker build -t copilot-metrics-pw --build-arg mode=playwright .` |
| 105 | +- **Run**: See DEPLOYMENT.md for full Docker configuration examples |
| 106 | + |
| 107 | +### Always Run Before Committing |
| 108 | +1. **Build verification**: `npm run build` - Must complete successfully |
| 109 | +2. **Unit tests**: `npm test` - All 83 tests must pass |
| 110 | +3. **Basic functionality**: Start dev server and verify health endpoints respond |
| 111 | +4. **Linting awareness**: Run `npm run lint` (expect existing errors, don't introduce new ones) |
| 112 | + |
| 113 | +## Common Tasks |
| 114 | + |
| 115 | +### Repo Structure |
| 116 | +``` |
| 117 | +├── app/ # Vue.js application source |
| 118 | +│ ├── components/ # Vue components (MetricsViewer, SeatsAnalysisViewer, etc.) |
| 119 | +│ ├── pages/ # Nuxt pages (index.vue) |
| 120 | +│ ├── model/ # TypeScript data models |
| 121 | +│ └── utils/ # Utility functions |
| 122 | +├── server/ # Nuxt server-side code |
| 123 | +│ ├── api/ # API endpoints (health.ts, metrics.ts, seats.ts) |
| 124 | +│ ├── routes/ # Server routes (auth) |
| 125 | +│ └── plugins/ # Server plugins (http-agent.ts) |
| 126 | +├── tests/ # Unit tests (Vitest) |
| 127 | +├── e2e-tests/ # End-to-end tests (Playwright) |
| 128 | +├── .env # Environment configuration |
| 129 | +├── nuxt.config.ts # Nuxt configuration |
| 130 | +├── package.json # Dependencies and scripts |
| 131 | +└── Dockerfile # Container configuration |
| 132 | +``` |
| 133 | + |
| 134 | +### Key Files to Monitor |
| 135 | +- **Health endpoints**: `/server/api/health.ts`, `/server/api/ready.ts`, `/server/api/live.ts` |
| 136 | +- **Main metrics logic**: `/server/api/metrics.ts`, `/server/api/seats.ts` |
| 137 | +- **Frontend components**: `/app/components/MetricsViewer.vue`, `/app/components/MainComponent.vue` |
| 138 | +- **Configuration**: `/nuxt.config.ts`, `/.env` |
| 139 | + |
| 140 | +### Debugging Tips |
| 141 | +- **Font provider warnings**: Normal in restricted network environments, application functions correctly |
| 142 | +- **Mock data**: Use `?mock=true` query parameter for testing without GitHub tokens |
| 143 | +- **API debugging**: Check browser network tab for API call responses |
| 144 | +- **Server logs**: Development server shows detailed request logs and errors |
| 145 | + |
| 146 | +### Performance Notes |
| 147 | +- **Development startup**: ~10 seconds with font provider retries |
| 148 | +- **Build time**: ~30 seconds |
| 149 | +- **Test execution**: ~15 seconds for full unit test suite |
| 150 | +- **Hot reload**: Very fast in development mode |
| 151 | + |
| 152 | +## Known Limitations |
| 153 | +- **Linting**: 43 existing ESLint errors in codebase (mostly TypeScript any types) |
| 154 | +- **Type checking**: 18 existing TypeScript errors |
| 155 | +- **Playwright**: Browser installation may fail in restricted environments |
| 156 | +- **Docker**: Build may fail in environments with certificate/proxy restrictions |
| 157 | +- **Font providers**: External font API calls fail in restricted networks (non-blocking) |
| 158 | + |
| 159 | +Always validate your changes work in mock mode first, then test with real GitHub data if available. |
0 commit comments