adding socket listner dataset screen

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,16 +9,19 @@ 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);
-    return () => {
-      setKey(undefined);
-    };
-  }, [key, setKey, props]);
-  
+    if (ref.current && isAppendInnerText) {
+      ref.current.innerText = value;
+      setAppendInnerText(false);
+    }
+  }, [ref, value, isAppendInnerText, setAppendInnerText]);
+ 
+
   return (
     <div
       style={Object.assign(
@@ -35,8 +37,7 @@ export const CoreInput = (props: IInputProps) => {
     >
       <CoreText type={CoreTextType.small} text={props.label} />
 
-      <Input
-        key={key}
+      <input
         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,13 +34,30 @@ 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);
   }
-  
+
   setNewDatasetName(e: string): void {
     this.dataSetModel.name = e;
   }
@@ -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()
-    this.socketHasDisconnect = false
+    await this.repository.connect();
+    this.socketHasDisconnect = false;
   }
 }
 
-export const socketListerStore = new SocketListerStore(new SocketRepository());
+export const socketListerStore = new SocketListerStore(socketRepository);