Merge branch 'master' into collab-fix-prod-maybe

CS3219-AY2324S1 · Nov 15, 2023 · 4e10174 · 4e10174
2 parents a6b7807 + ccfc305
commit 4e10174
Show file tree

Hide file tree

Showing 38 changed files with 490 additions and 248 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Prerequisites for PeerPrep Monorepo:
 
 3. **Node.js:** Check each application's documentation for the recommended
     Node.js version.
-4. **Git (Optional but Recommended):**
+4. **Git**
 5. **Docker (If deploying with Docker):**
 6. **Kubernetes Tools (If deploying with Kubernetes):**
 
@@ -37,8 +37,11 @@ your services / frontend.
 ├── /frontend
 │   └── /pages for peerprep (NextJs application)
 ├── /deployment
-│   ├── /docker
-│   └── /kubernetes
+│   ├── /gke-prod-manifests
+│   ├── /prod-dockerfiles
+│   └── build-export-prod-images.sh
+├── /prisma
+├── /utils
 ├── .env (not in git)
 ├── .env.firebase_emulators_test (not in git)
 └── README.md (and other root-level files & docs)
@@ -69,7 +72,8 @@ The difference between it and `FIREBASE_SERVICE_ACCOUNT` are shown below:
     pip install pre-commit
     pre-commit install
     ```
-   
+This step requires Git to be installed.
+
 **Disclaimer:** There is no guarantee that all secrets will be detected.
 As a tip, if you think a file will eventually store secrets, immediately add it to .gitignore upon creating
 it in case you forget later on when you have a lot more files to commit.
@@ -89,8 +93,11 @@ it in case you forget later on when you have a lot more files to commit.
 
    (if you have hadoop yarn installed)
 
+   If you want to use the exact `yarn.lock` versions without any modification, add a `--frozen-lockfile` flag to the
+   command.
+
    This command will install dependencies for all services and the frontend in a
-   centralized `node_modules` directory at the root.
+   centralized `node_modules` directory at the root as well as within the respective directories.
 
 4. **Adding Dependencies:** To add a dependency to a specific workspace (e.g.,
    `user-service`), use:
@@ -137,6 +144,8 @@ Docker and Docker Compose are used to set up a simulated production build (meani
 containers that will be spun up locally are almost identical to those in the production environment, with the exception
 of some environment variables).
 
+NOTE: Do not run both Docker and No Docker at the same time. This will cause port conflicts.
+
 1. **Run yarn docker:build:** From the root repo, run
 
 ```bash
@@ -150,11 +159,7 @@ yarn docker:devup
 ```
 This will start all the containers.
 
-3. **Once done, run yarn docker:devdown:** From the root repo, run
-```bash
-yarn docker:devdown 
-```
-This will stop and delete all the containers.
+
 
 #### If you want to do all the above steps at once, see the below section
 
@@ -167,14 +172,32 @@ This will stop and delete all the containers.
 ```
 This will create new Docker images everytime it is run. Be careful of how much disk space you have left.
 
+3. **Once done, run yarn docker:devdown:** From the root repo, run
+```bash
+yarn docker:devdown 
+```
+This will stop and delete all the containers. You must run this to delete containers regardless of whether you used
+`./start-app-with-docker.sh` or `yarn docker:devup`.
+
 Any edits you make to the source code will not be automatically reflected on the site. We recommend using Docker
 Compose to check if your changes are likely to work on the production environment once they have been proven to work
 in your local development environment.
 
-### Notes:
+### Playing around with the app locally
+
+- To test all features of the application, you will need 2 GitHub accounts. 
+- You must login on both accounts on the same computer, since the setup assumes that services are centralised
+services just like in the production environment. 
+- You can do the login for your second account by opening a new browser tab in 
+incognito mode.
+
+#### Note on NUS WiFi:
+
+Access to remote databases may be blocked when using NUS WiFi. You will need a VPN to overcome this limitation if you
+are running the local app on campus.
+
+### Dependency Notes:
 
