From 37401e772e28617f3481e2a9056680cc1b5deb98 Mon Sep 17 00:00:00 2001 From: Devin Ford Date: Wed, 5 Apr 2023 14:10:29 -0400 Subject: [PATCH 1/3] feat: add FE for dbm --- .../site/components/common/Navbar/Navbar.tsx | 80 ++++++++++++++++--- .../frontend/site/featureFlags.config.json | 5 ++ 2 files changed, 75 insertions(+), 10 deletions(-) diff --git a/services/frontend/site/components/common/Navbar/Navbar.tsx b/services/frontend/site/components/common/Navbar/Navbar.tsx index e9a5214f..5591583d 100644 --- a/services/frontend/site/components/common/Navbar/Navbar.tsx +++ b/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 = ({links}) => { +const Navbar: FC = ({ links }) => { // Set the input value from the form to state const [inputValue, setInputValue] = useState() const [showWarningMessage, setShowWarningMessage] = useState(false) const [showEmailInput, setShowEmailInput] = useState(true) - const [codeFlag, setCodeFlag] = useState() + const [xssFlag, setXssFlag] = useState() + const [dbmFlag, setDbmFlag] = useState() const [userEmail, setUserEmail] = useState() + const [productInfo, setProductInfo] = useState() 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() + }, 4000); + } + }, [dbmFlag, productInfo]) + const handleSubmit = async (e: React.FormEvent) => { // 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 = ({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 ( @@ -112,14 +169,14 @@ const Navbar: FC = ({links}) => { )} - {codeFlag && showEmailInput && + {xssFlag && showEmailInput && // Used as an example for XSS detection in Datadog
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" /> @@ -131,9 +188,12 @@ const Navbar: FC = ({links}) => {
} - {!showEmailInput && codeFlag && + {!showEmailInput && xssFlag &&

Thank you for signing up {userEmail}!

} + {dbmFlag && productInfo && +

{productInfo.productName} was ordered {productInfo.count} times in the last hour 🔥

+ } ) diff --git a/services/frontend/site/featureFlags.config.json b/services/frontend/site/featureFlags.config.json index 0b9390ce..c4c85384 100644 --- a/services/frontend/site/featureFlags.config.json +++ b/services/frontend/site/featureFlags.config.json @@ -3,5 +3,10 @@ "id": "1", "name": "xss", "active": false + }, + { + "id": "2", + "name": "dbm", + "active": true } ] \ No newline at end of file From 435ba14e5fa26a98e32fd1e957d7e37a974bb835 Mon Sep 17 00:00:00 2001 From: Devin Ford Date: Wed, 5 Apr 2023 14:27:25 -0400 Subject: [PATCH 2/3] fix: update timeout --- services/frontend/site/components/common/Navbar/Navbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/frontend/site/components/common/Navbar/Navbar.tsx b/services/frontend/site/components/common/Navbar/Navbar.tsx index 5591583d..c7c80126 100644 --- a/services/frontend/site/components/common/Navbar/Navbar.tsx +++ b/services/frontend/site/components/common/Navbar/Navbar.tsx @@ -42,10 +42,10 @@ const Navbar: FC = ({ links }) => { // To simulate the ticker effect, we call this every 5 seconds, which will also run the query every 5 seconds setTimeout(async () => { await fetchRandomOrderCount() - }, 4000); + }, 5000); } }, [dbmFlag, productInfo]) - + const handleSubmit = async (e: React.FormEvent) => { // Bail early if env var isn't set if (!xssFlag) return From 957dd63bb7ed4d8aa0601bcc57672b63ffd0e9cd Mon Sep 17 00:00:00 2001 From: Devin Ford Date: Wed, 5 Apr 2023 14:56:10 -0400 Subject: [PATCH 3/3] feat: add build for dbm, force build --- .github/workflows/dbm.yml | 50 +++++++++++++++++++ services/dbm/dbm.py | 1 + .../frontend/site/featureFlags.config.json | 2 +- 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/dbm.yml diff --git a/.github/workflows/dbm.yml b/.github/workflows/dbm.yml new file mode 100644 index 00000000..d0319169 --- /dev/null +++ b/.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 + diff --git a/services/dbm/dbm.py b/services/dbm/dbm.py index 413c9ff9..489b740e 100644 --- a/services/dbm/dbm.py +++ b/services/dbm/dbm.py @@ -48,3 +48,4 @@ def product_ticker(): if __name__ == "__main__": app.run(debug=True) + diff --git a/services/frontend/site/featureFlags.config.json b/services/frontend/site/featureFlags.config.json index c4c85384..d006ebba 100644 --- a/services/frontend/site/featureFlags.config.json +++ b/services/frontend/site/featureFlags.config.json @@ -7,6 +7,6 @@ { "id": "2", "name": "dbm", - "active": true + "active": false } ] \ No newline at end of file