Merge branch 'main' into main

Author: martedesco

.env

@@ -11,5 +11,5 @@ 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=

Dockerfile

@@ -8,6 +8,7 @@ RUN npm run build
 
 # Stage 2: Serve the application with Nginx
 FROM nginx:1.27 as production-stage
+
 COPY --from=build-stage /app/dist /usr/share/nginx/html
 COPY --from=build-stage /app/dist/assets/app-config.js /usr/share/nginx/html-template/app-config.template.js
 COPY ./docker-entrypoint.d/*.sh /docker-entrypoint.d/

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

@@ -12,6 +12,7 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
   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;
@@ -34,8 +35,9 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
           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);
@@ -59,4 +61,4 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
     }
     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>
               <ApiResponse v-if="item === 'api response'" :metrics="metrics" :seats="seats" />
             </v-card>
           </v-window-item>
@@ -90,12 +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);
+    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