Merge pull request #50 from oslabs-beta/dev

feat: Add CI/CD workflow to redeploy to AWS Fargate on successful push to main, minor bug fixes

.github/workflows/aws.yml

@@ -0,0 +1,83 @@
+name: Deploy to AWS ECS
+
+on:
+  push:
+    branches: ['main'] # Triggers on push to main
+
+concurrency:
+  group: deploy-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  ECR_REPOSITORY: app # Set this to your Amazon ECR repository name
+  ECS_SERVICE: SkyDevOps # Set this to your Amazon ECS service name
+  ECS_CLUSTER: Sky # Set this to your Amazon ECS cluster name
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    name: Deploy to AWS ECS
+    runs-on: ubuntu-latest
+    environment: production
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Login to AWS ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+
+      - name: Build and push new Docker image to AWS ECR
+        id: build-image
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          IMAGE_TAG: latest
+        run: |
+          # Use Docker Buildx to build the image for x86_64
+          docker buildx build --platform linux/amd64 --push -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+
+          echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT
+          echo "Docker image $ECR_REPOSITORY:$IMAGE_TAG has been built and pushed to $ECR_REGISTRY"
+
+      - name: Deploy to AWS ECS
+        run: |
+          # Update the ECS service
+          aws ecs update-service --cluster ${{ env.ECS_CLUSTER }} --service ${{ env.ECS_SERVICE }} --force-new-deployment
+
+          # Define the website URL and the desired status code
+          WEBSITE_URL="https://skyscraper-api.com"
+          EXPECTED_STATUS_CODE=200
+
+          # Loop until the website returns the expected status code
+          # Wait 30 seconds before sending request
+          sleep 30
+          while true; do
+              # Send a HEAD request to the website and capture the HTTP status code
+              HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" $WEBSITE_URL)
+              
+              # Check if the status code matches the expected status code
+              if [ "$HTTP_STATUS" -eq "$EXPECTED_STATUS_CODE" ]; then
+                  echo "Website is back up with status code $HTTP_STATUS"
+                  break
+              else
+                  echo "Website down. Current status code: $HTTP_STATUS"
+              fi
+              
+              # Wait 20 seconds before the next check
+              sleep 20
+          done
+          echo "Website online"
+          echo "Deployment successful"

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20
+FROM public.ecr.aws/docker/library/node:20-alpine
 
 # Set the working directory
 WORKDIR /usr/src/app
@@ -7,13 +7,14 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 
 # Install dependencies
+RUN npm install -g npm@latest
 RUN npm install
 
 # Copy the rest of the application code
 COPY ./client ./client
 COPY ./server ./server
 
-# Build the client and server
+# Build the server and client
 RUN npm run build:server
 RUN npm run build:prd
 

README.md

@@ -6,7 +6,7 @@
 
 <p align="center">
   <a href="https://github.com/oslabs-beta/SkyScraper">
-    <img src="./client/src/assets/images/CircleLogo.png" alt="Logo" height="100">
+    <img src="images/CircleLogo.png" alt="Logo" height="100">
   </a>
 
   <h3 align="center">SkyScraper</h3>
@@ -15,7 +15,7 @@
     Visualizer Dashboard for AWS EC2 Instances
     <br />
     <a href="https://github.com/oslabs-beta/SkyScraper/issues">Report Bug</a>
-    ·
+    |
     <a href="https://github.com/oslabs-beta/SkyScraper/issues">Request Feature</a>
 
   </p>
@@ -56,7 +56,7 @@
 
 <br/>
 <p align="center">
-  <img width="900" src="./client/src/assets/images/FlatLogo.png">
+  <img width="900" src="images/FlatLogo.png">
 </p>
 
 SkyScraper is an innovative visualizer dashboard that transforms the way developers interact with AWS performance data, starting with EC2. By offering a streamlined, intuitive interface, SkyScraper optimizes the retrieval, organization, and visualization of performance metrics, enabling users to manage their AWS environments effectively.
