Add GitHub API integration and MetricsViewer component

Author: martedesco

package-lock.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13"
   },

package.json

@@ -1,17 +1,17 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  <MetricsViewer />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import MetricsViewer from './components/MetricsViewer.vue';
 
 export default defineComponent({
   name: 'App',
   components: {
-    HelloWorld
-  }
+    MetricsViewer
+}
 });
 </script>
 

src/App.vue

@@ -0,0 +1,29 @@
+//Make a call to the GitHub API to get Copilot Metrics, the API is https://api.github.com/orgs/toussaintt/copilot/usage
+//Add the header Accept: application/vnd.github+json to the request
+//Add also the Authorization: Bearer <token> header where <token> is hardcoded for now
+//Also add X-GitHub-Api-Version: 2022-11-28 header
+//Return the response from the API
+
+import axios from "axios";
+import { Metrics } from "../model/MetricsData";
+
+export const getGitHubCopilotMetricsApi = async (): Promise<Metrics[]> => {
+  const response = await axios.get(
+    "https://api.github.com/orgs/toussaintt/copilot/usage",
+    {
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: "Bearer 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",
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    }
+  );
+
+  // Map the response data to an array of Metrics objects
+  const metricsData = response.data.map((item: any) => new Metrics(item));
+
+  // Print the metrics data to the console
+  console.log(metricsData);
+
+  return metricsData;
+};

src/api/GitHubApi.ts

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <h1>GitHub Copilot Metrics</h1>
+    </div>
+    <div>
+        <div v-if="loading">Loading...</div>
+        <div v-else-if="error">{{ error }}</div>
+        <div v-else>
+            <div v-for="metric in metrics" :key="metric.day">
+                <h2>{{ metric.day }}</h2>
+                <p>Total Suggestions: {{ metric.total_suggestions_count }}</p>
+                <p>Total Acceptances: {{ metric.total_acceptances_count }}</p>
+                <p>Total Lines Suggested: {{ metric.total_lines_suggested }}</p>
+                <p>Total Lines Accepted: {{ metric.total_lines_accepted }}</p>
+                <p>Total Active Users: {{ metric.total_active_users }}</p>
+                <h3>Breakdown</h3>
+                <div v-for="breakdown in metric.breakdown" :key="breakdown.language">
+                    <h4>{{ breakdown.language }}</h4>
+                    <p>Editor: {{ breakdown.editor }}</p>
+                    <p>Suggestions Count: {{ breakdown.suggestions_count }}</p>
+                    <p>Acceptances Count: {{ breakdown.acceptances_count }}</p>
+                    <p>Lines Suggested: {{ breakdown.lines_suggested }}</p>
+                    <p>Lines Accepted: {{ breakdown.lines_accepted }}</p>
+                    <p>Active Users: {{ breakdown.active_users }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+  </template>
+  
+  <script lang="ts">
+import { defineComponent } from 'vue';
+import { getGitHubCopilotMetricsApi } from '../api/GitHubApi';
+import { Metrics } from '../model/MetricsData';
+
+export default defineComponent({
+  name: 'MetricsViewer',
+  data() {
+    return {
+      loading: false,
+      error: null,
+      metrics: [] as Metrics[]
+    };
+  },
+  methods: {
+    async fetchMetrics(): Promise<void> {
+      console.log('fetchMetrics');
+      this.loading = true;
+      this.error = null;
+      try {
+        this.metrics = await getGitHubCopilotMetricsApi();
+      } catch (error) {
+        this.error = error as any;
+      } finally {
+        this.loading = false;
+      }
+    }
+  },
+  created() {
+      this.fetchMetrics();
+    },
+});
+
+  </script>
+  
+  <style scoped>
+  /* Your CSS goes here */
+  </style>

src/components/MetricsViewer.vue

@@ -0,0 +1,39 @@
+class Breakdown {
+    language: string;
+    editor: string;
+    suggestions_count: number;
+    acceptances_count: number;
+    lines_suggested: number;
+    lines_accepted: number;
+    active_users: number;
+  
+    constructor(data: any) {
+      this.language = data.language;
+      this.editor = data.editor;
+      this.suggestions_count = data.suggestions_count;
+      this.acceptances_count = data.acceptances_count;
+      this.lines_suggested = data.lines_suggested;
+      this.lines_accepted = data.lines_accepted;
+      this.active_users = data.active_users;
+    }
+  }
+  
+  export class Metrics {
+    total_suggestions_count: number;
+    total_acceptances_count: number;
+    total_lines_suggested: number;
+    total_lines_accepted: number;
+    total_active_users: number;
+    day: string;
+    breakdown: Breakdown[];
+  
+    constructor(data: any) {
+      this.total_suggestions_count = data.total_suggestions_count;
+      this.total_acceptances_count = data.total_acceptances_count;
+      this.total_lines_suggested = data.total_lines_suggested;
+      this.total_lines_accepted = data.total_lines_accepted;
+      this.total_active_users = data.total_active_users;
+      this.day = data.day;
+      this.breakdown = data.breakdown.map((item: any) => new Breakdown(item));
+    }
+  }