Refactor ApiResponse.vue component to improve JSON display, add copy to clipboard functionality and refactor Metrics

Author: martedesco

src/api/GitHubApi.ts

@@ -6,7 +6,7 @@
 
 import axios from "axios";
 
-import { Metrics } from "../model/MetricsData";
+import { Metrics } from "../model/Metrics";
 import organizationMockedResponse from '../assets/organization_response_sample.json';
 import enterpriseMockedResponse from '../assets/enterprise_response_sample.json';
 
@@ -58,4 +58,17 @@ export const getMetricsApi = async (): Promise<Metrics[]> => {
     metricsData = response.data.map((item: any) => new Metrics(item));
   }
   return metricsData;
-};
+};
+
+export const getTeams = async (): Promise<string[]> =>{
+  const response = await axios.get(`https://api.github.com/orgs/${process.env.VUE_APP_GITHUB_ORG}/teams`, {
+    headers: {
+      Accept: 'application/vnd.github+json',
+      Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
+      'X-GitHub-Api-Version': '2022-11-28',
+    },
+  });
+
+  return response.data;
+}
+

src/components/ApiResponse.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container>
       <!-- Displaying the JSON object -->
-      <v-card max-height="600px" class="overflow-y-auto">
+      <v-card max-height="575px" class="overflow-y-auto">
           <pre ref="jsonText">{{ JSON.stringify(metrics, null, 2) }}</pre>
       </v-card>
       <br>

src/components/CopilotChatViewer.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts">
   import { defineComponent, ref, toRef } from 'vue';
-  import { Metrics } from '../model/MetricsData';
+  import { Metrics } from '../model/Metrics';
   import { Line, Bar } from 'vue-chartjs'
   import {
   Chart as ChartJS,

src/components/LanguagesBreakdown.vue

@@ -65,7 +65,7 @@
 
   <script lang="ts">
   import { defineComponent, ref, toRef } from 'vue';
-  import { Metrics } from '../model/MetricsData';
+  import { Metrics } from '../model/Metrics';
   import { Language } from '../model/Language';
   import { Pie } from 'vue-chartjs'
 

src/components/MainComponent.vue

@@ -43,7 +43,7 @@
 <script lang='ts'>
 import { defineComponent, ref } from 'vue'
 import { getMetricsApi } from '../api/GitHubApi';
-import { Metrics } from '../model/MetricsData';
+import { Metrics } from '../model/Metrics';
 
 //Components
 import MetricsViewer from './MetricsViewer.vue'
@@ -132,4 +132,4 @@ export default defineComponent({
 .error-message {
   color: red;
 }
-</style>
+</style>

src/components/MetricsViewer.vue

@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, toRef } from 'vue';
-import { Metrics } from '../model/MetricsData';
+import { Metrics } from '../model/Metrics';
 import { Language } from '../model/Language';
 import {
   Chart as ChartJS,