Merge remote-tracking branch 'fix/main' into feature/configuration

karpikpl · karpikpl · commit 044115d0e695 · 2024-06-25T23:34:45.000-04:00
diff --git a/.dockerignore b/.dockerignore
@@ -1,3 +1,10 @@
-dist
-node_modules
-.github
+.env
+.dockerignore
+.git
+.gitignore
+node_modules/
+dist/
+.history/
+.github/
+Dockerfile
+*.md
diff --git a/Dockerfile b/Dockerfile
@@ -7,7 +7,10 @@ COPY . .
 RUN npm run build
 
 # Stage 2: Serve the application with Nginx
-FROM nginx:1.19 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
@@ -138,7 +138,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,6 +1,7 @@
 // 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';
@@ -11,18 +12,18 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
   let seatsData: Seat[] = [];
 
   let response;
-  if (process.env.VUE_APP_SCOPE !== "organization") {
+  if (config.scope.type !== "organization") {
     // when the scope is not organization, return seatsData,by default it will return empty array
     return seatsData;
   }
-  else{
-    if (process.env.VUE_APP_MOCKED_DATA === "true") {
+  else {
+    if (config.mockedData) {
       response = organizationMockedResponse_seats;
       seatsData = seatsData.concat(response.seats.map((item: any) => new Seat(item)));
     } 
-    else if (process.env.VUE_APP_MOCKED_DATA === "false") {
+    else {
     // Fetch the first page to get the total number of seats
-      response = await axios.get(`/api/github/orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/billing/seats`, {
+      response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
         headers: {
           Accept: "application/vnd.github+json",
           "X-GitHub-Api-Version": "2022-11-28",
@@ -40,7 +41,7 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
 
       // Fetch the remaining pages
       for (page = 2; page <= totalPages; page++) {
-        response = await axios.get(`/api/github/orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/billing/seats`, {
+        response = await axios.get(`${config.github.apiUrl}/copilot/billing/seats`, {
           headers: {
             Accept: "application/vnd.github+json",
             "X-GitHub-Api-Version": "2022-11-28",
@@ -52,8 +53,8 @@ export const getSeatsApi = async (): Promise<Seat[]> => {
         });
 
         seatsData = seatsData.concat(response.data.seats.map((item: any) => new Seat(item)));
-      } //end of else if (process.env.VUE_APP_MOCKED_DATA === "false")
-  }  //end of else if (process.env.VUE_APP_SCOPE !== "organization")
-  return seatsData;
-}
+      }
+    }
+    return seatsData;
+  }
 }
diff --git a/src/api/GitHubApi.ts b/src/api/GitHubApi.ts
@@ -9,56 +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(
-        `/api/github/orgs/${process.env.VUE_APP_GITHUB_ORG}/copilot/usage`);
-    } 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(
-        `/api/github/enterprises/${process.env.VUE_APP_GITHUB_ENT}/copilot/usage`,
-        {
-          headers: {
-            Accept: "application/vnd.github+json",
-            "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(`/api/github/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 ${config.github.token}`,
       'X-GitHub-Api-Version': '2022-11-28',
     },
   });
diff --git a/src/components/ApiResponse.vue b/src/components/ApiResponse.vue
@@ -30,6 +30,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import config from '../config';
 
 export default defineComponent({
   name: 'ApiResponse',
@@ -45,7 +46,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
@@ -57,6 +57,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',
@@ -69,27 +70,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 () {
@@ -99,10 +95,8 @@ export default defineComponent({
     }
   },
   created() {
-    if(this.itemName !== 'invalid'){
       this.tabItems.unshift(this.itemName);
-    }
-    if (process.env.VUE_APP_SCOPE === 'organization') {
+    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();
@@ -135,7 +129,7 @@ export default defineComponent({
             apiError.value = '401 Unauthorized access Login to GitHub using this link <a href="/login">Login</a>.';
             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;
@@ -165,7 +159,7 @@ export default defineComponent({
             apiError.value = '401 Unauthorized access Login to GitHub using this link <a href="/login">Login</a>.';
             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
@@ -0,0 +1,70 @@
+const PROPS = ["MOCKED_DATA", "SCOPE", "GITHUB_ORG", "GITHUB_ENT", "GITHUB_TOKEN"];
+
+const env: any = {};
+PROPS.forEach(prop => {
+	const propName = `VUE_APP_${prop}`;
+	if (process.env.NODE_ENV === "production") {
+		env[propName] = (window as any)["_ENV_"][propName];
+	}
+	else {
+		env[propName] = process.env[propName];
+	}
+});
+
+const VALID_SCOPE = ['organization', 'enterprise'];
+
+let scopeType;
+if (VALID_SCOPE.includes(env.VUE_APP_SCOPE)) {
+	scopeType = env.VUE_APP_SCOPE as 'enterprise' | 'organization'
+}
+
+let apiUrl: string;
+const githubOrgName = env.VUE_APP_GITHUB_ORG;
+const githubEntName = env.VUE_APP_GITHUB_ENT;
+
+let scopeName: string;
+if (scopeType === 'organization') {
+	scopeName = githubOrgName;
+	apiUrl = `https://api.github.com/orgs/${githubOrgName}`;
+}
+else if (scopeType === 'enterprise') {
+	scopeName = githubEntName;
+	apiUrl = `https://api.github.com/enterprises/${githubEntName}`;
+}
+else {
+	throw new Error(`Invalid VUE_APP_SCOPE value: ${env.VUE_APP_SCOPE}. Valid values: ${VALID_SCOPE.join(', ')}`)
+}
+
+const config: Config = {
+	mockedData: env.VUE_APP_MOCKED_DATA === "true",
+	scope: {
+		type: scopeType,
+		name: scopeName
+
+	},
+	github: {
+		org: githubOrgName,
+		ent: githubEntName,
+		token: env.VUE_APP_GITHUB_TOKEN,
+		apiUrl
+	}
+}
+if (!config.mockedData && !config.github.token) {
+	throw new Error("VUE_APP_GITHUB_TOKEN environment variable must be set.");
+}
+
+export default config;
+
+interface Config {
+	mockedData: boolean;
+	scope: {
+		type: 'organization' | 'enterprise';
+		name: string;
+	};
+	github: {
+		org: string;
+		ent: string;
+		token: string;
+		apiUrl: string;
+	}
+}