@@ -67,17 +67,17 @@ Designed with a focus on clarity and aesthetics, SkyScraper features custom them
 
 ### Built With
 
-- [<img style="height: 1em;" src="./client/src/assets/images/TS.png">](https://www.typescriptlang.org/) [TypeScript](https://www.typescriptlang.org/)
-- [<img style="height: 1em;" src="./client/src/assets/images/React.png">](https://reactjs.org/) [React](https://reactjs.org/)
-- [<img style="height: 1em;" src="./client/src/assets/images/Redux.png">](https://redux-toolkit.js.org/) [Redux](https://redux-toolkit.js.org/)
-- [<img style="height: 1em;" src="./client/src/assets/images/Nodejs.png">](https://nodejs.org/en) [Node.js](https://nodejs.org/en)
-- [<img style="height: 1em;" src="./client/src/assets/images/Express.png">](https://expressjs.com/) [Express](https://expressjs.com/)
-- [<img style="height: 1em;" src="./client/src/assets/images/Chartjs.png">](https://www.chartjs.org/) [Chart.js](https://www.chartjs.org/)
-- [<img style="height: 1em;" src="./client/src/assets/images/WebPack.png">](https://webpack.js.org/) [Webpack](https://webpack.js.org/)
-- [<img style="height: 1em;" src="./client/src/assets/images/Auth0.png">](https://auth0.com/) [Auth0](https://auth0.com/)
-- [<img style="height: 1em;" src="./client/src/assets/images/Cognito.png">](https://docs.aws.amazon.com/cognitoidentity/latest/APIReference/Welcome.html) [AWS Cognito API](https://docs.aws.amazon.com/cognitoidentity/latest/APIReference/Welcome.html)
-- [<img style="height: 1em;" src="./client/src/assets/images/CloudWatch.png">](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/Welcome.html) [AWS CloudWatch API](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/Welcome.html)
-- [<img style="height: 1em;" src="./client/src/assets/images/EC2.png">](https://docs.aws.amazon.com/AWSEC2/latest/APIReference/Welcome.html) [AWS EC2 API](https://docs.aws.amazon.com/AWSEC2/latest/APIReference/Welcome.html)
+- [<img style="height: 1em;" src="images/TS.png">](https://www.typescriptlang.org/) [TypeScript](https://www.typescriptlang.org/)
+- [<img style="height: 1em;" src="images/React.png">](https://reactjs.org/) [React](https://reactjs.org/)
+- [<img style="height: 1em;" src="images/Redux.png">](https://redux-toolkit.js.org/) [Redux](https://redux-toolkit.js.org/)
+- [<img style="height: 1em;" src="images/Nodejs.png">](https://nodejs.org/en) [Node.js](https://nodejs.org/en)
+- [<img style="height: 1em;" src="images/Express.png">](https://expressjs.com/) [Express](https://expressjs.com/)
+- [<img style="height: 1em;" src="images/Chartjs.png">](https://www.chartjs.org/) [Chart.js](https://www.chartjs.org/)
+- [<img style="height: 1em;" src="images/Webpack.png">](https://webpack.js.org/) [Webpack](https://webpack.js.org/)
+- [<img style="height: 1em;" src="images/Auth0.png">](https://auth0.com/) [Auth0](https://auth0.com/)
+- [<img style="height: 1em;" src="images/Cognito.png">](https://docs.aws.amazon.com/cognitoidentity/latest/APIReference/Welcome.html) [AWS Cognito API](https://docs.aws.amazon.com/cognitoidentity/latest/APIReference/Welcome.html)
+- [<img style="height: 1em;" src="images/CloudWatch.png">](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/Welcome.html) [AWS CloudWatch API](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/Welcome.html)
+- [<img style="height: 1em;" src="images/EC2.png">](https://docs.aws.amazon.com/AWSEC2/latest/APIReference/Welcome.html) [AWS EC2 API](https://docs.aws.amazon.com/AWSEC2/latest/APIReference/Welcome.html)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -150,25 +150,25 @@ Distributed under the MIT License. See [`LICENSE`](https://github.com/oslabs-bet
 
 ## Creators
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">](https://github.com/abelr20) [<img style="height: 1em; width: 1em;" src="./client/src/assets/images/LinkedIn.png">](https://www.linkedin.com/in/abel-ratanaphan/) Abel Ratanaphan
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">](https://github.com/abelr20) [<img style="height: 1em; width: 1em;" src="images/LinkedIn.png">](https://www.linkedin.com/in/abel-ratanaphan/) Abel Ratanaphan
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">](https://github.com/b-the-coder) [<img style="height: 1em; width: 1em;" src="./client/src/assets/images/LinkedIn.png">](https://www.linkedin.com/in/bin-emma-he/) Bin He
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">](https://github.com/b-the-coder) [<img style="height: 1em; width: 1em;" src="images/LinkedIn.png">](https://www.linkedin.com/in/bin-emma-he/) Bin He
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">](https://github.com/ChristieLaf) [<img style="height: 1em; width: 1em;" src="./client/src/assets/images/LinkedIn.png">](https://www.linkedin.com/in/christie-laferriere/) Christie Laferriere
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">](https://github.com/ChristieLaf) [<img style="height: 1em; width: 1em;" src="images/LinkedIn.png">](https://www.linkedin.com/in/christie-laferriere/) Christie Laferriere
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">](https://github.com/TrippMurphy) [<img style="height: 1em; width: 1em;" src="./client/src/assets/images/LinkedIn.png">](https://www.linkedin.com/in/trippmurphy/) Tripp Murphy
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">](https://github.com/TrippMurphy) [<img style="height: 1em; width: 1em;" src="images/LinkedIn.png">](https://www.linkedin.com/in/trippmurphy/) Tripp Murphy
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">](https://github.com/Nikolaa92) [<img style="height: 1em; width: 1em;" src="./client/src/assets/images/LinkedIn.png">](https://www.linkedin.com/in/nikola-andelkovic/) Nikola Andelkovic
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">](https://github.com/Nikolaa92) [<img style="height: 1em; width: 1em;" src="images/LinkedIn.png">](https://www.linkedin.com/in/nikola-andelkovic/) Nikola Andelkovic
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Contact Us
 
-<img style="height: 1em; width: 1em;" src="./client/src/assets/images/Mail.png"> [email protected]
+<img style="height: 1em; width: 1em;" src="images/Mail.png"> [email protected]
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/XWhite.png">]() [@SkyScraperApp](https://x.com/SkyScraperApp)
+[<img style="height: 1em; width: 1em;" src="images/XWhite.png">]() [@SkyScraperApp](https://x.com/SkyScraperApp)
 
-[<img style="height: 1em; width: 1em;" src="./client/src/assets/images/GitHubWhite.png">]() [github.com/oslabs-beta/SkyScraper](https://github.com/oslabs-beta/SkyScraper/)
+[<img style="height: 1em; width: 1em;" src="images/GitHubWhite.png">]() [github.com/oslabs-beta/SkyScraper](https://github.com/oslabs-beta/SkyScraper/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

client/public/index.html

@@ -1,16 +1,23 @@
-</html>
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SkyScraper</title>
+
+  <!-- Ionicons for icons -->
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
-  <link rel="icon" href="../src/assets/images/CircleLogo.png" />
+
+  <!-- Favicon -->
+  <link rel="icon" href="favicon.ico" />
+
+  <!-- Preconnect for Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:[email protected]&display=swap" rel="stylesheet">
 </head>
 

client/src/App.tsx

@@ -6,7 +6,7 @@ import DashboardPage from './features/dashboard/DashboardPage';
 import EC2MonitorPage from './features/ec2Monitor/EC2MonitorPage';
 import NavBar from './features/navbar/Navbar';
 import './styles/styles.css';
-import './styles/Navbar.css';
+import './styles/Nav.css';
 import './styles/LoginPage.css';
 import './styles/HomePage.css';