From c0728616fa3c386f9c18caa5a6fdd3e72c171dc6 Mon Sep 17 00:00:00 2001 From: Paul Mck Date: Mon, 28 Jan 2019 12:37:33 +0300 Subject: [PATCH] move to model --- src/app/app.module.ts | 2 +- src/environments/environment.prod.ts | 1 - src/environments/environment.ts | 1 - .../dialog-add-metric.component.ts | 43 ++-- .../dialog-add-metric.component.html | 41 ++++ .../dialog-add-metric.component.scss | 16 ++ .../dialog-add-metric.component.ts | 203 ++++++++++++++++++ .../models/components/dialogs/index.ts | 1 + src/modules/models/components/index.ts | 3 +- .../model-details.component.html | 4 +- .../model-version-details.component.html | 7 +- .../model-version-monitoring.component.html | 4 + .../model-version-monitoring.component.ts | 19 ++ .../profiler/profiler.component.html | 2 + .../components/profiler/profiler.component.ts | 33 +++ src/modules/models/models.module.ts | 14 +- src/modules/models/models.router.ts | 14 +- src/modules/monitoring/components/index.ts | 1 + .../monitoring/monitoring.component.html | 44 ++++ .../monitoring/monitoring.component.scss | 58 +++++ .../monitoring/monitoring.component.ts | 9 + src/modules/monitoring/monitoring.module.ts | 20 ++ .../profiles/services/profiler.service.ts | 2 +- 23 files changed, 507 insertions(+), 35 deletions(-) create mode 100644 src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.html create mode 100644 src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.scss create mode 100644 src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.ts create mode 100644 src/modules/models/components/model-version-monitoring/model-version-monitoring.component.html create mode 100644 src/modules/models/components/model-version-monitoring/model-version-monitoring.component.ts create mode 100644 src/modules/models/components/profiler/profiler.component.html create mode 100644 src/modules/models/components/profiler/profiler.component.ts create mode 100644 src/modules/monitoring/components/index.ts create mode 100644 src/modules/monitoring/components/monitoring/monitoring.component.html create mode 100644 src/modules/monitoring/components/monitoring/monitoring.component.scss create mode 100644 src/modules/monitoring/components/monitoring/monitoring.component.ts create mode 100644 src/modules/monitoring/monitoring.module.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 21154779..edd84f7f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -36,6 +36,6 @@ import { SharedModule } from '@shared/shared.module'; AppRoutingModule, DialogModule, ], - bootstrap: [AppComponent], + bootstrap: [ AppComponent ], }) export class AppModule { } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 054c75f6..e7245de6 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -5,5 +5,4 @@ export const environment = { apiUrl: '/api/v1', uiUrl: '/ui/v1', monitoringUrl: '/monitoring', - profilerUrl: '/profiler', }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b795f25f..f268e979 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -10,5 +10,4 @@ export const environment = { apiUrl: '/api/v2', uiUrl: '/ui/v2', monitoringUrl: '/monitoring', - profilerUrl: '/profiler', }; diff --git a/src/modules/applications/components/dialogs/dialog-add-metric/dialog-add-metric.component.ts b/src/modules/applications/components/dialogs/dialog-add-metric/dialog-add-metric.component.ts index 27869aee..55bf7191 100644 --- a/src/modules/applications/components/dialogs/dialog-add-metric/dialog-add-metric.component.ts +++ b/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; - public sources$: Observable; public applicationSub: Subscription; public application: Application; public stageId: number; + public modelVersion$: Observable; + public sources$: Observable; + 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 { + 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 - // }) - // } } } } diff --git a/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.html b/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.html new file mode 100644 index 00000000..4e82f1d0 --- /dev/null +++ b/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.html @@ -0,0 +1,41 @@ +
+ +
+ + {{ source }} + +
+
+ + {{ aggregation.name }} + +
+
+
+ + {{ app.name }} + +
+
+
+ +
+
+
+
+ +
+
+
+ +
+ + +
+
\ No newline at end of file diff --git a/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.scss b/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.scss new file mode 100644 index 00000000..01fef394 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.ts b/src/modules/models/components/dialogs/dialog-add-metric2/dialog-add-metric.component.ts new file mode 100644 index 00000000..1971cf69 --- /dev/null +++ b/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; + public sources$: Observable; + 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, + 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 { + 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, + }); + } + } +} diff --git a/src/modules/models/components/dialogs/index.ts b/src/modules/models/components/dialogs/index.ts index 96587de2..6ea3440e 100644 --- a/src/modules/models/components/dialogs/index.ts +++ b/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'; diff --git a/src/modules/models/components/index.ts b/src/modules/models/components/index.ts index 49b16cec..e4bd8cfd 100644 --- a/src/modules/models/components/index.ts +++ b/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'; diff --git a/src/modules/models/components/model-details/model-details.component.html b/src/modules/models/components/model-details/model-details.component.html index 8ef7c2ba..fe8ae0f0 100644 --- a/src/modules/models/components/model-details/model-details.component.html +++ b/src/modules/models/components/model-details/model-details.component.html @@ -59,11 +59,13 @@
Versions
+ profiler + monitoring diff --git a/src/modules/models/components/model-version-details/model-version-details.component.html b/src/modules/models/components/model-version-details/model-version-details.component.html index 8fad1c64..a5549c81 100644 --- a/src/modules/models/components/model-version-details/model-version-details.component.html +++ b/src/modules/models/components/model-version-details/model-version-details.component.html @@ -4,7 +4,8 @@ back to model - + profiler + monitoring
{{ (modelVersion$ | async)?.model?.name }} / v{{ (modelVersion$ | async)?.modelVersion }}
@@ -49,10 +50,6 @@
-
- -
-
\ No newline at end of file diff --git a/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.html b/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.html new file mode 100644 index 00000000..b1e29edb --- /dev/null +++ b/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.html @@ -0,0 +1,4 @@ +
+ im monitoring +
add metric
+
\ No newline at end of file diff --git a/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.ts b/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.ts new file mode 100644 index 00000000..fb1337af --- /dev/null +++ b/src/modules/models/components/model-version-monitoring/model-version-monitoring.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { DialogService } from '@dialog/dialog.service'; +import { DialogAddMetric2Component } from '@models/components/dialogs'; + +@Component({ + selector: 'hs-model-version-monitoring', + templateUrl: './model-version-monitoring.component.html', +}) +export class ModelVersionMonitoringComponent { + constructor( + private dialog: DialogService + ) { } + + public openAddMetricDialog(): void { + this.dialog.createDialog({ + component: DialogAddMetric2Component, + }); + } +} diff --git a/src/modules/models/components/profiler/profiler.component.html b/src/modules/models/components/profiler/profiler.component.html new file mode 100644 index 00000000..ec1e8153 --- /dev/null +++ b/src/modules/models/components/profiler/profiler.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/modules/models/components/profiler/profiler.component.ts b/src/modules/models/components/profiler/profiler.component.ts new file mode 100644 index 00000000..31f3449c --- /dev/null +++ b/src/modules/models/components/profiler/profiler.component.ts @@ -0,0 +1,33 @@ +import { Component, OnDestroy } from '@angular/core'; +import { HydroServingState } from '@core/reducers'; +import { getSelectedModelVersion } from '@models/reducers'; +import { Store } from '@ngrx/store'; +import { Subscription } from 'rxjs'; +import { tap } from 'rxjs/operators'; + +@Component({ + selector: 'hs-profiler', + templateUrl: './profiler.component.html', +}) +export class ProfilerComponent implements OnDestroy { + public modelVersionId: number; + private selectedModelVersionSub: Subscription; + + constructor( + private store: Store + ) { + this.selectedModelVersionSub = this.store.select(getSelectedModelVersion).pipe( + tap(modelVersion => { + if (modelVersion) { + this.modelVersionId = modelVersion.id; + } else { + this.modelVersionId = undefined; + } + }) + ).subscribe(); + } + + ngOnDestroy(): void { + this.selectedModelVersionSub.unsubscribe(); + } +} diff --git a/src/modules/models/models.module.ts b/src/modules/models/models.module.ts index c9c2df8b..93af8d31 100644 --- a/src/modules/models/models.module.ts +++ b/src/modules/models/models.module.ts @@ -2,7 +2,7 @@ import { MdlModule } from '@angular-mdl/core'; import { MdlSelectModule } from '@angular-mdl/select'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { SharedModule } from '@shared/shared.module'; import { MomentModule } from 'angular2-moment'; import { ModelsRoutingModule } from './models.router'; @@ -11,14 +11,17 @@ import { ModelsWrapperComponent, ModelDetailsComponent, ModelVersionDetailsComponent, + ProfilerComponent, + ModelVersionMonitoringComponent, } from '@models/components'; -import { DialogDeleteModelComponent } from '@models/components/dialogs'; +import { DialogDeleteModelComponent, DialogAddMetric2Component } from '@models/components/dialogs'; import { ModelEffects } from '@models/effects'; import { reducers } from '@models/reducers'; import { ModelsService, ModelDetailsGuard } from '@models/services'; import { EffectsModule } from '@ngrx/effects'; import { StoreModule } from '@ngrx/store'; import { ProfilesModule } from '@profiles/profiles.module'; +import { MonitoringModule } from '../monitoring/monitoring.module'; @NgModule({ imports: [ ModelsRoutingModule, @@ -28,17 +31,22 @@ import { ProfilesModule } from '@profiles/profiles.module'; MdlModule, MdlSelectModule, FormsModule, + ReactiveFormsModule, StoreModule.forFeature('models', reducers), EffectsModule.forFeature([ModelEffects]), ProfilesModule, + MonitoringModule, ], declarations: [ ModelsWrapperComponent, ModelDetailsComponent, ModelVersionDetailsComponent, DialogDeleteModelComponent, + DialogAddMetric2Component, + ProfilerComponent, + ModelVersionMonitoringComponent, ], - entryComponents: [DialogDeleteModelComponent], + entryComponents: [DialogDeleteModelComponent, DialogAddMetric2Component], providers: [ModelsService, ModelDetailsGuard], }) export class ModelsModule { } diff --git a/src/modules/models/models.router.ts b/src/modules/models/models.router.ts index ec449c48..6e3b5efa 100644 --- a/src/modules/models/models.router.ts +++ b/src/modules/models/models.router.ts @@ -4,7 +4,9 @@ import { RouterModule } from '@angular/router'; import { ModelsWrapperComponent, ModelDetailsComponent, - ModelVersionDetailsComponent + ModelVersionDetailsComponent, + ProfilerComponent, + ModelVersionMonitoringComponent } from '@models/components'; import { ModelDetailsGuard } from '@models/services'; @@ -31,6 +33,16 @@ import { ModelDetailsGuard } from '@models/services'; component: ModelVersionDetailsComponent, data: {anim: 'modelVerDetail'}, }, + { + path: ':modelId/:modelVersionId/profiler', + component: ProfilerComponent, + data: {anim: 'modelVerDetail'}, + }, + { + path: ':modelId/:modelVersionId/monitoring', + component: ModelVersionMonitoringComponent, + data: {anim: 'modelVerDetail'}, + }, ], }, ]), diff --git a/src/modules/monitoring/components/index.ts b/src/modules/monitoring/components/index.ts new file mode 100644 index 00000000..45558073 --- /dev/null +++ b/src/modules/monitoring/components/index.ts @@ -0,0 +1 @@ +export * from './monitoring/monitoring.component'; diff --git a/src/modules/monitoring/components/monitoring/monitoring.component.html b/src/modules/monitoring/components/monitoring/monitoring.component.html new file mode 100644 index 00000000..6334c8d7 --- /dev/null +++ b/src/modules/monitoring/components/monitoring/monitoring.component.html @@ -0,0 +1,44 @@ +
+
+
+ + {{ param.text }} + + +
+
+ + +
+
+ Monitoring service is unavailable +
+
+
+
+ + + + + + +
+
+
\ No newline at end of file diff --git a/src/modules/monitoring/components/monitoring/monitoring.component.scss b/src/modules/monitoring/components/monitoring/monitoring.component.scss new file mode 100644 index 00000000..6c690558 --- /dev/null +++ b/src/modules/monitoring/components/monitoring/monitoring.component.scss @@ -0,0 +1,58 @@ +.alerts { + &-list { + list-style: none; + padding: 0; + &__item { + border: 1px solid #e6e9ed; + padding: 10px 16px 8px; + text-transform: uppercase; + background-color: #f8f9fb; + line-height: 1; + margin-bottom: 8px; + } + } +} + +.actions { + display: flex; + &__time-select { + margin-right: 8px; + } +} + +.monitoring-controls { + float: right; + + mdl-select { + display: inline-block; + } + + button { + display: inline-block; + } +} + +.content-header { + align-items: flex-start; + justify-content: space-between; +} + +.unavailable-message { + width: 100%; + text-align: center; + font-size: 28px; + line-height: 10; + color: #708393; + font-weight: bold; +} + +.chart { + margin-bottom: 40px; + &-filter { + width: 120px + } +} + +.navigation-button { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/src/modules/monitoring/components/monitoring/monitoring.component.ts b/src/modules/monitoring/components/monitoring/monitoring.component.ts new file mode 100644 index 00000000..2947f0f3 --- /dev/null +++ b/src/modules/monitoring/components/monitoring/monitoring.component.ts @@ -0,0 +1,9 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'hs-monitoring', + templateUrl: './monitoring.component.html', +}) +export class MonitoringComponent implements OnInit { + ngOnInit(): void { } +} diff --git a/src/modules/monitoring/monitoring.module.ts b/src/modules/monitoring/monitoring.module.ts new file mode 100644 index 00000000..25757e5a --- /dev/null +++ b/src/modules/monitoring/monitoring.module.ts @@ -0,0 +1,20 @@ +import { MdlModule } from '@angular-mdl/core'; +import { MdlSelectModule } from '@angular-mdl/select'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { SharedModule } from '@shared/shared.module'; +import { MonitoringComponent } from './components'; + +const COMPONENTS = [ + MonitoringComponent, +]; + +@NgModule({ + declarations: [ MonitoringComponent ], + imports: [ CommonModule, + SharedModule, + MdlModule, + MdlSelectModule, ], + providers: [], +}) +export class MonitoringModule {} diff --git a/src/modules/profiles/services/profiler.service.ts b/src/modules/profiles/services/profiler.service.ts index 8ad761e3..6310c96d 100644 --- a/src/modules/profiles/services/profiler.service.ts +++ b/src/modules/profiles/services/profiler.service.ts @@ -10,7 +10,7 @@ export class ProfilerService { private baseAPIUrl: string; constructor(private http: HttpService) { - this.baseAPIUrl = `${environment.profilerUrl}`; + this.baseAPIUrl = `${environment.monitoringUrl}`; } public getFields(modelVersionId: number) {