adding socket listner dataset screen

server/src/core/controllers/app.ts

@@ -58,6 +58,8 @@ export class App extends TypedEvent<ServerStatus> {
     io.on("connection", (socket) => {
       this.socketSubscribers.map((el) => {
         el.emitter.on((e) => {
+          console.log(el.event)
+          console.log(e)
           socket.emit(el.event, e);
         });
       });

server/src/core/models/exec_error_model.ts

@@ -3,6 +3,19 @@ import { extensions } from "../extensions/extensions";
 extensions();
 
 export class ExecError extends Error {
+  id?:string;
+  script: string;
+  unixTime: number;
+  type = EXEC_TYPE.EXEC;
+  error: any;
+
+  constructor(script: string, ...args: any) {
+    super(...args);
+    this.script = script;
+    this.unixTime = Date.now();
+    this.error = args.firstElement();
+  }
+  
   static isExecError(e: any): ExecError | void {
     try {
       if (e) {
@@ -14,16 +27,6 @@ export class ExecError extends Error {
       console.log(error);
     }
   }
-  script: string;
-  unixTime: number;
-  type = EXEC_TYPE.EXEC;
-  error: any;
-  constructor(script: string, ...args: any) {
-    super(...args);
-    this.script = script;
-    this.unixTime = Date.now();
-    this.error = args.firstElement();
-  }
 }
 
 export class SpawnError extends Error {

server/src/core/models/executor_result.ts

@@ -4,6 +4,7 @@ export class ExecutorResult {
   type: EXEC_TYPE;
   event: EXEC_EVENT;
   data: any;
+  id?:string
   constructor(type: EXEC_TYPE, event: EXEC_EVENT, data: any) {
     this.type = type;
     this.event = event;

server/src/core/services/executor_program_service.ts

@@ -25,7 +25,12 @@ export class ExecutorProgramService
     this.maxTime = maxTime;
   }
 
-  private async workerExecuted(command: string, workerType: WorkerType, args: Array<string> | undefined = undefined) {
+  private async workerExecuted(
+    command: string,
+    workerType: WorkerType,
+    args: Array<string> | undefined = undefined,
+    id: string | undefined = undefined
+  ) {
     try {
       cluster.setupPrimary({
         exec: __dirname + "/../helpers/worker_computed.js",
@@ -55,6 +60,7 @@ export class ExecutorProgramService
         const execError = ExecError.isExecError(e);
 
         if (execError instanceof ExecError) {
+          execError.id = id
           this.emit(Result.error(execError));
           this.worker = undefined;
           return;
@@ -62,6 +68,7 @@ export class ExecutorProgramService
 
         const executorResult = ExecutorResult.isExecutorResult(e);
         if (executorResult instanceof ExecutorResult) {
+          executorResult.id = id
           this.emit(Result.ok(executorResult));
           this.worker = undefined;
           return;
@@ -85,13 +92,18 @@ export class ExecutorProgramService
     if (this.worker) this.worker.kill();
     this.worker = undefined;
   }
-  public async call(type: EXEC_TYPE, command: string, args: Array<string> | undefined = undefined): Promise<void> {
+  public async call(
+    type: EXEC_TYPE,
+    command: string,
+    args: Array<string> | undefined = undefined,
+    id: string | undefined = undefined
+  ): Promise<void> {
     if (type == EXEC_TYPE.EXEC) {
-      this.workerExecuted(command, WorkerType.EXEC);
+      this.workerExecuted(command, WorkerType.EXEC, undefined, id);
 
       return;
     }
-    this.workerExecuted(command, WorkerType.SPAWN, args);
+    this.workerExecuted(command, WorkerType.SPAWN, args, id);
 
     return;
   }

server/src/core/usecases/exec_process_usecase.ts

@@ -5,7 +5,7 @@ import { EXEC_TYPE, ExecError, SpawnError } from "../models/exec_error_model";
 import { ExecutorResult } from "../models/executor_result";
 import { ExecutorProgramService } from "../services/executor_program_service";
 
-const executorProgramService = new ExecutorProgramService("");
+export const executorProgramService = new ExecutorProgramService("");
 export class KillLastProcessUseCase extends CallbackStrategyWithEmpty {
   call = async (): Promise<Result<undefined, string>> => {
     executorProgramService.deleteWorker();
@@ -26,6 +26,7 @@ export class ExecProcessUseCase {
   call = async (
     path: string,
     command: string,
+    id:string,
     watcher?: TypedEvent<Result<ExecError | SpawnError, ExecutorResult>>
   ): Promise<Result<Error, string>> => {
     try {
@@ -33,7 +34,7 @@ export class ExecProcessUseCase {
       executorProgramService.on((event) => {
         if (watcher) watcher.emit(event);
       });
-      executorProgramService.call(EXEC_TYPE.EXEC, command);
+      executorProgramService.call(EXEC_TYPE.EXEC, command, undefined ,id);
 
       return Result.ok("ok");
     } catch (error) {

server/src/features/datasets/domain/exec_process_scenario.ts

@@ -6,7 +6,6 @@ import { MongoIdValidation } from "../../../core/validations/mongo_id_validation
 import { DatasetDBModel } from "../models/dataset_database_model";
 import { IDatasetModel } from "../models/dataset_validation_model";
 import { ProcessWatcherAndDatabaseUpdateService } from "./create_dataset_scenario";
-import { UpdateDataBaseModelUseCase } from "../../../core/usecases/update_database_model_usecase";
  
 export class ExecDatasetProcessScenario extends CallbackStrategyWithIdQuery {
   idValidationExpression = new MongoIdValidation();
@@ -18,6 +17,7 @@ export class ExecDatasetProcessScenario extends CallbackStrategyWithIdQuery {
          return new ExecProcessUseCase().call(
           `${model.project.rootDir}/`,
           `python3 $PYTHON_BLENDER_PROC  --path '${model.project.rootDir}/${model.name}/'`,
+          id,
           new ProcessWatcherAndDatabaseUpdateService(id as unknown as ObjectId)
         );
       });

server/src/features/projects/domain/upload_file_to_to_project_scenario.ts

@@ -18,6 +18,7 @@ export class UploadCadFileToProjectScenario extends CallbackStrategyWithFileUplo
           async () =>
             await new ExecProcessUseCase().call(
               `${databaseModel.rootDir}/`,
+              '',
               `python3 $PYTHON_BLENDER --path '${databaseModel.rootDir}/assets/'`
             )
         )

server/src/main.ts

@@ -3,10 +3,10 @@ import { App } from "./core/controllers/app";
 import { SocketSubscriber } from "./core/controllers/socket_controller";
 import { extensions } from "./core/extensions/extensions";
 import { httpRoutes } from "./core/controllers/routes";
-import { pipelineRealTimeService } from "./features/_realtime/realtime_presentation";
+import { executorProgramService } from "./core/usecases/exec_process_usecase";
  
 extensions();
 
-const socketSubscribers = [new SocketSubscriber(pipelineRealTimeService, "realtime")];
+const socketSubscribers = [new SocketSubscriber(executorProgramService, "realtime")];
 
 new App(httpRoutes, socketSubscribers).listen();

ui/src/core/extensions/extensions.ts

@@ -26,6 +26,7 @@ declare global {
     toPx(): string;
     unixFromDate(): string;
     isValid(str: string): boolean;
+    randRange(min:number,max:number):number
   }
 
   interface String {

ui/src/core/extensions/number.ts

@@ -24,4 +24,10 @@ export const NumberExtensions = () => {
       return !isNaN(Number(str));
     };
   }
+  if(Number().randRange === undefined){
+    // eslint-disable-next-line no-extend-native
+    Number.prototype.randRange = function (min,max) {
+      return Math.random() * (max - min) + min;
+    }
+  }
 };

ui/src/core/repository/socket_repository.ts

@@ -1,14 +1,30 @@
 import { Socket, io } from "socket.io-client";
+import { Result } from "../helper/result";
+import { TypedEvent } from "../helper/typed_event";
 
-export class SocketRepository {
+export class SocketRepository extends TypedEvent<any> {
   serverURL = "ws://localhost:4001";
   socket: Socket | undefined;
-  async connect() {
+  
+  async connect():Promise<Result<boolean, boolean>> {
     const socket = io(this.serverURL);
     this.socket = socket;
     socket.connect();
     socket.on('realtime', (d) =>{
+      console.log("D")
       console.log(d)
+
+      this.emit({
+        event:"realtime",
+        payload:d
+      })
     })
+    if(socket.connected){
+      return Result.ok(true)
+    }
+    return Result.error(false)
   }
+
 }
+
+export const socketRepository = new SocketRepository()

ui/src/core/ui/input/input.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import * as React from "react";
 import { CoreText, CoreTextType } from "../text/text";
-import { Input } from "antd";
 
 interface IInputProps {
   label: string;
@@ -10,15 +9,18 @@ interface IInputProps {
   validation?: (value: string) => boolean;
   error?: string;
 }
-export const CoreInput = (props: IInputProps) => {
-  const [key, setKey] = React.useState<undefined | string>(undefined);
 
+export const CoreInput = (props: IInputProps) => {
+  const [value, setValue] = React.useState<string>(() => props.value ?? "");
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [isAppendInnerText, setAppendInnerText] = React.useState(true);
   React.useEffect(() => {
-    setKey(props.value);
+    if (ref.current && isAppendInnerText) {
-    return () => {
+      ref.current.innerText = value;
-      setKey(undefined);
+      setAppendInnerText(false);
-    };
+    }
-  }, [key, setKey, props]);
+  }, [ref, value, isAppendInnerText, setAppendInnerText]);
+ 
 
   return (
     <div
@@ -35,8 +37,7 @@ export const CoreInput = (props: IInputProps) => {
     >
       <CoreText type={CoreTextType.small} text={props.label} />
 
-      <Input
+      <input
-        key={key}
         defaultValue={props.value}
         style={{
           backgroundColor: "#00008000",
@@ -46,9 +47,12 @@ export const CoreInput = (props: IInputProps) => {
           color: "#1D1B20",
           height: 24,
           width: "100%",
+          userSelect: 'none',
+          outline:'none'
         }}
         onChange={(e) => {
           const val = e.target.value;
+          setValue(val)
           if (val) {
             if (props.validation !== undefined && props.validation(val) && props.onChange) {
               props.onChange(val);
@@ -62,9 +66,9 @@ export const CoreInput = (props: IInputProps) => {
           }
         }}
       />
-      {props.value ? (
+      {value ? (
         props.validation ? (
-          props.validation(props.value) ? null : (
+          props.validation(value) ? null : (
             <div style={{ color: "#ff1d0c" }}>{props.error ? props.error : "error"}</div>
           )
         ) : null

ui/src/features/dataset/dataset_screen.tsx

@@ -62,6 +62,7 @@ export const DataSetScreen: React.FunctionComponent = observer(() => {
             />
             <Drawer
               title={DrawersDataset.FormBuilderDrawer}
+              destroyOnClose={true}
               onClose={() => store.editDrawer(DrawersDataset.FormBuilderDrawer, false)}
               open={store.drawers.find((el) => el.name === DrawersDataset.FormBuilderDrawer)?.status ?? false}
             >
@@ -84,6 +85,7 @@ export const DataSetScreen: React.FunctionComponent = observer(() => {
             </Drawer>
             <Drawer
               title={DrawersDataset.NewDataset}
+              destroyOnClose={true}
               onClose={() => store.editDrawer(DrawersDataset.NewDataset, false)}
               open={store.drawers.find((el) => el.name === DrawersDataset.NewDataset)?.status}
             > 

ui/src/features/dataset/dataset_store.ts

@@ -2,9 +2,10 @@ import makeAutoObservable from "mobx-store-inheritance";
 import { DataSetRepository } from "./dataset_repository";
 import { UiErrorState } from "../../core/store/base_store";
 import { HttpError } from "../../core/repository/http_repository";
-import { Asset, Assets, DataSetModel, IDatasetModel } from "./dataset_model";
+import { Asset, Assets, DataSetModel, IDatasetModel, ProcessStatus } from "./dataset_model";
 import { message } from "antd";
 import { UUID } from "../all_projects/data/project_repository";
+import { SocketRepository, socketRepository } from "../../core/repository/socket_repository";
 
 export enum DrawersDataset {
   NewDataset = "Новый датасет",
@@ -21,9 +22,10 @@ export class DataSetStore extends UiErrorState<HttpError> {
   activeProject: UUID;
   dataSetModel = DataSetModel.empty();
   drawers: Drawer[];
-
+  socketRepository: SocketRepository;
   constructor() {
     super();
+    this.socketRepository = socketRepository;
     this.dataSetRepository = new DataSetRepository();
     this.drawers = Object.entries(DrawersDataset).map((k, v) => {
       return {
@@ -32,8 +34,25 @@ export class DataSetStore extends UiErrorState<HttpError> {
       };
     });
     makeAutoObservable(this);
+    socketRepository.on((e) => {
+      if (e.event === "realtime") {
+        if (e.payload !== undefined && e.payload.value !== undefined && e.payload.value.id !== undefined) {
+          this.updateDatasetStatus(String(e.payload.value.id), ProcessStatus.END);
+        }
+        if (e.payload !== undefined && e.payload.error !== undefined && e.payload.error.id !== undefined) {
+          this.updateDatasetStatus(String(e.payload.error.id), ProcessStatus.ERROR);
+        }
+      }
+    });
+  }
+  updateDatasetStatus(id: string, status: ProcessStatus) {
+    this.datasets = this.datasets?.map((el) => {
+      if (el._id.isEqual(id)) {
+        el.processStatus = status;
+      }
+      return el;
+    });
   }
-
   openEmptyCard() {
     this.dataSetModel = DataSetModel.empty();
     this.editDrawer(DrawersDataset.NewDataset, true);
@@ -74,7 +93,6 @@ export class DataSetStore extends UiErrorState<HttpError> {
 
   editDataset(id: string) {
     this.dataSetModel = DataSetModel.fromIDatasetModel(this.datasets?.find((el) => el._id === id) as IDatasetModel);
-    console.log(this.dataSetModel.name);
     this.editDrawer(DrawersDataset.NewDataset, true);
   }
 
@@ -93,6 +111,7 @@ export class DataSetStore extends UiErrorState<HttpError> {
       async (s) => {
         (await this.dataSetRepository.execDatasetProcess(id)).fold(
           () => {
+            this.updateDatasetStatus(id,ProcessStatus.RUN)
             message.success("Процесс запущен");
           },
           (e) => message.error(e.message)

ui/src/features/socket_lister/socket_lister.tsx

@@ -9,7 +9,7 @@ export interface ISocketListerProps {
 
 export const SocketLister = observer((props: ISocketListerProps) => {
   return (
-    <>
+    <div>
       {socketListerStore.socketHasDisconnect ? (
         <ReloadIcon
           onClick={() => {
@@ -28,6 +28,6 @@ export const SocketLister = observer((props: ISocketListerProps) => {
       )}
 
       {props.children}
-    </>
+    </div>
   );
 });

ui/src/features/socket_lister/socket_lister_store.ts

@@ -1,5 +1,5 @@
 import { makeAutoObservable } from "mobx";
-import { SocketRepository } from "../../core/repository/socket_repository";
+import { SocketRepository, socketRepository } from "../../core/repository/socket_repository";
 
 class SocketListerStore {
   repository: SocketRepository;
@@ -8,13 +8,22 @@ class SocketListerStore {
   constructor(repository: SocketRepository) {
     this.repository = repository;
     makeAutoObservable(this);
-    repository.connect()
+    this.init();
+  }
+  async init() {
+    (await this.repository.connect()).fold(
+      () => {
+        this.socketHasDisconnect = false
+      },
+      () => {
+        this.socketHasDisconnect = true
+      }
+    );
   }
-  
   async reconnect() {
-    await this.repository.connect()
+    await this.repository.connect();
-    this.socketHasDisconnect = false
+    this.socketHasDisconnect = false;
   }
 }
 
-export const socketListerStore = new SocketListerStore(new SocketRepository());
+export const socketListerStore = new SocketListerStore(socketRepository);