Merge pull request #48 from jycr/main

martedesco · web-flow · commit 43a7a6d41c91 · 2024-08-07T12:47:01.000+02:00
Externalize config from Docker image
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,10 @@
+.env
+.dockerignore
+.git
+.gitignore
+node_modules/
+dist/
+.history/
+.github/
+Dockerfile
+*.md
diff --git a/Dockerfile b/Dockerfile
@@ -7,7 +7,11 @@ COPY . .
 RUN npm run build
 
 # Stage 2: Serve the application with Nginx
-FROM nginx:1.26 as production-stage
+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/
+RUN chmod +x /docker-entrypoint.d/*.sh
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/README.md b/README.md
@@ -137,7 +137,7 @@ docker build -t copilot-metrics-viewer .
 
 ### Docker run
 ```
-docker run -p 8080:80 copilot-metrics-viewer
+docker run -p 8080:80 --env-file ./.env copilot-metrics-viewer
 ```
 The application will be accessible at http://localhost:8080
 
diff --git a/docker-entrypoint.d/99-config-app.sh b/docker-entrypoint.d/99-config-app.sh
@@ -0,0 +1,6 @@
+#!/bin/sh
+
+configTemplateFile=/usr/share/nginx/html-template/app-config.template.js
+configTargetFile=/usr/share/nginx/html/assets/app-config.js
+
+envsubst <"$configTemplateFile" >"$configTargetFile"
diff --git a/public/assets/app-config.js b/public/assets/app-config.js
@@ -0,0 +1,8 @@
+window._ENV_ = {
+  // These values are replaced by the entrypoint of Docker Image
+  VUE_APP_MOCKED_DATA: "${VUE_APP_MOCKED_DATA}",
+  VUE_APP_SCOPE: "${VUE_APP_SCOPE}",
+  VUE_APP_GITHUB_ORG: "${VUE_APP_GITHUB_ORG}",
+  VUE_APP_GITHUB_ENT: "${VUE_APP_GITHUB_ENT}",
+  VUE_APP_GITHUB_TOKEN: "${VUE_APP_GITHUB_TOKEN}",
+};
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.svg">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="<%= BASE_URL %>assets/app-config.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/api/ExtractSeats.ts b/src/api/ExtractSeats.ts
@@ -1,83 +1,64 @@
 // TypeScript
 import axios from "axios";
 import { Seat } from "../model/Seat";
+import config from '../config';
 
 import organizationMockedResponse_seats from '../assets/organization_response_sample_seats.json';
 import enterpriseMockedResponse_seats from '../assets/enterprise_response_sample_seats.json';
 
 export const getSeatsApi = async (): Promise<Seat[]> => {
   const perPage = 50;
   let page = 1;
-  let seatUrl = `https://api.github.com/`;
   let seatsData: Seat[] = [];
 
   let response;
   
-
-  if (process.env.VUE_APP_MOCKED_DATA === "true") {
-    console.log("Using mock data. Check VUE_APP_MOCKED_DATA variable.");
-      if (process.env.VUE_APP_SCOPE === "organization") {
-        response = organizationMockedResponse_seats;
-      } 
-      else if (process.env.VUE_APP_SCOPE === "enterprise") {
-        response = enterpriseMockedResponse_seats;
-      }
-      else {
-        throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
-      }
-      seatsData = seatsData.concat(response.seats.map((item: any) => new Seat(item)));
-      return seatsData;
+  if (config.scope.type !== "organization") {
+    // when the scope is not organization, return seatsData,by default it will return empty array
+    return seatsData;
   }
   else {
-    // if VUE_APP_GITHUB_TOKEN is not set, throw an error
-    if (!process.env.VUE_APP_GITHUB_TOKEN) {
-      throw new Error("VUE_APP_GITHUB_TOKEN environment variable is not set.");
-      return seatsData;
-    }
-    else if (process.env.VUE_APP_SCOPE === "organization") {
-      seatUrl=seatUrl+`orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/billing/seats`;
-    }
-    else if (process.env.VUE_APP_SCOPE === "enterprise") {
-      seatUrl=seatUrl+`enterprises/${process.env.VUE_APP_GITHUB_ENT}/copilot/billing/seats`;
+    if (config.mockedData) {
+      response = organizationMockedResponse_seats;
+      seatsData = seatsData.concat(response.seats.map((item: any) => new Seat(item)));
     }
     else {
-      throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
-      return seatsData;
-    }
-
-    // Fetch the first page to get the total number of seats
-    response = await axios.get(seatUrl, {
-      headers: {
-        Accept: "application/vnd.github+json",
-        Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
-        "X-GitHub-Api-Version": "2022-11-28",
-      },
-      params: {
-        per_page: perPage,
-        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);
-
-    // Fetch the remaining pages
-    for (page = 2; page <= totalPages; page++) {
-      response = await axios.get(seatUrl, {
+      // Fetch the first page to get the total number of seats
+      response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
         headers: {
           Accept: "application/vnd.github+json",
-          Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
+          Authorization: `Bearer ${config.github.token}`,
           "X-GitHub-Api-Version": "2022-11-28",
         },
         params: {
           per_page: perPage,
           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);
+
+      // Fetch the remaining pages
+      for (page = 2; page <= totalPages; page++) {
+        response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
+          headers: {
+            Accept: "application/vnd.github+json",
+            Authorization: `Bearer ${config.github.token}`,
+            "X-GitHub-Api-Version": "2022-11-28",
+          },
+          params: {
+            per_page: perPage,
+            page: page
+          }
+        });
+
+        seatsData = seatsData.concat(response.data.seats.map((item: any) => new Seat(item)));
+      }
     }
     return seatsData;
-    } 
   }
+}
diff --git a/src/api/GitHubApi.ts b/src/api/GitHubApi.ts
@@ -9,66 +9,40 @@ import axios from "axios";
 import { Metrics } from "../model/Metrics";
 import organizationMockedResponse from '../assets/organization_response_sample.json';
 import enterpriseMockedResponse from '../assets/enterprise_response_sample.json';
-
+import config from '../config';
 
 export const getMetricsApi = async (): Promise<Metrics[]> => {
-  
+
   let response;
   let metricsData;
 
-  if (process.env.VUE_APP_MOCKED_DATA === "true") {
+  if (config.mockedData) {
     console.log("Using mock data. Check VUE_APP_MOCKED_DATA variable.");
-    if (process.env.VUE_APP_SCOPE === "organization") {
-      response = organizationMockedResponse;
-    } else if (process.env.VUE_APP_SCOPE === "enterprise") {
-      response = enterpriseMockedResponse;
-    } else {
-      throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
-    }
-
+    response = config.scope.type === "organization" ? organizationMockedResponse : enterpriseMockedResponse;
     metricsData = response.map((item: any) => new Metrics(item));
   } else {
-    // if VUE_APP_GITHUB_TOKEN is not set, throw an error
-    if (!process.env.VUE_APP_GITHUB_TOKEN) {
-      throw new Error("VUE_APP_GITHUB_TOKEN environment variable is not set.");
-    }
-    if (process.env.VUE_APP_SCOPE === "organization") {
-      response = await axios.get(
-        `https://api.github.com/orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/usage`,
-        {
-          headers: {
-            Accept: "application/vnd.github+json",
-            Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
-            "X-GitHub-Api-Version": "2022-11-28",
-          },
-        }
-      );
-    } else if (process.env.VUE_APP_SCOPE === "enterprise") {
+    response = await axios.get(
+      `${config.github.apiUrl}/copilot/usage`,
+      {
+        headers: {
+          Accept: "application/vnd.github+json",
+          Authorization: `Bearer ${config.github.token}`,
+          "X-GitHub-Api-Version": "2022-11-28",
+        },
+      }
+    );
 
-      response = await axios.get(
-        `https://api.github.com/enterprises/${process.env.VUE_APP_GITHUB_ENT}/copilot/usage`,
-        {
-          headers: {
-            Accept: "application/vnd.github+json",
-            Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
-            "X-GitHub-Api-Version": "2022-11-28",
-          },
-        }
-      );
-    } else {
-      throw new Error(`Invalid VUE_APP_SCOPE value: ${process.env.VUE_APP_SCOPE}. Expected "organization" or "enterprise".`);
-    }
 
     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`, {
+export const getTeams = async (): Promise<string[]> => {
+  const response = await axios.get(`${config.github.apiUrl}/teams`, {
     headers: {
       Accept: 'application/vnd.github+json',
-      Authorization: `Bearer ${process.env.VUE_APP_GITHUB_TOKEN}`,
+      Authorization: `Bearer ${config.github.token}`,
       'X-GitHub-Api-Version': '2022-11-28',
     },
   });
diff --git a/src/components/ApiResponse.vue b/src/components/ApiResponse.vue
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import config from '../config';
 
 export default defineComponent({
   name: 'ApiResponse',
@@ -44,7 +45,7 @@ export default defineComponent({
   },
   data() {
     return {
-      vueAppScope: process.env.VUE_APP_SCOPE,
+      vueAppScope: config.scope.type,
       showCopyMessage: false,
       showSeatMessage: false,
       isError: false,
diff --git a/src/components/MainComponent.vue b/src/components/MainComponent.vue
@@ -55,6 +55,7 @@ import BreakdownComponent from './BreakdownComponent.vue'
 import CopilotChatViewer from './CopilotChatViewer.vue' 
 import SeatsAnalysisViewer from './SeatsAnalysisViewer.vue'
 import ApiResponse from './ApiResponse.vue'
+import config from '../config';
 
 export default defineComponent({
   name: 'MainComponent',
@@ -67,27 +68,22 @@ export default defineComponent({
   },
   computed: {
     gitHubOrgName() {
-      return process.env.VUE_APP_GITHUB_ORG;
+      return config.github.org;
     },
     itemName() {
-      if (process.env.VUE_APP_SCOPE === 'enterprise' || process.env.VUE_APP_SCOPE === 'organization') {
-        return process.env.VUE_APP_SCOPE;
-      } else {
-        console.log("invalid");
-        return 'invalid';
-      }
+      return config.scope.type;
     },
     capitalizedItemName():string {
       return this.itemName.charAt(0).toUpperCase() + this.itemName.slice(1);
     },
     displayedViewName(): string {
-      return this.capitalizedItemName === 'Enterprise' ? process.env.VUE_APP_GITHUB_ENT: process.env.VUE_APP_GITHUB_ORG;
+      return config.scope.name;
     },
     isScopeOrganization() {
-      return process.env.VUE_APP_SCOPE === 'organization';
+      return config.scope.type === 'organization';
     },
     mockedDataMessage() {
-      return process.env.VUE_APP_MOCKED_DATA === 'true' ? 'Using mock data - see README if unintended' : '';
+      return config.mockedData ? 'Using mock data - see README if unintended' : '';
     }
   },
   data () {
@@ -97,8 +93,15 @@ export default defineComponent({
     }
   },
   created() {
-    if(this.itemName !== 'invalid'){
-      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
+      let lastItem = this.tabItems.pop();
+      this.tabItems.push('seat analysis');
+      if (lastItem) {
+        this.tabItems.push(lastItem);
+      }
     }
   },
   setup() {
@@ -124,7 +127,7 @@ export default defineComponent({
             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?`;
+            apiError.value = `404 Not Found - is the ${config.scope.type} '${config.scope.name}' correct?`;
             break;
           default:
             apiError.value = error.message;
@@ -154,7 +157,7 @@ export default defineComponent({
             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?`;
+            apiError.value = `404 Not Found - is the ${config.scope.type} '${config.scope.name}' correct?`;
             break;
           default:
             apiError.value = error.message;
diff --git a/src/config.ts b/src/config.ts
