Merge remote-tracking branch 'fork/main' into feature/configuration

Author: karpikpl

.env

@@ -11,7 +11,7 @@ VUE_APP_GITHUB_ORG=octodemo
 VUE_APP_GITHUB_ENT=
 
 # Determines the GitHub Personal Access Token to use for API calls.
-# Create with scopes copilot, manage_billing:copilot, admin:enterprise, or manage_billing:enterprise, read:enterprise AND read:org
+# Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
 VUE_APP_GITHUB_TOKEN=
 
 # GitHub Api Url

README.md

@@ -71,19 +71,18 @@ The language breakdown analysis tab also displays a table showing the Accepted P
 4. **Total Active Copilot Chat Users:** a bar chart that illustrates the total number of users who have actively interacted with Copilot over the past 28 days.
 
 ## Seat Analysis 
+<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.
 
-![image](https://github.com/DevOps-zhuang/copilot-metrics-viewer/assets/54096296/d1fa9d1d-4fab-4e87-84ba-7be189dd4dd0)
-
-1. **Total Assigned:** This metric represents the total number of Copilot seats assigned within current organization.
-
-2. **Assigned But Never Used:** This metric shows seats that were assigned but never within the current organization. The assigned timestamp is also displayed in the below chart.
+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.
 
 3. **No Activity in the Last 7 days:** never used seats or seats used, but with no activity in the past 7 days.
 
 4. **No Activity in the last 7 days (including never used seats):** a table to display seats that have had no activity in the past 7 days, ordered by the date of last activity. Seats that were used earlier are displayed at the top.
 
 
-
 ## Setup instructions
 
 In the `.env` file, you can configure several environment variables that control the behavior of the application.
@@ -115,7 +114,7 @@ To access Copilot metrics from the last 28 days via the API and display actual d
 ```
 
 #### VUE_APP_GITHUB_TOKEN
-Specifies the GitHub Personal Access Token utilized for API requests. Generate this token with the following scopes: _copilot_, _manage_billing:copilot_, _manage_billing:enterprise_, _read:enterprise_, _admin:org_.
+Specifies the GitHub Personal Access Token utilized for API requests. Generate this token with the following scopes: _copilot_, _manage_billing:copilot_, _manage_billing:enterprise_, _read:enterprise_, _read:org_.
 
 ```
   VUE_APP_GITHUB_TOKEN=

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-metrics-viewer",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

package.json

@@ -15,46 +15,76 @@ const headers = {
 export const getSeatsApi = async (): Promise<Seat[]> => {
   const perPage = 50;
   let page = 1;
+  let seatUrl = config.github.apiUrl;
   let seatsData: Seat[] = [];
 
   let response;
-  if (config.scope.type !== "organization") {
-    // when the scope is not organization, return seatsData,by default it will return empty array
-    return seatsData;
+  
+
+  if (process.env.VUE_APP_MOCKED_DATA === "true") {
+    console.log("Using mock data. Check VUE_APP_MOCKED_DATA variable.");
+      if (process.env.VUE_APP_SCOPE === "organization") {
+        response = organizationMockedResponse_seats;
+      } 
+      else if (process.env.VUE_APP_SCOPE === "enterprise") {
+        response = enterpriseMockedResponse_seats;
+      }
+      else {
+        throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
+      }
+      seatsData = seatsData.concat(response.seats.map((item: any) => new Seat(item)));
+      return seatsData;
   }
   else {
-    if (config.mockedData) {
-      response = organizationMockedResponse_seats;
-      seatsData = seatsData.concat(response.seats.map((item: any) => new Seat(item)));
-    } 
+    // if VUE_APP_GITHUB_TOKEN is not set, throw an error
+    if (!process.env.VUE_APP_GITHUB_TOKEN) {
+      throw new Error("VUE_APP_GITHUB_TOKEN environment variable is not set.");
+      return seatsData;
+    }
+    else if (process.env.VUE_APP_SCOPE === "organization") {
+      seatUrl=seatUrl+`orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/billing/seats`;
+    }
+    else if (process.env.VUE_APP_SCOPE === "enterprise") {
+      seatUrl=seatUrl+`enterprises/${process.env.VUE_APP_GITHUB_ENT}/copilot/billing/seats`;
+    }
     else {
+      throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
+      return seatsData;
+    }
+
     // Fetch the first page to get the total number of seats
-      response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
-        headers,
+    response = await axios.get(seatUrl, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+      params: {
+        per_page: perPage,
+        page: page
+      }
+    });
+
+    seatsData = seatsData.concat(response.data.seats.map((item: any) => new Seat(item)));
+    // Calculate the total pages
+    const totalSeats = response.data.total_seats;
+    const totalPages = Math.ceil(totalSeats / perPage);
+
+    // Fetch the remaining pages
+    for (page = 2; page <= totalPages; page++) {
+      response = await axios.get(seatUrl, {
+        headers: {
+          Accept: "application/vnd.github+json",
+          Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
         params: {
           per_page: perPage,
           page: page
         }
       });
-
       seatsData = seatsData.concat(response.data.seats.map((item: any) => new Seat(item)));
-      // Calculate the total pages
-      const totalSeats = response.data.total_seats;
-      const totalPages = Math.ceil(totalSeats / perPage);
-
-      // Fetch the remaining pages
-      for (page = 2; page <= totalPages; page++) {
-        response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
-          headers,
-          params: {
-            per_page: perPage,
-            page: page
-          }
-        });
-
-        seatsData = seatsData.concat(response.data.seats.map((item: any) => new Seat(item)));
-      }
     }
     return seatsData;
+    } 
   }
-}

