Merge remote-tracking branch 'origin/main'

EliotAmn · Jan 21, 2025 · 93b14c0 · 93b14c0
2 parents b1f34f3 + fa9a2c6
commit 93b14c0
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# TekBetter - An better intranet for Epitech
+# TekBetter - A better intranet for Epitech
 
 ## Description
 
@@ -20,4 +20,4 @@ their daily life.
 | JWT_SECRET           | The secret key used to sign the JWT token.                                 |               |
 | AES_KEY              | The key used to encrypt sensible data in database. 64 bytes long required. |               |
 | SCRAPERS_CONFIG_FILE | The path to the scrapers configuration file. Optional                      | scrapers.json |
-| APP_URL              | The app url used to send register links by email.                          |               |
+| APP_URL              | The app url used to send register links by email.                          |               |
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,5 +1,5 @@
 import './App.css';
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {Route, Routes} from "react-router-dom";
 import React, {useEffect} from "react";
 import HomePage from "./pages/HomePage";
 import MouliPage from "./pages/mouli/MouliPages";

diff --git a/web/src/comps/TopBar.tsx b/web/src/comps/TopBar.tsx
@@ -12,7 +12,8 @@ import {getSyncStatus} from "../api/global.api";
 function NavElement(props: { text: string, icon: any, link: string }) {
     const navigate = useNavigate();
     const is_active = window.location.pathname.startsWith(props.link);
-
+    const commit_hash = process.env.REACT_APP_COMMIT_HASH || "dev";
+    console.log(commit_hash)
     return (
         <div
             className={"flex items-center text-white cursor-pointer px-5 h-full hover:bg-blue-900 transition " + (is_active ? "bg-blue-900" : "")}

diff --git a/web/src/pages/mouli/MouliContent.tsx b/web/src/pages/mouli/MouliContent.tsx
@@ -7,9 +7,9 @@ import {
     faCircleInfo,
     faClose,
     faHammer,
-    faLineChart,
+    faLineChart, faList,
     faMagnifyingGlass,
-    faSkull,
+    faSkull, faTerminal,
     faWarning
 } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
@@ -34,14 +34,16 @@ function CodingStyleRow(props: { name: string, value: number }) {
 function TraceWindow(props: { content: string, close: () => void }) {
     return (
         <div>
-            <div className={"absolute top-0 left-0 w-full h-full bg-black z-1 opacity-60"}/>
+            <div className={"absolute top-0 left-0 w-full h-full bg-black z-40 opacity-60"}/>
 
-            <div className={"absolute w-full h-full top-0 left-0 flex justify-center items-center"}>
-                <div className={"bg-gray-900 w-1/2 rounded-md p-2"}>
-                    <h1 className={"font-bold text-center text-xl mb-2"}>Trace details</h1>
+            <div className={"absolute w-full h-full top-0 left-0 flex z-50 justify-center items-center"}>
+                <div className={"bg-gray-900 m-2 rounded-md p-2"}>
+                    <h1 className={"font-bold text-center text-xl mb-2"}>Details</h1>
                     <div className={"bg-gray-800 p-2 rounded-md"}>
-                        <code>
-                            {props.content}
+                        <code className={"text-xs"}>
+                            {props.content.split("\n").map((line, index) => (
+                                <div key={index}>{line}</div>
+                            ))}
                         </code>
                     </div>
                     <div className={"flex flex-row justify-center mt-5"}>
@@ -177,7 +179,9 @@ export default function MouliContent(props: { mouli: MouliResult | null }): Reac
                     <div className={"flex flex-row justify-between w-full"}>
                         <div className={"flex flex-col gap-2 p-2 rounded-md w-full"}>
                             {/*<BasicBox className="flex flex-row w-full sm:w-[calc(40%-0.5rem)]">*/}
-                            <div className={"flex flex-row justify-between gap-2 w-full"}>
+
+                            <div className={"flex flex-col xl:flex-row justify-between gap-2 w-full"}>
+
                                 <BasicBox className={"min-w-72 flex flex-row items-center"}>
                                     <div className={"flex flex-row items-center gap-2 h-min"}>
                                         <div className={"w-20 z-10"}>
@@ -200,9 +204,17 @@ export default function MouliContent(props: { mouli: MouliResult | null }): Reac
                                             <ElemStatus
                                                 err_content={mouli.delivery_error ? "Delivery Error" : mouli.isManyMandatoryFailed() ? "Mandatory failed" : null}
                                             />
+                                            {mouli.build_trace && (
+                                                <Button
+                                                    icon={faTerminal}
+                                                    text={"Build trace"}
+                                                    onClick={() => setPopupValue(mouli.build_trace)}
+                                                />
+                                            )}
                                         </div>
                                     </div>
                                 </BasicBox>
+
                                 <BasicBox className={"flex flex-row flex-grow justify-center"}>
                                     <MouliChart scores={mouli.evolution.scores} dates={mouli.evolution.dates}/>
                                 </BasicBox>
@@ -256,26 +268,14 @@ export default function MouliContent(props: { mouli: MouliResult | null }): Reac
                                     </div>
                                 </BasicBox>
                             </div>
-
-                            {/*<div className={"flex flex-col gap-2 mt-3"}>*/}
-                            {/*    {mouli.build_trace && (*/}
-                            {/*        <Button*/}
-                            {/*            icon={faList}*/}
-                            {/*            text={"Build trace"}*/}
-                            {/*            onClick={() => setPopupValue(mouli.build_trace)}*/}
-                            {/*        />*/}
-                            {/*    )}*/}
-                            {/*</div>*/}
-                            {/*</BasicBox>*/}
-
                         </div>
 
                     </div>
                 </div>
                 <div className={"texts"}>
                     <h1>Tests</h1>
                     <div className={"space-y-2"}>
-                        {mouli.skills.map(skill => <MouliTestSkill skill={skill}/>)}
+                        {mouli.skills.map(skill => <MouliTestSkill skill={skill} setPopupValue={setPopupValue}/>)}
                     </div>
                 </div>
 

diff --git a/web/src/pages/mouli/MouliHistory.tsx b/web/src/pages/mouli/MouliHistory.tsx
@@ -68,7 +68,7 @@ export default function MouliHistory(props: {
             title={<h1 className={"font-bold text-center text"}>Tests history</h1>}
             className={"h-full overflow-y-auto"}
         >
-            <div className={"p-2 max-w-96"}>
+            <div className={"p-2 "}>
                 <div className="p-1">
 
                     {props.history.length === 0 ?  <LoadingComp/> : props.history

diff --git a/web/src/pages/mouli/MouliPages.tsx b/web/src/pages/mouli/MouliPages.tsx
@@ -147,8 +147,8 @@ export default function MouliPage(): React.ReactElement {
                             <FontAwesomeIcon icon={faChevronLeft} className={"ml-2"}/>
                             <h1 className={"text-2xl font-bold ml-2"}>{project_slug}</h1>
                         </div>
-                        <div className={"flex flex-row justify-start w-full gap-3"}>
-                            <div className={"w-96 h-full p-2"}>
+                        <div className={"flex flex-col xl:flex-row  justify-start w-full gap-3"}>
+                            <div className={"xl:w-96 w-full h-64 xl:h-full p-2"}>
                                 <MouliHistory history={history || []} selected={current_mouli?.test_id || -1}
                                               onSelect={(new_id: number) => load_test(new_id)}/>
                             </div>

diff --git a/web/src/pages/mouli/MouliTestSkill.tsx b/web/src/pages/mouli/MouliTestSkill.tsx
@@ -8,25 +8,35 @@ import React from "react";
 import ProgressBar from "@ramonak/react-progress-bar";
 import {MouliSkill, MouliTestClass} from "../../models/MouliResult";
 import scoreColor from "../../tools/ScoreColor";
+import Button from "../../comps/Button";
 
-function MouliTest(props: { test: MouliTestClass }) {
+function MouliTest(props: { test: MouliTestClass, setPopupValue: (value: string) => void }): React.ReactElement {
     const test = props.test;
 
     const color = test.is_passed ? "text-green-500" : "text-red-400";
 
+
+
     return <div className={"flex flex-row items-center gap-1 p-2 rounded-md text-gray-500"}>
         <FontAwesomeIcon icon={test.is_crashed ? faSkull : test.is_passed ? faCheckCircle : faXmarkCircle}
                          className={color}/>
         <p className={"font-bold text-nowrap"}>{test.name}</p>
         {/*<p className={`font-bold ${test.is_passed ? "text-green-600" : "text-red-500"}`}>{test.is_crashed ? "CRASH" : test.is_passed ? "Passed" : "FAIL"}</p>*/}
         <div className={"flex flex-row items-center ml-2"}>
-            <p className={"text-gray-400 pl-1 border-opacity-0 hover:border-opacity-100 border-l-2 border-l-gray-300"}>{test.comment}</p>
+            <p className={"hidden xl:block text-gray-400 pl-1 border-opacity-0 hover:border-opacity-100 border-l-2 border-l-gray-300"}>
+                {test.comment}
+            </p>
+            <p className={"xl:hidden text-gray-400 pl-1 border-opacity-0 hover:border-opacity-100 border-l-2 border-l-gray-300"} onClick={() => {
+                props.setPopupValue(test.comment!)
+            }}>
+                - Show -
+            </p>
         </div>
 
     </div>
 }
 
-export default function MouliTestSkill(props: { skill: MouliSkill }): React.ReactElement {
+export default function MouliTestSkill(props: { skill: MouliSkill, setPopupValue: (value: string) => void }): React.ReactElement {
 
     const skill = props.skill
     const [isExpanded, setIsExpanded] = React.useState(true);
@@ -48,8 +58,8 @@ export default function MouliTestSkill(props: { skill: MouliSkill }): React.Reac
 
 
             <div className={"flex flex-row items-center gap-1"}>
-                <p className={"text-right font-bold"} style={{color:  scoreColor(skill.score).html}}>{skill.score}%</p>
-                <div className={"w-60"}>
+                <p className={"text-right font-bold"} style={{color: scoreColor(skill.score).html}}>{skill.score}%</p>
+                <div className={"w-24 xl:w-60"}>
                     <ProgressBar height={"10px"} baseBgColor={"rgba(0,0,0,0.09)"} completed={skill.score}
                                  bgColor={scoreColor(skill.score).html} isLabelVisible={false}/>
                 </div>
@@ -66,7 +76,7 @@ export default function MouliTestSkill(props: { skill: MouliSkill }): React.Reac
             </div>
 
             {
-                skill.tests === null ? null : skill.tests.map((test, index) => <MouliTest key={index} test={test}/>)
+                skill.tests === null ? null : skill.tests.map((test, index) => <MouliTest setPopupValue={props.setPopupValue} key={index} test={test}/>)
             }
         </div>
     </div>