diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 65e6c38b..e1e9d7d8 100755 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -47,7 +47,9 @@ jobs: tags: razorpay/statping:base_${{ github.sha }} push: true file: ./Dockerfile.base - build-args: GIT_COMMIT_HASH=${{ github.sha }} + build-args: | + GIT_COMMIT_HASH=${{ github.sha }} + GITHUB_ACCESS_TOKEN=${{ secrets.CI_BOT_TOKEN }} cache-from: type=local,src=/tmp/.buildx-cache cache-to: type=local,dest=/tmp/.buildx-cache env: diff --git a/Dockerfile.base b/Dockerfile.base index 6e66c097..2869241c 100644 --- a/Dockerfile.base +++ b/Dockerfile.base @@ -1,6 +1,9 @@ -FROM node:12.18.2-alpine AS frontend +FROM node:16.13.0 AS frontend LABEL maintainer="Hunter Long (https://github.com/hunterlong)" ARG BUILDPLATFORM +ARG GITHUB_ACCESS_TOKEN + +ENV GITHUB_ACCESS_TOKEN ${GITHUB_ACCESS_TOKEN} # Build vue frontent WORKDIR /statping @@ -14,6 +17,7 @@ RUN yarn build && yarn cache clean WORKDIR /statping-react COPY ./react-frontend/package.json . COPY ./react-frontend/yarn.lock . +COPY ./react-frontend/.npmrc . RUN yarn install --pure-lockfile --network-timeout 1000000 COPY ./react-frontend/ . RUN yarn build && yarn cache clean @@ -42,9 +46,9 @@ ENV GO111MODULE on ENV CGO_ENABLED 1 RUN go get github.com/stretchr/testify/assert && \ go get github.com/stretchr/testify/require && \ - go get github.com/GeertJohan/go.rice/rice && \ - go get github.com/cortesi/modd/cmd/modd && \ - go get github.com/crazy-max/xgo + go get github.com/GeertJohan/go.rice/rice && \ + go get github.com/cortesi/modd/cmd/modd && \ + go get github.com/crazy-max/xgo COPY . . COPY --from=frontend /statping/dist/ ./source/dist/ COPY --from=frontend /statping-react/build/ ./react/build/ diff --git a/react-frontend/.npmrc b/react-frontend/.npmrc new file mode 100644 index 00000000..a479fa52 --- /dev/null +++ b/react-frontend/.npmrc @@ -0,0 +1,3 @@ +@razorpay:registry=https://npm.pkg.github.com/ +//npm.pkg.github.com/:always-auth=true +//npm.pkg.github.com/:_authToken=${GITHUB_ACCESS_TOKEN} \ No newline at end of file diff --git a/react-frontend/configs/dev.env b/react-frontend/configs/dev.env new file mode 100644 index 00000000..62c7275d --- /dev/null +++ b/react-frontend/configs/dev.env @@ -0,0 +1,2 @@ +REACT_APP_LUMBERJACK_API_URL="https://lumberjack.stage.razorpay.in/v1/track" +REACT_APP_LUMBERJACK_API_KEY='UHjKbQGfxNrh9p2Die2vcu06alGtijkj' diff --git a/react-frontend/configs/prod.env b/react-frontend/configs/prod.env new file mode 100644 index 00000000..2b846854 --- /dev/null +++ b/react-frontend/configs/prod.env @@ -0,0 +1,2 @@ +REACT_APP_LUMBERJACK_API_URL="https://lumberjack.razorpay.com/v1/track" +REACT_APP_LUMBERJACK_API_KEY='FsXeGGD0S8uVBnfqlgkBXE4Ht2ZH9Y9c' diff --git a/react-frontend/package.json b/react-frontend/package.json index 8842ae78..73dc48f8 100644 --- a/react-frontend/package.json +++ b/react-frontend/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "scripts": { - "start": "react-scripts start", - "build": "rm -rf build && GENERATE_SOURCEMAP=false react-scripts build", + "start": "env-cmd -f ./configs/dev.env react-scripts start", + "build": "rm -rf build && GENERATE_SOURCEMAP=false env-cmd -f ./configs/prod.env react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, @@ -17,16 +17,18 @@ "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.15", + "@razorpay/universe-utils": "^5.1.2", "apexcharts": "^3.28.1", "axios": "^0.21.1", "date-fns": "^2.23.0", + "env-cmd": "^10.1.0", "framer-motion": "^4", "node-sass": "^6.0.1", "react": "^17.0.2", "react-apexcharts": "^1.3.9", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", - "react-scripts": "4.0.3", + "react-scripts": "^5.0.1", "react-tooltip": "^4.2.21" }, "eslintConfig": { diff --git a/react-frontend/public/index.html b/react-frontend/public/index.html index 11bdb8cf..37891e25 100644 --- a/react-frontend/public/index.html +++ b/react-frontend/public/index.html @@ -36,4 +36,8 @@ To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/react-frontend/src/components/App.jsx b/react-frontend/src/components/App.jsx index 885eb380..76b3f6f7 100644 --- a/react-frontend/src/components/App.jsx +++ b/react-frontend/src/components/App.jsx @@ -1,12 +1,20 @@ -import React from "react"; +import React, { useEffect } from "react"; import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; import { ChakraProvider } from "@chakra-ui/react"; import theme from "../theme"; import ServicesPage from "./ServicesPage"; import Navigation from "./Navbar"; +import { initLumberjack } from "../utils/trackers"; +import { generateUUID, getUserId, setUerId } from "../utils/helper"; const App = () => { - console.log(`Application running on ${process.env.NODE_ENV} mode.`); + useEffect(() => { + if(!getUserId()) { + setUerId(generateUUID(14)); + } + + initLumberjack(); + }, []) return ( diff --git a/react-frontend/src/components/ContentHeader.jsx b/react-frontend/src/components/ContentHeader.jsx index 31f0e315..dd50c0c4 100644 --- a/react-frontend/src/components/ContentHeader.jsx +++ b/react-frontend/src/components/ContentHeader.jsx @@ -1,6 +1,15 @@ import React from "react"; +import { analyticsTrack } from "../utils/trackers"; const ContentHeader = () => { + const sendAnalytics = () => { + analyticsTrack({ + objectName: 'Support Page', + actionName: 'clicked', + screen: 'Home page' + }) + } + return (

