mirror of
https://github.com/clearml/clearml-web
synced 2025-03-13 07:08:17 +00:00
Pipeline step delete
This commit is contained in:
Shubham Takode
parent
431b4ac47e
commit
5909271f8f
@ -345,6 +345,52 @@ export class ApiPipelinesService {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public pipelinesDeleteStep(
|
||||
request: {step: string},
|
||||
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 pipelinesDeleteStep."
|
||||
);
|
||||
}
|
||||
|
||||
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<any>(
|
||||
`${this.basePath}/pipelines.delete_step`,
|
||||
request,
|
||||
{
|
||||
withCredentials: this.configuration.withCredentials,
|
||||
headers: headers,
|
||||
observe: observe,
|
||||
reportProgress: reportProgress,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Create a new pipeline step
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
[pipelineData]="selectedPipeline">
|
||||
</sm-edit-pipeline-header>
|
||||
<div class="edit-pipeline-body">
|
||||
<sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep" [ioOptions]="selectedStepInputOutputOptions" (stepParamsChanged)="selectedStepParamsChanged($event)"/>
|
||||
<sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep"
|
||||
(deleteStep)="stepDelete($event)"
|
||||
[ioOptions]="selectedStepInputOutputOptions"
|
||||
(stepParamsChanged)="selectedStepParamsChanged($event)"/>
|
||||
<!-- <div class="details"><i class="icon no-output-icon i-no-code-dark"></i> DETAILS</div> -->
|
||||
<sm-flow-editor *ngIf="selectedPipeline?.flow_display?.nodes?.length" [pipelineData]="selectedPipeline"
|
||||
(nodesChangedInReactFlow)="nodesChangedInReactFlow($event)"
|
||||
|
||||
@ -1,28 +1,40 @@
|
||||
/* eslint-disable no-console */
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { PipelineAddStepDialogComponent } from '../pipeline-add-step-dialog/pipeline-add-step-dialog.component';
|
||||
import { PipelineSettingDialogComponent } from '../pipeline-setting/pipeline-setting.dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline, setSelectedPipeline, updatePipelineStep } 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, PipelinesCompileRequest, PipelinesStepInputOutputMappingOptions } from '~/business-logic/model/pipelines/models';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { ArtifactModeEnum } from '~/business-logic/model/tasks/models';
|
||||
|
||||
|
||||
|
||||
|
||||
import { Component, OnDestroy, OnInit, inject } from "@angular/core";
|
||||
import { PipelineAddStepDialogComponent } from "../pipeline-add-step-dialog/pipeline-add-step-dialog.component";
|
||||
import { PipelineSettingDialogComponent } from "../pipeline-setting/pipeline-setting.dialog.component";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { Store } from "@ngrx/store";
|
||||
import {
|
||||
createPipelineStep,
|
||||
pipelineSettings,
|
||||
getPipelineById,
|
||||
resetPipelines,
|
||||
resetPipelinesSearchQuery,
|
||||
updatePipeline,
|
||||
compilePipeline,
|
||||
runPipeline,
|
||||
setSelectedPipeline,
|
||||
updatePipelineStep,
|
||||
deletePipelineStep,
|
||||
} 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,
|
||||
PipelinesCompileRequest,
|
||||
PipelinesStepInputOutputMappingOptions,
|
||||
} from "~/business-logic/model/pipelines/models";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { ArtifactModeEnum } from "~/business-logic/model/tasks/models";
|
||||
|
||||
@Component({
|
||||
selector: 'sm-edit-pipeline-page',
|
||||
templateUrl: './edit-pipeline-page.component.html',
|
||||
styleUrls: ['./edit-pipeline-page.component.scss']
|
||||
selector: "sm-edit-pipeline-page",
|
||||
templateUrl: "./edit-pipeline-page.component.html",
|
||||
styleUrls: ["./edit-pipeline-page.component.scss"],
|
||||
})
|
||||
export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
protected dialog = inject(MatDialog);
|
||||
protected store = inject(Store);
|
||||
public subs = new Subscription();
|
||||
@ -35,32 +47,37 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
|
||||
//// nodes and edges state should be managed here for local use
|
||||
// changes will be propagated to store only after clicking on save.
|
||||
private reactFlowState = {nodes: [], edges: []};
|
||||
|
||||
private reactFlowState = { nodes: [], edges: [] };
|
||||
|
||||
constructor() {
|
||||
this.selectedPipelineId$ = this.store.select(selectRouterParams).pipe(map((params: Params) => {
|
||||
return params?.id
|
||||
}));
|
||||
this.selectedPipeline$ = this.store.select(selectSelectedPipeline)
|
||||
this.selectedPipelineId$ = this.store.select(selectRouterParams).pipe(
|
||||
map((params: Params) => {
|
||||
return params?.id;
|
||||
})
|
||||
);
|
||||
this.selectedPipeline$ = this.store.select(selectSelectedPipeline);
|
||||
}
|
||||
|
||||
private recomputeSelectedStepInputOutputOptions() {
|
||||
const incommingNodes = this.getIncomingNodesForNode(this._selectedStep, this.reactFlowState .nodes, this.reactFlowState .edges);
|
||||
const options:Array<PipelinesStepInputOutputMappingOptions> = [];
|
||||
const incommingNodes = this.getIncomingNodesForNode(
|
||||
this._selectedStep,
|
||||
this.reactFlowState.nodes,
|
||||
this.reactFlowState.edges
|
||||
);
|
||||
const options: Array<PipelinesStepInputOutputMappingOptions> = [];
|
||||
incommingNodes.forEach((node) => {
|
||||
if(node.data?.experimentDetails?.execution?.artifacts?.length) {
|
||||
if (node.data?.experimentDetails?.execution?.artifacts?.length) {
|
||||
// for now we are using only artifacts of i/o mapping.
|
||||
node.data.experimentDetails.execution.artifacts.forEach((artifact) => {
|
||||
if(artifact.mode === ArtifactModeEnum.Output) {
|
||||
if (artifact.mode === ArtifactModeEnum.Output) {
|
||||
options.push({
|
||||
...artifact,
|
||||
stepName: node.data.name,
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
this.selectedStepInputOutputOptions = options;
|
||||
console.log(options);
|
||||
}
|
||||
@ -68,29 +85,28 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
set selectedStep(data) {
|
||||
this._selectedStep = data;
|
||||
this.recomputeSelectedStepInputOutputOptions();
|
||||
|
||||
}
|
||||
get selectedStep() {
|
||||
return this._selectedStep;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subs.add(this.selectedPipelineId$.pipe(
|
||||
).subscribe((pipelineId) => {
|
||||
this.subs.add(
|
||||
this.selectedPipelineId$.pipe().subscribe((pipelineId) => {
|
||||
this.pipelineId = pipelineId;
|
||||
setTimeout(()=> {
|
||||
this.store.dispatch(getPipelineById({id: pipelineId, name: ''}))
|
||||
}, 1000)
|
||||
}
|
||||
));
|
||||
setTimeout(() => {
|
||||
this.store.dispatch(getPipelineById({ id: pipelineId, name: "" }));
|
||||
}, 1000);
|
||||
})
|
||||
);
|
||||
|
||||
this.subs.add(this.selectedPipeline$.pipe(
|
||||
).subscribe((pipelineData) => {
|
||||
this.selectedPipeline = pipelineData;
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(pipelineData);
|
||||
}
|
||||
));
|
||||
this.subs.add(
|
||||
this.selectedPipeline$.pipe().subscribe((pipelineData) => {
|
||||
this.selectedPipeline = pipelineData;
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(pipelineData);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
@ -99,49 +115,60 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
this.store.dispatch(resetPipelinesSearchQuery());
|
||||
}
|
||||
|
||||
savePipeline () {
|
||||
savePipeline() {
|
||||
const pipelineState = cloneDeep(this.selectedPipeline);
|
||||
pipelineState.flow_display.nodes = this.reactFlowState.nodes;
|
||||
pipelineState.flow_display.edges = this.reactFlowState.edges;
|
||||
this.store.dispatch(updatePipeline({changes: {...pipelineState}}));
|
||||
this.store.dispatch(updatePipeline({ changes: { ...pipelineState } }));
|
||||
}
|
||||
|
||||
compilePipeline () {
|
||||
compilePipeline() {
|
||||
const requestPayload: PipelinesCompileRequest = {
|
||||
pipeline_id: this.selectedPipeline.id,
|
||||
steps: this.selectedPipeline.flow_display.nodes.map((nodeItem) => {
|
||||
return {
|
||||
nodeName: nodeItem?.id
|
||||
}
|
||||
nodeName: nodeItem?.id,
|
||||
};
|
||||
}),
|
||||
connections: this.selectedPipeline.flow_display.edges.map((edgeItem) => {
|
||||
return {
|
||||
startNodeName: edgeItem.source,
|
||||
endNodeName: edgeItem.target,
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
this.store.dispatch(compilePipeline({data: requestPayload}))
|
||||
this.store.dispatch(compilePipeline({ data: requestPayload }));
|
||||
}
|
||||
|
||||
runPipeline () {
|
||||
this.store.dispatch(runPipeline({data: {
|
||||
pipeline_id: this.selectedPipeline.id
|
||||
}}))
|
||||
runPipeline() {
|
||||
this.store.dispatch(
|
||||
runPipeline({
|
||||
data: {
|
||||
pipeline_id: this.selectedPipeline.id,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
createPipelineStep() {
|
||||
|
||||
this.dialog.open(PipelineAddStepDialogComponent, {
|
||||
data: {defaultExperimentId: ''},
|
||||
panelClass: 'light-theme',
|
||||
width: '640px'
|
||||
})
|
||||
this.dialog
|
||||
.open(PipelineAddStepDialogComponent, {
|
||||
data: { defaultExperimentId: "" },
|
||||
panelClass: "light-theme",
|
||||
width: "640px",
|
||||
})
|
||||
.afterClosed()
|
||||
.subscribe(pipeline => {
|
||||
.subscribe((pipeline) => {
|
||||
if (pipeline) {
|
||||
this.store.dispatch(createPipelineStep({pipelinesCreateStepRequest: {...pipeline, pipeline_id: this.pipelineId}}));
|
||||
this.store.dispatch(
|
||||
createPipelineStep({
|
||||
pipelinesCreateStepRequest: {
|
||||
...pipeline,
|
||||
pipeline_id: this.pipelineId,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -151,19 +178,21 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
// },
|
||||
// width: '640px'
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
settings() {
|
||||
this.dialog.open(PipelineSettingDialogComponent, {
|
||||
data: {defaultExperimentId: ''},
|
||||
panelClass: 'light-theme',
|
||||
width: '640px'
|
||||
})
|
||||
this.dialog
|
||||
.open(PipelineSettingDialogComponent, {
|
||||
data: { defaultExperimentId: "" },
|
||||
panelClass: "light-theme",
|
||||
width: "640px",
|
||||
})
|
||||
.afterClosed()
|
||||
.subscribe(pipeline => {
|
||||
.subscribe((pipeline) => {
|
||||
if (pipeline) {
|
||||
this.store.dispatch(pipelineSettings({pipelinesSettingsRequest: pipeline}));
|
||||
this.store.dispatch(
|
||||
pipelineSettings({ pipelinesSettingsRequest: pipeline })
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -178,26 +207,46 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
public edgesChangedInReactFlow(data) {
|
||||
this.reactFlowState.edges = cloneDeep(data);
|
||||
this.recomputeSelectedStepInputOutputOptions();
|
||||
|
||||
}
|
||||
|
||||
public nodeSelected(data) {
|
||||
this.selectedStep = cloneDeep(data);
|
||||
}
|
||||
|
||||
public stepDelete(data) {
|
||||
this.store.dispatch(deletePipelineStep({ stepId: data.id }));
|
||||
const filteredNodes = this.reactFlowState.nodes.filter(
|
||||
(node) => node?.id !== data.id
|
||||
);
|
||||
const filteredEdges = this.reactFlowState.edges.filter(
|
||||
(edge) => edge?.source !== data.id && edge?.target !== data.id
|
||||
);
|
||||
|
||||
this.reactFlowState.nodes = cloneDeep(filteredNodes);
|
||||
this.reactFlowState.edges = cloneDeep(filteredEdges);
|
||||
console.log(this.reactFlowState);
|
||||
setTimeout(() => this.savePipeline(), 1000)
|
||||
this.selectedStep = null;
|
||||
}
|
||||
|
||||
public selectedStepParamsChanged(changedParams) {
|
||||
this.reactFlowState.nodes.map((node, index) => {
|
||||
if(node.id === this.selectedStep.id) {
|
||||
this.reactFlowState.nodes[index].data.parameters = cloneDeep(changedParams)
|
||||
if (node.id === this.selectedStep.id) {
|
||||
this.reactFlowState.nodes[index].data.parameters =
|
||||
cloneDeep(changedParams);
|
||||
}
|
||||
return node;
|
||||
});
|
||||
|
||||
//update node API call here. Update silently.
|
||||
this.store.dispatch(updatePipelineStep({changes: {
|
||||
step: this.selectedStep.id,
|
||||
parameters: cloneDeep(changedParams)
|
||||
}}))
|
||||
this.store.dispatch(
|
||||
updatePipelineStep({
|
||||
changes: {
|
||||
step: this.selectedStep.id,
|
||||
parameters: cloneDeep(changedParams),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
//console.log(pipelineState);
|
||||
// pipelineState.flow_display?.nodes.map((node) => {
|
||||
@ -211,21 +260,19 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
/**
|
||||
* @function getIncomingNodeIds
|
||||
* @description It is used to get the incoming node ids.
|
||||
* @param {object} node - Object of the node.
|
||||
* @param {array} edges - list of all edges.
|
||||
* @returns {array} list of incoming node ids.
|
||||
*/
|
||||
private getIncomingNodesForNode (node, nodes, edges) {
|
||||
const incomingNodes = [];
|
||||
edges.forEach((edge) => {
|
||||
if (node?.id === edge.target) {
|
||||
incomingNodes.push(nodes.find((node) => node.id == edge?.source));
|
||||
}
|
||||
});
|
||||
return incomingNodes;
|
||||
}
|
||||
|
||||
|
||||
* @function getIncomingNodeIds
|
||||
* @description It is used to get the incoming node ids.
|
||||
* @param {object} node - Object of the node.
|
||||
* @param {array} edges - list of all edges.
|
||||
* @returns {array} list of incoming node ids.
|
||||
*/
|
||||
private getIncomingNodesForNode(node, nodes, edges) {
|
||||
const incomingNodes = [];
|
||||
edges.forEach((edge) => {
|
||||
if (node?.id === edge.target) {
|
||||
incomingNodes.push(nodes.find((node) => node.id == edge?.source));
|
||||
}
|
||||
});
|
||||
return incomingNodes;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@ import { MatOptionSelectionChange } from '@angular/material/core';
|
||||
import { NgModel } from '@angular/forms';
|
||||
import { trackByValue } from '@common/shared/utils/forms-track-by';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { ConfirmDialogComponent } from '@common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector: 'sm-pipeline-step-info',
|
||||
@ -23,7 +25,7 @@ export class PipelineStepInfoComponent {
|
||||
private _step;
|
||||
private _ioOptions: Array<{ label: string; value: string, type: string }> ;
|
||||
|
||||
@Output() deleteStep = new EventEmitter<unknown>();
|
||||
@Output() deleteStep = new EventEmitter<any>();
|
||||
@Output() stepParamsChanged = new EventEmitter<unknown>();
|
||||
|
||||
@Input() set ioOptions(options: any) {
|
||||
@ -37,6 +39,8 @@ export class PipelineStepInfoComponent {
|
||||
|
||||
this._ioOptions = cloneDeep(opts);
|
||||
}
|
||||
|
||||
|
||||
get ioOptions() {
|
||||
return this._ioOptions;
|
||||
}
|
||||
@ -82,11 +86,29 @@ export class PipelineStepInfoComponent {
|
||||
|
||||
@Input() project: string;
|
||||
|
||||
constructor(private store: Store) {
|
||||
constructor(private store: Store, private matDialog: MatDialog) {
|
||||
}
|
||||
|
||||
public deleteClicked() {
|
||||
this.deleteStep.emit(this._step);
|
||||
this.matDialog
|
||||
.open(ConfirmDialogComponent, {
|
||||
data: {
|
||||
title: "DELETE",
|
||||
body: '<p class="text-center">Are you sure you want to delete the step?</p>',
|
||||
yes: "Delete",
|
||||
no: "Cancel",
|
||||
iconClass: "al-ico-trash",
|
||||
width: 430,
|
||||
},
|
||||
})
|
||||
.afterClosed().subscribe((data) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(data);
|
||||
if(data?.isConfirmed) {
|
||||
this.deleteStep.emit(this._step);
|
||||
}
|
||||
})
|
||||
|
||||
/* setTimeout(() => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(this._step);
|
||||
|
||||
@ -168,7 +168,7 @@ export class PipelineAddStepFormComponent implements OnChanges, OnDestroy {
|
||||
}
|
||||
|
||||
send() {
|
||||
if (this.stepParamsForm.formData.length > 0) {
|
||||
if (this.stepParamsForm?.formData?.length > 0) {
|
||||
this.step.parameters = cloneDeep(this.stepParamsForm.formData);
|
||||
}
|
||||
this.stepCreated.emit(this.step);
|
||||
|
||||
@ -22,6 +22,12 @@ export const updatePipelineStep = createAction(
|
||||
props<{changes: Partial<PipelinesUpdateStepsRequest>}>()
|
||||
);
|
||||
|
||||
export const deletePipelineStep = createAction(
|
||||
PIPELINES_PREFIX + 'DELETE_PIPELINE_STEP',
|
||||
props<{stepId: string}>()
|
||||
);
|
||||
|
||||
|
||||
export const pipelineSettings= createAction(
|
||||
PIPELINES_PREFIX + 'SETTINGS_PIPELINE_ACTION',
|
||||
props<{ pipelinesSettingsRequest: pipelinesSettingsModel }>()
|
||||
@ -39,11 +45,11 @@ export const setSelectedPipeline = createAction(
|
||||
|
||||
|
||||
export const updatePipeline = createAction(
|
||||
PIPELINES_PREFIX + '[update pipeline]',
|
||||
PIPELINES_PREFIX + '[UPDATE_PIPELINE]',
|
||||
props<{changes: Partial<PipelinesUpdateRequest>}>()
|
||||
);
|
||||
export const updatePipelineSuccess = createAction(
|
||||
PIPELINES_PREFIX + '[update pipeline success]',
|
||||
PIPELINES_PREFIX + '[UPDATE_PIPELINE_SUCCESS]',
|
||||
props<{changes: Partial<PipelinesUpdateResponse>}>()
|
||||
);
|
||||
|
||||
@ -218,10 +224,6 @@ export const showExampleDatasets = createAction(PIPELINES_PREFIX + '[show datase
|
||||
// props<{ query: string; regExp?: boolean }>()
|
||||
// );
|
||||
|
||||
// export const deleteResource = createAction(
|
||||
// PIPELINES_PREFIX + 'DELETE_RESOURCE',
|
||||
// props<{resource: string}>()
|
||||
// );
|
||||
|
||||
// export const setEditMode = createAction(
|
||||
// PIPELINES_PREFIX + 'Set Edit Mode',
|
||||
|
||||
@ -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 {pipelineSettings,
|
||||
createPipeline, createPipelineStep, getAllExperiments, getExperimentById, getPipelineById, setExperimentsResults, setSelectedPipeline, updatePipeline, updatePipelineSuccess, compilePipeline, runPipeline, updatePipelineStep
|
||||
createPipeline, createPipelineStep, getAllExperiments, getExperimentById, getPipelineById, setExperimentsResults, setSelectedPipeline, updatePipeline, updatePipelineSuccess, compilePipeline, runPipeline, updatePipelineStep, deletePipelineStep
|
||||
} from './pipelines.actions';
|
||||
// import {ApiReportsService} from '~/business-logic/api-services/reports.service';
|
||||
/* import {IReport, PAGE_SIZE} from './reports.consts';
|
||||
@ -53,6 +53,7 @@ import { PipelinesUpdateResponse } from '~/business-logic/model/pipelines/pipeli
|
||||
import { selectSelectedPipeline } from './pipelines.reducer';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { MESSAGES_SEVERITY } from '@common/constants';
|
||||
import { ConfirmDialogComponent } from '@common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
|
||||
/* import {selectRouterParams} from '@common/core/reducers/router-reducer';
|
||||
import {setMainPageTagsFilter} from '@common/core/actions/projects.actions';
|
||||
import {cleanTag} from '@common/shared/utils/helpers.util';
|
||||
@ -218,6 +219,25 @@ export class PipelinesEffects {
|
||||
})))
|
||||
));
|
||||
|
||||
|
||||
deletePipelineStep$ = createEffect(() => this.actions.pipe(
|
||||
ofType(deletePipelineStep),
|
||||
switchMap((action) => this.pipelinesApiService.pipelinesDeleteStep({step: action.stepId}).pipe(
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
mergeMap((res) => {
|
||||
return [ deactivateLoader(action.type),
|
||||
addMessage(MESSAGES_SEVERITY.SUCCESS, 'Pipeline step deleted successfully')]
|
||||
}
|
||||
|
||||
),
|
||||
catchError(error => [
|
||||
requestFailed(error),
|
||||
deactivateLoader(action.type),
|
||||
setServerError(error, null, 'Failed to delete pipeline step.')
|
||||
])
|
||||
))
|
||||
));
|
||||
|
||||
pipelineSettings$ = createEffect(() => this.actions.pipe(
|
||||
ofType(pipelineSettings),
|
||||
switchMap((action) => this.pipelinesApiService.pipelinesSettingCall(action.pipelinesSettingsRequest)
|
||||
@ -289,11 +309,15 @@ export class PipelinesEffects {
|
||||
ofType(updatePipeline),
|
||||
mergeMap(action => this.pipelinesApiService.pipelinesUpdate({...action.changes})
|
||||
.pipe(
|
||||
mergeMap((res: PipelinesUpdateResponse) => [
|
||||
deactivateLoader(action.type),
|
||||
updatePipelineSuccess({changes: res}),
|
||||
addMessage(MESSAGES_SEVERITY.SUCCESS, 'Pipeline saved successfully')
|
||||
]),
|
||||
mergeMap((res: any) => {
|
||||
/* // eslint-disable-next-line no-console
|
||||
console.log("response from update pipeline",res); */
|
||||
return [
|
||||
deactivateLoader(action.type),
|
||||
updatePipelineSuccess({changes: res?.pipelines}),
|
||||
addMessage(MESSAGES_SEVERITY.SUCCESS, 'Pipeline saved 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' +
|
||||
@ -870,38 +894,7 @@ export class PipelinesEffects {
|
||||
// )
|
||||
// ));
|
||||
|
||||
// deleteReport = createEffect(() => this.actions.pipe(
|
||||
// ofType(deleteReport),
|
||||
// switchMap(action => this.matDialog.open(
|
||||
// ConfirmDialogComponent,
|
||||
// {
|
||||
// data: {
|
||||
// title: 'DELETE',
|
||||
// body: '<p class="text-center">Permanently Delete Report</p>',
|
||||
// yes: 'Delete',
|
||||
// no: 'Cancel',
|
||||
// iconClass: 'al-ico-trash',
|
||||
// width: 430
|
||||
// }
|
||||
// }).afterClosed().pipe(
|
||||
// filter(confirm => !!confirm),
|
||||
// switchMap(() => this.pipelinesApiService.reportsDelete({task: action.report.id})),
|
||||
// mergeMap(() => {
|
||||
// this.router.navigate(['reports'], {queryParamsHandling: 'merge'});
|
||||
// return [
|
||||
// removeReport({id: action.report.id}),
|
||||
// getReports(),
|
||||
// deactivateLoader(action.type),
|
||||
// addMessage(MESSAGES_SEVERITY.SUCCESS, 'Report deleted successfully')
|
||||
// ];
|
||||
// }),
|
||||
// catchError(error => [
|
||||
// requestFailed(error),
|
||||
// deactivateLoader(action.type),
|
||||
// setServerError(error, null, 'Failed To delete reports')
|
||||
// ])
|
||||
// )),
|
||||
// ));
|
||||
|
||||
|
||||
// deleteResource = createEffect(() => this.actions.pipe(
|
||||
// ofType(deleteResource),
|
||||
|
||||
@ -84,65 +84,96 @@ const getCorrectSortingOrder = (currentSortOrder: TableSortOrderEnum, currentOrd
|
||||
export const pipelinesReducers = [
|
||||
on(addToPipelinesList, (state, action) => ({
|
||||
...state,
|
||||
pipelines: action.reset ? action.pipelines : [...(state.pipelines || []), ...action.pipelines]
|
||||
pipelines: action.reset
|
||||
? action.pipelines
|
||||
: [...(state.pipelines || []), ...action.pipelines],
|
||||
})),
|
||||
on(setCurrentScrollId, (state, action) => ({
|
||||
...state,
|
||||
scrollId: action.scrollId,
|
||||
})),
|
||||
on(setNoMorePipelines, (state, action) => ({
|
||||
...state,
|
||||
noMorePipelines: action.payload,
|
||||
})),
|
||||
on(setCurrentScrollId, (state, action) => ({...state, scrollId: action.scrollId})),
|
||||
on(setNoMorePipelines, (state, action) => ({...state, noMorePipelines: action.payload})),
|
||||
on(updatePipelineSuccess, (state, action) => ({
|
||||
...state, pipelines: state.pipelines?.map(pr => pr.id === action.changes.id ? {
|
||||
...pr,
|
||||
...action.changes,
|
||||
...(!!action.changes?.name && {basename: action.changes?.name.split('/').at(-1)})
|
||||
} : pr)
|
||||
...state,
|
||||
pipelines: state.pipelines?.map((pr) =>
|
||||
pr.id === action.changes.id
|
||||
? {
|
||||
...pr,
|
||||
...action.changes,
|
||||
...(!!action.changes?.name && {
|
||||
basename: action.changes?.name.split("/").at(-1),
|
||||
}),
|
||||
}
|
||||
: pr
|
||||
),
|
||||
selectedPipeline:
|
||||
state.selectedPipeline.id === action.changes.id
|
||||
? { ...state.selectedPipeline, ...action.changes }
|
||||
: state.selectedPipeline,
|
||||
})),
|
||||
on(setSelectedPipeline, (state, action) => ({...state, selectedPipeline: {...action.data}})),
|
||||
on(resetPipelines, state => ({
|
||||
on(setSelectedPipeline, (state, action) => ({
|
||||
...state,
|
||||
selectedPipeline: { ...action.data },
|
||||
})),
|
||||
on(resetPipelines, (state) => ({
|
||||
...state,
|
||||
scrollId: null,
|
||||
noMorePipelines: pipelinesInitState.noMorePipelines,
|
||||
pipelines: pipelinesInitState.pipelines
|
||||
pipelines: pipelinesInitState.pipelines,
|
||||
})),
|
||||
on(setPipelinesOrderBy, (state, action) => ({
|
||||
...state,
|
||||
orderBy: action.orderBy,
|
||||
sortOrder: getCorrectSortingOrder(state.sortOrder, state.orderBy, action.orderBy),
|
||||
sortOrder: getCorrectSortingOrder(
|
||||
state.sortOrder,
|
||||
state.orderBy,
|
||||
action.orderBy
|
||||
),
|
||||
scrollId: null,
|
||||
noMorePipelines: pipelinesInitState.noMorePipelines,
|
||||
pipelines: pipelinesInitState.pipelines
|
||||
pipelines: pipelinesInitState.pipelines,
|
||||
})),
|
||||
on(setPipelinesSearchQuery, (state, action) => ({
|
||||
...state,
|
||||
searchQuery: (action as ReturnType<typeof setPipelinesSearchQuery>),
|
||||
searchQuery: action as ReturnType<typeof setPipelinesSearchQuery>,
|
||||
scrollId: null,
|
||||
noMorePipelines: pipelinesInitState.noMorePipelines,
|
||||
pipelines: pipelinesInitState.pipelines
|
||||
pipelines: pipelinesInitState.pipelines,
|
||||
})),
|
||||
on(resetPipelinesSearchQuery, state => ({
|
||||
on(resetPipelinesSearchQuery, (state) => ({
|
||||
...state,
|
||||
// searchQuery: pipelinesInitState.searchQuery,
|
||||
scrollId: null,
|
||||
noMorePipelines: pipelinesInitState.noMorePipelines,
|
||||
pipelines: pipelinesInitState.pipelines
|
||||
pipelines: pipelinesInitState.pipelines,
|
||||
})),
|
||||
on(checkPipelineForDeletion, (state, action) => ({
|
||||
...state,
|
||||
validatedProject: action.pipeline,
|
||||
projectReadyForDeletion: pipelinesInitState.projectReadyForDeletion
|
||||
projectReadyForDeletion: pipelinesInitState.projectReadyForDeletion,
|
||||
})),
|
||||
on(resetReadyToDelete, state => ({
|
||||
on(resetReadyToDelete, (state) => ({
|
||||
...state,
|
||||
projectReadyForDeletion: pipelinesInitState.projectReadyForDeletion,
|
||||
validatedProject: pipelinesInitState.validatedProject
|
||||
validatedProject: pipelinesInitState.validatedProject,
|
||||
})),
|
||||
on(setTableModeAwareness, (state, action) =>
|
||||
({...state, tableModeAwareness: (action as ReturnType<typeof setTableModeAwareness>).awareness})),
|
||||
on(showExamplePipelines, state => ({...state, showPipelineExamples: true})),
|
||||
on(showExampleDatasets, state => ({...state, showDatasetExamples: true})),
|
||||
on(setTableModeAwareness, (state, action) => ({
|
||||
...state,
|
||||
tableModeAwareness: (action as ReturnType<typeof setTableModeAwareness>)
|
||||
.awareness,
|
||||
})),
|
||||
on(showExamplePipelines, (state) => ({
|
||||
...state,
|
||||
showPipelineExamples: true,
|
||||
})),
|
||||
on(showExampleDatasets, (state) => ({ ...state, showDatasetExamples: true })),
|
||||
on(setExperimentsResults, (state, action) => ({
|
||||
...state,
|
||||
experiments: [...action.experiments],
|
||||
})),
|
||||
|
||||
] as ReducerTypes<PipelineState, ActionCreator[]>[];
|
||||
export const pipelinesReducer = createReducer(pipelinesInitState, ...pipelinesReducers);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user