Merge pull request #2 from karpikpl/feature/configuration

Feature/configuration

Author: karpikpl

.dockerignore

@@ -1,3 +1,13 @@
-dist
-node_modules
-.github
+**/.env
+**/.env.local
+.env*
+.dockerignore
+.git
+.gitignore
+**/node_modules/
+api/public
+dist/
+.history/
+.github/
+Dockerfile
+*.md

.env

@@ -11,5 +11,9 @@ VUE_APP_GITHUB_ORG=octodemo
 VUE_APP_GITHUB_ENT=
 
 # Determines the GitHub Personal Access Token to use for API calls.
-# Create with scopes copilot, manage_billing:copilot, admin:enterprise, or manage_billing:enterprise, read:enterprise AND read:org
+# Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
 VUE_APP_GITHUB_TOKEN=
+
+# GitHub Api Url
+# for proxy api - set to /api/github
+VUE_APP_GITHUB_API_URL=https://api.github.com

.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+.azure
+
+api/public

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;"]

README.md

@@ -71,19 +71,18 @@ The language breakdown analysis tab also displays a table showing the Accepted P
 4. **Total Active Copilot Chat Users:** a bar chart that illustrates the total number of users who have actively interacted with Copilot over the past 28 days.
 
 ## Seat Analysis 
+<p align="center">
+  <img width="800" alt="image" src="https://github.com/github-copilot-resources/copilot-metrics-viewer/assets/54096296/51747194-df30-4bfb-8849-54a0510fffcb">
+</p>
+1. **Total Assigned:** This metric represents the total number of Copilot seats assigned within current organization/enterprise.
 
