feature: Team metrics support

Author: martedesco

.env

@@ -10,6 +10,9 @@ VUE_APP_GITHUB_ORG=octodemo
 
 VUE_APP_GITHUB_ENT=
 
+# Determines the team name if exists to target API calls.
+VUE_APP_GITHUB_TEAM=
+
 # Determines the GitHub Personal Access Token to use for API calls.
 # Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
 VUE_APP_GITHUB_TOKEN=

README.md

@@ -74,6 +74,7 @@ The language breakdown analysis tab also displays a table showing the Accepted P
 <p align="center">
   <img width="800" alt="image" src="https://github.com/github-copilot-resources/copilot-metrics-viewer/assets/54096296/51747194-df30-4bfb-8849-54a0510fffcb">
 </p>
+
 1. **Total Assigned:** This metric represents the total number of Copilot seats assigned within current organization/enterprise.
 
 2. **Assigned But Never Used:** This metric shows seats that were assigned but never used within the current organization/enterprise. The assigned timestamp is also displayed in the chart.
@@ -103,7 +104,15 @@ VUE_APP_GITHUB_ORG= <YOUR-ORGANIZATION>
 
 VUE_APP_GITHUB_ENT=
 ````
+#### VUE_APP_GITHUB_TEAM
+
+The `VUE_APP_GITHUB_TEAM` environment variable filters metrics for a specific GitHub team within an Enterprise or Organization account.
+‼️ Important ‼️ When this variable is set, all displayed metrics will pertain exclusively to the specified team. To view metrics for the entire Organization or Enterprise, remove this environment variable.
 
+````
+VUE_APP_GITHUB_TEAM=
+
+````
 
 #### VUE_APP_MOCKED_DATA
 

public/assets/app-config.js

@@ -5,4 +5,5 @@ window._ENV_ = {
   VUE_APP_GITHUB_ORG: "${VUE_APP_GITHUB_ORG}",
   VUE_APP_GITHUB_ENT: "${VUE_APP_GITHUB_ENT}",
   VUE_APP_GITHUB_TOKEN: "${VUE_APP_GITHUB_TOKEN}",
+  VUE_APP_GITHUB_TEAM: "${VUE_APP_GITHUB_TEAM}",
 };

src/api/GitHubApi.ts

@@ -50,3 +50,24 @@ export const getTeams = async (): Promise<string[]> => {
   return response.data;
 }
 
