mirror of
https://github.com/clearml/clearml-web
synced 2025-03-13 07:08:17 +00:00
parameters show more dialog added
This commit is contained in:
durgesh birmiwal
parent
ccc64b3648
commit
8732d1a840
@ -4,13 +4,31 @@
|
||||
</mat-expansion-panel-header>
|
||||
<div class="panel-body" *ngIf="step">
|
||||
<header *ngIf="step; else controllerHeader">
|
||||
<i class="al-icon lg"
|
||||
[class]="'al-ico-type-' + (step.data.experimentDetails?.type ? (step.data.experimentDetails.type.toString()).replace('_', '-') : 'training')"></i>
|
||||
<div class="name" [smTooltip]="step.data.name" smShowTooltipIfEllipsis>{{step.data?.name}}</div>
|
||||
<i
|
||||
class="al-icon lg"
|
||||
[class]="
|
||||
'al-ico-type-' +
|
||||
(step.data.experimentDetails?.type
|
||||
? step.data.experimentDetails.type.toString().replace('_', '-')
|
||||
: 'training')
|
||||
"
|
||||
></i>
|
||||
<div class="name" [smTooltip]="step.data.name" smShowTooltipIfEllipsis>
|
||||
{{ step.data?.name }}
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">
|
||||
{{step.data.experimentDetails?.status}}</div>
|
||||
<sm-id-badge class="ms-1" [id]="step.id" (copied)="copyToClipboard()"></sm-id-badge>
|
||||
<div
|
||||
class="status"
|
||||
[class]="step.data.experimentDetails?.status"
|
||||
data-id="infoStepStatus"
|
||||
>
|
||||
{{ step.data.experimentDetails?.status }}
|
||||
</div>
|
||||
<sm-id-badge
|
||||
class="ms-1"
|
||||
[id]="step.id"
|
||||
(copied)="copyToClipboard()"
|
||||
></sm-id-badge>
|
||||
</div>
|
||||
</header>
|
||||
<ng-template #controllerHeader>
|
||||
@ -21,64 +39,154 @@
|
||||
<ng-container>
|
||||
<div class="section">
|
||||
<div class="header">PARAMETERS</div>
|
||||
<ng-container *ngFor="let section of step?.data?.parameters; let index= index">
|
||||
<ng-container
|
||||
*ngFor="
|
||||
let section of step?.data?.parameters.slice(0, 7);
|
||||
let index = index
|
||||
"
|
||||
>
|
||||
<div class="param">
|
||||
<div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>{{section.name}}</div>
|
||||
<div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<div class="value">
|
||||
<input [matAutocomplete]="auto" [(ngModel)]="section['value']" placeholder="Parameter" (ngModelChange)="paramsChanged()" name="parameterKey-{{section.name}}-{{index}}"
|
||||
matInput required #optsInput="ngModel" />
|
||||
<mat-autocomplete #auto="matAutocomplete" class="light-theme" [displayWith]="displayFn"
|
||||
(opened)="setIsAutoCompleteOpen(true)" (closed)="setIsAutoCompleteOpen(false)" autoActiveFirstOption>
|
||||
<mat-option *ngFor="let option of ioOptions; trackBy: trackByValue"
|
||||
<input
|
||||
[matAutocomplete]="auto"
|
||||
[(ngModel)]="section['value']"
|
||||
placeholder="Parameter"
|
||||
(ngModelChange)="paramsChanged()"
|
||||
name="parameterKey-{{ section.name }}-{{ index }}"
|
||||
matInput
|
||||
required
|
||||
#optsInput="ngModel"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
class="light-theme"
|
||||
[displayWith]="displayFn"
|
||||
(opened)="setIsAutoCompleteOpen(true)"
|
||||
(closed)="setIsAutoCompleteOpen(false)"
|
||||
autoActiveFirstOption
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let option of ioOptions; trackBy: trackByValue"
|
||||
[value]="option.value"
|
||||
[smTooltip]="option.label + ' (' + option.type + ')'"
|
||||
[smTooltip]="option.label + ' (' + option.type + ')'"
|
||||
class="option"
|
||||
(onSelectionChange)="paramSelected($event)">
|
||||
<div [smSearchText]="optsInput.value" style="text-overflow: ellipsis; overflow: hidden;">{{option.label}}</div>
|
||||
(onSelectionChange)="paramSelected($event)"
|
||||
>
|
||||
<div
|
||||
[smSearchText]="optsInput.value"
|
||||
style="text-overflow: ellipsis; overflow: hidden"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</mat-option>
|
||||
<mat-option disabled style="height: 0; min-height: 0;"></mat-option>
|
||||
|
||||
<mat-option
|
||||
disabled
|
||||
style="height: 0; min-height: 0"
|
||||
></mat-option>
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div> -->
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
*ngIf="step?.data?.parameters?.length > 7"
|
||||
class="show-more-text"
|
||||
(click)="showMoreClicked(step?.data?.parameters)"
|
||||
>
|
||||
show more
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="header">METRICS</div>
|
||||
<ng-container *ngIf="(step?.data?.experimentDetails?.last_metrics | keyvalue)?.length > 0; else emptyMsg">
|
||||
<ng-container *ngFor="let metric of step?.data?.experimentDetails.last_metrics | keyvalue">
|
||||
<div *ngFor="let variant of $any($any(metric.value) | keyvalue) | filterMonitorMetric" class="param">
|
||||
<div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>
|
||||
{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
|
||||
<div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>
|
||||
{{$any(variant.value).value}}</div>
|
||||
<ng-container
|
||||
*ngIf="
|
||||
(step?.data?.experimentDetails?.last_metrics | keyvalue)?.length >
|
||||
0;
|
||||
else emptyMsg
|
||||
"
|
||||
>
|
||||
<ng-container
|
||||
*ngFor="
|
||||
let metric of step?.data?.experimentDetails.last_metrics
|
||||
| keyvalue
|
||||
"
|
||||
>
|
||||
<div
|
||||
*ngFor="
|
||||
let variant of $any($any(metric.value) | keyvalue)
|
||||
| filterMonitorMetric
|
||||
"
|
||||
class="param"
|
||||
>
|
||||
<div
|
||||
class="key"
|
||||
[smTooltip]="$any(variant.value).metric"
|
||||
smShowTooltipIfEllipsis
|
||||
>
|
||||
{{ $any(variant.value).metric }}/{{
|
||||
$any(variant.value).variant
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="value"
|
||||
[smTooltip]="$any(variant.value).value"
|
||||
smShowTooltipIfEllipsis
|
||||
>
|
||||
{{ $any(variant.value).value }}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="header">ARTIFACTS</div>
|
||||
<ng-container *ngIf="step?.data?.experimentDetails?.execution?.artifacts?.length > 0; else emptyMsg">
|
||||
<div *ngFor="let artifact of step?.data?.experimentDetails?.execution.artifacts; trackBy: trackByFn"
|
||||
class="param">
|
||||
<div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>{{artifact.key}}</div>
|
||||
<div class="value">{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}</div>
|
||||
<ng-container
|
||||
*ngIf="
|
||||
step?.data?.experimentDetails?.execution?.artifacts?.length > 0;
|
||||
else emptyMsg
|
||||
"
|
||||
>
|
||||
<div
|
||||
*ngFor="
|
||||
let artifact of step?.data?.experimentDetails?.execution
|
||||
.artifacts;
|
||||
trackBy: trackByFn
|
||||
"
|
||||
class="param"
|
||||
>
|
||||
<div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>
|
||||
{{ artifact.key }}
|
||||
</div>
|
||||
<div class="value">
|
||||
{{
|
||||
(artifact?.content_size | filesize : fileSizeConfigStorage) ||
|
||||
""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="header">MODELS</div>
|
||||
<ng-container *ngIf="step?.data?.experimentDetails?.models?.output?.length > 0; else emptyMsg">
|
||||
<div *ngFor="let model of step?.data?.experimentDetails?.models?.output" class="param">
|
||||
<ng-container
|
||||
*ngIf="
|
||||
step?.data?.experimentDetails?.models?.output?.length > 0;
|
||||
else emptyMsg
|
||||
"
|
||||
>
|
||||
<div
|
||||
*ngFor="let model of step?.data?.experimentDetails?.models?.output"
|
||||
class="param"
|
||||
>
|
||||
<div class="key">
|
||||
{{model.name || model.model.name}}
|
||||
{{ model.name || model.model.name }}
|
||||
<!-- <a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]"
|
||||
target="_blank">{{model.name || model.model.name}}</a> --></div>
|
||||
target="_blank">{{model.name || model.model.name}}</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@ -87,10 +195,13 @@
|
||||
<ng-template #emptyMsg>
|
||||
<div class="empty-msg" data-id="emptyMsg">No data to show</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<footer *ngIf="step?.id">
|
||||
<button class="btn btn-icon g-btn d-flex align-items-center" smTooltip="Delete step" (click)="deleteClicked()">
|
||||
<button
|
||||
class="btn btn-icon g-btn d-flex align-items-center"
|
||||
smTooltip="Delete step"
|
||||
(click)="deleteClicked()"
|
||||
>
|
||||
<i [class]="'al-icon me-2 ' + icons.REMOVE + ' sm-md'"></i>
|
||||
DELETE STEP
|
||||
</button>
|
||||
@ -101,4 +212,4 @@
|
||||
Full details<i class="al-icon al-ico-link-arrow sm" data-id="fullDetailsArrow"></i>
|
||||
</a> -->
|
||||
</footer>
|
||||
</mat-expansion-panel>
|
||||
</mat-expansion-panel>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import "variables";
|
||||
|
||||
::ng-deep {
|
||||
.option {
|
||||
// background-color: red;
|
||||
@ -175,4 +174,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<any>();
|
||||
@Output() stepParamsChanged = new EventEmitter<unknown>();
|
||||
|
||||
@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: '<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) {
|
||||
.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);
|
||||
}, 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")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<!-- eslint-disable @angular-eslint/template/use-track-by-function -->
|
||||
<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
|
||||
<sm-dialog-template header="PARAMETERS">
|
||||
<div class="dialog-content">
|
||||
<ng-container
|
||||
*ngFor="let section of parameters; let index = index"
|
||||
class="w-100 d-flex"
|
||||
>
|
||||
<div class="param">
|
||||
<div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<div class="value">
|
||||
<input
|
||||
[matAutocomplete]="auto"
|
||||
[(ngModel)]="section['value']"
|
||||
placeholder="Parameter"
|
||||
(ngModelChange)="paramsChanged()"
|
||||
name="parameterKey-{{ section.name }}-{{ index }}"
|
||||
matInput
|
||||
required
|
||||
#optsInput="ngModel"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
class="light-theme"
|
||||
[displayWith]="displayFn"
|
||||
(opened)="setIsAutoCompleteOpen(true)"
|
||||
(closed)="setIsAutoCompleteOpen(false)"
|
||||
autoActiveFirstOption
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let option of ioOptions; trackBy: trackByValue"
|
||||
[value]="option.value"
|
||||
[smTooltip]="option.label + ' (' + option.type + ')'"
|
||||
class="option"
|
||||
(onSelectionChange)="paramSelected($event)"
|
||||
>
|
||||
<div
|
||||
[smSearchText]="optsInput.value"
|
||||
style="text-overflow: ellipsis; overflow: hidden"
|
||||
>
|
||||
{{ option.label }}
|
||||
</div>
|
||||
</mat-option>
|
||||
<mat-option disabled style="height: 0; min-height: 0"></mat-option>
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
|
||||
<!-- <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div> -->
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</sm-dialog-template>
|
||||
@ -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 */
|
||||
}
|
||||
}
|
||||
@ -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<PipelineParametersDialogComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [PipelineParametersDialogComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(PipelineParametersDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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<PipelineParametersDialogComponent>,
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -15,13 +15,13 @@ import { ButtonToggleComponent } from "@common/shared/ui-components/inputs/butto
|
||||
|
||||
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
|
||||
import { MatMenuModule } from "@angular/material/menu";
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import { MatCheckboxModule } from "@angular/material/checkbox";
|
||||
import { MatSidenavModule } from "@angular/material/sidenav";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { PipelineDialogComponent } from "./pipeline-dialog/pipeline-dialog.component";
|
||||
import { CreateNewPipelineFormComponent } from "./pipeline-dialog/create-new-pipeline-form/create-new-pipeline-form.component";
|
||||
import { PipelineSettingDialogComponent } from './pipeline-setting/pipeline-setting.dialog.component';
|
||||
import { PipelineSettingFormComponent } from './pipeline-setting/pipeline-setting-form/pipeline-setting-form.component';
|
||||
import { PipelineSettingDialogComponent } from "./pipeline-setting/pipeline-setting.dialog.component";
|
||||
import { PipelineSettingFormComponent } from "./pipeline-setting/pipeline-setting-form/pipeline-setting-form.component";
|
||||
import { MatAutocompleteModule } from "@angular/material/autocomplete";
|
||||
import { ScrollEndDirective } from "@common/shared/ui-components/directives/scroll-end.directive";
|
||||
import { ClickStopPropagationDirective } from "@common/shared/ui-components/directives/click-stop-propagation.directive";
|
||||
@ -50,13 +50,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";
|
||||
@ -66,9 +70,10 @@ 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";
|
||||
|
||||
export const pipelinesSyncedKeys = ["projects.showPipelineExamples"];
|
||||
const pipelinesSyncedKeys2 = ['orderBy', 'sortOrder'];
|
||||
const pipelinesSyncedKeys2 = ["orderBy", "sortOrder"];
|
||||
// export const REPORTS_STORE_CONFIG_TOKEN =
|
||||
// new InjectionToken<StoreConfig<ReportsState, any>>('DatasetsConfigToken');
|
||||
|
||||
@ -76,9 +81,9 @@ export const PIPELINES_CONFIG_TOKEN = new InjectionToken<
|
||||
StoreConfig<ProjectsState, any>
|
||||
>("PipelineConfigToken");
|
||||
|
||||
|
||||
export const PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE =
|
||||
new InjectionToken<StoreConfig<PipelineState, any>>('PipelineConfigToken');
|
||||
export const PIPELINES_CONFIG_TOKEN_FOR_PIPELINE_SERVICE = new InjectionToken<
|
||||
StoreConfig<PipelineState, any>
|
||||
>("PipelineConfigToken");
|
||||
|
||||
const localStorageKey = "_saved_pipeline_state_";
|
||||
|
||||
@ -99,12 +104,17 @@ const getPipelineConfig = () => ({
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
const getInitState = (userPreferences: UserPreferences) => ({
|
||||
metaReducers: [
|
||||
(reducer: ActionReducer<any>) =>
|
||||
createUserPrefFeatureReducer(PIPELINES_KEY, pipelinesSyncedKeys2, [PIPELINES_PREFIX], userPreferences, reducer),
|
||||
]
|
||||
createUserPrefFeatureReducer(
|
||||
PIPELINES_KEY,
|
||||
pipelinesSyncedKeys2,
|
||||
[PIPELINES_PREFIX],
|
||||
userPreferences,
|
||||
reducer
|
||||
),
|
||||
],
|
||||
});
|
||||
|
||||
@NgModule({
|
||||
@ -121,6 +131,7 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
PipelineSettingDialogComponent,
|
||||
PipelineSettingFormComponent,
|
||||
PipelineStepInfoComponent,
|
||||
PipelineParametersDialogComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
@ -131,7 +142,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,
|
||||
@ -143,7 +158,6 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
SearchTextDirective,
|
||||
UniqueNameValidatorDirective,
|
||||
|
||||
|
||||
MarkdownEditorComponent,
|
||||
SearchComponent,
|
||||
TagListComponent,
|
||||
@ -171,12 +185,16 @@ const getInitState = (userPreferences: UserPreferences) => ({
|
||||
FilterPipe,
|
||||
FileSizePipe,
|
||||
RegexPipe,
|
||||
FilterMonitorMetricPipe
|
||||
FilterMonitorMetricPipe,
|
||||
],
|
||||
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" },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user