From ab757d86b0c1e3957ceb37c11c71422ff58308fb Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 16 Oct 2018 13:12:36 +0200 Subject: [PATCH 01/29] started work on yaml editor --- package.json | 3 +- src/app/app-routing.module.ts | 3 + src/app/app.module.ts | 2 + src/app/components/app/app.component.html | 7 +- .../cloud-view/cloud-view.component.html | 191 +++++++++--------- .../yaml-editor/yaml-editor.component.html | 35 ++++ .../yaml-editor/yaml-editor.component.scss | 17 ++ .../yaml-editor/yaml-editor.component.spec.ts | 25 +++ .../yaml-editor/yaml-editor.component.ts | 45 +++++ src/styles.scss | 6 + 10 files changed, 238 insertions(+), 96 deletions(-) create mode 100644 src/app/components/editor/yaml-editor/yaml-editor.component.html create mode 100644 src/app/components/editor/yaml-editor/yaml-editor.component.scss create mode 100644 src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts create mode 100644 src/app/components/editor/yaml-editor/yaml-editor.component.ts diff --git a/package.json b/package.json index ed086b2..42359b2 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@angular/platform-browser-dynamic": "^6.1.9", "@angular/router": "^6.1.9", "@ngrx/store": "^6.0.1", + "brace": "^0.11.1", "bulma-checkradio": "^2.1.0", "bulma-divider": "^2.0.1", "cloudiator-rest-api": "0.0.2-SNAPSHOT.201810100853", @@ -41,7 +42,7 @@ "@types/jasmine": "^2.8.9", "@types/jasminewd2": "^2.0.5", "@types/node": "~8.9.4", - "bulma": "^0.7.1", + "bulma": "^0.7.2", "codelyzer": "~4.2.1", "hoek": "^5.0.3", "jasmine-core": "~2.99.1", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2ae1e70..d2b7bec 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -6,6 +6,7 @@ import {CloudViewComponent} from './components/clouds/cloud-view/cloud-view.comp import {HardwareOverviewComponent} from './components/hardware/hardware-overview/hardware-overview.component'; import {ImagesOverviewComponent} from './components/images/images-overview/images-overview.component'; import {LocationsOverviewComponent} from './components/locations/locations-overview/locations-overview.component'; +import {YamlEditorComponent} from './components/editor/yaml-editor/yaml-editor.component'; const routes: Routes = [ @@ -19,6 +20,8 @@ const routes: Routes = [ {path: 'locations', component: LocationsOverviewComponent}, + {path: 'editor', component: YamlEditorComponent}, + {path: 'clouds', component: CloudOverviewComponent}, {path: '', component: CloudOverviewComponent}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b9944cb..1a169cb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import {HardwareOverviewComponent} from './components/hardware/hardware-overview import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from './components/images/images-overview/images-overview.component'; import { LocationsOverviewComponent } from './components/locations/locations-overview/locations-overview.component'; +import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -46,6 +47,7 @@ export function apiConfigFactory(): Configuration { HardwareOverviewComponent, ImagesOverviewComponent, LocationsOverviewComponent, + YamlEditorComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html index e800360..fc2e485 100644 --- a/src/app/components/app/app.component.html +++ b/src/app/components/app/app.component.html @@ -32,6 +32,9 @@ Locations + + Editor +
@@ -52,6 +55,6 @@ -
+ -
+ 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 37d8d49..f8c9e21 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.html +++ b/src/app/components/clouds/cloud-view/cloud-view.component.html @@ -1,112 +1,117 @@ -
-
-
-
-
-

- {{cloud.api.providerName}} -

-

- {{cloud.credential.user}} -

+ +
+
+
+
+
+

+ {{cloud.api.providerName}} +

+

+ {{cloud.credential.user}} +

