feat(bench): add maxCyclomaticComplexity

codebench-dev · Jul 28, 2021 · 4ecb295 · 4ecb295
1 parent 777affd
commit 4ecb295
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/src/components/Benchmarks/BenchmarkDetail.tsx b/src/components/Benchmarks/BenchmarkDetail.tsx
@@ -42,6 +42,13 @@ const BenchmarkDetail = ({
     editorRef.current = editor;
   }
 
+  const {
+    isLoading: isBenchmarkLoading,
+    isError: isBenchmarkError,
+    data: benchmarkData,
+    error,
+  } = useBenchmarkDetail(match.params.id);
+
   let lastSubmission;
   const {
     isLoading: isLastSubmissionLoading,
@@ -89,17 +96,11 @@ const BenchmarkDetail = ({
         lintScore={jobData.lintScore}
         lintErrors={jobData.lintErrors}
         isLoading={isProcessing}
+        maxCyclomaticComplexity={benchmarkData?.maxCyclomaticComplexity}
       />
     );
   }
 
-  const {
-    isLoading: isBenchmarkLoading,
-    isError: isBenchmarkError,
-    data: benchmarkData,
-    error,
-  } = useBenchmarkDetail(match.params.id);
-
   if (isBenchmarkLoading) {
     return <span>Loading....</span>;
   }

diff --git a/src/components/Benchmarks/BenchmarkModel.ts b/src/components/Benchmarks/BenchmarkModel.ts
@@ -5,6 +5,7 @@ export default class benchmarkModel {
   gitUrl: null | undefined;
   createdAt: string | undefined;
   difficulty: string | undefined;
+  maxCyclomaticComplexity: number | undefined;
   creator:
     | {
         id: string | undefined;

diff --git a/src/components/Benchmarks/CreateBenchmark.tsx b/src/components/Benchmarks/CreateBenchmark.tsx
@@ -29,14 +29,15 @@ const CreateBenchmark: React.FC = () => {
     const title = event.target.title.value;
     const subject = event.target.subject.value;
     const difficulty = event.target.difficulty.value;
+    const maxCyclomaticComplexity = event.target.maxCylomaticComplexity.value;
 
     if (title === '' || subject === '') {
       setMessage('At least one field is blank');
       setStatus('Error');
       return;
     }
 
-    mutate({ title, subject, difficulty });
+    mutate({ title, subject, difficulty, maxCyclomaticComplexity });
   };
 
   return (
@@ -75,6 +76,23 @@ const CreateBenchmark: React.FC = () => {
               />
             </div>
           </div>
+          <div className="flex flex-wrap -mx-3 mb-6">
+            <div className="w-full px-3">
+              <label
+                className="block dark:text-gray-100 uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                htmlFor="grid-password"
+              >
+                Max cyclomatic complexity
+              </label>
+              <input
+                className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                type="number"
+                id="maxCylomaticComplexity"
+                min="1"
+                max="10"
+              />
+            </div>
+          </div>
           <div className="flex flex-wrap -mx-3 mb-6">
             <div className="w-full px-3">
               <label

diff --git a/src/components/Benchmarks/Result.tsx b/src/components/Benchmarks/Result.tsx
@@ -14,6 +14,7 @@ interface LayoutProps {
   lintScore?: number;
   lintErrors?: LintErrorDTO[];
   isLoading: boolean;
+  maxCyclomaticComplexity?: number;
 }
 
 const Result: React.FC<LayoutProps> = ({
@@ -29,6 +30,7 @@ const Result: React.FC<LayoutProps> = ({
   lintErrors,
   isLoading,
   cyclomaticComplexity,
+  maxCyclomaticComplexity,
 }) => {
   if (status !== 'done' && status !== 'failed') {
     return (
@@ -53,6 +55,7 @@ const Result: React.FC<LayoutProps> = ({
             memUsage={memUsage}
             execDuration={execDuration}
             cyclomaticComplexity={cyclomaticComplexity}
+            maxCyclomaticComplexity={maxCyclomaticComplexity}
           />
         </div>
         <div className="w-3/5 pl-6">
@@ -139,6 +142,7 @@ interface ScoresComponentProps {
   memUsage: number | undefined;
   execDuration: number | undefined;
   cyclomaticComplexity: number | undefined;
+  maxCyclomaticComplexity: number | undefined;
 }
 
 const ScoresComponent: React.FC<ScoresComponentProps> = ({
@@ -148,6 +152,7 @@ const ScoresComponent: React.FC<ScoresComponentProps> = ({
   memUsage,
   execDuration,
   cyclomaticComplexity,
+  maxCyclomaticComplexity,
 }) => {
   return (
     <div className="relative flex flex-col min-w-0 mb-4 lg:mb-0 break-words bg-gray-50 dark:bg-gray-800 w-full shadow-lg rounded">
@@ -236,7 +241,13 @@ const ScoresComponent: React.FC<ScoresComponentProps> = ({
                 </th>
                 <td className="border-t-0 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-3">
                   <div className="flex items-center">
-                    <span className="mr-2">{cyclomaticComplexity}</span>
+                    <span className="mr-2">
+                      {cyclomaticComplexity} / {maxCyclomaticComplexity}{' '}
+                      {(cyclomaticComplexity ?? 0) >
+                      (maxCyclomaticComplexity ?? 0)
+                        ? '❌'
+                        : '✅'}
+                    </span>
                   </div>
                 </td>
               </tr>

diff --git a/src/hooks/benchmark.ts b/src/hooks/benchmark.ts
@@ -26,6 +26,7 @@ export async function createBenchmark(bench: {
   title: string;
   subject: string;
   difficulty: string;
+  maxCyclomaticComplexity: number;
 }): Promise<benchmarkModel> {
   const { data } = await authenticatedRequest({
     url: `/benchmarks`,