move to model

src/app/app.module.ts

@@ -36,6 +36,6 @@ import { SharedModule } from '@shared/shared.module';
         AppRoutingModule,
         DialogModule,
     ],
-    bootstrap: [AppComponent],
+    bootstrap: [ AppComponent ],
 })
 export class AppModule { }

src/environments/environment.prod.ts

@@ -5,5 +5,4 @@ export const environment = {
     apiUrl: '/api/v1',
     uiUrl: '/ui/v1',
     monitoringUrl: '/monitoring',
-    profilerUrl: '/profiler',
 };

src/environments/environment.ts

@@ -10,5 +10,4 @@ export const environment = {
     apiUrl: '/api/v2',
     uiUrl: '/ui/v2',
     monitoringUrl: '/monitoring',
-    profilerUrl: '/profiler',
 };

src/modules/applications/components/dialogs/dialog-add-metric/dialog-add-metric.component.ts

@@ -1,5 +1,5 @@
-import { Subscription ,  Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Subscription ,  Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
 import { Application } from '@shared/models/application.model';
 
@@ -19,6 +19,9 @@ import { FormsService } from '@core/services';
 import { DialogService } from '@dialog/dialog.service';
 import { MetricSettings } from '@shared/models/metric-settings.model';
 import { MetricSpecification } from '@shared/models/metric-specification.model';
+import { IModelVersion } from '@shared/_index';
+
+import * as fromModels from '@models/reducers';
 
 interface IAggreagation {
     name: string;
@@ -30,19 +33,19 @@ interface IAggreagation {
     styleUrls: ['./dialog-add-metric.component.scss'],
 })
 export class DialogAddMetricComponent implements OnDestroy, OnInit {
-
-    public dialogType = 'Add';
     public serviceForm: FormGroup;
 
     public isHealthChecked: boolean = false;
     public isHealthDisabled: boolean = true;
 
     public applications$: Observable<Application[]>;
-    public sources$: Observable<string[]>;
     public applicationSub: Subscription;
     public application: Application;
     public stageId: number;
 
+    public modelVersion$: Observable<IModelVersion>;
+    public sources$: Observable<string[]>;
+
     public aggregations: IAggreagation[] = [
         {name: 'Kolmogorov-Smirnov', className: 'io.hydrosphere.sonar.core.metrics.providers.KolmogorovSmirnov'},
         {name: 'Autoencoder', className: 'io.hydrosphere.sonar.core.metrics.providers.Autoencoder'},
@@ -64,22 +67,27 @@ export class DialogAddMetricComponent implements OnDestroy, OnInit {
     }
 
     ngOnInit() {
-        this.store.select(fromRoot.getRouterParams).subscribe(x => { console.log(x); });
         this.createForm();
         this.initFormChangesListener();
-        this.applications$ = this.store.select(fromApplications.getAllApplications);
 
-        const app$ = this.store.select(fromApplications.getSelectedApplication);
+        this.modelVersion$ = this.store.select(fromModels.getSelectedModelVersion)
 
-        this.sources$ = app$.pipe(map(application => {
-            const inputsNames: string[] = application.signature.inputs.map(field => field.name);
+        this.sources$ = this.modelVersion$.pipe(
+            switchMap(modelVersion => this.getInputNames(modelVersion)
+        ));
+    }
+
+    getInputNames(modelVersion: IModelVersion): Observable<string[]> {
+        if (!modelVersion) {
+             return of([]);
+        }
 
-            return inputsNames;
-        }));
+        const getName = input => input.name;
+        const getInputs = signature => signature.inputs.map(getName);
+        const signatures = modelVersion.modelContract.signatures;
+        const ind = signatures.map(getInputs);
 
-        this.applicationSub = app$.subscribe(_ => {
-            this.application = _;
-        });
+        return of(ind);
     }
 
     onSubmit() {
@@ -187,11 +195,6 @@ export class DialogAddMetricComponent implements OnDestroy, OnInit {
                 metricName: data.name,
                 metricAggregation: data.className,
             });
-            // if (data.metricAggregation == "io.hydrosphere.sonar.core.metrics.providers.Autoencoder") {
-            //     this.serviceForm.get("metricConfig").patchValue({
-            //         applicationId: data
-            //     })
-            // }
         }
     }
 }

src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.html

