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/.travis.yml b/.travis.yml index fb6d1f5..e11d01d 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: +- npm run travis-test - ng build --prod after_success: - ci/publish_docker.sh diff --git a/package.json b/package.json index ed086b2..4aa7a54 100644 --- a/package.json +++ b/package.json @@ -6,56 +6,61 @@ "start": "ng serve", "build": "ng build", "test": "ng test --browsers=Chrome --source-map=false", + "travis-test": "ng test --watch=false --environment=prod --browsers=ChromeHeadlessNoSandbox --reporters=progress,kjhtml", "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, "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.2.1", "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" }, "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", - "bulma": "^0.7.1", - "codelyzer": "~4.2.1", + "@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": "~2.99.1", + "jasmine-core": "^2.99.1", "jasmine-spec-reporter": "~4.2.1", - "karma": "^3.0.0", + "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "^2.0.4", - "karma-jasmine": "~1.1.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", - "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/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-dialog/app-dialog.module.ts b/src/app/app-dialog/app-dialog.module.ts new file mode 100644 index 0000000..4e677e6 --- /dev/null +++ b/src/app/app-dialog/app-dialog.module.ts @@ -0,0 +1,29 @@ +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/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 92% 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 ee60646..b96846c 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'; describe('ConfirmNewCloudDialogComponent', () => { @@ -11,6 +11,7 @@ describe('ConfirmNewCloudDialogComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ConfirmNewCloudDialogComponent ], + imports: [], providers: [ {provide: DialogRef, useVale: {}}, { provide: DIALOG_DATA, useValue: {}} 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 71% rename from src/app/dialogs/toast/toast.component.ts rename to src/app/app-dialog/dialogs/toast/toast.component.ts index 4ca12c0..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', @@ -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/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 97% rename from src/app/services/dialog.service.ts rename to src/app/app-dialog/services/dialog.service.ts index 6fb1861..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 @@ -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.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 85% rename from src/app/services/toast.service.ts rename to src/app/app-dialog/services/toast.service.ts index 854dc02..22fe959 100644 --- a/src/app/services/toast.service.ts +++ b/src/app/app-dialog/services/toast.service.ts @@ -1,18 +1,16 @@ 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. */ -@Injectable({ - providedIn: 'root' -}) +@Injectable() export class ToastService { private toastRef: DialogRef = null; 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-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 b9944cb..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,19 +10,15 @@ 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 {Overlay, 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'; -import {RuntimeConfigService} from './services/runtime-config.service'; -import {ToastComponent} from './dialogs/toast/toast.component'; -import {ToastService} from './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/app-dialog.module'; +import {RootStoreModule} from './root-store'; export function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { @@ -40,36 +35,24 @@ export function apiConfigFactory(): Configuration { NewCloudComponent, CloudViewComponent, CloudCardComponent, - DeleteCloudDialogComponent, - ConfirmNewCloudDialogComponent, - ToastComponent, HardwareOverviewComponent, ImagesOverviewComponent, LocationsOverviewComponent, + YamlEditorComponent, + YamlGraphComponent, ], imports: [ BrowserModule, AppRoutingModule, - AppStoreModule, + RootStoreModule, ApiModule.forRoot(apiConfigFactory), HttpClientModule, FormsModule, ReactiveFormsModule, - OverlayModule, - CdkTableModule - ], - providers: [ - Overlay, - DialogService, - CloudDataService, - RuntimeConfigService, - ToastService - ], - entryComponents: [ - ToastComponent, - DeleteCloudDialogComponent, - ConfirmNewCloudDialogComponent, + CdkTableModule, + AppDialogModule ], + providers: [], bootstrap: [AppComponent] }) export class AppModule { diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html index e800360..79f7aa8 100644 --- a/src/app/components/app/app.component.html +++ b/src/app/components/app/app.component.html @@ -32,6 +32,11 @@ Locations + + + Editor + +
@@ -52,6 +57,6 @@ -
+
diff --git a/src/app/components/app/app.component.spec.ts b/src/app/components/app/app.component.spec.ts index b0f6b29..a766980 100644 --- a/src/app/components/app/app.component.spec.ts +++ b/src/app/components/app/app.component.spec.ts @@ -10,6 +10,9 @@ 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'; +import {YamlGraphComponent} from '../editor/yaml-graph/yaml-graph.component'; +import {RootStoreModule} from '../../root-store'; describe('AppComponent', () => { beforeEach(async(() => { @@ -22,9 +25,12 @@ describe('AppComponent', () => { CloudCardComponent, HardwareOverviewComponent, ImagesOverviewComponent, - LocationsOverviewComponent + LocationsOverviewComponent, + YamlEditorComponent, + YamlGraphComponent ], imports: [ + RootStoreModule, AppRoutingModule, FormsModule, ReactiveFormsModule, diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts index a8985b2..f56461d 100644 --- a/src/app/components/app/app.component.ts +++ b/src/app/components/app/app.component.ts @@ -1,12 +1,7 @@ -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 {Component, HostListener, OnDestroy, OnInit} from '@angular/core'; import {NavigationStart, Router} from '@angular/router'; import {Subscription} from 'rxjs'; +import {EditorService} from '../../services/editor.service'; /** * Entry point of this app, everything is shown in this Container. @@ -21,10 +16,18 @@ import {Subscription} from 'rxjs'; export class AppComponent implements OnInit, OnDestroy { showBurgerMenu = false; + editorHasUnsavedChanges: boolean; private subscriptions: Subscription[] = []; - constructor(private router: Router) { + constructor(private editorService: EditorService, + private router: Router) { + } + + @HostListener('window:beforeunload') + unloadNotification() { + // ToDo: reactivate + // return !this.editorHasUnsavedChanges; } ngOnInit() { @@ -35,11 +38,14 @@ export class AppComponent implements OnInit, OnDestroy { } }); - this.subscriptions.push(s0); + const s1 = this.editorService.HasUnsaveChanges().subscribe(value => this.editorHasUnsavedChanges = value); + + this.subscriptions.push(s0, s1); } ngOnDestroy() { this.subscriptions.forEach(s => s.unsubscribe()); } + } 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.html b/src/app/components/clouds/cloud-view/cloud-view.component.html index 22e06a9..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,115 +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/clouds/cloud-view/cloud-view.component.spec.ts b/src/app/components/clouds/cloud-view/cloud-view.component.spec.ts index 1dcb297..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,14 +2,14 @@ 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'; 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; @@ -33,12 +33,10 @@ describe('CloudViewComponent', () => { CloudViewComponent ], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, 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..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,16 +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 '../../../services/dialog.service'; -import {ToastService} from '../../../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; @@ -21,19 +18,14 @@ describe('NewCloudComponent', () => { TestBed.configureTestingModule({ declarations: [NewCloudComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, 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.html b/src/app/components/editor/yaml-editor/yaml-editor.component.html new file mode 100644 index 0000000..005646b --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.html @@ -0,0 +1,60 @@ + + + + + + + +
+ +
+
+
+ +
+
+
+

+ + +

+ +

+ +

+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ +
+
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..a9d9ff2 --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.scss @@ -0,0 +1,24 @@ +@import "../../../../styles"; + +.editor-container { + display: flex; + background: blue; + height: 100%; + flex-direction: column; +} + +.editor-header { + 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.spec.ts b/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts new file mode 100644 index 0000000..5926222 --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.spec.ts @@ -0,0 +1,145 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {YamlEditorComponent} from './yaml-editor.component'; +import {FormsModule} from '@angular/forms'; +import {YamlGraphComponent} from '../yaml-graph/yaml-graph.component'; +import {YamlDataService} from '../../../services/yaml-data.service'; +import {HttpClientModule, HttpErrorResponse} from '@angular/common/http'; +import {ApiModule} from 'cloudiator-rest-api'; +import {apiConfigFactory} from '../../../app.module'; +import {EditorService} from '../../../services/editor.service'; +import {of, throwError} from 'rxjs'; +import * as testData from '../../../../../testing/test-data'; +import {ToastType} from '../../../model/toast'; +import {take} from 'rxjs/operators'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; + +describe('YamlEditorComponent', () => { + let component: YamlEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [YamlEditorComponent, YamlGraphComponent], + imports: [ + RootStoreModule, + FormsModule, + HttpClientModule, + ApiModule.forRoot(apiConfigFactory), + AppDialogModule + ], + providers: [ + EditorService, + YamlDataService + ] + + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(YamlEditorComponent); + component = fixture.componentInstance; + }); + + 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('downlaodFile should be called', () => { + spyOn(component.editorService, 'downloadFile').and.stub(); + component.onDownload(); + 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, '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 new file mode 100644 index 0000000..2124fdb --- /dev/null +++ b/src/app/components/editor/yaml-editor/yaml-editor.component.ts @@ -0,0 +1,104 @@ +import {Component, OnInit} from '@angular/core'; +import * as ace from 'brace'; +import {Editor} from 'brace'; +import 'brace/mode/yaml'; +import 'brace/theme/monokai'; +import {YamlDataService} from '../../../services/yaml-data.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'; +import {take} from 'rxjs/operators'; + +@Component({ + selector: 'app-yaml-editor', + templateUrl: './yaml-editor.component.html', + styleUrls: ['./yaml-editor.component.scss'] +}) +export class YamlEditorComponent implements OnInit { + + public editor: Editor; + + private _filename: string; + get filename(): string { + return this._filename; + } + + set filename(filename: string) { + this.editorService.setFilename(filename); + this._filename = filename; + } + + public theme = 'monokai'; + + private options: any = { + showPrintMargin: false, + showInvisibles: false, + highlightGutterLine: false, + highlightActiveLine: false, + fadeFoldWidgets: true, + showLineNumbers: true, + fontSize: 14, + tabSize: 2, + wrap: true, + mode: 'ace/mode/yaml' + }; + + constructor(public editorService: EditorService, + public jobDataService: JobDataService, + public toastService: ToastService, + public yamlDataService: YamlDataService) { + } + + ngOnInit() { + this.editor = ace.edit('editor'); + this.editor.getSession().setMode('ace/mode/yaml'); + this.editor.setTheme(`ace/theme/${this.theme}`); + this.editor.setOptions(this.options); + this.editor.$blockScrolling = Infinity; + this.editor.clearSelection(); + this.editor.getSession().on('change', () => { + this.editorService.setEditorValue(this.editor.getValue()); + }); + + + this.editorService.getEditorValue().pipe(take(1)).subscribe(value => this.editor.setValue(value)); + this.editorService.getFilename().pipe(take(1)).subscribe(filename => this._filename = filename); + } + + onDownload() { + this.editorService.downloadFile(); + } + + onUploadChange(event) { + 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() { + this.yamlDataService.parseYaml(this.editor.getValue()) + .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.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..5c14a6e --- /dev/null +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { YamlGraphComponent } from './yaml-graph.component'; +import {RootStoreModule} from '../../../root-store'; + +describe('YamlGraphComponent', () => { + let component: YamlGraphComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ YamlGraphComponent ], + imports: [ + RootStoreModule + ] + }) + .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..1501840 --- /dev/null +++ b/src/app/components/editor/yaml-graph/yaml-graph.component.ts @@ -0,0 +1,84 @@ +import {Component, OnInit} from '@angular/core'; +import * as cytoscape from 'cytoscape'; +import {EditorService} from '../../../services/editor.service'; + + +@Component({ + selector: 'app-yaml-graph', + templateUrl: './yaml-graph.component.html', + styleUrls: ['./yaml-graph.component.scss'] +}) +export class YamlGraphComponent implements OnInit { + + 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' + } + }]; + + 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 ); + this.cy = cytoscape({ + container: document.getElementById('cy'), + 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) { + this.cy.remove(this.cy.$(() => true)); + this.cy.add(graphData); + this.cy.layout(this.circLayout).run(); + } + }); + } + +} 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..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,17 +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 '../../../services/dialog.service'; -import {ToastService} from '../../../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; @@ -26,24 +22,18 @@ describe('HardwareOverviewComponent', () => { TestBed.configureTestingModule({ declarations: [HardwareOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, 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..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,20 +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 '../../../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 {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; @@ -26,24 +22,18 @@ describe('ImagesOverviewComponent', () => { TestBed.configureTestingModule({ declarations: [ImagesOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, 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 1926007..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 {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 {LocationsOverviewComponent} from './locations-overview.component'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CdkTableModule} from '@angular/cdk/table'; import {HttpClientModule} from '@angular/common/http'; @@ -10,11 +8,9 @@ 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} from '@angular/core'; import {of} from 'rxjs'; +import {AppDialogModule} from '../../../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../../../root-store'; describe('LocationsOverviewComponent', () => { let component: LocationsOverviewComponent; @@ -24,26 +20,21 @@ describe('LocationsOverviewComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LocationsOverviewComponent ], + declarations: [ + LocationsOverviewComponent], imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, FormsModule, ReactiveFormsModule, CdkTableModule, HttpClientModule, ApiModule.forRoot(apiConfigFactory), - RouterModule + RouterModule, + AppDialogModule ], providers: [ - { provide: Router, useValue: router }, + {provide: Router, useValue: router}, CloudDataService, - DialogService, - ToastService, - Overlay, - Injector, { provide: ActivatedRoute, useValue: { @@ -52,7 +43,7 @@ describe('LocationsOverviewComponent', () => { } ] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { 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/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/index.ts b/src/app/reducers/index.ts deleted file mode 100644 index cbdec80..0000000 --- a/src/app/reducers/index.ts +++ /dev/null @@ -1,51 +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 fromRuntimeConfig from './runtime-config.reducer'; - -/* State */ -export interface State { - cloudData: fromCloudData.State; - userSettings: fromUserSettings.State; - runtimeConfig: fromRuntimeConfig.State; -} - -export const globalInitialState: State = { - cloudData: fromCloudData.initialState, - userSettings: fromUserSettings.initialState, - runtimeConfig: fromRuntimeConfig.initialState -}; - -/* Map of all Reducers */ -export const reducers: ActionReducerMap = { - cloudData: fromCloudData.reducer, - userSettings: fromUserSettings.reducer, - runtimeConfig: fromRuntimeConfig.reducer -}; - - -/* States */ -export const cloudDataState = (state: State): fromCloudData.State => state.cloudData; -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); - -/* 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/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/actions/cloud-data.actions.ts b/src/app/root-store/cloud-data-store/actions.ts similarity index 100% rename from src/app/actions/cloud-data.actions.ts rename to src/app/root-store/cloud-data-store/actions.ts 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..b2a8fe3 --- /dev/null +++ b/src/app/root-store/job-data-store/reducer.ts @@ -0,0 +1,14 @@ +import * as jobActions from './actions'; +import {initialState, State} from './state'; + +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 2ffd8ab..c0cdb50 100644 --- a/src/app/services/cloud-data.service.spec.ts +++ b/src/app/services/cloud-data.service.spec.ts @@ -3,15 +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 './dialog.service'; -import {ToastService} from './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', () => { @@ -23,20 +19,14 @@ describe('CloudDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({ - ...fromRoot.reducers, - 'feature': combineReducers(fromRoot.reducers) - }), + RootStoreModule, HttpClientModule, - ApiModule.forRoot(apiConfigFactory) + ApiModule.forRoot(apiConfigFactory), + AppDialogModule ], providers: [ CloudDataService, - {provide: CloudService, useValue: mockCloudService}, - DialogService, - ToastService, - Overlay, - Injector + {provide: CloudService, useValue: mockCloudService} ] }); }); @@ -48,7 +38,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/cloud-data.service.ts b/src/app/services/cloud-data.service.ts index 2d51b9d..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 './toast.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 new file mode 100644 index 0000000..11f90dc --- /dev/null +++ b/src/app/services/editor.service.spec.ts @@ -0,0 +1,61 @@ +import {TestBed} from '@angular/core/testing'; + +import {EditorService} from './editor.service'; +import {take} from 'rxjs/operators'; +import {EditorActions, RootStoreModule} from '../root-store'; + +describe('EditorService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + RootStoreModule + ] + })); + + 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 EditorActions.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 new file mode 100644 index 0000000..e18ff7c --- /dev/null +++ b/src/app/services/editor.service.ts @@ -0,0 +1,74 @@ +import {Injectable} from '@angular/core'; +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) { + } + + public getEditorValue(): Observable { + return this.store.pipe(select(EditorSelectors.selectValue)); + } + + public setEditorValue(value: string) { + this.store.dispatch(new EditorActions.SetValueAction(value)); + } + + public getFilename(): Observable { + return this.store.pipe(select(EditorSelectors.selectFilename)); + } + + public setFilename(filename: string) { + this.store.dispatch(new EditorActions.SetFilenameAction(filename)); + } + + public getEditorGraph(): Observable { + return this.store.pipe(select(EditorSelectors.selectGraph)); + } + + public setEditorGraph(graphData: any | null) { + this.store.dispatch(new EditorActions.SetEditorGraphAction(graphData)); + } + + public HasUnsaveChanges(): Observable { + return this.store.pipe(select(EditorSelectors.selectHasUnsavedChanges)); + } + + public downloadFile() { + // toDo: error handling + this.store.pipe( + select(EditorSelectors.selectEditorState), + take(1)) + .subscribe(state => { + const blob = new Blob([state.value], { + type: 'text/plain;charset=utf-8' + }); + + saveAs(blob, state.filename); + this.store.dispatch(new EditorActions.ChangesSavedAction()); + }); + } + + public uploadFile(files: FileList): Promise { + 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 => { + reader.onload = () => { + this.store.dispatch(new EditorActions.UploadFileAction(reader.result.toString(), file.name)); + resolve(); + }; + }); + } + return Promise.reject('could not load file'); + } +} 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..2bd1265 --- /dev/null +++ b/src/app/services/job-data.service.spec.ts @@ -0,0 +1,25 @@ +import {inject, TestBed} from '@angular/core/testing'; + +import { JobDataService } from './job-data.service'; +import {ApiModule} from 'cloudiator-rest-api'; +import {HttpClientModule} from '@angular/common/http'; +import {AppDialogModule} from '../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../root-store'; + +describe('JobDataService', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + RootStoreModule, + ApiModule, + HttpClientModule, + AppDialogModule + ], + providers: [ + 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 new file mode 100644 index 0000000..4541404 --- /dev/null +++ b/src/app/services/job-data.service.ts @@ -0,0 +1,48 @@ +import {Injectable} from '@angular/core'; +import {select, Store} from '@ngrx/store'; +import {RuntimeConfigService} from './runtime-config.service'; +import {ToastService} from '../app-dialog/services/toast.service'; +import {Job, JobService} from 'cloudiator-rest-api'; +import {Observable} from 'rxjs'; +import {ToastType} from '../model/toast'; +import {JobDataActions, JobDataSelectors, RootStoreState, RuntimeConfigSelectors} from '../root-store'; + +@Injectable({ + providedIn: 'root' +}) +export class JobDataService { + + constructor(private jobApiService: JobService, + private runtimeConfigService: RuntimeConfigService, + private store: Store, + private toastService: ToastService) { + 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; + } + }); + } + + public findJobs(): Observable { + this.fetchJobs(); + + return this.store.pipe(select(JobDataSelectors.selectJobs)); + } + + 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 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 new file mode 100644 index 0000000..9d224ea --- /dev/null +++ b/src/app/services/yaml-data.service.spec.ts @@ -0,0 +1,42 @@ +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 {AppDialogModule} from '../app-dialog/app-dialog.module'; +import {RootStoreModule} from '../root-store'; + +describe('YamlDataService', () => { + + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + RootStoreModule, + ApiModule.forRoot(apiConfigFactory), + HttpClientModule, + AppDialogModule + ], + providers: [] + })); + + 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 new file mode 100644 index 0000000..77e32bc --- /dev/null +++ b/src/app/services/yaml-data.service.ts @@ -0,0 +1,41 @@ +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, 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' +}) +export class YamlDataService { + + constructor(public yamlApiService: YamlService, + public runtimeConfigService: RuntimeConfigService, + public store: Store, + public toastService: ToastService) { + 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; + } + }); + } + + public parseYaml(yaml: string): Observable { + 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); + } + })); + } +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7f13cd0..cd64d5b 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -10,7 +10,7 @@ export const environment = { href: '/', apiPath: 'http://134.60.64.119:9000', authMode: AuthMode.SINGLE, - xApiKey: 'CloudiatorUI2018', + xApiKey: 'secureUI', notificationDuration: 10000 }; 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 diff --git a/src/styles.scss b/src/styles.scss index 1dc791d..4c85744 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,9 +29,21 @@ $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 +html { + overflow: hidden; +} + +$app-container-height: calc(100vh - #{$navbar-height}); + +.app-container { + height: $app-container-height; + overflow-y: auto; +} + // container auto linewrap .is-flowing { diff --git a/testing/test-data.ts b/testing/test-data.ts index b070638..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[] = [ @@ -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,225 @@ export const allImages: Image[] = [ imageTwo, 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: [ + { + data: { + id: 'wiki', + name: 'wiki' + } + }, + { + data: { + id: 'loadbalancer', + name: 'loadbalancer' + } + }, + { + data: { + id: 'database', + name: 'database' + } + } + ], + edges: [ + { + data: { + id: -222996446, + source: 'wiki', + target: 'loadbalancer' + } + }, + { + data: { + id: -1368644092, + source: 'database', + target: 'wiki' + }, + classes: 'mandatory' + } + ] +}; 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