Merge branch 'feature/add-workflow'

alantsai-samples · Jul 6, 2024 · efdaa33 · efdaa33
2 parents 793f631 + 2544305
commit efdaa33
Show file tree

Hide file tree

Showing 21 changed files with 267 additions and 1 deletion.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,38 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-18-bookworm",
+	"features": {
+		"ghcr.io/devcontainers-contrib/features/vue-cli:2": {}
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"GitHub.copilot-chat",
+				"GitHub.copilot"
+			]
+		}
+	},
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [8080],
+	"portsAttributes": {
+		"8080": {
+			"protocol": "https"
+		}
+	},
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	 "postCreateCommand": "npm install"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}
diff --git a/.github/workflows/build-and-deploy-github-pages.yaml b/.github/workflows/build-and-deploy-github-pages.yaml
@@ -0,0 +1,50 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  workflow_dispatch: # Trigger 1: Manually via the GitHub UI
+  workflow_run: # Trigger 2: After "Fetch GitHub Copilot Usage Metrics" workflow completes
+    workflows: ["Fetch GitHub Copilot Usage Metrics"]
+    types:
+      - completed
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env: 
+      NAME: ${{ vars.NAME }} # Name for the org or enterprise
+      BRANCH_NAME: ${{vars.BRANCH_NAME}} # Where the data should update to, if note set, default to data/${{ env.NAME }}
+    steps:
+      - name: Determine branch name
+        run: |
+          if [ -z "${{ env.BRANCH_NAME }}" ]; then
+            echo "BRANCH_NAME=data/${{ env.NAME }}" >> $GITHUB_ENV
+          fi
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          ref: ${{env.BRANCH_NAME}}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'  # Specify your Node.js version
+
+      - name: Cache Node.js modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@4.1.4
+        with:
+          branch: gh-pages  # The branch the action should deploy to.
+          folder: dist  # The folder the action should deploy.
diff --git a/.github/workflows/fetch-copilot-usage-metrics-data.yaml b/.github/workflows/fetch-copilot-usage-metrics-data.yaml
@@ -0,0 +1,87 @@
+name: Fetch GitHub Copilot Usage Metrics
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 5 * * *' # Runs at 5 AM every day
+jobs:
+  fetchData:
+    runs-on: ubuntu-latest
+    env:
+      NAME: ${{ vars.NAME }} # Name for the org or enterprise
+      VERSION: 2022-11-28 # Replace with your API version
+      AREA: org # Replace with 'org' for organization or 'enterprise' for enterprise
+      BRANCH_NAME: ${{vars.BRANCH_NAME}} # Where the data should update to, if note set, default to data/${{ env.NAME }}
+    steps:
+      - name: Determine branch name
+        run: |
+          if [ -z "${{ env.BRANCH_NAME }}" ]; then
+            echo "BRANCH_NAME=data/${{ env.NAME }}" >> $GITHUB_ENV
+          fi
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Set up CURL command base and Fetch data
+        run: |
+          if [ "${{ env.AREA }}" == "org" ]; then
+            BASE_URL="https://api.github.com/orgs/${{ env.NAME }}"
+          elif [ "${{ env.AREA }}" == "enterprise" ]; then
+            BASE_URL="https://api.github.com/enterprises/${{ env.NAME }}"
+          else
+            echo "Invalid AREA value. Must be 'org' or 'enterprise'." >&2
+            exit 1
+          fi
+          
+          BASE_CURL="curl -L \
+            -H \"Accept: application/vnd.github+json\" \
+            -H \"Authorization: Bearer ${{ secrets.GH_TOKEN }}\" \
+            -H \"X-GitHub-Api-Version: $VERSION\""
+          
+          # Fetch usage data
+          if ! eval $BASE_CURL "$BASE_URL/copilot/usage" > ./src/assets/organization_response_sample.json; then
+            echo "Failed to fetch usage data" >&2
+            exit 1
+          fi
+          
+          # Fetch seats data
+          if ! eval $BASE_CURL "$BASE_URL/copilot/billing/seats" > ./src/assets/organization_response_sample_seats.json; then
+            echo "Failed to fetch seats data" >&2
+            exit 1
+          fi
+      - name: Process and commit data
+        run: |
+          # Example processing step
+          echo "Processing fetched data..."
+          # Add your data processing commands here
+
+          echo "Checking for uncommitted changes..."
+          git status
+          if ! git diff-index --quiet HEAD --; then
+            echo "Uncommitted changes detected, stashing..."
+            git stash push -m "Stashing changes before switching branches"
+          fi
+
+          echo "Ensuring git fetch to update the local reference..."
+          git fetch
+
+          echo "Checking if branch exists..."
+          if git show-ref --verify --quiet refs/heads/${{ env.BRANCH_NAME }} || git show-ref --verify --quiet refs/remotes/origin/${{ env.BRANCH_NAME }}; then
+            echo "Branch exists, switching to it"
+            git checkout ${{ env.BRANCH_NAME }}
+          else
+            echo "Branch does not exist, creating and switching to it"
+            git checkout -b ${{ env.BRANCH_NAME }}
+          fi
+
+          echo "Configuring Git..."
+          git config --global user.email "bot@githubaction.com"
+          git config --global user.name "GitHub Action Bot"
+
+          echo "Adding and committing changes..."
+          git stash pop || echo "No changes to pop"
+          git add ./src/assets/organization_response_sample.json ./src/assets/organization_response_sample_seats.json
+          git commit -m "Updated GitHub Copilot Usage Metrics $(date -u +"%Y-%m-%dT%H:%M:%SZ")" || echo "No changes to commit"
+
+          echo "Attempting to push changes..."
+          if ! git push origin ${{ env.BRANCH_NAME }}; then
+            echo "Failed to push changes, checking for issues..."
+            # Handle specific push failures here, e.g., pull and merge before retrying
+          fi
diff --git a/README.md b/README.md
@@ -7,6 +7,96 @@ _NOTE: For information on support and assistance, click [here](https://github.co
 
 This application displays a set of charts with various metrics related to GitHub Copilot for your <i>GitHub Organization</i> or <i>Enterprise Account</i>. These visualizations are designed to provide clear representations of the data, making it easy to understand and analyze the impact and adoption of GitHub Copilot. This app utilizes the [GitHub Copilot Metrics API](https://docs.github.com/en/enterprise-cloud@latest/rest/copilot/copilot-usage?apiVersion=2022-11-28).
 
+## Setup GitHub Action
+
+To set up the GitHub Action for fetching and processing GitHub Copilot usage metrics, follow these steps:
+
+1. fork my version：[https://github.com/alantsai-samples/copilot-metrics-viewer/fork](https://github.com/alantsai-samples/copilot-metrics-viewer/fork)
+
+    ![image](docs/assets/image-20240708152710-7kko76q.png)
+2. disable original two GitHub Action which is create container image and deploy to Azure Static Website
+
+    ![enable GitHub Action](docs/assets/image-20240708152832-45vpu60.png "enable GitHub Action")
+
+    ![Disable Azure Static Web Apps CI/CD](docs/assets/image-20240708152857-a8h82yt.png "Disable Azure Static Web Apps CI/CD")
+
+    ![Disable Build and push Docker image](docs/assets/image-20240708152952-rk1xlh0.png "Disable Build and push Docker image")
+3. Setup Required secrets
+
+    ![image](docs/assets/image-20240708153141-5un6ur9.png "add new secrets")
+
+    add `GH_TOKEN` as Name with the Personal Access Token created from [here](https://github.com/settings/tokens/new?scopes=read:enterprise,manage_billing:copilot) as Secret (need scope : `read:enterprise`, `manage_billing:copilot`)
+
+    ![image](docs/assets/image-20240708153449-0462bic.png)
+
+    it should look like:
+
+    ![image](docs/assets/image-20240708153544-d7h6hu7.png)
+4. Setup Variables
+
+    You need to set `NAME` as to your organization or enterprise name
+
+    ![create new repository variable](docs/assets/image-20240708153645-tnoo4rz.png "create new repository variable")
+
+    ![create new repository variable](docs/assets/image-20240708153701-xoxu3b0.png "create new repository variable")
+5. Execute `Fetch GitHub Copilot Usage Metrics` Action
+
+    ![image](docs/assets/image-20240708153915-8f1dkf9.png "got to Actions and find Fetch GitHub Copilot Usage Metrics then Enable Workflow")
+
+    ![run workflow](docs/assets/image-20240708153947-34u5ss4.png "run workflow")
+
+    this flow is triggered every morning 05:00 at UTC time zone
+6. `Build and Deploy to GitHub Pages` will automatically be triggered when `Fetch GitHub Copilot Usage Metrics` is done
+
+    ![image](docs/assets/image-20240708154135-rhkp6e7.png)
+7. Setup GitHub Pages
+
+    `Settings` -> `Pages` -> `gh-pages`
+
+    ![enable gh-pages](docs/assets/image-20240708154246-5u38m1o.png "enable gh-pages")
+
+    ![new pages-build-deployment action will be created and execute automatically](docs/assets/image-20240708154329-7d1ax3i.png "new pages-build-deployment action will be created and execute automatically")
+
+    ![modify default project url to use gh-pages](docs/assets/image-20240708154501-1zp1nxn.png "modify default project url to use gh-pages")
+8. Try the page
+
+    Click onto the gh-pages and you will see the result
+
+    ignore the `Using mock data - see README if unintended` part
+
+    ![image](docs/assets/image-20240708154617-s09ai1g.png)
+
+### Other Reference
+
+There are other GitHub Action Variables that you can set
+
+1. `AREA` - currently support `org` or `enterprise`. It is used to build up the API url path. Default to `org`.
+2. `BRANCH_NAME` - When fetch data, it will push default to `data/{NAME}` branch.  If you would like to change it, just modify this to what you want
+
+## Workflow Diagram
+
+Below is a diagram illustrating the GitHub Action workflow for fetching, processing, and visualizing GitHub Copilot usage metrics:
+
+```mermaid
+graph TD
+    subgraph A["Fetch GitHub Copilot Usage Metrics Workflow"]
+        Checkout["Checkout code"]
+        FetchMetrics["Fetch Copilot Metrics"]
+        ProcessMetrics["Process Metrics"]
+        CommitData["Commit Processed Data"]
+        Checkout --> FetchMetrics
+        FetchMetrics --> ProcessMetrics
+        ProcessMetrics --> CommitData
+        CommitData --> B["Project Codebase"]
+    end
+    
+    B -->|Triggers| G["Build and Deploy"]
+    
+    subgraph D["Build and Deploy to GitHub Pages Workflow"]
+        G -->|Builds and Deploys| C["Copilot Metrics Site"]
+    end
+```
+
 ## Video
 
 https://github.com/github-copilot-resources/copilot-metrics-viewer/assets/3329307/bc7e2a16-cc73-43c4-887a-b50809c08533

diff --git a/docs/assets/image-20240708152710-7kko76q.png b/docs/assets/image-20240708152710-7kko76q.png
diff --git a/docs/assets/image-20240708152832-45vpu60.png b/docs/assets/image-20240708152832-45vpu60.png
diff --git a/docs/assets/image-20240708152857-a8h82yt.png b/docs/assets/image-20240708152857-a8h82yt.png
diff --git a/docs/assets/image-20240708152952-rk1xlh0.png b/docs/assets/image-20240708152952-rk1xlh0.png
diff --git a/docs/assets/image-20240708153141-5un6ur9.png b/docs/assets/image-20240708153141-5un6ur9.png
diff --git a/docs/assets/image-20240708153449-0462bic.png b/docs/assets/image-20240708153449-0462bic.png
diff --git a/docs/assets/image-20240708153544-d7h6hu7.png b/docs/assets/image-20240708153544-d7h6hu7.png
diff --git a/docs/assets/image-20240708153645-tnoo4rz.png b/docs/assets/image-20240708153645-tnoo4rz.png
diff --git a/docs/assets/image-20240708153701-xoxu3b0.png b/docs/assets/image-20240708153701-xoxu3b0.png
diff --git a/docs/assets/image-20240708153915-8f1dkf9.png b/docs/assets/image-20240708153915-8f1dkf9.png
diff --git a/docs/assets/image-20240708153947-34u5ss4.png b/docs/assets/image-20240708153947-34u5ss4.png
diff --git a/docs/assets/image-20240708154135-rhkp6e7.png b/docs/assets/image-20240708154135-rhkp6e7.png
diff --git a/docs/assets/image-20240708154246-5u38m1o.png b/docs/assets/image-20240708154246-5u38m1o.png
diff --git a/docs/assets/image-20240708154329-7d1ax3i.png b/docs/assets/image-20240708154329-7d1ax3i.png
diff --git a/docs/assets/image-20240708154501-1zp1nxn.png b/docs/assets/image-20240708154501-1zp1nxn.png
diff --git a/docs/assets/image-20240708154617-s09ai1g.png b/docs/assets/image-20240708154617-s09ai1g.png
diff --git a/vue.config.js b/vue.config.js
@@ -6,5 +6,6 @@ module.exports = defineConfig({
     vuetify: {
 			// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
 		}
-  }
+  },
+  publicPath: './'
 })