-- After setting up Yarn Workspaces, any `node_modules` directories in individual
-  services or applications can be safely removed.
 - Always ensure thorough testing after adding or updating dependencies to ensure
   all parts of the system function as expected.
 

diff --git a/deployment/gke-prod-manifests/Prod_Node_Specifications.md b/deployment/gke-prod-manifests/Prod_Node_Specifications.md
@@ -0,0 +1,12 @@
+# Specifications for GKE Nodes
+The nodes used in GKE are of the machine type e2-standard-4
+
+| Key | Value |
+|-----|-------|
+| vCPUs per node | 4     |
+| Memory size | 16 GB |
+| Boot disk size | 50 GB |
+| Node image type | cos_containerd |
+
+The GKE cluster is created in asia-southeast1 region across all 3 availability zones.
+1 node is created per zone.
diff --git a/deployment/gke-prod-manifests/admin-service-deployment.yaml b/deployment/gke-prod-manifests/admin-service-deployment.yaml
@@ -27,6 +27,7 @@ spec:
             - name: PORT
               value: "5005"
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/admin-service:latest
+          imagePullPolicy: Always
           name: admin-service
           ports:
             - containerPort: 5005
@@ -36,6 +37,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/collaboration-service-deployment.yaml b/deployment/gke-prod-manifests/collaboration-service-deployment.yaml
@@ -44,6 +44,7 @@ spec:
                   name: twilio-api-secret
                   key: twilio-api-secret
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/collaboration-service:latest
+          imagePullPolicy: Always
           name: collaboration-service
           ports:
             - containerPort: 5003
@@ -53,6 +54,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/frontend-deployment.yaml b/deployment/gke-prod-manifests/frontend-deployment.yaml
@@ -19,6 +19,7 @@ spec:
     spec:
       containers:
         - image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/frontend:latest
+          imagePullPolicy: Always
           name: frontend
           ports:
             - containerPort: 3000
@@ -28,6 +29,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/gateway-deployment.yaml b/deployment/gke-prod-manifests/gateway-deployment.yaml
@@ -33,6 +33,7 @@ spec:
             - name: FRONTEND_ADDRESS
               value: "https://www.codeparty.org"
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/gateway:latest
+          imagePullPolicy: Always
           name: gateway
           ports:
             - containerPort: 4000
@@ -52,6 +53,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/matching-service-deployment.yaml b/deployment/gke-prod-manifests/matching-service-deployment.yaml
@@ -31,6 +31,7 @@ spec:
             - name: PORT
               value: "5002"
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/matching-service:latest
+          imagePullPolicy: Always
           name: matching-service
           ports:
             - containerPort: 5002
@@ -40,6 +41,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/question-service-deployment.yaml b/deployment/gke-prod-manifests/question-service-deployment.yaml
@@ -27,6 +27,7 @@ spec:
             - name: PORT
               value: "5004"
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/question-service:latest
+          imagePullPolicy: Always
           name: question-service
           ports:
             - containerPort: 5004
@@ -36,6 +37,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/user-service-deployment.yaml b/deployment/gke-prod-manifests/user-service-deployment.yaml
@@ -27,6 +27,7 @@ spec:
             - name: PORT
               value: "5001"
           image: asia-southeast1-docker.pkg.dev/peerprep-group11-prod/codeparty-prod-images/user-service:latest
+          imagePullPolicy: Always
           name: user-service
           ports:
             - containerPort: 5001
@@ -36,6 +37,6 @@ spec:
             # You must specify requests for CPU to autoscale
             # based on CPU utilization
             requests:
-              cpu: "100m"
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/frontend/src/components/common/difficulty-selector.tsx b/frontend/src/components/common/difficulty-selector.tsx
@@ -47,3 +47,16 @@ export default function DifficultySelector({
     </div>
   );
 }
