feat(submission): show linter output

src/api/dto/lint-error.dto.ts

@@ -0,0 +1,9 @@
+export interface LintErrorDTO {
+  message: string;
+
+  line: number | null;
+
+  column: number | null;
+
+  offset: number | null;
+}

src/components/Benchmarks/BenchmarkDetail.tsx

@@ -87,6 +87,7 @@ const BenchmarkDetail = ({
         qualityScore={jobData.qualityScore}
         cyclomaticComplexity={jobData.cyclomaticComplexity}
         lintScore={jobData.lintScore}
+        lintErrors={jobData.lintErrors}
         isLoading={isProcessing}
       />
     );

src/components/Benchmarks/Result.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Loader from 'react-loader-spinner';
+import { LintErrorDTO } from '../../api/dto/lint-error.dto';
 interface LayoutProps {
   status: string;
   message: string;
@@ -11,6 +12,7 @@ interface LayoutProps {
   qualityScore?: number;
   cyclomaticComplexity?: number;
   lintScore?: number;
+  lintErrors?: LintErrorDTO[];
   isLoading: boolean;
 }
 
@@ -24,6 +26,7 @@ const Result: React.FC<LayoutProps> = ({
   memUsage,
   qualityScore,
   lintScore,
+  lintErrors,
   isLoading,
   cyclomaticComplexity,
 }) => {
@@ -58,6 +61,11 @@ const Result: React.FC<LayoutProps> = ({
             value={stdout}
             isLoading={isLoading}
           />
+          <LinterOutput
+            text={'Linter output'}
+            lintErrors={lintErrors}
+            isLoading={isLoading}
+          />
           <OutputsComponent
             text={'Error'}
             value={error}
@@ -97,6 +105,33 @@ const OutputsComponent: React.FC<OutputsComponentProps> = ({ text, value }) => {
   }
 };
 
+interface LinterOutputProps {
+  text?: string;
+  lintErrors?: LintErrorDTO[];
+  isLoading: boolean;
+}
+
+const LinterOutput: React.FC<LinterOutputProps> = ({ text, lintErrors }) => {
+  if (lintErrors) {
+    return (
+      <div className="mt-4">
+        <b className="dark:text-gray-100">{text}:</b>
+        <div
+          className={'h-auto p-4 mt-2 w-full bg-gray-800 rounded-lg text-white'}
+        >
+          {lintErrors.map((error, i) => (
+            <p>
+              {error.column}:{error.line}: {error.message}
+            </p>
+          ))}
+        </div>
+      </div>
+    );
+  } else {
+    return <div />;
+  }
+};
+
 interface ScoresComponentProps {
   status: string | undefined;
   qualityScore: number | undefined;

src/hooks/submissions.ts

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { LintErrorDTO } from '../api/dto/lint-error.dto';
 import authenticatedRequest from '../components/utils/request';
 import { useToken } from './token';
 
@@ -67,6 +68,7 @@ function useProcessInterval({
           qualityScore: number;
           cyclomaticComplexity: number;
           lintScore: number;
+          lintErrors?: LintErrorDTO[];
         };
       } = await authenticatedRequest({
         url: `submissions/${processId}`,