ops/LAB 610 gateway frontend containers (#658)

Dockerfile

@@ -0,0 +1,24 @@
+FROM golang:1.20 as builder
+
+COPY . /app/
+RUN cd /app/ \
+    && CGO_ENABLED=0 go build -o /go/bin/plex
+
+RUN apt-get update && apt-get -y install ca-certificates
+
+FROM alpine
+
+COPY --from=builder /go/bin/plex /plex
+COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
+
+ENV POSTGRES_PASSWORD=MAKE_UP_SOMETHING_RANDOM
+ENV POSTGRES_USER=labdao
+ENV POSTGRES_DB=labdao
+ENV POSTGRES_HOST=localhost
+ENV FRONTEND_URL=http://localhost:3080
+
+EXPOSE 8080
+
+ENTRYPOINT ["/plex"]
+
+CMD ["web"]

frontend/.dockerignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/Dockerfile

@@ -0,0 +1,79 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+
+# Include NEXT_PUBLIC_BACKEND_URL
+ARG NEXT_PUBLIC_BACKEND_URL http://localhost:8080
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Copy custom run script
+COPY --from=builder --chown=nextjs:nodejs /app/run.sh /app/run.sh
+RUN chmod +x /app/run.sh
+
+# Set permission for the /app directory
+RUN chown -R nextjs:nodejs /app/
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# Default NODE_ENV
+ENV NODE_ENV production
+
+CMD /app/run.sh

frontend/app/components/TopNav/TopNav.tsx

@@ -28,17 +28,17 @@ export const TopNav = () => {
   const walletAddress = useSelector(selectWalletAddress)
 
   // State and handlers for the dropdown menu
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const [anchorEl, setAnchorEl] = React.useState<null | SVGSVGElement>(null)
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (event: React.MouseEvent<SVGSVGElement>) => {
     setAnchorEl(event.currentTarget)
   }
 
   const handleClose = () => {
     setAnchorEl(null)
   }
 
-  const handleNavigation = (path) => {
+  const handleNavigation = (path: string) => {
     router.push(path)
   }
 
@@ -62,7 +62,7 @@ export const TopNav = () => {
       {isLoggedIn && (
         <div className={styles.userContainer}>
           <span className={styles.username}>{username}</span>
-          <MenuIcon style={{ color: 'white', marginLeft: '10px' }} onClick={handleClick} />
+          <MenuIcon style={{ color: 'white', marginLeft: '10px' }} onClick={(e: any) => handleClick(e)} />
           <Menu
             anchorEl={anchorEl}
             keepMounted

frontend/app/job/init/page.tsx

@@ -24,10 +24,10 @@ export default function InitJob() {
         Visible: boolean;
     }
 
-    const [tools, setTools] = useState([]);
+    const [tools, setTools] = useState<Tool[]>([]);
     const [selectedTool, setSelectedTool] = useState('');
-    const [dataFiles, setDataFiles] = useState([]);
-    const [selectedDataFiles, setSelectedDataFiles] = useState([]);
+    const [dataFiles, setDataFiles] = useState<DataFile[]>([]);
+    const [selectedDataFiles, setSelectedDataFiles] = useState<string[]>([]);
 
     useEffect(() => {
         fetch(`${backendUrl()}/get-tools`)

frontend/app/tool/add/page.tsx

@@ -152,6 +152,7 @@ export default function AddTool() {
       "outputs": outputs
     };
 
+    // @ts-ignore
     dispatch(addToolAsync({ toolData: toolConfig, walletAddress }));
     // router.push('/tool/list');
   };

frontend/lib/redux/slices/dataFileAddSlice/dataSlice.ts

@@ -21,22 +21,22 @@ export const dataFileAddSlice = createSlice({
   name: 'dataFile',
   initialState,
   reducers: {
-    setFilename: (state, action: PayloadAction<string>) => {
+    setFilenameDataSlice: (state, action: PayloadAction<string>) => {
       state.filename = action.payload
     },
-    setCid: (state, action: PayloadAction<string>) => {
+    setCidDataSlice: (state, action: PayloadAction<string>) => {
       state.cid = action.payload
     },
-    setError: (state, action: PayloadAction<string | null>) => {
+    setDataFileError: (state, action: PayloadAction<string | null>) => {
       state.error = action.payload
     },
-    startFileUpload: (state) => {
+    startFileUploadDataSlice: (state) => {
       state.isLoading = true
     },
-    endFileUpload: (state) => {
+    endFileUploadDataSlice: (state) => {
       state.isLoading = false
     },
-    setIsUploaded: (state, action: PayloadAction<boolean>) => {
+    setIsUploadedDataSlice: (state, action: PayloadAction<boolean>) => {
       state.isUploaded = action.payload
     },
   },
@@ -62,12 +62,12 @@ export const dataFileAddSlice = createSlice({
 })
 
 export const {
-  setFilename,
-  setCid,
-  setError,
-  startFileUpload,
-  endFileUpload,
-  setIsUploaded,
+  setFilenameDataSlice,
+  setCidDataSlice,
+  setDataFileError,
+  startFileUploadDataSlice,
+  endFileUploadDataSlice,
+  setIsUploadedDataSlice,
 } = dataFileAddSlice.actions
 
 export default dataFileAddSlice.reducer

frontend/lib/redux/slices/dataFileAddSlice/thunks.ts

@@ -1,6 +1,6 @@
 import { createAppAsyncThunk } from '@/lib/redux/createAppAsyncThunk'
 import { saveDataFileToServer } from './actions'
-import { setCid, setFilename, setError } from './dataSlice'
+import { setCidDataSlice, setFilenameDataSlice, setDataFileError } from './dataSlice'
 
 interface DataFilePayload {
   file: File,
@@ -14,17 +14,17 @@ export const saveDataFileAsync = createAppAsyncThunk(
       const response = await saveDataFileToServer(file, metadata);
       console.log("Response:", response)
       if (response.filename) {
-        dispatch(setFilename(response.filename));
+        dispatch(setFilenameDataSlice(response.filename));
       } else {
-        dispatch(setError('Failed to save data file.'))
+        dispatch(setDataFileError('Failed to save data file.'))
       }
       return response;
     } catch (error: unknown) {
       const errorMessage = typeof error === 'object' && error !== null && 'message' in error
         ? (error as { message?: string }).message
         : 'An error occurred while saving data file.';
 
-      dispatch(setError(errorMessage || 'An error occurred while saving data file.'));
+      dispatch(setDataFileError(errorMessage || 'An error occurred while saving data file.'));
     }
   }
 )

frontend/lib/redux/slices/jobSlice/jobSlice.ts

@@ -26,7 +26,7 @@ export const jobSlice = createSlice({
         setSelectedDataFiles: (state, action: PayloadAction<string[]>) => {
             state.selectedDataFiles = action.payload
         },
-        setError: (state, action: PayloadAction<string | null>) => {
+        setErrorJobSlice: (state, action: PayloadAction<string | null>) => {
             state.error = action.payload
         },
         startJobInitialization: (state) => {
@@ -44,7 +44,7 @@ export const jobSlice = createSlice({
 export const {
     setSelectedTool,
     setSelectedDataFiles,
-    setError,
+    setErrorJobSlice,
     startJobInitialization,
     endJobInitialization,
     setIsInitialized,

frontend/lib/redux/slices/jobSlice/thunks.ts

@@ -1,7 +1,7 @@
 // gateway/frontend/lib/redux/slices/jobSlice/thunks.ts
 
 import { createAppAsyncThunk } from '@/lib/redux/createAppAsyncThunk'
-import { setError, startJobInitialization, endJobInitialization, setIsInitialized } from './jobSlice' // Importing actions from jobSlice.ts
+import { setErrorJobSlice, startJobInitialization, endJobInitialization, setIsInitialized } from './jobSlice' // Importing actions from jobSlice.ts
 import { initJobOnServer } from './actions'
 
 interface JobPayload {
@@ -19,7 +19,7 @@ export const initJobAsync = createAppAsyncThunk(
         // Optionally, you could store something in localStorage or perform other operations.
         dispatch(setIsInitialized(true));
       } else {
-        dispatch(setError('Failed to initialize job.'));
+        dispatch(setErrorJobSlice('Failed to initialize job.'));
       }
       dispatch(endJobInitialization());
       return response;
@@ -29,7 +29,7 @@ export const initJobAsync = createAppAsyncThunk(
         ? (error as { message?: string }).message 
         : undefined;
 
-      dispatch(setError(errorMessage || 'An error occurred while initializing the job.'));
+      dispatch(setErrorJobSlice(errorMessage || 'An error occurred while initializing the job.'));
       return false;
     }
   }

frontend/lib/redux/slices/toolAddSlice/thunks.ts

@@ -1,5 +1,5 @@
 import { createAppAsyncThunk } from '@/lib/redux/createAppAsyncThunk'
-import { setError, startFileUpload, endFileUpload, setIsUploaded } from './toolSlice' // Importing actions from toolSlice.ts
+import { setErrorToolAddSlice, startFileUpload, endFileUpload, setIsUploaded } from './toolSlice' // Importing actions from toolSlice.ts
 import { addToolToServer } from './actions'
 
 interface ToolPayload {
@@ -18,7 +18,7 @@ export const addToolAsync = createAppAsyncThunk(
         // Optionally, you could store something in localStorage or perform other operations.
         dispatch(setIsUploaded(true));
       } else {
-        dispatch(setError('Failed to add tool.'));
+        dispatch(setErrorToolAddSlice('Failed to add tool.'));
       }
       dispatch(endFileUpload());
       return response;
@@ -28,7 +28,7 @@ export const addToolAsync = createAppAsyncThunk(
         ? (error as { message?: string }).message 
         : undefined;
 
-      dispatch(setError(errorMessage || 'An error occurred while adding the tool.'));
+      dispatch(setErrorToolAddSlice(errorMessage || 'An error occurred while adding the tool.'));
       return false;
     }
   }

frontend/lib/redux/slices/toolAddSlice/toolSlice.ts

@@ -26,7 +26,7 @@ export const toolAddSlice = createSlice({
         setCid: (state, action: PayloadAction<string>) => {
             state.cid = action.payload
         },
-        setError: (state, action: PayloadAction<string | null>) => {
+        setErrorToolAddSlice: (state, action: PayloadAction<string | null>) => {
             state.error = action.payload
         },
         startFileUpload: (state) => {
@@ -44,7 +44,7 @@ export const toolAddSlice = createSlice({
 export const {
     setFilename,
     setCid,
-    setError,
+    setErrorToolAddSlice,
     startFileUpload,
     endFileUpload,
     setIsUploaded,

frontend/next.config.mjs

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  output: 'standalone'
 }
 
 export default nextConfig

frontend/run.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+set -eoux pipefail
+
+echo "Dummping envs into file for nodejs"
+
+env > /app/.env.${NODE_ENV:-local}
+
+exec node server.js