Delete {{scheduleName}}
Diagnostic {{data.task}}
{{data.name}} SSH Terminal
Cloudiator
- - + + @@ -60,6 +69,6 @@ - + diff --git a/src/app/components/app/app.component.scss b/src/app/components/app/app.component.scss new file mode 100644 index 0000000..0ef95ba --- /dev/null +++ b/src/app/components/app/app.component.scss @@ -0,0 +1,13 @@ +@import "../../../styles"; + +.no-nav-app-container { + height: 100%; + top: 0; +} + +.has-dropdown > .navbar-link::after { + // yeeeee... dont ask me man. + border: 3px solid #{$secondary}; + border-top: none; + border-right: none; +} diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index 5018788..e977fc1 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,6 +1,6 @@ import {Component, HostListener, OnChanges, OnDestroy, OnInit} from '@angular/core'; -import {ActivatedRoute, NavigationStart, Router} from '@angular/router'; -import {Subscription} from 'rxjs'; +import {ActivatedRoute, NavigationEnd, NavigationStart, Router} from '@angular/router'; +import {Observable, Subscription} from 'rxjs'; import {EditorService} from '../../services/editor.service'; import {AuthService} from '../../services/auth.service'; @@ -11,7 +11,7 @@ import {AuthService} from '../../services/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, OnDestroy { @@ -32,6 +32,8 @@ export class AppComponent implements OnInit, OnDestroy { */ editorHasUnsavedChanges: boolean; + public user$: Observable; + /** * All Subscriptions of this Component. * @type {any[]} @@ -47,10 +49,10 @@ export class AppComponent implements OnInit, OnDestroy { /** * Adds page reload warning if unsaved changes exist. + * Not needed anymore as the app caches editor state now */ @HostListener('window:beforeunload') unloadNotification() { - // ToDo: reactivate // return !this.editorHasUnsavedChanges; } @@ -70,6 +72,8 @@ export class AppComponent implements OnInit, OnDestroy { const s2 = this.authservice.isLoggedIn() .subscribe(loggedIn => this.showNav = loggedIn); + this.user$ = this.authservice.getUser(); + this.subscriptions.push(s0, s1, s2); } diff --git a/src/app/components/clouds/cloud-card/cloud-card.component.html b/src/app/components/clouds/cloud-card/cloud-card.component.html index ce59266..1b76084 100644 --- a/src/app/components/clouds/cloud-card/cloud-card.component.html +++ b/src/app/components/clouds/cloud-card/cloud-card.component.html @@ -1,15 +1,26 @@ - - + - {{cloud.api.providerName}} - {{cloud.credential.user}} + {{cloud.api.providerName}} + {{cloud.credential.user}} - - - - + + + + + + + + + + + diff --git a/src/app/components/clouds/cloud-card/cloud-card.component.scss b/src/app/components/clouds/cloud-card/cloud-card.component.scss index e69de29..7ea3c4f 100644 --- a/src/app/components/clouds/cloud-card/cloud-card.component.scss +++ b/src/app/components/clouds/cloud-card/cloud-card.component.scss @@ -0,0 +1,80 @@ +@import "~bulma/sass/utilities/mixins"; + +:host { + // firefox fix + //overflow: hidden; +} + +.cloud-card { + display: block; + min-width: 15em; + min-height: 5em; + clear: both; + overflow: hidden !important; +} + +.hero-body { + z-index: 3; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center +} + +.api-text { + margin-left: 2rem; + margin-right: 2rem; +} + +.username-text { + white-space: normal; +} + + +@include mobile { + .cloud-card { + width: 95vw; + } +} + +.public-icon { + position: absolute; + top: 0.5em; + left: 0.5em; +} + +.background-logo { + position: absolute; + right: -20px; + bottom: -20px; + z-index: 0; + width: 100px; + opacity: 0.3; +} + +.background-aws-logo { + position: absolute; + right: -20px; + bottom: 5px; + z-index: 0; + width: 100px; + opacity: 0.3; +} + +.background-default-logo { + position: absolute; + right: -20px; + bottom: -10px; + z-index: 0; + width: 100px; + opacity: 0.3; +} + +.logo-crop-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden +} diff --git a/src/app/components/clouds/cloud-card/cloud-card.component.ts b/src/app/components/clouds/cloud-card/cloud-card.component.ts index 3279b3a..688175a 100644 --- a/src/app/components/clouds/cloud-card/cloud-card.component.ts +++ b/src/app/components/clouds/cloud-card/cloud-card.component.ts @@ -1,5 +1,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {Cloud} from 'cloudiator-rest-api'; +import {animate, style, transition, trigger} from '@angular/animations'; /** * A card that represents a single cloud in the CloudOverviewComponent. @@ -23,4 +24,18 @@ export class CloudCardComponent implements OnInit { /** @ignore */ ngOnInit() { } + + backgroundSelector(name) { + switch (this.cloud.api.providerName) { + case 'aws-ec2': + return name === 'aws'; + case 'openstack4j': + case 'openstack-nova': + return name === 'openstack'; + case 'google-compute-engine': + return name === 'gcp'; + default: + return name === 'default'; + } + } } diff --git a/src/app/components/clouds/cloud-overview/cloud-overview.component.html b/src/app/components/clouds/cloud-overview/cloud-overview.component.html index 73a29df..c7bc0b9 100644 --- a/src/app/components/clouds/cloud-overview/cloud-overview.component.html +++ b/src/app/components/clouds/cloud-overview/cloud-overview.component.html @@ -1,5 +1,5 @@ - + Clouds @@ -7,27 +7,28 @@ Clouds - - + + - - + + - + - + diff --git a/src/app/components/clouds/cloud-overview/cloud-overview.component.scss b/src/app/components/clouds/cloud-overview/cloud-overview.component.scss index e69de29..b89c6e7 100644 --- a/src/app/components/clouds/cloud-overview/cloud-overview.component.scss +++ b/src/app/components/clouds/cloud-overview/cloud-overview.component.scss @@ -0,0 +1,12 @@ +@import "~bulma/sass/utilities/mixins"; + +.add-button { + min-width: 15em; + min-height: 5em +} + +@include mobile { + .add-button { + width: 95%; + } +} diff --git a/src/app/components/clouds/cloud-overview/cloud-overview.component.ts b/src/app/components/clouds/cloud-overview/cloud-overview.component.ts index 0f34898..64605f3 100644 --- a/src/app/components/clouds/cloud-overview/cloud-overview.component.ts +++ b/src/app/components/clouds/cloud-overview/cloud-overview.component.ts @@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {CloudDataService} from '../../../services/cloud-data.service'; import {Cloud} from 'cloudiator-rest-api'; import {Observable, Subscription} from 'rxjs'; -import {map, tap} from 'rxjs/operators'; +import {map, take, takeUntil, takeWhile, tap} from 'rxjs/operators'; /** * Overview of all clouds given as a set of horizontally flowing cards. diff --git a/src/app/components/clouds/cloud-view/cloud-view.component.html b/src/app/components/clouds/cloud-view/cloud-view.component.html index f8c9e21..9642529 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.html +++ b/src/app/components/clouds/cloud-view/cloud-view.component.html @@ -1,37 +1,53 @@ - - - - - - - {{cloud.api.providerName}} - - - {{cloud.credential.user}} - + + + + + + + + {{cloud.api.providerName}} + + + + + + {{cloud.credential.user}} + + - - + + + + + - + + + + - - - - - - Hardware - - + + + + + + Hardware + + + @@ -73,16 +89,18 @@ [routerLink]="['/hardware']" [queryParams]="{ id: row.id }"> - + + - - - Images - - + + + Images + + + @@ -100,7 +118,7 @@ OS {{row.operatingSystem ? row.operatingSystem.operatingSystemFamily : - ''}} + ''}} @@ -110,8 +128,61 @@ [routerLink]="['/images']" [queryParams]="{ id: row.id }"> - + - + + + + Locations + + + + + + + + + Name + + {{row.name}} + + + + + + Country + + {{row.geoLocation ? row.geoLocation.country : ''}} + + + + + + + City + + {{row.geoLocation ? row.geoLocation.city : ''}} + + + + + + + + + + + + + + + + + diff --git a/src/app/components/clouds/cloud-view/cloud-view.component.scss b/src/app/components/clouds/cloud-view/cloud-view.component.scss index 3183304..a57a4df 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.scss +++ b/src/app/components/clouds/cloud-view/cloud-view.component.scss @@ -1,3 +1,46 @@ +@import "../../../../styles"; + +.header-level { + position: relative; + overflow: hidden; + margin-bottom: 0.5rem; +} + +.level-left { + z-index: 1; +} + +.level-right { + z-index: 1; +} + +.background-logo { + position: absolute; + right: -30px; + bottom: -30px; + z-index: 0; + width: 150px; + opacity: 0.3; +} + +.background-aws-logo { + position: absolute; + right: -20px; + bottom: 0px; + z-index: 0; + width: 150px; + opacity: 0.3; +} + +.background-default-logo { + position: absolute; + right: -20px; + bottom: -10px; + z-index: 0; + width: 100px; + opacity: 0.3; +} + th { background: white; } @@ -7,3 +50,19 @@ th { max-height: 300px; overflow-y: auto; } + +.delete-button { + width: 30px; + height: 30px; + cursor: pointer; + margin-right: 20px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.public-icon { + font-size: 1rem !important; + margin-left: 0.5rem +} diff --git a/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts b/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts index 424f11c..e43445f 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts +++ b/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts @@ -26,7 +26,11 @@ describe('CloudViewComponent', () => { id: '1', }), 'findHardware': of([]), - 'findImages': of([[]]) + 'findImages': of([]), + 'findLocations': of([]), + 'hardwareIsLoading': of(false), + 'imageIsLoading': of(false), + 'locationIsLoading': of(false), }); beforeEach(async(() => { diff --git a/src/app/components/clouds/cloud-view/cloud-view.component.ts b/src/app/components/clouds/cloud-view/cloud-view.component.ts index 45227ca..b06cb1b 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.ts +++ b/src/app/components/clouds/cloud-view/cloud-view.component.ts @@ -1,11 +1,11 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {CloudDataService} from '../../../services/cloud-data.service'; import {ActivatedRoute, Router} from '@angular/router'; -import {Cloud, Hardware, Image} from 'cloudiator-rest-api'; +import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; import {BehaviorSubject, Subscription} from 'rxjs'; import {DialogService} from '../../../app-dialog/services/dialog.service'; -import {DeleteCloudDialogComponent} from '../../../app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; -import {filter, map, take} from 'rxjs/operators'; +import {DeleteCloudDialogComponent} from '../../../app-dialog/dialogs'; +import {distinctUntilChanged, filter, map, take} from 'rxjs/operators'; /** * Represents the View of a Single Cloud @@ -21,11 +21,20 @@ export class CloudViewComponent implements OnInit, OnDestroy { * Datasource for Hardware Table. */ hardwareDataSource: BehaviorSubject; + + hardwareIsLoading$ = this.cloudDataService.hardwareIsLoading(); + /** - * DAtasource for Images Table. + * Datasource for Images Table. */ imagesDataSource: BehaviorSubject; + imageIsLoading$ = this.cloudDataService.imageIsLoading(); + + locationDataSource: BehaviorSubject; + + locationIsLoading$ = this.cloudDataService.locationIsLoading(); + /** * Cloud that is presented. */ @@ -56,15 +65,18 @@ export class CloudViewComponent implements OnInit, OnDestroy { .subscribe(id => this.subscriptions .push(this.cloudDataService.findCloud(id) + .pipe(distinctUntilChanged()) .subscribe(cloud => { this.cloud = cloud; if (cloud) { - // find hardware and image information for given Cloud + // find hardware, image and location information for given Cloud this.subscriptions.push( this.cloudDataService.findHardware(cloud.id).subscribe(hardware => this.hardwareDataSource = new BehaviorSubject(hardware)), this.cloudDataService.findImages(cloud.id).subscribe(images => - this.imagesDataSource = new BehaviorSubject(images)) + this.imagesDataSource = new BehaviorSubject(images)), + this.cloudDataService.findLocations(cloud.id).subscribe(locations => + this.locationDataSource = new BehaviorSubject(locations)) ); } }) @@ -86,9 +98,28 @@ export class CloudViewComponent implements OnInit, OnDestroy { dialogRef.afterClosed().subscribe(result => { if (result) { - this.cloudDataService.deleteCloud(this.cloud.id); - this.router.navigateByUrl('/clouds'); + this.cloudDataService.deleteCloud(this.cloud.id).subscribe( + () => { + this.router.navigateByUrl('/clouds'); + }, + () => { + } + ); } }); } + + backgroundSelector(name) { + switch (this.cloud.api.providerName) { + case 'aws-ec2': + return name === 'aws'; + case 'openstack4j': + case 'openstack-nove': + return name === 'openstack'; + case 'google-compute-engine': + return name === 'gcp'; + default: + return name === 'default'; + } + } } diff --git a/src/app/components/clouds/new-cloud/new-cloud.component.html b/src/app/components/clouds/new-cloud/new-cloud.component.html index b9db2cb..d065d55 100644 --- a/src/app/components/clouds/new-cloud/new-cloud.component.html +++ b/src/app/components/clouds/new-cloud/new-cloud.component.html @@ -19,8 +19,10 @@ Endpoint - + + + @@ -40,7 +42,8 @@ - + @@ -48,7 +51,8 @@ + name="cloud-secret" + autocomplete="new-password"> @@ -56,7 +60,8 @@ Visibility - Private @@ -81,12 +86,15 @@ - Configuration + + Configuration + list of configurations + - diff --git a/src/app/components/editor/editor-graph-view/editor-graph-view.component.html b/src/app/components/editor/editor-graph-view/editor-graph-view.component.html index 98def67..b797fcd 100644 --- a/src/app/components/editor/editor-graph-view/editor-graph-view.component.html +++ b/src/app/components/editor/editor-graph-view/editor-graph-view.component.html @@ -1,34 +1,51 @@ - - - - - Job - - - Nodes - + + + + {{job?.name}} + + + + + Job + + + Schedule + - - - - - - - + + + - - + + + + + + + + + - + + + Nothing to show + + + + + + Editor + diff --git a/src/app/components/editor/editor-graph-view/editor-graph-view.component.scss b/src/app/components/editor/editor-graph-view/editor-graph-view.component.scss index 63349d0..a2b749c 100644 --- a/src/app/components/editor/editor-graph-view/editor-graph-view.component.scss +++ b/src/app/components/editor/editor-graph-view/editor-graph-view.component.scss @@ -1,6 +1,17 @@ -.tab-container { +.view-container { width: 100%; height: 100%; + flex-direction: column; +} + +.view-header { + padding-top: 2rem; +} + +.tab-container { + width: 100%; + //height: 100%; + flex-grow: 3; position: relative; } @@ -9,3 +20,19 @@ height: 100%; position: absolute; } + +.editor-button { + + border-top-right-radius: 1em; + position: absolute; + left: 0; + bottom: 0; + padding: 0.6rem 1rem 0.6rem 0.8rem; +} + +.no-validation-container { + width: 100%; + height: 100%; + justify-content: center; + align-items: center +} diff --git a/src/app/components/editor/editor-graph-view/editor-graph-view.component.ts b/src/app/components/editor/editor-graph-view/editor-graph-view.component.ts index d8ab772..1bd4066 100644 --- a/src/app/components/editor/editor-graph-view/editor-graph-view.component.ts +++ b/src/app/components/editor/editor-graph-view/editor-graph-view.component.ts @@ -2,7 +2,7 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {EditorService} from '../../../services/editor.service'; import {Subscription} from 'rxjs'; import {animate, state, style, transition, trigger} from '@angular/animations'; -import {QueueStatus} from 'cloudiator-rest-api'; +import {Job, QueueStatus} from 'cloudiator-rest-api'; /** * Enum representing TAbs of this view. @@ -59,6 +59,8 @@ export class EditorGraphViewComponent implements OnInit, OnDestroy { */ public isValid = false; + public job: Job; + /** * Status of the Editors Queue object. '' if the Queue is null. * @type {"" | QueueStatus} @@ -89,7 +91,10 @@ export class EditorGraphViewComponent implements OnInit, OnDestroy { /** @ignore */ ngOnInit() { - this.subscriptions.push(this.editorService.getEditorJob().subscribe(job => this.isValid = !!job)); + this.subscriptions.push(this.editorService.getEditorJob().subscribe(job => { + this.isValid = !!job; + this.job = job; + })); this.subscriptions.push(this.editorService.getEditorQueue().subscribe(queue => this.queueStatus = queue ? queue.status : '')); } @@ -109,7 +114,7 @@ export class EditorGraphViewComponent implements OnInit, OnDestroy { /** * Determines if the given Tab is the currentTab. - * @param tab {Tab} Tab to be determined. + * @param tab {Tab} Tab to be determined. * @return {boolean} true if given Tab is currentTab. */ public isTab(tab: Tab): boolean { diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.html b/src/app/components/editor/yaml-editor/yaml-editor.component.html index 7204ece..c3510cd 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -7,7 +7,7 @@ - + @@ -43,8 +43,12 @@ name="filename"> - validate - submit + validate + + submit + @@ -53,9 +57,17 @@ style="height:100%;"> + + + Graphs + + + + - + - + diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.scss b/src/app/components/editor/yaml-editor/yaml-editor.component.scss index a9d9ff2..f2c8181 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.scss +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.scss @@ -12,12 +12,22 @@ padding: 7px 5px; } +.graph-button { + border-top-left-radius: 1em; + position: absolute; + right: 0; + bottom: 0; + padding: 0.6rem 1rem 0.6rem 0.8rem; + z-index: 20; +} + #filename-input { max-width: 300px; background: transparent; color: #{$secondary}; border: 1px #{$grey-darker} solid; } + #filename-input:focus { background: #{$white}; color: #{$black}; diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts b/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts index 38f21fc..a704b10 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts @@ -17,6 +17,7 @@ import {RootStoreModule} from '../../../root-store'; import {EditorGraphViewComponent} from '../editor-graph-view/editor-graph-view.component'; import {NodeGraphComponent} from '../node-graph/node-graph.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {RouterTestingModule} from '@angular/router/testing'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -37,7 +38,8 @@ describe('YamlEditorComponent', () => { HttpClientModule, ApiModule.forRoot(apiConfigFactory), AppDialogModule, - BrowserAnimationsModule + BrowserAnimationsModule, + RouterTestingModule ], providers: [ EditorService, @@ -76,7 +78,7 @@ describe('YamlEditorComponent', () => { spyOn(component.editorService, 'getFilename').and.callThrough(); component.editor.setValue('test'); - expect(component.editorService.setEditorValue).toHaveBeenCalledTimes(1); + expect(component.editorService.setEditorValue).toHaveBeenCalledTimes(2); expect(component.editorService.getEditorValue).not.toHaveBeenCalled(); component.editorService.getEditorValue() .pipe(take(1)) diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.ts b/src/app/components/editor/yaml-editor/yaml-editor.component.ts index 3736a28..e77e56b 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -1,4 +1,4 @@ -import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; +import {AfterViewInit, Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core'; import * as ace from 'brace'; import {Editor} from 'brace'; import 'brace/mode/yaml'; @@ -8,9 +8,10 @@ import {ToastService} from '../../../app-dialog/services/toast.service'; import {ToastType} from '../../../app-dialog/model/toast'; import {JobDataService} from '../../../services/job-data.service'; import {EditorService} from '../../../services/editor.service'; -import {take} from 'rxjs/operators'; +import {map, take} from 'rxjs/operators'; import {ProcessDataService} from '../../../services/process-data.service'; import {Subscription} from 'rxjs'; +import {ActivatedRoute, Router, RoutesRecognized} from '@angular/router'; /** * Main View of the Editor View, Hosting the editor and the Graph View. @@ -57,6 +58,8 @@ export class YamlEditorComponent implements OnInit, OnDestroy { */ public isSubmitting = false; + public showGraphs = this.activatedRoute.data.pipe(map(data => data.graphs)); + /** * Ace editor theme * @type {string} @@ -73,6 +76,7 @@ export class YamlEditorComponent implements OnInit, OnDestroy { highlightActiveLine: false, fadeFoldWidgets: true, showLineNumbers: true, + scrollPastEnd: 0.5, fontSize: 14, tabSize: 2, wrap: true, @@ -90,11 +94,14 @@ export class YamlEditorComponent implements OnInit, OnDestroy { public jobDataService: JobDataService, public processDataService: ProcessDataService, public toastService: ToastService, - public yamlDataService: YamlDataService) { + public yamlDataService: YamlDataService, + private activatedRoute: ActivatedRoute, + private router: Router) { } /** @ignore */ ngOnInit() { + this.editor = ace.edit('editor'); this.editor.getSession().setMode('ace/mode/yaml'); this.editor.setTheme(`ace/theme/${this.theme}`); @@ -105,11 +112,19 @@ export class YamlEditorComponent implements OnInit, OnDestroy { this.editorService.setEditorValue(this.editor.getValue()); }); + // dirty hack to fix wrong wrapping of editor content in mobile view + setTimeout(() => { + this.editor.resize(true); + }, 0); + - this.editorService.getEditorValue().pipe(take(1)).subscribe(value => this.editor.setValue(value)); + this.editorService.getEditorValue().pipe(take(1)).subscribe(value => { + this.editor.setValue(value); + this.editor.clearSelection(); + }); this.editorService.getFilename().pipe(take(1)).subscribe(filename => this._filename = filename); - // Set is valid if EditorJob is not null + // Set isValid if EditorJob is not null this.subscriptions.push(this.editorService.getEditorJob().subscribe(job => this.isValid = !!job)); } @@ -132,7 +147,10 @@ export class YamlEditorComponent implements OnInit, OnDestroy { onUploadChange(event) { this.editorService.uploadFile(event.target.files) .then(() => { - this.editorService.getEditorValue().pipe(take(1)).subscribe(value => this.editor.setValue(value)); + this.editorService.getEditorValue().pipe(take(1)).subscribe(value => { + this.editor.setValue(value); + this.editor.clearSelection(); + }); this.editorService.getFilename().pipe(take(1)).subscribe(filename => this._filename = filename); }) .catch(); @@ -149,7 +167,6 @@ export class YamlEditorComponent implements OnInit, OnDestroy { // job is valid and stored this.editorService.setEditorJob(job); this.editorService.setEditorQueue(null); - this.isValidating = false; }, err => { this.isValidating = false; @@ -164,7 +181,9 @@ export class YamlEditorComponent implements OnInit, OnDestroy { } else { this.toastService.show({text: 'Unexpected Error', type: ToastType.DANGER}, true); } - }); + }, + () => + this.isValidating = false); } /** @@ -175,12 +194,13 @@ export class YamlEditorComponent implements OnInit, OnDestroy { this.processDataService.submitEditorSchedule() .pipe(take(1)) .subscribe(queue => { - this.editorService.setEditorQueue(queue); - this.isSubmitting = false; - }, - err => { - this.isSubmitting = false; - this.toastService.show({text: 'Unexpected Error', type: ToastType.DANGER}, true); - }); + this.editorService.setEditorQueue(queue); + }, + err => { + this.isSubmitting = false; + this.toastService.show({text: 'Unexpected Error', type: ToastType.DANGER}, true); + }, + () => + this.isSubmitting = false); } } diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.html b/src/app/components/editor/yaml-graph/yaml-graph.component.html index 2814da6..7f40f5c 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.html +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.html @@ -1 +1,6 @@ - + + + + + + diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.scss b/src/app/components/editor/yaml-graph/yaml-graph.component.scss index e69de29..d715065 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.scss +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.scss @@ -0,0 +1,9 @@ +.loading-container { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + justify-content: center; + align-items: center +} diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.ts b/src/app/components/editor/yaml-graph/yaml-graph.component.ts index 364f6a9..f94f9dd 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -12,10 +12,12 @@ import {EditorService} from '../../../services/editor.service'; }) export class YamlGraphComponent implements OnInit { + public isLoading = false; + /** * Graph Style. */ - readonly style = [{ + readonly style: any = [{ 'selector': 'node', 'style': { 'width': '50%', @@ -33,15 +35,13 @@ export class YamlGraphComponent implements OnInit { }, { 'selector': 'edge', 'style': { + 'curve-style': 'bezier', 'opacity': '0.9', 'line-color': '#92acbe', 'width': '5px', - 'overlay-padding': '3px' - } - }, { - 'selector': 'edge.unhighlighted', - 'style': { - 'opacity': '0.05' + 'overlay-opacity': '0', + 'source-arrow-shape': 'triangle-backcurve', + 'source-arrow-color': '#92acbe' } }]; @@ -96,13 +96,20 @@ export class YamlGraphComponent implements OnInit { this.cy.center(); }); - this.editorService.getEditorGraph().subscribe(graphData => { - if (this.cy && graphData) { - this.cy.remove(this.cy.$(() => true)); - this.cy.add(graphData); - this.cy.layout(this.circLayout).run(); + this.isLoading = true; + this.editorService.getEditorGraph().subscribe( + graphData => { + if (this.cy && graphData) { + this.cy.remove(this.cy.$(() => true)); + this.cy.add(graphData); + this.cy.layout(this.circLayout).run(); + } + this.isLoading = false; + }, + () => { + this.isLoading = false; } - }); + ); } } diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index ef3b492..84cf348 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -49,13 +49,22 @@ export class LoginComponent implements OnInit { onLogin() { this.isLoggingIn = true; this.authService.logIn(this.login).subscribe(success => { - this.isLoggingIn = false; - if (success) { - this.router.navigate(['/']); - } else { + this.isLoggingIn = false; + if (success) { + this.router.navigate(['/']); + } else { + this.logInError = true; + } + }, + () => { + this.isLoggingIn = false; + this.logInError = true; + }, + () => { + this.isLoggingIn = false; this.logInError = true; } - }); + ); } } diff --git a/src/app/components/overview-tables/hardware-overview/hardware-overview.component.ts b/src/app/components/overview-tables/hardware-overview/hardware-overview.component.ts index 19a1310..a2a7263 100644 --- a/src/app/components/overview-tables/hardware-overview/hardware-overview.component.ts +++ b/src/app/components/overview-tables/hardware-overview/hardware-overview.component.ts @@ -1,11 +1,8 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; -import {BehaviorSubject, combineLatest, Subscription} from 'rxjs'; import {Hardware} from 'cloudiator-rest-api'; import {CloudDataService} from '../../../services/cloud-data.service'; -import {FormControl} from '@angular/forms'; import {ActivatedRoute} from '@angular/router'; import {OverviewTableComponent} from '../overview-table.component'; -import {map} from 'rxjs/operators'; /** * Overview Component showing available Hardware. @@ -24,13 +21,16 @@ export class HardwareOverviewComponent extends OverviewTableComponent name: {value: 'Name'}, cores: {value: 'Cores'}, ram: {value: 'Ram'}, - disk: {value: 'Disk'} + disk: {value: 'Disk'}, + providerId: {value: 'ProviderId'} }; this.initialSortKey = 'cores'; this.isLoading$ = cloudDataService.hardwareIsLoading(); this.filter = (v, t) => cloudDataService.filterHardware(v, t); this.data = cloudDataService.findHardware(); + + this.fetchFn = () => cloudDataService.fetchHardware(); } } diff --git a/src/app/components/overview-tables/images-overview/images-overview.component.ts b/src/app/components/overview-tables/images-overview/images-overview.component.ts index 33aa9fd..719a2c7 100644 --- a/src/app/components/overview-tables/images-overview/images-overview.component.ts +++ b/src/app/components/overview-tables/images-overview/images-overview.component.ts @@ -18,16 +18,18 @@ export class ImagesOverviewComponent extends OverviewTableComponent imple super(activatedRoute, cloudDataService); this.title = 'Images'; this.columns = { - providerId: {value: 'provider ID'}, name: {value: 'Name'}, os: { value: 'OS', selectionFn: (v: Image) => v.operatingSystem ? v.operatingSystem.operatingSystemFamily : '' - } + }, + providerId: {value: 'provider ID'} }; this.initialSortKey = ''; this.isLoading$ = cloudDataService.imageIsLoading(); this.filter = (v, t) => cloudDataService.filterImages(v, t); this.data = cloudDataService.findImages(); + + this.fetchFn = () => cloudDataService.fetchImages(); } } diff --git a/src/app/components/overview-tables/locations-overview/locations-overview.component.ts b/src/app/components/overview-tables/locations-overview/locations-overview.component.ts index f206338..8038ac8 100644 --- a/src/app/components/overview-tables/locations-overview/locations-overview.component.ts +++ b/src/app/components/overview-tables/locations-overview/locations-overview.component.ts @@ -36,5 +36,7 @@ export class LocationsOverviewComponent extends OverviewTableComponent this.isLoading$ = cloudDataService.locationIsLoading(); this.filter = (v, t) => cloudDataService.filterLocations(v, t); this.data = cloudDataService.findLocations(); + + this.fetchFn = () => cloudDataService.fetchLocations(); } } diff --git a/src/app/components/overview-tables/overview-table.component.html b/src/app/components/overview-tables/overview-table.component.html index 00d8cfb..75ba44d 100644 --- a/src/app/components/overview-tables/overview-table.component.html +++ b/src/app/components/overview-tables/overview-table.component.html @@ -1,5 +1,5 @@ - + {{title}} @@ -14,12 +14,18 @@ {{title}} - - - + + + + - + + + + + @@ -34,8 +40,8 @@ {{title}} {{columns[field].selectionFn - ? columns[field].selectionFn(row) - : row[field]}} + ? columns[field].selectionFn(row) + : row[field]}} diff --git a/src/app/components/overview-tables/overview-table.component.scss b/src/app/components/overview-tables/overview-table.component.scss index 9ef71d6..fbb6503 100644 --- a/src/app/components/overview-tables/overview-table.component.scss +++ b/src/app/components/overview-tables/overview-table.component.scss @@ -15,7 +15,7 @@ } .searchbar { - max-width: 500px + width: 500px } .table-viewport { @@ -59,6 +59,10 @@ tr { } } +.fetch-button { + margin-right: 0.5rem +} + @include mobile { .section { padding: 0; @@ -66,7 +70,14 @@ tr { .searchbar { width: 100%; - max-width: none; + max-width: calc(100vw - 2rem) !important; + } + + .fetch-button { + position: absolute; + right: 0; + //top: 2.8rem; + z-index: 2; } .table-viewport { @@ -78,4 +89,3 @@ tr { border-radius: 0; } } - diff --git a/src/app/components/overview-tables/overview-table.component.ts b/src/app/components/overview-tables/overview-table.component.ts index 0e2a22a..1eee6a3 100644 --- a/src/app/components/overview-tables/overview-table.component.ts +++ b/src/app/components/overview-tables/overview-table.component.ts @@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms'; import {ActivatedRoute} from '@angular/router'; import {CloudDataService} from '../../services/cloud-data.service'; import {TableColumns} from '../../model/TableColumns'; +import {take} from 'rxjs/operators'; @Component({ selector: 'app-overview-table', @@ -25,6 +26,8 @@ export class OverviewTableComponent implements OnInit, OnDestroy { data: Observable = of([]); + fetchFn: () => void; + /** * Datasource for table. * @type {BehaviorSubject} @@ -127,4 +130,8 @@ export class OverviewTableComponent implements OnInit, OnDestroy { this.sortDirection.next('asc'); } + fetchData() { + this.fetchFn(); + } + } diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html index 52e57cb..a4eca87 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html @@ -2,8 +2,8 @@ [@sheetOpenClose]="sheetOpenClose" (swipedown)="sheetOpenClose = 'closed'" (swipeup)="sheetOpenClose = 'open'" + content="yes" (click)="onSheetClick()"> - @@ -18,33 +18,62 @@ + {{selected?.data.state.toLowerCase()}} - - - - + + + + + + + + + + + + + - - - process id: {{selected?.data.id}} - - - ip adress: {{selected?.data.ip}} - - - - - - - - - edge - - - - source: {{selected.data.source.task}} - target: {{selected.data.target.task}} + + + + process id: + {{selected?.data.id}} + + + + + + ip addresses: + + + + + {{ip.value}} + + + + + + + + + + + + + + + + process type: + + + {{selected?.process?.type}} + + + diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss index b35b34c..ced4a65 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss @@ -1,11 +1,16 @@ @import "~bulma/sass/utilities/mixins"; +td { + border: none !important; +} + .bottom-sheet { position: absolute; padding: 1rem; width: 100%; height: 20em; bottom: 0; + user-select: text !important; } .bottom-sheet-header { diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts index 85ff70c..6a56454 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts @@ -2,6 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SchedulesBottomSheetComponent } from './schedules-bottom-sheet.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {NodeService} from 'cloudiator-rest-api'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {RootStoreModule} from '../../../root-store'; describe('SchedulesBottomSheetComponent', () => { let component: SchedulesBottomSheetComponent; @@ -11,7 +15,13 @@ describe('SchedulesBottomSheetComponent', () => { TestBed.configureTestingModule({ declarations: [ SchedulesBottomSheetComponent ], imports: [ - BrowserAnimationsModule + BrowserAnimationsModule, + AppDialogModule, + HttpClientTestingModule, + RootStoreModule + ], + providers: [ + NodeService ] }) .compileComponents(); diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts index e24dff2..faa49ed 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts @@ -1,5 +1,12 @@ import {Component, Input, OnInit} from '@angular/core'; import {animate, animateChild, group, query, state, style, transition, trigger} from '@angular/animations'; +import {CloudiatorProcess, ClusterProcess, IpAddress, IpAddressType, LoginCredential, Node, SingleProcess} from 'cloudiator-rest-api'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ScheduleDiagnosticDialogComponent, SshConsoleDialogComponent} from '../../../app-dialog/dialogs'; +import {NodeDataService} from '../../../services/node-data.service'; +import {Observable} from 'rxjs'; +import {map, tap} from 'rxjs/operators'; +import {SshService} from '../../../services/ssh.service'; /** * Bottomsheet component of the ScheduleView. @@ -30,19 +37,19 @@ import {animate, animateChild, group, query, state, style, transition, trigger} group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.2s')]) + animate('0.2s ease-out')]) ]), transition('* => open', [ group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.25s')]) + animate('0.25s ease-out')]) ]), transition('open => hidden', [ group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.2s')]) + animate('0.2s ease-out')]) ]) ]), trigger('buttonOpenClose', [ @@ -96,14 +103,30 @@ export class SchedulesBottomSheetComponent implements OnInit { */ @Input() set selected(value: Selected) { this._selected = value; + console.log(this._selected); // open/hide bottomsheet depending if something is selected if (value) { this.sheetOpenClose = 'open'; + + if (value.process) { + if (isSingleProcess(value.process)) { + this.node$ = this.nodeDataService.getNode(value.process.node) + .pipe(map(n => [n]), tap(console.log)); + // this.dialogService.open(SshConsoleDialogComponent, { data: node}); + } else { + // TODO: Cluster process implementation + } + } } else { this.sheetOpenClose = 'hidden'; + this.node$ = null; } } + public node$: Observable; + + public sshIsAvailable$ = this.sshService.sshIsAvailable(); + /** * containes visibility state of bottom scheet * @type {string} @@ -111,7 +134,9 @@ export class SchedulesBottomSheetComponent implements OnInit { sheetOpenClose: 'open' | 'closed' | 'hidden' = this.selected ? 'open' : 'hidden'; /** @ignore */ - constructor() { + constructor(private dialogService: DialogService, + private nodeDataService: NodeDataService, + private sshService: SshService) { } /** @ignore */ @@ -129,6 +154,23 @@ export class SchedulesBottomSheetComponent implements OnInit { onSheetClick() { } + openDiagnostic() { + this.dialogService.open(ScheduleDiagnosticDialogComponent, {data: this.selected.process}); + } + + isPublicIp(ip: IpAddress) { + return ip.ipAddressType === IpAddressType.PUBLICIP; + } + + onConnect(name: string, ip: IpAddress, credentials: LoginCredential) { + this.dialogService.open(SshConsoleDialogComponent, { + data: { + name: name, + ipAddress: ip, + loginCredential: credentials + } + }); + } } /** @@ -140,8 +182,14 @@ export interface Selected { */ data: any; + process: CloudiatorProcess; + /** * type of Object */ group: 'nodes' | 'edges'; } + +export function isSingleProcess(process: SingleProcess | ClusterProcess): process is SingleProcess { + return (process).node !== undefined; +} diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.html b/src/app/components/schedules/schedules-overview/schedules-overview.component.html index 246f23e..3edaba0 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.html +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.html @@ -2,7 +2,7 @@ - + Schedules @@ -20,32 +20,41 @@ Schedules + - - - - - - + + + + + + + - - - - {{view.job?.name}} - - - - + + + {{view.job?.name}} + + + + + + + + No Schedules + + - + - + diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.scss b/src/app/components/schedules/schedules-overview/schedules-overview.component.scss index a7d9a78..69f5216 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.scss +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.scss @@ -13,6 +13,13 @@ height: 100%; } +.empty-list { + width: 100%; + height: 100%; + justify-content: center; + align-items: center +} + .list-container { display: flex; flex-direction: column; diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.ts b/src/app/components/schedules/schedules-overview/schedules-overview.component.ts index 4da1923..3c08538 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.ts +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.ts @@ -1,12 +1,10 @@ -import {Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {ProcessDataService} from '../../../services/process-data.service'; -import {merge, Observable, of, Subscription, zip} from 'rxjs'; +import {Observable, Subscription} from 'rxjs'; import {ScheduleView} from '../../../model/ScheduleView'; import {JobDataService} from '../../../services/job-data.service'; -import {delay, flatMap, map, mergeAll, mergeMap, tap, zipAll} from 'rxjs/operators'; -import {ActivatedRoute, Router} from '@angular/router'; -import * as testData from 'testing/test-data'; -import {flatten} from '@angular/compiler'; +import {map} from 'rxjs/operators'; +import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; /** * Overview of Schedules. Hosts a list containing all Schedules and the SchedulesView. @@ -76,6 +74,22 @@ export class SchedulesOverviewComponent implements OnInit, OnDestroy { }) ); + + this.subscriptions.push( + this.router.events.subscribe((e: any) => { + if (e instanceof NavigationEnd) { + this.route.queryParamMap + .pipe( + map(paramsMap => paramsMap.get('id') || undefined) + ) + .subscribe(id => { + this.activeViewId = id; + this.updateActiveScheduleView(); + }); + } + }) + ); + // composing scheduleViews this.subscriptions.push( this.processDataService.getSchedules() diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.html b/src/app/components/schedules/schedules-view/schedules-view.component.html index 4132963..651cd3d 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.html +++ b/src/app/components/schedules/schedules-view/schedules-view.component.html @@ -1,15 +1,19 @@ - + - + + + + Nothing to show yet + (state: {{scheduleView?.schedule?.state}}) - + @@ -22,4 +26,10 @@ {{scheduleView?.job?.name}} + + + + + + diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.scss b/src/app/components/schedules/schedules-view/schedules-view.component.scss index 9e492ca..4208363 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.scss +++ b/src/app/components/schedules/schedules-view/schedules-view.component.scss @@ -11,6 +11,29 @@ //border: 1.5px solid $white-ter; } +.delete-button { + width: 30px; + height: 30px; + cursor: pointer; + position: absolute; + top: 10px; + right: 10px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.center-container { + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + @include tablet { .view-header { padding: 0.6rem 0.8rem; diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts b/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts index 007ce24..cd35189 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts +++ b/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts @@ -8,6 +8,7 @@ import {HttpClientModule} from '@angular/common/http'; import {RootStoreModule} from '../../../root-store'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; import {SchedulesBottomSheetComponent} from '../schedules-bottom-sheet/schedules-bottom-sheet.component'; +import {RouterTestingModule} from '@angular/router/testing'; describe('SchedulesViewComponent', () => { let component: SchedulesViewComponent; @@ -24,6 +25,8 @@ describe('SchedulesViewComponent', () => { BrowserAnimationsModule, ApiModule.forRoot(apiConfigFactory), HttpClientModule, + AppDialogModule, + RouterTestingModule, AppDialogModule ] }) diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.ts b/src/app/components/schedules/schedules-view/schedules-view.component.ts index 9be58d0..f8d00ce 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.ts +++ b/src/app/components/schedules/schedules-view/schedules-view.component.ts @@ -1,15 +1,15 @@ -import { - Component, - Input, - OnChanges, - OnInit, - SimpleChanges -} from '@angular/core'; +import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {ScheduleView} from '../../../model/ScheduleView'; import * as cytoscape from 'cytoscape'; import {ProcessDataService} from '../../../services/process-data.service'; -import {map, take} from 'rxjs/operators'; -import * as testData from 'testing/test-data'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; +import {ToastType} from '../../../app-dialog/model/toast'; +import {NavigationEnd, Router} from '@angular/router'; +import {DeleteScheduleDialogComponent} from '../../../app-dialog/dialogs/delete-schedule-dialog/delete-schedule-dialog.component'; +import {CloudiatorProcess} from 'cloudiator-rest-api/model/cloudiatorProcess'; +import {Stylesheet} from 'cytoscape'; +import Edge = cytoscape.Css.Edge; /** * View of a selected Schedule, containing a Cytoscape and a bottomsheet for further information @@ -45,48 +45,59 @@ export class SchedulesViewComponent implements OnInit, OnChanges { /** * Style of graph. */ - readonly style = [{ - 'selector': 'node', - 'style': { - 'width': '50%', - 'height': '50%', - 'content': 'data(task)', - 'font-size': '12px', - 'text-valign': 'center', - 'text-halign': 'center', - 'background-color': '#00447a', - 'text-outline-color': '#00447a', - 'text-outline-width': '1px', - 'text-wrap': 'wrap', - 'color': '#fff', - 'z-index': '10' - } - }, { - 'selector': 'node:selected', - 'style': { - 'background-color': 'lightgray', - 'text-outline-color': 'gray' - } - }, { - 'selector': 'edge', - 'style': { - 'opacity': '0.9', - 'line-color': '#92acbe', - 'width': '5px', - 'overlay-padding': '3px' - } - }, { - 'selector': 'edge:active', - 'style': { - // 'line-color': 'white', - // 'border-color': 'transparent' - } - }, { - 'selector': 'edge:selected', - 'style': { - 'line-color': 'lightgray' - } - }]; + readonly style: any = [ + { + 'selector': 'node', + 'style': { + 'shape': 'ellipse', + 'width': '50', + 'height': '50', + 'content': 'data(task)', + 'font-size': '12px', + 'text-valign': 'center', + 'text-halign': 'center', + 'background-color': '#00447a', + 'text-outline-color': '#00447a', + 'text-outline-width': '1px', + 'text-wrap': 'wrap', + 'color': '#fff', + 'z-index': '10' + } + }, { + 'selector': 'node:selected', + 'style': { + 'background-blacken': '-0.2' + } + }, { + 'selector': 'edge', + 'style': { + 'curve-style': 'bezier', + 'opacity': '0.9', + 'line-color': '#92acbe', + 'width': '5px', + 'overlay-opacity': '0', + 'source-arrow-shape': 'triangle-backcurve', + 'source-arrow-color': '#92acbe' + } + }, { + 'selector': '.running', + 'style': { + 'background-color': 'hsl(141, 71%, 48%)', + 'text-outline-color': 'hsl(141, 71%, 48%)', + } + }, { + 'selector': '.pending', + 'style': { + 'background-color': 'hsl(48, 100%, 67%)', + 'text-outline-color': 'hsl(48, 100%, 67%)', + } + }, { + 'selector': '.error', + 'style': { + 'background-color': 'hsl(348, 100%, 61%)', + 'text-outline-color': 'hsl(348, 100%, 61%)' + } + }]; /** * Graph Sorter. @@ -114,6 +125,8 @@ export class SchedulesViewComponent implements OnInit, OnChanges { */ readonly minZoom = 0.5; + noData = true; + /** * Cytoscape object */ @@ -134,21 +147,17 @@ export class SchedulesViewComponent implements OnInit, OnChanges { this.cy.center(); this.cy.panBy({x: 0, y: -100}); }); - this.cy.on('select', 'edge', event => { - const target = event.target._private; - this.selected = { - group: 'edges', - data: { - id: target.data.id, - source: target.source._private.data, - target: target.target._private.data - } - }; - }); this.cy.on('select', 'node', event => { - this.selected = { + const data = event.target._private.data; + // find corresponding process of data + const process = this.scheduleView.schedule.processes ? + this.scheduleView.schedule.processes.find(p => p.id === data.id) + : null; + + this.selected = { group: 'nodes', - data: event.target._private.data + process: process, + data: data }; }); this.cy.on('unselect', () => { @@ -161,7 +170,10 @@ export class SchedulesViewComponent implements OnInit, OnChanges { } /** @ignore */ - constructor(private processDataService: ProcessDataService) { + constructor(private processDataService: ProcessDataService, + private dialogSerivce: DialogService, + private toastService: ToastService, + private router: Router) { } /** @ignore */ @@ -201,11 +213,34 @@ export class SchedulesViewComponent implements OnInit, OnChanges { .subscribe(graph => { // timeout as hack to fix wrong positioning of graph when data arrives to early in mobile view setTimeout(() => { + this.noData = graph.nodes.length === 0; this.cy.remove(this.cy.$(() => true)); this.cy.add(graph); this.cy.layout(this.circLayout).run(); this.isLoading = false; this.cy.panBy({x: 0, y: -100}); + this.cy.elements('node').forEach(ele => { + const state: CloudiatorProcess.StateEnum = ele._private.data.state; + switch (state) { + case 'PENDING': + ele.addClass('pending'); + break; + case 'ERROR': + ele.addClass('error'); + break; + case 'DELETED': + ele.addClass('deleted'); + break; + case 'FINISHED': + ele.addClass('finished'); + break; + case 'RUNNING': + ele.addClass('running'); + break; + default: + break; + } + }); }, 0); }, () => { @@ -213,4 +248,33 @@ export class SchedulesViewComponent implements OnInit, OnChanges { } ); } + + onDelete() { + this.dialogSerivce.open(DeleteScheduleDialogComponent, { + data: { + scheduleName: this.scheduleView.job.name + } + }) + .afterClosed() + .subscribe(confirmation => { + if (confirmation) { + this.processDataService.deleteSchedule(this.scheduleView.schedule.id) + .subscribe( + () => { + this.router.navigateByUrl('/schedules'); + }, + err => { + console.error(err); + this.toastService.show({text: 'Could not delete Schedule', type: ToastType.DANGER}); + }); + } + }); + } + + updateGraph(id: string) { + if (this.scheduleView && this.scheduleView.schedule.id === id) { + this.selected = null; + this.updategraph(); + } + } } diff --git a/src/app/guards/http-error.interceptor.spec.ts b/src/app/guards/http-error.interceptor.spec.ts index 00269eb..50bcecf 100644 --- a/src/app/guards/http-error.interceptor.spec.ts +++ b/src/app/guards/http-error.interceptor.spec.ts @@ -79,11 +79,11 @@ describe('HttpErrorInterceptor', () => { return new Promise(async resolve => { http.get('/').subscribe( () => fail('request should fail'), - () => fail('error should have been handled earlier'), () => { httpMock.verify(); resolve(); - } + }, + () => fail('request should error') ); const httpRequest = httpMock.expectOne('/'); diff --git a/src/app/guards/http-error.interceptor.ts b/src/app/guards/http-error.interceptor.ts index a5112df..67bc296 100644 --- a/src/app/guards/http-error.interceptor.ts +++ b/src/app/guards/http-error.interceptor.ts @@ -1,6 +1,6 @@ import {Injectable} from '@angular/core'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; -import {catchError, tap} from 'rxjs/operators'; +import {catchError} from 'rxjs/operators'; import {Observable, of, throwError} from 'rxjs'; import {AuthService} from '../services/auth.service'; import {ToastService} from '../app-dialog/services/toast.service'; @@ -28,16 +28,21 @@ export class HttpErrorInterceptor implements HttpInterceptor { console.log('access denied: Log Out...'); this.toastService.show({text: 'Session timeout', type: ToastType.WARNING}); this.authService.logOut(); + return of(null); break; case 504: this.toastService.show({text: 'Gateway timeout', type: ToastType.DANGER}); break; + case 0: + this.toastService.show({text: 'Connection refused', type: ToastType.DANGER}); + break; default: return throwError(err); } - return of(null); + return throwError(err); } + console.log('error status') this.toastService.show({text: 'Application Error', type: ToastType.DANGER}); return of(null); })); diff --git a/src/app/model/EditorStorageState.ts b/src/app/model/EditorStorageState.ts new file mode 100644 index 0000000..ea04ef0 --- /dev/null +++ b/src/app/model/EditorStorageState.ts @@ -0,0 +1,6 @@ +export interface EditorStorageState { + editorValue: string; + filename: string; + jobId: string; + queueId: string; +} diff --git a/src/app/model/RuntimeConfig.ts b/src/app/model/RuntimeConfig.ts index d3057d8..d3a9db1 100644 --- a/src/app/model/RuntimeConfig.ts +++ b/src/app/model/RuntimeConfig.ts @@ -14,6 +14,8 @@ export interface RuntimeConfig { * auth key of the api if single AuthMode is used. */ xApiKey: string; + + sshTunnelPath: string | null; } /** diff --git a/src/app/root-store/cloud-data-store/reducer.ts b/src/app/root-store/cloud-data-store/reducer.ts index 8553120..55c5be9 100644 --- a/src/app/root-store/cloud-data-store/reducer.ts +++ b/src/app/root-store/cloud-data-store/reducer.ts @@ -44,6 +44,6 @@ export function cloudDataReducer(state = initialState, action: cloudActions.All) locationIsLoading: action.isLoading }; default: - return initialState; + return state; } } diff --git a/src/app/root-store/editor-store/actions.ts b/src/app/root-store/editor-store/actions.ts index a6b8db7..f85c3ee 100644 --- a/src/app/root-store/editor-store/actions.ts +++ b/src/app/root-store/editor-store/actions.ts @@ -1,7 +1,9 @@ import {Action} from '@ngrx/store'; import {Job, Queue} from 'cloudiator-rest-api'; +import {State} from './state'; +export const SET_STATE = '[Editor] set State'; export const SET_VALUE = '[Editor] set Value'; export const SET_FILENAME = '[Editor] set Filename'; export const SET_EDITOR_GRAPH = '[Editor] set editorGraph'; @@ -10,6 +12,13 @@ export const SET_EDITOR_QUEUE = '[Editor] set editorQueue'; export const UPLOAD_FILE = '[Editor] upload File'; export const CHANGES_SAVED = '[Editor] changes saved'; +export class SetEditorState implements Action { + readonly type = SET_STATE; + + constructor(public state: State) { + } +} + export class SetValueAction implements Action { readonly type = SET_VALUE; @@ -60,4 +69,12 @@ export class ChangesSavedAction implements Action { } } -export type All = SetValueAction | SetFilenameAction | SetEditorGraphAction | SetEditorJobAction | SetEditorQueueAction | UploadFileAction | ChangesSavedAction; +export type All = + SetEditorState + | SetValueAction + | SetFilenameAction + | SetEditorGraphAction + | SetEditorJobAction + | SetEditorQueueAction + | UploadFileAction + | ChangesSavedAction; diff --git a/src/app/root-store/editor-store/reducer.ts b/src/app/root-store/editor-store/reducer.ts index 8f90749..3b48445 100644 --- a/src/app/root-store/editor-store/reducer.ts +++ b/src/app/root-store/editor-store/reducer.ts @@ -3,6 +3,8 @@ import {initialState, State} from './state'; export function editorReducer(state = initialState, action: editorActions.All): State { switch (action.type) { + case editorActions.SET_STATE: + return action.state; case editorActions.SET_VALUE: return {...state, value: action.value, unsavedChanges: action.value !== state.originalValue}; case editorActions.SET_FILENAME: diff --git a/src/app/root-store/editor-store/selectors.ts b/src/app/root-store/editor-store/selectors.ts index 092c7e3..a5fc050 100644 --- a/src/app/root-store/editor-store/selectors.ts +++ b/src/app/root-store/editor-store/selectors.ts @@ -1,6 +1,15 @@ import {State} from './state'; import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; +import {EditorStorageState} from '../../model/EditorStorageState'; +const getStorageState = (state: State): EditorStorageState => { + return { + editorValue: state.value, + filename: state.filename, + jobId: state.editorJob ? state.editorJob.id : undefined, + queueId: state.editorQueue ? state.editorQueue.id : undefined + }; +}; const getValue = (state: State): string => state.value; const getFilename = (state: State): string => state.filename; const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; @@ -11,6 +20,8 @@ const getEditorQueue = (state: State): any | null => state.editorQueue; export const selectEditorState: MemoizedSelector = createFeatureSelector('editor'); +export const selectStorageState: MemoizedSelector = + createSelector(selectEditorState, getStorageState); export const selectValue: MemoizedSelector = createSelector(selectEditorState, getValue); export const selectFilename: MemoizedSelector diff --git a/src/app/root-store/root-store.module.ts b/src/app/root-store/root-store.module.ts index 0c5a8a8..e0aa3d4 100644 --- a/src/app/root-store/root-store.module.ts +++ b/src/app/root-store/root-store.module.ts @@ -1,18 +1,26 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; import {StoreModule} from '@ngrx/store'; -import { RuntimeConfigStoreModule } from './runtime-config-store/runtime-config-store.module'; -import { CloudDataStoreModule } from './cloud-data-store/cloud-data-store.module'; -import { EditorStoreModule } from './editor-store/editor-store.module'; -import { JobDataStoreModule } from './job-data-store/job-data-store.module'; -import { AuthStoreModule } from './auth-store/auth-store.module'; -import { ProcessDataStoreModule } from './process-data-store/process-data-store.module'; +import {RuntimeConfigStoreModule} from './runtime-config-store/runtime-config-store.module'; +import {CloudDataStoreModule} from './cloud-data-store/cloud-data-store.module'; +import {EditorStoreModule} from './editor-store/editor-store.module'; +import {JobDataStoreModule} from './job-data-store/job-data-store.module'; +import {AuthStoreModule} from './auth-store/auth-store.module'; +import {ProcessDataStoreModule} from './process-data-store/process-data-store.module'; @NgModule({ declarations: [], imports: [ CommonModule, - StoreModule.forRoot({}), + StoreModule.forRoot({}, { + runtimeChecks: { + strictStateImmutability: false, + strictActionImmutability: false, + strictStateSerializability: false, + strictActionSerializability: false, + }, + } + ), RuntimeConfigStoreModule, CloudDataStoreModule, EditorStoreModule, @@ -21,4 +29,5 @@ import { ProcessDataStoreModule } from './process-data-store/process-data-store. ProcessDataStoreModule ] }) -export class RootStoreModule { } +export class RootStoreModule { +} diff --git a/src/app/root-store/runtime-config-store/selectors.ts b/src/app/root-store/runtime-config-store/selectors.ts index bc0ea35..dacce94 100644 --- a/src/app/root-store/runtime-config-store/selectors.ts +++ b/src/app/root-store/runtime-config-store/selectors.ts @@ -5,6 +5,7 @@ import {State} from './state'; const getApiPath = (state: State): string => state.runtimeConfig.apiPath; const getXApiKey = (state: State): string => state.runtimeConfig.xApiKey; const getAuthMode = (state: State): AuthMode => state.runtimeConfig.authMode; +const getSshTunnelPath = (state: State): string => state.runtimeConfig.sshTunnelPath; const getRuntimeConfig = (state: State): RuntimeConfig => state.runtimeConfig; const isFetched = (state: State): boolean => state.isFetched; @@ -18,6 +19,8 @@ export const selectAuthMode: MemoizedSelector = createSelector(selectRuntimeConfigState, getAuthMode); export const selectXApiKey: MemoizedSelector = createSelector(selectRuntimeConfigState, getXApiKey); +export const selectSshTunnelPath: MemoizedSelector + = createSelector(selectRuntimeConfigState, getSshTunnelPath); export const selectConfig: MemoizedSelector = createSelector(selectRuntimeConfigState, getRuntimeConfig); export const selectIsFetched: MemoizedSelector diff --git a/src/app/root-store/runtime-config-store/state.ts b/src/app/root-store/runtime-config-store/state.ts index d69e09c..b6ac6e9 100644 --- a/src/app/root-store/runtime-config-store/state.ts +++ b/src/app/root-store/runtime-config-store/state.ts @@ -9,7 +9,8 @@ export const initialState = { runtimeConfig: { apiPath: '', authMode: AuthMode.SINGLE, - xApiKey: '' + xApiKey: '', + sshTunnelPath: null }, isFetched: false }; diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 8e6983d..a410e90 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -102,6 +102,10 @@ export class AuthService { return this.store.pipe(select(AuthSelectors.selectToken)); } + public getUser(): Observable { + return this.store.pipe(select(AuthSelectors.selectUser)); + } + /** * retrieves Login Token from localStorage. * @return {Token} diff --git a/src/app/services/cloud-data.service.ts b/src/app/services/cloud-data.service.ts index 7bab40c..649695d 100644 --- a/src/app/services/cloud-data.service.ts +++ b/src/app/services/cloud-data.service.ts @@ -1,13 +1,14 @@ import {Injectable} from '@angular/core'; import {Cloud, CloudService, Hardware, Image, NewCloud, Location} from 'cloudiator-rest-api'; -import {Observable, of, pipe} from 'rxjs'; +import {combineLatest, forkJoin, interval, Observable, of, pipe, Subscription, throwError} from 'rxjs'; import {select, Store} from '@ngrx/store'; -import {finalize, map, take, timeout} from 'rxjs/operators'; +import {catchError, filter, finalize, map, sequenceEqual, switchMap, switchMapTo, take, tap, timeout, zipAll} from 'rxjs/operators'; import {HttpResponse} from '@angular/common/http'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from '../app-dialog/services/toast.service'; import {ToastType} from '../app-dialog/model/toast'; import {CloudDataActions, CloudDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; +import {zip} from 'lodash'; /** * Local layer between the cloud swagger service and Components, handles the redux store management of clouds. @@ -17,6 +18,8 @@ import {CloudDataActions, CloudDataSelectors, RootStoreState, RuntimeConfigSelec }) export class CloudDataService { + private cloudFetcher: Subscription; + /** @ignore **/ constructor(private cloudApiService: CloudService, private runtimeConfigService: RuntimeConfigService, @@ -55,15 +58,15 @@ export class CloudDataService { * Send a delete cloud request for the given id * @param id {string} id of cloud to be deleted */ - public deleteCloud(id: string) { - this.cloudApiService.deleteCloud(id).subscribe( - () => { - }, - err => { - console.error('could not delete Cloud'); - this.toastService.show({text: 'could not delete Cloud', type: ToastType.DANGER}, true); - } - ); + public deleteCloud(id: string): Observable { + return this.cloudApiService.deleteCloud(id) + .pipe( + catchError(err => { + console.error('could not delete Cloud'); + this.toastService.show({text: 'could not delete Cloud', type: ToastType.DANGER}, true); + return throwError(err); + }) + ); } public cloudIsLoading(): Observable { @@ -152,7 +155,11 @@ export class CloudDataService { * Fetches all clouds from the Server and saves them in the Redux store. * before sending the request, the config file must be loaded to grant the correct api url */ - private fetchClouds() { + public fetchClouds() { + + if (this.cloudFetcher) { + this.cloudFetcher.unsubscribe(); + } // fetch Clouds this.store.dispatch(new CloudDataActions.SetCloudIsLoading(true)); @@ -160,13 +167,14 @@ export class CloudDataService { .subscribe( clouds => { this.store.dispatch(new CloudDataActions.SetCloudsAction(clouds)); + this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); }, err => { + this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); console.error('could not fetch clouds', err); this.toastService.show({text: 'could not fetch clouds', type: ToastType.DANGER}, false); }, () => { - this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); } ); } @@ -174,7 +182,7 @@ export class CloudDataService { /** * Fetches Hardware from server and puts it into the Redux store. */ - private fetchHardware() { + public fetchHardware() { // fetch Hardware this.store.dispatch(new CloudDataActions.SetHardwareIsLoading(true)); this.cloudApiService.findHardware() @@ -183,6 +191,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetHardwareAction(hardware)); }, () => { + this.store.dispatch(new CloudDataActions.SetHardwareIsLoading(false)); console.error('could not fetch Hardware'); this.toastService.show({text: 'could not fetch Hardware', type: ToastType.DANGER}, false); }, @@ -194,7 +203,7 @@ export class CloudDataService { /** * Feteches Images from the server and puts them into the Redux store. */ - private fetchImages() { + public fetchImages() { // fetch Images this.store.dispatch(new CloudDataActions.SetImageIsLoading(true)); this.cloudApiService.findImages() @@ -203,6 +212,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetImagesAction(images)); }, () => { + this.store.dispatch(new CloudDataActions.SetImageIsLoading(false)); console.error('could not fetch Images'); this.toastService.show({text: 'could not fetch Images', type: ToastType.DANGER}, false); }, @@ -214,7 +224,7 @@ export class CloudDataService { /** * Fetches Locations form the server and puts them into the Redux store. */ - private fetchLocations() { + public fetchLocations() { // fetch Images this.store.dispatch(new CloudDataActions.SetLocationIsLoading(true)); this.cloudApiService.findLocations() @@ -223,6 +233,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetLocationsAction(locations)); }, () => { + this.store.dispatch(new CloudDataActions.SetLocationIsLoading(false)); console.error('could not fetch Images'); this.toastService.show({text: 'could not fetch Images', type: ToastType.DANGER}, false); }, @@ -236,7 +247,6 @@ export class CloudDataService { * @returns {string} */ public findCloudId(id: string): string { - // ToDo: unsafe, not sure if cloud id always ends with ~. return id.split('~')[0]; } diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index 0d462aa..baaec51 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -1,24 +1,29 @@ import {TestBed} from '@angular/core/testing'; import {EditorService} from './editor.service'; -import {take} from 'rxjs/operators'; +import {filter, take, tap, timeout} from 'rxjs/operators'; import {EditorActions, RootStoreModule} from '../root-store'; -import {HttpClientModule} from '@angular/common/http'; import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../app.module'; import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import * as testData from 'testing/test-data'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {EditorStorageState} from '../model/EditorStorageState'; +import {queue} from 'rxjs/internal/scheduler/queue'; +import {of} from 'rxjs'; describe('EditorService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ RootStoreModule, - HttpClientModule, + HttpClientTestingModule, ApiModule.forRoot(apiConfigFactory), AppDialogModule ] })); beforeEach(() => { + localStorage.clear(); }); it('should be created', () => { @@ -29,6 +34,8 @@ describe('EditorService', () => { it('save state should be consistent', async () => { const service: EditorService = TestBed.get(EditorService); + service.store.dispatch(new EditorActions.UploadFileAction('', 'unnamed.yaml')); + service.HasUnsaveChanges() .pipe(take(1)) .subscribe(value => expect(value).toBeFalsy()); @@ -65,4 +72,125 @@ describe('EditorService', () => { .then(() => fail('length == 0 should throw exception')) .catch(err => expect(err).toEqual('could not load file')); }); + + it('editor state should be cached correctly', async () => { + const service: EditorService = TestBed.get(EditorService); + const filename = 'testname'; + + return new Promise(async resolve => { + expect(service.loadEditorState()).toEqual({ + editorValue: '', + filename: 'unnamed.yaml', + jobId: null, + queueId: null + }); + + service.setEditorValue(testData.jobYaml); + service.setFilename(filename); + service.setEditorJob(testData.jobOne); + service.setEditorQueue(testData.queueScheduled); + + const storedState = service.loadEditorState(); + + expect(storedState.editorValue).toEqual(testData.jobYaml); + expect(storedState.filename).toEqual(filename); + expect(storedState.jobId).toEqual(testData.jobOne.id); + expect(storedState.queueId).toEqual(testData.queueScheduled.id); + + resolve(); + }); + }); + + it('editor state should be restored correctly from cache', async () => { + const service: EditorService = TestBed.get(EditorService); + const filename = 'testname'; + + spyOn(service.jobDataService, 'findJob').and.callFake(jobId => { + expect(jobId).toEqual(testData.jobOne.id); + return of(testData.jobOne); + }); + + spyOn(service.queueDataService, 'findQueuedTask').and.callFake(queueId => { + expect(queueId).toEqual(testData.queueScheduled.id); + return of(testData.queueScheduled); + }); + + spyOn(service.jobDataService, 'jobGraph').and.returnValue(of({})); + spyOn(service.queueDataService, 'listenToQueueTaskStatus').and.stub(); + + return new Promise(async resolve => { + + const storedState = { + editorValue: testData.jobYaml, + filename: filename, + jobId: testData.jobOne.id, + queueId: testData.queueCompleted.id + }; + + await service.composeStorageState(storedState); + + await service.getEditorValue() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.jobYaml), + () => fail('getEditorValue should not fail')); + + await service.getFilename() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(filename), + () => fail('getFilename should not fail')); + + + service.getEditorJob() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.jobOne), + () => fail('getEditorJob should not fail')); + + await service.getEditorQueue() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.queueScheduled), + () => fail('getEditorQueue should not fail') + ); + + expect(service.jobDataService.jobGraph).toHaveBeenCalledTimes(1); + expect(service.queueDataService.listenToQueueTaskStatus).toHaveBeenCalledTimes(1); + + resolve(); + }); + }); + + it('queue should not be restored if job isnt found', async () => { + const service: EditorService = TestBed.get(EditorService); + + spyOn(service.jobDataService, 'findJob').and.callFake(jobId => { + expect(jobId).toEqual(testData.jobOne.id); + return of(testData.jobOne); + }); + + spyOn(service.queueDataService, 'findQueuedTask').and.returnValue(of(null)); + + spyOn(service.jobDataService, 'jobGraph').and.returnValue(of({})); + spyOn(service.queueDataService, 'listenToQueueTaskStatus').and.stub(); + + return new Promise(async resolve => { + + const storedState = { + editorValue: '', + filename: '', + jobId: null, + queueId: null + }; + + await service.composeStorageState(storedState); + + expect(service.jobDataService.findJob).not.toHaveBeenCalled(); + expect(service.queueDataService.findQueuedTask).not.toHaveBeenCalled(); + expect(service.queueDataService.listenToQueueTaskStatus).not.toHaveBeenCalled(); + + resolve(); + }); + }); }); diff --git a/src/app/services/editor.service.ts b/src/app/services/editor.service.ts index 8c1999c..53d9906 100644 --- a/src/app/services/editor.service.ts +++ b/src/app/services/editor.service.ts @@ -1,25 +1,36 @@ -import {Injectable} from '@angular/core'; +import {Injectable, OnInit} from '@angular/core'; import {select, Store} from '@ngrx/store'; import saveAs from 'file-saver'; -import {Observable} from 'rxjs'; -import {filter, mergeMap, take} from 'rxjs/operators'; +import {Observable, zip} from 'rxjs'; +import {filter, mergeMap, take, tap} from 'rxjs/operators'; import {EditorActions, EditorSelectors, RootStoreState} from '../root-store'; import {JobDataService} from './job-data.service'; import {Job, Queue} from 'cloudiator-rest-api'; import {QueueDataService} from './queue-data.service'; +import {EditorStorageState} from '../model/EditorStorageState'; /** - * Service handling all Functionallity of the Editor View. + * Service handling all Functionality of the Editor View. */ @Injectable({ providedIn: 'root' }) export class EditorService { + public readonly EDITOR_STORE_KEY = 'editor'; + /** @ignore */ constructor(public store: Store, public jobDataService: JobDataService, public queueDataService: QueueDataService) { + const storedState = this.loadEditorState(); + if (storedState) { + this.composeStorageState(storedState); + } + + this.store.pipe(select(EditorSelectors.selectStorageState)).subscribe(val => { + this.saveEditorState(val); + }); } /** @@ -84,7 +95,9 @@ export class EditorService { */ setEditorQueue(queue: Queue) { if (queue) { - this.queueDataService.listenToQueueTaskStatus(queue.id); + this.queueDataService.listenToQueueTaskStatus(queue.id); + } else { + this.queueDataService.listenToQueueTaskStatus(null); } this.store.dispatch(new EditorActions.SetEditorQueueAction(queue)); } @@ -153,4 +166,58 @@ export class EditorService { } return Promise.reject('could not load file'); } + + /** + * Composes needed information to save the editor state from the localStorage into the redux store. + * This includes fetching job and queue if existing. + * @param {EditorStorageState} storedState + */ + public composeStorageState(storedState: EditorStorageState) { + this.store.dispatch(new EditorActions.UploadFileAction( + storedState.editorValue, + storedState.filename + )); + + // fetch job if existing + if (storedState.jobId) { + this.jobDataService.findJob(storedState.jobId) + .pipe(filter(v => v !== undefined), + take(1)) + .subscribe(job => { + this.store.dispatch(new EditorActions.SetEditorJobAction(job)); + // fetch job graph if job was found + this.jobDataService.jobGraph(job.id) + .subscribe(graph => + this.store.dispatch(new EditorActions.SetEditorGraphAction(graph))); + + // fetch queue if job was found and queue was found in cache + if (storedState.queueId) { + this.queueDataService.findQueuedTask(storedState.queueId) + .subscribe(queue => + this.setEditorQueue(queue) + ); + } + } + ); + } + } + + public saveEditorState(state: EditorStorageState) { + localStorage.setItem(this.EDITOR_STORE_KEY, JSON.stringify(state)); + } + + public loadEditorState(): EditorStorageState { + const parsed: EditorStorageState = JSON.parse(localStorage.getItem(this.EDITOR_STORE_KEY)); + return parsed ? + { + editorValue: parsed.editorValue ? parsed.editorValue : '', + filename: parsed.filename ? parsed.filename : 'unnamed.yaml', + jobId: parsed.jobId ? parsed.jobId : null, + queueId: parsed.queueId ? parsed.queueId : null + } : null; + } + + private removeEditorState() { + localStorage.removeItem(this.EDITOR_STORE_KEY); + } } diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts index 2a66f01..6e78e0e 100644 --- a/src/app/services/job-data.service.ts +++ b/src/app/services/job-data.service.ts @@ -3,10 +3,11 @@ import {select, Store} from '@ngrx/store'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from '../app-dialog/services/toast.service'; import {Job, JobService} from 'cloudiator-rest-api'; -import {Observable} from 'rxjs'; +import {Observable, of} from 'rxjs'; import {ToastType} from '../app-dialog/model/toast'; import {JobDataActions, JobDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; -import {find, first, map} from 'rxjs/operators'; +import {find, first, map, tap} from 'rxjs/operators'; +import * as testData from 'testing/test-data'; /** * Handles al functionality concerning Jobs. @@ -29,8 +30,8 @@ export class JobDataService { */ public findJobs(): Observable { this.fetchJobs(); - return this.store.pipe(select(JobDataSelectors.selectJobs)); + // return of(testData.allJobs) } /** @@ -39,7 +40,9 @@ export class JobDataService { * @return {Observable} */ public findJob(id: string): Observable { - return this.findJobs().pipe(map(jobs => jobs.find(job => job.id === id))); + this.fetchJobs(); + return this.findJobs().pipe( + map(jobs => jobs.find(job => job.id === id))); } /** diff --git a/src/app/services/node-data.service.spec.ts b/src/app/services/node-data.service.spec.ts new file mode 100644 index 0000000..212bf35 --- /dev/null +++ b/src/app/services/node-data.service.spec.ts @@ -0,0 +1,20 @@ +import { TestBed } from '@angular/core/testing'; + +import { NodeDataService } from './node-data.service'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {ApiModule, NodeService} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../app.module'; + +describe('NodeDataService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule, + ApiModule.forRoot(apiConfigFactory) + ], + })); + + it('should be created', () => { + const service: NodeDataService = TestBed.get(NodeDataService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/node-data.service.ts b/src/app/services/node-data.service.ts new file mode 100644 index 0000000..aa881fa --- /dev/null +++ b/src/app/services/node-data.service.ts @@ -0,0 +1,50 @@ +import {Injectable} from '@angular/core'; +import {IpAddressType, IpVersion, Node, NodeService} from 'cloudiator-rest-api'; +import {map} from 'rxjs/operators'; +import {Observable} from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class NodeDataService { + + constructor(private nodeApiService: NodeService) { + } + + /** + * Mapping function that fixes uppercase attributes, sent by the API. + * @param {Node} node + * @return {Node} + */ + private static ipAddressMap(node: Node) { + const ips = node.ipAddresses.map(ip => { + // @ts-ignore + if (ip.IpAddressType && ip.IpVersion) { + // @ts-ignore + ip.ipAddressType = ip.IpAddressType; + // @ts-ignore + ip.ipVersion = ip.IpVersion; + // @ts-ignore + delete ip.IpVersion; + // @ts-ignore + delete ip.IpAddressType; + } + return ip; + }); + return { + ipAddresses: ips, + ...node + }; + + } + + public getNodes(): Observable { + return this.nodeApiService.findNodes() + .pipe(map((nodes: Node[]) => nodes.map(NodeDataService.ipAddressMap))); + } + + public getNode(id: string): Observable { + return this.nodeApiService.getNode(id) + .pipe(map(NodeDataService.ipAddressMap)); + } +} diff --git a/src/app/services/process-data.service.ts b/src/app/services/process-data.service.ts index bf314d8..de64a79 100644 --- a/src/app/services/process-data.service.ts +++ b/src/app/services/process-data.service.ts @@ -46,6 +46,7 @@ export class ProcessDataService { public getSchedules(): Observable { this.fetchSchedules(); return this.store.pipe(select(ProcessDataSelectors.selectSchedules)); + // return of(testData.allSchedules) } public getScheduleIsLoading(): Observable { @@ -60,6 +61,8 @@ export class ProcessDataService { */ scheduleGraph(id: string): Observable { return this.processApiService.scheduleGraph(id) + // return id === '4f1cf465-d420-4d63-a456-88f65981c3cd' ? of(null) : + // return of(testData.tempTestGraph) .pipe(map(graph => { return { edges: graph.edges, @@ -68,6 +71,10 @@ export class ProcessDataService { })); } + deleteSchedule(id: string): Observable { + return this.processApiService.deleteSchedule(id); + } + /** * Fetches schedules from api. */ diff --git a/src/app/services/queue-data.service.ts b/src/app/services/queue-data.service.ts index b270423..75c9876 100644 --- a/src/app/services/queue-data.service.ts +++ b/src/app/services/queue-data.service.ts @@ -16,6 +16,8 @@ import {ToastType} from '../app-dialog/model/toast'; }) export class QueueDataService { + private readonly queuePollingInterval = 1000; + /** * Subscription of the queueStatus interval. */ @@ -48,13 +50,19 @@ export class QueueDataService { this.queueStatusSubscription.unsubscribe(); } + // cancel if id is empty + if (!id) { + return; + } + const destroy = new Subject(); // poll Server every second this.queueStatusSubscription = - interval(1000).pipe( - takeUntil(destroy), - mergeMap(() => this.findQueuedTask(id)) - ).subscribe((queue: Queue) => { + interval(this.queuePollingInterval) + .pipe( + takeUntil(destroy), + mergeMap(() => this.findQueuedTask(id)) + ).subscribe((queue: Queue) => { this.store.dispatch(new EditorActions.SetEditorQueueAction(queue)); // if queue finished, stop polling if (queue.status === 'COMPLETED' || queue.status === 'FAILED') { diff --git a/src/app/services/runtime-config.service.ts b/src/app/services/runtime-config.service.ts index ba81cc7..ff2f70e 100644 --- a/src/app/services/runtime-config.service.ts +++ b/src/app/services/runtime-config.service.ts @@ -6,7 +6,7 @@ import {RuntimeConfig} from '../model/RuntimeConfig'; import {Configuration} from 'cloudiator-rest-api'; import {environment} from '../../environments/environment'; import {RootStoreState, RuntimeConfigActions, RuntimeConfigSelectors} from '../root-store'; -import {filter, take} from 'rxjs/operators'; +import {filter, map, take} from 'rxjs/operators'; /** * Responsible for fetching and setting up run options. @@ -33,12 +33,7 @@ export class RuntimeConfigService { if (environment.useRuntimeConfig) { this.fetchConfig(); } else { - this.store.dispatch( - new RuntimeConfigActions.SetRuntimeConfigAction({ - apiPath: environment.apiPath, - authMode: environment.authMode, - xApiKey: environment.xApiKey - })); + this.dispatchDefaultConfig(); } } @@ -47,19 +42,28 @@ export class RuntimeConfigService { */ private fetchConfig() { this.httpClient.get(`${environment.href}assets/appConfig.json`) + .pipe(map(config => { + // replace ssh tunnel placeholder with undefined so it will be handled correctly by the ssh is available method + return config.sshTunnelPath === '${SSH_TUNNEL_PATH}' + ? Object.assign(config, {sshTunnelPath: undefined}) + : config; + })) .subscribe(value => { this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction(value)); }, - () => { - this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction({ - apiPath: environment.apiPath, - authMode: environment.authMode, - xApiKey: environment.xApiKey - })); - } + () => this.dispatchDefaultConfig() ); } + private dispatchDefaultConfig() { + this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction({ + apiPath: environment.apiPath, + authMode: environment.authMode, + xApiKey: environment.xApiKey, + sshTunnelPath: environment.sshTunnelPath + })); + } + /** * Returns a Promise that resolves to true as soon as the runtimeconfig is set up. * @return {Promise} @@ -90,6 +94,10 @@ export class RuntimeConfigService { return this.store.pipe(select(RuntimeConfigSelectors.selectXApiKey)); } + getSshTunnelPath(): Observable { + return this.store.pipe(select(RuntimeConfigSelectors.selectSshTunnelPath)); + } + /** * Returns complete runtimeConfig from store. * @return {Observable} diff --git a/src/app/services/ssh.service.spec.ts b/src/app/services/ssh.service.spec.ts new file mode 100644 index 0000000..13d242f --- /dev/null +++ b/src/app/services/ssh.service.spec.ts @@ -0,0 +1,22 @@ +import { TestBed } from '@angular/core/testing'; + +import { SshService } from './ssh.service'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {ApiModule} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../app.module'; +import {RootStoreModule} from '../root-store'; + +describe('SshService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule, + ApiModule.forRoot(apiConfigFactory), + RootStoreModule + ] + })); + + it('should be created', () => { + const service: SshService = TestBed.get(SshService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/ssh.service.ts b/src/app/services/ssh.service.ts new file mode 100644 index 0000000..5725a40 --- /dev/null +++ b/src/app/services/ssh.service.ts @@ -0,0 +1,43 @@ +import {Injectable} from '@angular/core'; +import {IpAddress, LoginCredential} from 'cloudiator-rest-api'; +import {environment} from '../../environments/environment'; +import {from, Observable, of} from 'rxjs'; +import {RuntimeConfigService} from './runtime-config.service'; +import {combineAll, map, mergeMap, take, tap} from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class SshService { + + constructor(private runtimeConfig: RuntimeConfigService) { + } + + public connectTo(ip: IpAddress, credential: LoginCredential): Observable { + + // this.data.loginCredential + // const protocol = environment.sshTunnelPath.includes('https://') ? 'wss://' + // : environment.sshTunnelPath.includes('http://') ? 'ws://' + // : console.error('SSH Tunnel Path contains no correct protocol'); + // + // const hostPath = environment.sshTunnelPath. + + // wait for config load before loading ssh tunnel path and then returning a websocket + return from(this.runtimeConfig.awaitConfigLoad()) + .pipe( + map(() => this.runtimeConfig.getSshTunnelPath()), + mergeMap(path$ => path$), + take(1), + map(path => { + const socketUrl = `${path}/ssh` + + `?ip=${btoa(ip.value)}&key=${btoa(credential.privateKey)}` + + `&user=${btoa(credential.username)}`; + return new WebSocket(socketUrl); + }), + ); + } + + public sshIsAvailable(): Observable { + return this.runtimeConfig.getSshTunnelPath().pipe(map(path => path && path !== '')); + } +} diff --git a/src/assets/AWS-Logo.svg b/src/assets/AWS-Logo.svg new file mode 100644 index 0000000..80192a1 --- /dev/null +++ b/src/assets/AWS-Logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + diff --git a/src/assets/GCP-Logo.svg b/src/assets/GCP-Logo.svg new file mode 100644 index 0000000..931bbf9 --- /dev/null +++ b/src/assets/GCP-Logo.svg @@ -0,0 +1 @@ +Artboard 1 \ No newline at end of file diff --git a/src/assets/OpenStack-Logo.svg b/src/assets/OpenStack-Logo.svg new file mode 100644 index 0000000..dd4de00 --- /dev/null +++ b/src/assets/OpenStack-Logo.svg @@ -0,0 +1 @@ +OpenStack_Logo_Mark \ No newline at end of file diff --git a/src/assets/appConfig.json b/src/assets/appConfig.json index 22654d4..cd0bd3e 100644 --- a/src/assets/appConfig.json +++ b/src/assets/appConfig.json @@ -1,5 +1,6 @@ { "apiPath": "${API_URL}", "authMode": "${AUTH_MODE}", - "xApiKey": "${AUTH_TOKEN}" + "xApiKey": "${AUTH_TOKEN}", + "sshTunnelPath": "${SSH_TUNNEL_PATH}" } diff --git a/src/assets/default-cloud-logo.svg b/src/assets/default-cloud-logo.svg new file mode 100644 index 0000000..ff57c14 --- /dev/null +++ b/src/assets/default-cloud-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..dbb86fa --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ +teste \ No newline at end of file diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 2173ecb..12d1d26 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -7,5 +7,6 @@ export const environment = { skipAuth: false, authMode: null, xApiKey: '', - notificationDuration: 10000 + notificationDuration: 10000, + sshTunnelPath: null }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 3be6e3b..f57bbd1 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -12,7 +12,8 @@ export const environment = { skipAuth: false, authMode: AuthMode.SINGLE, xApiKey: 'secure', - notificationDuration: 10000 + notificationDuration: 10000, + sshTunnelPath: 'ws://134.60.152.98:4341' }; /* diff --git a/src/styles.scss b/src/styles.scss index 9a689c5..26b6e74 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,10 @@ @charset "utf-8"; // Icon font -@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css"); +@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css"); + +@import "~xterm/css/xterm.css"; + // initial variables @import "../node_modules/bulma/sass/utilities/initial-variables"; //@import "../node_modules/bulma/sass/utilities/derived-variables"; @@ -20,7 +23,8 @@ $primary-invert: $blue-invert; $secondary: $light-blue; $secondary-invert: $light-blue-invert; -$navbar-dropdown-background-color: $secondary; +//$navbar-dropdown-background-color: $secondary; +$navbar-item-active-color: $primary; $custom-colors: ("secondary": ($secondary, $secondary-invert)); @@ -33,6 +37,8 @@ $tabs-link-active-border-bottom-color: $secondary; $list-item-active-background-color: $secondary; $list-radius: 0px; +$navbar-breakpoint: $tablet; + @import "../node_modules/bulma/bulma"; @import "../node_modules/bulma/sass/utilities/mixins"; @import "../node_modules/bulma-divider/dist/css/bulma-divider"; @@ -112,6 +118,12 @@ $app-container-height: calc(100% - #{$navbar-height}); } } +@include touch { + .hidden-touch { + display: none !important; + } +} + // text placeholder @keyframes placeHolderShimmer{ 0%{ @@ -142,7 +154,7 @@ $app-container-height: calc(100% - #{$navbar-height}); animation-name: placeHolderShimmer; animation-timing-function: linear; background: $secondary; - background: linear-gradient(to right, rgba(238,238,238,0.3) 8%, rgba(255,255,255,0.1) 18%, rgba(238,238,238,0.3) 33%); + background: linear-gradient(to right, rgba(238,238,238,0.7) 8%, rgba(255,255,255,0.4) 18%, rgba(238,238,238,0.7) 33%); background-size: 800px 104px; border-radius: 3rem; //height: 96px; diff --git a/testing/test-data.ts b/testing/test-data.ts index f74ba6b..9ad44e9 100644 --- a/testing/test-data.ts +++ b/testing/test-data.ts @@ -10,10 +10,10 @@ import { Location, Login, OclRequirement, - OperatingSystem, + OperatingSystem, Port, PortProvided, PortRequired, Queue, - Schedule, + Schedule, ServiceBehaviour, SingleProcess, Token } from 'cloudiator-rest-api'; @@ -32,7 +32,8 @@ export function testApiFactory(): Configuration { export const runtimeConfigOne: RuntimeConfig = { apiPath: 'testpath', xApiKey: 'testKey', - authMode: AuthMode.SINGLE + authMode: AuthMode.SINGLE, + sshTunnelPath: '' }; /* CLOUDS */ @@ -306,7 +307,7 @@ export const jobTwo: Job = { { name: 'wiki', ports: [ - { + { type: 'PortProvided', name: 'WIKIPROV', port: 80 @@ -357,12 +358,15 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -407,7 +411,10 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'loadbalancer', @@ -418,7 +425,7 @@ export const jobTwo: Job = { updateAction: './mediawiki-tutorial/scripts/lance/nginx.sh configure', isMandatory: false }, - { + { type: 'PortProvided', name: 'LBPROV', port: 80 @@ -463,7 +470,10 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: [ @@ -576,7 +586,7 @@ export const JobOne: Job = { { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -617,7 +627,10 @@ export const JobOne: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: null, @@ -632,7 +645,7 @@ export const JobTwo: Job = { { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -673,7 +686,10 @@ export const JobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: null, @@ -694,7 +710,7 @@ export const JobThree: Job = { updateAction: './mediawiki-tutorial/scripts/lance/nginx.sh configure', isMandatory: false }, - { + { type: 'PortProvided', name: 'LBPROV', port: 80 @@ -735,7 +751,10 @@ export const JobThree: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'wiki', @@ -1018,3 +1037,49 @@ export const tokenOne: Token = { issuedTime: Number.MIN_VALUE, expireTime: Number.MAX_VALUE }; + + +export const tempTestGraph = { + processes: [ + { + data: { + id: 'b28c30e3-82a8-409d-9979-d8a02ffa1294', + task: 'database', + state: 'RUNNING', + ipAddresses: [] + } + }, + { + data: { + id: '57167670-15d1-4ffd-9c02-39155ac75484', + task: 'wiki', + state: 'PENDING', + ipAddresses: [] + } + }, + { + data: { + id: 'c0565cd7-d87d-4fa8-bf87-b7836ef30f22', + task: 'loadbalancer', + state: 'ERROR', + ipAddresses: [] + } + } + ], + edges: [ + { + data: { + id: '609bfed46324322f7faa9c298bccaff1', + source: 'b28c30e3-82a8-409d-9979-d8a02ffa1294', + target: '57167670-15d1-4ffd-9c02-39155ac75484' + } + }, + { + data: { + id: '81240b9fdb5ae1fc37a1402450fe339c', + source: '57167670-15d1-4ffd-9c02-39155ac75484', + target: 'c0565cd7-d87d-4fa8-bf87-b7836ef30f22' + } + } + ] +};
- - + + + + - + + + + + @@ -34,8 +40,8 @@ {{title}} {{columns[field].selectionFn - ? columns[field].selectionFn(row) - : row[field]}} + ? columns[field].selectionFn(row) + : row[field]}} diff --git a/src/app/components/overview-tables/overview-table.component.scss b/src/app/components/overview-tables/overview-table.component.scss index 9ef71d6..fbb6503 100644 --- a/src/app/components/overview-tables/overview-table.component.scss +++ b/src/app/components/overview-tables/overview-table.component.scss @@ -15,7 +15,7 @@ } .searchbar { - max-width: 500px + width: 500px } .table-viewport { @@ -59,6 +59,10 @@ tr { } } +.fetch-button { + margin-right: 0.5rem +} + @include mobile { .section { padding: 0; @@ -66,7 +70,14 @@ tr { .searchbar { width: 100%; - max-width: none; + max-width: calc(100vw - 2rem) !important; + } + + .fetch-button { + position: absolute; + right: 0; + //top: 2.8rem; + z-index: 2; } .table-viewport { @@ -78,4 +89,3 @@ tr { border-radius: 0; } } - diff --git a/src/app/components/overview-tables/overview-table.component.ts b/src/app/components/overview-tables/overview-table.component.ts index 0e2a22a..1eee6a3 100644 --- a/src/app/components/overview-tables/overview-table.component.ts +++ b/src/app/components/overview-tables/overview-table.component.ts @@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms'; import {ActivatedRoute} from '@angular/router'; import {CloudDataService} from '../../services/cloud-data.service'; import {TableColumns} from '../../model/TableColumns'; +import {take} from 'rxjs/operators'; @Component({ selector: 'app-overview-table', @@ -25,6 +26,8 @@ export class OverviewTableComponent implements OnInit, OnDestroy { data: Observable = of([]); + fetchFn: () => void; + /** * Datasource for table. * @type {BehaviorSubject} @@ -127,4 +130,8 @@ export class OverviewTableComponent implements OnInit, OnDestroy { this.sortDirection.next('asc'); } + fetchData() { + this.fetchFn(); + } + } diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html index 52e57cb..a4eca87 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.html @@ -2,8 +2,8 @@ [@sheetOpenClose]="sheetOpenClose" (swipedown)="sheetOpenClose = 'closed'" (swipeup)="sheetOpenClose = 'open'" + content="yes" (click)="onSheetClick()"> - @@ -18,33 +18,62 @@ + {{selected?.data.state.toLowerCase()}} - - - - + + + + + + + + + + + + + - - - process id: {{selected?.data.id}} - - - ip adress: {{selected?.data.ip}} - - - - - - - - - edge - - - - source: {{selected.data.source.task}} - target: {{selected.data.target.task}} + + + + process id: + {{selected?.data.id}} + + + + + + ip addresses: + + + + + {{ip.value}} + + + + + + + + + + + + + + + + process type: + + + {{selected?.process?.type}} + + + diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss index b35b34c..ced4a65 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.scss @@ -1,11 +1,16 @@ @import "~bulma/sass/utilities/mixins"; +td { + border: none !important; +} + .bottom-sheet { position: absolute; padding: 1rem; width: 100%; height: 20em; bottom: 0; + user-select: text !important; } .bottom-sheet-header { diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts index 85ff70c..6a56454 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.spec.ts @@ -2,6 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SchedulesBottomSheetComponent } from './schedules-bottom-sheet.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {NodeService} from 'cloudiator-rest-api'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {RootStoreModule} from '../../../root-store'; describe('SchedulesBottomSheetComponent', () => { let component: SchedulesBottomSheetComponent; @@ -11,7 +15,13 @@ describe('SchedulesBottomSheetComponent', () => { TestBed.configureTestingModule({ declarations: [ SchedulesBottomSheetComponent ], imports: [ - BrowserAnimationsModule + BrowserAnimationsModule, + AppDialogModule, + HttpClientTestingModule, + RootStoreModule + ], + providers: [ + NodeService ] }) .compileComponents(); diff --git a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts index e24dff2..faa49ed 100644 --- a/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts +++ b/src/app/components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component.ts @@ -1,5 +1,12 @@ import {Component, Input, OnInit} from '@angular/core'; import {animate, animateChild, group, query, state, style, transition, trigger} from '@angular/animations'; +import {CloudiatorProcess, ClusterProcess, IpAddress, IpAddressType, LoginCredential, Node, SingleProcess} from 'cloudiator-rest-api'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ScheduleDiagnosticDialogComponent, SshConsoleDialogComponent} from '../../../app-dialog/dialogs'; +import {NodeDataService} from '../../../services/node-data.service'; +import {Observable} from 'rxjs'; +import {map, tap} from 'rxjs/operators'; +import {SshService} from '../../../services/ssh.service'; /** * Bottomsheet component of the ScheduleView. @@ -30,19 +37,19 @@ import {animate, animateChild, group, query, state, style, transition, trigger} group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.2s')]) + animate('0.2s ease-out')]) ]), transition('* => open', [ group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.25s')]) + animate('0.25s ease-out')]) ]), transition('open => hidden', [ group([ query('@buttonOpenClose', animateChild()), query('@headerOpenClose', animateChild()), - animate('0.2s')]) + animate('0.2s ease-out')]) ]) ]), trigger('buttonOpenClose', [ @@ -96,14 +103,30 @@ export class SchedulesBottomSheetComponent implements OnInit { */ @Input() set selected(value: Selected) { this._selected = value; + console.log(this._selected); // open/hide bottomsheet depending if something is selected if (value) { this.sheetOpenClose = 'open'; + + if (value.process) { + if (isSingleProcess(value.process)) { + this.node$ = this.nodeDataService.getNode(value.process.node) + .pipe(map(n => [n]), tap(console.log)); + // this.dialogService.open(SshConsoleDialogComponent, { data: node}); + } else { + // TODO: Cluster process implementation + } + } } else { this.sheetOpenClose = 'hidden'; + this.node$ = null; } } + public node$: Observable; + + public sshIsAvailable$ = this.sshService.sshIsAvailable(); + /** * containes visibility state of bottom scheet * @type {string} @@ -111,7 +134,9 @@ export class SchedulesBottomSheetComponent implements OnInit { sheetOpenClose: 'open' | 'closed' | 'hidden' = this.selected ? 'open' : 'hidden'; /** @ignore */ - constructor() { + constructor(private dialogService: DialogService, + private nodeDataService: NodeDataService, + private sshService: SshService) { } /** @ignore */ @@ -129,6 +154,23 @@ export class SchedulesBottomSheetComponent implements OnInit { onSheetClick() { } + openDiagnostic() { + this.dialogService.open(ScheduleDiagnosticDialogComponent, {data: this.selected.process}); + } + + isPublicIp(ip: IpAddress) { + return ip.ipAddressType === IpAddressType.PUBLICIP; + } + + onConnect(name: string, ip: IpAddress, credentials: LoginCredential) { + this.dialogService.open(SshConsoleDialogComponent, { + data: { + name: name, + ipAddress: ip, + loginCredential: credentials + } + }); + } } /** @@ -140,8 +182,14 @@ export interface Selected { */ data: any; + process: CloudiatorProcess; + /** * type of Object */ group: 'nodes' | 'edges'; } + +export function isSingleProcess(process: SingleProcess | ClusterProcess): process is SingleProcess { + return (process).node !== undefined; +} diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.html b/src/app/components/schedules/schedules-overview/schedules-overview.component.html index 246f23e..3edaba0 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.html +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.html @@ -2,7 +2,7 @@ - + Schedules @@ -20,32 +20,41 @@ Schedules + - - - - - - + + + + + + + - - - - {{view.job?.name}} - - - - + + + {{view.job?.name}} + + + + + + + + No Schedules + + - + - + diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.scss b/src/app/components/schedules/schedules-overview/schedules-overview.component.scss index a7d9a78..69f5216 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.scss +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.scss @@ -13,6 +13,13 @@ height: 100%; } +.empty-list { + width: 100%; + height: 100%; + justify-content: center; + align-items: center +} + .list-container { display: flex; flex-direction: column; diff --git a/src/app/components/schedules/schedules-overview/schedules-overview.component.ts b/src/app/components/schedules/schedules-overview/schedules-overview.component.ts index 4da1923..3c08538 100644 --- a/src/app/components/schedules/schedules-overview/schedules-overview.component.ts +++ b/src/app/components/schedules/schedules-overview/schedules-overview.component.ts @@ -1,12 +1,10 @@ -import {Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {ProcessDataService} from '../../../services/process-data.service'; -import {merge, Observable, of, Subscription, zip} from 'rxjs'; +import {Observable, Subscription} from 'rxjs'; import {ScheduleView} from '../../../model/ScheduleView'; import {JobDataService} from '../../../services/job-data.service'; -import {delay, flatMap, map, mergeAll, mergeMap, tap, zipAll} from 'rxjs/operators'; -import {ActivatedRoute, Router} from '@angular/router'; -import * as testData from 'testing/test-data'; -import {flatten} from '@angular/compiler'; +import {map} from 'rxjs/operators'; +import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; /** * Overview of Schedules. Hosts a list containing all Schedules and the SchedulesView. @@ -76,6 +74,22 @@ export class SchedulesOverviewComponent implements OnInit, OnDestroy { }) ); + + this.subscriptions.push( + this.router.events.subscribe((e: any) => { + if (e instanceof NavigationEnd) { + this.route.queryParamMap + .pipe( + map(paramsMap => paramsMap.get('id') || undefined) + ) + .subscribe(id => { + this.activeViewId = id; + this.updateActiveScheduleView(); + }); + } + }) + ); + // composing scheduleViews this.subscriptions.push( this.processDataService.getSchedules() diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.html b/src/app/components/schedules/schedules-view/schedules-view.component.html index 4132963..651cd3d 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.html +++ b/src/app/components/schedules/schedules-view/schedules-view.component.html @@ -1,15 +1,19 @@ - + - + + + + Nothing to show yet + (state: {{scheduleView?.schedule?.state}}) - + @@ -22,4 +26,10 @@ {{scheduleView?.job?.name}} + + + + + + diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.scss b/src/app/components/schedules/schedules-view/schedules-view.component.scss index 9e492ca..4208363 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.scss +++ b/src/app/components/schedules/schedules-view/schedules-view.component.scss @@ -11,6 +11,29 @@ //border: 1.5px solid $white-ter; } +.delete-button { + width: 30px; + height: 30px; + cursor: pointer; + position: absolute; + top: 10px; + right: 10px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.center-container { + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + @include tablet { .view-header { padding: 0.6rem 0.8rem; diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts b/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts index 007ce24..cd35189 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts +++ b/src/app/components/schedules/schedules-view/schedules-view.component.spec.ts @@ -8,6 +8,7 @@ import {HttpClientModule} from '@angular/common/http'; import {RootStoreModule} from '../../../root-store'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; import {SchedulesBottomSheetComponent} from '../schedules-bottom-sheet/schedules-bottom-sheet.component'; +import {RouterTestingModule} from '@angular/router/testing'; describe('SchedulesViewComponent', () => { let component: SchedulesViewComponent; @@ -24,6 +25,8 @@ describe('SchedulesViewComponent', () => { BrowserAnimationsModule, ApiModule.forRoot(apiConfigFactory), HttpClientModule, + AppDialogModule, + RouterTestingModule, AppDialogModule ] }) diff --git a/src/app/components/schedules/schedules-view/schedules-view.component.ts b/src/app/components/schedules/schedules-view/schedules-view.component.ts index 9be58d0..f8d00ce 100644 --- a/src/app/components/schedules/schedules-view/schedules-view.component.ts +++ b/src/app/components/schedules/schedules-view/schedules-view.component.ts @@ -1,15 +1,15 @@ -import { - Component, - Input, - OnChanges, - OnInit, - SimpleChanges -} from '@angular/core'; +import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {ScheduleView} from '../../../model/ScheduleView'; import * as cytoscape from 'cytoscape'; import {ProcessDataService} from '../../../services/process-data.service'; -import {map, take} from 'rxjs/operators'; -import * as testData from 'testing/test-data'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; +import {ToastType} from '../../../app-dialog/model/toast'; +import {NavigationEnd, Router} from '@angular/router'; +import {DeleteScheduleDialogComponent} from '../../../app-dialog/dialogs/delete-schedule-dialog/delete-schedule-dialog.component'; +import {CloudiatorProcess} from 'cloudiator-rest-api/model/cloudiatorProcess'; +import {Stylesheet} from 'cytoscape'; +import Edge = cytoscape.Css.Edge; /** * View of a selected Schedule, containing a Cytoscape and a bottomsheet for further information @@ -45,48 +45,59 @@ export class SchedulesViewComponent implements OnInit, OnChanges { /** * Style of graph. */ - readonly style = [{ - 'selector': 'node', - 'style': { - 'width': '50%', - 'height': '50%', - 'content': 'data(task)', - 'font-size': '12px', - 'text-valign': 'center', - 'text-halign': 'center', - 'background-color': '#00447a', - 'text-outline-color': '#00447a', - 'text-outline-width': '1px', - 'text-wrap': 'wrap', - 'color': '#fff', - 'z-index': '10' - } - }, { - 'selector': 'node:selected', - 'style': { - 'background-color': 'lightgray', - 'text-outline-color': 'gray' - } - }, { - 'selector': 'edge', - 'style': { - 'opacity': '0.9', - 'line-color': '#92acbe', - 'width': '5px', - 'overlay-padding': '3px' - } - }, { - 'selector': 'edge:active', - 'style': { - // 'line-color': 'white', - // 'border-color': 'transparent' - } - }, { - 'selector': 'edge:selected', - 'style': { - 'line-color': 'lightgray' - } - }]; + readonly style: any = [ + { + 'selector': 'node', + 'style': { + 'shape': 'ellipse', + 'width': '50', + 'height': '50', + 'content': 'data(task)', + 'font-size': '12px', + 'text-valign': 'center', + 'text-halign': 'center', + 'background-color': '#00447a', + 'text-outline-color': '#00447a', + 'text-outline-width': '1px', + 'text-wrap': 'wrap', + 'color': '#fff', + 'z-index': '10' + } + }, { + 'selector': 'node:selected', + 'style': { + 'background-blacken': '-0.2' + } + }, { + 'selector': 'edge', + 'style': { + 'curve-style': 'bezier', + 'opacity': '0.9', + 'line-color': '#92acbe', + 'width': '5px', + 'overlay-opacity': '0', + 'source-arrow-shape': 'triangle-backcurve', + 'source-arrow-color': '#92acbe' + } + }, { + 'selector': '.running', + 'style': { + 'background-color': 'hsl(141, 71%, 48%)', + 'text-outline-color': 'hsl(141, 71%, 48%)', + } + }, { + 'selector': '.pending', + 'style': { + 'background-color': 'hsl(48, 100%, 67%)', + 'text-outline-color': 'hsl(48, 100%, 67%)', + } + }, { + 'selector': '.error', + 'style': { + 'background-color': 'hsl(348, 100%, 61%)', + 'text-outline-color': 'hsl(348, 100%, 61%)' + } + }]; /** * Graph Sorter. @@ -114,6 +125,8 @@ export class SchedulesViewComponent implements OnInit, OnChanges { */ readonly minZoom = 0.5; + noData = true; + /** * Cytoscape object */ @@ -134,21 +147,17 @@ export class SchedulesViewComponent implements OnInit, OnChanges { this.cy.center(); this.cy.panBy({x: 0, y: -100}); }); - this.cy.on('select', 'edge', event => { - const target = event.target._private; - this.selected = { - group: 'edges', - data: { - id: target.data.id, - source: target.source._private.data, - target: target.target._private.data - } - }; - }); this.cy.on('select', 'node', event => { - this.selected = { + const data = event.target._private.data; + // find corresponding process of data + const process = this.scheduleView.schedule.processes ? + this.scheduleView.schedule.processes.find(p => p.id === data.id) + : null; + + this.selected = { group: 'nodes', - data: event.target._private.data + process: process, + data: data }; }); this.cy.on('unselect', () => { @@ -161,7 +170,10 @@ export class SchedulesViewComponent implements OnInit, OnChanges { } /** @ignore */ - constructor(private processDataService: ProcessDataService) { + constructor(private processDataService: ProcessDataService, + private dialogSerivce: DialogService, + private toastService: ToastService, + private router: Router) { } /** @ignore */ @@ -201,11 +213,34 @@ export class SchedulesViewComponent implements OnInit, OnChanges { .subscribe(graph => { // timeout as hack to fix wrong positioning of graph when data arrives to early in mobile view setTimeout(() => { + this.noData = graph.nodes.length === 0; this.cy.remove(this.cy.$(() => true)); this.cy.add(graph); this.cy.layout(this.circLayout).run(); this.isLoading = false; this.cy.panBy({x: 0, y: -100}); + this.cy.elements('node').forEach(ele => { + const state: CloudiatorProcess.StateEnum = ele._private.data.state; + switch (state) { + case 'PENDING': + ele.addClass('pending'); + break; + case 'ERROR': + ele.addClass('error'); + break; + case 'DELETED': + ele.addClass('deleted'); + break; + case 'FINISHED': + ele.addClass('finished'); + break; + case 'RUNNING': + ele.addClass('running'); + break; + default: + break; + } + }); }, 0); }, () => { @@ -213,4 +248,33 @@ export class SchedulesViewComponent implements OnInit, OnChanges { } ); } + + onDelete() { + this.dialogSerivce.open(DeleteScheduleDialogComponent, { + data: { + scheduleName: this.scheduleView.job.name + } + }) + .afterClosed() + .subscribe(confirmation => { + if (confirmation) { + this.processDataService.deleteSchedule(this.scheduleView.schedule.id) + .subscribe( + () => { + this.router.navigateByUrl('/schedules'); + }, + err => { + console.error(err); + this.toastService.show({text: 'Could not delete Schedule', type: ToastType.DANGER}); + }); + } + }); + } + + updateGraph(id: string) { + if (this.scheduleView && this.scheduleView.schedule.id === id) { + this.selected = null; + this.updategraph(); + } + } } diff --git a/src/app/guards/http-error.interceptor.spec.ts b/src/app/guards/http-error.interceptor.spec.ts index 00269eb..50bcecf 100644 --- a/src/app/guards/http-error.interceptor.spec.ts +++ b/src/app/guards/http-error.interceptor.spec.ts @@ -79,11 +79,11 @@ describe('HttpErrorInterceptor', () => { return new Promise(async resolve => { http.get('/').subscribe( () => fail('request should fail'), - () => fail('error should have been handled earlier'), () => { httpMock.verify(); resolve(); - } + }, + () => fail('request should error') ); const httpRequest = httpMock.expectOne('/'); diff --git a/src/app/guards/http-error.interceptor.ts b/src/app/guards/http-error.interceptor.ts index a5112df..67bc296 100644 --- a/src/app/guards/http-error.interceptor.ts +++ b/src/app/guards/http-error.interceptor.ts @@ -1,6 +1,6 @@ import {Injectable} from '@angular/core'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; -import {catchError, tap} from 'rxjs/operators'; +import {catchError} from 'rxjs/operators'; import {Observable, of, throwError} from 'rxjs'; import {AuthService} from '../services/auth.service'; import {ToastService} from '../app-dialog/services/toast.service'; @@ -28,16 +28,21 @@ export class HttpErrorInterceptor implements HttpInterceptor { console.log('access denied: Log Out...'); this.toastService.show({text: 'Session timeout', type: ToastType.WARNING}); this.authService.logOut(); + return of(null); break; case 504: this.toastService.show({text: 'Gateway timeout', type: ToastType.DANGER}); break; + case 0: + this.toastService.show({text: 'Connection refused', type: ToastType.DANGER}); + break; default: return throwError(err); } - return of(null); + return throwError(err); } + console.log('error status') this.toastService.show({text: 'Application Error', type: ToastType.DANGER}); return of(null); })); diff --git a/src/app/model/EditorStorageState.ts b/src/app/model/EditorStorageState.ts new file mode 100644 index 0000000..ea04ef0 --- /dev/null +++ b/src/app/model/EditorStorageState.ts @@ -0,0 +1,6 @@ +export interface EditorStorageState { + editorValue: string; + filename: string; + jobId: string; + queueId: string; +} diff --git a/src/app/model/RuntimeConfig.ts b/src/app/model/RuntimeConfig.ts index d3057d8..d3a9db1 100644 --- a/src/app/model/RuntimeConfig.ts +++ b/src/app/model/RuntimeConfig.ts @@ -14,6 +14,8 @@ export interface RuntimeConfig { * auth key of the api if single AuthMode is used. */ xApiKey: string; + + sshTunnelPath: string | null; } /** diff --git a/src/app/root-store/cloud-data-store/reducer.ts b/src/app/root-store/cloud-data-store/reducer.ts index 8553120..55c5be9 100644 --- a/src/app/root-store/cloud-data-store/reducer.ts +++ b/src/app/root-store/cloud-data-store/reducer.ts @@ -44,6 +44,6 @@ export function cloudDataReducer(state = initialState, action: cloudActions.All) locationIsLoading: action.isLoading }; default: - return initialState; + return state; } } diff --git a/src/app/root-store/editor-store/actions.ts b/src/app/root-store/editor-store/actions.ts index a6b8db7..f85c3ee 100644 --- a/src/app/root-store/editor-store/actions.ts +++ b/src/app/root-store/editor-store/actions.ts @@ -1,7 +1,9 @@ import {Action} from '@ngrx/store'; import {Job, Queue} from 'cloudiator-rest-api'; +import {State} from './state'; +export const SET_STATE = '[Editor] set State'; export const SET_VALUE = '[Editor] set Value'; export const SET_FILENAME = '[Editor] set Filename'; export const SET_EDITOR_GRAPH = '[Editor] set editorGraph'; @@ -10,6 +12,13 @@ export const SET_EDITOR_QUEUE = '[Editor] set editorQueue'; export const UPLOAD_FILE = '[Editor] upload File'; export const CHANGES_SAVED = '[Editor] changes saved'; +export class SetEditorState implements Action { + readonly type = SET_STATE; + + constructor(public state: State) { + } +} + export class SetValueAction implements Action { readonly type = SET_VALUE; @@ -60,4 +69,12 @@ export class ChangesSavedAction implements Action { } } -export type All = SetValueAction | SetFilenameAction | SetEditorGraphAction | SetEditorJobAction | SetEditorQueueAction | UploadFileAction | ChangesSavedAction; +export type All = + SetEditorState + | SetValueAction + | SetFilenameAction + | SetEditorGraphAction + | SetEditorJobAction + | SetEditorQueueAction + | UploadFileAction + | ChangesSavedAction; diff --git a/src/app/root-store/editor-store/reducer.ts b/src/app/root-store/editor-store/reducer.ts index 8f90749..3b48445 100644 --- a/src/app/root-store/editor-store/reducer.ts +++ b/src/app/root-store/editor-store/reducer.ts @@ -3,6 +3,8 @@ import {initialState, State} from './state'; export function editorReducer(state = initialState, action: editorActions.All): State { switch (action.type) { + case editorActions.SET_STATE: + return action.state; case editorActions.SET_VALUE: return {...state, value: action.value, unsavedChanges: action.value !== state.originalValue}; case editorActions.SET_FILENAME: diff --git a/src/app/root-store/editor-store/selectors.ts b/src/app/root-store/editor-store/selectors.ts index 092c7e3..a5fc050 100644 --- a/src/app/root-store/editor-store/selectors.ts +++ b/src/app/root-store/editor-store/selectors.ts @@ -1,6 +1,15 @@ import {State} from './state'; import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; +import {EditorStorageState} from '../../model/EditorStorageState'; +const getStorageState = (state: State): EditorStorageState => { + return { + editorValue: state.value, + filename: state.filename, + jobId: state.editorJob ? state.editorJob.id : undefined, + queueId: state.editorQueue ? state.editorQueue.id : undefined + }; +}; const getValue = (state: State): string => state.value; const getFilename = (state: State): string => state.filename; const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; @@ -11,6 +20,8 @@ const getEditorQueue = (state: State): any | null => state.editorQueue; export const selectEditorState: MemoizedSelector = createFeatureSelector('editor'); +export const selectStorageState: MemoizedSelector = + createSelector(selectEditorState, getStorageState); export const selectValue: MemoizedSelector = createSelector(selectEditorState, getValue); export const selectFilename: MemoizedSelector diff --git a/src/app/root-store/root-store.module.ts b/src/app/root-store/root-store.module.ts index 0c5a8a8..e0aa3d4 100644 --- a/src/app/root-store/root-store.module.ts +++ b/src/app/root-store/root-store.module.ts @@ -1,18 +1,26 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; import {StoreModule} from '@ngrx/store'; -import { RuntimeConfigStoreModule } from './runtime-config-store/runtime-config-store.module'; -import { CloudDataStoreModule } from './cloud-data-store/cloud-data-store.module'; -import { EditorStoreModule } from './editor-store/editor-store.module'; -import { JobDataStoreModule } from './job-data-store/job-data-store.module'; -import { AuthStoreModule } from './auth-store/auth-store.module'; -import { ProcessDataStoreModule } from './process-data-store/process-data-store.module'; +import {RuntimeConfigStoreModule} from './runtime-config-store/runtime-config-store.module'; +import {CloudDataStoreModule} from './cloud-data-store/cloud-data-store.module'; +import {EditorStoreModule} from './editor-store/editor-store.module'; +import {JobDataStoreModule} from './job-data-store/job-data-store.module'; +import {AuthStoreModule} from './auth-store/auth-store.module'; +import {ProcessDataStoreModule} from './process-data-store/process-data-store.module'; @NgModule({ declarations: [], imports: [ CommonModule, - StoreModule.forRoot({}), + StoreModule.forRoot({}, { + runtimeChecks: { + strictStateImmutability: false, + strictActionImmutability: false, + strictStateSerializability: false, + strictActionSerializability: false, + }, + } + ), RuntimeConfigStoreModule, CloudDataStoreModule, EditorStoreModule, @@ -21,4 +29,5 @@ import { ProcessDataStoreModule } from './process-data-store/process-data-store. ProcessDataStoreModule ] }) -export class RootStoreModule { } +export class RootStoreModule { +} diff --git a/src/app/root-store/runtime-config-store/selectors.ts b/src/app/root-store/runtime-config-store/selectors.ts index bc0ea35..dacce94 100644 --- a/src/app/root-store/runtime-config-store/selectors.ts +++ b/src/app/root-store/runtime-config-store/selectors.ts @@ -5,6 +5,7 @@ import {State} from './state'; const getApiPath = (state: State): string => state.runtimeConfig.apiPath; const getXApiKey = (state: State): string => state.runtimeConfig.xApiKey; const getAuthMode = (state: State): AuthMode => state.runtimeConfig.authMode; +const getSshTunnelPath = (state: State): string => state.runtimeConfig.sshTunnelPath; const getRuntimeConfig = (state: State): RuntimeConfig => state.runtimeConfig; const isFetched = (state: State): boolean => state.isFetched; @@ -18,6 +19,8 @@ export const selectAuthMode: MemoizedSelector = createSelector(selectRuntimeConfigState, getAuthMode); export const selectXApiKey: MemoizedSelector = createSelector(selectRuntimeConfigState, getXApiKey); +export const selectSshTunnelPath: MemoizedSelector + = createSelector(selectRuntimeConfigState, getSshTunnelPath); export const selectConfig: MemoizedSelector = createSelector(selectRuntimeConfigState, getRuntimeConfig); export const selectIsFetched: MemoizedSelector diff --git a/src/app/root-store/runtime-config-store/state.ts b/src/app/root-store/runtime-config-store/state.ts index d69e09c..b6ac6e9 100644 --- a/src/app/root-store/runtime-config-store/state.ts +++ b/src/app/root-store/runtime-config-store/state.ts @@ -9,7 +9,8 @@ export const initialState = { runtimeConfig: { apiPath: '', authMode: AuthMode.SINGLE, - xApiKey: '' + xApiKey: '', + sshTunnelPath: null }, isFetched: false }; diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 8e6983d..a410e90 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -102,6 +102,10 @@ export class AuthService { return this.store.pipe(select(AuthSelectors.selectToken)); } + public getUser(): Observable { + return this.store.pipe(select(AuthSelectors.selectUser)); + } + /** * retrieves Login Token from localStorage. * @return {Token} diff --git a/src/app/services/cloud-data.service.ts b/src/app/services/cloud-data.service.ts index 7bab40c..649695d 100644 --- a/src/app/services/cloud-data.service.ts +++ b/src/app/services/cloud-data.service.ts @@ -1,13 +1,14 @@ import {Injectable} from '@angular/core'; import {Cloud, CloudService, Hardware, Image, NewCloud, Location} from 'cloudiator-rest-api'; -import {Observable, of, pipe} from 'rxjs'; +import {combineLatest, forkJoin, interval, Observable, of, pipe, Subscription, throwError} from 'rxjs'; import {select, Store} from '@ngrx/store'; -import {finalize, map, take, timeout} from 'rxjs/operators'; +import {catchError, filter, finalize, map, sequenceEqual, switchMap, switchMapTo, take, tap, timeout, zipAll} from 'rxjs/operators'; import {HttpResponse} from '@angular/common/http'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from '../app-dialog/services/toast.service'; import {ToastType} from '../app-dialog/model/toast'; import {CloudDataActions, CloudDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; +import {zip} from 'lodash'; /** * Local layer between the cloud swagger service and Components, handles the redux store management of clouds. @@ -17,6 +18,8 @@ import {CloudDataActions, CloudDataSelectors, RootStoreState, RuntimeConfigSelec }) export class CloudDataService { + private cloudFetcher: Subscription; + /** @ignore **/ constructor(private cloudApiService: CloudService, private runtimeConfigService: RuntimeConfigService, @@ -55,15 +58,15 @@ export class CloudDataService { * Send a delete cloud request for the given id * @param id {string} id of cloud to be deleted */ - public deleteCloud(id: string) { - this.cloudApiService.deleteCloud(id).subscribe( - () => { - }, - err => { - console.error('could not delete Cloud'); - this.toastService.show({text: 'could not delete Cloud', type: ToastType.DANGER}, true); - } - ); + public deleteCloud(id: string): Observable { + return this.cloudApiService.deleteCloud(id) + .pipe( + catchError(err => { + console.error('could not delete Cloud'); + this.toastService.show({text: 'could not delete Cloud', type: ToastType.DANGER}, true); + return throwError(err); + }) + ); } public cloudIsLoading(): Observable { @@ -152,7 +155,11 @@ export class CloudDataService { * Fetches all clouds from the Server and saves them in the Redux store. * before sending the request, the config file must be loaded to grant the correct api url */ - private fetchClouds() { + public fetchClouds() { + + if (this.cloudFetcher) { + this.cloudFetcher.unsubscribe(); + } // fetch Clouds this.store.dispatch(new CloudDataActions.SetCloudIsLoading(true)); @@ -160,13 +167,14 @@ export class CloudDataService { .subscribe( clouds => { this.store.dispatch(new CloudDataActions.SetCloudsAction(clouds)); + this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); }, err => { + this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); console.error('could not fetch clouds', err); this.toastService.show({text: 'could not fetch clouds', type: ToastType.DANGER}, false); }, () => { - this.store.dispatch(new CloudDataActions.SetCloudIsLoading(false)); } ); } @@ -174,7 +182,7 @@ export class CloudDataService { /** * Fetches Hardware from server and puts it into the Redux store. */ - private fetchHardware() { + public fetchHardware() { // fetch Hardware this.store.dispatch(new CloudDataActions.SetHardwareIsLoading(true)); this.cloudApiService.findHardware() @@ -183,6 +191,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetHardwareAction(hardware)); }, () => { + this.store.dispatch(new CloudDataActions.SetHardwareIsLoading(false)); console.error('could not fetch Hardware'); this.toastService.show({text: 'could not fetch Hardware', type: ToastType.DANGER}, false); }, @@ -194,7 +203,7 @@ export class CloudDataService { /** * Feteches Images from the server and puts them into the Redux store. */ - private fetchImages() { + public fetchImages() { // fetch Images this.store.dispatch(new CloudDataActions.SetImageIsLoading(true)); this.cloudApiService.findImages() @@ -203,6 +212,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetImagesAction(images)); }, () => { + this.store.dispatch(new CloudDataActions.SetImageIsLoading(false)); console.error('could not fetch Images'); this.toastService.show({text: 'could not fetch Images', type: ToastType.DANGER}, false); }, @@ -214,7 +224,7 @@ export class CloudDataService { /** * Fetches Locations form the server and puts them into the Redux store. */ - private fetchLocations() { + public fetchLocations() { // fetch Images this.store.dispatch(new CloudDataActions.SetLocationIsLoading(true)); this.cloudApiService.findLocations() @@ -223,6 +233,7 @@ export class CloudDataService { this.store.dispatch(new CloudDataActions.SetLocationsAction(locations)); }, () => { + this.store.dispatch(new CloudDataActions.SetLocationIsLoading(false)); console.error('could not fetch Images'); this.toastService.show({text: 'could not fetch Images', type: ToastType.DANGER}, false); }, @@ -236,7 +247,6 @@ export class CloudDataService { * @returns {string} */ public findCloudId(id: string): string { - // ToDo: unsafe, not sure if cloud id always ends with ~. return id.split('~')[0]; } diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index 0d462aa..baaec51 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -1,24 +1,29 @@ import {TestBed} from '@angular/core/testing'; import {EditorService} from './editor.service'; -import {take} from 'rxjs/operators'; +import {filter, take, tap, timeout} from 'rxjs/operators'; import {EditorActions, RootStoreModule} from '../root-store'; -import {HttpClientModule} from '@angular/common/http'; import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../app.module'; import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import * as testData from 'testing/test-data'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {EditorStorageState} from '../model/EditorStorageState'; +import {queue} from 'rxjs/internal/scheduler/queue'; +import {of} from 'rxjs'; describe('EditorService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ RootStoreModule, - HttpClientModule, + HttpClientTestingModule, ApiModule.forRoot(apiConfigFactory), AppDialogModule ] })); beforeEach(() => { + localStorage.clear(); }); it('should be created', () => { @@ -29,6 +34,8 @@ describe('EditorService', () => { it('save state should be consistent', async () => { const service: EditorService = TestBed.get(EditorService); + service.store.dispatch(new EditorActions.UploadFileAction('', 'unnamed.yaml')); + service.HasUnsaveChanges() .pipe(take(1)) .subscribe(value => expect(value).toBeFalsy()); @@ -65,4 +72,125 @@ describe('EditorService', () => { .then(() => fail('length == 0 should throw exception')) .catch(err => expect(err).toEqual('could not load file')); }); + + it('editor state should be cached correctly', async () => { + const service: EditorService = TestBed.get(EditorService); + const filename = 'testname'; + + return new Promise(async resolve => { + expect(service.loadEditorState()).toEqual({ + editorValue: '', + filename: 'unnamed.yaml', + jobId: null, + queueId: null + }); + + service.setEditorValue(testData.jobYaml); + service.setFilename(filename); + service.setEditorJob(testData.jobOne); + service.setEditorQueue(testData.queueScheduled); + + const storedState = service.loadEditorState(); + + expect(storedState.editorValue).toEqual(testData.jobYaml); + expect(storedState.filename).toEqual(filename); + expect(storedState.jobId).toEqual(testData.jobOne.id); + expect(storedState.queueId).toEqual(testData.queueScheduled.id); + + resolve(); + }); + }); + + it('editor state should be restored correctly from cache', async () => { + const service: EditorService = TestBed.get(EditorService); + const filename = 'testname'; + + spyOn(service.jobDataService, 'findJob').and.callFake(jobId => { + expect(jobId).toEqual(testData.jobOne.id); + return of(testData.jobOne); + }); + + spyOn(service.queueDataService, 'findQueuedTask').and.callFake(queueId => { + expect(queueId).toEqual(testData.queueScheduled.id); + return of(testData.queueScheduled); + }); + + spyOn(service.jobDataService, 'jobGraph').and.returnValue(of({})); + spyOn(service.queueDataService, 'listenToQueueTaskStatus').and.stub(); + + return new Promise(async resolve => { + + const storedState = { + editorValue: testData.jobYaml, + filename: filename, + jobId: testData.jobOne.id, + queueId: testData.queueCompleted.id + }; + + await service.composeStorageState(storedState); + + await service.getEditorValue() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.jobYaml), + () => fail('getEditorValue should not fail')); + + await service.getFilename() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(filename), + () => fail('getFilename should not fail')); + + + service.getEditorJob() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.jobOne), + () => fail('getEditorJob should not fail')); + + await service.getEditorQueue() + .pipe(take(1)) + .subscribe( + val => expect(val).toEqual(testData.queueScheduled), + () => fail('getEditorQueue should not fail') + ); + + expect(service.jobDataService.jobGraph).toHaveBeenCalledTimes(1); + expect(service.queueDataService.listenToQueueTaskStatus).toHaveBeenCalledTimes(1); + + resolve(); + }); + }); + + it('queue should not be restored if job isnt found', async () => { + const service: EditorService = TestBed.get(EditorService); + + spyOn(service.jobDataService, 'findJob').and.callFake(jobId => { + expect(jobId).toEqual(testData.jobOne.id); + return of(testData.jobOne); + }); + + spyOn(service.queueDataService, 'findQueuedTask').and.returnValue(of(null)); + + spyOn(service.jobDataService, 'jobGraph').and.returnValue(of({})); + spyOn(service.queueDataService, 'listenToQueueTaskStatus').and.stub(); + + return new Promise(async resolve => { + + const storedState = { + editorValue: '', + filename: '', + jobId: null, + queueId: null + }; + + await service.composeStorageState(storedState); + + expect(service.jobDataService.findJob).not.toHaveBeenCalled(); + expect(service.queueDataService.findQueuedTask).not.toHaveBeenCalled(); + expect(service.queueDataService.listenToQueueTaskStatus).not.toHaveBeenCalled(); + + resolve(); + }); + }); }); diff --git a/src/app/services/editor.service.ts b/src/app/services/editor.service.ts index 8c1999c..53d9906 100644 --- a/src/app/services/editor.service.ts +++ b/src/app/services/editor.service.ts @@ -1,25 +1,36 @@ -import {Injectable} from '@angular/core'; +import {Injectable, OnInit} from '@angular/core'; import {select, Store} from '@ngrx/store'; import saveAs from 'file-saver'; -import {Observable} from 'rxjs'; -import {filter, mergeMap, take} from 'rxjs/operators'; +import {Observable, zip} from 'rxjs'; +import {filter, mergeMap, take, tap} from 'rxjs/operators'; import {EditorActions, EditorSelectors, RootStoreState} from '../root-store'; import {JobDataService} from './job-data.service'; import {Job, Queue} from 'cloudiator-rest-api'; import {QueueDataService} from './queue-data.service'; +import {EditorStorageState} from '../model/EditorStorageState'; /** - * Service handling all Functionallity of the Editor View. + * Service handling all Functionality of the Editor View. */ @Injectable({ providedIn: 'root' }) export class EditorService { + public readonly EDITOR_STORE_KEY = 'editor'; + /** @ignore */ constructor(public store: Store, public jobDataService: JobDataService, public queueDataService: QueueDataService) { + const storedState = this.loadEditorState(); + if (storedState) { + this.composeStorageState(storedState); + } + + this.store.pipe(select(EditorSelectors.selectStorageState)).subscribe(val => { + this.saveEditorState(val); + }); } /** @@ -84,7 +95,9 @@ export class EditorService { */ setEditorQueue(queue: Queue) { if (queue) { - this.queueDataService.listenToQueueTaskStatus(queue.id); + this.queueDataService.listenToQueueTaskStatus(queue.id); + } else { + this.queueDataService.listenToQueueTaskStatus(null); } this.store.dispatch(new EditorActions.SetEditorQueueAction(queue)); } @@ -153,4 +166,58 @@ export class EditorService { } return Promise.reject('could not load file'); } + + /** + * Composes needed information to save the editor state from the localStorage into the redux store. + * This includes fetching job and queue if existing. + * @param {EditorStorageState} storedState + */ + public composeStorageState(storedState: EditorStorageState) { + this.store.dispatch(new EditorActions.UploadFileAction( + storedState.editorValue, + storedState.filename + )); + + // fetch job if existing + if (storedState.jobId) { + this.jobDataService.findJob(storedState.jobId) + .pipe(filter(v => v !== undefined), + take(1)) + .subscribe(job => { + this.store.dispatch(new EditorActions.SetEditorJobAction(job)); + // fetch job graph if job was found + this.jobDataService.jobGraph(job.id) + .subscribe(graph => + this.store.dispatch(new EditorActions.SetEditorGraphAction(graph))); + + // fetch queue if job was found and queue was found in cache + if (storedState.queueId) { + this.queueDataService.findQueuedTask(storedState.queueId) + .subscribe(queue => + this.setEditorQueue(queue) + ); + } + } + ); + } + } + + public saveEditorState(state: EditorStorageState) { + localStorage.setItem(this.EDITOR_STORE_KEY, JSON.stringify(state)); + } + + public loadEditorState(): EditorStorageState { + const parsed: EditorStorageState = JSON.parse(localStorage.getItem(this.EDITOR_STORE_KEY)); + return parsed ? + { + editorValue: parsed.editorValue ? parsed.editorValue : '', + filename: parsed.filename ? parsed.filename : 'unnamed.yaml', + jobId: parsed.jobId ? parsed.jobId : null, + queueId: parsed.queueId ? parsed.queueId : null + } : null; + } + + private removeEditorState() { + localStorage.removeItem(this.EDITOR_STORE_KEY); + } } diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts index 2a66f01..6e78e0e 100644 --- a/src/app/services/job-data.service.ts +++ b/src/app/services/job-data.service.ts @@ -3,10 +3,11 @@ import {select, Store} from '@ngrx/store'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from '../app-dialog/services/toast.service'; import {Job, JobService} from 'cloudiator-rest-api'; -import {Observable} from 'rxjs'; +import {Observable, of} from 'rxjs'; import {ToastType} from '../app-dialog/model/toast'; import {JobDataActions, JobDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; -import {find, first, map} from 'rxjs/operators'; +import {find, first, map, tap} from 'rxjs/operators'; +import * as testData from 'testing/test-data'; /** * Handles al functionality concerning Jobs. @@ -29,8 +30,8 @@ export class JobDataService { */ public findJobs(): Observable { this.fetchJobs(); - return this.store.pipe(select(JobDataSelectors.selectJobs)); + // return of(testData.allJobs) } /** @@ -39,7 +40,9 @@ export class JobDataService { * @return {Observable} */ public findJob(id: string): Observable { - return this.findJobs().pipe(map(jobs => jobs.find(job => job.id === id))); + this.fetchJobs(); + return this.findJobs().pipe( + map(jobs => jobs.find(job => job.id === id))); } /** diff --git a/src/app/services/node-data.service.spec.ts b/src/app/services/node-data.service.spec.ts new file mode 100644 index 0000000..212bf35 --- /dev/null +++ b/src/app/services/node-data.service.spec.ts @@ -0,0 +1,20 @@ +import { TestBed } from '@angular/core/testing'; + +import { NodeDataService } from './node-data.service'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {ApiModule, NodeService} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../app.module'; + +describe('NodeDataService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule, + ApiModule.forRoot(apiConfigFactory) + ], + })); + + it('should be created', () => { + const service: NodeDataService = TestBed.get(NodeDataService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/node-data.service.ts b/src/app/services/node-data.service.ts new file mode 100644 index 0000000..aa881fa --- /dev/null +++ b/src/app/services/node-data.service.ts @@ -0,0 +1,50 @@ +import {Injectable} from '@angular/core'; +import {IpAddressType, IpVersion, Node, NodeService} from 'cloudiator-rest-api'; +import {map} from 'rxjs/operators'; +import {Observable} from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class NodeDataService { + + constructor(private nodeApiService: NodeService) { + } + + /** + * Mapping function that fixes uppercase attributes, sent by the API. + * @param {Node} node + * @return {Node} + */ + private static ipAddressMap(node: Node) { + const ips = node.ipAddresses.map(ip => { + // @ts-ignore + if (ip.IpAddressType && ip.IpVersion) { + // @ts-ignore + ip.ipAddressType = ip.IpAddressType; + // @ts-ignore + ip.ipVersion = ip.IpVersion; + // @ts-ignore + delete ip.IpVersion; + // @ts-ignore + delete ip.IpAddressType; + } + return ip; + }); + return { + ipAddresses: ips, + ...node + }; + + } + + public getNodes(): Observable { + return this.nodeApiService.findNodes() + .pipe(map((nodes: Node[]) => nodes.map(NodeDataService.ipAddressMap))); + } + + public getNode(id: string): Observable { + return this.nodeApiService.getNode(id) + .pipe(map(NodeDataService.ipAddressMap)); + } +} diff --git a/src/app/services/process-data.service.ts b/src/app/services/process-data.service.ts index bf314d8..de64a79 100644 --- a/src/app/services/process-data.service.ts +++ b/src/app/services/process-data.service.ts @@ -46,6 +46,7 @@ export class ProcessDataService { public getSchedules(): Observable { this.fetchSchedules(); return this.store.pipe(select(ProcessDataSelectors.selectSchedules)); + // return of(testData.allSchedules) } public getScheduleIsLoading(): Observable { @@ -60,6 +61,8 @@ export class ProcessDataService { */ scheduleGraph(id: string): Observable { return this.processApiService.scheduleGraph(id) + // return id === '4f1cf465-d420-4d63-a456-88f65981c3cd' ? of(null) : + // return of(testData.tempTestGraph) .pipe(map(graph => { return { edges: graph.edges, @@ -68,6 +71,10 @@ export class ProcessDataService { })); } + deleteSchedule(id: string): Observable { + return this.processApiService.deleteSchedule(id); + } + /** * Fetches schedules from api. */ diff --git a/src/app/services/queue-data.service.ts b/src/app/services/queue-data.service.ts index b270423..75c9876 100644 --- a/src/app/services/queue-data.service.ts +++ b/src/app/services/queue-data.service.ts @@ -16,6 +16,8 @@ import {ToastType} from '../app-dialog/model/toast'; }) export class QueueDataService { + private readonly queuePollingInterval = 1000; + /** * Subscription of the queueStatus interval. */ @@ -48,13 +50,19 @@ export class QueueDataService { this.queueStatusSubscription.unsubscribe(); } + // cancel if id is empty + if (!id) { + return; + } + const destroy = new Subject(); // poll Server every second this.queueStatusSubscription = - interval(1000).pipe( - takeUntil(destroy), - mergeMap(() => this.findQueuedTask(id)) - ).subscribe((queue: Queue) => { + interval(this.queuePollingInterval) + .pipe( + takeUntil(destroy), + mergeMap(() => this.findQueuedTask(id)) + ).subscribe((queue: Queue) => { this.store.dispatch(new EditorActions.SetEditorQueueAction(queue)); // if queue finished, stop polling if (queue.status === 'COMPLETED' || queue.status === 'FAILED') { diff --git a/src/app/services/runtime-config.service.ts b/src/app/services/runtime-config.service.ts index ba81cc7..ff2f70e 100644 --- a/src/app/services/runtime-config.service.ts +++ b/src/app/services/runtime-config.service.ts @@ -6,7 +6,7 @@ import {RuntimeConfig} from '../model/RuntimeConfig'; import {Configuration} from 'cloudiator-rest-api'; import {environment} from '../../environments/environment'; import {RootStoreState, RuntimeConfigActions, RuntimeConfigSelectors} from '../root-store'; -import {filter, take} from 'rxjs/operators'; +import {filter, map, take} from 'rxjs/operators'; /** * Responsible for fetching and setting up run options. @@ -33,12 +33,7 @@ export class RuntimeConfigService { if (environment.useRuntimeConfig) { this.fetchConfig(); } else { - this.store.dispatch( - new RuntimeConfigActions.SetRuntimeConfigAction({ - apiPath: environment.apiPath, - authMode: environment.authMode, - xApiKey: environment.xApiKey - })); + this.dispatchDefaultConfig(); } } @@ -47,19 +42,28 @@ export class RuntimeConfigService { */ private fetchConfig() { this.httpClient.get(`${environment.href}assets/appConfig.json`) + .pipe(map(config => { + // replace ssh tunnel placeholder with undefined so it will be handled correctly by the ssh is available method + return config.sshTunnelPath === '${SSH_TUNNEL_PATH}' + ? Object.assign(config, {sshTunnelPath: undefined}) + : config; + })) .subscribe(value => { this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction(value)); }, - () => { - this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction({ - apiPath: environment.apiPath, - authMode: environment.authMode, - xApiKey: environment.xApiKey - })); - } + () => this.dispatchDefaultConfig() ); } + private dispatchDefaultConfig() { + this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction({ + apiPath: environment.apiPath, + authMode: environment.authMode, + xApiKey: environment.xApiKey, + sshTunnelPath: environment.sshTunnelPath + })); + } + /** * Returns a Promise that resolves to true as soon as the runtimeconfig is set up. * @return {Promise} @@ -90,6 +94,10 @@ export class RuntimeConfigService { return this.store.pipe(select(RuntimeConfigSelectors.selectXApiKey)); } + getSshTunnelPath(): Observable { + return this.store.pipe(select(RuntimeConfigSelectors.selectSshTunnelPath)); + } + /** * Returns complete runtimeConfig from store. * @return {Observable} diff --git a/src/app/services/ssh.service.spec.ts b/src/app/services/ssh.service.spec.ts new file mode 100644 index 0000000..13d242f --- /dev/null +++ b/src/app/services/ssh.service.spec.ts @@ -0,0 +1,22 @@ +import { TestBed } from '@angular/core/testing'; + +import { SshService } from './ssh.service'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {ApiModule} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../app.module'; +import {RootStoreModule} from '../root-store'; + +describe('SshService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule, + ApiModule.forRoot(apiConfigFactory), + RootStoreModule + ] + })); + + it('should be created', () => { + const service: SshService = TestBed.get(SshService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/ssh.service.ts b/src/app/services/ssh.service.ts new file mode 100644 index 0000000..5725a40 --- /dev/null +++ b/src/app/services/ssh.service.ts @@ -0,0 +1,43 @@ +import {Injectable} from '@angular/core'; +import {IpAddress, LoginCredential} from 'cloudiator-rest-api'; +import {environment} from '../../environments/environment'; +import {from, Observable, of} from 'rxjs'; +import {RuntimeConfigService} from './runtime-config.service'; +import {combineAll, map, mergeMap, take, tap} from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class SshService { + + constructor(private runtimeConfig: RuntimeConfigService) { + } + + public connectTo(ip: IpAddress, credential: LoginCredential): Observable { + + // this.data.loginCredential + // const protocol = environment.sshTunnelPath.includes('https://') ? 'wss://' + // : environment.sshTunnelPath.includes('http://') ? 'ws://' + // : console.error('SSH Tunnel Path contains no correct protocol'); + // + // const hostPath = environment.sshTunnelPath. + + // wait for config load before loading ssh tunnel path and then returning a websocket + return from(this.runtimeConfig.awaitConfigLoad()) + .pipe( + map(() => this.runtimeConfig.getSshTunnelPath()), + mergeMap(path$ => path$), + take(1), + map(path => { + const socketUrl = `${path}/ssh` + + `?ip=${btoa(ip.value)}&key=${btoa(credential.privateKey)}` + + `&user=${btoa(credential.username)}`; + return new WebSocket(socketUrl); + }), + ); + } + + public sshIsAvailable(): Observable { + return this.runtimeConfig.getSshTunnelPath().pipe(map(path => path && path !== '')); + } +} diff --git a/src/assets/AWS-Logo.svg b/src/assets/AWS-Logo.svg new file mode 100644 index 0000000..80192a1 --- /dev/null +++ b/src/assets/AWS-Logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + diff --git a/src/assets/GCP-Logo.svg b/src/assets/GCP-Logo.svg new file mode 100644 index 0000000..931bbf9 --- /dev/null +++ b/src/assets/GCP-Logo.svg @@ -0,0 +1 @@ +Artboard 1 \ No newline at end of file diff --git a/src/assets/OpenStack-Logo.svg b/src/assets/OpenStack-Logo.svg new file mode 100644 index 0000000..dd4de00 --- /dev/null +++ b/src/assets/OpenStack-Logo.svg @@ -0,0 +1 @@ +OpenStack_Logo_Mark \ No newline at end of file diff --git a/src/assets/appConfig.json b/src/assets/appConfig.json index 22654d4..cd0bd3e 100644 --- a/src/assets/appConfig.json +++ b/src/assets/appConfig.json @@ -1,5 +1,6 @@ { "apiPath": "${API_URL}", "authMode": "${AUTH_MODE}", - "xApiKey": "${AUTH_TOKEN}" + "xApiKey": "${AUTH_TOKEN}", + "sshTunnelPath": "${SSH_TUNNEL_PATH}" } diff --git a/src/assets/default-cloud-logo.svg b/src/assets/default-cloud-logo.svg new file mode 100644 index 0000000..ff57c14 --- /dev/null +++ b/src/assets/default-cloud-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..dbb86fa --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ +teste \ No newline at end of file diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 2173ecb..12d1d26 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -7,5 +7,6 @@ export const environment = { skipAuth: false, authMode: null, xApiKey: '', - notificationDuration: 10000 + notificationDuration: 10000, + sshTunnelPath: null }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 3be6e3b..f57bbd1 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -12,7 +12,8 @@ export const environment = { skipAuth: false, authMode: AuthMode.SINGLE, xApiKey: 'secure', - notificationDuration: 10000 + notificationDuration: 10000, + sshTunnelPath: 'ws://134.60.152.98:4341' }; /* diff --git a/src/styles.scss b/src/styles.scss index 9a689c5..26b6e74 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,10 @@ @charset "utf-8"; // Icon font -@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css"); +@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css"); + +@import "~xterm/css/xterm.css"; + // initial variables @import "../node_modules/bulma/sass/utilities/initial-variables"; //@import "../node_modules/bulma/sass/utilities/derived-variables"; @@ -20,7 +23,8 @@ $primary-invert: $blue-invert; $secondary: $light-blue; $secondary-invert: $light-blue-invert; -$navbar-dropdown-background-color: $secondary; +//$navbar-dropdown-background-color: $secondary; +$navbar-item-active-color: $primary; $custom-colors: ("secondary": ($secondary, $secondary-invert)); @@ -33,6 +37,8 @@ $tabs-link-active-border-bottom-color: $secondary; $list-item-active-background-color: $secondary; $list-radius: 0px; +$navbar-breakpoint: $tablet; + @import "../node_modules/bulma/bulma"; @import "../node_modules/bulma/sass/utilities/mixins"; @import "../node_modules/bulma-divider/dist/css/bulma-divider"; @@ -112,6 +118,12 @@ $app-container-height: calc(100% - #{$navbar-height}); } } +@include touch { + .hidden-touch { + display: none !important; + } +} + // text placeholder @keyframes placeHolderShimmer{ 0%{ @@ -142,7 +154,7 @@ $app-container-height: calc(100% - #{$navbar-height}); animation-name: placeHolderShimmer; animation-timing-function: linear; background: $secondary; - background: linear-gradient(to right, rgba(238,238,238,0.3) 8%, rgba(255,255,255,0.1) 18%, rgba(238,238,238,0.3) 33%); + background: linear-gradient(to right, rgba(238,238,238,0.7) 8%, rgba(255,255,255,0.4) 18%, rgba(238,238,238,0.7) 33%); background-size: 800px 104px; border-radius: 3rem; //height: 96px; diff --git a/testing/test-data.ts b/testing/test-data.ts index f74ba6b..9ad44e9 100644 --- a/testing/test-data.ts +++ b/testing/test-data.ts @@ -10,10 +10,10 @@ import { Location, Login, OclRequirement, - OperatingSystem, + OperatingSystem, Port, PortProvided, PortRequired, Queue, - Schedule, + Schedule, ServiceBehaviour, SingleProcess, Token } from 'cloudiator-rest-api'; @@ -32,7 +32,8 @@ export function testApiFactory(): Configuration { export const runtimeConfigOne: RuntimeConfig = { apiPath: 'testpath', xApiKey: 'testKey', - authMode: AuthMode.SINGLE + authMode: AuthMode.SINGLE, + sshTunnelPath: '' }; /* CLOUDS */ @@ -306,7 +307,7 @@ export const jobTwo: Job = { { name: 'wiki', ports: [ - { + { type: 'PortProvided', name: 'WIKIPROV', port: 80 @@ -357,12 +358,15 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -407,7 +411,10 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'loadbalancer', @@ -418,7 +425,7 @@ export const jobTwo: Job = { updateAction: './mediawiki-tutorial/scripts/lance/nginx.sh configure', isMandatory: false }, - { + { type: 'PortProvided', name: 'LBPROV', port: 80 @@ -463,7 +470,10 @@ export const jobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: [ @@ -576,7 +586,7 @@ export const JobOne: Job = { { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -617,7 +627,10 @@ export const JobOne: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: null, @@ -632,7 +645,7 @@ export const JobTwo: Job = { { name: 'database', ports: [ - { + { type: 'PortProvided', name: 'MARIADBPROV', port: 3306 @@ -673,7 +686,10 @@ export const JobTwo: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } } ], communications: null, @@ -694,7 +710,7 @@ export const JobThree: Job = { updateAction: './mediawiki-tutorial/scripts/lance/nginx.sh configure', isMandatory: false }, - { + { type: 'PortProvided', name: 'LBPROV', port: 80 @@ -735,7 +751,10 @@ export const JobThree: Job = { constraint: 'nodes->forAll(image.providerId = \'ami-0bb24d586ad9956e7\')' } ], - taskType: 'BATCH' + behaviour: { + type: 'ServiceBehaviour', + restart: true + } }, { name: 'wiki', @@ -1018,3 +1037,49 @@ export const tokenOne: Token = { issuedTime: Number.MIN_VALUE, expireTime: Number.MAX_VALUE }; + + +export const tempTestGraph = { + processes: [ + { + data: { + id: 'b28c30e3-82a8-409d-9979-d8a02ffa1294', + task: 'database', + state: 'RUNNING', + ipAddresses: [] + } + }, + { + data: { + id: '57167670-15d1-4ffd-9c02-39155ac75484', + task: 'wiki', + state: 'PENDING', + ipAddresses: [] + } + }, + { + data: { + id: 'c0565cd7-d87d-4fa8-bf87-b7836ef30f22', + task: 'loadbalancer', + state: 'ERROR', + ipAddresses: [] + } + } + ], + edges: [ + { + data: { + id: '609bfed46324322f7faa9c298bccaff1', + source: 'b28c30e3-82a8-409d-9979-d8a02ffa1294', + target: '57167670-15d1-4ffd-9c02-39155ac75484' + } + }, + { + data: { + id: '81240b9fdb5ae1fc37a1402450fe339c', + source: '57167670-15d1-4ffd-9c02-39155ac75484', + target: 'c0565cd7-d87d-4fa8-bf87-b7836ef30f22' + } + } + ] +};
+ + -