Merge branch 'master' into prod

CS3219-AY2324S1 · Oct 24, 2023 · cf81e15 · cf81e15
2 parents ce041dd + 09590ef
commit cf81e15
Show file tree

Hide file tree

Showing 12 changed files with 582 additions and 617 deletions.
diff --git a/deployment/gke-prod-manifests/admin-service-deployment.yaml b/deployment/gke-prod-manifests/admin-service-deployment.yaml
@@ -32,6 +32,10 @@ spec:
             - containerPort: 5005
               hostPort: 5005
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              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
@@ -47,6 +47,10 @@ spec:
             - containerPort: 5003
               hostPort: 5003
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/frontend-deployment.yaml b/deployment/gke-prod-manifests/frontend-deployment.yaml
@@ -24,6 +24,10 @@ spec:
             - containerPort: 3000
               hostPort: 3000
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/deployment/gke-prod-manifests/gateway-deployment.yaml b/deployment/gke-prod-manifests/gateway-deployment.yaml
@@ -34,6 +34,10 @@ spec:
             - containerPort: 4000
               hostPort: 4000
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              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
@@ -32,6 +32,10 @@ spec:
             - containerPort: 5002
               hostPort: 5002
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              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
@@ -32,6 +32,10 @@ spec:
             - containerPort: 5004
               hostPort: 5004
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              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
@@ -32,6 +32,10 @@ spec:
             - containerPort: 5001
               hostPort: 5001
               protocol: TCP
-          resources: {}
+          resources: 
+            # You must specify requests for CPU to autoscale
+            # based on CPU utilization
+            requests:
+              cpu: "250m"
       restartPolicy: Always
 status: {}
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,10 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.10.4",
+    "@types/node": "20.6.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@uiball/loaders": "^1.3.0",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

diff --git a/frontend/src/components/questions/data-table.tsx b/frontend/src/components/questions/data-table.tsx
@@ -39,6 +39,8 @@ import { AuthContext } from "../../contexts/AuthContext";
 import { User } from "firebase/auth";
 
 
+import { DotWave } from '@uiball/loaders'
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   isEditable?: boolean;
@@ -153,9 +155,12 @@ export function DataTable<TData, TValue>({
       </div>
       <div className="rounded-md border">
         {loading ? (
-          // todo make loading look good
           <div className="h-64 flex items-center justify-center">
-            Loading...
+            <DotWave
+              size={47}
+              speed={1}
+              color="white"
+            />
           </div>
         ) : (
           <Table>
@@ -168,9 +173,9 @@ export function DataTable<TData, TValue>({
                         {header.isPlaceholder
                           ? null
                           : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
                       </TableHead>
                     );
                   })}

diff --git a/frontend/src/components/room/description.tsx b/frontend/src/components/room/description.tsx
@@ -18,8 +18,8 @@ export default function Description({
   return (
     <Card className={`m-2 ml-0 px-6 h-full ${className} overflow-y-auto overflow-x-wrap pb-4`}>
       <div className="flex flex-row items-center justify-between py-2">
-        <div className="flex gap-4 items-center justify-center">
-          <TypographyH2>{question.title}</TypographyH2>
+        <div className="flex items-center justify-center">
+          <TypographyH2 className="w-fit">{question.title}</TypographyH2>
           <Badge variant="secondary" className="h-min">
             <TypographySmall className="text-[#27CA40]">
               {question.difficulty}
@@ -30,14 +30,14 @@ export default function Description({
       </div>
       <div className="flex gap-2">
         {question.topics.map((tag) => (
-          <Badge variant="outline" className="" key={tag}>
+          <Badge variant="outline" key={tag}>
             <TypographySmall>{tag}</TypographySmall>
           </Badge>
         ))}
       </div>
       <div className="py-6">
         <TypographySmall>
-          <div dangerouslySetInnerHTML={{ __html: question.description }} className="max-w-2xl overflow-x-auto"></div>
+          <div dangerouslySetInnerHTML={{ __html: question.description }} className="w-[40vw] overflow-x-auto"></div>
         </TypographySmall>
       </div>
     </Card>

diff --git a/frontend/src/pages/questions/[id]/index.tsx b/frontend/src/pages/questions/[id]/index.tsx
@@ -7,8 +7,9 @@ import { useContext, useEffect, useState } from "react";
 import { Question } from "../../../types/QuestionTypes";
 import { AuthContext } from "@/contexts/AuthContext";
 import { fetchQuestion } from "../../api/questionHandler";
+import { MrMiyagi } from "@uiball/loaders";
 
-export default function Room() {
+export default function Questions() {
   const router = useRouter();
   const questionId = router.query.id as string;
   const [question, setQuestion] = useState<Question | null>(null);
@@ -36,40 +37,49 @@ export default function Room() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [questionId, authIsReady, currentUser]);
 
-  if (loading) return (<p>Loading...</p>);
-
-  if (question === null) return (<p>Question not found</p>);
+  if (question === null && !loading) return (<p>Question not found</p>);
 
   // implement some on change solo save logic here - user side most likely
 
   return (
     <div className="h-[calc(100vh-80px)] px-12 py-6">
-      <div className="flex h-full">
-        <Tabs defaultValue="description" className="flex-1">
-          <TabsList>
-            <TabsTrigger value="description">
-              <TypographyBody>Description</TypographyBody>
-            </TabsTrigger>
-            <TabsTrigger value="solution">
-              <TypographyBody>Solution</TypographyBody>
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="description" className="h-[79vh]">
-            <Description
-              question={question}
-              className="h-full"
-            />
-          </TabsContent>
-          <TabsContent value="solution">{question.solution}</TabsContent>
-        </Tabs>
-        <div className="flex-1">
-          <CodeEditor
-            defaultValue={question.defaultCode.python}
-            onChange={setAnswer}
-            text={answer}
+      {!router.isReady || question === null || loading ?
+        <div className="flex w-full h-full justify-center items-center">
+          <MrMiyagi
+            size={35}
+            lineWeight={3.5}
+            speed={1}
+            color="white"
           />
-        </div>
-      </div>
+        </div> :
+        (
+          <div className="flex h-full">
+            <Tabs defaultValue="description" className="flex-1">
+              <TabsList>
+                <TabsTrigger value="description">
+                  <TypographyBody>Description</TypographyBody>
+                </TabsTrigger>
+                <TabsTrigger value="solution">
+                  <TypographyBody>Solution</TypographyBody>
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="description" className="h-[79vh]">
+                <Description
+                  question={question}
+                  className="h-full"
+                />
+              </TabsContent>
+              <TabsContent value="solution">{question.solution}</TabsContent>
+            </Tabs>
+            <div className="flex-1">
+              <CodeEditor
+                defaultValue={question.defaultCode.python}
+                onChange={setAnswer}
+                text={answer}
+              />
+            </div>
+          </div>
+        )}
     </div>
   );
 }