+export const getTeamMetricsApi = async (): Promise<Metrics[]> => {
+  console.log("config.github.team: " + config.github.team);
+
+  if (config.github.team && config.github.team.trim() !== '') {
+    const response = await axios.get(
+      `${config.github.apiUrl}/team/${config.github.team}/copilot/usage`,
+      {
+        headers: {
+          Accept: "application/vnd.github+json",
+          Authorization: `Bearer ${config.github.token}`,
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      }
+    );
+
+    return response.data.map((item: any) => new Metrics(item));
+  }
+  
+  return [];
+
+}

src/components/MainComponent.vue

@@ -5,17 +5,22 @@
         <v-icon>mdi-github</v-icon>
       </v-btn>
 
-      <v-toolbar-title class="toolbar-title">Copilot Metrics Viewer | {{ capitalizedItemName }} : {{ displayedViewName }}</v-toolbar-title>
+      <v-toolbar-title class="toolbar-title">Copilot Metrics Viewer | {{ capitalizedItemName }} : {{ displayedViewName }}  {{ teamName }}
+         
+      </v-toolbar-title>
       <h2 class="error-message"> {{ mockedDataMessage }} </h2>
       <v-spacer></v-spacer>
 
       <template v-slot:extension>
+
         <v-tabs v-model="tab" align-tabs="title">
           <v-tab v-for="item in tabItems" :key="item" :value="item">
             {{ item }}
           </v-tab>
         </v-tabs>
+
       </template>
+
     </v-toolbar>
 
     <!-- API Error Message -->
@@ -45,6 +50,7 @@
 <script lang='ts'>
 import { defineComponent, ref } from 'vue'
 import { getMetricsApi } from '../api/GitHubApi';
+import { getTeamMetricsApi } from '../api/GitHubApi';
 import { getSeatsApi } from '../api/ExtractSeats';
 import { Metrics } from '../model/Metrics';
 import { Seat } from "../model/Seat";
@@ -82,6 +88,15 @@ export default defineComponent({
     isScopeOrganization() {
       return config.scope.type === 'organization';
     },
+    teamName(){
+      var teamName;
+      if (config.github.team && config.github.team.trim() !== '')  {
+        teamName = "| Team : " + config.github.team;
+      } else {
+        teamName = '';
+      }
+      return teamName;
+    },
     mockedDataMessage() {
       return config.mockedData ? 'Using mock data - see README if unintended' : '';
     }
@@ -112,35 +127,70 @@ export default defineComponent({
       // API Error Message
       const apiError = ref<string | undefined>(undefined);
 
-      getMetricsApi().then(data => {
+      
+      if(config.github.team && config.github.team.trim() !== '') {
+        getTeamMetricsApi().then(data => {
         metrics.value = data;
 
         // Set metricsReady to true after the call completes.
         metricsReady.value = true;
-          
+
       }).catch(error => {
-      console.log(error);
-      // Check the status code of the error response
-      if (error.response && error.response.status) {
-        switch (error.response.status) {
-          case 401:
-            apiError.value = '401 Unauthorized access - check if your token in the .env file is correct.';
-            break;
-          case 404:
-            apiError.value = `404 Not Found - is the ${config.scope.type} '${config.scope.name}' correct?`;
-            break;
-          default:
-            apiError.value = error.message;
-            break;
+        console.log(error);
+        // Check the status code of the error response
+        if (error.response && error.response.status) {
+          switch (error.response.status) {
+            case 401:
+              apiError.value = '401 Unauthorized access - check if your token in the .env file is correct.';
+              break;
+            case 404:
+              apiError.value = `404 Not Found - is the ${config.scope.type} '${config.scope.name}' correct?`;
+              break;
+            default:
+              apiError.value = error.message;
+              break;
+          }
+        } else {
+          // Update apiError with the error message
+          apiError.value = error.message;
         }
-      } else {
-        // Update apiError with the error message
-        apiError.value = error.message;
+        // Add a new line to the apiError message
+        apiError.value += ' <br> If .env file is modified, restart the app for the changes to take effect.';
+          
+      });
       }
-       // Add a new line to the apiError message
-       apiError.value += ' <br> If .env file is modified, restart the app for the changes to take effect.';
-        
-    });
+
+      if (metricsReady.value === false) {
+        getMetricsApi().then(data => {
+          metrics.value = data;
+
+          // Set metricsReady to true after the call completes.
+          metricsReady.value = true;
+            
+        }).catch(error => {
+        console.log(error);
+        // Check the status code of the error response
+        if (error.response && error.response.status) {
+          switch (error.response.status) {
+            case 401:
+              apiError.value = '401 Unauthorized access - check if your token in the .env file is correct.';
+              break;
+            case 404:
+              apiError.value = `404 Not Found - is the ${config.scope.type} '${config.scope.name}' correct?`;
+              break;
+            default:
+              apiError.value = error.message;
+              break;
+          }
+        } else {
+          // Update apiError with the error message
+          apiError.value = error.message;
+        }
+        // Add a new line to the apiError message
+        apiError.value += ' <br> If .env file is modified, restart the app for the changes to take effect.';
+          
+      });
+    }
      
     getSeatsApi().then(data => {
         seats.value = data;
@@ -187,4 +237,5 @@ export default defineComponent({
 .error-message {
   color: red;
 }
+
 </style>

src/config.ts

@@ -1,4 +1,4 @@
-const PROPS = ["MOCKED_DATA", "SCOPE", "GITHUB_ORG", "GITHUB_ENT", "GITHUB_TOKEN"];
+const PROPS = ["MOCKED_DATA", "SCOPE", "GITHUB_ORG", "GITHUB_ENT", "GITHUB_TEAM", "GITHUB_TOKEN"];
 
 const env: any = {};
 PROPS.forEach(prop => {
@@ -40,11 +40,11 @@ const config: Config = {
 	scope: {
 		type: scopeType,
 		name: scopeName
-
 	},
 	github: {
 		org: githubOrgName,
 		ent: githubEntName,
+		team: env.VUE_APP_GITHUB_TEAM,
 		token: env.VUE_APP_GITHUB_TOKEN,
 		apiUrl
 	}
@@ -64,6 +64,7 @@ interface Config {
 	github: {
 		org: string;
 		ent: string;
+		team: string;
 		token: string;
 		apiUrl: string;
 	}