diff --git a/src/app/webapp-common/pipelines/details-dialog/pipeline-details-drawer.component.html b/src/app/webapp-common/pipelines/details-dialog/pipeline-details-drawer.component.html index 87d12148..bf44e8c3 100644 --- a/src/app/webapp-common/pipelines/details-dialog/pipeline-details-drawer.component.html +++ b/src/app/webapp-common/pipelines/details-dialog/pipeline-details-drawer.component.html @@ -23,7 +23,7 @@
-
+

Name:  {{ parameter.name }}

Value:  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 7dc6dc5f..f0245fcd 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 @@ -7,7 +7,6 @@ (deleteStep)="stepDelete($event)" [ioOptions]="selectedStepInputOutputOptions" (stepParamsChanged)="selectedStepParamsChanged($event)"/> -
- -
{{step.data?.name}}
+ +
+ {{ step.data?.name }} +
-
- {{step.data.experimentDetails?.status}}
- +
+ {{ step.data.experimentDetails?.status }} +
+
@@ -21,64 +39,154 @@
PARAMETERS
- +
-
{{section.name}}
+
+ {{ section.name }} +
- - - + + -
{{option.label}}
+ (onSelectionChange)="paramSelected($event)" + > +
+ {{ option.label }} +
- - +
- - -
+
+ show more +
METRICS
- - -
-
- {{$any(variant.value).metric}}/{{$any(variant.value).variant}}
-
- {{$any(variant.value).value}}
+ + +
+
+ {{ $any(variant.value).metric }}/{{ + $any(variant.value).variant + }} +
+
+ {{ $any(variant.value).value }} +
ARTIFACTS
- -
-
{{artifact.key}}
-
{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}
+ +
+
+ {{ artifact.key }} +
+
+ {{ + (artifact?.content_size | filesize : fileSizeConfigStorage) || + "" + }} +
MODELS
- -
+ +
- {{model.name || model.model.name}} + {{ model.name || model.model.name }}
+ target="_blank">{{model.name || model.model.name}} --> +
@@ -87,10 +195,13 @@
No data to show
 -
