progress

ui/package.json

@@ -17,6 +17,7 @@
     "i18next": "^23.6.0",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.4",
+    "mobx-store-inheritance": "^1.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1",

ui/src/core/repository/socket_repository.ts

@@ -4,6 +4,7 @@ export class SocketRepository {
   serverURL = "ws://localhost:4001";
   socket: Socket | undefined;
   async connect() {
+    console.log('connect')
     const socket = io(this.serverURL);
     this.socket = socket;
     socket.connect();

ui/src/core/routers/routers.tsx

@@ -5,7 +5,7 @@ import {
 } from "../../features/all_projects/presentation/all_projects_screen";
 import {
   PipelineInstanceScreen,
-  PipelineScreenPath,
+  PipelineInstanceScreenPath,
 } from "../../features/pipeline_instance_main_screen/pipeline_instance_screen";
 import {
   SelectProjectScreen,
@@ -15,7 +15,15 @@ import {
   CreatePipelineScreen,
   CreatePipelineScreenPath,
 } from "../../features/create_pipeline/presentation/create_pipeline_screen";
-import { CreateProjectScreen, CreateProjectScreenPath } from "../../features/create_project/create_project_screen";
+import {
+  CreateProjectScreen,
+  CreateProjectScreenPath,
+} from "../../features/create_project/create_project_screen";
+import {
+  CreateTriggerScreenPath,
+  TriggerScreen,
+} from "../../features/create_trigger/presentation/create_trigger_screen";
+import { CreateProcessScreen, CreateProcessScreenPath } from "../../features/create_process/presentation/create_process_screen";
 
 export const router = createBrowserRouter([
   {
@@ -23,7 +31,7 @@ export const router = createBrowserRouter([
     element: <AllProjectScreen />,
   },
   {
-    path: PipelineScreenPath,
+    path: PipelineInstanceScreenPath,
     element: <PipelineInstanceScreen />,
   },
   {
@@ -38,4 +46,12 @@ export const router = createBrowserRouter([
     path: CreateProjectScreenPath,
     element: <CreateProjectScreen />,
   },
+  {
+    path: CreateTriggerScreenPath,
+    element: <TriggerScreen />,
+  },
+  {
+    path: CreateProcessScreenPath,
+    element: <CreateProcessScreen />,
+  },
 ]);

ui/src/core/ui/list/list.tsx

@@ -4,6 +4,7 @@ import { ReactComponent as DeleteIcon } from "../../assets/icons/delete.svg";
 
 import { observer } from "mobx-react-lite";
 import { v4 } from "uuid";
+import { ILinkTypography, LinkTypography } from "../link/link";
 
 export type CallBackFunction = (el: ListElement, index: number) => void;
 
@@ -20,6 +21,7 @@ export enum Icon {
 export interface IPropsList {
   values: ListElement[];
   headers?: string;
+  link?: ILinkTypography;
   onClick?: CallBackFunction;
   icon: Icon;
 }
@@ -28,13 +30,20 @@ export const List: React.FunctionComponent<IPropsList> = observer((props) => {
   props.values.map((el) => {
     if (el.id === undefined) {
       el.id = v4();
-      return el
+      return el;
     }
-    return el
+    return el;
   });
   return (
     <div>
       {props.headers !== undefined ? <>{props.headers}</> : <></>}
+      {props.link !== undefined ? (
+        <div>
+          <LinkTypography path={props.link.path} text={props.link.text} />
+        </div>
+      ) : (
+        <></>
+      )}
       {props.values.map((el, index) => {
         return (
           <Row

ui/src/core/ui/pages/load_page.tsx

@@ -20,6 +20,7 @@ export const LoadPage: React.FunctionComponent<ILoadPage> = observer(
           path={props.path}
           largeText={props.largeText}
           minText={props.minText}
+          needBackButton={props.needBackButton}
         />
         {props.isError ? (
           <>

ui/src/features/all_projects/data/project_repository.ts

@@ -1,3 +1,8 @@
-import { HttpRepository } from "../../../core/repository/http_repository";
+import { HttpMethod, HttpRepository } from "../../../core/repository/http_repository";
+import { IProjectModel } from "../model/project_model";
 
-export class ProjectRepository extends HttpRepository {}
+export class ProjectRepository extends HttpRepository {
+  async getAllProject() {
+    return this.jsonRequest<IProjectModel[]>(HttpMethod.GET,'/project')
+  }
+}

ui/src/features/all_projects/model/project_model.ts

@@ -0,0 +1,8 @@
+import { PipelineModel } from "../../create_project/create_project_repository";
+
+export interface IProjectModel {
+  _id?: string;
+  pipelines: [PipelineModel];
+  rootDir: string;
+  description: string;
+}

ui/src/features/all_projects/presentation/all_projects_screen.tsx

@@ -1,18 +1,35 @@
 import * as React from "react";
+import { AllProjectStore } from "./all_projects_store";
+import { ProjectRepository } from "../data/project_repository";
+import { LoadPage } from "../../../core/ui/pages/load_page";
+import { observer } from "mobx-react-lite";
 import { SelectProjectScreenPath } from "../../select_project/presentation/select_project";
-import { Header } from "../../../core/ui/header/header";
 
 export const AllProjectScreenPath = "/";
 
-export const AllProjectScreen: React.FunctionComponent = () => {
+export const AllProjectScreen: React.FunctionComponent = observer(() => {
+  const [allProjectStore] = React.useState(
+    () => new AllProjectStore(new ProjectRepository())
+  );
+
   return (
     <>
-      <Header
-        path={SelectProjectScreenPath}
+      <LoadPage
+      
         largeText={"Projects"}
-        minText={"select instance project?"}
-        needBackButton={true}
+        needBackButton={false}
+        minText="create project?"
+        path={SelectProjectScreenPath}
+        isError={allProjectStore.isError}
+        isLoading={allProjectStore.isLoading}
+        children={
+          <div>
+            {allProjectStore.projectsModels?.map((el) => {
+              return <div>{el.description}</div>;
+            })}
+          </div>
+        }
       />
     </>
   );
-};
+});

ui/src/features/all_projects/presentation/all_projects_store.ts

@@ -1,12 +1,42 @@
-import { makeAutoObservable } from "mobx";
+import makeAutoObservable from "mobx-store-inheritance";
 import { ProjectRepository } from "../data/project_repository";
- 
-class AllProjectStore {
+import { IProjectModel } from "../model/project_model";
+import { Result } from "../../../core/helper/result";
+
+// TODO(IDONTSUDO): нужно переписать все сторы под BaseStore
+class BaseStore {
+  isLoading = false;
+  isError = false;
+
+  async loadingHelper<T>(callBack: Promise<Result<any, T>>) {
+    this.isLoading = true;
+
+    const result = await callBack;
+    if (result.isFailure()) {
+      this.isError = true;
+      this.isLoading = false;
+      return result.forward();
+    }
+
+    this.isLoading = false;
+    return result;
+  }
+}
+export class AllProjectStore extends BaseStore {
+  projectsModels?: IProjectModel[];
+  repository: ProjectRepository;
   constructor(repository: ProjectRepository) {
-   
+    super();
+    this.repository = repository;
+    this.getProjects();
     makeAutoObservable(this);
   }
- 
+  async getProjects() {
+    const result = await this.loadingHelper(this.repository.getAllProject());
+    if (result.isSuccess()) {
+      this.projectsModels = result.value;
+    }
+  }
 }
 
-export const allProjectStore = new AllProjectStore(new ProjectRepository());
+ 

ui/src/features/create_pipeline/presentation/create_pipeline_screen.tsx

@@ -4,6 +4,8 @@ import { LoadPage } from "../../../core/ui/pages/load_page";
 import { createPipelineStore } from "./create_pipeline_store";
 import { observer } from "mobx-react-lite";
 import { Icon, List } from "../../../core/ui/list/list";
+import { CreateTriggerScreenPath } from "../../create_trigger/presentation/create_trigger_screen";
+import { CreateProcessScreenPath } from "../../create_process/presentation/create_process_screen";
 
 export const CreatePipelineScreenPath = "/create_pipeline";
 
@@ -19,6 +21,7 @@ export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
             <Row>
               <List
                 headers={"process"}
+                link={{ path: CreateProcessScreenPath, text: "create process" }}
                 values={createPipelineStore.processModels.map((el) => {
                   return { text: el.description, id: el._id };
                 })}
@@ -41,6 +44,7 @@ export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
 
               <List
                 headers="triggers"
+                link={{ path: CreateTriggerScreenPath, text: "create trigger" }}
                 values={createPipelineStore.triggersModels.map((el) => {
                   return { text: el.description, id: el._id };
                 })}

ui/src/features/create_process/model/process_model.ts

@@ -10,6 +10,7 @@ export interface IProcess extends DatabaseModel {
   timeout?: number;
   commit?: string | undefined;
 }
+
 export enum EXEC_TYPE {
   SPAWN = "SPAWN",
   EXEC = "EXEC",
@@ -19,7 +20,6 @@ export enum IssueType {
   ERROR = "ERROR",
 }
 export const processModelMock: IProcess = {
-  _id: "",
   description: "",
   type: EXEC_TYPE.SPAWN,
   command: "",

ui/src/features/create_process/presentation/create_process_screen.tsx

@@ -12,7 +12,7 @@ import {
 import { Formik } from "formik";
 import { Row, Col } from "antd";
 import { EXEC_TYPE, IssueType, processModelMock } from "../model/process_model";
-
+export const CreateProcessScreenPath  = '/create/process'
 export const CreateProcessScreen = observer(() => {
   return (
     <div>

ui/src/features/create_project/create_project_screen.tsx

@@ -87,3 +87,4 @@ export const CreateProjectScreen: React.FunctionComponent = observer(() => {
     </>
   );
 });
+ 

ui/src/features/create_trigger/presentation/create_trigger_screen.tsx

@@ -4,7 +4,7 @@ import { CodeTriggerForm } from "./components/code_trigger_form";
 import { observer } from "mobx-react-lite";
 import { triggerStore } from "./trigger_store";
 import { FileTriggerForm } from "./components/file_trigger_form";
-import { ReactComponent as DeleteIcon } from "../../../assets/icons/delete.svg";
+import { ReactComponent as DeleteIcon } from "../../../core/assets/icons/delete.svg";
 import { Loader } from "../../../core/ui/loader/loader";
 
 const { Title } = Typography;
@@ -45,7 +45,7 @@ const Bottom = observer(() => {
     </Col>
   );
 });
-
+export const CreateTriggerScreenPath = '/create/trigger'
 export const TriggerScreen: React.FunctionComponent = observer(() => {
   return (
     <>

ui/src/features/pipeline_instance_main_screen/pipeline_instance_screen.tsx

@@ -3,7 +3,7 @@ import { Button } from "antd";
 
 
 
-export const PipelineScreenPath = '/pipeline_instance/:id'
+export const PipelineInstanceScreenPath = '/pipeline_instance/:id'
 export const PipelineInstanceScreen: React.FunctionComponent = () => {
   return (
     <>

ui/src/features/select_project/presentation/select_project.tsx

@@ -1,12 +1,18 @@
 import * as React from "react";
-import { selectProjectStore } from "./select_project_store";
+
 import { observer } from "mobx-react-lite";
 import { LoadPage } from "../../../core/ui/pages/load_page";
 import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
+import { SelectProjectStore } from "./select_project_store";
+import { SelectProjectRepository } from "../data/select_project_repository";
 
 export const SelectProjectScreenPath = "/select_project";
 
 export const SelectProjectScreen: React.FunctionComponent = observer(() => {
+  const [selectProjectStore] = React.useState(
+    () => new SelectProjectStore(new SelectProjectRepository())
+  );  
+
   return (
     <>
       <LoadPage

ui/src/features/select_project/presentation/select_project_store.ts

@@ -2,7 +2,7 @@ import { makeAutoObservable } from "mobx";
 import { SelectProjectRepository } from "../data/select_project_repository";
 import { IProjectModel } from "../model/project_model";
 
-class SelectProjectStore {
+export class SelectProjectStore {
   repository: SelectProjectRepository;
   isLoading = false;
   isError = false;
@@ -29,7 +29,4 @@ class SelectProjectStore {
     this.isLoading = false;
   }
 }
-
-export const selectProjectStore = new SelectProjectStore(
-  new SelectProjectRepository()
-);
+