@@ -0,0 +1,41 @@
+<form 
+    [formGroup]="serviceForm" 
+    (ngSubmit)="onSubmit()">
+    <hydro-input-text name="metricName" label="Metric Name" formControlName="metricName"></hydro-input-text>
+    <div class="row">
+        <mdl-select formControlName="sourceName" label="Choose input">
+            <mdl-option *ngFor="let source of sources$ | async" [value]="source">{{ source }}</mdl-option>
+        </mdl-select>
+    </div>
+    <div class="row">
+        <mdl-select formControlName="metricAggregation" label="Choose metric" (change)="changeConfigForm($event)">
+            <mdl-option *ngFor="let aggregation of aggregations" [value]="aggregation.className">{{ aggregation.name }}</mdl-option>
+        </mdl-select>
+    </div>
+    <div class="row">
+        <div *ngIf="this.serviceForm.controls['metricConfig'].get('applicationId')" formGroupName="metricConfig">
+            <mdl-select formControlName="applicationId" label="Choose autoencoder application">
+                <mdl-option *ngFor="let app of applications$ | async" [value]="app.id">{{ app.name }}</mdl-option>
+            </mdl-select>
+        </div>
+    </div>
+    <div class="row">
+        <label class="hydro-checkbox" [class.disabled]="isHealthDisabled">
+            Use this metric for health checks
+            <input type="checkbox" formControlName="withHealth" (change)="toggleHealthConfig()">
+            <span></span>
+        </label>
+    </div>
+    <div class="row">
+        <div *ngIf="!isHealthDisabled" formGroupName="healthConfig">
+            <div *ngIf="this.serviceForm.controls['healthConfig'].get('threshold')">
+                <hydro-input-text name="threshold" label="Threshold" formControlName="threshold"></hydro-input-text>
+            </div>
+        </div>
+    </div>
+
+    <div class="buttons-group form-actions">
+        <button class="button form-actions__button button--flat button--large" (click)="onClose()" type="button">cancel</button>
+        <button class="button button--primary button--large" type="submit" [disabled]="serviceForm.invalid">Add Metric</button>
+    </div>
+</form>

src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.scss

@@ -0,0 +1,16 @@
+@import "variables.scss";
+
+label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-actions {
+    &__button {
+        margin-right: 24px;
+    }
+}
+
+.row {
+    padding: 10px 0 10px 0;
+}

src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.ts