- @@ -101,4 +212,4 @@ Full details -->
- \ No newline at end of file + diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss index 0ec89f97..53e4e5a1 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss @@ -1,5 +1,4 @@ @import "variables"; - ::ng-deep { .option { // background-color: red; @@ -175,4 +174,17 @@ } } } -} \ No newline at end of file + .show-more-text { + color: $blue-300; + text-decoration: underline; + cursor: pointer; + margin-top: 12px; + margin-bottom: 12px; + margin-left: auto; + float: inline-end; + } + + .show-more-text:hover { + color: $blue-100; + } +} diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts index e947bec7..458fe001 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts @@ -1,21 +1,28 @@ -import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; -import {Store} from '@ngrx/store'; -import {Artifact} from '~/business-logic/model/tasks/artifact'; +import { + Component, + EventEmitter, + Input, + Output, + ViewChild, +} from "@angular/core"; +import { Store } from "@ngrx/store"; +import { Artifact } from "~/business-logic/model/tasks/artifact"; -import {addMessage} from '@common/core/actions/layout.actions'; -import {fileSizeConfigStorage} from '@common/shared/pipes/filesize.pipe'; -import {ICONS, IOption, MESSAGES_SEVERITY} from '@common/constants'; -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'; +import { addMessage } from "@common/core/actions/layout.actions"; +import { fileSizeConfigStorage } from "@common/shared/pipes/filesize.pipe"; +import { ICONS, IOption, MESSAGES_SEVERITY } from "@common/constants"; +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"; +import { PipelineParametersDialogComponent } from "@common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component"; @Component({ - selector: 'sm-pipeline-step-info', - templateUrl: './pipeline-step-info.component.html', - styleUrls: ['./pipeline-step-info.component.scss'] + selector: "sm-pipeline-step-info", + templateUrl: "./pipeline-step-info.component.html", + styleUrls: ["./pipeline-step-info.component.scss"], }) export class PipelineStepInfoComponent { readonly icons = ICONS; @@ -23,33 +30,31 @@ export class PipelineStepInfoComponent { public controller: boolean; public fileSizeConfigStorage = fileSizeConfigStorage; private _step; - private _ioOptions: Array<{ label: string; value: string, type: string }> ; + private _ioOptions: Array<{ label: string; value: string; type: string }>; @Output() deleteStep = new EventEmitter(); @Output() stepParamsChanged = new EventEmitter(); @Input() set ioOptions(options: any) { const opts = options.map((op) => { - if(op.type === "pipeline_parameter") { + if (op.type === "pipeline_parameter") { return { - value: "${pipeline." + op.key +"}", + value: "${pipeline." + op.key + "}", label: `${op.stepName}.${op.key}`, - type: op.type - } + type: op.type, + }; } else { return { - value: "${"+op.stepName+".id}."+op.key, + value: "${" + op.stepName + ".id}." + op.key, label: `${op.stepName}.${op.key}`, - type: op.type - } + type: op.type, + }; } - }); this._ioOptions = cloneDeep(opts); } - get ioOptions() { return this._ioOptions; } @@ -62,22 +67,20 @@ export class PipelineStepInfoComponent { } // for auto complete - @ViewChild('optsInput') optsInput: NgModel; + @ViewChild("optsInput") optsInput: NgModel; public trackByValue = trackByValue; isAutoCompleteOpen: boolean; -/* public incommingInputOptions: { label: string; value: string }[] = [ + /* public incommingInputOptions: { label: string; value: string }[] = [ {label: "test", value: "test1"} ]; */ setIsAutoCompleteOpen(focus: boolean) { this.isAutoCompleteOpen = focus; } displayFn(opt: IOption | string) { - return typeof opt === 'string' ? opt : opt?.label; + return typeof opt === "string" ? opt : opt?.label; } // eslint-disable-next-line @typescript-eslint/no-unused-vars - paramSelected($event: MatOptionSelectionChange) { - - } + paramSelected($event: MatOptionSelectionChange) {} /* @Input() set entity(task: IExperimentInfo) { this._entity = task; this.controller = task?.type === TaskTypeEnum.Controller; @@ -87,46 +90,62 @@ export class PipelineStepInfoComponent { } */ paramsChanged() { - setTimeout(()=> { + setTimeout(() => { this.stepParamsChanged.emit(this._step.data.parameters); - }, 2000) + }, 2000); } - @Input() project: string; - constructor(private store: Store, private matDialog: MatDialog) { - } + constructor(private store: Store, private matDialog: MatDialog) {} public deleteClicked() { this.matDialog - .open(ConfirmDialogComponent, { - data: { - title: "DELETE", - body: '

Are you sure you want to delete the step?

', - 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) { + .open(ConfirmDialogComponent, { + data: { + title: "DELETE", + body: '

Are you sure you want to delete the step?

', + 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); }, 3000) */ } - - trackByFn = (index: number, artifact: Artifact) => artifact.hash || artifact.uri; + public showMoreClicked(parameters: any[]) { + this.matDialog.open(PipelineParametersDialogComponent, { + data: { + parameters: parameters, + paramsChanged: this.paramsChanged.bind(this), + setIsAutoCompleteOpen: this.setIsAutoCompleteOpen.bind(this), + displayFn: this.displayFn.bind(this), + paramSelected: this.paramSelected.bind(this), + ioOptions: this.ioOptions, + trackByValue: this.trackByValue, + }, + panelClass: "light-theme", + width: "600px", + }); + } + trackByFn = (index: number, artifact: Artifact) => + artifact.hash || artifact.uri; copyToClipboard() { - this.store.dispatch(addMessage(MESSAGES_SEVERITY.SUCCESS, 'ID copied successfully')); + this.store.dispatch( + addMessage(MESSAGES_SEVERITY.SUCCESS, "ID copied successfully") + ); } } diff --git a/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.html b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.html new file mode 100644 index 00000000..1d2696f9 --- /dev/null +++ b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.html @@ -0,0 +1,54 @@ + + + +
+ +
+
+ {{ section.name }} +
+
+ + + +
+ {{ option.label }} +
+ + + +
+ + +
+ +
+ diff --git a/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.scss b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.scss new file mode 100644 index 00000000..e130f0ea --- /dev/null +++ b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.scss @@ -0,0 +1,33 @@ +@import "variables"; +.dialog-content { + max-height: 400px; + overflow-y: auto; +} +.param { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; + + .key { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 10px; + font-weight: bold; /* Making label bold */ + font-size: 16px; /* Increasing font size */ + } + + .value { + flex: 2; + display: flex; + flex-direction: column; + } + + input { + width: 100%; + border: 1px solid $grey-purple; /* Adding border around input field */ + padding: 8px; /* Adding padding to input field */ + } +} diff --git a/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.spec.ts b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.spec.ts new file mode 100644 index 00000000..ff4d25d8 --- /dev/null +++ b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PipelineParametersDialogComponent } from './pipeline-parameters-dialog.component'; + +describe('PipelineParametersDialogComponent', () => { + let component: PipelineParametersDialogComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [PipelineParametersDialogComponent] + }); + fixture = TestBed.createComponent(PipelineParametersDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.ts b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.ts new file mode 100644 index 00000000..d8a41acf --- /dev/null +++ b/src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.ts @@ -0,0 +1,30 @@ +import { Component, Inject } from "@angular/core"; +import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; + +@Component({ + selector: "sm-pipeline-parameters-dialog", + templateUrl: "./pipeline-parameters-dialog.component.html", + styleUrls: ["./pipeline-parameters-dialog.component.scss"], +}) +export class PipelineParametersDialogComponent { + parameters: any[]; + paramsChanged: () => void; + setIsAutoCompleteOpen: (focus: boolean) => void; + displayFn: (opt: any) => string; + paramSelected: (event: any) => void; + ioOptions: any[]; + trackByValue: any; + + constructor( + private matDialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + this.parameters = data.parameters; + this.paramsChanged = data.paramsChanged; + this.setIsAutoCompleteOpen = data.setIsAutoCompleteOpen; + this.displayFn = data.displayFn; + this.paramSelected = data.paramSelected; + this.ioOptions = data.ioOptions; + this.trackByValue = data.trackByValue; + } +} diff --git a/src/app/webapp-common/pipelines/pipelines.module.ts b/src/app/webapp-common/pipelines/pipelines.module.ts index 3565f547..0d0d7c6e 100644 --- a/src/app/webapp-common/pipelines/pipelines.module.ts +++ b/src/app/webapp-common/pipelines/pipelines.module.ts @@ -55,13 +55,17 @@ import { RefreshButtonComponent } from "@common/shared/components/refresh-button import { ExperimentSharedModule } from "~/features/experiments/shared/experiment-shared.module"; import { EffectsModule } from "@ngrx/effects"; import { PipelinesEffects } from "./pipelines.effects"; -import { PipelineState, pipelinesReducer, PIPELINES_KEY } from "./pipelines.reducer"; +import { + PipelineState, + pipelinesReducer, + PIPELINES_KEY, +} from "./pipelines.reducer"; import { UserPreferences } from "@common/user-preferences"; import { createUserPrefFeatureReducer } from "@common/core/meta-reducers/user-pref-reducer"; import { PIPELINES_PREFIX } from "./pipelines.actions"; import { PipelineAddStepDialogComponent } from "./pipeline-add-step-dialog/pipeline-add-step-dialog.component"; import { PipelineAddStepFormComponent } from "./pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component"; -import {SortPipe} from '@common/shared/pipes/sort.pipe'; +import { SortPipe } from "@common/shared/pipes/sort.pipe"; import { PipelineParametersComponent } from "./pipeline-parameters/pipeline-parameters.component"; import { FlowEditorComponent } from "./edit-pipeline-page/flow-editor.component"; import { PipelineStepInfoComponent } from "./edit-pipeline-page/pipeline-step-info/pipeline-step-info.component"; @@ -71,10 +75,11 @@ import { FilterPipe } from "@common/shared/pipes/filter.pipe"; import { FileSizePipe } from "@common/shared/pipes/filesize.pipe"; import { RegexPipe } from "@common/shared/pipes/filter-regex.pipe"; import { FilterMonitorMetricPipe } from "@common/shared/pipes/filter-monitor-metric.pipe"; +import { PipelineParametersDialogComponent } from "./pipeline-parameters-dialog/pipeline-parameters-dialog.component"; import { PipelineDetailsDrawerComponent } from './details-dialog/pipeline-details-drawer.component'; export const pipelinesSyncedKeys = ["projects.showPipelineExamples"]; -const pipelinesSyncedKeys2 = ['orderBy', 'sortOrder']; +const pipelinesSyncedKeys2 = ["orderBy", "sortOrder"]; // export const REPORTS_STORE_CONFIG_TOKEN = // new InjectionToken>('DatasetsConfigToken'); @@ -82,9 +87,9 @@ export const PIPELINES_CONFIG_TOKEN = new InjectionToken< StoreConfig >("PipelineConfigToken"); - -export const PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE = - new InjectionToken>('PipelineConfigToken'); +export const PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE = new InjectionToken< + StoreConfig +>("PipelineConfigToken"); const localStorageKey = "_saved_pipeline_state_"; @@ -105,12 +110,17 @@ const getPipelineConfig = () => ({ ], }); - const getInitState = (userPreferences: UserPreferences) => ({ metaReducers: [ (reducer: ActionReducer) => - createUserPrefFeatureReducer(PIPELINES_KEY, pipelinesSyncedKeys2, [PIPELINES_PREFIX], userPreferences, reducer), - ] + createUserPrefFeatureReducer( + PIPELINES_KEY, + pipelinesSyncedKeys2, + [PIPELINES_PREFIX], + userPreferences, + reducer + ), + ], }); @NgModule({ @@ -127,6 +137,7 @@ const getInitState = (userPreferences: UserPreferences) => ({ PipelineSettingDialogComponent, PipelineSettingFormComponent, PipelineStepInfoComponent, + PipelineParametersDialogComponent, PipelineDetailsDrawerComponent, ], imports: [ @@ -138,7 +149,11 @@ const getInitState = (userPreferences: UserPreferences) => ({ PipelinesRouterModule, StoreModule.forFeature("projects", projectsReducer, PIPELINES_CONFIG_TOKEN), EffectsModule.forFeature([PipelinesEffects]), - StoreModule.forFeature(PIPELINES_KEY, pipelinesReducer, PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE), + StoreModule.forFeature( + PIPELINES_KEY, + pipelinesReducer, + PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE + ), PipelineCardComponent, ButtonToggleComponent, SharedModule, @@ -186,7 +201,11 @@ const getInitState = (userPreferences: UserPreferences) => ({ exports: [PipelinesPageComponent, EditPipelinePageComponent], providers: [ { provide: PIPELINES_CONFIG_TOKEN, useFactory: getPipelineConfig }, - {provide: PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE, useFactory: getInitState, deps: [UserPreferences]}, + { + provide: PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE, + useFactory: getInitState, + deps: [UserPreferences], + }, { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: "always" },