WEB-3381 | Add FE for DBM workshop

.github/workflows/dbm.yml

@@ -0,0 +1,50 @@
+name: Auth
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - services/dbm/**
+  workflow_dispatch:
+    branches: [ main ]
+
+defaults:
+  run:
+    working-directory: dbm
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+
+      - name: Login to ECR
+        id: login-ecr
+        uses: docker/login-action@v1
+        with:
+          registry: public.ecr.aws
+          username: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          password: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: ./services/ads
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ secrets.PUBLIC_ECR_REGISTRY }}/storedog/dbm:latest
+

services/dbm/dbm.py

@@ -48,3 +48,4 @@ def product_ticker():
 
 if __name__ == "__main__":
     app.run(debug=True)
+

services/frontend/site/components/common/Navbar/Navbar.tsx

@@ -1,9 +1,9 @@
-import {FC, useEffect, useState} from 'react'
+import { FC, useEffect, useState, useCallback } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
-import {Logo, Container} from '@components/ui'
-import {Searchbar, UserNav} from '@components/common'
+import { Logo, Container } from '@components/ui'
+import { Searchbar, UserNav } from '@components/common'
 import { codeStash } from 'code-stash'
 import config from '../../../featureFlags.config.json'
 
@@ -17,24 +17,38 @@ interface NavbarProps {
 }
 
 const authUrl = `${process.env.NEXT_PUBLIC_AUTH_ROUTE}:${process.env.NEXT_PUBLIC_AUTH_PORT}/email`
+const dbmUrl = `${process.env.NEXT_PUBLIC_DBM_ROUTE}:${process.env.NEXT_PUBLIC_DBM_PORT}/get-item`
 
-const Navbar: FC<NavbarProps> = ({links}) => {
+const Navbar: FC<NavbarProps> = ({ links }) => {
     // Set the input value from the form to state
     const [inputValue, setInputValue] = useState<string | undefined>()
     const [showWarningMessage, setShowWarningMessage] = useState<boolean>(false)
     const [showEmailInput, setShowEmailInput] = useState<boolean>(true)
-    const [codeFlag, setCodeFlag] = useState<boolean>()
+    const [xssFlag, setXssFlag] = useState<boolean>()
+    const [dbmFlag, setDbmFlag] = useState<boolean>()
     const [userEmail, setUserEmail] = useState<string | undefined>()
+    const [productInfo, setProductInfo] = useState<object | undefined>()
 
     useEffect(() => {
         if (config) {
-        codeStash('xss', {file:config} ).then((r: boolean) => setCodeFlag(r)).catch(e => console.log(e))
+            codeStash('xss', { file: config }).then((r: boolean) => setXssFlag(r)).catch(e => console.log(e))
+            codeStash('dbm', { file: config }).then((r: boolean) => setDbmFlag(r)).catch(e => console.log(e))
         }
     }, [])
 
+    // Specific to the dbm lab, will only be active if the dbm flag is tru
+    useEffect(() => {
+        if (dbmFlag) {
+            // To simulate the ticker effect, we call this every 5 seconds, which will also run the query every 5 seconds
+            setTimeout(async () => {
+                await fetchRandomOrderCount()
+            }, 5000);
+        }
+    }, [dbmFlag, productInfo])
+
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         // Bail early if env var isn't set
-        if (!codeFlag) return
+        if (!xssFlag) return
         e.preventDefault()
         // Display warning if there is no input
         if (!inputValue) {
@@ -75,6 +89,49 @@ const Navbar: FC<NavbarProps> = ({links}) => {
         }
     }
 
+    const fetchRandomOrderCount = async () => {
+        try {
+            // List of products on the site
+            const randomProducts = [
+                'Cool Bits',
+                'Hockey Bits',
+                'Money Bits',
+                'Octo Bits',
+                'Bits By Dre'
+            ]
+
+            const options = {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Methods": "GET"
+                }
+            }
+
+            const res = await fetch(dbmUrl, options)
+            const response = await res.json()
+            // select a product name from the list at random
+            let productName = randomProducts[Math.floor(Math.random() * 5)]
+            // prevent product name from repeating 2 times in a row
+            if (productInfo && productInfo.productName === productName) {
+                // remove the productName that is being displayed from the list and get a new one
+                randomProducts.splice(randomProducts.findIndex((i) => i === productName), 1)
+                // set the name to the new one
+                productName = randomProducts[Math.floor(Math.random() * 4)]
+            }
+
+            // set the info that is displayed
+            setProductInfo({
+                productName,
+                count: response.last_hour,
+            })
+        } catch (e) {
+            console.error((e as Error).message)
+        }
+    }
+
+
     return (
         <NavbarRoot>
             <Container clean className="mx-auto max-w-8xl px-6">
@@ -112,14 +169,14 @@ const Navbar: FC<NavbarProps> = ({links}) => {
                         <Searchbar id='mobile-search' />
                     </div>
                 )}
-                {codeFlag && showEmailInput &&
+                {xssFlag && showEmailInput &&
                     // Used as an example for XSS detection in Datadog
                     <div className=" pb-1">
                         <form className="flex flex-col" onSubmit={handleSubmit}>
                             <label htmlFor='email-input' className='mb-1'>Enter email for discounts:</label>
                             <div className="flex items-center">
                                 <input onChange={(e) => setInputValue(e.target.value)} id='email-input'
-                                       className="py-2 px-2 mr-2 relative" type="text" placeholder="bits@dtdg.co"/>
+                                    className="py-2 px-2 mr-2 relative" type="text" placeholder="bits@dtdg.co" />
                                 <button
                                     className="border-2 px-2 py-1 rounded cursor-pointer hover:border-purple-600">submit
                                 </button>
@@ -131,9 +188,12 @@ const Navbar: FC<NavbarProps> = ({links}) => {
                         </form>
                     </div>
                 }
-                {!showEmailInput && codeFlag &&
+                {!showEmailInput && xssFlag &&
                     <p className="font-bold">Thank you for signing up {userEmail}!</p>
                 }
+                {dbmFlag && productInfo &&
+                    <p className="flex justify-center py-3 font-semibold">{productInfo.productName} was ordered {productInfo.count} times in the last hour 🔥</p>
+                }
             </Container>
         </NavbarRoot>
     )

services/frontend/site/featureFlags.config.json

@@ -3,5 +3,10 @@
     "id": "1",
     "name": "xss",
     "active": false
+  },
+  {
+    "id": "2",
+    "name": "dbm",
+    "active": false
   }
 ]