@@ -0,0 +1,203 @@
+import { Subscription ,  Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { Application } from '@shared/models/application.model';
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { MdlSnackbarService } from '@angular-mdl/core';
+
+import * as fromApplications from '@applications/reducers';
+import * as HydroActions from '@core/actions/monitoring.actions';
+import { HydroServingState } from '@core/reducers';
+import * as fromRoot from '@core/reducers';
+import { Store } from '@ngrx/store';
+
+import { FormsService } from '@core/services';
+import { DialogService } from '@dialog/dialog.service';
+import { MetricSettings } from '@shared/models/metric-settings.model';
+import { MetricSpecification } from '@shared/models/metric-specification.model';
+
+interface IAggreagation {
+    name: string;
+    className: string;
+}
+
+@Component({
+    templateUrl: './dialog-add-metric.component.html',
+    styleUrls: ['./dialog-add-metric.component.scss'],
+})
+export class DialogAddMetric2Component implements OnDestroy, OnInit {
+    public serviceForm: FormGroup;
+
+    public isHealthChecked: boolean = false;
+    public isHealthDisabled: boolean = true;
+
+    public applications$: Observable<Application[]>;
+    public sources$: Observable<string[]>;
+    public applicationSub: Subscription;
+    public application: Application;
+    public stageId: number;
+
+    public aggregations: IAggreagation[] = [
+        {name: 'Kolmogorov-Smirnov', className: 'io.hydrosphere.sonar.core.metrics.providers.KolmogorovSmirnov'},
+        {name: 'Autoencoder', className: 'io.hydrosphere.sonar.core.metrics.providers.Autoencoder'},
+        {name: 'Random Forest', className: 'io.hydrosphere.sonar.core.metrics.providers.RandomForest'},
+        {name: 'GAN', className: 'io.hydrosphere.sonar.core.metrics.providers.GAN'},
+        {name: 'Average', className: 'io.hydrosphere.sonar.core.metrics.providers.Average'},
+        {name: 'Min', className: 'io.hydrosphere.sonar.core.metrics.providers.Min'},
+        {name: 'Max', className: 'io.hydrosphere.sonar.core.metrics.providers.Max'},
+    ];
+
+    constructor(
+        public fb: FormBuilder,
+        public dialog: DialogService,
+        public formsService: FormsService,
+        public mdlSnackbarService: MdlSnackbarService,
+        public store: Store<HydroServingState>,
+        public router: ActivatedRoute
+    ) {
+    }
+
+    ngOnInit() {
+        this.store.select(fromRoot.getRouterParams).subscribe(x => { console.log(x); });
+        this.createForm();
+        this.initFormChangesListener();
+        this.applications$ = this.store.select(fromApplications.getAllApplications);
+
+        const app$ = this.store.select(fromApplications.getSelectedApplication);
+
+        this.sources$ = app$.pipe(map(application => {
+            const inputsNames: string[] = application.signature.inputs.map(field => field.name);
+
+            return inputsNames;
+        }));
+
+        this.applicationSub = app$.subscribe(_ => {
+            this.application = _;
+        });
+    }
+
+    getInputNames(modelVersion: IModelVersion): Observable<string[]> {
+        if (!modelVersion) {
+             return of([]);
+        }
+
+        const getName = input => input.name;
+        const getInputs = signature => signature.inputs.map(getName);
+        const signatures = modelVersion.modelContract.signatures;
+        const ind = signatures.map(getInputs);
+
+        return of(ind);
+    }
+
+    onSubmit() {
+        if (this.serviceForm.invalid) {
+            return;
+        }
+
+        const stageId = location.pathname.split('/')[3];
+
+        const filters = {
+            sourceName: this.serviceForm.value.sourceName,
+            stageId: `app${this.application.id}stage${stageId}`,
+        };
+
+        const metricInfo = {
+            metricProviderClass: this.serviceForm.value.metricAggregation,
+            config: this.serviceForm.value.metricConfig,
+            withHealth: this.serviceForm.value.withHealth,
+            healthConfig: this.serviceForm.value.healthConfig,
+        };
+
+        const metricSettings = new MetricSettings({
+            name: this.serviceForm.value.metricName,
+            filter: filters,
+            metricProviderSpecification: new MetricSpecification(metricInfo),
+        });
+
+        console.log('Will send: ');
+        console.log(metricInfo, filters);
+        this.store.dispatch(new HydroActions.AddMetricAction(metricSettings));
+        this.onClose();
+    }
+
+    ngOnDestroy() {
+        if (this.applicationSub) {
+            this.applicationSub.unsubscribe();
+        }
+    }
+
+    public initFormChangesListener() {
+        this.serviceForm.valueChanges
+            .subscribe(form => {
+                console.log(form);
+            });
+    }
+
+    public changeConfigForm(aggregation) {
+        this.isHealthDisabled = false;
+        this.serviceForm.controls.withHealth.enable();
+        switch (aggregation) {
+            case 'io.hydrosphere.sonar.core.metrics.providers.Autoencoder':
+            case 'io.hydrosphere.sonar.core.metrics.providers.RandomForest':
+            case 'io.hydrosphere.sonar.core.metrics.providers.GAN':
+                (this.serviceForm.controls.metricConfig as FormGroup)
+                    .addControl('applicationId', this.fb.control('', Validators.required));
+                break;
+            case 'io.hydrosphere.sonar.core.metrics.providers.Average':
+            case 'io.hydrosphere.sonar.core.metrics.providers.Min':
+            case 'io.hydrosphere.sonar.core.metrics.providers.Max':
+            case 'io.hydrosphere.sonar.core.metrics.providers.KolmogorovSmirnov':
+                this.serviceForm.setControl('metricConfig', this.fb.group({}));
+                break;
+        }
+        this.toggleHealthConfig();
+    }
+
+    public toggleHealthConfig() {
+        this.isHealthChecked = this.serviceForm.get('withHealth').value;
+        if (this.isHealthChecked) {
+            switch (this.serviceForm.get('metricAggregation').value) {
+                case 'io.hydrosphere.sonar.core.metrics.providers.Autoencoder':
+                case 'io.hydrosphere.sonar.core.metrics.providers.RandomForest':
+                case 'io.hydrosphere.sonar.core.metrics.providers.Average':
+                case 'io.hydrosphere.sonar.core.metrics.providers.Min':
+                case 'io.hydrosphere.sonar.core.metrics.providers.Max':
+                    (this.serviceForm.controls.healthConfig as FormGroup)
+                        .addControl('threshold', this.fb.control({disabled: false, value: ''}, Validators.required));
+                    break;
+                case 'io.hydrosphere.sonar.core.metrics.providers.KolmogorovSmirnov':
+                case 'io.hydrosphere.sonar.core.metrics.providers.GAN':
+                    this.serviceForm.setControl('healthConfig', this.fb.group({}));
+                    break;
+            }
+        } else {
+            this.serviceForm.setControl('healthConfig', this.fb.group({}));
+        }
+    }
+
+    public onClose(): void {
+        this.dialog.closeDialog();
+    }
+
+    private createForm(data?) {
+        this.serviceForm = this.fb.group({
+            sourceName: ['', Validators.required],
+            metricName: ['', Validators.required],
+            metricAggregation: ['', Validators.required],
+            withHealth: {value: false, disabled: true},
+            metricConfig: this.fb.group({}),
+            healthConfig: this.fb.group({}),
+        });
+
+        if (data) {
+            this.serviceForm.patchValue({
+                metricName: data.name,
+                metricAggregation: data.className,
+            });
+        }
+    }
+}

src/modules/models/components/dialogs/index.ts

@@ -1 +1,2 @@
 export * from './dialog-delete-model/dialog-delete-model.component';
+export * from './dialog-add-metric2/dialog-add-metric.component';

src/modules/models/components/index.ts

@@ -1,6 +1,7 @@
 export * from './models-wrapper/models-wrapper.component';
 export * from './model-details/model-details.component';
 export * from './model-version-details/model-version-details.component';
-
+export * from './profiler/profiler.component';
+export * from './model-version-monitoring/model-version-monitoring.component';
 // dialogs
 export * from './dialogs';