-![image](https://github.com/DevOps-zhuang/copilot-metrics-viewer/assets/54096296/d1fa9d1d-4fab-4e87-84ba-7be189dd4dd0)
-
-1. **Total Assigned:** This metric represents the total number of Copilot seats assigned within current organization.
-
-2. **Assigned But Never Used:** This metric shows seats that were assigned but never within the current organization. The assigned timestamp is also displayed in the below chart.
+2. **Assigned But Never Used:** This metric shows seats that were assigned but never used within the current organization/enterprise. The assigned timestamp is also displayed in the chart.
 
 3. **No Activity in the Last 7 days:** never used seats or seats used, but with no activity in the past 7 days.
 
 4. **No Activity in the last 7 days (including never used seats):** a table to display seats that have had no activity in the past 7 days, ordered by the date of last activity. Seats that were used earlier are displayed at the top.
 
 
-
 ## Setup instructions
 
 In the `.env` file, you can configure several environment variables that control the behavior of the application.
@@ -115,7 +114,7 @@ To access Copilot metrics from the last 28 days via the API and display actual d
 ```
 
 #### VUE_APP_GITHUB_TOKEN
-Specifies the GitHub Personal Access Token utilized for API requests. Generate this token with the following scopes: _copilot_, _manage_billing:copilot_, _manage_billing:enterprise_, _read:enterprise_, _admin:org_.
+Specifies the GitHub Personal Access Token utilized for API requests. Generate this token with the following scopes: _copilot_, _manage_billing:copilot_, _manage_billing:enterprise_, _read:enterprise_, _read:org_.
 
 ```
   VUE_APP_GITHUB_TOKEN=
@@ -138,10 +137,53 @@ 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
 
+## Running with API Proxy
+
+Project can run with an API proxy which hides GitHub tokens and is secure enough to be deployed.
+Api Proxy project is in `\api` directory. Vue app makes the calls to `/api/github` which then are proxied to `https://api.github.com` with appropriate bearer token.
+
+Proxy can authenticate user using GitHub App. In order to do that, following environment variables are required:
+
+* `GITHUB_CLIENT_ID` - client Id of the GitHub App registered and installed in the enterprise/org with permissions listed above.
+* `GITHUB_CLIENT_SECRET` - client secret of the GitHub App
+* `SESSION_SECRET` - random string for securing session state
+
+For local development register `http://localhost:3000/callback` as GH App callback Uri.
+For deployed version use the Uri of your app.
+
+To build and run the app with API proxy:
+
+```
+docker build -t copilot-metrics-viewer-with-api -f api.Dockerfile .
+```
+
+To run:
+
+```
+docker run -it --rm -p 8080:3000 --env-file ./.env copilot-metrics-viewer-with-api
+```
+
+## Azure Deployment 
+
+Application can be deployed using [Azure Developer CLI](https://aka.ms/azd) (azd).
+
+Before running `azd up` configure GitHub variables:
+
+```bash
+azd env set VUE_APP_SCOPE <organization/enterprise>
+# when using organization
+azd env set VUE_APP_GITHUB_ORG <org name>
+# when using enterprise
+azd env set VUE_APP_GITHUB_ENT <ent name>
+azd env set VUE_APP_GITHUB_API_URL /api/github
+azd env set GITHUB_CLIENT_ID <client id>
+azd env set GITHUB_CLIENT_SECRET <client secret>
+```
+
 ## License 
 
 This project is licensed under the terms of the MIT open source license. Please refer to [MIT](./LICENSE.txt) for the full terms.

api.Dockerfile

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+# this will tokenize the app
 RUN npm run build
 
 # Stage 2: Prepare the Node.js API
@@ -17,9 +18,14 @@ COPY api/ .
 
 # Copy the built Vue.js app from the previous stage
 COPY --from=build-stage /app/dist /api/public
+COPY --from=build-stage /app/dist/assets/app-config.js /api/app-config.template.js
+
+# install gettext-base for envsubst
+RUN apt-get update && apt-get install -y gettext-base
 
 # Expose the port your API will run on
 EXPOSE 3000
 
 # Command to run your API (and serve your Vue.js app)
-CMD ["node", "server.mjs"]
+RUN chmod +x /api/docker-entrypoint.api/entrypoint.sh
+ENTRYPOINT ["/api/docker-entrypoint.api/entrypoint.sh"]

api/.env

@@ -1,8 +1,8 @@
 # Client Id from GitHub App installed on the organization
-CLIENT_ID=
+GITHUB_CLIENT_ID=
 
 # Client Secret from GitHub App installed on the organization
-CLIENT_SECRET=
+GITHUB_CLIENT_SECRET=
 
 # Secret for the session - random string for session
 SESSION_SECRET=

api/docker-entrypoint.api/entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+configTemplateFile=/api/app-config.template.js
+configTargetFile=/api/public/assets/app-config.js
+
+envsubst <"$configTemplateFile" >"$configTargetFile"
+
+node server.mjs

api/package.json

@@ -1,9 +1,9 @@
 {
   "name": "gh-api",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "server.js",
   "scripts": {
-    "start": "node index.mjs",
+    "start": "node server.mjs",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",

api/server.mjs

@@ -4,12 +4,12 @@ import path from 'path';
 import axios from 'axios';
 import { fileURLToPath } from 'url';
 import session from 'express-session';
-import {createProxyMiddleware} from 'http-proxy-middleware';
-
-dotenv.config({ path: path.join(__dirname, '.env.local') });
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
 // Construct __dirname equivalent in ES module scope
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: path.join(__dirname, '.env') });
+//dotenv.config();
 
 const app = express();
 
@@ -22,11 +22,19 @@ app.use(session({
 
 // Middleware to add Authorization header
 const authMiddleware = (req, res, next) => {
-  if (!req.session.token) {
+  // not ideal but if someone wanted to use hardcoded token on the backend
+  if (!req.session.token && !process.env.VUE_APP_GITHUB_TOKEN) {
     res.status(401).send('Unauthorized');
     return;
   }
+
+  if (process.env.VUE_APP_GITHUB_TOKEN) {
+    // Use the hardcoded token if it's available
+    req.session.token = process.env.VUE_APP_GITHUB_TOKEN;
+  }
+
   req.headers['Authorization'] = `Bearer ${req.session.token}`;
+  console.log('Added Authorization to:', req.url);
   next();
 };
 
@@ -47,8 +55,8 @@ app.use('/api/github', authMiddleware, githubProxy);
 
 const exchangeCode = async (code) => {
   const params = new URLSearchParams({
-    client_id: process.env.CLIENT_ID,
-    client_secret: process.env.CLIENT_SECRET,
+    client_id: process.env.GITHUB_CLIENT_ID,
+    client_secret: process.env.GITHUB_CLIENT_SECRET,
     code: code,
   });
 
@@ -73,11 +81,24 @@ const exchangeCode = async (code) => {
 app.use(express.static(path.join(__dirname, 'public')));
 
 app.get('/login', (req, res) => {
-  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}`);
+  // build the URL to redirect to GitHub using host and scheme
+  const redirectUrl = `${req.protocol}://${req.get('host')}/callback`;
+  // generate random state
+  // store the state in the session
+  req.session.state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_CLIENT_ID}&redirect_uri=${redirectUrl}&state=${req.session.state}`);
 });
 
 app.get('/callback', async (req, res) => {
   const code = req.query.code;
+  const state = req.query.state;
+
+  // check the state against the session
+  if (state !== req.session.state) {
+    res.send('Invalid state');
+    return;
+  }
 
   const tokenData = await exchangeCode(code);