@@ -13,6 +22,7 @@ const ContentHeader = () => { real-time, operational issue with one of our products that is not described below, please reach out to{" "} { const [collapse, setCollapse] = useState(false); @@ -17,10 +15,6 @@ const GroupItem = ({ service, showPlusButton }) => { const [loading, setLoading] = useState(false); const [hoverText, setHoverText] = useState(""); - // const groupServices = services - // .filter((s) => s.group_id === service.id) - // .sort((a, b) => a.order_id - b.order_id); - const fetchSubServices = async () => { const data = await API.fetchSubServices(service.id); if (Array.isArray(data)) { @@ -30,7 +24,7 @@ const GroupItem = ({ service, showPlusButton }) => { setCollapse(true); }; - const openCollapse = () => { + const openCollapse = (event) => { if (subServices.length === 0) { setLoading(true); try { @@ -43,10 +37,28 @@ const GroupItem = ({ service, showPlusButton }) => { } else { setCollapse(true); } + + analyticsTrack({ + objectName: 'Service Expand', + actionName: 'clicked', + screen: 'Home page', + properties:{ + serviceName: event.target.name, + } + }) }; - const closeCollapse = () => { + const closeCollapse = (event) => { setCollapse(false); + + analyticsTrack({ + objectName: 'Service Collapse', + actionName: 'clicked', + screen: 'Home page', + properties:{ + serviceName: event.target.name, + } + }) }; const handleMouseOver = (service) => { @@ -63,9 +75,9 @@ const GroupItem = ({ service, showPlusButton }) => { {!loading && showPlusButton && ( <> {collapse ? ( -