add copilot seat analysis supports

[DevOps-zhuang]

add support for copilot seat display, since it is a popular request.

1) Call copilot seats API by calling https://docs.github.com/en/rest/copilot/copilot-user-management?apiVersion=2022-11-28#list-all-copilot-seat-assignments-for-an-organization 2) Display the seats API result in API Response Table. under the original usage API area. 3) Display the seats assigned/never used seats/no use in last 7 days seats in seat analysis tab

Limit: since the seat API currently only support organization level query now. so it is suggested to config the organization name in the .env file even the scope is set to enterprise. if there is no organization name set in .env. the assigned seat is displayed to 0.

Additions to the README:

• README.md: Added a new Seat Analysis section which provides a detailed explanation of the metrics related to seat usage.

New Vue components:

• src/components/SeatsAnalysisViewer.vue: Created a new Vue component to display the seat analysis. The component shows the total number of assigned seats, the number of seats assigned but never used, and the number of seats with no activity in the last 7 days. It also displays a table of seats with no activity in the last 7 days, including those that have never been used.

Changes to existing Vue components:

• src/components/MainComponent.vue: Modified the component to include the seat analysis in the tab items and to fetch seat data from the API. The seat data is then passed as a prop to the SeatsAnalysisViewer and ApiResponse components. [1] [2] [3] [4] [5] [6]
• src/components/ApiResponse.vue: Modified the component to display the seat count when the Show Assigned Seats count button is clicked. [1] [2] [3]

Additions to the API:

• src/api/ExtractSeats.ts: Created a new API function getSeatsApi to fetch seat data from the GitHub API. The function supports both real and mocked data.

New JSON files:

• src/assets/enterprise_response_sample_seats.json: Added a new JSON file to store a sample response for seat data at the enterprise level.
• src/assets/organization_response_sample_seats.json: Added a new JSON file to store a sample response for seat data at the organization level.

[jackyhuang1]

@martedesco can you review this? Junqian is from Microsoft China team who has seen many customer metrics reporting requirement like the one he's suggesting.

[martedesco]

@DevOps-zhuang Thanks a lot for your contribution. I am suggesting some minor changes on the labels and code clean up. Do you mind also updating the image in the README once the changes have been accepted? 🙏🏼

[DevOps-zhuang]

@DevOps-zhuang Thanks a lot for your contribution. I am suggesting some minor changes on the labels and code clean up. Do you mind also updating the image in the README once the changes have been accepted? 🙏🏼

Thanks @martedesco , I will update the README. and I just add some information to state the limit of this feature, please also check it. and Since I don't have a copilot for business enabled in GitHub Enterprise level. could you please help to check it when the scope is set to enterprise in .env file? thanks.

Limit: since the seat API currently only supports organization level query now. so it is suggested to config the organization name in the .env file even the scope is set to enterprise. if there is no organization name found in .env. the assigned seat is displayed to 0.

[DevOps-zhuang]

Thanks Marcio for your check and suggestion, I fully accepted your suggestion, and add some statement about the feature limit, the main limit comes for the current seat API only support organization level query. so when the scope is set as enterprise in .env, and there is no organization set, the default assigned seat will be displayed as 0.

Thanks for your suggestion again!

Jun Qian.

From: Marcio Tedesco @.> Sent: Thursday, May 30, 2024 5:52 PM To: github-copilot-resources/copilot-metrics-viewer @.> Cc: Junqian Zhuang @.>; Mention @.> Subject: Re: [github-copilot-resources/copilot-metrics-viewer] add copilot seat analysis supports (PR #32)

@DevOps-zhuanghttps://github.com/DevOps-zhuang Thanks a lot for your contribution. I am suggesting some minor changes on the labels and code clean up. Do you mind also updating the image in the README once the changes have been accepted? 🙏🏼

— Reply to this email directly, view it on GitHubhttps://github.com/github-copilot-resources/copilot-metrics-viewer/pull/32#issuecomment-2139190357, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AM4XDKA5OLHTDF7F7X2QBD3ZE3ZFHAVCNFSM6AAAAABIMQKQ3CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZZGE4TAMZVG4. You are receiving this because you were mentioned.Message ID: @.***>

[martedesco]

Since I don't have a copilot for business enabled in GitHub Enterprise level. could you please help to check it when the scope is set to enterprise in .env file? thanks.

When the scope is set to enterprise, it will still display the results of the organization defined in the .env file. Take a look at the image below.

How about we don't show the Seat Analysis tab when it is enterprise scope?

[martedesco]

Thanks Marcio for your check and suggestion, I fully accepted your suggestion, and add some statement about the feature limit, the main limit comes for the current seat API only support organization level query. so when the scope is set as enterprise in .env, and there is no organization set, the default assigned seat will be displayed as 0.

We can mention that limitation in the README and in the app we can opt for not displaying the Seat Analysis tab when the scope is enterprise

[DevOps-zhuang]

Thanks for update, you are so quick! I will check and study it later 😊

From: Marcio Tedesco @.> Sent: Saturday, June 1, 2024 12:22 AM To: github-copilot-resources/copilot-metrics-viewer @.> Cc: Junqian Zhuang @.>; Mention @.> Subject: Re: [github-copilot-resources/copilot-metrics-viewer] add copilot seat analysis supports (PR #32)

@martedesco commented on this pull request.

---

In src/components/MainComponent.vuehttps://github.com/github-copilot-resources/copilot-metrics-viewer/pull/32#discussion_r1622672035:

@@ -31,7 +31,10 @@

           <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" />

@DevOps-zhuanghttps://github.com/DevOps-zhuang I added this condition so it will only display if in the organization scope

— Reply to this email directly, view it on GitHubhttps://github.com/github-copilot-resources/copilot-metrics-viewer/pull/32#pullrequestreview-2091252771, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AM4XDKA2ZFWMGPTZZCTVM73ZFCPQVAVCNFSM6AAAAABIMQKQ3CVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDAOJRGI2TENZXGE. You are receiving this because you were mentioned.Message ID: @.***>

[DevOps-zhuang]

@martedesco I added two more commits for the conditional control. one in the ExtractSeats.ts to filter the Seat API only when scope is 'organization'; and display the 'seat' information in APIresponse within same condition; could you please review it? thanks)

[martedesco]

@DevOps-zhuang It looks good to me :) I just fixed a small typo and I'm merging this one 👍🏼🚀