+
+export const getDifficultyColor = (difficulty: Difficulty) => {
+  switch (difficulty) {
+    case "easy":
+      return "text-green-500";
+    case "medium":
+      return "text-orange-500";
+    case "hard":
+      return "text-red-500";
+    default:
+      return "text-gray-500";
+  }
+};
diff --git a/frontend/src/components/common/navbar.tsx b/frontend/src/components/common/navbar.tsx
@@ -79,7 +79,6 @@ export default function Navbar() {
             </div>
           )}
         </div>
-        {isAdmin && <p>Admin Page</p>}
         {!currentUser && (
           <div className="grid grid-cols-2 gap-4">
             <Button variant={"outline"} onClick={login}>
@@ -89,36 +88,39 @@ export default function Navbar() {
           </div>
         )}
         {currentUser && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                className="flex justify-center items-center gap-2 h-14"
-              >
-                <Avatar className="h-10 w-10">
-                  <AvatarImage
-                    src={currentUser.photoURL || ""}
-                    className="rounded-full"
-                  />
-                </Avatar>
-                <ChevronDown className="w-6 h-6" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel
-                className="hover:bg-card"
-                onClick={() => router.push("/profile")}
-              >
-                Profile
-              </DropdownMenuLabel>
-              <DropdownMenuLabel className="hover:bg-card" onClick={() => router.push("/settings")}>
-                Settings
-              </DropdownMenuLabel>
-              <DropdownMenuLabel className="hover:bg-card" onClick={logout}>
-                Log Out
-              </DropdownMenuLabel>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <div className="flex items-center gap-x-4">
+            {isAdmin && <p>Admin</p>}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="flex justify-center items-center gap-2 h-14"
+                >
+                  <Avatar className="h-10 w-10">
+                    <AvatarImage
+                      src={currentUser.photoURL || ""}
+                      className="rounded-full"
+                    />
+                  </Avatar>
+                  <ChevronDown className="w-6 h-6" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel
+                  className="hover:bg-card"
+                  onClick={() => router.push("/profile")}
+                >
+                  Profile
+                </DropdownMenuLabel>
+                <DropdownMenuLabel className="hover:bg-card" onClick={() => router.push("/settings")}>
+                  Settings
+                </DropdownMenuLabel>
+                <DropdownMenuLabel className="hover:bg-card" onClick={logout}>
+                  Log Out
+                </DropdownMenuLabel>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         )}
       </div>
     </header>

diff --git a/frontend/src/components/interviews/leaderboard/columns.tsx b/frontend/src/components/interviews/leaderboard/columns.tsx
@@ -4,16 +4,17 @@ import { Button } from "@/components/ui/button";
 import { ColumnDef } from "@tanstack/react-table";
 
 export type PublicUser = {
+  uid: string;
   displayName: string;
   attempts: number;
-  photoURL: string;
+  photoUrl: string;
 };
 
 const getInitials = (name: string) => {
   const names = name.split(" ");
   let initials = "";
   names.forEach((n) => {
-    initials += n[0].toUpperCase();
+    initials += n[0]?.toUpperCase() || "";
   });
   return initials;
 };
@@ -24,13 +25,14 @@ export const columns: ColumnDef<PublicUser>[] = [
     header: "User",
     cell: ({ row }) => {
       const displayName = row.getValue("displayName") as string;
-      const photoURL = row.original.photoURL;
+      const photoURL = row.original.photoUrl;
+      const uid = row.original.uid;
 
       return (
         <Button
           variant="ghost"
           onClick={() => {
-            window.location.href = `/profile/Y4sCNQ4ZBqOlHjqoXmCAFAHnBWU2`;
+            window.location.href = `/profile/${uid}`;
           }}
           className="w-64"
         >
@@ -47,7 +49,7 @@ export const columns: ColumnDef<PublicUser>[] = [
   },
   {
     accessorKey: "attempts",
-    header: "Solved",
+    header: "Attempts",
     invertSorting: true,
   },
 ];
diff --git a/frontend/src/components/interviews/loader.tsx b/frontend/src/components/interviews/loader.tsx
@@ -1,6 +1,6 @@
 export default function Loader() {
   return (
-    <div className="loader">
+    <div className="loader z-0">
       <div className="box box0">
         <div></div>
       </div>