From c8e15e6f98019d9a337dd0a5c8724dcb35d18c69 Mon Sep 17 00:00:00 2001
From: Shubham Takode <shubham.t@solytics-partners.com>
Date: Tue, 27 Feb 2024 18:33:10 +0530
Subject: [PATCH] Pipeline compile and run API integration

---
 .../api-services/pipelines.service.ts         | 96 ++++++++++++++++++-
 .../business-logic/model/pipelines/models.ts  |  2 +
 .../model/pipelines/pipeline.ts               | 13 ++-
 .../pipelines/pipelinesCompileRequest.ts      |  6 ++
 .../model/pipelines/pipelinesRunRequest.ts    |  4 +
 .../edit-pipeline-header.component.html       |  4 +-
 .../edit-pipeline-header.component.ts         | 10 +-
 .../edit-pipeline-page.component.html         |  2 +
 .../edit-pipeline-page.component.ts           | 31 +++++-
 .../pipelines/pipelines.actions.ts            | 13 ++-
 .../pipelines/pipelines.effects.ts            | 41 +++++++-
 11 files changed, 211 insertions(+), 11 deletions(-)
 create mode 100644 src/app/business-logic/model/pipelines/pipelinesCompileRequest.ts
 create mode 100644 src/app/business-logic/model/pipelines/pipelinesRunRequest.ts

diff --git a/src/app/business-logic/api-services/pipelines.service.ts b/src/app/business-logic/api-services/pipelines.service.ts
index 79325e02..97490261 100644
--- a/src/app/business-logic/api-services/pipelines.service.ts
+++ b/src/app/business-logic/api-services/pipelines.service.ts
@@ -44,6 +44,8 @@ import {
   PipelinesGetByIdResponse,
   PipelinesUpdateRequest,
   PipelinesUpdateResponse,
+  PipelinesCompileRequest,
+  PipelinesRunRequest,
 } from "../model/pipelines/models";
 
 @Injectable()
@@ -356,7 +358,7 @@ export class ApiPipelinesService {
   ): Observable<any> {
     if (request === null || request === undefined) {
       throw new Error(
-        "Required parameter request was null or undefined when calling projectsUpdate."
+        "Required parameter request was null or undefined when calling pipelinesUpdate."
       );
     }
 
@@ -393,6 +395,98 @@ export class ApiPipelinesService {
     );
   }
 
+
+    public pipelinesCompile(
+      request: PipelinesCompileRequest,
+      options?: any,
+      observe: any = "body",
+      reportProgress: boolean = false
+    ): Observable<any> {
+      if (request === null || request === undefined) {
+        throw new Error(
+          "Required parameter request was null or undefined when calling pipelinesCompile."
+        );
+      }
+  
+      let headers = this.defaultHeaders;
+      if (options && options.async_enable) {
+        headers = headers.set(this.configuration.asyncHeader, "1");
+      }
+  
+      // to determine the Accept header
+      const httpHeaderAccepts: string[] = ["application/json"];
+      const httpHeaderAcceptSelected: string | undefined =
+        this.configuration.selectHeaderAccept(httpHeaderAccepts);
+      if (httpHeaderAcceptSelected != undefined) {
+        headers = headers.set("Accept", httpHeaderAcceptSelected);
+      }
+  
+      // to determine the Content-Type header
+      const consumes: string[] = [];
+      const httpContentTypeSelected: string | undefined =
+        this.configuration.selectHeaderContentType(consumes);
+      if (httpContentTypeSelected != undefined) {
+        headers = headers.set("Content-Type", httpContentTypeSelected);
+      }
+  
+      return this.apiRequest.post<unknown>(
+        `${this.basePath}/pipelines.compile`,
+        request,
+        {
+          withCredentials: this.configuration.withCredentials,
+          headers: headers,
+          observe: observe,
+          reportProgress: reportProgress,
+        }
+      );
+    }
+
+    public pipelinesRun(
+      request: PipelinesRunRequest,
+      options?: any,
+      observe: any = "body",
+      reportProgress: boolean = false
+    ): Observable<any> {
+      if (request === null || request === undefined) {
+        throw new Error(
+          "Required parameter request was null or undefined when calling pipelinesRun."
+        );
+      }
+  
+      let headers = this.defaultHeaders;
+      if (options && options.async_enable) {
+        headers = headers.set(this.configuration.asyncHeader, "1");
+      }
+  
+      // to determine the Accept header
+      const httpHeaderAccepts: string[] = ["application/json"];
+      const httpHeaderAcceptSelected: string | undefined =
+        this.configuration.selectHeaderAccept(httpHeaderAccepts);
+      if (httpHeaderAcceptSelected != undefined) {
+        headers = headers.set("Accept", httpHeaderAcceptSelected);
+      }
+  
+      // to determine the Content-Type header
+      const consumes: string[] = [];
+      const httpContentTypeSelected: string | undefined =
+        this.configuration.selectHeaderContentType(consumes);
+      if (httpContentTypeSelected != undefined) {
+        headers = headers.set("Content-Type", httpContentTypeSelected);
+      }
+  
+      return this.apiRequest.post<unknown>(
+        `${this.basePath}/pipelines.run`,
+        request,
+        {
+          withCredentials: this.configuration.withCredentials,
+          headers: headers,
+          observe: observe,
+          reportProgress: reportProgress,
+        }
+      );
+    }
+  
+
   /**
    *
    *
diff --git a/src/app/business-logic/model/pipelines/models.ts b/src/app/business-logic/model/pipelines/models.ts
index 960b5601..49866365 100644
--- a/src/app/business-logic/model/pipelines/models.ts
+++ b/src/app/business-logic/model/pipelines/models.ts
@@ -9,5 +9,7 @@ export * from '././pipelinesGetByIdRequest';
 export * from '././pipelinesGetByIdResponse';
 export * from '././pipelinesUpdateRequest';
 export * from '././pipelinesUpdateResponse';
+export * from '././pipelinesCompileRequest';
+export * from '././pipelinesRunRequest';
 
 export * from "././pipeline";
\ No newline at end of file
diff --git a/src/app/business-logic/model/pipelines/pipeline.ts b/src/app/business-logic/model/pipelines/pipeline.ts
index 215f0aed..63023fc7 100644
--- a/src/app/business-logic/model/pipelines/pipeline.ts
+++ b/src/app/business-logic/model/pipelines/pipeline.ts
@@ -15,10 +15,19 @@ import { PipelinesParameter } from './pipelinesParameter';
  * Do not edit the class manually.
  */
 
