[#58] 테스트 실행 중지 기능 추가하기

frontend/src/components/Simulation/SimulationInputList.tsx

@@ -0,0 +1,58 @@
+import { css } from '@style/css';
+
+import type { ChangeEvent, HTMLAttributes } from 'react';
+
+import type { SimulationInput } from '@/hooks/simulation';
+
+interface Props extends HTMLAttributes<HTMLUListElement> {
+  inputList: SimulationInput[];
+  onChangeInput: (index: number, newInput: string) => void;
+}
+
+export function SimulationInputList(props: Props) {
+  const { inputList, onChangeInput, ...rest } = props;
+
+  const handleInputChange = (index: number, newInput: string) => {
+    onChangeInput(index, newInput);
+  };
+
+  return (
+    <ul {...rest}>
+      {inputList.map(({ input, id }, index) => (
+        <li key={id} className={listStyle}>
+          케이스 {index}:
+          <SimulationInput
+            value={input}
+            onChange={(newInput) => handleInputChange(id, newInput)}
+          ></SimulationInput>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+interface SimulationInputProps {
+  value: string;
+  onChange: (newInput: string) => void;
+}
+
+const SimulationInput = (props: SimulationInputProps) => {
+  const { value, onChange } = props;
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const newInput = e.target.value;
+    if (onChange) {
+      onChange(newInput);
+    }
+  };
+
+  return <input value={value} className={inputStyle} onChange={handleInput}></input>;
+};
+
+const listStyle = css({
+  marginBottom: '0.25rem',
+});
+
+const inputStyle = css({
+  color: 'black',
+});

frontend/src/components/Simulation/SimulationResultList.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+
+import type { SimulationResult } from '@/hooks/simulation';
+
+interface Props extends HTMLAttributes<HTMLUListElement> {
+  resultList: SimulationResult[];
+}
+
+export function SimulationResultList(props: Props) {
+  const { resultList = [] } = props;
+
+  return (
+    <ul>
+      {resultList.map((result) => (
+        <li key={result.id}>
+          <div>
+            <p>입력: {result.input}</p>
+            <p>결과: {String(result.output)}</p>
+            <hr />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

frontend/src/hooks/simulation/index.ts

@@ -0,0 +1,2 @@
+export * from './useSimulations';
+export * from './types';

frontend/src/hooks/simulation/types.ts

@@ -0,0 +1,11 @@
+export type SimulationInput = {
+  id: number;
+  input: string;
+};
+
+export type SimulationResult = {
+  id: number;
+  isDone: boolean;
+  input: string;
+  output: unknown;
+};

frontend/src/hooks/simulation/useSimulations.ts

@@ -0,0 +1,100 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import evaluator from '@/modules/evaluator';
+
+import type { SimulationInput, SimulationResult } from './types';
+
+export const useSimulations = () => {
+  const [simulationInputs, setSimulationInputs] = useState<SimulationInput[]>([
+    { id: 1, input: '' },
+    { id: 2, input: '' },
+    { id: 3, input: '' },
+    { id: 4, input: '' },
+    { id: 5, input: '' },
+  ]);
+  const [simulationResults, setSimulationResults] = useState<SimulationResult[]>([
+    { id: 1, isDone: true, input: '', output: '' },
+    { id: 2, isDone: true, input: '', output: '' },
+    { id: 3, isDone: true, input: '', output: '' },
+    { id: 4, isDone: true, input: '', output: '' },
+    { id: 5, isDone: true, input: '', output: '' },
+  ]);
+  const isSimulating = useMemo(() => {
+    return simulationResults.some((result) => !result.isDone);
+  }, [simulationResults]);
+
+  useEffect(() => {
+    return evaluator.subscribe(({ result, error, task }) => {
+      if (!task) return;
+
+      setSimulationResults((simulations) => {
+        return simulations.map((simul) => {
+          if (simul.id !== task.clientId) return simul;
+
+          if (error) {
+            return {
+              ...simul,
+              isDone: true,
+              output: `${error.name}: ${error.message} \n${error.stack}`,
+            };
+          }
+          return {
+            ...simul,
+            isDone: true,
+            output: result,
+          };
+        });
+      });
+    });
+  }, []);
+
+  function runSimulation(code: string) {
+    const tasks = simulationInputs.map(({ id, input }) =>
+      evaluator.createEvalMessage(id, code, input),
+    );
+
+    const isRequestSuccess = evaluator.evaluate(tasks);
+
+    if (!isRequestSuccess) {
+      return;
+    }
+
+    setSimulationResults((simulResults) => {
+      return simulResults
+        .map((simul, index) => ({
+          ...simul,
+          input: simulationInputs[index].input,
+        }))
+        .map(toEvaluatingState);
+    });
+  }
+
+  function changeInput(targetId: number, newParam: string) {
+    const changedSimulation = simulationInputs.find(({ id }) => id === targetId);
+    if (changedSimulation) {
+      changedSimulation.input = newParam;
+    }
+    setSimulationInputs([...simulationInputs]);
+  }
+
+  function cancelSimulation() {
+    evaluator.cancelEvaluation();
+  }
+
+  return {
+    simulationInputs,
+    simulationResults,
+    isSimulating,
+    runSimulation,
+    cancelSimulation,
+    changeInput,
+  };
+};
+
+const toEvaluatingState = (simulation: SimulationResult) => {
+  return {
+    ...simulation,
+    output: '계산중...',
+    isDone: false,
+  };
+};

frontend/src/modules/evaluator/EvalTaskManager.ts

@@ -12,6 +12,10 @@ export default class EvalTaskManager {
     this.taskEndNotifier = taskEndNotifier;
     this.evaluators = evaluators;
 
+    this.setupEvaluators();
+  }
+
+  setupEvaluators() {
     this.evaluators.forEach((evaluator) => {
       const { worker } = evaluator;
       const handleWorkerMessage = ({ data }: MessageEvent<EvalResult>) => {
@@ -25,7 +29,10 @@ export default class EvalTaskManager {
     this.queuedTasks.push(...tasks);
   }
   isWorking() {
-    return this.queuedTasks.length > 0;
+    const hasTask = this.queuedTasks.length > 0;
+    const hasWorkingEvaluator = this.evaluators.some((evaluator) => !evaluator.isIdle);
+
+    return hasTask || hasWorkingEvaluator;
   }
   popTask() {
     return this.queuedTasks.shift();
@@ -56,4 +63,28 @@ export default class EvalTaskManager {
     evaluator.currentTask = null;
     this.deployTask();
   }
+  notifyTaskCanceled(task: EvalMessage | null) {
+    this.taskEndNotifier.notify({
+      result: undefined,
+      error: {
+        name: 'Error',
+        message: '실행 중단',
+        stack: '',
+      },
+      task,
+    });
+  }
+  cancelTasks() {
+    const readyTasks = [...this.queuedTasks];
+    const workingTasks = this.evaluators.map(({ currentTask }) => currentTask);
+
+    [...readyTasks, ...workingTasks].forEach((task) => {
+      this.notifyTaskCanceled(task);
+    });
+    this.queuedTasks = [];
+  }
+  setNewWorkers(evaluators: Evaluator[]) {
+    this.evaluators = evaluators;
+    this.setupEvaluators();
+  }
 }

frontend/src/modules/evaluator/index.ts

@@ -19,6 +19,16 @@ function evaluate(tasks: EvalMessage[]) {
 
   evalManager.queueTasks(tasks);
   evalManager.deployTask();
+
+  return true;
+}
+
+function cancelEvaluation() {
+  evalWorkers.forEach(({ worker }) => worker.terminate());
+  evalManager.cancelTasks();
+
+  const newEvalWorkers = range(0, TOTAL_WORKERS).map(createEvaluator);
+  evalManager.setNewWorkers(newEvalWorkers);
 }
 
 function subscribe(listener: Listener<TaskEndMessage>) {
@@ -27,6 +37,7 @@ function subscribe(listener: Listener<TaskEndMessage>) {
 
 export default {
   evaluate,
+  cancelEvaluation,
   subscribe,
   createEvalMessage,
 };