+
-
-
-
+
+
+
-
-
+
-
-
- -
-
- Hardware -
-
- +
+
+ +
+
+ Hardware +
+
+
- - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - -
- Name - {{row.name}} + Name + {{row.name}} - Ram - {{row.ram}} + Ram + {{row.ram}} - Cores - {{row.cores}} + Cores + {{row.cores}} - Disk - {{row.disk}} + Disk + {{row.disk}}
+ + + + +
-
- -
-
Images
-
- + +
+
Images +
+
+
- - - - - + + + + + - - - - - + + + + + - - - -
- Name - {{row.name}} + Name + {{row.name}} - OS - {{row.operatingSystem ? row.operatingSystem.operatingSystemFamily : ''}} + OS + {{row.operatingSystem ? row.operatingSystem.operatingSystemFamily : + ''}} +
+ + + + +
-
- + + diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.html b/src/app/components/editor/yaml-editor/yaml-editor.component.html new file mode 100644 index 0000000..b6ea67b --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -0,0 +1,35 @@ +
+ + + + + + + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ some text
stst +
+
+
+
diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.scss b/src/app/components/editor/yaml-editor/yaml-editor.component.scss new file mode 100644 index 0000000..a52d7c1 --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.scss @@ -0,0 +1,17 @@ +@import "../../../../styles"; + +.editor-container { + display: flex; + height: 100%; + flex-direction: column; + //padding: 5px 0 0 0; + //border-right: 1px #{$grey-lighter} solid; + //background: black; +} + +.editor-header { + //margin: 5px; + //background: transparent; + border: 1px #{$grey-darker} solid; + padding: 7px 5px; +} 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 new file mode 100644 index 0000000..785a42a --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { YamlEditorComponent } from './yaml-editor.component'; + +describe('YamlEditorComponent', () => { + let component: YamlEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ YamlEditorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(YamlEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/editor/yaml-editor/yaml-editor.component.ts b/src/app/components/editor/yaml-editor/yaml-editor.component.ts new file mode 100644 index 0000000..3d40783 --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; +import * as ace from 'brace'; +import 'brace/mode/yaml'; +import 'brace/theme/monokai'; +import {Editor} from 'brace'; + +@Component({ + selector: 'app-yaml-editor', + templateUrl: './yaml-editor.component.html', + styleUrls: ['./yaml-editor.component.scss'] +}) +export class YamlEditorComponent implements OnInit { + + public editor: Editor; + + private options: any = { + showPrintMargin: false, + showInvisibles: false, + highlightGutterLine: false, + highlightActiveLine: false, + fadeFoldWidgets: true, + showLineNumbers: true, + fontSize: 16, + wrap: false, + mode: 'ace/mode/yaml' + }; + + constructor() { + } + + ngOnInit() { + this.editor = ace.edit('editor'); + this.editor.getSession().setMode('ace/mode/yaml'); + this.editor.setTheme('ace/theme/monokai'); + this.editor.setOptions(this.options); + this.editor.$blockScrolling = Infinity; + this.editor.setValue([ + 'sudo: required', + 'language: node_js', + 'node_js:', + '- node' + ].join('\n')); + this.editor.clearSelection(); + } +} diff --git a/src/styles.scss b/src/styles.scss index 6e03c4e..c618e9f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -30,6 +30,12 @@ $custom-colors: ("secondary": ($secondary, $secondary-invert)); // custom classes +$app-container-height: calc(100vh - #{$navbar-height}); + +.is-fullheight-container { + height: $app-container-height; +} + // container auto linewrap .is-flowing { From a318f7ed38c055da277a21d3692001086d33a52a Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 16 Oct 2018 13:45:34 +0200 Subject: [PATCH 02/29] fixxed sticky table headers showing over modals --- src/styles.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles.scss b/src/styles.scss index c618e9f..297e257 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -24,6 +24,8 @@ $navbar-dropdown-background-color: $secondary; $custom-colors: ("secondary": ($secondary, $secondary-invert)); +$modal-z: 200; + @import "../node_modules/bulma/bulma"; @import "../node_modules/bulma-divider/dist/css/bulma-divider"; @import "../node_modules/bulma-checkradio/dist/css/bulma-checkradio"; From 32f574d3e9e2aaa97e4d1eaff2252ab46eb13e33 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 16 Oct 2018 14:33:55 +0200 Subject: [PATCH 03/29] minor design changes --- src/app/components/app/app.component.html | 4 +- .../yaml-editor/yaml-editor.component.html | 54 +++++++++---------- .../yaml-editor/yaml-editor.component.scss | 6 +-- .../yaml-editor/yaml-editor.component.ts | 6 ++- src/styles.scss | 7 ++- 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html index fc2e485..285f501 100644 --- a/src/app/components/app/app.component.html +++ b/src/app/components/app/app.component.html @@ -55,6 +55,6 @@ - +
- +
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 b6ea67b..f44a1e0 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -1,35 +1,33 @@ -
- - - - - - - -
- -
-
-
-
-
-
- -
+ + + + + + + +
+ +
+
+
+
+
+
+
-
-
-
- -
-
- some text
stst +
+ +
+
+ some text
stst +
+
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 a52d7c1..9f568e5 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.scss +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.scss @@ -2,16 +2,12 @@ .editor-container { display: flex; + background: blue; height: 100%; flex-direction: column; - //padding: 5px 0 0 0; - //border-right: 1px #{$grey-lighter} solid; - //background: black; } .editor-header { - //margin: 5px; - //background: transparent; border: 1px #{$grey-darker} solid; padding: 7px 5px; } 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 3d40783..078ae80 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, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import * as ace from 'brace'; import 'brace/mode/yaml'; import 'brace/theme/monokai'; @@ -13,6 +13,8 @@ export class YamlEditorComponent implements OnInit { public editor: Editor; + public theme = 'monokai'; + private options: any = { showPrintMargin: false, showInvisibles: false, @@ -31,7 +33,7 @@ export class YamlEditorComponent implements OnInit { ngOnInit() { this.editor = ace.edit('editor'); this.editor.getSession().setMode('ace/mode/yaml'); - this.editor.setTheme('ace/theme/monokai'); + this.editor.setTheme(`ace/theme/${this.theme}`); this.editor.setOptions(this.options); this.editor.$blockScrolling = Infinity; this.editor.setValue([ diff --git a/src/styles.scss b/src/styles.scss index 297e257..397952d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -32,10 +32,15 @@ $modal-z: 200; // custom classes +html { + overflow: hidden; +} + $app-container-height: calc(100vh - #{$navbar-height}); -.is-fullheight-container { +.app-container { height: $app-container-height; + overflow-y: auto; } From 1d74ebf11f4dfb9854993f2568787e2bb83cf9cf Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 16 Oct 2018 14:41:30 +0200 Subject: [PATCH 04/29] clean up, fixed tests --- src/app/components/app/app.component.spec.ts | 4 +++- src/app/components/app/app.component.ts | 6 ------ .../editor/yaml-editor/yaml-editor.component.html | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/components/app/app.component.spec.ts b/src/app/components/app/app.component.spec.ts index b0f6b29..d4edf5f 100644 --- a/src/app/components/app/app.component.spec.ts +++ b/src/app/components/app/app.component.spec.ts @@ -10,6 +10,7 @@ import {HardwareOverviewComponent} from '../hardware/hardware-overview/hardware- import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from '../images/images-overview/images-overview.component'; import {LocationsOverviewComponent} from '../locations/locations-overview/locations-overview.component'; +import {YamlEditorComponent} from '../editor/yaml-editor/yaml-editor.component'; describe('AppComponent', () => { beforeEach(async(() => { @@ -22,7 +23,8 @@ describe('AppComponent', () => { CloudCardComponent, HardwareOverviewComponent, ImagesOverviewComponent, - LocationsOverviewComponent + LocationsOverviewComponent, + YamlEditorComponent ], imports: [ AppRoutingModule, diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index a8985b2..7fa4c16 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,10 +1,4 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; -import {RuntimeConfigService} from '../../services/runtime-config.service'; -import {ToastService} from '../../services/toast.service'; -import {Toast, ToastType} from '../../model/toast'; -import {text} from '@angular/core/src/render3/instructions'; -import {DialogService} from '../../services/dialog.service'; -import {ConfirmNewCloudDialogComponent} from '../../dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; import {NavigationStart, Router} from '@angular/router'; import {Subscription} from 'rxjs'; 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 f44a1e0..859575e 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -27,7 +27,7 @@
- some text
stst + some Content
From bcc02a76fe00fc9767d6d7d3fababd934e148247 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Wed, 24 Oct 2018 06:51:26 +0200 Subject: [PATCH 05/29] implemented basic yaml editor file down-/upload --- .gitignore | 1 + package.json | 1 + .../yaml-editor/yaml-editor.component.html | 23 ++++++++++++++++++- .../yaml-editor/yaml-editor.component.ts | 22 ++++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index dc0fb63..0313a28 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ # dependencies /node_modules +/node_modules_bak # IDEs and editors /.idea diff --git a/package.json b/package.json index 42359b2..a944f7b 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "bulma-divider": "^2.0.1", "cloudiator-rest-api": "0.0.2-SNAPSHOT.201810100853", "core-js": "^2.5.4", + "file-saver": "^2.0.0-rc.4", "rxjs": "^6.3.3", "zone.js": "^0.8.26" }, 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 859575e..5bec4c0 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -11,7 +11,28 @@
-
+
+
+

+ + +

+

+ +

+
+
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 078ae80..6903c1f 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -3,6 +3,7 @@ import * as ace from 'brace'; import 'brace/mode/yaml'; import 'brace/theme/monokai'; import {Editor} from 'brace'; +import saveAs from 'file-saver'; @Component({ selector: 'app-yaml-editor', @@ -44,4 +45,25 @@ export class YamlEditorComponent implements OnInit { ].join('\n')); this.editor.clearSelection(); } + + download() { + const filename = 'task.yaml'; + + const blob = new Blob([this.editor.getValue()], { + type: 'text/plain;charset=utf-8' + }); + + saveAs(blob, filename); + } + + onUploadChange(event) { + const reader = new FileReader(); + if (event.target.files && event.target.files.length > 0) { + const file = event.target.files[0]; + reader.readAsBinaryString(file); + reader.onload = () => { + this.editor.setValue(reader.result); + }; + } + } } From df5fa3d76a0103edd2006123471a711642928738 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Wed, 24 Oct 2018 08:37:33 +0200 Subject: [PATCH 06/29] added editor state to redux store and implemented unsaved editor badge --- package.json | 1 + src/app/actions/editor.actions.ts | 35 ++++++++++++++++++ src/app/components/app/app.component.html | 4 ++- src/app/components/app/app.component.ts | 9 ++++- .../yaml-editor/yaml-editor.component.html | 3 +- .../yaml-editor/yaml-editor.component.ts | 19 ++++++---- src/app/reducers/editor.reducer.ts | 36 +++++++++++++++++++ src/app/reducers/index.ts | 10 ++++++ src/styles.scss | 1 + 9 files changed, 108 insertions(+), 10 deletions(-) create mode 100644 src/app/actions/editor.actions.ts create mode 100644 src/app/reducers/editor.reducer.ts diff --git a/package.json b/package.json index a944f7b..25dfb97 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@angular/router": "^6.1.9", "@ngrx/store": "^6.0.1", "brace": "^0.11.1", + "bulma-badge": "^2.0.0", "bulma-checkradio": "^2.1.0", "bulma-divider": "^2.0.1", "cloudiator-rest-api": "0.0.2-SNAPSHOT.201810100853", diff --git a/src/app/actions/editor.actions.ts b/src/app/actions/editor.actions.ts new file mode 100644 index 0000000..70ea15c --- /dev/null +++ b/src/app/actions/editor.actions.ts @@ -0,0 +1,35 @@ +import {Action} from '@ngrx/store'; + + +export const SET_VALUE = '[Editor] set Value'; +export const SET_FILENAME = '[Editor] set Filename'; +export const UPLOAD_FILE = '[Editor] upload File'; +export const CHANGES_SAVED = '[Editor] changes saved'; + +export class SetValueAction implements Action { + readonly type = SET_VALUE; + + constructor(public value: string) { + } +} +export class SetFilenameAction implements Action { + readonly type = SET_FILENAME; + + constructor(public filename: string) { + } +} +export class UploadFileAction implements Action { + readonly type = UPLOAD_FILE; + + constructor(public value: string, public filename: string) { + + } +} +export class ChangesSavedAction implements Action { + readonly type = CHANGES_SAVED; + + constructor() { + } +} + +export type All = SetValueAction | SetFilenameAction | UploadFileAction | ChangesSavedAction; diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html index 285f501..79f7aa8 100644 --- a/src/app/components/app/app.component.html +++ b/src/app/components/app/app.component.html @@ -33,7 +33,9 @@ Locations - Editor + + Editor +
diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index 7fa4c16..1cd79d6 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,6 +1,8 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {NavigationStart, Router} from '@angular/router'; import {Subscription} from 'rxjs'; +import {select, Store} from '@ngrx/store'; +import * as fromRoot from '../../reducers'; /** * Entry point of this app, everything is shown in this Container. @@ -14,11 +16,14 @@ import {Subscription} from 'rxjs'; }) export class AppComponent implements OnInit, OnDestroy { + showBurgerMenu = false; + editorHasUnsavedChanges: boolean; private subscriptions: Subscription[] = []; - constructor(private router: Router) { + constructor(private router: Router, + private store: Store) { } ngOnInit() { @@ -29,6 +34,8 @@ export class AppComponent implements OnInit, OnDestroy { } }); + const s1 = this.store.pipe(select(fromRoot.editorHasUnsavedChanges)).subscribe(value => this.editorHasUnsavedChanges = value); + this.subscriptions.push(s0); } 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 5bec4c0..9fda271 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -40,7 +40,8 @@
+ style="height:100%;" + onChange="onEditorChange()">
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 6903c1f..480fe86 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -4,6 +4,9 @@ import 'brace/mode/yaml'; import 'brace/theme/monokai'; import {Editor} from 'brace'; import saveAs from 'file-saver'; +import {select, Store} from '@ngrx/store'; +import * as fromRoot from '../../../reducers'; +import * as fromEditor from '../../../actions/editor.actions'; @Component({ selector: 'app-yaml-editor', @@ -28,7 +31,7 @@ export class YamlEditorComponent implements OnInit { mode: 'ace/mode/yaml' }; - constructor() { + constructor(private store: Store) { } ngOnInit() { @@ -37,13 +40,13 @@ export class YamlEditorComponent implements OnInit { this.editor.setTheme(`ace/theme/${this.theme}`); this.editor.setOptions(this.options); this.editor.$blockScrolling = Infinity; - this.editor.setValue([ - 'sudo: required', - 'language: node_js', - 'node_js:', - '- node' - ].join('\n')); this.editor.clearSelection(); + this.editor.getSession().on('change', () => { + this.store.dispatch(new fromEditor.SetValueAction(this.editor.getValue())); + }); + + + this.store.pipe(select(fromRoot.getEditorValue)).subscribe(value => this.editor.setValue(value)).unsubscribe(); } download() { @@ -54,6 +57,7 @@ export class YamlEditorComponent implements OnInit { }); saveAs(blob, filename); + this.store.dispatch(new fromEditor.ChangesSavedAction()); } onUploadChange(event) { @@ -62,6 +66,7 @@ export class YamlEditorComponent implements OnInit { const file = event.target.files[0]; reader.readAsBinaryString(file); reader.onload = () => { + this.store.dispatch(new fromEditor.UploadFileAction(reader.result, file.name)); this.editor.setValue(reader.result); }; } diff --git a/src/app/reducers/editor.reducer.ts b/src/app/reducers/editor.reducer.ts new file mode 100644 index 0000000..b4b2b7e --- /dev/null +++ b/src/app/reducers/editor.reducer.ts @@ -0,0 +1,36 @@ +import * as editorActions from '../actions/editor.actions'; +import {Cloud} from 'cloudiator-rest-api'; +import {st} from '@angular/core/src/render3'; + + +export interface State { + originalValue: string; + value: string; + filename: string; + unsavedChanges: boolean; +} + +export const initialState = { + originalValue: '', + value: '', + filename: '', + unsavedChanges: false +}; + +export function reducer(state = initialState, action: editorActions.All): State { + switch (action.type) { + case editorActions.SET_VALUE: + return {...state, value: action.value, unsavedChanges: action.value !== state.originalValue}; + case editorActions.SET_FILENAME: + return {...state, filename: action.filename}; + case editorActions.UPLOAD_FILE: + return {...state, originalValue: action.value, value: action.value, filename: action.filename, unsavedChanges: false}; + case editorActions.CHANGES_SAVED: + return {...state, unsavedChanges: false, originalValue: state.value}; + } + return state; +} + +export const getValue = (state: State): string => state.value; +export const getFilename = (state: State): string => state.filename; +export const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts index cbdec80..bf78a74 100644 --- a/src/app/reducers/index.ts +++ b/src/app/reducers/index.ts @@ -2,17 +2,20 @@ import {ActionReducerMap, createFeatureSelector, createSelector} from '@ngrx/sto import * as fromUserSettings from './user-settings.reducer'; import * as fromCloudData from './cloud-data.reducer'; +import * as fromEditor from './editor.reducer'; import * as fromRuntimeConfig from './runtime-config.reducer'; /* State */ export interface State { cloudData: fromCloudData.State; + editor: fromEditor.State; userSettings: fromUserSettings.State; runtimeConfig: fromRuntimeConfig.State; } export const globalInitialState: State = { cloudData: fromCloudData.initialState, + editor: fromEditor.initialState, userSettings: fromUserSettings.initialState, runtimeConfig: fromRuntimeConfig.initialState }; @@ -20,6 +23,7 @@ export const globalInitialState: State = { /* Map of all Reducers */ export const reducers: ActionReducerMap = { cloudData: fromCloudData.reducer, + editor: fromEditor.reducer, userSettings: fromUserSettings.reducer, runtimeConfig: fromRuntimeConfig.reducer }; @@ -27,6 +31,7 @@ export const reducers: ActionReducerMap = { /* States */ export const cloudDataState = (state: State): fromCloudData.State => state.cloudData; +export const editorState = (state: State): fromEditor.State => state.editor; export const userSettingsState = (state: State): fromUserSettings.State => state.userSettings; export const runtimeConfigState = (state: State): fromRuntimeConfig.State => state.runtimeConfig; @@ -38,6 +43,11 @@ export const getHardware = createSelector(cloudDataState, fromCloudData.getHardw export const getImages = createSelector(cloudDataState, fromCloudData.getImages); export const getLocations = createSelector(cloudDataState, fromCloudData.getLocations); +/* Editor */ +export const getEditorValue = createSelector(editorState, fromEditor.getValue); +export const getEditorFilename = createSelector(editorState, fromEditor.getFilename); +export const editorHasUnsavedChanges = createSelector(editorState, fromEditor.hasUnsavedChanges); + /* User Settings */ export const getUserSettings = createSelector(userSettingsState, fromUserSettings.getUserSettings); diff --git a/src/styles.scss b/src/styles.scss index 397952d..d4147ff 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,6 +29,7 @@ $modal-z: 200; @import "../node_modules/bulma/bulma"; @import "../node_modules/bulma-divider/dist/css/bulma-divider"; @import "../node_modules/bulma-checkradio/dist/css/bulma-checkradio"; +@import "../node_modules/bulma-badge/dist/css/bulma-badge"; // custom classes From db82db47e6d065fc3070302264fc3c8b0cd9127e Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Wed, 24 Oct 2018 09:20:36 +0200 Subject: [PATCH 07/29] added confirmation message if editor hast unsaved changes --- src/app/components/app/app.component.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index 1cd79d6..347a8dd 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,8 +1,9 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Component, HostListener, OnDestroy, OnInit} from '@angular/core'; import {NavigationStart, Router} from '@angular/router'; -import {Subscription} from 'rxjs'; +import {of, Subscription} from 'rxjs'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../../reducers'; +import {fakeAsync} from '@angular/core/testing'; /** * Entry point of this app, everything is shown in this Container. @@ -16,7 +17,6 @@ import * as fromRoot from '../../reducers'; }) export class AppComponent implements OnInit, OnDestroy { - showBurgerMenu = false; editorHasUnsavedChanges: boolean; @@ -26,6 +26,14 @@ export class AppComponent implements OnInit, OnDestroy { private store: Store) { } + @HostListener('window:beforeunload') + unloadNotification() { + if (this.editorHasUnsavedChanges) { + return false; + } + return true; + } + ngOnInit() { const s0 = this.router.events.subscribe(event => { From 806815d7e894aa71ca55963c8574acfa2d17cc58 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Wed, 24 Oct 2018 19:23:28 +0200 Subject: [PATCH 08/29] minor design tweaks --- .../editor/yaml-editor/yaml-editor.component.html | 13 +++++++++++-- .../editor/yaml-editor/yaml-editor.component.scss | 11 +++++++++++ .../editor/yaml-editor/yaml-editor.component.ts | 14 +++++++++++++- src/app/reducers/editor.reducer.ts | 2 +- 4 files changed, 36 insertions(+), 4 deletions(-) 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 9fda271..0882ef7 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -10,11 +10,13 @@
+

- +

+

+
+ +
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 9f568e5..a9d9ff2 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.scss +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.scss @@ -11,3 +11,14 @@ border: 1px #{$grey-darker} solid; padding: 7px 5px; } + +#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.ts b/src/app/components/editor/yaml-editor/yaml-editor.component.ts index 480fe86..0568a9f 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -17,6 +17,16 @@ export class YamlEditorComponent implements OnInit { public editor: Editor; + private _filename: string; + get filename(): string { + return this._filename; + } + + set filename(filename: string) { + this.store.dispatch(new fromEditor.SetFilenameAction(filename)); + this._filename = filename; + } + public theme = 'monokai'; private options: any = { @@ -47,10 +57,11 @@ export class YamlEditorComponent implements OnInit { this.store.pipe(select(fromRoot.getEditorValue)).subscribe(value => this.editor.setValue(value)).unsubscribe(); + this.store.pipe(select(fromRoot.getEditorFilename)).subscribe(filename => this._filename = filename).unsubscribe(); } download() { - const filename = 'task.yaml'; + const filename = this._filename; const blob = new Blob([this.editor.getValue()], { type: 'text/plain;charset=utf-8' @@ -68,6 +79,7 @@ export class YamlEditorComponent implements OnInit { reader.onload = () => { this.store.dispatch(new fromEditor.UploadFileAction(reader.result, file.name)); this.editor.setValue(reader.result); + this._filename = file.name; }; } } diff --git a/src/app/reducers/editor.reducer.ts b/src/app/reducers/editor.reducer.ts index b4b2b7e..d0a24c4 100644 --- a/src/app/reducers/editor.reducer.ts +++ b/src/app/reducers/editor.reducer.ts @@ -13,7 +13,7 @@ export interface State { export const initialState = { originalValue: '', value: '', - filename: '', + filename: 'unnamed.yaml', unsavedChanges: false }; From 98e457eebee556a63d2a8cada47455f7bf44deeb Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Wed, 24 Oct 2018 19:35:34 +0200 Subject: [PATCH 09/29] fixed broken tests --- src/app/components/app/app.component.spec.ts | 6 ++++++ .../yaml-editor/yaml-editor.component.spec.ts | 18 ++++++++++++++---- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/app/components/app/app.component.spec.ts b/src/app/components/app/app.component.spec.ts index d4edf5f..4956778 100644 --- a/src/app/components/app/app.component.spec.ts +++ b/src/app/components/app/app.component.spec.ts @@ -11,6 +11,8 @@ import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from '../images/images-overview/images-overview.component'; import {LocationsOverviewComponent} from '../locations/locations-overview/locations-overview.component'; import {YamlEditorComponent} from '../editor/yaml-editor/yaml-editor.component'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../../reducers'; describe('AppComponent', () => { beforeEach(async(() => { @@ -27,6 +29,10 @@ describe('AppComponent', () => { YamlEditorComponent ], imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }), AppRoutingModule, FormsModule, ReactiveFormsModule, 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 785a42a..4a21298 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 @@ -1,6 +1,9 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { YamlEditorComponent } from './yaml-editor.component'; +import {YamlEditorComponent} from './yaml-editor.component'; +import {FormsModule} from '@angular/forms'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../../../reducers'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -8,9 +11,16 @@ describe('YamlEditorComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ YamlEditorComponent ] + declarations: [YamlEditorComponent], + imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }), + FormsModule, + ] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { From 2dd35feca81f2e03429c6f304f5dfc5ee031f5e9 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Fri, 26 Oct 2018 12:11:39 +0200 Subject: [PATCH 10/29] upgraded angular to version 7 --- package.json | 48 +++++++++---------- .../yaml-editor/yaml-editor.component.ts | 4 +- src/app/reducers/editor.reducer.ts | 2 - 3 files changed, 26 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 25dfb97..6c4bbf1 100644 --- a/package.json +++ b/package.json @@ -14,51 +14,51 @@ }, "private": true, "dependencies": { - "@angular/animations": "^6.1.9", - "@angular/cdk": "^6.4.2", - "@angular/common": "^6.1.9", - "@angular/compiler": "^6.1.9", - "@angular/core": "^6.1.9", - "@angular/forms": "^6.1.9", - "@angular/http": "^6.1.9", - "@angular/platform-browser": "^6.1.9", - "@angular/platform-browser-dynamic": "^6.1.9", - "@angular/router": "^6.1.9", - "@ngrx/store": "^6.0.1", + "@angular/animations": "^7.0.1", + "@angular/cdk": "^7.0.1", + "@angular/common": "^7.0.1", + "@angular/compiler": "^7.0.1", + "@angular/core": "^7.0.1", + "@angular/forms": "^7.0.1", + "@angular/http": "^7.0.1", + "@angular/platform-browser": "^7.0.1", + "@angular/platform-browser-dynamic": "^7.0.1", + "@angular/router": "^7.0.1", + "@ngrx/store": "^6.1.0", "brace": "^0.11.1", "bulma-badge": "^2.0.0", "bulma-checkradio": "^2.1.0", "bulma-divider": "^2.0.1", - "cloudiator-rest-api": "0.0.2-SNAPSHOT.201810100853", + "cloudiator-rest-api": "^1.0.0", "core-js": "^2.5.4", "file-saver": "^2.0.0-rc.4", "rxjs": "^6.3.3", "zone.js": "^0.8.26" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.8.3", - "@angular/cli": "~6.0.8", - "@angular/compiler-cli": "^6.1.9", - "@angular/language-service": "^6.1.9", + "@angular-devkit/build-angular": "^0.10.3", + "@angular/cli": "^7.0.3", + "@angular/compiler-cli": "^7.0.1", + "@angular/language-service": "^7.0.1", "@compodoc/compodoc": "^1.1.3", "@types/jasmine": "^2.8.9", "@types/jasminewd2": "^2.0.5", - "@types/node": "~8.9.4", + "@types/node": "^10.12.0", "bulma": "^0.7.2", - "codelyzer": "~4.2.1", + "codelyzer": "^4.5.0", "hoek": "^5.0.3", - "jasmine-core": "~2.99.1", + "jasmine-core": "^3.3.0", "jasmine-spec-reporter": "~4.2.1", - "karma": "^3.0.0", + "karma": "^3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.0.4", "karma-jasmine": "~1.1.1", - "karma-jasmine-html-reporter": "^0.2.2", + "karma-jasmine-html-reporter": "^1.3.1", "karma-phantomjs-launcher": "^1.0.4", "karma-teamcity-reporter": "^1.1.0", "protractor": "^5.4.1", - "ts-node": "~5.0.1", - "tslint": "~5.9.1", - "typescript": "~2.7.2" + "ts-node": "^7.0.1", + "tslint": "^5.11.0", + "typescript": "^3.1.3" } } 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 0568a9f..6dbf843 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -77,8 +77,8 @@ export class YamlEditorComponent implements OnInit { const file = event.target.files[0]; reader.readAsBinaryString(file); reader.onload = () => { - this.store.dispatch(new fromEditor.UploadFileAction(reader.result, file.name)); - this.editor.setValue(reader.result); + this.store.dispatch(new fromEditor.UploadFileAction(reader.result.toString(), file.name)); + this.editor.setValue(reader.result.toString()); this._filename = file.name; }; } diff --git a/src/app/reducers/editor.reducer.ts b/src/app/reducers/editor.reducer.ts index d0a24c4..df55661 100644 --- a/src/app/reducers/editor.reducer.ts +++ b/src/app/reducers/editor.reducer.ts @@ -1,6 +1,4 @@ import * as editorActions from '../actions/editor.actions'; -import {Cloud} from 'cloudiator-rest-api'; -import {st} from '@angular/core/src/render3'; export interface State { From a1421885932dae41dc14991d65031298ba090387 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 20 Nov 2018 18:44:17 +0100 Subject: [PATCH 11/29] implemented yaml editor validation request. --- package.json | 2 +- src/app/components/app/app.component.ts | 8 ++--- .../yaml-editor/yaml-editor.component.html | 2 +- .../yaml-editor/yaml-editor.component.ts | 9 +++++- src/app/services/yaml-data-service.spec.ts | 12 +++++++ src/app/services/yaml-data-service.ts | 31 +++++++++++++++++++ 6 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 src/app/services/yaml-data-service.spec.ts create mode 100644 src/app/services/yaml-data-service.ts diff --git a/package.json b/package.json index 6c4bbf1..613422a 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "bulma-badge": "^2.0.0", "bulma-checkradio": "^2.1.0", "bulma-divider": "^2.0.1", - "cloudiator-rest-api": "^1.0.0", + "cloudiator-rest-api": "^1.1.0", "core-js": "^2.5.4", "file-saver": "^2.0.0-rc.4", "rxjs": "^6.3.3", diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index 347a8dd..6bc992c 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -28,10 +28,7 @@ export class AppComponent implements OnInit, OnDestroy { @HostListener('window:beforeunload') unloadNotification() { - if (this.editorHasUnsavedChanges) { - return false; - } - return true; + return !this.editorHasUnsavedChanges; } ngOnInit() { @@ -44,11 +41,12 @@ export class AppComponent implements OnInit, OnDestroy { const s1 = this.store.pipe(select(fromRoot.editorHasUnsavedChanges)).subscribe(value => this.editorHasUnsavedChanges = value); - this.subscriptions.push(s0); + this.subscriptions.push(s0, s1); } ngOnDestroy() { this.subscriptions.forEach(s => s.unsubscribe()); } + } 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 0882ef7..ec0b9b9 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -43,7 +43,7 @@ name="filename">
- +
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 6dbf843..0044fce 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -7,6 +7,7 @@ import saveAs from 'file-saver'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; import * as fromEditor from '../../../actions/editor.actions'; +import {YamlDataService} from '../../../services/yaml-data-service'; @Component({ selector: 'app-yaml-editor', @@ -41,7 +42,8 @@ export class YamlEditorComponent implements OnInit { mode: 'ace/mode/yaml' }; - constructor(private store: Store) { + constructor(private store: Store, + private yamlDataService: YamlDataService) { } ngOnInit() { @@ -83,4 +85,9 @@ export class YamlEditorComponent implements OnInit { }; } } + + onValidate() { + console.log('yaml sent'); + this.yamlDataService.parseYaml(this.editor.getValue()).subscribe(value => console.log(value)); + } } diff --git a/src/app/services/yaml-data-service.spec.ts b/src/app/services/yaml-data-service.spec.ts new file mode 100644 index 0000000..53ade12 --- /dev/null +++ b/src/app/services/yaml-data-service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { YamlDataService } from './yaml-data-service'; + +describe('YamlDataServiceService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: YamlDataService = TestBed.get(YamlDataService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/yaml-data-service.ts b/src/app/services/yaml-data-service.ts new file mode 100644 index 0000000..820050d --- /dev/null +++ b/src/app/services/yaml-data-service.ts @@ -0,0 +1,31 @@ +import {Injectable} from '@angular/core'; +import {RuntimeConfigService} from './runtime-config.service'; +import {ToastService} from './toast.service'; +import {Job, YamlService} from 'cloudiator-rest-api'; +import {Observable} from 'rxjs'; +import {HttpResponse} from '@angular/common/http'; +import {select, Store} from '@ngrx/store'; +import * as fromRoot from '../reducers'; + +@Injectable({ + providedIn: 'root' +}) +export class YamlDataService { + + constructor(private yamlApiService: YamlService, + private runtimeConfigService: RuntimeConfigService, + private store: Store, + private toastService: ToastService) { + + store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { + yamlApiService.basePath = config.apiPath; + if (yamlApiService.configuration) { + yamlApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; + } + }); + } + + public parseYaml(yaml: string): Observable> { + return this.yamlApiService.parseYAML(yaml, 'response'); + } +} From dd86369e645c77003e2702fb08b6d90e0fa3bc47 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Wed, 21 Nov 2018 17:42:13 +0100 Subject: [PATCH 12/29] added cytoscape graph and error handling on parseYaml --- package.json | 1 + src/app/app.module.ts | 2 + .../yaml-editor/yaml-editor.component.html | 5 +- .../yaml-editor/yaml-editor.component.ts | 23 ++++- .../yaml-graph/yaml-graph.component.html | 1 + .../yaml-graph/yaml-graph.component.scss | 0 .../yaml-graph/yaml-graph.component.spec.ts | 25 ++++++ .../editor/yaml-graph/yaml-graph.component.ts | 71 +++++++++++++++ src/app/services/yaml-data-service.ts | 24 +++-- testing/test-data.ts | 89 ++++++++++++++++++- 10 files changed, 227 insertions(+), 14 deletions(-) create mode 100644 src/app/components/editor/yaml-graph/yaml-graph.component.html create mode 100644 src/app/components/editor/yaml-graph/yaml-graph.component.scss create mode 100644 src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts create mode 100644 src/app/components/editor/yaml-graph/yaml-graph.component.ts diff --git a/package.json b/package.json index 613422a..1d52b8c 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "bulma-divider": "^2.0.1", "cloudiator-rest-api": "^1.1.0", "core-js": "^2.5.4", + "cytoscape": "^3.2.20", "file-saver": "^2.0.0-rc.4", "rxjs": "^6.3.3", "zone.js": "^0.8.26" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1a169cb..f167510 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from './components/images/images-overview/images-overview.component'; import { LocationsOverviewComponent } from './components/locations/locations-overview/locations-overview.component'; import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; +import { YamlGraphComponent } from './components/editor/yaml-graph/yaml-graph.component'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -48,6 +49,7 @@ export function apiConfigFactory(): Configuration { ImagesOverviewComponent, LocationsOverviewComponent, YamlEditorComponent, + YamlGraphComponent, ], imports: [ BrowserModule, 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 ec0b9b9..d1ea0a1 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -56,9 +56,6 @@
-
- some Content +
-
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 0044fce..4d15429 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -1,13 +1,16 @@ import {Component, OnInit} from '@angular/core'; import * as ace from 'brace'; +import {Editor} from 'brace'; import 'brace/mode/yaml'; import 'brace/theme/monokai'; -import {Editor} from 'brace'; import saveAs from 'file-saver'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; import * as fromEditor from '../../../actions/editor.actions'; import {YamlDataService} from '../../../services/yaml-data-service'; +import {graphData} from '../../../../../testing/test-data'; +import {ToastService} from '../../../services/toast.service'; +import {ToastType} from '../../../model/toast'; @Component({ selector: 'app-yaml-editor', @@ -42,7 +45,10 @@ export class YamlEditorComponent implements OnInit { mode: 'ace/mode/yaml' }; + public graphData: any = graphData; + constructor(private store: Store, + private toastService: ToastService, private yamlDataService: YamlDataService) { } @@ -88,6 +94,19 @@ export class YamlEditorComponent implements OnInit { onValidate() { console.log('yaml sent'); - this.yamlDataService.parseYaml(this.editor.getValue()).subscribe(value => console.log(value)); + this.yamlDataService.parseYaml(this.editor.getValue()) + .then(job => { + // ToDo: implement behaviour on valid yaml when working test environment exists. + console.log(job); + }) + .catch(err => { + switch (err.status) { + case 400: + this.toastService.show({text: 'Invalid YAML', type: ToastType.DANGER}, true); + break; + default: + console.log(err); + } + }); } } diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.html b/src/app/components/editor/yaml-graph/yaml-graph.component.html new file mode 100644 index 0000000..2814da6 --- /dev/null +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.html @@ -0,0 +1 @@ +
diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.scss b/src/app/components/editor/yaml-graph/yaml-graph.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts new file mode 100644 index 0000000..1e79033 --- /dev/null +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { YamlGraphComponent } from './yaml-graph.component'; + +describe('YamlGraphComponent', () => { + let component: YamlGraphComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ YamlGraphComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(YamlGraphComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.ts b/src/app/components/editor/yaml-graph/yaml-graph.component.ts new file mode 100644 index 0000000..2d8b2e6 --- /dev/null +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -0,0 +1,71 @@ +import {Component, Input, OnInit} from '@angular/core'; +import * as cytoscape from 'cytoscape'; +import coseBilkent from 'cytoscape-cose-bilkent'; + + +@Component({ + selector: 'app-yaml-graph', + templateUrl: './yaml-graph.component.html', + styleUrls: ['./yaml-graph.component.scss'] +}) +export class YamlGraphComponent implements OnInit { + + @Input() graphData: any; + + constructor() { + } + + ngOnInit() { + // cytoscape.use( coseBilkent ); + const cy = cytoscape({ + container: document.getElementById('cy'), + elements: this.graphData, + style: [{ + 'selector': 'node', + 'style': { + 'width': '50%', + 'height': '50%', + 'content': 'data(name)', + 'font-size': '12px', + 'text-valign': 'center', + 'text-halign': 'center', + 'background-color': '#00447a', + 'text-outline-color': '#00447a', + 'text-outline-width': '1px', + 'color': '#fff', + 'z-index': '10' + } + }, { + 'selector': 'edge', + 'style': { + 'opacity': '0.9', + 'line-color': '#92acbe', + 'width': '5px', + 'overlay-padding': '3px' + } + }, { + 'selector': 'edge.unhighlighted', + 'style': { + 'opacity': '0.05' + } + }] + }); + const circLayout = { + name: 'circle', + fit: true, + padding: 30, + avoidOverlap: true, + boundingBox: undefined, + animate: false, + counterclockwise: false, + radius: 2, + startAngle: 3 / 2 * Math.PI + }; + cy.maxZoom(2); + cy.minZoom(0.5); + cy.layout(circLayout).run(); + cy.elements('node').forEach(ele => ele.ungrabify()); + cy.elements('node').forEach(ele => ele.unselectify()); + } + +} diff --git a/src/app/services/yaml-data-service.ts b/src/app/services/yaml-data-service.ts index 820050d..f31612c 100644 --- a/src/app/services/yaml-data-service.ts +++ b/src/app/services/yaml-data-service.ts @@ -2,10 +2,12 @@ import {Injectable} from '@angular/core'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from './toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; -import {Observable} from 'rxjs'; -import {HttpResponse} from '@angular/common/http'; +import {Observable, throwError} from 'rxjs'; +import {HttpClient} from '@angular/common/http'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../reducers'; +import {catchError} from 'rxjs/operators'; +import {ToastType} from '../model/toast'; @Injectable({ providedIn: 'root' @@ -15,7 +17,8 @@ export class YamlDataService { constructor(private yamlApiService: YamlService, private runtimeConfigService: RuntimeConfigService, private store: Store, - private toastService: ToastService) { + private toastService: ToastService, + private httpClient: HttpClient) { store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { yamlApiService.basePath = config.apiPath; @@ -25,7 +28,18 @@ export class YamlDataService { }); } - public parseYaml(yaml: string): Observable> { - return this.yamlApiService.parseYAML(yaml, 'response'); + public parseYaml(yaml: string): Promise { + return this.yamlApiService.parseYAML(yaml) + .pipe(catchError(err => { + switch (err.status) { + case 400: + case 504: + this.toastService.show({text: 'Server had an internal Error', type: ToastType.DANGER}, true); + return throwError(err); + default: + return throwError(err); + } + })) + .toPromise(); } } diff --git a/testing/test-data.ts b/testing/test-data.ts index b070638..be92078 100644 --- a/testing/test-data.ts +++ b/testing/test-data.ts @@ -6,7 +6,7 @@ export const allClouds: Cloud[] = [ id: '1234', endpoint: 'endpoint.com', cloudType: 'PRIVATE', - api: {}, + api: {}, cloudConfiguration: { nodeGroup: 'nodes', properties: { @@ -43,7 +43,7 @@ export const cloudOne: Cloud = { id: '1234', endpoint: 'endpoint.com', cloudType: 'PRIVATE', - api: {}, + api: {}, cloudConfiguration: { nodeGroup: 'nodes', properties: [ @@ -80,7 +80,7 @@ export const cloudTwo: Cloud = { 'sword.regions': 'RegionOne, RegionTwo' } } -} +}; export const hardwareOne: Hardware = { id: '02f7f6ab33e4a94d0f441947972668ef~RegionOne/931b887e-e747-4a66-b643-0cc5c0caa1cd', @@ -211,3 +211,86 @@ export const allImages: Image[] = [ imageTwo, imageThree ]; + +export const graphData: any = { + nodes: [ + { + data: { + id: 'wiki', + name: 'wiki' + } + }, + { + data: { + id: 'loadbalancer', + name: 'loadbalancer' + } + }, + { + data: { + id: 'database', + name: 'database' + } + } + // , + // { + // data: { + // id: 'database1', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database2', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database3', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database4', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database5', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database6', + // name: 'database' + // } + // }, + // { + // data: { + // id: 'database7', + // name: 'database' + // } + // } + ], + edges: [ + { + data: { + id: -222996446, + source: 'wiki', + target: 'loadbalancer' + } + }, + { + data: { + id: -1368644092, + source: 'database', + target: 'wiki' + }, + classes: 'mandatory' + } + ] +}; From 601b6f39338e87c386de1635dc156fa1b74e1518 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Wed, 21 Nov 2018 18:31:50 +0100 Subject: [PATCH 13/29] fixed faulty import --- src/app/components/editor/yaml-graph/yaml-graph.component.ts | 1 - 1 file changed, 1 deletion(-) 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 2d8b2e6..a6b86f4 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -1,6 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; import * as cytoscape from 'cytoscape'; -import coseBilkent from 'cytoscape-cose-bilkent'; @Component({ From c62c36bef640b2f13e2bcd43d0859278dca5e25b Mon Sep 17 00:00:00 2001 From: RINO767 Date: Wed, 21 Nov 2018 18:55:33 +0100 Subject: [PATCH 14/29] basic test fixes --- src/app/services/yaml-data-service.spec.ts | 12 ------ src/app/services/yaml-data.service.spec.ts | 37 +++++++++++++++++++ ...l-data-service.ts => yaml-data.service.ts} | 0 3 files changed, 37 insertions(+), 12 deletions(-) delete mode 100644 src/app/services/yaml-data-service.spec.ts create mode 100644 src/app/services/yaml-data.service.spec.ts rename src/app/services/{yaml-data-service.ts => yaml-data.service.ts} (100%) diff --git a/src/app/services/yaml-data-service.spec.ts b/src/app/services/yaml-data-service.spec.ts deleted file mode 100644 index 53ade12..0000000 --- a/src/app/services/yaml-data-service.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { YamlDataService } from './yaml-data-service'; - -describe('YamlDataServiceService', () => { - beforeEach(() => TestBed.configureTestingModule({})); - - it('should be created', () => { - const service: YamlDataService = TestBed.get(YamlDataService); - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/yaml-data.service.spec.ts b/src/app/services/yaml-data.service.spec.ts new file mode 100644 index 0000000..490efc5 --- /dev/null +++ b/src/app/services/yaml-data.service.spec.ts @@ -0,0 +1,37 @@ +import { TestBed } from '@angular/core/testing'; + +import { YamlDataService } from './yaml-data.service'; +import {ApiModule} from 'cloudiator-rest-api'; +import {HttpClientModule} from '@angular/common/http'; +import {apiConfigFactory} from '../app.module'; +import {DialogService} from './dialog.service'; +import {ToastService} from './toast.service'; +import {Overlay} from '@angular/cdk/overlay'; +import {Injector} from '@angular/core'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../reducers'; + +describe('YamlDataService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }), + HttpClientModule, + ApiModule.forRoot(apiConfigFactory) + ], + providers: [ + YamlDataService, + DialogService, + ToastService, + Overlay, + Injector + ] + })); + + it('should be created', () => { + const service: YamlDataService = TestBed.get(YamlDataService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/yaml-data-service.ts b/src/app/services/yaml-data.service.ts similarity index 100% rename from src/app/services/yaml-data-service.ts rename to src/app/services/yaml-data.service.ts From cc242d49982c66588ac9af813e8354f91c8a8534 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Sat, 24 Nov 2018 13:28:33 +0100 Subject: [PATCH 15/29] implemented graph display after yaml validation --- package.json | 14 +-- src/app/actions/editor.actions.ts | 13 +- src/app/actions/job-data.actions.ts | 15 +++ src/app/components/app/app.component.spec.ts | 4 +- src/app/components/app/app.component.ts | 15 ++- .../yaml-editor/yaml-editor.component.html | 4 +- .../yaml-editor/yaml-editor.component.spec.ts | 19 ++- .../yaml-editor/yaml-editor.component.ts | 55 ++++---- .../yaml-graph/yaml-graph.component.spec.ts | 10 +- .../editor/yaml-graph/yaml-graph.component.ts | 117 ++++++++++-------- src/app/reducers/editor.reducer.ts | 7 +- src/app/reducers/index.ts | 9 ++ src/app/reducers/job-data.reducer.ts | 23 ++++ src/app/services/editor.service.spec.ts | 21 ++++ src/app/services/editor.service.ts | 74 +++++++++++ src/app/services/job-data.service.spec.ts | 35 ++++++ src/app/services/job-data.service.ts | 49 ++++++++ src/app/services/yaml-data.service.ts | 35 +++--- 18 files changed, 396 insertions(+), 123 deletions(-) create mode 100644 src/app/actions/job-data.actions.ts create mode 100644 src/app/reducers/job-data.reducer.ts create mode 100644 src/app/services/editor.service.spec.ts create mode 100644 src/app/services/editor.service.ts create mode 100644 src/app/services/job-data.service.spec.ts create mode 100644 src/app/services/job-data.service.ts diff --git a/package.json b/package.json index 1d52b8c..e22fde6 100644 --- a/package.json +++ b/package.json @@ -42,19 +42,19 @@ "@angular/compiler-cli": "^7.0.1", "@angular/language-service": "^7.0.1", "@compodoc/compodoc": "^1.1.3", - "@types/jasmine": "^2.8.9", - "@types/jasminewd2": "^2.0.5", + "@types/jasmine": "~2.8.8", + "@types/jasminewd2": "~2.0.3", "@types/node": "^10.12.0", "bulma": "^0.7.2", "codelyzer": "^4.5.0", "hoek": "^5.0.3", - "jasmine-core": "^3.3.0", + "jasmine-core": "^2.99.1", "jasmine-spec-reporter": "~4.2.1", - "karma": "^3.1.1", + "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "^2.0.4", - "karma-jasmine": "~1.1.1", - "karma-jasmine-html-reporter": "^1.3.1", + "karma-coverage-istanbul-reporter": "^2.0.1", + "karma-jasmine": "~1.1.2", + "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.4", "karma-teamcity-reporter": "^1.1.0", "protractor": "^5.4.1", diff --git a/src/app/actions/editor.actions.ts b/src/app/actions/editor.actions.ts index 70ea15c..530fe0d 100644 --- a/src/app/actions/editor.actions.ts +++ b/src/app/actions/editor.actions.ts @@ -3,6 +3,7 @@ import {Action} from '@ngrx/store'; export const SET_VALUE = '[Editor] set Value'; export const SET_FILENAME = '[Editor] set Filename'; +export const SET_EDITOR_GRAPH = '[Editor] set editorGraph'; export const UPLOAD_FILE = '[Editor] upload File'; export const CHANGES_SAVED = '[Editor] changes saved'; @@ -12,12 +13,21 @@ export class SetValueAction implements Action { constructor(public value: string) { } } + export class SetFilenameAction implements Action { readonly type = SET_FILENAME; constructor(public filename: string) { } } + +export class SetEditorGraphAction implements Action { + readonly type = SET_EDITOR_GRAPH; + + constructor(public editorGraph: any) { + } +} + export class UploadFileAction implements Action { readonly type = UPLOAD_FILE; @@ -25,6 +35,7 @@ export class UploadFileAction implements Action { } } + export class ChangesSavedAction implements Action { readonly type = CHANGES_SAVED; @@ -32,4 +43,4 @@ export class ChangesSavedAction implements Action { } } -export type All = SetValueAction | SetFilenameAction | UploadFileAction | ChangesSavedAction; +export type All = SetValueAction | SetFilenameAction | SetEditorGraphAction | UploadFileAction | ChangesSavedAction; diff --git a/src/app/actions/job-data.actions.ts b/src/app/actions/job-data.actions.ts new file mode 100644 index 0000000..137a4ea --- /dev/null +++ b/src/app/actions/job-data.actions.ts @@ -0,0 +1,15 @@ +import {Job} from 'cloudiator-rest-api'; +import {Action} from '@ngrx/store'; + + +export const SET_JOBS = '[Jobdata] set jobs'; + +export class SetJobsActiom implements Action { + readonly type = SET_JOBS; + + constructor(public jobs: Job[]) { + } +} + + +export type All = SetJobsActiom; diff --git a/src/app/components/app/app.component.spec.ts b/src/app/components/app/app.component.spec.ts index 4956778..6cfe05e 100644 --- a/src/app/components/app/app.component.spec.ts +++ b/src/app/components/app/app.component.spec.ts @@ -13,6 +13,7 @@ import {LocationsOverviewComponent} from '../locations/locations-overview/locati import {YamlEditorComponent} from '../editor/yaml-editor/yaml-editor.component'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../../reducers'; +import {YamlGraphComponent} from '../editor/yaml-graph/yaml-graph.component'; describe('AppComponent', () => { beforeEach(async(() => { @@ -26,7 +27,8 @@ describe('AppComponent', () => { HardwareOverviewComponent, ImagesOverviewComponent, LocationsOverviewComponent, - YamlEditorComponent + YamlEditorComponent, + YamlGraphComponent ], imports: [ StoreModule.forRoot({ diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index 6bc992c..f56461d 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,9 +1,7 @@ import {Component, HostListener, OnDestroy, OnInit} from '@angular/core'; import {NavigationStart, Router} from '@angular/router'; -import {of, Subscription} from 'rxjs'; -import {select, Store} from '@ngrx/store'; -import * as fromRoot from '../../reducers'; -import {fakeAsync} from '@angular/core/testing'; +import {Subscription} from 'rxjs'; +import {EditorService} from '../../services/editor.service'; /** * Entry point of this app, everything is shown in this Container. @@ -22,13 +20,14 @@ export class AppComponent implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; - constructor(private router: Router, - private store: Store) { + constructor(private editorService: EditorService, + private router: Router) { } @HostListener('window:beforeunload') unloadNotification() { - return !this.editorHasUnsavedChanges; + // ToDo: reactivate + // return !this.editorHasUnsavedChanges; } ngOnInit() { @@ -39,7 +38,7 @@ export class AppComponent implements OnInit, OnDestroy { } }); - const s1 = this.store.pipe(select(fromRoot.editorHasUnsavedChanges)).subscribe(value => this.editorHasUnsavedChanges = value); + const s1 = this.editorService.HasUnsaveChanges().subscribe(value => this.editorHasUnsavedChanges = value); this.subscriptions.push(s0, s1); } 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 d1ea0a1..bd32548 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -29,7 +29,7 @@

- +
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 4a21298..db096e5 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 @@ -4,6 +4,14 @@ import {YamlEditorComponent} from './yaml-editor.component'; import {FormsModule} from '@angular/forms'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; +import {YamlGraphComponent} from '../yaml-graph/yaml-graph.component'; +import {YamlDataService} from '../../../services/yaml-data.service'; +import {ToastService} from '../../../services/toast.service'; +import {HttpClientModule} from '@angular/common/http'; +import {ApiModule} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../../../app.module'; +import {Overlay} from '@angular/cdk/overlay'; +import {Injector} from '@angular/core'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -11,14 +19,23 @@ describe('YamlEditorComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [YamlEditorComponent], + declarations: [YamlEditorComponent, YamlGraphComponent], imports: [ StoreModule.forRoot({ ...fromRoot.reducers, 'feature': combineReducers(fromRoot.reducers) }), FormsModule, + HttpClientModule, + ApiModule.forRoot(apiConfigFactory) + ], + providers: [ + YamlDataService, + ToastService, + Overlay, + Injector ] + }) .compileComponents(); })); 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 4d15429..fe2958a 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -3,14 +3,12 @@ import * as ace from 'brace'; import {Editor} from 'brace'; import 'brace/mode/yaml'; import 'brace/theme/monokai'; -import saveAs from 'file-saver'; -import {select, Store} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; -import * as fromEditor from '../../../actions/editor.actions'; -import {YamlDataService} from '../../../services/yaml-data-service'; -import {graphData} from '../../../../../testing/test-data'; +import {YamlDataService} from '../../../services/yaml-data.service'; import {ToastService} from '../../../services/toast.service'; import {ToastType} from '../../../model/toast'; +import {JobDataService} from '../../../services/job-data.service'; +import {EditorService} from '../../../services/editor.service'; +import {take} from 'rxjs/operators'; @Component({ selector: 'app-yaml-editor', @@ -27,7 +25,7 @@ export class YamlEditorComponent implements OnInit { } set filename(filename: string) { - this.store.dispatch(new fromEditor.SetFilenameAction(filename)); + this.editorService.setFilename(filename); this._filename = filename; } @@ -45,9 +43,8 @@ export class YamlEditorComponent implements OnInit { mode: 'ace/mode/yaml' }; - public graphData: any = graphData; - - constructor(private store: Store, + constructor(private editorService: EditorService, + private jobDataService: JobDataService, private toastService: ToastService, private yamlDataService: YamlDataService) { } @@ -60,44 +57,34 @@ export class YamlEditorComponent implements OnInit { this.editor.$blockScrolling = Infinity; this.editor.clearSelection(); this.editor.getSession().on('change', () => { - this.store.dispatch(new fromEditor.SetValueAction(this.editor.getValue())); + this.editorService.setEditorValue(this.editor.getValue()); }); - this.store.pipe(select(fromRoot.getEditorValue)).subscribe(value => this.editor.setValue(value)).unsubscribe(); - this.store.pipe(select(fromRoot.getEditorFilename)).subscribe(filename => this._filename = filename).unsubscribe(); + this.editorService.getEditorValue().pipe(take(1)).subscribe(value => this.editor.setValue(value)); + this.editorService.getFilename().pipe(take(1)).subscribe(filename => this._filename = filename); } - download() { - const filename = this._filename; - - const blob = new Blob([this.editor.getValue()], { - type: 'text/plain;charset=utf-8' - }); - - saveAs(blob, filename); - this.store.dispatch(new fromEditor.ChangesSavedAction()); + onDownload() { + this.editorService.downloadFile(); } onUploadChange(event) { - const reader = new FileReader(); - if (event.target.files && event.target.files.length > 0) { - const file = event.target.files[0]; - reader.readAsBinaryString(file); - reader.onload = () => { - this.store.dispatch(new fromEditor.UploadFileAction(reader.result.toString(), file.name)); - this.editor.setValue(reader.result.toString()); - this._filename = file.name; - }; - } + this.editorService.uploadFile(event.target.files) + .then(() => { + this.editorService.getEditorValue().pipe(take(1)).subscribe(value => this.editor.setValue(value)); + this.editorService.getFilename().pipe(take(1)).subscribe(filename => this._filename = filename); + }) + .catch(); } onValidate() { - console.log('yaml sent'); this.yamlDataService.parseYaml(this.editor.getValue()) .then(job => { - // ToDo: implement behaviour on valid yaml when working test environment exists. console.log(job); + // job is valid and graph is queried + this.jobDataService.jobGraph(job.id).subscribe(graph => + this.editorService.setEditorGraph(graph)); }) .catch(err => { switch (err.status) { diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts index 1e79033..88f4b6f 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts @@ -1,6 +1,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { YamlGraphComponent } from './yaml-graph.component'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../../../reducers'; describe('YamlGraphComponent', () => { let component: YamlGraphComponent; @@ -8,7 +10,13 @@ describe('YamlGraphComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ YamlGraphComponent ] + declarations: [ YamlGraphComponent ], + imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }) + ] }) .compileComponents(); })); 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 a6b86f4..45b7d21 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -1,5 +1,8 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import * as cytoscape from 'cytoscape'; +import * as fromRoot from '../../../reducers'; +import {select, Store} from '@ngrx/store'; +import {EditorService} from '../../../services/editor.service'; @Component({ @@ -9,62 +12,76 @@ import * as cytoscape from 'cytoscape'; }) export class YamlGraphComponent implements OnInit { - @Input() graphData: any; + readonly style = [{ + 'selector': 'node', + 'style': { + 'width': '50%', + 'height': '50%', + 'content': 'data(name)', + 'font-size': '12px', + 'text-valign': 'center', + 'text-halign': 'center', + 'background-color': '#00447a', + 'text-outline-color': '#00447a', + 'text-outline-width': '1px', + 'color': '#fff', + 'z-index': '10' + } + }, { + 'selector': 'edge', + 'style': { + 'opacity': '0.9', + 'line-color': '#92acbe', + 'width': '5px', + 'overlay-padding': '3px' + } + }, { + 'selector': 'edge.unhighlighted', + 'style': { + 'opacity': '0.05' + } + }]; - constructor() { + readonly circLayout = { + name: 'circle', + fit: true, + padding: 30, + avoidOverlap: true, + boundingBox: undefined, + animate: false, + counterclockwise: false, + radius: 2, + startAngle: 3 / 2 * Math.PI + }; + + readonly maxZoom = 2; + readonly minZoom = 0.5; + + private cy; + + constructor(private editorService: EditorService) { } ngOnInit() { // cytoscape.use( coseBilkent ); - const cy = cytoscape({ + this.cy = cytoscape({ container: document.getElementById('cy'), - elements: this.graphData, - style: [{ - 'selector': 'node', - 'style': { - 'width': '50%', - 'height': '50%', - 'content': 'data(name)', - 'font-size': '12px', - 'text-valign': 'center', - 'text-halign': 'center', - 'background-color': '#00447a', - 'text-outline-color': '#00447a', - 'text-outline-width': '1px', - 'color': '#fff', - 'z-index': '10' - } - }, { - 'selector': 'edge', - 'style': { - 'opacity': '0.9', - 'line-color': '#92acbe', - 'width': '5px', - 'overlay-padding': '3px' - } - }, { - 'selector': 'edge.unhighlighted', - 'style': { - 'opacity': '0.05' - } - }] + style: this.style + }); + this.cy.maxZoom(this.maxZoom); + this.cy.minZoom(this.minZoom); + this.cy.layout(this.circLayout).run(); + this.cy.elements('node').forEach(ele => ele.ungrabify()); + this.cy.elements('node').forEach(ele => ele.unselectify()); + + this.editorService.getEditorGraph().subscribe(graphData => { + if (this.cy && graphData) { + console.log('testfilter', this.cy.$(() => true)); + this.cy.remove(this.cy.$(() => true)); + this.cy.add(graphData); + this.cy.layout(this.circLayout).run(); + } }); - const circLayout = { - name: 'circle', - fit: true, - padding: 30, - avoidOverlap: true, - boundingBox: undefined, - animate: false, - counterclockwise: false, - radius: 2, - startAngle: 3 / 2 * Math.PI - }; - cy.maxZoom(2); - cy.minZoom(0.5); - cy.layout(circLayout).run(); - cy.elements('node').forEach(ele => ele.ungrabify()); - cy.elements('node').forEach(ele => ele.unselectify()); } } diff --git a/src/app/reducers/editor.reducer.ts b/src/app/reducers/editor.reducer.ts index df55661..f6dd147 100644 --- a/src/app/reducers/editor.reducer.ts +++ b/src/app/reducers/editor.reducer.ts @@ -6,13 +6,15 @@ export interface State { value: string; filename: string; unsavedChanges: boolean; + editorGraph: any | null; } export const initialState = { originalValue: '', value: '', filename: 'unnamed.yaml', - unsavedChanges: false + unsavedChanges: false, + editorGraph: null }; export function reducer(state = initialState, action: editorActions.All): State { @@ -25,6 +27,8 @@ export function reducer(state = initialState, action: editorActions.All): State return {...state, originalValue: action.value, value: action.value, filename: action.filename, unsavedChanges: false}; case editorActions.CHANGES_SAVED: return {...state, unsavedChanges: false, originalValue: state.value}; + case editorActions.SET_EDITOR_GRAPH: + return {...state, editorGraph: action.editorGraph}; } return state; } @@ -32,3 +36,4 @@ export function reducer(state = initialState, action: editorActions.All): State export const getValue = (state: State): string => state.value; export const getFilename = (state: State): string => state.filename; export const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; +export const getEditorGraph = (state: State): boolean => state.editorGraph; diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts index bf78a74..f978a40 100644 --- a/src/app/reducers/index.ts +++ b/src/app/reducers/index.ts @@ -3,12 +3,14 @@ import {ActionReducerMap, createFeatureSelector, createSelector} from '@ngrx/sto import * as fromUserSettings from './user-settings.reducer'; import * as fromCloudData from './cloud-data.reducer'; import * as fromEditor from './editor.reducer'; +import * as fromJobData from './job-data.reducer'; import * as fromRuntimeConfig from './runtime-config.reducer'; /* State */ export interface State { cloudData: fromCloudData.State; editor: fromEditor.State; + jobData: fromJobData.State; userSettings: fromUserSettings.State; runtimeConfig: fromRuntimeConfig.State; } @@ -16,6 +18,7 @@ export interface State { export const globalInitialState: State = { cloudData: fromCloudData.initialState, editor: fromEditor.initialState, + jobData: fromJobData.initialState, userSettings: fromUserSettings.initialState, runtimeConfig: fromRuntimeConfig.initialState }; @@ -24,6 +27,7 @@ export const globalInitialState: State = { export const reducers: ActionReducerMap = { cloudData: fromCloudData.reducer, editor: fromEditor.reducer, + jobData: fromJobData.reducer, userSettings: fromUserSettings.reducer, runtimeConfig: fromRuntimeConfig.reducer }; @@ -32,6 +36,7 @@ export const reducers: ActionReducerMap = { /* States */ export const cloudDataState = (state: State): fromCloudData.State => state.cloudData; export const editorState = (state: State): fromEditor.State => state.editor; +export const jobDataState = (state: State): fromJobData.State => state.jobData; export const userSettingsState = (state: State): fromUserSettings.State => state.userSettings; export const runtimeConfigState = (state: State): fromRuntimeConfig.State => state.runtimeConfig; @@ -47,6 +52,10 @@ export const getLocations = createSelector(cloudDataState, fromCloudData.getLoca export const getEditorValue = createSelector(editorState, fromEditor.getValue); export const getEditorFilename = createSelector(editorState, fromEditor.getFilename); export const editorHasUnsavedChanges = createSelector(editorState, fromEditor.hasUnsavedChanges); +export const getEditorGraph = createSelector(editorState, fromEditor.getEditorGraph); + +/* Job Data */ +export const getJobs = createSelector(jobDataState, fromJobData.getJobs); /* User Settings */ export const getUserSettings = createSelector(userSettingsState, fromUserSettings.getUserSettings); diff --git a/src/app/reducers/job-data.reducer.ts b/src/app/reducers/job-data.reducer.ts new file mode 100644 index 0000000..3a841b5 --- /dev/null +++ b/src/app/reducers/job-data.reducer.ts @@ -0,0 +1,23 @@ +import * as jobActions from '../actions/job-data.actions'; +import {Job} from 'cloudiator-rest-api'; +import * as cloudActions from '../actions/cloud-data.actions'; + +export interface State { + jobs: Job[]; +} + +export const initialState = { + jobs: [] +}; + + +export function reducer(state = initialState, action: jobActions.All): State { + switch (action.type) { + case jobActions.SET_JOBS: + return {jobs: action.jobs, ...state}; + default: + return state; + } +} + +export const getJobs = (state: State): Job[] => state.jobs; diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts new file mode 100644 index 0000000..40632c7 --- /dev/null +++ b/src/app/services/editor.service.spec.ts @@ -0,0 +1,21 @@ +import { TestBed } from '@angular/core/testing'; + +import { EditorService } from './editor.service'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../reducers'; + +describe('EditorService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }) + ] + })); + + it('should be created', () => { + const service: EditorService = TestBed.get(EditorService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/editor.service.ts b/src/app/services/editor.service.ts new file mode 100644 index 0000000..ab16749 --- /dev/null +++ b/src/app/services/editor.service.ts @@ -0,0 +1,74 @@ +import {Injectable} from '@angular/core'; +import * as fromRoot from '../reducers'; +import * as fromEditor from '../actions/editor.actions'; +import {select, Store} from '@ngrx/store'; +import saveAs from 'file-saver'; +import {Observable} from 'rxjs'; +import {reject} from 'q'; +import {take} from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class EditorService { + + constructor(private store: Store) { + } + + public getEditorValue(): Observable { + return this.store.pipe(select(fromRoot.getEditorValue)); + } + + public setEditorValue(value: string) { + this.store.dispatch(new fromEditor.SetValueAction(value)); + } + + public getFilename(): Observable { + return this.store.pipe(select(fromRoot.getEditorFilename)); + } + + public setFilename(filename: string) { + this.store.dispatch(new fromEditor.SetFilenameAction(filename)); + } + + public getEditorGraph(): Observable { + return this.store.pipe(select(fromRoot.getEditorGraph)); + } + + public setEditorGraph(graphData: any | null) { + this.store.dispatch(new fromEditor.SetEditorGraphAction(graphData)); + } + + public HasUnsaveChanges(): Observable { + return this.store.pipe(select(fromRoot.editorHasUnsavedChanges)); + } + + public downloadFile() { + this.store.pipe( + select(fromRoot.editorState), + take(1)) + .subscribe(state => { + const blob = new Blob([state.value], { + type: 'text/plain;charset=utf-8' + }); + + saveAs(blob, state.filename); + this.store.dispatch(new fromEditor.ChangesSavedAction()); + }); + } + + public uploadFile(files: FileList): Promise { + const reader = new FileReader(); + if (files && files.length > 0) { + const file = files[0]; + reader.readAsBinaryString(file); + return new Promise(resolve => { + reader.onload = () => { + this.store.dispatch(new fromEditor.UploadFileAction(reader.result.toString(), file.name)); + resolve(); + }; + }); + } + return new Promise(() => reject()); + } +} diff --git a/src/app/services/job-data.service.spec.ts b/src/app/services/job-data.service.spec.ts new file mode 100644 index 0000000..01c5f8c --- /dev/null +++ b/src/app/services/job-data.service.spec.ts @@ -0,0 +1,35 @@ +import { TestBed } from '@angular/core/testing'; + +import { JobDataService } from './job-data.service'; +import {combineReducers, StoreModule} from '@ngrx/store'; +import * as fromRoot from '../reducers'; +import {ApiModule} from 'cloudiator-rest-api'; +import {HttpClientModule} from '@angular/common/http'; +import {DialogService} from './dialog.service'; +import {ToastService} from './toast.service'; +import {Overlay} from '@angular/cdk/overlay'; +import {Injector} from '@angular/core'; + +describe('JobDataService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + StoreModule.forRoot({ + ...fromRoot.reducers, + 'feature': combineReducers(fromRoot.reducers) + }), + ApiModule, + HttpClientModule + ], + providers: [ + DialogService, + ToastService, + Overlay, + Injector + ] + })); + + it('should be created', () => { + const service: JobDataService = TestBed.get(JobDataService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts new file mode 100644 index 0000000..d4a155c --- /dev/null +++ b/src/app/services/job-data.service.ts @@ -0,0 +1,49 @@ +import {Injectable} from '@angular/core'; +import {select, Store} from '@ngrx/store'; +import * as fromRoot from '../reducers'; +import * as fromJobData from '../actions/job-data.actions'; +import {RuntimeConfigService} from './runtime-config.service'; +import {ToastService} from './toast.service'; +import {Job, JobService} from 'cloudiator-rest-api'; +import {Observable} from 'rxjs'; +import {ToastType} from '../model/toast'; + +@Injectable({ + providedIn: 'root' +}) +export class JobDataService { + + constructor(private jobApiService: JobService, + private runtimeConfigService: RuntimeConfigService, + private store: Store, + private toastService: ToastService) { + store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { + jobApiService.basePath = config.apiPath; + if (jobApiService.configuration) { + jobApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; + } + }); + } + + public findJobs(): Observable { + this.fetchJobs(); + + return this.store.pipe(select(fromRoot.getJobs)); + } + + public jobGraph(id: string): Observable { + return this.jobApiService.jobGraph(id); + } + + private fetchJobs() { + this.runtimeConfigService.awaitConfigLoad().then(() => { + this.jobApiService.findJobs().toPromise() + .then(jobs => { + this.store.dispatch(new fromJobData.SetJobsActiom(jobs)); + }) + .catch(() => { + this.toastService.show({text: 'could not fetch Jobs', type: ToastType.DANGER}, false); + }); + }); + } +} diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index f31612c..6aa6e2f 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -2,12 +2,10 @@ import {Injectable} from '@angular/core'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from './toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; -import {Observable, throwError} from 'rxjs'; +import {of} from 'rxjs'; import {HttpClient} from '@angular/common/http'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../reducers'; -import {catchError} from 'rxjs/operators'; -import {ToastType} from '../model/toast'; @Injectable({ providedIn: 'root' @@ -17,8 +15,7 @@ export class YamlDataService { constructor(private yamlApiService: YamlService, private runtimeConfigService: RuntimeConfigService, private store: Store, - private toastService: ToastService, - private httpClient: HttpClient) { + private toastService: ToastService) { store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { yamlApiService.basePath = config.apiPath; @@ -29,17 +26,21 @@ export class YamlDataService { } public parseYaml(yaml: string): Promise { - return this.yamlApiService.parseYAML(yaml) - .pipe(catchError(err => { - switch (err.status) { - case 400: - case 504: - this.toastService.show({text: 'Server had an internal Error', type: ToastType.DANGER}, true); - return throwError(err); - default: - return throwError(err); - } - })) - .toPromise(); + + // ToDo: Absolutely dangerous, spams server with jobs if yaml is valid. + + // return this.yamlApiService.parseYAML(yaml) + // .pipe(catchError(err => { + // switch (err.status) { + // case 400: + // case 504: + // this.toastService.show({text: 'Server had an internal Error', type: ToastType.DANGER}, true); + // return throwError(err); + // default: + // return throwError(err); + // } + // })) + // .toPromise(); + return of({id: '4ebd98ce-09e5-4fb7-b439-e82eb2a7de69'}).toPromise(); } } From 5b299dd8a095931b2a57c32abccb0c9cdc04ee41 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Sun, 25 Nov 2018 09:27:21 +0100 Subject: [PATCH 16/29] WiP Jasmine tests --- .../yaml-editor/yaml-editor.component.spec.ts | 22 ++++++++++++++++++- .../yaml-editor/yaml-editor.component.ts | 2 +- src/app/services/cloud-data.service.spec.ts | 1 - src/app/services/editor.service.spec.ts | 2 ++ src/app/services/job-data.service.spec.ts | 8 +++---- src/app/services/job-data.service.ts | 2 +- src/app/services/yaml-data.service.spec.ts | 22 ++++++++++++------- src/app/services/yaml-data.service.ts | 4 +--- src/environments/environment.ts | 4 ++-- 9 files changed, 46 insertions(+), 21 deletions(-) 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 db096e5..74ceaf2 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 @@ -12,6 +12,9 @@ import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../../../app.module'; import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; +import {EditorService} from '../../../services/editor.service'; +import {of} from 'rxjs'; +import {resolve} from 'q'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -30,6 +33,7 @@ describe('YamlEditorComponent', () => { ApiModule.forRoot(apiConfigFactory) ], providers: [ + EditorService, YamlDataService, ToastService, Overlay, @@ -43,10 +47,26 @@ describe('YamlEditorComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(YamlEditorComponent); component = fixture.componentInstance; - fixture.detectChanges(); + // fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('test', () => { + // const editorspy = jasmine.createSpyObj('EditorService', ['downloadFile']); + spyOn(component.editorService, 'downloadFile').and.stub(); + component.onDownload(); + // fixture.detectChanges(); + expect(component.editorService.downloadFile).toHaveBeenCalled(); + + + spyOn(component.editorService, 'getFilename').and.returnValue(of('name')); + spyOn(component.editorService, 'uploadFile').and.callFake(() => new Promise(resolve1 => resolve1())); + // fixture.detectChanges(); + component.onUploadChange({target: {files: null}}); + + expect(component.filename).toEqual('name'); + }); }); 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 fe2958a..57f75a9 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -43,7 +43,7 @@ export class YamlEditorComponent implements OnInit { mode: 'ace/mode/yaml' }; - constructor(private editorService: EditorService, + constructor(public editorService: EditorService, private jobDataService: JobDataService, private toastService: ToastService, private yamlDataService: YamlDataService) { diff --git a/src/app/services/cloud-data.service.spec.ts b/src/app/services/cloud-data.service.spec.ts index 2ffd8ab..1693cf2 100644 --- a/src/app/services/cloud-data.service.spec.ts +++ b/src/app/services/cloud-data.service.spec.ts @@ -48,7 +48,6 @@ describe('CloudDataService', () => { it('should find correct cloud', async(inject([CloudDataService], (service: CloudDataService) => { return service.findCloud(testData.cloudOne.id).toPromise().then(cloud => { - console.log(cloud) expect(cloud.id).toEqual(testData.cloudOne.id); expect(cloud.id).not.toEqual(testData.cloudOne.id); // expect(true).toBeTruthy(); diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index 40632c7..43056ef 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -14,6 +14,8 @@ describe('EditorService', () => { ] })); + beforeEach(() => {}); + it('should be created', () => { const service: EditorService = TestBed.get(EditorService); expect(service).toBeTruthy(); diff --git a/src/app/services/job-data.service.spec.ts b/src/app/services/job-data.service.spec.ts index 01c5f8c..393bd1e 100644 --- a/src/app/services/job-data.service.spec.ts +++ b/src/app/services/job-data.service.spec.ts @@ -1,4 +1,4 @@ -import { TestBed } from '@angular/core/testing'; +import {inject, TestBed} from '@angular/core/testing'; import { JobDataService } from './job-data.service'; import {combineReducers, StoreModule} from '@ngrx/store'; @@ -21,6 +21,7 @@ describe('JobDataService', () => { HttpClientModule ], providers: [ + JobDataService, DialogService, ToastService, Overlay, @@ -28,8 +29,7 @@ describe('JobDataService', () => { ] })); - it('should be created', () => { - const service: JobDataService = TestBed.get(JobDataService); + it('should be created', inject([JobDataService], (service: JobDataService) => { expect(service).toBeTruthy(); - }); + })); }); diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts index d4a155c..f76f794 100644 --- a/src/app/services/job-data.service.ts +++ b/src/app/services/job-data.service.ts @@ -19,7 +19,7 @@ export class JobDataService { private toastService: ToastService) { store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { jobApiService.basePath = config.apiPath; - if (jobApiService.configuration) { + if (jobApiService.configuration && jobApiService.configuration.apiKeys) { jobApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; } }); diff --git a/src/app/services/yaml-data.service.spec.ts b/src/app/services/yaml-data.service.spec.ts index 490efc5..6989bd3 100644 --- a/src/app/services/yaml-data.service.spec.ts +++ b/src/app/services/yaml-data.service.spec.ts @@ -1,7 +1,7 @@ -import { TestBed } from '@angular/core/testing'; +import {inject, TestBed} from '@angular/core/testing'; -import { YamlDataService } from './yaml-data.service'; -import {ApiModule} from 'cloudiator-rest-api'; +import {YamlDataService} from './yaml-data.service'; +import {ApiModule, YamlService} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {apiConfigFactory} from '../app.module'; import {DialogService} from './dialog.service'; @@ -10,19 +10,26 @@ import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; +import {of} from 'rxjs'; describe('YamlDataService', () => { + + const mockYamlService = jasmine.createSpyObj('YamlService', { + 'parseYaml': of({}) + }); + beforeEach(() => TestBed.configureTestingModule({ imports: [ StoreModule.forRoot({ ...fromRoot.reducers, 'feature': combineReducers(fromRoot.reducers) }), - HttpClientModule, - ApiModule.forRoot(apiConfigFactory) + ApiModule.forRoot(apiConfigFactory), + HttpClientModule ], providers: [ YamlDataService, + // {provide: YamlService, useValue: mockYamlService}, DialogService, ToastService, Overlay, @@ -30,8 +37,7 @@ describe('YamlDataService', () => { ] })); - it('should be created', () => { - const service: YamlDataService = TestBed.get(YamlDataService); + it('should be created', inject([YamlDataService], (service: YamlDataService) => { expect(service).toBeTruthy(); - }); + })); }); diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index 6aa6e2f..5ca09b4 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -3,7 +3,6 @@ import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from './toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; import {of} from 'rxjs'; -import {HttpClient} from '@angular/common/http'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../reducers'; @@ -16,10 +15,9 @@ export class YamlDataService { private runtimeConfigService: RuntimeConfigService, private store: Store, private toastService: ToastService) { - store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { yamlApiService.basePath = config.apiPath; - if (yamlApiService.configuration) { + if (yamlApiService.configuration && yamlApiService.configuration.apiKeys) { yamlApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; } }); diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7f13cd0..dcc9a89 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -8,9 +8,9 @@ export const environment = { production: false, useRuntimeConfig: false, href: '/', - apiPath: 'http://134.60.64.119:9000', + apiPath: '', authMode: AuthMode.SINGLE, - xApiKey: 'CloudiatorUI2018', + xApiKey: '', notificationDuration: 10000 }; From 10f20e2b0ce97bf2074b11a1907b84210071f711 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Mon, 26 Nov 2018 15:40:27 +0100 Subject: [PATCH 17/29] tested Yaml Editor --- .../yaml-editor/yaml-editor.component.spec.ts | 102 +++++++- .../yaml-editor/yaml-editor.component.ts | 40 +-- .../editor/yaml-graph/yaml-graph.component.ts | 1 - .../locations-overview.component.spec.ts | 28 ++- ...confirm-new-cloud-dialog.component.spec.ts | 3 + src/app/services/editor.service.spec.ts | 49 +++- src/app/services/editor.service.ts | 11 +- src/app/services/yaml-data.service.spec.ts | 32 ++- src/app/services/yaml-data.service.ts | 15 +- testing/test-data.ts | 227 ++++++++++++++---- 10 files changed, 401 insertions(+), 107 deletions(-) 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 74ceaf2..ff1d06e 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 @@ -7,14 +7,17 @@ import * as fromRoot from '../../../reducers'; import {YamlGraphComponent} from '../yaml-graph/yaml-graph.component'; import {YamlDataService} from '../../../services/yaml-data.service'; import {ToastService} from '../../../services/toast.service'; -import {HttpClientModule} from '@angular/common/http'; +import {HttpClientModule, HttpErrorResponse} from '@angular/common/http'; import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../../../app.module'; import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; import {EditorService} from '../../../services/editor.service'; -import {of} from 'rxjs'; -import {resolve} from 'q'; +import {never, Observable, of, throwError} from 'rxjs'; +import * as testData from '../../../../../testing/test-data'; +import {ToastType} from '../../../model/toast'; +import {By} from '@angular/platform-browser'; +import {take} from 'rxjs/operators'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -47,26 +50,105 @@ describe('YamlEditorComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(YamlEditorComponent); component = fixture.componentInstance; - // fixture.detectChanges(); }); it('should create', () => { + // install spies before ngOnInit is triggered + spyOn(component.editorService, 'getFilename').and.returnValue(of('name')); + spyOn(component.editorService, 'getEditorValue').and.returnValue(of('value')); + + fixture.detectChanges(); + expect(component).toBeTruthy(); + expect(component.editor).not.toBeUndefined(); + expect(component.editorService.getFilename).toHaveBeenCalledTimes(1); + expect(component.editorService.getEditorValue).toHaveBeenCalledTimes(1); + }); + + it('data state should be updated correctly', async () => { + fixture.detectChanges(); + + spyOn(component.editorService, 'setEditorValue').and.callThrough(); + spyOn(component.editorService, 'getEditorValue').and.callThrough(); + spyOn(component.editorService, 'setFilename').and.callThrough(); + spyOn(component.editorService, 'getFilename').and.callThrough(); + + component.editor.setValue('test'); + expect(component.editorService.setEditorValue).toHaveBeenCalledTimes(1); + expect(component.editorService.getEditorValue).not.toHaveBeenCalled(); + component.editorService.getEditorValue() + .pipe(take(1)) + .subscribe(value => expect(value).toEqual('test')); + + component.filename = 'filename'; + expect(component.editorService.setFilename).toHaveBeenCalledTimes(1); + expect(component.editorService.getFilename).not.toHaveBeenCalled(); + component.editorService.getFilename() + .pipe(take(1)) + .subscribe(value => expect(value).toEqual('filename')); }); - it('test', () => { - // const editorspy = jasmine.createSpyObj('EditorService', ['downloadFile']); + it('downlaodFile should be called', () => { spyOn(component.editorService, 'downloadFile').and.stub(); component.onDownload(); - // fixture.detectChanges(); expect(component.editorService.downloadFile).toHaveBeenCalled(); + }); + it('Filevalues should be set on UploadChange', async () => { + fixture.detectChanges(); spyOn(component.editorService, 'getFilename').and.returnValue(of('name')); - spyOn(component.editorService, 'uploadFile').and.callFake(() => new Promise(resolve1 => resolve1())); - // fixture.detectChanges(); - component.onUploadChange({target: {files: null}}); + spyOn(component.editorService, 'getEditorValue').and.returnValue(of('value')); + spyOn(component.editorService, 'uploadFile').and.returnValue(Promise.resolve()); + component.filename = 'before upload'; + component.editor.setValue('before upload'); + expect(component.filename).toEqual('before upload'); + expect(component.editor.getValue()).toEqual('before upload'); + + await component.onUploadChange({target: {files: null}}); // @ts-ignore + expect(component.editorService.uploadFile).toHaveBeenCalled(); expect(component.filename).toEqual('name'); + expect(component.editor.getValue()).toEqual('value'); + expect(component.editorService.getFilename).toHaveBeenCalledTimes(1); + expect(component.editorService.getEditorValue).toHaveBeenCalledTimes(1); + }); + + it('onValidate should update', async () => { + fixture.detectChanges(); + + spyOn(component.yamlDataService, 'parseYaml').and.returnValue(of(testData.job)); + spyOn(component.jobDataService, 'jobGraph').and.returnValue(of(testData.graphData)); + spyOn(component.editorService, 'setEditorGraph').and.stub(); + + await component.onValidate(); + + expect(component.editorService.setEditorGraph).toHaveBeenCalled(); + }); + + it('onValidate should handle errors', async () => { + fixture.detectChanges(); + + spyOn(component.jobDataService, 'jobGraph').and.returnValue(of(testData.graphData)); + spyOn(component.editorService, 'setEditorGraph').and.stub(); + spyOn(component.toastService, 'show').and.stub(); + + const parseSpy = spyOn(component.yamlDataService, 'parseYaml').and.returnValue(throwError({status: 400})); + await component.onValidate(); + + expect(component.toastService.show).toHaveBeenCalledWith({text: 'Invalid YAML', type: ToastType.DANGER}, true); + expect(component.toastService.show).toHaveBeenCalledTimes(1); + + parseSpy.and.returnValue(throwError({status: 666})); + await component.onValidate(); + + expect(component.toastService.show).toHaveBeenCalledWith({text: 'Unexpected Error', type: ToastType.DANGER}, true); + expect(component.toastService.show).toHaveBeenCalledTimes(2); + + parseSpy.and.returnValue(throwError({})); + await component.onValidate(); + + expect(component.toastService.show).toHaveBeenCalledWith({text: 'Unexpected Error', type: ToastType.DANGER}, true); + expect(component.toastService.show).toHaveBeenCalledTimes(3); }); }); 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 57f75a9..0c557b1 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -44,9 +44,9 @@ export class YamlEditorComponent implements OnInit { }; constructor(public editorService: EditorService, - private jobDataService: JobDataService, - private toastService: ToastService, - private yamlDataService: YamlDataService) { + public jobDataService: JobDataService, + public toastService: ToastService, + public yamlDataService: YamlDataService) { } ngOnInit() { @@ -80,20 +80,24 @@ export class YamlEditorComponent implements OnInit { onValidate() { this.yamlDataService.parseYaml(this.editor.getValue()) - .then(job => { - console.log(job); - // job is valid and graph is queried - this.jobDataService.jobGraph(job.id).subscribe(graph => - this.editorService.setEditorGraph(graph)); - }) - .catch(err => { - switch (err.status) { - case 400: - this.toastService.show({text: 'Invalid YAML', type: ToastType.DANGER}, true); - break; - default: - console.log(err); - } - }); + .pipe(take(1)) + .subscribe(job => { + // job is valid and graph is queried + this.jobDataService.jobGraph(job.id).subscribe(graph => + this.editorService.setEditorGraph(graph)); + }, + err => { + if (err.status) { + switch (err.status) { + case 400: + this.toastService.show({text: 'Invalid YAML', type: ToastType.DANGER}, true); + break; + default: + this.toastService.show({text: 'Unexpected Error', type: ToastType.DANGER}, true); + } + } else { + this.toastService.show({text: 'Unexpected Error', type: ToastType.DANGER}, true); + } + }); } } 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 45b7d21..8d6d004 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -76,7 +76,6 @@ export class YamlGraphComponent implements OnInit { this.editorService.getEditorGraph().subscribe(graphData => { if (this.cy && graphData) { - console.log('testfilter', this.cy.$(() => true)); this.cy.remove(this.cy.$(() => true)); this.cy.add(graphData); this.cy.layout(this.circLayout).run(); diff --git a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts index 1926007..7bb8f38 100644 --- a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts +++ b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { LocationsOverviewComponent } from './locations-overview.component'; +import {LocationsOverviewComponent} from './locations-overview.component'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @@ -13,8 +13,9 @@ import {CloudDataService} from '../../../services/cloud-data.service'; import {DialogService} from '../../../services/dialog.service'; import {ToastService} from '../../../services/toast.service'; import {Overlay} from '@angular/cdk/overlay'; -import {Injector} from '@angular/core'; +import {Injector, NgModule} from '@angular/core'; import {of} from 'rxjs'; +import {ToastComponent} from '../../../dialogs/toast/toast.component'; describe('LocationsOverviewComponent', () => { let component: LocationsOverviewComponent; @@ -24,7 +25,8 @@ describe('LocationsOverviewComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LocationsOverviewComponent ], + declarations: [ + LocationsOverviewComponent], imports: [ StoreModule.forRoot({ ...fromRoot.reducers, @@ -35,10 +37,11 @@ describe('LocationsOverviewComponent', () => { CdkTableModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), - RouterModule + RouterModule, + TestModule ], providers: [ - { provide: Router, useValue: router }, + {provide: Router, useValue: router}, CloudDataService, DialogService, ToastService, @@ -52,7 +55,7 @@ describe('LocationsOverviewComponent', () => { } ] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { @@ -65,3 +68,14 @@ describe('LocationsOverviewComponent', () => { expect(component).toBeTruthy(); }); }); + + + +@NgModule({ + declarations: [ToastComponent], + imports: [], // <-- added this line + entryComponents: [ToastComponent], + exports: [ToastComponent], +}) +class TestModule { +} diff --git a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts b/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts index ee60646..d47b569 100644 --- a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts +++ b/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts @@ -3,6 +3,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ConfirmNewCloudDialogComponent } from './confirm-new-cloud-dialog.component'; import {DialogRef} from '../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; +import {NgModule} from '@angular/core'; +import {ToastComponent} from '../toast/toast.component'; describe('ConfirmNewCloudDialogComponent', () => { let component: ConfirmNewCloudDialogComponent; @@ -11,6 +13,7 @@ describe('ConfirmNewCloudDialogComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ConfirmNewCloudDialogComponent ], + imports: [], providers: [ {provide: DialogRef, useVale: {}}, { provide: DIALOG_DATA, useValue: {}} diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index 43056ef..8130755 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -1,8 +1,10 @@ -import { TestBed } from '@angular/core/testing'; +import {TestBed} from '@angular/core/testing'; -import { EditorService } from './editor.service'; +import {EditorService} from './editor.service'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; +import {take} from 'rxjs/operators'; +import * as fromEditor from '../actions/editor.actions'; describe('EditorService', () => { beforeEach(() => TestBed.configureTestingModule({ @@ -14,10 +16,51 @@ describe('EditorService', () => { ] })); - beforeEach(() => {}); + beforeEach(() => { + }); it('should be created', () => { const service: EditorService = TestBed.get(EditorService); expect(service).toBeTruthy(); }); + + it('save state should be consistent', async () => { + const service: EditorService = TestBed.get(EditorService); + + service.HasUnsaveChanges() + .pipe(take(1)) + .subscribe(value => expect(value).toBeFalsy()); + + await service.setEditorValue(''); + service.HasUnsaveChanges() + .pipe(take(1)) + .subscribe(value => expect(value).toBeFalsy()); + + await service.setEditorValue('different value'); + service.HasUnsaveChanges() + .pipe(take(1)) + .subscribe(value => expect(value).toBeTruthy()); + + await service.store.dispatch(new fromEditor.ChangesSavedAction()); + service.HasUnsaveChanges() + .pipe(take(1)) + .subscribe(value => expect(value).toBeFalsy()); + + await service.setEditorValue(''); + service.HasUnsaveChanges() + .pipe(take(1)) + .subscribe(value => expect(value).toBeTruthy()); + }); + + it('uploadFile should reject on wrong arguments', async () => { + const service: EditorService = TestBed.get(EditorService); + + await service.uploadFile(null) + .then(() => fail('files == null should throw exception')) + .catch(err => expect(err).toEqual('could not load file')); + + await service.uploadFile({length: 0}) + .then(() => fail('length == 0 should throw exception')) + .catch(err => expect(err).toEqual('could not load file')); + }); }); diff --git a/src/app/services/editor.service.ts b/src/app/services/editor.service.ts index ab16749..5c6f0e5 100644 --- a/src/app/services/editor.service.ts +++ b/src/app/services/editor.service.ts @@ -4,7 +4,6 @@ import * as fromEditor from '../actions/editor.actions'; import {select, Store} from '@ngrx/store'; import saveAs from 'file-saver'; import {Observable} from 'rxjs'; -import {reject} from 'q'; import {take} from 'rxjs/operators'; @Injectable({ @@ -12,7 +11,7 @@ import {take} from 'rxjs/operators'; }) export class EditorService { - constructor(private store: Store) { + constructor(public store: Store) { } public getEditorValue(): Observable { @@ -44,6 +43,7 @@ export class EditorService { } public downloadFile() { + // toDo: error handling this.store.pipe( select(fromRoot.editorState), take(1)) @@ -58,8 +58,9 @@ export class EditorService { } public uploadFile(files: FileList): Promise { - const reader = new FileReader(); - if (files && files.length > 0) { + console.log(files); + if (files instanceof FileList && files.length > 0) { + const reader = new FileReader(); const file = files[0]; reader.readAsBinaryString(file); return new Promise(resolve => { @@ -69,6 +70,6 @@ export class EditorService { }; }); } - return new Promise(() => reject()); + return Promise.reject('could not load file'); } } diff --git a/src/app/services/yaml-data.service.spec.ts b/src/app/services/yaml-data.service.spec.ts index 6989bd3..832d701 100644 --- a/src/app/services/yaml-data.service.spec.ts +++ b/src/app/services/yaml-data.service.spec.ts @@ -1,7 +1,7 @@ -import {inject, TestBed} from '@angular/core/testing'; +import {TestBed} from '@angular/core/testing'; import {YamlDataService} from './yaml-data.service'; -import {ApiModule, YamlService} from 'cloudiator-rest-api'; +import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {apiConfigFactory} from '../app.module'; import {DialogService} from './dialog.service'; @@ -10,14 +10,9 @@ import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; -import {of} from 'rxjs'; describe('YamlDataService', () => { - const mockYamlService = jasmine.createSpyObj('YamlService', { - 'parseYaml': of({}) - }); - beforeEach(() => TestBed.configureTestingModule({ imports: [ StoreModule.forRoot({ @@ -28,8 +23,6 @@ describe('YamlDataService', () => { HttpClientModule ], providers: [ - YamlDataService, - // {provide: YamlService, useValue: mockYamlService}, DialogService, ToastService, Overlay, @@ -37,7 +30,24 @@ describe('YamlDataService', () => { ] })); - it('should be created', inject([YamlDataService], (service: YamlDataService) => { + it('should be created', () => { + const service: YamlDataService = TestBed.get(YamlDataService); expect(service).toBeTruthy(); - })); + }); + + // ToDO: finish when parseYaml is working correctly + // it('onValidate should filter server caused errors', async () => { + // const service: YamlDataService = TestBed.get(YamlDataService); + // + // spyOn(service.toastService, 'show').and.callThrough(); + // const mockApi = spyOn(service.yamlApiService, 'parseYAML').and.returnValue(testData.job); + // + // service.parseYaml('') + // .pipe(take(1)) + // .subscribe(value => expect(value).toEqual(testData.job)); + // + // mockApi.and.returnValue(throwError({status: 500})); + // await service.parseYaml(''); + // expect(service.toastService.show).toHaveBeenCalledWith({}) + // }); }); diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index 5ca09b4..c649b76 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -2,7 +2,7 @@ import {Injectable} from '@angular/core'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from './toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; -import {of} from 'rxjs'; +import {Observable, of} from 'rxjs'; import {select, Store} from '@ngrx/store'; import * as fromRoot from '../reducers'; @@ -11,10 +11,10 @@ import * as fromRoot from '../reducers'; }) export class YamlDataService { - constructor(private yamlApiService: YamlService, - private runtimeConfigService: RuntimeConfigService, - private store: Store, - private toastService: ToastService) { + constructor(public yamlApiService: YamlService, + public runtimeConfigService: RuntimeConfigService, + public store: Store, + public toastService: ToastService) { store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { yamlApiService.basePath = config.apiPath; if (yamlApiService.configuration && yamlApiService.configuration.apiKeys) { @@ -23,7 +23,7 @@ export class YamlDataService { }); } - public parseYaml(yaml: string): Promise { + public parseYaml(yaml: string): Observable { // ToDo: Absolutely dangerous, spams server with jobs if yaml is valid. @@ -38,7 +38,6 @@ export class YamlDataService { // return throwError(err); // } // })) - // .toPromise(); - return of({id: '4ebd98ce-09e5-4fb7-b439-e82eb2a7de69'}).toPromise(); + return of({id: '4ebd98ce-09e5-4fb7-b439-e82eb2a7de69'}); } } diff --git a/testing/test-data.ts b/testing/test-data.ts index be92078..b6bf5fa 100644 --- a/testing/test-data.ts +++ b/testing/test-data.ts @@ -1,4 +1,4 @@ -import {Api, Cloud, CloudConfiguration, CloudCredential, Hardware, Image, Location, OperatingSystem} from 'cloudiator-rest-api'; +import {Api, Cloud, CloudConfiguration, CloudCredential, Hardware, Image, Job, Location, OperatingSystem} from 'cloudiator-rest-api'; /* CLOUDS */ export const allClouds: Cloud[] = [ @@ -212,6 +212,188 @@ export const allImages: Image[] = [ imageThree ]; +/* JOBS */ +export const job = { + id: '445bdb66-3c87-44ca-bc51-3670b008643e', + name: 'mediawiki', + tasks: [ + { + name: 'wiki', + ports: [ + { + type: 'PortProvided', + name: 'WIKIPROV', + port: 80 + }, + { + type: 'PortRequired', + name: 'WIKIREQMARIADB', + updateAction: null, + isMandatory: true + } + ], + interfaces: [ + { + type: 'LanceInterface', + containerType: 'DOCKER', + init: null, + preInstall: + 'sudo apt-get -y update && sudo apt-get -y install git && git clone https://github.com/dbaur/mediawiki-tutorial.git', + install: './mediawiki-tutorial/scripts/lance/mediawiki.sh install', + postInstall: './mediawiki-tutorial/scripts/lance/mediawiki.sh configure', + preStart: null, + start: './mediawiki-tutorial/scripts/lance/mediawiki.sh startBlocking', + startDetection: null, + stopDetection: null, + postStart: null, + preStop: null, + stop: null, + postStop: null, + shutdown: null + } + ], + optimization: null, + requirements: [ + { + type: 'OclRequirement', + constraint: 'nodes->forAll(location.providerId = \'nova\')' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.cores >= 2)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.ram >= 2048)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' + } + ], + taskType: 'BATCH' + }, + { + name: 'database', + ports: [ + { + type: 'PortProvided', + name: 'MARIADBPROV', + port: 3306 + } + ], + interfaces: [ + { + type: 'LanceInterface', + containerType: 'DOCKER', + init: null, + preInstall: + 'sudo apt-get -y update && sudo apt-get -y install git && git clone https://github.com/dbaur/mediawiki-tutorial.git', + install: './mediawiki-tutorial/scripts/lance/mariaDB.sh install', + postInstall: './mediawiki-tutorial/scripts/lance/mariaDB.sh configure', + preStart: null, + start: './mediawiki-tutorial/scripts/lance/mariaDB.sh startBlocking', + startDetection: null, + stopDetection: null, + postStart: null, + preStop: null, + stop: null, + postStop: null, + shutdown: null + } + ], + optimization: null, + requirements: [ + { + type: 'OclRequirement', + constraint: 'nodes->forAll(location.providerId = \'nova\')' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.cores >= 2)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.ram >= 2048)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' + } + ], + taskType: 'BATCH' + }, + { + name: 'loadbalancer', + ports: [ + { + type: 'PortRequired', + name: 'LOADBALANCERREQWIKI', + updateAction: './mediawiki-tutorial/scripts/lance/nginx.sh configure', + isMandatory: false + }, + { + type: 'PortProvided', + name: 'LBPROV', + port: 80 + } + ], + interfaces: [ + { + type: 'LanceInterface', + containerType: 'DOCKER', + init: null, + preInstall: + 'sudo apt-get -y update && sudo apt-get -y install git && git clone https://github.com/dbaur/mediawiki-tutorial.git', + install: './mediawiki-tutorial/scripts/lance/nginx.sh install', + postInstall: null, + preStart: null, + start: './mediawiki-tutorial/scripts/lance/nginx.sh startBlocking', + startDetection: null, + stopDetection: null, + postStart: null, + preStop: null, + stop: null, + postStop: null, + shutdown: null + } + ], + optimization: null, + requirements: [ + { + type: 'OclRequirement', + constraint: 'nodes->forAll(location.providerId = \'nova\')' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.cores >= 2)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(hardware.ram >= 2048)' + }, + { + type: 'OclRequirement', + constraint: 'nodes->forAll(image.providerId = \'f688f98d-7e62-4404-a672-1fc054fcfa6c\')' + } + ], + taskType: 'BATCH' + } + ], + communications: [ + { + portRequired: 'LOADBALANCERREQWIKI', + portProvided: 'WIKIPROV' + }, + { + portRequired: 'WIKIREQMARIADB', + portProvided: 'MARIADBPROV' + } + ], + requirements: null +}; + +/* GRAPH */ export const graphData: any = { nodes: [ { @@ -232,49 +414,6 @@ export const graphData: any = { name: 'database' } } - // , - // { - // data: { - // id: 'database1', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database2', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database3', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database4', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database5', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database6', - // name: 'database' - // } - // }, - // { - // data: { - // id: 'database7', - // name: 'database' - // } - // } ], edges: [ { From d3c499f1bd61f02b049cf595337cd9d41ae7660b Mon Sep 17 00:00:00 2001 From: RINO767 Date: Mon, 26 Nov 2018 16:18:46 +0100 Subject: [PATCH 18/29] integrating tests into buildpipeline --- .travis.yml | 3 +++ src/karma.conf.js | 10 ++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index fb6d1f5..4ff9a4e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,7 @@ sudo: required language: node_js +addons: + chrome: stable node_js: - node branches: @@ -8,6 +10,7 @@ branches: before_script: - npm install -g @angular/cli script: +- ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod - ng build --prod after_success: - ci/publish_docker.sh diff --git a/src/karma.conf.js b/src/karma.conf.js index f590ac3..e28bb38 100644 --- a/src/karma.conf.js +++ b/src/karma.conf.js @@ -27,7 +27,13 @@ module.exports = function (config) { colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['Chrome', 'PhantomJS'], - singleRun: false + browsers: ['Chrome', 'PhantomJS', 'ChromeHeadless', 'ChromeHeadlessNoSandbox'], + singleRun: false, + customLaunchers: { + ChromeHeadlessNoSandbox: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + } }); }; \ No newline at end of file From e5fecb002a8d02428300f6bf65938274885887dc Mon Sep 17 00:00:00 2001 From: RINO767 Date: Mon, 26 Nov 2018 16:31:51 +0100 Subject: [PATCH 19/29] removed teamcity reporter from travis.yml --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 4ff9a4e..0c7827c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ branches: before_script: - npm install -g @angular/cli script: -- ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod +- ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod --reporters=progress,kjhtml - ng build --prod after_success: - ci/publish_docker.sh From 56b4309f35ce04b71aa3ce273daf4d06a95f5c06 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Mon, 26 Nov 2018 17:13:26 +0100 Subject: [PATCH 20/29] some fixing i guess --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 0c7827c..bf8dda9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ branches: before_script: - npm install -g @angular/cli script: -- ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod --reporters=progress,kjhtml +# - ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod --reporters=progress,kjhtml - ng build --prod after_success: - ci/publish_docker.sh From f0273d082d7fb3b1c47999d3d713ebdb0dedc0b8 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Mon, 26 Nov 2018 17:21:21 +0100 Subject: [PATCH 21/29] removed redundant providers --- src/app/app.module.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f167510..3ef836b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import {CloudViewComponent} from './components/clouds/cloud-view/cloud-view.comp import {CloudCardComponent} from './components/clouds/cloud-card/cloud-card.component'; import {DialogService} from './services/dialog.service'; import {DeleteCloudDialogComponent} from './dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; -import {Overlay, OverlayModule} from '@angular/cdk/overlay'; +import {OverlayModule} from '@angular/cdk/overlay'; import {ConfirmNewCloudDialogComponent} from './dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; import {environment} from '../environments/environment'; import {CloudDataService} from './services/cloud-data.service'; @@ -63,11 +63,6 @@ export function apiConfigFactory(): Configuration { CdkTableModule ], providers: [ - Overlay, - DialogService, - CloudDataService, - RuntimeConfigService, - ToastService ], entryComponents: [ ToastComponent, From 01669776691fe0ff244242acc60b1fa808f6c896 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 27 Nov 2018 10:10:04 +0100 Subject: [PATCH 22/29] WiP relocate overlay to module --- package.json | 2 +- src/app/app-dialog.module.ts | 27 ++++++++++++++++++++++++ src/app/app.module.ts | 16 ++++---------- src/app/dialogs/toast/toast.component.ts | 2 +- src/app/model/dialogRef.ts | 2 ++ src/app/services/dialog.service.ts | 4 +--- src/app/services/toast.service.ts | 4 +--- src/environments/environment.ts | 4 ++-- tsconfig.compodoc.json | 7 ++++++ 9 files changed, 46 insertions(+), 22 deletions(-) create mode 100644 src/app/app-dialog.module.ts create mode 100644 tsconfig.compodoc.json diff --git a/package.json b/package.json index e22fde6..bd7dae4 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint": "ng lint", "e2e": "ng e2e", "compodoc": "npx compodoc", - "generate-docs": "compodoc -p tsconfig.json --includes additional_docs/", + "generate-docs": "compodoc -p tsconfig.compodoc.json --includes additional_docs/", "serve-docs": "compodoc -s tsconfig.json" }, "private": true, diff --git a/src/app/app-dialog.module.ts b/src/app/app-dialog.module.ts new file mode 100644 index 0000000..7a6b97d --- /dev/null +++ b/src/app/app-dialog.module.ts @@ -0,0 +1,27 @@ +import {NgModule} from '@angular/core'; +import {OverlayModule} from '@angular/cdk/overlay'; +import {ToastComponent} from './dialogs/toast/toast.component'; +import {DialogService} from './services/dialog.service'; +import {ToastService} from './services/toast.service'; +import {ConfirmNewCloudDialogComponent} from './dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; +import {DeleteCloudDialogComponent} from './dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; + +@NgModule({ + declarations: [ToastComponent, + ConfirmNewCloudDialogComponent, + DeleteCloudDialogComponent + ], + imports: [ + OverlayModule + ], + providers: [ + DialogService, + ToastService + ], + entryComponents: [ToastComponent, + ConfirmNewCloudDialogComponent, + DeleteCloudDialogComponent + ] +}) +export class AppDialogModule { +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3ef836b..b9f6dd7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,6 +26,7 @@ import {ImagesOverviewComponent} from './components/images/images-overview/image import { LocationsOverviewComponent } from './components/locations/locations-overview/locations-overview.component'; import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; import { YamlGraphComponent } from './components/editor/yaml-graph/yaml-graph.component'; +import {AppDialogModule} from './app-dialog.module'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -42,9 +43,6 @@ export function apiConfigFactory(): Configuration { NewCloudComponent, CloudViewComponent, CloudCardComponent, - DeleteCloudDialogComponent, - ConfirmNewCloudDialogComponent, - ToastComponent, HardwareOverviewComponent, ImagesOverviewComponent, LocationsOverviewComponent, @@ -59,16 +57,10 @@ export function apiConfigFactory(): Configuration { HttpClientModule, FormsModule, ReactiveFormsModule, - OverlayModule, - CdkTableModule - ], - providers: [ - ], - entryComponents: [ - ToastComponent, - DeleteCloudDialogComponent, - ConfirmNewCloudDialogComponent, + CdkTableModule, + AppDialogModule ], + providers: [], bootstrap: [AppComponent] }) export class AppModule { diff --git a/src/app/dialogs/toast/toast.component.ts b/src/app/dialogs/toast/toast.component.ts index 4ca12c0..896aec6 100644 --- a/src/app/dialogs/toast/toast.component.ts +++ b/src/app/dialogs/toast/toast.component.ts @@ -13,7 +13,7 @@ export class ToastComponent implements OnInit { toast: Toast; constructor(public dialogRef: DialogRef, - @Inject(DIALOG_DATA) public data: Toast) { } + @Inject(DIALOG_DATA) public data: Toast) { } ngOnInit() { this.toast = this.data; diff --git a/src/app/model/dialogRef.ts b/src/app/model/dialogRef.ts index 217587c..444ced3 100644 --- a/src/app/model/dialogRef.ts +++ b/src/app/model/dialogRef.ts @@ -1,6 +1,8 @@ import {OverlayRef} from '@angular/cdk/overlay'; import {Observable, Subject} from 'rxjs'; + + /** * Represents the Reference to a Dialog */ diff --git a/src/app/services/dialog.service.ts b/src/app/services/dialog.service.ts index 6fb1861..59e99f8 100644 --- a/src/app/services/dialog.service.ts +++ b/src/app/services/dialog.service.ts @@ -26,9 +26,7 @@ export const DIALOG_DATA = new InjectionToken('DIALOG_DATA'); /** * Service to open modal Dialogs */ -@Injectable({ - providedIn: 'root' -}) +@Injectable() export class DialogService { /** diff --git a/src/app/services/toast.service.ts b/src/app/services/toast.service.ts index 854dc02..e22fc96 100644 --- a/src/app/services/toast.service.ts +++ b/src/app/services/toast.service.ts @@ -10,9 +10,7 @@ import {environment} from '../../environments/environment'; * Handler for notifications. Currently only supports one notification at a time. */ -@Injectable({ - providedIn: 'root' -}) +@Injectable() export class ToastService { private toastRef: DialogRef = null; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index dcc9a89..cd64d5b 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -8,9 +8,9 @@ export const environment = { production: false, useRuntimeConfig: false, href: '/', - apiPath: '', + apiPath: 'http://134.60.64.119:9000', authMode: AuthMode.SINGLE, - xApiKey: '', + xApiKey: 'secureUI', notificationDuration: 10000 }; diff --git a/tsconfig.compodoc.json b/tsconfig.compodoc.json new file mode 100644 index 0000000..bbc41c1 --- /dev/null +++ b/tsconfig.compodoc.json @@ -0,0 +1,7 @@ +{ + "extends": "src/tsconfig.app.json", + "exclude": [ + "**/*.actions.ts", + "**/*.reducer.ts" + ] +} \ No newline at end of file From c4fa4b8bc6a940aede19ace0180e880dbad6639c Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Tue, 27 Nov 2018 14:26:13 +0100 Subject: [PATCH 23/29] relocated Dialogs to Dialog Service --- src/app/{ => app-dialog}/app-dialog.module.ts | 6 +++-- .../confirm-new-cloud-dialog.component.html | 0 .../confirm-new-cloud-dialog.component.scss | 0 ...confirm-new-cloud-dialog.component.spec.ts | 2 +- .../confirm-new-cloud-dialog.component.ts | 2 +- .../delete-cloud-dialog.component.html | 0 .../delete-cloud-dialog.component.scss | 0 .../delete-cloud-dialog.component.spec.ts | 2 +- .../delete-cloud-dialog.component.ts | 2 +- .../dialogs/toast/toast.component.html | 0 .../dialogs/toast/toast.component.scss | 0 .../dialogs/toast/toast.component.spec.ts | 2 +- .../dialogs/toast/toast.component.ts | 4 ++-- .../services/dialog.service.spec.ts | 12 ++++------ .../services/dialog.service.ts | 2 +- .../services/toast.service.spec.ts | 14 ++++------- .../services/toast.service.ts | 6 ++--- src/app/app.module.ts | 12 +++++----- .../cloud-view/cloud-view.component.spec.ts | 4 +++- .../clouds/cloud-view/cloud-view.component.ts | 4 ++-- .../new-cloud/new-cloud.component.spec.ts | 11 ++++----- .../clouds/new-cloud/new-cloud.component.ts | 6 ++--- .../yaml-editor/yaml-editor.component.spec.ts | 12 +++++----- .../yaml-editor/yaml-editor.component.ts | 2 +- .../hardware-overview.component.spec.ts | 12 ++++------ .../images-overview.component.spec.ts | 12 ++++------ .../locations-overview.component.spec.ts | 23 ++----------------- src/app/services/cloud-data.service.spec.ts | 14 +++++------ src/app/services/cloud-data.service.ts | 2 +- src/app/services/job-data.service.spec.ts | 14 +++++------ src/app/services/job-data.service.ts | 2 +- src/app/services/yaml-data.service.spec.ts | 15 +++++------- src/app/services/yaml-data.service.ts | 2 +- 33 files changed, 84 insertions(+), 117 deletions(-) rename src/app/{ => app-dialog}/app-dialog.module.ts (90%) rename src/app/{ => app-dialog}/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.html (100%) rename src/app/{ => app-dialog}/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.scss (100%) rename src/app/{ => app-dialog}/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts (95%) rename src/app/{ => app-dialog}/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts (91%) rename src/app/{ => app-dialog}/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.html (100%) rename src/app/{ => app-dialog}/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.scss (100%) rename src/app/{ => app-dialog}/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts (94%) rename src/app/{ => app-dialog}/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts (91%) rename src/app/{ => app-dialog}/dialogs/toast/toast.component.html (100%) rename src/app/{ => app-dialog}/dialogs/toast/toast.component.scss (100%) rename src/app/{ => app-dialog}/dialogs/toast/toast.component.spec.ts (93%) rename src/app/{ => app-dialog}/dialogs/toast/toast.component.ts (82%) rename src/app/{ => app-dialog}/services/dialog.service.spec.ts (66%) rename src/app/{ => app-dialog}/services/dialog.service.ts (98%) rename src/app/{ => app-dialog}/services/toast.service.spec.ts (58%) rename src/app/{ => app-dialog}/services/toast.service.ts (87%) diff --git a/src/app/app-dialog.module.ts b/src/app/app-dialog/app-dialog.module.ts similarity index 90% rename from src/app/app-dialog.module.ts rename to src/app/app-dialog/app-dialog.module.ts index 7a6b97d..4e677e6 100644 --- a/src/app/app-dialog.module.ts +++ b/src/app/app-dialog/app-dialog.module.ts @@ -7,7 +7,8 @@ import {ConfirmNewCloudDialogComponent} from './dialogs/confirm-new-cloud-dialog import {DeleteCloudDialogComponent} from './dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; @NgModule({ - declarations: [ToastComponent, + declarations: [ + ToastComponent, ConfirmNewCloudDialogComponent, DeleteCloudDialogComponent ], @@ -18,7 +19,8 @@ import {DeleteCloudDialogComponent} from './dialogs/delete-cloud-dialog/delete-c DialogService, ToastService ], - entryComponents: [ToastComponent, + entryComponents: [ + ToastComponent, ConfirmNewCloudDialogComponent, DeleteCloudDialogComponent ] diff --git a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.html b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.html similarity index 100% rename from src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.html rename to src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.html diff --git a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.scss b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.scss similarity index 100% rename from src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.scss rename to src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.scss diff --git a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts similarity index 95% rename from src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts rename to src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts index d47b569..52bb522 100644 --- a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts +++ b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts @@ -1,7 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ConfirmNewCloudDialogComponent } from './confirm-new-cloud-dialog.component'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; import {NgModule} from '@angular/core'; import {ToastComponent} from '../toast/toast.component'; diff --git a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts similarity index 91% rename from src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts rename to src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts index 96280a1..8c31485 100644 --- a/src/app/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts +++ b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.ts @@ -1,5 +1,5 @@ import {Component, Inject, OnInit} from '@angular/core'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; @Component({ diff --git a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.html b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.html similarity index 100% rename from src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.html rename to src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.html diff --git a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.scss b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.scss similarity index 100% rename from src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.scss rename to src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.scss diff --git a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts similarity index 94% rename from src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts rename to src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts index bbf8b58..14410a5 100644 --- a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts +++ b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.spec.ts @@ -1,7 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { DeleteCloudDialogComponent } from './delete-cloud-dialog.component'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; describe('DeleteCloudDialogComponent', () => { diff --git a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts similarity index 91% rename from src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts rename to src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts index 7eef3ad..f0837cf 100644 --- a/src/app/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts +++ b/src/app/app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component.ts @@ -1,5 +1,5 @@ import {Component, Inject, OnInit} from '@angular/core'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; @Component({ diff --git a/src/app/dialogs/toast/toast.component.html b/src/app/app-dialog/dialogs/toast/toast.component.html similarity index 100% rename from src/app/dialogs/toast/toast.component.html rename to src/app/app-dialog/dialogs/toast/toast.component.html diff --git a/src/app/dialogs/toast/toast.component.scss b/src/app/app-dialog/dialogs/toast/toast.component.scss similarity index 100% rename from src/app/dialogs/toast/toast.component.scss rename to src/app/app-dialog/dialogs/toast/toast.component.scss diff --git a/src/app/dialogs/toast/toast.component.spec.ts b/src/app/app-dialog/dialogs/toast/toast.component.spec.ts similarity index 93% rename from src/app/dialogs/toast/toast.component.spec.ts rename to src/app/app-dialog/dialogs/toast/toast.component.spec.ts index 340ccfc..3cf2f63 100644 --- a/src/app/dialogs/toast/toast.component.spec.ts +++ b/src/app/app-dialog/dialogs/toast/toast.component.spec.ts @@ -1,7 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ToastComponent } from './toast.component'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; describe('ToastComponent', () => { diff --git a/src/app/dialogs/toast/toast.component.ts b/src/app/app-dialog/dialogs/toast/toast.component.ts similarity index 82% rename from src/app/dialogs/toast/toast.component.ts rename to src/app/app-dialog/dialogs/toast/toast.component.ts index 896aec6..44be46f 100644 --- a/src/app/dialogs/toast/toast.component.ts +++ b/src/app/app-dialog/dialogs/toast/toast.component.ts @@ -1,7 +1,7 @@ import {Component, Inject, OnInit} from '@angular/core'; -import {DialogRef} from '../../model/dialogRef'; +import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; -import {Toast} from '../../model/toast'; +import {Toast} from '../../../model/toast'; @Component({ selector: 'app-toast', diff --git a/src/app/services/dialog.service.spec.ts b/src/app/app-dialog/services/dialog.service.spec.ts similarity index 66% rename from src/app/services/dialog.service.spec.ts rename to src/app/app-dialog/services/dialog.service.spec.ts index 0763634..1123243 100644 --- a/src/app/services/dialog.service.spec.ts +++ b/src/app/app-dialog/services/dialog.service.spec.ts @@ -1,17 +1,15 @@ import {TestBed, inject} from '@angular/core/testing'; import {DialogService} from './dialog.service'; -import {Injector} from '@angular/core'; -import {Overlay} from '@angular/cdk/overlay'; +import {AppDialogModule} from '../app-dialog.module'; describe('DialogService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [ - DialogService, - Injector, - Overlay - ] + imports: [ + AppDialogModule + ], + providers: [] }); }); diff --git a/src/app/services/dialog.service.ts b/src/app/app-dialog/services/dialog.service.ts similarity index 98% rename from src/app/services/dialog.service.ts rename to src/app/app-dialog/services/dialog.service.ts index 59e99f8..a799689 100644 --- a/src/app/services/dialog.service.ts +++ b/src/app/app-dialog/services/dialog.service.ts @@ -1,7 +1,7 @@ import {Injectable, InjectionToken, Injector} from '@angular/core'; import {ComponentType, Overlay, OverlayConfig, OverlayRef} from '@angular/cdk/overlay'; import {ComponentPortal, PortalInjector} from '@angular/cdk/portal'; -import {DialogRef} from '../model/dialogRef'; +import {DialogRef} from '../../model/dialogRef'; /** * Describes the Dialog Configurations that are accessible from outside diff --git a/src/app/services/toast.service.spec.ts b/src/app/app-dialog/services/toast.service.spec.ts similarity index 58% rename from src/app/services/toast.service.spec.ts rename to src/app/app-dialog/services/toast.service.spec.ts index 689ce5c..b7348dd 100644 --- a/src/app/services/toast.service.spec.ts +++ b/src/app/app-dialog/services/toast.service.spec.ts @@ -1,19 +1,15 @@ import {TestBed, inject} from '@angular/core/testing'; import {ToastService} from './toast.service'; -import {Overlay} from '@angular/cdk/overlay'; -import {DialogService} from './dialog.service'; -import {Injector} from '@angular/core'; +import {AppDialogModule} from '../app-dialog.module'; describe('ToastService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [ - DialogService, - ToastService, - Overlay, - Injector - ] + imports: [ + AppDialogModule + ], + providers: [] }); }); diff --git a/src/app/services/toast.service.ts b/src/app/app-dialog/services/toast.service.ts similarity index 87% rename from src/app/services/toast.service.ts rename to src/app/app-dialog/services/toast.service.ts index e22fc96..22fe959 100644 --- a/src/app/services/toast.service.ts +++ b/src/app/app-dialog/services/toast.service.ts @@ -1,10 +1,10 @@ import {Injectable} from '@angular/core'; -import {Toast} from '../model/toast'; +import {Toast} from '../../model/toast'; import {DialogService} from './dialog.service'; import {ToastComponent} from '../dialogs/toast/toast.component'; -import {DialogRef} from '../model/dialogRef'; +import {DialogRef} from '../../model/dialogRef'; import {interval, Subscription} from 'rxjs'; -import {environment} from '../../environments/environment'; +import {environment} from '../../../environments/environment'; /** * Handler for notifications. Currently only supports one notification at a time. diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b9f6dd7..6627fa0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,22 +11,22 @@ import {NewCloudComponent} from './components/clouds/new-cloud/new-cloud.compone import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CloudViewComponent} from './components/clouds/cloud-view/cloud-view.component'; import {CloudCardComponent} from './components/clouds/cloud-card/cloud-card.component'; -import {DialogService} from './services/dialog.service'; -import {DeleteCloudDialogComponent} from './dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; +import {DialogService} from './app-dialog/services/dialog.service'; +import {DeleteCloudDialogComponent} from './app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; import {OverlayModule} from '@angular/cdk/overlay'; -import {ConfirmNewCloudDialogComponent} from './dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; +import {ConfirmNewCloudDialogComponent} from './app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; import {environment} from '../environments/environment'; import {CloudDataService} from './services/cloud-data.service'; import {RuntimeConfigService} from './services/runtime-config.service'; -import {ToastComponent} from './dialogs/toast/toast.component'; -import {ToastService} from './services/toast.service'; +import {ToastComponent} from './app-dialog/dialogs/toast/toast.component'; +import {ToastService} from './app-dialog/services/toast.service'; import {HardwareOverviewComponent} from './components/hardware/hardware-overview/hardware-overview.component'; import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from './components/images/images-overview/images-overview.component'; import { LocationsOverviewComponent } from './components/locations/locations-overview/locations-overview.component'; import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; import { YamlGraphComponent } from './components/editor/yaml-graph/yaml-graph.component'; -import {AppDialogModule} from './app-dialog.module'; +import {AppDialogModule} from './app-dialog/app-dialog.module'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { 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 1dcb297..306955c 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 @@ -10,6 +10,7 @@ import {ActivatedRoute, convertToParamMap} from '@angular/router'; import {Observable} from 'rxjs'; import {Api, CloudCredential, CloudType} from 'cloudiator-rest-api'; import {CdkTableModule} from '@angular/cdk/table'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('CloudViewComponent', () => { let component: CloudViewComponent; @@ -38,7 +39,8 @@ describe('CloudViewComponent', () => { 'feature': combineReducers(fromRoot.reducers) }), RouterTestingModule, - CdkTableModule + CdkTableModule, + AppDialogModule ], providers: [ { 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 bf8be41..3543020 100644 --- a/src/app/components/clouds/cloud-view/cloud-view.component.ts +++ b/src/app/components/clouds/cloud-view/cloud-view.component.ts @@ -3,8 +3,8 @@ import {CloudDataService} from '../../../services/cloud-data.service'; import {ActivatedRoute, Router} from '@angular/router'; import {Cloud, Hardware, Image} from 'cloudiator-rest-api'; import {BehaviorSubject, Subscription} from 'rxjs'; -import {DialogService} from '../../../services/dialog.service'; -import {DeleteCloudDialogComponent} from '../../../dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {DeleteCloudDialogComponent} from '../../../app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; import {map} from 'rxjs/operators'; /** diff --git a/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts b/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts index b7078ba..ce683d2 100644 --- a/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts +++ b/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts @@ -9,9 +9,10 @@ import * as fromRoot from '../../../reducers'; import {combineReducers, StoreModule} from '@ngrx/store'; import {RouterTestingModule} from '@angular/router/testing'; import {ApiModule} from 'cloudiator-rest-api'; -import {DialogService} from '../../../services/dialog.service'; -import {ToastService} from '../../../services/toast.service'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {apiConfigFactory} from '../../../app.module'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('NewCloudComponent', () => { let component: NewCloudComponent; @@ -28,12 +29,10 @@ describe('NewCloudComponent', () => { ApiModule.forRoot(apiConfigFactory), RouterTestingModule, FormsModule, - HttpClientModule + HttpClientModule, + AppDialogModule ], providers: [ - ToastService, - DialogService, - Overlay, CloudDataService, ] }) diff --git a/src/app/components/clouds/new-cloud/new-cloud.component.ts b/src/app/components/clouds/new-cloud/new-cloud.component.ts index f58ab1c..7efdebc 100644 --- a/src/app/components/clouds/new-cloud/new-cloud.component.ts +++ b/src/app/components/clouds/new-cloud/new-cloud.component.ts @@ -2,9 +2,9 @@ import {Component, OnInit} from '@angular/core'; import {NewCloud} from 'cloudiator-rest-api'; import {CloudDataService} from '../../../services/cloud-data.service'; import {Router} from '@angular/router'; -import {DialogService} from '../../../services/dialog.service'; -import {ConfirmNewCloudDialogComponent} from '../../../dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; -import {ToastService} from '../../../services/toast.service'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ConfirmNewCloudDialogComponent} from '../../../app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {ToastType} from '../../../model/toast'; /** 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 ff1d06e..2e31eb3 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 @@ -6,7 +6,7 @@ import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; import {YamlGraphComponent} from '../yaml-graph/yaml-graph.component'; import {YamlDataService} from '../../../services/yaml-data.service'; -import {ToastService} from '../../../services/toast.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {HttpClientModule, HttpErrorResponse} from '@angular/common/http'; import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../../../app.module'; @@ -18,6 +18,8 @@ import * as testData from '../../../../../testing/test-data'; import {ToastType} from '../../../model/toast'; import {By} from '@angular/platform-browser'; import {take} from 'rxjs/operators'; +import {CdkTableModule} from '@angular/cdk/table'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -33,14 +35,12 @@ describe('YamlEditorComponent', () => { }), FormsModule, HttpClientModule, - ApiModule.forRoot(apiConfigFactory) + ApiModule.forRoot(apiConfigFactory), + AppDialogModule ], providers: [ EditorService, - YamlDataService, - ToastService, - Overlay, - Injector + YamlDataService ] }) 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 0c557b1..37edc77 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -4,7 +4,7 @@ import {Editor} from 'brace'; import 'brace/mode/yaml'; import 'brace/theme/monokai'; import {YamlDataService} from '../../../services/yaml-data.service'; -import {ToastService} from '../../../services/toast.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {ToastType} from '../../../model/toast'; import {JobDataService} from '../../../services/job-data.service'; import {EditorService} from '../../../services/editor.service'; diff --git a/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts b/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts index b199ceb..0d46fed 100644 --- a/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts +++ b/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts @@ -8,13 +8,14 @@ import {ApiModule, CloudService} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../../../reducers'; -import {DialogService} from '../../../services/dialog.service'; -import {ToastService} from '../../../services/toast.service'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; import {apiConfigFactory} from '../../../app.module'; import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {of} from 'rxjs'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('HardwareOverviewComponent', () => { let component: HardwareOverviewComponent; @@ -35,15 +36,12 @@ describe('HardwareOverviewComponent', () => { CdkTableModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), - RouterModule + RouterModule, + AppDialogModule ], providers: [ {provide: Router, useValue: router}, CloudDataService, - DialogService, - ToastService, - Overlay, - Injector, { provide: ActivatedRoute, useValue: { diff --git a/src/app/components/images/images-overview/images-overview.component.spec.ts b/src/app/components/images/images-overview/images-overview.component.spec.ts index 53d3307..1a7efd6 100644 --- a/src/app/components/images/images-overview/images-overview.component.spec.ts +++ b/src/app/components/images/images-overview/images-overview.component.spec.ts @@ -4,17 +4,18 @@ import {ImagesOverviewComponent} from './images-overview.component'; import {ApiModule, CloudService} from 'cloudiator-rest-api'; import {combineReducers, StoreModule} from '@ngrx/store'; import {HttpClientModule} from '@angular/common/http'; -import {ToastService} from '../../../services/toast.service'; +import {ToastService} from '../../../app-dialog/services/toast.service'; import {CdkTableModule} from '@angular/cdk/table'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Injector} from '@angular/core'; -import {DialogService} from '../../../services/dialog.service'; +import {DialogService} from '../../../app-dialog/services/dialog.service'; import {Overlay} from '@angular/cdk/overlay'; import {CloudDataService} from '../../../services/cloud-data.service'; import * as fromRoot from '../../../reducers'; import {apiConfigFactory} from '../../../app.module'; import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {of} from 'rxjs'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('ImagesOverviewComponent', () => { let component: ImagesOverviewComponent; @@ -35,15 +36,12 @@ describe('ImagesOverviewComponent', () => { CdkTableModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), - RouterModule + RouterModule, + AppDialogModule ], providers: [ { provide: Router, useValue: router }, CloudDataService, - DialogService, - ToastService, - Overlay, - Injector, { provide: ActivatedRoute, useValue: { diff --git a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts index 7bb8f38..a317e8f 100644 --- a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts +++ b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts @@ -10,12 +10,8 @@ import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../../../app.module'; import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {CloudDataService} from '../../../services/cloud-data.service'; -import {DialogService} from '../../../services/dialog.service'; -import {ToastService} from '../../../services/toast.service'; -import {Overlay} from '@angular/cdk/overlay'; -import {Injector, NgModule} from '@angular/core'; import {of} from 'rxjs'; -import {ToastComponent} from '../../../dialogs/toast/toast.component'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; describe('LocationsOverviewComponent', () => { let component: LocationsOverviewComponent; @@ -38,15 +34,11 @@ describe('LocationsOverviewComponent', () => { HttpClientModule, ApiModule.forRoot(apiConfigFactory), RouterModule, - TestModule + AppDialogModule ], providers: [ {provide: Router, useValue: router}, CloudDataService, - DialogService, - ToastService, - Overlay, - Injector, { provide: ActivatedRoute, useValue: { @@ -68,14 +60,3 @@ describe('LocationsOverviewComponent', () => { expect(component).toBeTruthy(); }); }); - - - -@NgModule({ - declarations: [ToastComponent], - imports: [], // <-- added this line - entryComponents: [ToastComponent], - exports: [ToastComponent], -}) -class TestModule { -} diff --git a/src/app/services/cloud-data.service.spec.ts b/src/app/services/cloud-data.service.spec.ts index 1693cf2..125dc86 100644 --- a/src/app/services/cloud-data.service.spec.ts +++ b/src/app/services/cloud-data.service.spec.ts @@ -6,12 +6,13 @@ import {HttpClientModule} from '@angular/common/http'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; import * as testData from '../../../testing/test-data'; -import {DialogService} from './dialog.service'; -import {ToastService} from './toast.service'; +import {DialogService} from '../app-dialog/services/dialog.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {Injector} from '@angular/core'; import {Overlay} from '@angular/cdk/overlay'; import {apiConfigFactory} from '../app.module'; import {of} from 'rxjs'; +import {AppDialogModule} from '../app-dialog/app-dialog.module'; describe('CloudDataService', () => { @@ -28,15 +29,12 @@ describe('CloudDataService', () => { 'feature': combineReducers(fromRoot.reducers) }), HttpClientModule, - ApiModule.forRoot(apiConfigFactory) + ApiModule.forRoot(apiConfigFactory), + AppDialogModule ], providers: [ CloudDataService, - {provide: CloudService, useValue: mockCloudService}, - DialogService, - ToastService, - Overlay, - Injector + {provide: CloudService, useValue: mockCloudService} ] }); }); diff --git a/src/app/services/cloud-data.service.ts b/src/app/services/cloud-data.service.ts index 2d51b9d..b8881fd 100644 --- a/src/app/services/cloud-data.service.ts +++ b/src/app/services/cloud-data.service.ts @@ -7,7 +7,7 @@ import {select, Store} from '@ngrx/store'; import {map} from 'rxjs/operators'; import {HttpResponse} from '@angular/common/http'; import {RuntimeConfigService} from './runtime-config.service'; -import {ToastService} from './toast.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {ToastType} from '../model/toast'; /** diff --git a/src/app/services/job-data.service.spec.ts b/src/app/services/job-data.service.spec.ts index 393bd1e..13f0257 100644 --- a/src/app/services/job-data.service.spec.ts +++ b/src/app/services/job-data.service.spec.ts @@ -5,10 +5,11 @@ import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; -import {DialogService} from './dialog.service'; -import {ToastService} from './toast.service'; +import {DialogService} from '../app-dialog/services/dialog.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; +import {AppDialogModule} from '../app-dialog/app-dialog.module'; describe('JobDataService', () => { beforeEach(() => TestBed.configureTestingModule({ @@ -18,14 +19,11 @@ describe('JobDataService', () => { 'feature': combineReducers(fromRoot.reducers) }), ApiModule, - HttpClientModule + HttpClientModule, + AppDialogModule ], providers: [ - JobDataService, - DialogService, - ToastService, - Overlay, - Injector + JobDataService ] })); diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts index f76f794..52329e7 100644 --- a/src/app/services/job-data.service.ts +++ b/src/app/services/job-data.service.ts @@ -3,7 +3,7 @@ import {select, Store} from '@ngrx/store'; import * as fromRoot from '../reducers'; import * as fromJobData from '../actions/job-data.actions'; import {RuntimeConfigService} from './runtime-config.service'; -import {ToastService} from './toast.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {Job, JobService} from 'cloudiator-rest-api'; import {Observable} from 'rxjs'; import {ToastType} from '../model/toast'; diff --git a/src/app/services/yaml-data.service.spec.ts b/src/app/services/yaml-data.service.spec.ts index 832d701..8356ed0 100644 --- a/src/app/services/yaml-data.service.spec.ts +++ b/src/app/services/yaml-data.service.spec.ts @@ -4,12 +4,13 @@ import {YamlDataService} from './yaml-data.service'; import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {apiConfigFactory} from '../app.module'; -import {DialogService} from './dialog.service'; -import {ToastService} from './toast.service'; +import {DialogService} from '../app-dialog/services/dialog.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {Overlay} from '@angular/cdk/overlay'; import {Injector} from '@angular/core'; import {combineReducers, StoreModule} from '@ngrx/store'; import * as fromRoot from '../reducers'; +import {AppDialogModule} from '../app-dialog/app-dialog.module'; describe('YamlDataService', () => { @@ -20,14 +21,10 @@ describe('YamlDataService', () => { 'feature': combineReducers(fromRoot.reducers) }), ApiModule.forRoot(apiConfigFactory), - HttpClientModule + HttpClientModule, + AppDialogModule ], - providers: [ - DialogService, - ToastService, - Overlay, - Injector - ] + providers: [] })); it('should be created', () => { diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index c649b76..2e6ede3 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -1,6 +1,6 @@ import {Injectable} from '@angular/core'; import {RuntimeConfigService} from './runtime-config.service'; -import {ToastService} from './toast.service'; +import {ToastService} from '../app-dialog/services/toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; import {Observable, of} from 'rxjs'; import {select, Store} from '@ngrx/store'; From cefdd6db1760bac4adce0f572e3c0319f4dd3b17 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Mon, 3 Dec 2018 16:00:52 +0100 Subject: [PATCH 24/29] reworked redux store and moved it into seperate module --- ...confirm-new-cloud-dialog.component.spec.ts | 2 - src/app/app.module.ts | 3 +- src/app/components/app/app.component.spec.ts | 8 +--- .../cloud-overview.component.spec.ts | 8 +--- .../cloud-overview.component.ts | 5 +- .../cloud-view/cloud-view.component.spec.ts | 8 +--- .../new-cloud/new-cloud.component.spec.ts | 11 +---- .../yaml-editor/yaml-editor.component.spec.ts | 15 ++---- .../yaml-graph/yaml-graph.component.spec.ts | 8 +--- .../editor/yaml-graph/yaml-graph.component.ts | 2 - .../hardware-overview.component.spec.ts | 14 ++---- .../images-overview.component.spec.ts | 14 ++---- .../locations-overview.component.spec.ts | 8 +--- .../root-store/cloud-data-store/actions.ts | 37 +++++++++++++++ .../cloud-data-store.module.ts | 13 ++++++ src/app/root-store/cloud-data-store/index.ts | 11 +++++ .../root-store/cloud-data-store/reducer.ts | 29 ++++++++++++ .../root-store/cloud-data-store/selectors.ts | 21 +++++++++ src/app/root-store/cloud-data-store/state.ts | 15 ++++++ src/app/root-store/editor-store/actions.ts | 46 +++++++++++++++++++ .../editor-store/editor-store.module.ts | 13 ++++++ src/app/root-store/editor-store/index.ts | 10 ++++ src/app/root-store/editor-store/reducer.ts | 18 ++++++++ src/app/root-store/editor-store/selectors.ts | 20 ++++++++ src/app/root-store/editor-store/state.ts | 15 ++++++ src/app/root-store/index.ts | 7 +++ src/app/root-store/job-data-store/actions.ts | 15 ++++++ src/app/root-store/job-data-store/index.ts | 10 ++++ .../job-data-store/job-data-store.module.ts | 10 ++++ src/app/root-store/job-data-store/reducer.ts | 14 ++++++ .../root-store/job-data-store/selectors.ts | 12 +++++ src/app/root-store/job-data-store/state.ts | 9 ++++ src/app/root-store/root-state.ts | 11 +++++ src/app/root-store/root-store.module.ts | 20 ++++++++ .../runtime-config-store/actions.ts | 40 ++++++++++++++++ .../root-store/runtime-config-store/index.ts | 10 ++++ .../runtime-config-store/reducer.ts | 39 ++++++++++++++++ .../runtime-config-store.module.ts | 13 ++++++ .../runtime-config-store/selectors.ts | 24 ++++++++++ .../root-store/runtime-config-store/state.ts | 15 ++++++ src/app/services/cloud-data.service.spec.ts | 12 +---- src/app/services/cloud-data.service.ts | 31 ++++++------- src/app/services/editor.service.spec.ts | 8 +--- src/app/services/editor.service.ts | 25 +++++----- src/app/services/job-data.service.spec.ts | 12 +---- src/app/services/job-data.service.ts | 11 ++--- .../services/runtime-config.service.spec.ts | 8 +--- src/app/services/runtime-config.service.ts | 30 ++++++------ src/app/services/yaml-data.service.spec.ts | 12 +---- src/app/services/yaml-data.service.ts | 6 +-- 50 files changed, 581 insertions(+), 177 deletions(-) create mode 100644 src/app/root-store/cloud-data-store/actions.ts create mode 100644 src/app/root-store/cloud-data-store/cloud-data-store.module.ts create mode 100644 src/app/root-store/cloud-data-store/index.ts create mode 100644 src/app/root-store/cloud-data-store/reducer.ts create mode 100644 src/app/root-store/cloud-data-store/selectors.ts create mode 100644 src/app/root-store/cloud-data-store/state.ts create mode 100644 src/app/root-store/editor-store/actions.ts create mode 100644 src/app/root-store/editor-store/editor-store.module.ts create mode 100644 src/app/root-store/editor-store/index.ts create mode 100644 src/app/root-store/editor-store/reducer.ts create mode 100644 src/app/root-store/editor-store/selectors.ts create mode 100644 src/app/root-store/editor-store/state.ts create mode 100644 src/app/root-store/index.ts create mode 100644 src/app/root-store/job-data-store/actions.ts create mode 100644 src/app/root-store/job-data-store/index.ts create mode 100644 src/app/root-store/job-data-store/job-data-store.module.ts create mode 100644 src/app/root-store/job-data-store/reducer.ts create mode 100644 src/app/root-store/job-data-store/selectors.ts create mode 100644 src/app/root-store/job-data-store/state.ts create mode 100644 src/app/root-store/root-state.ts create mode 100644 src/app/root-store/root-store.module.ts create mode 100644 src/app/root-store/runtime-config-store/actions.ts create mode 100644 src/app/root-store/runtime-config-store/index.ts create mode 100644 src/app/root-store/runtime-config-store/reducer.ts create mode 100644 src/app/root-store/runtime-config-store/runtime-config-store.module.ts create mode 100644 src/app/root-store/runtime-config-store/selectors.ts create mode 100644 src/app/root-store/runtime-config-store/state.ts diff --git a/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts index 52bb522..b96846c 100644 --- a/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts +++ b/src/app/app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component.spec.ts @@ -3,8 +3,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ConfirmNewCloudDialogComponent } from './confirm-new-cloud-dialog.component'; import {DialogRef} from '../../../model/dialogRef'; import {DIALOG_DATA} from '../../services/dialog.service'; -import {NgModule} from '@angular/core'; -import {ToastComponent} from '../toast/toast.component'; describe('ConfirmNewCloudDialogComponent', () => { let component: ConfirmNewCloudDialogComponent; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6627fa0..ba0e99d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -27,6 +27,7 @@ import { LocationsOverviewComponent } from './components/locations/locations-ove import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; import { YamlGraphComponent } from './components/editor/yaml-graph/yaml-graph.component'; import {AppDialogModule} from './app-dialog/app-dialog.module'; +import {RootStoreModule} from './root-store/root-store.module'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -52,7 +53,7 @@ export function apiConfigFactory(): Configuration { imports: [ BrowserModule, AppRoutingModule, - AppStoreModule, + RootStoreModule, ApiModule.forRoot(apiConfigFactory), HttpClientModule, FormsModule, diff --git a/src/app/components/app/app.component.spec.ts b/src/app/components/app/app.component.spec.ts index 6cfe05e..a766980 100644 --- a/src/app/components/app/app.component.spec.ts +++ b/src/app/components/app/app.component.spec.ts @@ -11,9 +11,8 @@ import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from '../images/images-overview/images-overview.component'; import {LocationsOverviewComponent} from '../locations/locations-overview/locations-overview.component'; import {YamlEditorComponent} from '../editor/yaml-editor/yaml-editor.component'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../reducers'; import {YamlGraphComponent} from '../editor/yaml-graph/yaml-graph.component'; +import {RootStoreModule} from '../../root-store'; describe('AppComponent', () => { beforeEach(async(() => { @@ -31,10 +30,7 @@ describe('AppComponent', () => { YamlGraphComponent ], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, AppRoutingModule, FormsModule, ReactiveFormsModule, diff --git a/src/app/components/clouds/cloud-overview/cloud-overview.component.spec.ts b/src/app/components/clouds/cloud-overview/cloud-overview.component.spec.ts index 00abdbb..4a7d918 100644 --- a/src/app/components/clouds/cloud-overview/cloud-overview.component.spec.ts +++ b/src/app/components/clouds/cloud-overview/cloud-overview.component.spec.ts @@ -4,9 +4,8 @@ import {CloudOverviewComponent} from './cloud-overview.component'; import {CloudDataService} from '../../../services/cloud-data.service'; import {CloudCardComponent} from '../cloud-card/cloud-card.component'; import {RouterTestingModule} from '@angular/router/testing'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; import {Observable} from 'rxjs'; +import {RootStoreModule} from '../../../root-store'; describe('CloudOverviewComponent', () => { let component: CloudOverviewComponent; @@ -23,10 +22,7 @@ describe('CloudOverviewComponent', () => { CloudCardComponent ], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, RouterTestingModule, ], providers: [ 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 b776a72..45a92a5 100644 --- a/src/app/components/clouds/cloud-overview/cloud-overview.component.ts +++ b/src/app/components/clouds/cloud-overview/cloud-overview.component.ts @@ -1,10 +1,7 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {CloudDataService} from '../../../services/cloud-data.service'; -import {Cloud, CloudType} from 'cloudiator-rest-api'; +import {Cloud} from 'cloudiator-rest-api'; import {Subscription} from 'rxjs'; -import {Store} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; -import {filter} 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.spec.ts b/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts index 306955c..af13679 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 @@ -2,8 +2,6 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {CloudViewComponent} from './cloud-view.component'; import {RouterTestingModule} from '@angular/router/testing'; -import * as fromRoot from '../../../reducers'; -import {combineReducers, StoreModule} from '@ngrx/store'; import {CloudDataService} from '../../../services/cloud-data.service'; import {Overlay} from '@angular/cdk/overlay'; import {ActivatedRoute, convertToParamMap} from '@angular/router'; @@ -11,6 +9,7 @@ import {Observable} from 'rxjs'; import {Api, CloudCredential, CloudType} from 'cloudiator-rest-api'; import {CdkTableModule} from '@angular/cdk/table'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('CloudViewComponent', () => { let component: CloudViewComponent; @@ -34,10 +33,7 @@ describe('CloudViewComponent', () => { CloudViewComponent ], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, RouterTestingModule, CdkTableModule, AppDialogModule diff --git a/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts b/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts index ce683d2..4247bb0 100644 --- a/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts +++ b/src/app/components/clouds/new-cloud/new-cloud.component.spec.ts @@ -2,17 +2,13 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {NewCloudComponent} from './new-cloud.component'; import {FormsModule} from '@angular/forms'; -import {Overlay} from '@angular/cdk/overlay'; import {HttpClientModule} from '@angular/common/http'; import {CloudDataService} from '../../../services/cloud-data.service'; -import * as fromRoot from '../../../reducers'; -import {combineReducers, StoreModule} from '@ngrx/store'; import {RouterTestingModule} from '@angular/router/testing'; import {ApiModule} from 'cloudiator-rest-api'; -import {DialogService} from '../../../app-dialog/services/dialog.service'; -import {ToastService} from '../../../app-dialog/services/toast.service'; import {apiConfigFactory} from '../../../app.module'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('NewCloudComponent', () => { let component: NewCloudComponent; @@ -22,10 +18,7 @@ describe('NewCloudComponent', () => { TestBed.configureTestingModule({ declarations: [NewCloudComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, ApiModule.forRoot(apiConfigFactory), RouterTestingModule, FormsModule, 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 2e31eb3..5926222 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 @@ -2,24 +2,18 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {YamlEditorComponent} from './yaml-editor.component'; import {FormsModule} from '@angular/forms'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; import {YamlGraphComponent} from '../yaml-graph/yaml-graph.component'; import {YamlDataService} from '../../../services/yaml-data.service'; -import {ToastService} from '../../../app-dialog/services/toast.service'; import {HttpClientModule, HttpErrorResponse} from '@angular/common/http'; import {ApiModule} from 'cloudiator-rest-api'; import {apiConfigFactory} from '../../../app.module'; -import {Overlay} from '@angular/cdk/overlay'; -import {Injector} from '@angular/core'; import {EditorService} from '../../../services/editor.service'; -import {never, Observable, of, throwError} from 'rxjs'; +import {of, throwError} from 'rxjs'; import * as testData from '../../../../../testing/test-data'; import {ToastType} from '../../../model/toast'; -import {By} from '@angular/platform-browser'; import {take} from 'rxjs/operators'; -import {CdkTableModule} from '@angular/cdk/table'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('YamlEditorComponent', () => { let component: YamlEditorComponent; @@ -29,10 +23,7 @@ describe('YamlEditorComponent', () => { TestBed.configureTestingModule({ declarations: [YamlEditorComponent, YamlGraphComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), diff --git a/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts index 88f4b6f..5c14a6e 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts @@ -1,8 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { YamlGraphComponent } from './yaml-graph.component'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; +import {RootStoreModule} from '../../../root-store'; describe('YamlGraphComponent', () => { let component: YamlGraphComponent; @@ -12,10 +11,7 @@ describe('YamlGraphComponent', () => { TestBed.configureTestingModule({ declarations: [ YamlGraphComponent ], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }) + RootStoreModule ] }) .compileComponents(); 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 8d6d004..1501840 100644 --- a/src/app/components/editor/yaml-graph/yaml-graph.component.ts +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -1,7 +1,5 @@ import {Component, OnInit} from '@angular/core'; import * as cytoscape from 'cytoscape'; -import * as fromRoot from '../../../reducers'; -import {select, Store} from '@ngrx/store'; import {EditorService} from '../../../services/editor.service'; diff --git a/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts b/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts index 0d46fed..108c2a8 100644 --- a/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts +++ b/src/app/components/hardware/hardware-overview/hardware-overview.component.spec.ts @@ -4,18 +4,13 @@ import {HardwareOverviewComponent} from './hardware-overview.component'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CdkTableModule} from '@angular/cdk/table'; import {CloudDataService} from '../../../services/cloud-data.service'; -import {ApiModule, CloudService} from 'cloudiator-rest-api'; +import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; -import {DialogService} from '../../../app-dialog/services/dialog.service'; -import {ToastService} from '../../../app-dialog/services/toast.service'; -import {Overlay} from '@angular/cdk/overlay'; -import {Injector} from '@angular/core'; import {apiConfigFactory} from '../../../app.module'; import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {of} from 'rxjs'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('HardwareOverviewComponent', () => { let component: HardwareOverviewComponent; @@ -27,10 +22,7 @@ describe('HardwareOverviewComponent', () => { TestBed.configureTestingModule({ declarations: [HardwareOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, CdkTableModule, diff --git a/src/app/components/images/images-overview/images-overview.component.spec.ts b/src/app/components/images/images-overview/images-overview.component.spec.ts index 1a7efd6..6892138 100644 --- a/src/app/components/images/images-overview/images-overview.component.spec.ts +++ b/src/app/components/images/images-overview/images-overview.component.spec.ts @@ -1,21 +1,16 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {ImagesOverviewComponent} from './images-overview.component'; -import {ApiModule, CloudService} from 'cloudiator-rest-api'; -import {combineReducers, StoreModule} from '@ngrx/store'; +import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; -import {ToastService} from '../../../app-dialog/services/toast.service'; import {CdkTableModule} from '@angular/cdk/table'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {Injector} from '@angular/core'; -import {DialogService} from '../../../app-dialog/services/dialog.service'; -import {Overlay} from '@angular/cdk/overlay'; import {CloudDataService} from '../../../services/cloud-data.service'; -import * as fromRoot from '../../../reducers'; import {apiConfigFactory} from '../../../app.module'; import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {of} from 'rxjs'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('ImagesOverviewComponent', () => { let component: ImagesOverviewComponent; @@ -27,10 +22,7 @@ describe('ImagesOverviewComponent', () => { TestBed.configureTestingModule({ declarations: [ImagesOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, CdkTableModule, diff --git a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts index a317e8f..e510698 100644 --- a/src/app/components/locations/locations-overview/locations-overview.component.spec.ts +++ b/src/app/components/locations/locations-overview/locations-overview.component.spec.ts @@ -1,8 +1,6 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {LocationsOverviewComponent} from './locations-overview.component'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../../../reducers'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CdkTableModule} from '@angular/cdk/table'; import {HttpClientModule} from '@angular/common/http'; @@ -12,6 +10,7 @@ import {ActivatedRoute, Router, RouterModule} from '@angular/router'; import {CloudDataService} from '../../../services/cloud-data.service'; import {of} from 'rxjs'; import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('LocationsOverviewComponent', () => { let component: LocationsOverviewComponent; @@ -24,10 +23,7 @@ describe('LocationsOverviewComponent', () => { declarations: [ LocationsOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, CdkTableModule, diff --git a/src/app/root-store/cloud-data-store/actions.ts b/src/app/root-store/cloud-data-store/actions.ts new file mode 100644 index 0000000..0c1d887 --- /dev/null +++ b/src/app/root-store/cloud-data-store/actions.ts @@ -0,0 +1,37 @@ +import {Action} from '@ngrx/store'; +import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; + +export const SET_CLOUDS = '[Clouddata] set Cloud'; +export const SET_HARDWARE = '[Clouddata] set Hardware'; +export const SET_IMAGES = '[Clouddata] set Images'; +export const SET_LOCATIONS = '[Clouddata] set Locations'; + +export class SetCloudsAction implements Action { + readonly type = SET_CLOUDS; + + constructor(public clouds: Cloud[]) { + } +} +export class SetHardwareAction implements Action { + readonly type = SET_HARDWARE; + + constructor(public hardware: Hardware[]) { + } +} + +export class SetImagesAction implements Action { + readonly type = SET_IMAGES; + + constructor(public images: Image[]) { + } +} + +export class SetLocationsAction implements Action { + readonly type = SET_LOCATIONS; + + constructor(public locations: Location[]) { + } +} + + +export type All = SetCloudsAction | SetHardwareAction | SetImagesAction | SetLocationsAction; diff --git a/src/app/root-store/cloud-data-store/cloud-data-store.module.ts b/src/app/root-store/cloud-data-store/cloud-data-store.module.ts new file mode 100644 index 0000000..6119df4 --- /dev/null +++ b/src/app/root-store/cloud-data-store/cloud-data-store.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {StoreModule} from '@ngrx/store'; +import {cloudDataReducer} from './reducer'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + StoreModule.forFeature('cloudData', cloudDataReducer) + ] +}) +export class CloudDataStoreModule { } diff --git a/src/app/root-store/cloud-data-store/index.ts b/src/app/root-store/cloud-data-store/index.ts new file mode 100644 index 0000000..1e9b67f --- /dev/null +++ b/src/app/root-store/cloud-data-store/index.ts @@ -0,0 +1,11 @@ +import * as CloudDataActions from './actions'; +import * as CloudDataSelectors from './selectors'; +import * as CloudDataStoreState from './state'; + +export {CloudDataStoreModule} from './cloud-data-store.module'; +export { + CloudDataActions, + CloudDataSelectors, + CloudDataStoreState +}; + diff --git a/src/app/root-store/cloud-data-store/reducer.ts b/src/app/root-store/cloud-data-store/reducer.ts new file mode 100644 index 0000000..4a7bb2e --- /dev/null +++ b/src/app/root-store/cloud-data-store/reducer.ts @@ -0,0 +1,29 @@ +import * as cloudActions from './actions'; +import {initialState, State} from './state'; + +export function cloudDataReducer(state = initialState, action: cloudActions.All): State { + switch (action.type) { + case cloudActions.SET_CLOUDS: + return { + ...state, + clouds: action.clouds + }; + case cloudActions.SET_HARDWARE: + return { + ...state, + hardware: action.hardware + }; + case cloudActions.SET_IMAGES: + return { + ...state, + images: action.images + }; + case cloudActions.SET_LOCATIONS: + return { + ...state, + locations: action.locations + }; + default: + return initialState; + } +} diff --git a/src/app/root-store/cloud-data-store/selectors.ts b/src/app/root-store/cloud-data-store/selectors.ts new file mode 100644 index 0000000..5872438 --- /dev/null +++ b/src/app/root-store/cloud-data-store/selectors.ts @@ -0,0 +1,21 @@ +import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; +import {State} from './state'; +import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; + + +const getClouds = (state: State): Cloud[] => state.clouds; +const getHardware = (state: State): Hardware[] => state.hardware; +const getImages = (state: State): Image[] => state.images; +const getLocations = (state: State): Location[] => state.locations; + +export const selectCloudDataState: MemoizedSelector + = createFeatureSelector('cloudData'); + +export const selectClouds: MemoizedSelector + = createSelector(selectCloudDataState, getClouds); +export const selectHardware: MemoizedSelector + = createSelector(selectCloudDataState, getHardware); +export const selectImages: MemoizedSelector + = createSelector(selectCloudDataState, getImages); +export const selectLocations: MemoizedSelector + = createSelector(selectCloudDataState, getLocations); diff --git a/src/app/root-store/cloud-data-store/state.ts b/src/app/root-store/cloud-data-store/state.ts new file mode 100644 index 0000000..192f501 --- /dev/null +++ b/src/app/root-store/cloud-data-store/state.ts @@ -0,0 +1,15 @@ +import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; + +export interface State { + clouds: Cloud[]; + hardware: Hardware[]; + images: Image[]; + locations: Location[]; +} + +export const initialState = { + clouds: [], + hardware: [], + images: [], + locations: [] +}; diff --git a/src/app/root-store/editor-store/actions.ts b/src/app/root-store/editor-store/actions.ts new file mode 100644 index 0000000..530fe0d --- /dev/null +++ b/src/app/root-store/editor-store/actions.ts @@ -0,0 +1,46 @@ +import {Action} from '@ngrx/store'; + + +export const SET_VALUE = '[Editor] set Value'; +export const SET_FILENAME = '[Editor] set Filename'; +export const SET_EDITOR_GRAPH = '[Editor] set editorGraph'; +export const UPLOAD_FILE = '[Editor] upload File'; +export const CHANGES_SAVED = '[Editor] changes saved'; + +export class SetValueAction implements Action { + readonly type = SET_VALUE; + + constructor(public value: string) { + } +} + +export class SetFilenameAction implements Action { + readonly type = SET_FILENAME; + + constructor(public filename: string) { + } +} + +export class SetEditorGraphAction implements Action { + readonly type = SET_EDITOR_GRAPH; + + constructor(public editorGraph: any) { + } +} + +export class UploadFileAction implements Action { + readonly type = UPLOAD_FILE; + + constructor(public value: string, public filename: string) { + + } +} + +export class ChangesSavedAction implements Action { + readonly type = CHANGES_SAVED; + + constructor() { + } +} + +export type All = SetValueAction | SetFilenameAction | SetEditorGraphAction | UploadFileAction | ChangesSavedAction; diff --git a/src/app/root-store/editor-store/editor-store.module.ts b/src/app/root-store/editor-store/editor-store.module.ts new file mode 100644 index 0000000..b0e69a6 --- /dev/null +++ b/src/app/root-store/editor-store/editor-store.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {StoreModule} from '@ngrx/store'; +import {editorReducer} from './reducer'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + StoreModule.forFeature('editor', editorReducer) + ] +}) +export class EditorStoreModule { } diff --git a/src/app/root-store/editor-store/index.ts b/src/app/root-store/editor-store/index.ts new file mode 100644 index 0000000..315df7b --- /dev/null +++ b/src/app/root-store/editor-store/index.ts @@ -0,0 +1,10 @@ +import * as EditorActions from './actions'; +import * as EditorSelectors from './selectors'; +import * as EditorStoreState from './state'; + +export { EditorStoreModule } from './editor-store.module'; +export { + EditorActions, + EditorSelectors, + EditorStoreState +}; diff --git a/src/app/root-store/editor-store/reducer.ts b/src/app/root-store/editor-store/reducer.ts new file mode 100644 index 0000000..64e01d4 --- /dev/null +++ b/src/app/root-store/editor-store/reducer.ts @@ -0,0 +1,18 @@ +import * as editorActions from './actions'; +import {initialState, State} from './state'; + +export function editorReducer(state = initialState, action: editorActions.All): State { + switch (action.type) { + case editorActions.SET_VALUE: + return {...state, value: action.value, unsavedChanges: action.value !== state.originalValue}; + case editorActions.SET_FILENAME: + return {...state, filename: action.filename}; + case editorActions.UPLOAD_FILE: + return {...state, originalValue: action.value, value: action.value, filename: action.filename, unsavedChanges: false}; + case editorActions.CHANGES_SAVED: + return {...state, unsavedChanges: false, originalValue: state.value}; + case editorActions.SET_EDITOR_GRAPH: + return {...state, editorGraph: action.editorGraph}; + } + return state; +} diff --git a/src/app/root-store/editor-store/selectors.ts b/src/app/root-store/editor-store/selectors.ts new file mode 100644 index 0000000..530cdb8 --- /dev/null +++ b/src/app/root-store/editor-store/selectors.ts @@ -0,0 +1,20 @@ +import {State} from './state'; +import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; + +const getValue = (state: State): string => state.value; +const getFilename = (state: State): string => state.filename; +const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; +const getEditorGraph = (state: State): any | null => state.editorGraph; + +export const selectEditorState: MemoizedSelector = + createFeatureSelector('editor'); + +export const selectValue: MemoizedSelector + = createSelector(selectEditorState, getValue); +export const selectFilename: MemoizedSelector + = createSelector(selectEditorState, getFilename); +export const selectHasUnsavedChanges: MemoizedSelector + = createSelector(selectEditorState, hasUnsavedChanges); +export const selectGraph: MemoizedSelector + = createSelector(selectEditorState, getEditorGraph); + diff --git a/src/app/root-store/editor-store/state.ts b/src/app/root-store/editor-store/state.ts new file mode 100644 index 0000000..ed575e6 --- /dev/null +++ b/src/app/root-store/editor-store/state.ts @@ -0,0 +1,15 @@ +export interface State { + originalValue: string; + value: string; + filename: string; + unsavedChanges: boolean; + editorGraph: any | null; +} + +export const initialState = { + originalValue: '', + value: '', + filename: 'unnamed.yaml', + unsavedChanges: false, + editorGraph: null +}; diff --git a/src/app/root-store/index.ts b/src/app/root-store/index.ts new file mode 100644 index 0000000..03c5b31 --- /dev/null +++ b/src/app/root-store/index.ts @@ -0,0 +1,7 @@ +import {RootStoreModule} from './root-store.module'; +import * as RootStoreState from './root-state'; +export * from './runtime-config-store'; +export * from './cloud-data-store'; +export * from './editor-store'; +export * from './job-data-store'; +export {RootStoreState, RootStoreModule}; diff --git a/src/app/root-store/job-data-store/actions.ts b/src/app/root-store/job-data-store/actions.ts new file mode 100644 index 0000000..137a4ea --- /dev/null +++ b/src/app/root-store/job-data-store/actions.ts @@ -0,0 +1,15 @@ +import {Job} from 'cloudiator-rest-api'; +import {Action} from '@ngrx/store'; + + +export const SET_JOBS = '[Jobdata] set jobs'; + +export class SetJobsActiom implements Action { + readonly type = SET_JOBS; + + constructor(public jobs: Job[]) { + } +} + + +export type All = SetJobsActiom; diff --git a/src/app/root-store/job-data-store/index.ts b/src/app/root-store/job-data-store/index.ts new file mode 100644 index 0000000..d3b403c --- /dev/null +++ b/src/app/root-store/job-data-store/index.ts @@ -0,0 +1,10 @@ +import * as JobDataActions from './actions'; +import * as JobDataSelectors from './selectors'; +import * as JobDataStoreState from './state'; + +export {JobDataStoreModule} from './job-data-store.module'; +export { + JobDataActions, + JobDataSelectors, + JobDataStoreState +}; diff --git a/src/app/root-store/job-data-store/job-data-store.module.ts b/src/app/root-store/job-data-store/job-data-store.module.ts new file mode 100644 index 0000000..7b1b8e1 --- /dev/null +++ b/src/app/root-store/job-data-store/job-data-store.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class JobDataStoreModule { } diff --git a/src/app/root-store/job-data-store/reducer.ts b/src/app/root-store/job-data-store/reducer.ts new file mode 100644 index 0000000..7a156c6 --- /dev/null +++ b/src/app/root-store/job-data-store/reducer.ts @@ -0,0 +1,14 @@ +import * as jobActions from '../../actions/job-data.actions'; +import {initialState, State} from '../../reducers/job-data.reducer'; + +export function jobDataReducer(state = initialState, action: jobActions.All): State { + switch (action.type) { + case jobActions.SET_JOBS: + return { + jobs: action.jobs, + ...state + }; + default: + return state; + } +} diff --git a/src/app/root-store/job-data-store/selectors.ts b/src/app/root-store/job-data-store/selectors.ts new file mode 100644 index 0000000..c645113 --- /dev/null +++ b/src/app/root-store/job-data-store/selectors.ts @@ -0,0 +1,12 @@ +import {Job} from 'cloudiator-rest-api'; +import {State} from './state'; +import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; + +const getJobs = (state: State): Job[] => state.jobs; + +export const selectJobDataStore: MemoizedSelector + = createFeatureSelector('jobData'); + + +export const selectJobs: MemoizedSelector + = createSelector(selectJobDataStore, getJobs); diff --git a/src/app/root-store/job-data-store/state.ts b/src/app/root-store/job-data-store/state.ts new file mode 100644 index 0000000..dd2be9b --- /dev/null +++ b/src/app/root-store/job-data-store/state.ts @@ -0,0 +1,9 @@ +import {Job} from 'cloudiator-rest-api'; + +export interface State { + jobs: Job[]; +} + +export const initialState = { + jobs: [] +}; diff --git a/src/app/root-store/root-state.ts b/src/app/root-store/root-state.ts new file mode 100644 index 0000000..a919ab9 --- /dev/null +++ b/src/app/root-store/root-state.ts @@ -0,0 +1,11 @@ +import {RuntimeConfigStoreState} from './runtime-config-store'; +import {CloudDataStoreState} from './cloud-data-store'; +import {EditorStoreState} from './editor-store'; +import {JobDataStoreState} from './job-data-store'; + +export interface State { + runtimeConfig: RuntimeConfigStoreState.State; + cloudData: CloudDataStoreState.State; + editor: EditorStoreState.State; + jobData: JobDataStoreState.State; +} diff --git a/src/app/root-store/root-store.module.ts b/src/app/root-store/root-store.module.ts new file mode 100644 index 0000000..37a174d --- /dev/null +++ b/src/app/root-store/root-store.module.ts @@ -0,0 +1,20 @@ +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'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + StoreModule.forRoot({}), + RuntimeConfigStoreModule, + CloudDataStoreModule, + EditorStoreModule, + JobDataStoreModule + ] +}) +export class RootStoreModule { } diff --git a/src/app/root-store/runtime-config-store/actions.ts b/src/app/root-store/runtime-config-store/actions.ts new file mode 100644 index 0000000..5aea7c4 --- /dev/null +++ b/src/app/root-store/runtime-config-store/actions.ts @@ -0,0 +1,40 @@ +import {Action} from '@ngrx/store'; +import {AuthMode, RuntimeConfig} from '../../model/RuntimeConfig'; + +export enum ActionTypes { + SET_API_PATH = '[RuntimeConfig] set api path', + SET_AUTH_MODE = '[RuntimeConfig] set auth mode', + SET_X_API_KEY = '[RuntimeConfig] set x api key', + SET_RUNTIME_CONFIG = '[RuntimeConfig] set runtime config' +} + +export class SetApiPathAction implements Action { + readonly type = ActionTypes.SET_API_PATH; + + constructor(public apiPath: string) { + } +} + +export class SetAuthModeAction implements Action { + readonly type = ActionTypes.SET_AUTH_MODE; + + constructor(public authMode: AuthMode) { + } +} + +export class SetXApiKeyAction implements Action { + readonly type = ActionTypes.SET_X_API_KEY; + + constructor(public xApiKey: string) { + } +} + +export class SetRuntimeConfigAction implements Action { + readonly type = ActionTypes.SET_RUNTIME_CONFIG; + + constructor(public config: RuntimeConfig) { + } +} + + +export type Actions = SetApiPathAction | SetAuthModeAction | SetXApiKeyAction | SetRuntimeConfigAction; diff --git a/src/app/root-store/runtime-config-store/index.ts b/src/app/root-store/runtime-config-store/index.ts new file mode 100644 index 0000000..7f67838 --- /dev/null +++ b/src/app/root-store/runtime-config-store/index.ts @@ -0,0 +1,10 @@ +import * as RuntimeConfigActions from './actions'; +import * as RuntimeConfigSelectors from './selectors'; +import * as RuntimeConfigStoreState from './state'; + +export {RuntimeConfigStoreModule} from './runtime-config-store.module'; +export { + RuntimeConfigActions, + RuntimeConfigSelectors, + RuntimeConfigStoreState +}; diff --git a/src/app/root-store/runtime-config-store/reducer.ts b/src/app/root-store/runtime-config-store/reducer.ts new file mode 100644 index 0000000..e0bedea --- /dev/null +++ b/src/app/root-store/runtime-config-store/reducer.ts @@ -0,0 +1,39 @@ +import {initialState, State} from './state'; +import {Actions, ActionTypes} from './actions'; + +export function runtimeConfigReducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionTypes.SET_API_PATH: + return { + runtimeConfig: { + apiPath: action.apiPath, + ...state.runtimeConfig + }, + ...state + }; + case ActionTypes.SET_AUTH_MODE: + return { + runtimeConfig: { + apiPath: action.authMode, + ...state.runtimeConfig + }, + ...state + }; + case ActionTypes.SET_X_API_KEY: + return { + runtimeConfig: { + xApiKey: action.xApiKey, + ...state.runtimeConfig + }, + ...state + }; + case ActionTypes.SET_RUNTIME_CONFIG: + return { + ...state, + runtimeConfig: action.config, + isFetched: true + }; + default: + return state; + } +} diff --git a/src/app/root-store/runtime-config-store/runtime-config-store.module.ts b/src/app/root-store/runtime-config-store/runtime-config-store.module.ts new file mode 100644 index 0000000..3c5ed03 --- /dev/null +++ b/src/app/root-store/runtime-config-store/runtime-config-store.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {StoreModule} from '@ngrx/store'; +import {runtimeConfigReducer} from './reducer'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + StoreModule.forFeature('runtimeConfig', runtimeConfigReducer) + ] +}) +export class RuntimeConfigStoreModule { } diff --git a/src/app/root-store/runtime-config-store/selectors.ts b/src/app/root-store/runtime-config-store/selectors.ts new file mode 100644 index 0000000..bc0ea35 --- /dev/null +++ b/src/app/root-store/runtime-config-store/selectors.ts @@ -0,0 +1,24 @@ +import {AuthMode, RuntimeConfig} from '../../model/RuntimeConfig'; +import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store'; +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 getRuntimeConfig = (state: State): RuntimeConfig => state.runtimeConfig; +const isFetched = (state: State): boolean => state.isFetched; + + +export const selectRuntimeConfigState: MemoizedSelector + = createFeatureSelector('runtimeConfig'); + +export const selectApiPath: MemoizedSelector + = createSelector(selectRuntimeConfigState, getApiPath); +export const selectAuthMode: MemoizedSelector + = createSelector(selectRuntimeConfigState, getAuthMode); +export const selectXApiKey: MemoizedSelector + = createSelector(selectRuntimeConfigState, getXApiKey); +export const selectConfig: MemoizedSelector + = createSelector(selectRuntimeConfigState, getRuntimeConfig); +export const selectIsFetched: MemoizedSelector + = createSelector(selectRuntimeConfigState, isFetched); diff --git a/src/app/root-store/runtime-config-store/state.ts b/src/app/root-store/runtime-config-store/state.ts new file mode 100644 index 0000000..d69e09c --- /dev/null +++ b/src/app/root-store/runtime-config-store/state.ts @@ -0,0 +1,15 @@ +import {AuthMode, RuntimeConfig} from '../../model/RuntimeConfig'; + +export interface State { + runtimeConfig: RuntimeConfig; + isFetched: boolean; +} + +export const initialState = { + runtimeConfig: { + apiPath: '', + authMode: AuthMode.SINGLE, + xApiKey: '' + }, + isFetched: false +}; diff --git a/src/app/services/cloud-data.service.spec.ts b/src/app/services/cloud-data.service.spec.ts index 125dc86..c0cdb50 100644 --- a/src/app/services/cloud-data.service.spec.ts +++ b/src/app/services/cloud-data.service.spec.ts @@ -3,16 +3,11 @@ import {TestBed, inject, async} from '@angular/core/testing'; import {CloudDataService} from './cloud-data.service'; import {ApiModule, CloudService} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../reducers'; import * as testData from '../../../testing/test-data'; -import {DialogService} from '../app-dialog/services/dialog.service'; -import {ToastService} from '../app-dialog/services/toast.service'; -import {Injector} from '@angular/core'; -import {Overlay} from '@angular/cdk/overlay'; import {apiConfigFactory} from '../app.module'; import {of} from 'rxjs'; import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../root-store'; describe('CloudDataService', () => { @@ -24,10 +19,7 @@ describe('CloudDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), AppDialogModule diff --git a/src/app/services/cloud-data.service.ts b/src/app/services/cloud-data.service.ts index b8881fd..94816d7 100644 --- a/src/app/services/cloud-data.service.ts +++ b/src/app/services/cloud-data.service.ts @@ -1,14 +1,13 @@ import {Injectable} from '@angular/core'; import {Cloud, CloudService, Hardware, Image, NewCloud, Location} from 'cloudiator-rest-api'; import {Observable} from 'rxjs'; -import * as fromRoot from '../reducers'; -import * as cloudActions from '../actions/cloud-data.actions'; import {select, Store} from '@ngrx/store'; import {map} 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 '../model/toast'; +import {CloudDataActions, CloudDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; /** * Local layer between the cloud swagger service and Components, handles the redux store management of clouds. @@ -21,10 +20,10 @@ export class CloudDataService { constructor(private cloudApiService: CloudService, private runtimeConfigService: RuntimeConfigService, - private store: Store, + private store: Store, private toastService: ToastService) { - store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { + store.pipe(select(RuntimeConfigSelectors.selectConfig)).subscribe(config => { cloudApiService.basePath = config.apiPath; if (cloudApiService.configuration) { cloudApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; @@ -47,7 +46,7 @@ export class CloudDataService { */ public findClouds(): Observable { this.fetchClouds(); - return this.store.pipe(select(fromRoot.getClouds)); + return this.store.pipe(select(CloudDataSelectors.selectClouds)); } /** @@ -56,7 +55,7 @@ export class CloudDataService { */ public findCloud(id: string): Observable { this.fetchClouds(); - return this.store.pipe(select(fromRoot.getClouds), map(cloud => cloud.find(c => c.id === id))); + return this.store.pipe(select(CloudDataSelectors.selectClouds), map(cloud => cloud.find(c => c.id === id))); } /** @@ -77,10 +76,10 @@ export class CloudDataService { if (id) { return this.store.pipe( - select(fromRoot.getHardware), + select(CloudDataSelectors.selectHardware), map(hardware => hardware.filter(hw => hw.id.includes(id)))); } - return this.store.pipe(select(fromRoot.getHardware)); + return this.store.pipe(select(CloudDataSelectors.selectHardware)); } /* IMAGES */ @@ -90,10 +89,10 @@ export class CloudDataService { if (id) { return this.store.pipe( - select(fromRoot.getImages), + select(CloudDataSelectors.selectImages), map(images => images.filter(image => image.id.includes(id)))); } - return this.store.pipe(select(fromRoot.getImages)); + return this.store.pipe(select(CloudDataSelectors.selectImages)); } public findLocations(id?: string): Observable { @@ -101,10 +100,10 @@ export class CloudDataService { if (id) { return this.store.pipe( - select(fromRoot.getLocations), + select(CloudDataSelectors.selectLocations), map(locations => locations.filter(location => location.id.includes(id)))); } - return this.store.pipe(select(fromRoot.getLocations)); + return this.store.pipe(select(CloudDataSelectors.selectLocations)); } /** @@ -118,7 +117,7 @@ export class CloudDataService { // fetch Clouds this.cloudApiService.findClouds().toPromise() .then(clouds => { - this.store.dispatch(new cloudActions.SetCloudsAction(clouds)); + this.store.dispatch(new CloudDataActions.SetCloudsAction(clouds)); }) .catch(() => { console.error('could not fetch clouds'); @@ -133,7 +132,7 @@ export class CloudDataService { // fetch Hardware this.cloudApiService.findHardware().toPromise() .then(hardware => { - this.store.dispatch(new cloudActions.SetHardwareAction(hardware)); + this.store.dispatch(new CloudDataActions.SetHardwareAction(hardware)); }) .catch(() => { console.error('could not fetch Hardware'); @@ -147,7 +146,7 @@ export class CloudDataService { // fetch Images this.cloudApiService.findImages().toPromise() .then(images => { - this.store.dispatch(new cloudActions.SetImagesAction(images)); + this.store.dispatch(new CloudDataActions.SetImagesAction(images)); }) .catch(() => { console.error('could not fetch Images'); @@ -161,7 +160,7 @@ export class CloudDataService { // fetch Images this.cloudApiService.findLocations().toPromise() .then(locations => { - this.store.dispatch(new cloudActions.SetLocationsAction(locations)); + this.store.dispatch(new CloudDataActions.SetLocationsAction(locations)); }) .catch(() => { console.error('could not fetch Images'); diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index 8130755..ed15e07 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -1,18 +1,14 @@ import {TestBed} from '@angular/core/testing'; import {EditorService} from './editor.service'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../reducers'; import {take} from 'rxjs/operators'; import * as fromEditor from '../actions/editor.actions'; +import {RootStoreModule} from '../root-store'; describe('EditorService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }) + RootStoreModule ] })); diff --git a/src/app/services/editor.service.ts b/src/app/services/editor.service.ts index 5c6f0e5..e18ff7c 100644 --- a/src/app/services/editor.service.ts +++ b/src/app/services/editor.service.ts @@ -1,51 +1,50 @@ import {Injectable} from '@angular/core'; -import * as fromRoot from '../reducers'; -import * as fromEditor from '../actions/editor.actions'; import {select, Store} from '@ngrx/store'; import saveAs from 'file-saver'; import {Observable} from 'rxjs'; import {take} from 'rxjs/operators'; +import {EditorActions, EditorSelectors, RootStoreState} from '../root-store'; @Injectable({ providedIn: 'root' }) export class EditorService { - constructor(public store: Store) { + constructor(public store: Store) { } public getEditorValue(): Observable { - return this.store.pipe(select(fromRoot.getEditorValue)); + return this.store.pipe(select(EditorSelectors.selectValue)); } public setEditorValue(value: string) { - this.store.dispatch(new fromEditor.SetValueAction(value)); + this.store.dispatch(new EditorActions.SetValueAction(value)); } public getFilename(): Observable { - return this.store.pipe(select(fromRoot.getEditorFilename)); + return this.store.pipe(select(EditorSelectors.selectFilename)); } public setFilename(filename: string) { - this.store.dispatch(new fromEditor.SetFilenameAction(filename)); + this.store.dispatch(new EditorActions.SetFilenameAction(filename)); } public getEditorGraph(): Observable { - return this.store.pipe(select(fromRoot.getEditorGraph)); + return this.store.pipe(select(EditorSelectors.selectGraph)); } public setEditorGraph(graphData: any | null) { - this.store.dispatch(new fromEditor.SetEditorGraphAction(graphData)); + this.store.dispatch(new EditorActions.SetEditorGraphAction(graphData)); } public HasUnsaveChanges(): Observable { - return this.store.pipe(select(fromRoot.editorHasUnsavedChanges)); + return this.store.pipe(select(EditorSelectors.selectHasUnsavedChanges)); } public downloadFile() { // toDo: error handling this.store.pipe( - select(fromRoot.editorState), + select(EditorSelectors.selectEditorState), take(1)) .subscribe(state => { const blob = new Blob([state.value], { @@ -53,7 +52,7 @@ export class EditorService { }); saveAs(blob, state.filename); - this.store.dispatch(new fromEditor.ChangesSavedAction()); + this.store.dispatch(new EditorActions.ChangesSavedAction()); }); } @@ -65,7 +64,7 @@ export class EditorService { reader.readAsBinaryString(file); return new Promise(resolve => { reader.onload = () => { - this.store.dispatch(new fromEditor.UploadFileAction(reader.result.toString(), file.name)); + this.store.dispatch(new EditorActions.UploadFileAction(reader.result.toString(), file.name)); resolve(); }; }); diff --git a/src/app/services/job-data.service.spec.ts b/src/app/services/job-data.service.spec.ts index 13f0257..2bd1265 100644 --- a/src/app/services/job-data.service.spec.ts +++ b/src/app/services/job-data.service.spec.ts @@ -1,23 +1,15 @@ import {inject, TestBed} from '@angular/core/testing'; import { JobDataService } from './job-data.service'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../reducers'; import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; -import {DialogService} from '../app-dialog/services/dialog.service'; -import {ToastService} from '../app-dialog/services/toast.service'; -import {Overlay} from '@angular/cdk/overlay'; -import {Injector} from '@angular/core'; import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../root-store'; describe('JobDataService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, ApiModule, HttpClientModule, AppDialogModule diff --git a/src/app/services/job-data.service.ts b/src/app/services/job-data.service.ts index 52329e7..4541404 100644 --- a/src/app/services/job-data.service.ts +++ b/src/app/services/job-data.service.ts @@ -1,12 +1,11 @@ import {Injectable} from '@angular/core'; import {select, Store} from '@ngrx/store'; -import * as fromRoot from '../reducers'; -import * as fromJobData from '../actions/job-data.actions'; 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 {ToastType} from '../model/toast'; +import {JobDataActions, JobDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; @Injectable({ providedIn: 'root' @@ -15,9 +14,9 @@ export class JobDataService { constructor(private jobApiService: JobService, private runtimeConfigService: RuntimeConfigService, - private store: Store, + private store: Store, private toastService: ToastService) { - store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { + store.pipe(select(RuntimeConfigSelectors.selectConfig)).subscribe(config => { jobApiService.basePath = config.apiPath; if (jobApiService.configuration && jobApiService.configuration.apiKeys) { jobApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; @@ -28,7 +27,7 @@ export class JobDataService { public findJobs(): Observable { this.fetchJobs(); - return this.store.pipe(select(fromRoot.getJobs)); + return this.store.pipe(select(JobDataSelectors.selectJobs)); } public jobGraph(id: string): Observable { @@ -39,7 +38,7 @@ export class JobDataService { this.runtimeConfigService.awaitConfigLoad().then(() => { this.jobApiService.findJobs().toPromise() .then(jobs => { - this.store.dispatch(new fromJobData.SetJobsActiom(jobs)); + this.store.dispatch(new JobDataActions.SetJobsActiom(jobs)); }) .catch(() => { this.toastService.show({text: 'could not fetch Jobs', type: ToastType.DANGER}, false); diff --git a/src/app/services/runtime-config.service.spec.ts b/src/app/services/runtime-config.service.spec.ts index e2a4fca..9f3a853 100644 --- a/src/app/services/runtime-config.service.spec.ts +++ b/src/app/services/runtime-config.service.spec.ts @@ -2,17 +2,13 @@ import { TestBed, inject } from '@angular/core/testing'; import { RuntimeConfigService } from './runtime-config.service'; import {HttpClientModule} from '@angular/common/http'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../reducers'; +import {RootStoreModule} from '../root-store'; describe('RuntimeConfigService', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, HttpClientModule ], providers: [RuntimeConfigService] diff --git a/src/app/services/runtime-config.service.ts b/src/app/services/runtime-config.service.ts index a4b8b55..74c66c5 100644 --- a/src/app/services/runtime-config.service.ts +++ b/src/app/services/runtime-config.service.ts @@ -1,12 +1,11 @@ import {Injectable, Optional} from '@angular/core'; import {HttpClient} from '@angular/common/http'; -import * as fromRoot from '../reducers'; -import {SetRuntimeConfigAction} from '../actions/runtime-config.actions'; import {Observable} from 'rxjs'; import {select, Store} from '@ngrx/store'; -import {AuthMode, RuntimeConfig} from '../model/RuntimeConfig'; +import {RuntimeConfig} from '../model/RuntimeConfig'; import {Configuration} from 'cloudiator-rest-api'; import {environment} from '../../environments/environment'; +import {RootStoreState, RuntimeConfigActions, RuntimeConfigSelectors} from '../root-store'; @Injectable({ providedIn: 'root' @@ -14,25 +13,26 @@ import {environment} from '../../environments/environment'; export class RuntimeConfigService { constructor(private http: HttpClient, - private store: Store, + private store: Store, @Optional() private configuration: Configuration) { if (environment.useRuntimeConfig) { this.fetchConfig(); } else { - this.store.dispatch(new SetRuntimeConfigAction({ - apiPath: environment.apiPath, - authMode: environment.authMode, - xApiKey: environment.xApiKey - })); + this.store.dispatch( + new RuntimeConfigActions.SetRuntimeConfigAction({ + apiPath: environment.apiPath, + authMode: environment.authMode, + xApiKey: environment.xApiKey + })); } } private fetchConfig() { this.http.get(`${environment.href}assets/appConfig.json`).toPromise().then(value => { - this.store.dispatch(new SetRuntimeConfigAction(value)); + this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction(value)); }).catch(() => { - this.store.dispatch(new SetRuntimeConfigAction({ + this.store.dispatch(new RuntimeConfigActions.SetRuntimeConfigAction({ apiPath: environment.apiPath, authMode: environment.authMode, xApiKey: environment.xApiKey @@ -42,7 +42,7 @@ export class RuntimeConfigService { public awaitConfigLoad(): Promise { return new Promise(resolve => { - const obs = this.store.pipe(select(fromRoot.getRuntimeConfigIsFetched)).subscribe(fetched => { + const obs = this.store.pipe(select(RuntimeConfigSelectors.selectIsFetched)).subscribe(fetched => { if (fetched) { resolve(true); } @@ -51,14 +51,14 @@ export class RuntimeConfigService { } getApiPath(): Observable { - return this.store.pipe(select(fromRoot.getApiPath)); + return this.store.pipe(select(RuntimeConfigSelectors.selectApiPath)); } getXApiKey(): Observable { - return this.store.pipe(select(fromRoot.getXApiKey)); + return this.store.pipe(select(RuntimeConfigSelectors.selectXApiKey)); } getRuntimeConfig(): Observable { - return this.store.pipe(select(fromRoot.getRuntimeConfig)); + return this.store.pipe(select(RuntimeConfigSelectors.selectConfig)); } } diff --git a/src/app/services/yaml-data.service.spec.ts b/src/app/services/yaml-data.service.spec.ts index 8356ed0..9d224ea 100644 --- a/src/app/services/yaml-data.service.spec.ts +++ b/src/app/services/yaml-data.service.spec.ts @@ -4,22 +4,14 @@ import {YamlDataService} from './yaml-data.service'; import {ApiModule} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {apiConfigFactory} from '../app.module'; -import {DialogService} from '../app-dialog/services/dialog.service'; -import {ToastService} from '../app-dialog/services/toast.service'; -import {Overlay} from '@angular/cdk/overlay'; -import {Injector} from '@angular/core'; -import {combineReducers, StoreModule} from '@ngrx/store'; -import * as fromRoot from '../reducers'; import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../root-store'; describe('YamlDataService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, ApiModule.forRoot(apiConfigFactory), HttpClientModule, AppDialogModule diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index 2e6ede3..6aefe45 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -4,7 +4,7 @@ import {ToastService} from '../app-dialog/services/toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; import {Observable, of} from 'rxjs'; import {select, Store} from '@ngrx/store'; -import * as fromRoot from '../reducers'; +import {RootStoreState, RuntimeConfigSelectors} from '../root-store'; @Injectable({ providedIn: 'root' @@ -13,9 +13,9 @@ export class YamlDataService { constructor(public yamlApiService: YamlService, public runtimeConfigService: RuntimeConfigService, - public store: Store, + public store: Store, public toastService: ToastService) { - store.pipe(select(fromRoot.getRuntimeConfig)).subscribe(config => { + store.pipe(select(RuntimeConfigSelectors.selectConfig)).subscribe(config => { yamlApiService.basePath = config.apiPath; if (yamlApiService.configuration && yamlApiService.configuration.apiKeys) { yamlApiService.configuration.apiKeys['X-API-Key'] = config.xApiKey; From 235240210093d2a1428041ab90e92f4fc95d5347 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Mon, 3 Dec 2018 16:09:12 +0100 Subject: [PATCH 25/29] deleted old store --- src/app/actions/cloud-data.actions.ts | 37 ----------- src/app/actions/editor.actions.ts | 46 ------------- src/app/actions/job-data.actions.ts | 15 ----- src/app/actions/runtime-config.actions.ts | 39 ----------- src/app/actions/user-settings.actions.ts | 21 ------ src/app/app-store.module.ts | 11 --- src/app/app.module.ts | 11 +-- src/app/reducers/cloud-data.reducer.ts | 37 ----------- src/app/reducers/editor.reducer.ts | 39 ----------- src/app/reducers/index.ts | 70 -------------------- src/app/reducers/job-data.reducer.ts | 23 ------- src/app/reducers/runtime-config.reducer.ts | 37 ----------- src/app/reducers/user-settings.reducer.ts | 19 ------ src/app/root-store/job-data-store/reducer.ts | 4 +- src/app/services/editor.service.spec.ts | 5 +- 15 files changed, 5 insertions(+), 409 deletions(-) delete mode 100644 src/app/actions/cloud-data.actions.ts delete mode 100644 src/app/actions/editor.actions.ts delete mode 100644 src/app/actions/job-data.actions.ts delete mode 100644 src/app/actions/runtime-config.actions.ts delete mode 100644 src/app/actions/user-settings.actions.ts delete mode 100644 src/app/app-store.module.ts delete mode 100644 src/app/reducers/cloud-data.reducer.ts delete mode 100644 src/app/reducers/editor.reducer.ts delete mode 100644 src/app/reducers/index.ts delete mode 100644 src/app/reducers/job-data.reducer.ts delete mode 100644 src/app/reducers/runtime-config.reducer.ts delete mode 100644 src/app/reducers/user-settings.reducer.ts diff --git a/src/app/actions/cloud-data.actions.ts b/src/app/actions/cloud-data.actions.ts deleted file mode 100644 index 0c1d887..0000000 --- a/src/app/actions/cloud-data.actions.ts +++ /dev/null @@ -1,37 +0,0 @@ -import {Action} from '@ngrx/store'; -import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; - -export const SET_CLOUDS = '[Clouddata] set Cloud'; -export const SET_HARDWARE = '[Clouddata] set Hardware'; -export const SET_IMAGES = '[Clouddata] set Images'; -export const SET_LOCATIONS = '[Clouddata] set Locations'; - -export class SetCloudsAction implements Action { - readonly type = SET_CLOUDS; - - constructor(public clouds: Cloud[]) { - } -} -export class SetHardwareAction implements Action { - readonly type = SET_HARDWARE; - - constructor(public hardware: Hardware[]) { - } -} - -export class SetImagesAction implements Action { - readonly type = SET_IMAGES; - - constructor(public images: Image[]) { - } -} - -export class SetLocationsAction implements Action { - readonly type = SET_LOCATIONS; - - constructor(public locations: Location[]) { - } -} - - -export type All = SetCloudsAction | SetHardwareAction | SetImagesAction | SetLocationsAction; diff --git a/src/app/actions/editor.actions.ts b/src/app/actions/editor.actions.ts deleted file mode 100644 index 530fe0d..0000000 --- a/src/app/actions/editor.actions.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {Action} from '@ngrx/store'; - - -export const SET_VALUE = '[Editor] set Value'; -export const SET_FILENAME = '[Editor] set Filename'; -export const SET_EDITOR_GRAPH = '[Editor] set editorGraph'; -export const UPLOAD_FILE = '[Editor] upload File'; -export const CHANGES_SAVED = '[Editor] changes saved'; - -export class SetValueAction implements Action { - readonly type = SET_VALUE; - - constructor(public value: string) { - } -} - -export class SetFilenameAction implements Action { - readonly type = SET_FILENAME; - - constructor(public filename: string) { - } -} - -export class SetEditorGraphAction implements Action { - readonly type = SET_EDITOR_GRAPH; - - constructor(public editorGraph: any) { - } -} - -export class UploadFileAction implements Action { - readonly type = UPLOAD_FILE; - - constructor(public value: string, public filename: string) { - - } -} - -export class ChangesSavedAction implements Action { - readonly type = CHANGES_SAVED; - - constructor() { - } -} - -export type All = SetValueAction | SetFilenameAction | SetEditorGraphAction | UploadFileAction | ChangesSavedAction; diff --git a/src/app/actions/job-data.actions.ts b/src/app/actions/job-data.actions.ts deleted file mode 100644 index 137a4ea..0000000 --- a/src/app/actions/job-data.actions.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {Job} from 'cloudiator-rest-api'; -import {Action} from '@ngrx/store'; - - -export const SET_JOBS = '[Jobdata] set jobs'; - -export class SetJobsActiom implements Action { - readonly type = SET_JOBS; - - constructor(public jobs: Job[]) { - } -} - - -export type All = SetJobsActiom; diff --git a/src/app/actions/runtime-config.actions.ts b/src/app/actions/runtime-config.actions.ts deleted file mode 100644 index a13b191..0000000 --- a/src/app/actions/runtime-config.actions.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {Action} from '@ngrx/store'; -import {AuthMode, RuntimeConfig} from '../model/RuntimeConfig'; - -export const SET_API_PATH = '[RuntimeConfig] set api path'; -export const SET_AUTH_MODE = '[RuntimeConfig] set auth mode'; -export const SET_X_API_KEY = '[RuntimeConfig] set x api key'; -export const SET_RUNTIME_CONFIG = '[RuntimeConfig] set runtime config'; - -export class SetApiPathAction implements Action { - readonly type = SET_API_PATH; - - constructor(public apiPath: string) { - } -} - -export class SetAuthModeAction implements Action { - readonly type = SET_AUTH_MODE; - - constructor(public authMode: AuthMode) { - } -} - -export class SetXApiKeyAction implements Action { - readonly type = SET_X_API_KEY; - - constructor(public xApiKey: string) { - } -} - -export class SetRuntimeConfigAction implements Action { - readonly type = SET_RUNTIME_CONFIG; - - constructor(public config: RuntimeConfig) { - - } -} - - -export type All = SetApiPathAction | SetAuthModeAction | SetXApiKeyAction | SetRuntimeConfigAction; diff --git a/src/app/actions/user-settings.actions.ts b/src/app/actions/user-settings.actions.ts deleted file mode 100644 index 88387d6..0000000 --- a/src/app/actions/user-settings.actions.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {Action} from '@ngrx/store'; - -export const GET = '[UserSettings] get settings'; -export const SET_SETTINGS = '[UserSettings] set settings'; - -export class GetUserSettingsAction implements Action { - readonly type = GET; - - constructor() { - } -} - -export class SetUserSettingsAction implements Action { - readonly type = SET_SETTINGS; - - constructor(public settings: any) { - } -} - - -export type All = GetUserSettingsAction | SetUserSettingsAction; diff --git a/src/app/app-store.module.ts b/src/app/app-store.module.ts deleted file mode 100644 index 13b2a02..0000000 --- a/src/app/app-store.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {NgModule} from '@angular/core'; -import {StoreModule} from '@ngrx/store'; -import {reducers, globalInitialState} from './reducers'; - - -@NgModule({ - imports: [StoreModule.forRoot(reducers, {initialState: globalInitialState})], - exports: [] -}) -export class AppStoreModule { -} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ba0e99d..0fa736a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,7 +3,6 @@ import {NgModule} from '@angular/core'; import {AppComponent} from './components/app/app.component'; import {AppRoutingModule} from './app-routing.module'; -import {AppStoreModule} from './app-store.module'; import {ApiModule, Configuration, ConfigurationParameters} from 'cloudiator-rest-api'; import {HttpClientModule} from '@angular/common/http'; import {CloudOverviewComponent} from './components/clouds/cloud-overview/cloud-overview.component'; @@ -11,15 +10,7 @@ import {NewCloudComponent} from './components/clouds/new-cloud/new-cloud.compone import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CloudViewComponent} from './components/clouds/cloud-view/cloud-view.component'; import {CloudCardComponent} from './components/clouds/cloud-card/cloud-card.component'; -import {DialogService} from './app-dialog/services/dialog.service'; -import {DeleteCloudDialogComponent} from './app-dialog/dialogs/delete-cloud-dialog/delete-cloud-dialog.component'; -import {OverlayModule} from '@angular/cdk/overlay'; -import {ConfirmNewCloudDialogComponent} from './app-dialog/dialogs/confirm-new-cloud-dialog/confirm-new-cloud-dialog.component'; import {environment} from '../environments/environment'; -import {CloudDataService} from './services/cloud-data.service'; -import {RuntimeConfigService} from './services/runtime-config.service'; -import {ToastComponent} from './app-dialog/dialogs/toast/toast.component'; -import {ToastService} from './app-dialog/services/toast.service'; import {HardwareOverviewComponent} from './components/hardware/hardware-overview/hardware-overview.component'; import {CdkTableModule} from '@angular/cdk/table'; import {ImagesOverviewComponent} from './components/images/images-overview/images-overview.component'; @@ -27,7 +18,7 @@ import { LocationsOverviewComponent } from './components/locations/locations-ove import { YamlEditorComponent } from './components/editor/yaml-editor/yaml-editor.component'; import { YamlGraphComponent } from './components/editor/yaml-graph/yaml-graph.component'; import {AppDialogModule} from './app-dialog/app-dialog.module'; -import {RootStoreModule} from './root-store/root-store.module'; +import {RootStoreModule} from './root-store'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { diff --git a/src/app/reducers/cloud-data.reducer.ts b/src/app/reducers/cloud-data.reducer.ts deleted file mode 100644 index 5824eff..0000000 --- a/src/app/reducers/cloud-data.reducer.ts +++ /dev/null @@ -1,37 +0,0 @@ -import * as cloudActions from '../actions/cloud-data.actions'; -import {Cloud, Hardware, Image, Location} from 'cloudiator-rest-api'; - - -export interface State { - clouds: Cloud[]; - hardware: Hardware[]; - images: Image[]; - locations: Location[]; -} - -export const initialState = { - clouds: [], - hardware: [], - images: [], - locations: [] -}; - -export function reducer(state = initialState, action: cloudActions.All): State { - switch (action.type) { - case cloudActions.SET_CLOUDS: - return {...state, clouds: action.clouds}; - case cloudActions.SET_HARDWARE: - return {...state, hardware: action.hardware}; - case cloudActions.SET_IMAGES: - return {...state, images: action.images}; - case cloudActions.SET_LOCATIONS: - return {...state, locations: action.locations}; - default: - return initialState; - } -} - -export const getClouds = (state: State): Cloud[] => state.clouds; -export const getHardware = (state: State): Hardware[] => state.hardware; -export const getImages = (state: State): Image[] => state.images; -export const getLocations = (state: State): Location[] => state.locations; diff --git a/src/app/reducers/editor.reducer.ts b/src/app/reducers/editor.reducer.ts deleted file mode 100644 index f6dd147..0000000 --- a/src/app/reducers/editor.reducer.ts +++ /dev/null @@ -1,39 +0,0 @@ -import * as editorActions from '../actions/editor.actions'; - - -export interface State { - originalValue: string; - value: string; - filename: string; - unsavedChanges: boolean; - editorGraph: any | null; -} - -export const initialState = { - originalValue: '', - value: '', - filename: 'unnamed.yaml', - unsavedChanges: false, - editorGraph: null -}; - -export function reducer(state = initialState, action: editorActions.All): State { - switch (action.type) { - case editorActions.SET_VALUE: - return {...state, value: action.value, unsavedChanges: action.value !== state.originalValue}; - case editorActions.SET_FILENAME: - return {...state, filename: action.filename}; - case editorActions.UPLOAD_FILE: - return {...state, originalValue: action.value, value: action.value, filename: action.filename, unsavedChanges: false}; - case editorActions.CHANGES_SAVED: - return {...state, unsavedChanges: false, originalValue: state.value}; - case editorActions.SET_EDITOR_GRAPH: - return {...state, editorGraph: action.editorGraph}; - } - return state; -} - -export const getValue = (state: State): string => state.value; -export const getFilename = (state: State): string => state.filename; -export const hasUnsavedChanges = (state: State): boolean => state.unsavedChanges; -export const getEditorGraph = (state: State): boolean => state.editorGraph; diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts deleted file mode 100644 index f978a40..0000000 --- a/src/app/reducers/index.ts +++ /dev/null @@ -1,70 +0,0 @@ -import {ActionReducerMap, createFeatureSelector, createSelector} from '@ngrx/store'; - -import * as fromUserSettings from './user-settings.reducer'; -import * as fromCloudData from './cloud-data.reducer'; -import * as fromEditor from './editor.reducer'; -import * as fromJobData from './job-data.reducer'; -import * as fromRuntimeConfig from './runtime-config.reducer'; - -/* State */ -export interface State { - cloudData: fromCloudData.State; - editor: fromEditor.State; - jobData: fromJobData.State; - userSettings: fromUserSettings.State; - runtimeConfig: fromRuntimeConfig.State; -} - -export const globalInitialState: State = { - cloudData: fromCloudData.initialState, - editor: fromEditor.initialState, - jobData: fromJobData.initialState, - userSettings: fromUserSettings.initialState, - runtimeConfig: fromRuntimeConfig.initialState -}; - -/* Map of all Reducers */ -export const reducers: ActionReducerMap = { - cloudData: fromCloudData.reducer, - editor: fromEditor.reducer, - jobData: fromJobData.reducer, - userSettings: fromUserSettings.reducer, - runtimeConfig: fromRuntimeConfig.reducer -}; - - -/* States */ -export const cloudDataState = (state: State): fromCloudData.State => state.cloudData; -export const editorState = (state: State): fromEditor.State => state.editor; -export const jobDataState = (state: State): fromJobData.State => state.jobData; -export const userSettingsState = (state: State): fromUserSettings.State => state.userSettings; -export const runtimeConfigState = (state: State): fromRuntimeConfig.State => state.runtimeConfig; - -/* Selectors */ - -/* Cloud Data */ -export const getClouds = createSelector(cloudDataState, fromCloudData.getClouds); -export const getHardware = createSelector(cloudDataState, fromCloudData.getHardware); -export const getImages = createSelector(cloudDataState, fromCloudData.getImages); -export const getLocations = createSelector(cloudDataState, fromCloudData.getLocations); - -/* Editor */ -export const getEditorValue = createSelector(editorState, fromEditor.getValue); -export const getEditorFilename = createSelector(editorState, fromEditor.getFilename); -export const editorHasUnsavedChanges = createSelector(editorState, fromEditor.hasUnsavedChanges); -export const getEditorGraph = createSelector(editorState, fromEditor.getEditorGraph); - -/* Job Data */ -export const getJobs = createSelector(jobDataState, fromJobData.getJobs); - -/* User Settings */ -export const getUserSettings = createSelector(userSettingsState, fromUserSettings.getUserSettings); - -/* Runtime Config */ - -export const getApiPath = createSelector(runtimeConfigState, fromRuntimeConfig.getApiPath); -export const getAuthMode = createSelector(runtimeConfigState, fromRuntimeConfig.getAuthMode); -export const getXApiKey = createSelector(runtimeConfigState, fromRuntimeConfig.getXApiKey); -export const getRuntimeConfig = createSelector(runtimeConfigState, fromRuntimeConfig.getRuntimeConfig); -export const getRuntimeConfigIsFetched = createSelector(runtimeConfigState, fromRuntimeConfig.isFetched); - diff --git a/src/app/reducers/job-data.reducer.ts b/src/app/reducers/job-data.reducer.ts deleted file mode 100644 index 3a841b5..0000000 --- a/src/app/reducers/job-data.reducer.ts +++ /dev/null @@ -1,23 +0,0 @@ -import * as jobActions from '../actions/job-data.actions'; -import {Job} from 'cloudiator-rest-api'; -import * as cloudActions from '../actions/cloud-data.actions'; - -export interface State { - jobs: Job[]; -} - -export const initialState = { - jobs: [] -}; - - -export function reducer(state = initialState, action: jobActions.All): State { - switch (action.type) { - case jobActions.SET_JOBS: - return {jobs: action.jobs, ...state}; - default: - return state; - } -} - -export const getJobs = (state: State): Job[] => state.jobs; diff --git a/src/app/reducers/runtime-config.reducer.ts b/src/app/reducers/runtime-config.reducer.ts deleted file mode 100644 index f842b6e..0000000 --- a/src/app/reducers/runtime-config.reducer.ts +++ /dev/null @@ -1,37 +0,0 @@ -import * as userSettingActions from '../actions/runtime-config.actions'; -import {AuthMode, RuntimeConfig} from '../model/RuntimeConfig'; - -export interface State { - runtimeConfig: RuntimeConfig; - isFetched: boolean; -} - -export const initialState = { - runtimeConfig: { - apiPath: '', - authMode: AuthMode.SINGLE, - xApiKey: '' - }, - isFetched: false -}; - -export function reducer(state = initialState, action: userSettingActions.All): State { - switch (action.type) { - case userSettingActions.SET_API_PATH: - return {runtimeConfig: {apiPath: action.apiPath, ...state.runtimeConfig}, ...state}; - case userSettingActions.SET_AUTH_MODE: - return {runtimeConfig: {apiPath: action.authMode, ...state.runtimeConfig}, ...state}; - case userSettingActions.SET_X_API_KEY: - return {runtimeConfig: {xApiKey: action.xApiKey, ...state.runtimeConfig}, ...state}; - case userSettingActions.SET_RUNTIME_CONFIG: - return {...state, runtimeConfig: action.config, isFetched: true}; - default: - return state; - } -} - -export const getApiPath = (state: State): string => state.runtimeConfig.apiPath; -export const getXApiKey = (state: State): string => state.runtimeConfig.xApiKey; -export const getAuthMode = (state: State): AuthMode => state.runtimeConfig.authMode; -export const getRuntimeConfig = (state: State): RuntimeConfig => state.runtimeConfig; -export const isFetched = (state: State): boolean => state.isFetched; diff --git a/src/app/reducers/user-settings.reducer.ts b/src/app/reducers/user-settings.reducer.ts deleted file mode 100644 index da9e6df..0000000 --- a/src/app/reducers/user-settings.reducer.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as userSettingActions from '../actions/user-settings.actions'; - - -export interface State { - placeholder: any; -} - -export const initialState = { - placeholder: {} -}; - -export function reducer(state = initialState, action: userSettingActions.All): State { - switch (action.type) { - case userSettingActions.SET_SETTINGS: - return {...state}; - } -} - -export const getUserSettings = (state: State): any => state.placeholder; diff --git a/src/app/root-store/job-data-store/reducer.ts b/src/app/root-store/job-data-store/reducer.ts index 7a156c6..b2a8fe3 100644 --- a/src/app/root-store/job-data-store/reducer.ts +++ b/src/app/root-store/job-data-store/reducer.ts @@ -1,5 +1,5 @@ -import * as jobActions from '../../actions/job-data.actions'; -import {initialState, State} from '../../reducers/job-data.reducer'; +import * as jobActions from './actions'; +import {initialState, State} from './state'; export function jobDataReducer(state = initialState, action: jobActions.All): State { switch (action.type) { diff --git a/src/app/services/editor.service.spec.ts b/src/app/services/editor.service.spec.ts index ed15e07..11f90dc 100644 --- a/src/app/services/editor.service.spec.ts +++ b/src/app/services/editor.service.spec.ts @@ -2,8 +2,7 @@ import {TestBed} from '@angular/core/testing'; import {EditorService} from './editor.service'; import {take} from 'rxjs/operators'; -import * as fromEditor from '../actions/editor.actions'; -import {RootStoreModule} from '../root-store'; +import {EditorActions, RootStoreModule} from '../root-store'; describe('EditorService', () => { beforeEach(() => TestBed.configureTestingModule({ @@ -37,7 +36,7 @@ describe('EditorService', () => { .pipe(take(1)) .subscribe(value => expect(value).toBeTruthy()); - await service.store.dispatch(new fromEditor.ChangesSavedAction()); + await service.store.dispatch(new EditorActions.ChangesSavedAction()); service.HasUnsaveChanges() .pipe(take(1)) .subscribe(value => expect(value).toBeFalsy()); From 6e71449c575f63b4ce87a0412b3d3ee48aed02e3 Mon Sep 17 00:00:00 2001 From: Florian Lappe Date: Mon, 3 Dec 2018 17:28:49 +0100 Subject: [PATCH 26/29] changed typescript version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bd7dae4..c8de3a2 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,6 @@ "protractor": "^5.4.1", "ts-node": "^7.0.1", "tslint": "^5.11.0", - "typescript": "^3.1.3" + "typescript": "~3.1.3" } } From ab5ec787306c40563ba2498df874513e7648d2fe Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 18 Dec 2018 14:31:32 +0100 Subject: [PATCH 27/29] reenabled travis test, minor layout changes, reactivated parseYamle --- .travis.yml | 2 +- package.json | 1 + .../yaml-editor/yaml-editor.component.html | 5 ++-- .../yaml-editor/yaml-editor.component.ts | 5 ++-- src/app/services/yaml-data.service.ts | 30 +++++++++---------- 5 files changed, 21 insertions(+), 22 deletions(-) diff --git a/.travis.yml b/.travis.yml index bf8dda9..e11d01d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ branches: before_script: - npm install -g @angular/cli script: -# - ng test --watch=false --browsers=ChromeHeadlessNoSandbox --environment=prod --reporters=progress,kjhtml +- npm run travis-test - ng build --prod after_success: - ci/publish_docker.sh diff --git a/package.json b/package.json index c8de3a2..31b8ac4 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "ng serve", "build": "ng build", "test": "ng test --browsers=Chrome --source-map=false", + "travis-test": "ng test --watch=false --environemt=prod --browsers=ChromeHeadlessNoSandbox --reporters=progress,kjhtml", "lint": "ng lint", "e2e": "ng e2e", "compodoc": "npx compodoc", 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 bd32548..005646b 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.html +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -5,7 +5,7 @@ -
+
@@ -49,8 +49,7 @@
+ style="height:100%;">
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 37edc77..2124fdb 100644 --- a/src/app/components/editor/yaml-editor/yaml-editor.component.ts +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -38,8 +38,9 @@ export class YamlEditorComponent implements OnInit { highlightActiveLine: false, fadeFoldWidgets: true, showLineNumbers: true, - fontSize: 16, - wrap: false, + fontSize: 14, + tabSize: 2, + wrap: true, mode: 'ace/mode/yaml' }; diff --git a/src/app/services/yaml-data.service.ts b/src/app/services/yaml-data.service.ts index 6aefe45..77e32bc 100644 --- a/src/app/services/yaml-data.service.ts +++ b/src/app/services/yaml-data.service.ts @@ -2,9 +2,11 @@ import {Injectable} from '@angular/core'; import {RuntimeConfigService} from './runtime-config.service'; import {ToastService} from '../app-dialog/services/toast.service'; import {Job, YamlService} from 'cloudiator-rest-api'; -import {Observable, of} from 'rxjs'; +import {Observable, of, throwError} from 'rxjs'; import {select, Store} from '@ngrx/store'; import {RootStoreState, RuntimeConfigSelectors} from '../root-store'; +import {ToastType} from '../model/toast'; +import {catchError} from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -24,20 +26,16 @@ export class YamlDataService { } public parseYaml(yaml: string): Observable { - - // ToDo: Absolutely dangerous, spams server with jobs if yaml is valid. - - // return this.yamlApiService.parseYAML(yaml) - // .pipe(catchError(err => { - // switch (err.status) { - // case 400: - // case 504: - // this.toastService.show({text: 'Server had an internal Error', type: ToastType.DANGER}, true); - // return throwError(err); - // default: - // return throwError(err); - // } - // })) - return of({id: '4ebd98ce-09e5-4fb7-b439-e82eb2a7de69'}); + return this.yamlApiService.parseYAML(yaml) + .pipe(catchError(err => { + switch (err.status) { + case 400: + case 504: + this.toastService.show({text: 'Server had an internal Error', type: ToastType.DANGER}, true); + return throwError(err); + default: + return throwError(err); + } + })); } } From ce04b9a925dc97477a3798407309bc68c56fd579 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 18 Dec 2018 14:37:17 +0100 Subject: [PATCH 28/29] fixed typo --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 31b8ac4..8d8316d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "start": "ng serve", "build": "ng build", "test": "ng test --browsers=Chrome --source-map=false", - "travis-test": "ng test --watch=false --environemt=prod --browsers=ChromeHeadlessNoSandbox --reporters=progress,kjhtml", + "travis-test": "ng test --watch=false --environment=prod --browsers=ChromeHeadlessNoSandbox --reporters=progress,kjhtml", "lint": "ng lint", "e2e": "ng e2e", "compodoc": "npx compodoc", From 7337a56c17ce19c93e981b4934f264b1bb59a6f3 Mon Sep 17 00:00:00 2001 From: RINO767 Date: Tue, 18 Dec 2018 15:27:04 +0100 Subject: [PATCH 29/29] fixed cloudiator rest api problems --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8d8316d..4aa7a54 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "bulma-badge": "^2.0.0", "bulma-checkradio": "^2.1.0", "bulma-divider": "^2.0.1", - "cloudiator-rest-api": "^1.1.0", + "cloudiator-rest-api": "1.2.1", "core-js": "^2.5.4", "cytoscape": "^3.2.20", "file-saver": "^2.0.0-rc.4",