Skip to content

Implement Teams tab functionality for team-level metrics comparison #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jul 9, 2025

This PR implements comprehensive Teams tab functionality that allows users to compare metrics across multiple teams within their organization or enterprise.

🎯 Features Implemented

1. Individual Team Metrics Display

  • Fixed tab name transformation: when visiting /orgs/octo-demo-org/teams/the-a-team, the tab now correctly shows as "team" (instead of "team-organization")
  • Maintains all existing team-specific functionality with improved UX

2. Teams Comparison Tab

Added a new "Teams" tab available for organization and enterprise scopes that provides:

  • Acceptance Rate Comparison: Side-by-side comparison of acceptance rates, total suggestions, and total acceptances across teams
  • Language Usage Analysis: Shows which languages are used by which teams and their average acceptance rates
  • Editor Distribution: Compares editor usage (VS Code, IntelliJ, WebStorm, etc.) across teams
  • Feature Usage Over Time: Tracks IDE code completions, IDE chat, GitHub.com chat, and GitHub.com PR usage across teams
  • Date Range Filtering: Full integration with existing date range selector

3. URL Structure Support

  • Individual team metrics: /orgs/octo-demo-org/teams/the-a-team (displays team-specific data)
  • Teams comparison: /orgs/octo-demo-org (displays teams comparison tab)
  • Enterprise support: /enterprises/octo-demo-ent/teams/team-name and /enterprises/octo-demo-ent

📸 Screenshots

Organization view with new Teams tab:
Organization view with Teams tab

Teams comparison functionality showing acceptance rates, language usage, editor distribution, and feature usage:
Teams comparison view

Individual team view with correctly labeled 'team' tab:
Individual team view

🔧 Technical Details

Files Modified:

  • app/components/MainComponent.vue - Added tab logic and Teams component integration
  • app/components/TeamsComponent.vue - New component for team comparison functionality
  • tests/MainComponent.teams.spec.ts - Tests for new tab functionality

Key Implementation:

  • Minimal code changes: Only 3 files modified, maintaining backward compatibility
  • Mock data included: Demonstrates comparison between multiple teams (the-a-team, dev-team, frontend-team)
  • Responsive design: Uses existing Vuetify components for consistency
  • Date range integration: Teams component respects the global date range filter
  • Comprehensive metrics: Covers all requirements from the issue

✅ Testing

  • All existing tests continue to pass (85/85)
  • Added new tests for tab functionality
  • Manual testing verified across different URL patterns
  • UI functionality validated with screenshots

This implementation provides a complete solution for team-level metrics comparison while maintaining the existing functionality and design patterns of the application.

Fixes #235.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

  • api.fontshare.com
    • Triggering command: node (vitest) (dns block)
    • Triggering command: /usr/local/bin/node --enable-source-maps /home/REDACTED/work/copilot-metrics-viewer/copilot-metrics-viewer/node_modules/@nuxt/cli/bin/nuxi.mjs _dev (dns block)
  • api.fontsource.org
    • Triggering command: node (vitest) (dns block)
    • Triggering command: /usr/local/bin/node --enable-source-maps /home/REDACTED/work/copilot-metrics-viewer/copilot-metrics-viewer/node_modules/@nuxt/cli/bin/nuxi.mjs _dev (dns block)
  • fonts.bunny.net
    • Triggering command: node (vitest) (dns block)
    • Triggering command: /usr/local/bin/node --enable-source-maps /home/REDACTED/work/copilot-metrics-viewer/copilot-metrics-viewer/node_modules/@nuxt/cli/bin/nuxi.mjs _dev (dns block)
  • fonts.google.com
    • Triggering command: node (vitest) (dns block)
    • Triggering command: /usr/local/bin/node --enable-source-maps /home/REDACTED/work/copilot-metrics-viewer/copilot-metrics-viewer/node_modules/@nuxt/cli/bin/nuxi.mjs _dev (dns block)
  • fonts.googleapis.com
    • Triggering command: node (vitest 1) (dns block)
    • Triggering command: node (vitest 3) (dns block)
    • Triggering command: node (vitest 2) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@Copilot Copilot AI changed the title [WIP] Support for team level metrics Implement Teams tab functionality for team-level metrics comparison Jul 9, 2025
@Copilot Copilot AI requested a review from karpikpl July 9, 2025 18:46
Copilot finished work on behalf of karpikpl July 9, 2025 18:46
@karpikpl karpikpl marked this pull request as ready for review July 10, 2025 02:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support for team level metrics
2 participants