+interface PipelineNode {
+    id?:string;
+}
+
+interface PipelineEdge {
+    source?: string;
+    target?: string
+}
+
 interface FlowDisplay {
     
-    nodes?: Array<unknown>;
-    edges?: Array<unknown>
+    nodes?: Array<PipelineNode>;
+    edges?: Array<PipelineEdge>
 }
 
 export interface Pipeline {
diff --git a/src/app/business-logic/model/pipelines/pipelinesCompileRequest.ts b/src/app/business-logic/model/pipelines/pipelinesCompileRequest.ts
new file mode 100644
index 00000000..b835ddab
--- /dev/null
+++ b/src/app/business-logic/model/pipelines/pipelinesCompileRequest.ts
@@ -0,0 +1,6 @@
+
+export interface PipelinesCompileRequest {
+    pipeline_id?: string;
+    steps?: Array<{nodeName:string}>;
+    connections?: Array<{startNodeName:string, endNodeName: string}>;
+}
diff --git a/src/app/business-logic/model/pipelines/pipelinesRunRequest.ts b/src/app/business-logic/model/pipelines/pipelinesRunRequest.ts
new file mode 100644
index 00000000..516b890b
--- /dev/null
+++ b/src/app/business-logic/model/pipelines/pipelinesRunRequest.ts
@@ -0,0 +1,4 @@
+
+export interface PipelinesRunRequest {
+    pipeline_id: string;
+}
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
index 1ecfc79b..1f94aff8 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
@@ -37,13 +37,13 @@
   <button class="btn btn-icon g-btn" smTooltip="Save pipeline" (click)="savePipelineClicked()">
     <i class="icon i-pipeline-save lm"></i>
   </button>
-  <button class="btn btn-icon g-btn" smTooltip="Compile pipeline">
+  <button class="btn btn-icon g-btn" smTooltip="Compile pipeline" (click)="compile()">
     <i class="icon i-pipeline-compile lm"></i>
   </button>
   <button class="btn btn-icon g-btn" smTooltip="Add new step to pipeline" (click)="addNewStep()">
     <i class="icon i-pipeline-add-new-step lm"></i>
   </button>
-  <button class="btn btn-icon g-btn" smTooltip="Run pipeline">
+  <button class="btn btn-icon g-btn" smTooltip="Run pipeline" (click)="run()">
     <i class="icon i-play lm"></i>
   </button>
   <button class="btn btn-icon g-btn" smTooltip="Pipeline settings" (click)="settings()">
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts
index 213049a7..f6af5e81 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.ts
@@ -30,8 +30,8 @@ export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent imple
   @Output() createPipelineStep        = new EventEmitter();
   @Output() settingsPipelineAction       = new EventEmitter();
   @Output() savePipeline        = new EventEmitter();
-  // @Output() selectedTableColsChanged = new EventEmitter<ISmCol>();
-  // @Output() removeColFromList        = new EventEmitter<ISmCol['id']>();
+  @Output() compilePipeline = new EventEmitter();
+  @Output() runPipeline        = new EventEmitter();
   // @Output() getMetricsToDisplay      = new EventEmitter();
   // @Output() selectedMetricToShow     = new EventEmitter<SelectionEvent>();
   // @Output() selectedHyperParamToShow = new EventEmitter<{param: string; addCol: boolean}>();
@@ -61,4 +61,10 @@ export class EditPipelineHeaderComponent extends BaseEntityHeaderComponent imple
   savePipelineClicked() {
     this.savePipeline.emit();
   }
+  compile() {
+    this.compilePipeline.emit();
+  }
+  run() {
+    this.runPipeline.emit()
+  }
 }
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
index 96dbfad0..8556c4ac 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
@@ -2,6 +2,8 @@
 (settingsPipelineAction)="settings()"
 (createPipelineStep)="createPipelineStep()"
 (savePipeline)="savePipeline()"
