From 97f480df6c5c042d5e0f6176377ecd1a6eba5a1f Mon Sep 17 00:00:00 2001
From: Marcio Tedesco <martedesco@github.com>
Date: Mon, 25 Dec 2023 10:54:55 -0500
Subject: [PATCH] Delete HelloWorld.vue and add error handling to
 MetricsViewer.vue

---
 src/components/HelloWorld.vue    | 61 --------------------------------
 src/components/MetricsViewer.vue | 61 +++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 74 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 5b06cac2..00000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/MetricsViewer.vue b/src/components/MetricsViewer.vue
index 248dcb72..02c8ee34 100644
--- a/src/components/MetricsViewer.vue
+++ b/src/components/MetricsViewer.vue
@@ -2,18 +2,21 @@
   <div>
     <h1>GitHub Copilot Business Metrics Viewer</h1>
 
-    <h2>Acceptance rate (%)</h2>
-    <Bar :data="acceptanceRateChartData" :options="chartOptions" />
+      <!-- API Error Message -->
+    <div v-if="apiError" class="error-message" v-html="apiError"></div>
+      <div v-if="!apiError">
+      <h2>Acceptance rate (%)</h2>
+      <Bar :data="acceptanceRateChartData" :options="chartOptions" />
 
-    <h2>Total Suggestions Count | Total Acceptances Count</h2>
-    <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
+      <h2>Total Suggestions Count | Total Acceptances Count</h2>
+      <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
 
-    <h2>Total Lines Suggested | Total Lines Accepted</h2>
-    <Line :data="chartData" :options="chartOptions" />
-
-    <h2>Total Active Users</h2>
-    <Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
+      <h2>Total Lines Suggested | Total Lines Accepted</h2>
+      <Line :data="chartData" :options="chartOptions" />
 
+      <h2>Total Active Users</h2>
+      <Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
+    </div>
   </div>
 </template>
 
@@ -68,13 +71,17 @@ export default defineComponent({
     //Total Active Users
     const totalActiveUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });  
 
+    // API Error Message
+    const apiError = ref<string | null>(null);
+
+
     const chartOptions = {
       responsive: true,
       maintainAspectRatio: true,
       layout: {
         padding: {
-          left: 40,
-          right: 40,
+          left: 150,
+          right: 150,
           top: 20,
           bottom: 40
         }
@@ -173,9 +180,37 @@ export default defineComponent({
           }
         ]
       };
+    }).catch(error => {
+      console.log(error);
+      // Check the status code of the error response
+      if (error.response && error.response.status) {
+        switch (error.response.status) {
+          case 401:
+            apiError.value = '401 Unauthorized access - check if your token in the .env file is correct.';
+            break;
+          case 404:
+            apiError.value = `404 Not Found - is the organization '${process.env.VUE_APP_GITHUB_ORG}' correct?`;
+            break;
+          default:
+            apiError.value = error.message;
+            break;
+        }
+      } else {
+        // Update apiError with the error message
+        apiError.value = error.message;
+      }
+       // Add a new line to the apiError message
+       apiError.value += ' <br> If .env file is modified, restart the changes to take effect.';
+        
     });
 
-    return { totalSuggestionsAndAcceptanceChartData, chartData, chartOptions, totalActiveUsersChartData, totalActiveUsersChartOptions, acceptanceRateChartData };
+    return { totalSuggestionsAndAcceptanceChartData, chartData, chartOptions, totalActiveUsersChartData, totalActiveUsersChartOptions, acceptanceRateChartData, apiError };
   }
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.error-message {
+  color: red;
+}
+</style>
\ No newline at end of file