src/api/ExtractSeats.ts

@@ -8,7 +8,7 @@
         "last_activity_at": "2021-10-14T00:53:32-06:00",
         "last_activity_editor": "vscode/1.77.3/copilot/1.86.82",
         "assignee": {
-          "login": "octocat",
+          "login": "octocat_byEnterprise",
           "id": 1,
           "node_id": "MDQ6VXNlcjE=",
           "avatar_url": "https://github.com/images/error/octocat_happy.gif",

src/assets/enterprise_response_sample_seats.json

@@ -8,7 +8,7 @@
         "last_activity_at": "2021-10-14T00:53:32-06:00",
         "last_activity_editor": "vscode/1.77.3/copilot/1.86.82",
         "assignee": {
-          "login": "octocat",
+          "login": "octocat_org",
           "id": 1,
           "node_id": "MDQ6VXNlcjE=",
           "avatar_url": "https://github.com/images/error/octocat_happy.gif",
@@ -50,7 +50,7 @@
         "last_activity_at": "2021-10-13T00:53:32-06:00",
         "last_activity_editor": "vscode/1.77.3/copilot/1.86.82",
         "assignee": {
-          "login": "octokitten",
+          "login": "octokitten_org",
           "id": 1,
           "node_id": "MDQ76VNlcjE=",
           "avatar_url": "https://github.com/images/error/octokitten_happy.gif",

src/assets/organization_response_sample_seats.json

@@ -13,7 +13,7 @@
       </div>
 
       <br><br>
-    <div v-if="vueAppScope === 'organization'">
+  
       <v-card max-height="575px" class="overflow-y-auto">
           <pre ref="jsonText">{{ JSON.stringify(seats, null, 2) }}</pre>
       </v-card>
@@ -24,7 +24,6 @@
           <div v-if="showSeatMessage" :class="{'copy-message': true, 'error': isError}">{{ message }}</div>
         </transition>
       </div>
-    </div>
   </v-container>
 </template>
 

src/components/ApiResponse.vue

@@ -31,9 +31,7 @@
               <BreakdownComponent v-if="item === 'languages'" :metrics="metrics" :breakdownKey="'language'"/>
               <BreakdownComponent v-if="item === 'editors'" :metrics="metrics" :breakdownKey="'editor'"/>
               <CopilotChatViewer v-if="item === 'copilot chat'" :metrics="metrics" />
-              <div v-if="isScopeOrganization">
-                <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
-              </div>
+              <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
               <ApiResponse v-if="item === 'api response'" :metrics="metrics" :seats="seats" />
             </v-card>
           </v-window-item>
@@ -90,21 +88,12 @@ export default defineComponent({
   },
   data () {
     return {
-      tabItems: ['languages', 'editors', 'copilot chat', 'api response'],
+      tabItems: ['languages', 'editors', 'copilot chat','seat analysis' , 'api response'],
       tab: null
     }
   },
   created() {
-      this.tabItems.unshift(this.itemName);
-    if (config.scope.type === 'organization') {
-      // get the last item in the array,which is 'api response' 
-      //and add 'seat analysis' before it
-      let lastItem = this.tabItems.pop();
-      this.tabItems.push('seat analysis');
-      if (lastItem) {
-        this.tabItems.push(lastItem);
-      }
-    }
+    this.tabItems.unshift(this.itemName);
   },
   setup() {
       const metricsReady = ref(false);

src/components/MainComponent.vue

@@ -50,6 +50,7 @@
                     <tr>
                         <td>{{ item.login }}</td>
                         <td>{{ item.id }}</td>
+                        <td>{{ item.team }}</td>
                         <td>{{ item.created_at }}</td>
                         <td>{{ item.last_activity_at }}</td>
                         <td>{{ item.last_activity_editor }}</td>
@@ -103,7 +104,8 @@ data() {
         headers: [
             { title: 'Login', key: 'login' },
             { title: 'GitHub ID', key: 'id' },
-            { title: 'Assigned to the Organization At', key: 'created_at' },
+            { title: 'Assigning team', key: 'team' },
+            { title: 'Assigned time', key: 'created_at' },
             { title: 'Last Activity At', key: 'last_activity_at' },
             { title: 'Last Activity Editor', key: 'last_activity_editor' },
         ],