+(compilePipeline)="compilePipeline()"
+(runPipeline)="runPipeline()"
 [pipelineData]="selectedPipeline"
 >
 </sm-edit-pipeline-header>
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
index ba165a73..117c759f 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
+++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
@@ -3,12 +3,12 @@ import { PipelineAddStepDialogComponent } from '../pipeline-add-step-dialog/pipe
 import { PipelineSettingComponent } from '../pipeline-setting/pipeline-setting.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
-import { createPipelineStep, settingsPipelineAction, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline } from '../pipelines.actions';
+import { createPipelineStep, settingsPipelineAction, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline } from '../pipelines.actions';
 import { selectRouterParams } from '@common/core/reducers/router-reducer';
 import { Observable, Subscription, map } from 'rxjs';
 import { Params } from '@angular/router';
 import { selectSelectedPipeline } from '../pipelines.reducer';
-import { Pipeline } from '~/business-logic/model/pipelines/models';
+import { Pipeline, PipelinesCompileRequest } from '~/business-logic/model/pipelines/models';
 import { cloneDeep } from 'lodash-es';
 
 @Component({
@@ -67,6 +67,32 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
     pipelineState.flow_display.edges = this.reactFlowState.edges; 
     this.store.dispatch(updatePipeline({changes: {...pipelineState}}));
   }
+
+  compilePipeline () {
+    let requestPayload: PipelinesCompileRequest = {
+      pipeline_id: this.selectedPipeline.id,
+      steps: this.selectedPipeline.flow_display.nodes.map((nodeItem) => {
+        return {
+          nodeName: nodeItem?.id
+        }
+      }),
+      connections: this.selectedPipeline.flow_display.edges.map((edgeItem) => {
+        return {
+          startNodeName: edgeItem.source,
+          endNodeName: edgeItem.target,
+        }
+      })
+    }
+
+    this.store.dispatch(compilePipeline({data: requestPayload}))
+  }
+
+  runPipeline () {
+    this.store.dispatch(runPipeline({data: {
+      pipeline_id: this.selectedPipeline.id
+    }}))
+  }
+
   createPipelineStep() {
 
     this.dialog.open(PipelineAddStepDialogComponent, {
@@ -89,6 +115,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy  {
     // });
 
   }
+
   settings() {
     this.dialog.open(PipelineSettingComponent, {
       data: {defaultExperimentId: ''},
diff --git a/src/app/webapp-common/pipelines/pipelines.actions.ts b/src/app/webapp-common/pipelines/pipelines.actions.ts
index a7bc2b58..cdab0c85 100644
--- a/src/app/webapp-common/pipelines/pipelines.actions.ts
+++ b/src/app/webapp-common/pipelines/pipelines.actions.ts
@@ -1,7 +1,7 @@
 import {createAction, props} from '@ngrx/store';
 // import {ReportsGetAllExResponse} from '~/business-logic/model/reports/reportsGetAllExResponse';
 // import {IReport} from './reports.consts';
-import { Pipeline, PipelinesCreateRequest, PipelinesUpdateRequest, PipelinesUpdateResponse, pipelinesSettingsModel } from '~/business-logic/model/pipelines/models';
+import { Pipeline, PipelinesCompileRequest, PipelinesCreateRequest, PipelinesRunRequest, PipelinesUpdateRequest, PipelinesUpdateResponse, pipelinesSettingsModel } from '~/business-logic/model/pipelines/models';
 import { PipelinesCreateStepsRequest } from '~/business-logic/model/pipelines/pipelinesCreateStepsRequest';
 import { TasksGetByIdRequest } from '~/business-logic/model/tasks/models';
 import { Task } from '~/business-logic/model/tasks/task';
@@ -42,6 +42,17 @@ export const updatePipelineSuccess = createAction(
   props<{changes: Partial<PipelinesUpdateResponse>}>()
 );
 
+
+export const compilePipeline = createAction(
+  PIPELINES_PREFIX + 'COMPILE_PIPELINE',
+  props<{data: Partial<PipelinesCompileRequest>}>()
+);
+
+export const runPipeline = createAction(
+  PIPELINES_PREFIX + 'RUN_PIPELINE',
+  props<{data: PipelinesRunRequest}>()
+);
+
 export const getExperimentById = createAction(
   PIPELINES_PREFIX + 'GET_EXPERIMENTS_BY_ID',
   props<{ getExperimentByIdRequest: TasksGetByIdRequest }>()
diff --git a/src/app/webapp-common/pipelines/pipelines.effects.ts b/src/app/webapp-common/pipelines/pipelines.effects.ts
index 85e44d53..55f9b0d5 100644
--- a/src/app/webapp-common/pipelines/pipelines.effects.ts
+++ b/src/app/webapp-common/pipelines/pipelines.effects.ts
@@ -6,7 +6,7 @@ import {catchError, filter, map, mergeMap, switchMap, /* tap */} from 'rxjs/oper
 import {activeLoader, addMessage, /* addMessage, */ deactivateLoader, setServerError} from '../core/actions/layout.actions';
 import {requestFailed} from '../core/actions/http.actions';
 import {settingsPipelineAction,
-  createPipeline, createPipelineStep, getAllExperiments, getExperimentById, getPipelineById, setExperimentsResults, setSelectedPipeline, updatePipeline, updatePipelineSuccess
+  createPipeline, createPipelineStep, getAllExperiments, getExperimentById, getPipelineById, setExperimentsResults, setSelectedPipeline, updatePipeline, updatePipelineSuccess, compilePipeline, runPipeline
 } from './pipelines.actions';
 // import {ApiReportsService} from '~/business-logic/api-services/reports.service';
 /* import {IReport, PAGE_SIZE} from './reports.consts';
@@ -288,6 +288,45 @@ export class PipelinesEffects {
     )
   ));
 
+  
+  compilePipeline = createEffect(() => this.actions.pipe(
+    ofType(compilePipeline),
+    mergeMap(action => this.pipelinesApiService.pipelinesCompile({...action.data})
+      .pipe(
+        // eslint-disable-next-line @ngrx/no-multiple-actions-in-effects
+        mergeMap(() => [
+          deactivateLoader(action.type),
+          addMessage(MESSAGES_SEVERITY.SUCCESS, 'Pipeline compiled successfully')
+        ]),
+        catchError(error => [deactivateLoader(action.type), requestFailed(error),
+          /* setServerError(error, undefined, error?.error?.meta?.result_subcode === 800 ?
+            'Name should be 3 characters long' : error?.error?.meta?.result_subcode === 801 ? 'Name' +
+              ' already' +
+              ' exists in this pipeline' : undefined) */])
+      )
+    )
+  ));
+
+
+  runPipeline = createEffect(() => this.actions.pipe(
+    ofType(runPipeline),
+    mergeMap(action => this.pipelinesApiService.pipelinesRun({...action.data})
+      .pipe(
+        // eslint-disable-next-line @ngrx/no-multiple-actions-in-effects
+        mergeMap(() => [
+          deactivateLoader(action.type),
+          addMessage(MESSAGES_SEVERITY.SUCCESS, 'Started running pipeline.')
+        ]),
+        catchError(error => [deactivateLoader(action.type), requestFailed(error),
+          /* setServerError(error, undefined, error?.error?.meta?.result_subcode === 800 ?
+            'Name should be 3 characters long' : error?.error?.meta?.result_subcode === 801 ? 'Name' +
+              ' already' +
+              ' exists in this pipeline' : undefined) */])
+      )
+    )
+  ));
+
+
   getPipelineById$ = createEffect(() => this.actions.pipe(
     ofType(getPipelineById),
     switchMap((action) => this.pipelinesApiService.pipelinesGetById({