Merge pull request #25 from cloudiator/development

Development

Author: Florian Lappe

package.json

@@ -15,46 +15,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.12",
-    "@angular/cdk": "^7.3.6",
-    "@angular/common": "^7.2.12",
-    "@angular/compiler": "^7.2.12",
-    "@angular/core": "^7.2.12",
-    "@angular/flex-layout": "^7.0.0-beta.24",
-    "@angular/forms": "^7.2.12",
-    "@angular/http": "^7.2.12",
-    "@angular/platform-browser": "^7.2.12",
-    "@angular/platform-browser-dynamic": "^7.2.12",
-    "@angular/pwa": "^0.12.4",
-    "@angular/router": "^7.2.12",
-    "@angular/service-worker": "^7.2.6",
-    "@ngrx/store": "^7.2.0",
+    "@angular/animations": "^8.1.1",
+    "@angular/cdk": "^8.0.2",
+    "@angular/common": "^8.1.1",
+    "@angular/compiler": "^8.1.1",
+    "@angular/core": "^8.1.1",
+    "@angular/flex-layout": "^8.0.0-beta.26",
+    "@angular/forms": "^8.1.1",
+    "@angular/http": "*",
+    "@angular/platform-browser": "^8.1.1",
+    "@angular/platform-browser-dynamic": "^8.1.1",
+    "@angular/pwa": "^0.801.1",
+    "@angular/router": "^8.1.1",
+    "@angular/service-worker": "^8.1.1",
+    "@ngrx/store": "^8.1.0",
     "brace": "^0.11.1",
     "bulma-badge": "^2.0.0",
-    "bulma-checkradio": "^2.1.0",
+    "bulma-checkradio": "^2.1.1",
     "bulma-divider": "^2.0.1",
     "cloudiator-rest-api": "1.4.0",
     "core-js": "^2.6.5",
-    "cytoscape": "^3.5.2",
+    "cytoscape": "^3.8.1",
     "file-saver": "^2.0.1",
     "hammerjs": "^2.0.8",
-    "lodash": "^4.17.11",
     "node-sass": "^4.12.0",
     "rxjs": "^6.4.0",
     "sass-loader": "^7.1.0",
-    "webpack": "^4.29.6",
+    "webpack": "^4.35.3",
     "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.3",
-    "@angular/cli": "^7.3.8",
-    "@angular/compiler-cli": "^7.2.12",
-    "@angular/language-service": "^7.2.12",
-    "@compodoc/compodoc": "^1.1.8",
+    "@angular-devkit/build-angular": "^0.801.1",
+    "@angular/cli": "^8.1.1",
+    "@angular/compiler-cli": "^8.1.1",
+    "@angular/language-service": "^8.1.1",
+    "@compodoc/compodoc": "^1.1.10",
     "@types/jasmine": "^2.8.16",
     "@types/jasminewd2": "^2.0.6",
-    "@types/lodash": "^4.14.121",
-    "@types/node": "^10.14.4",
+    "@types/node": "^10.14.12",
     "bulma": "^0.7.4",
     "codelyzer": "^4.5.0",
     "hoek": "^6.1.2",
@@ -69,7 +67,7 @@
     "karma-teamcity-reporter": "^1.1.0",
     "protractor": "^5.4.2",
     "ts-node": "^7.0.1",
-    "tslint": "^5.15.0",
-    "typescript": "^3.1.6"
+    "tslint": "^5.18.0",
+    "typescript": "<3.5.0"
   }
 }

src/app/app-routing.module.ts

@@ -3,9 +3,9 @@ import {NgModule} from '@angular/core';
 import {CloudOverviewComponent} from './components/clouds/cloud-overview/cloud-overview.component';
 import {NewCloudComponent} from './components/clouds/new-cloud/new-cloud.component';
 import {CloudViewComponent} from './components/clouds/cloud-view/cloud-view.component';
-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 {HardwareOverviewComponent} from './components/overview-tables/hardware-overview/hardware-overview.component';
+import {ImagesOverviewComponent} from './components/overview-tables/images-overview/images-overview.component';
+import {LocationsOverviewComponent} from './components/overview-tables/locations-overview/locations-overview.component';
 import {YamlEditorComponent} from './components/editor/yaml-editor/yaml-editor.component';
 import {LoginComponent} from './components/login/login.component';
 import {AuthGuard} from './guards/auth.guard';
@@ -29,7 +29,6 @@ const routes: Routes = [
   {path: 'editor', component: YamlEditorComponent, canActivate: [AuthGuard]},
 
   {path: 'schedules', component: SchedulesOverviewComponent},
-  {path: 'schedules/:id', component: SchedulesOverviewComponent},
 
   {path: 'clouds', component: CloudOverviewComponent, canActivate: [AuthGuard]},
   {path: '', component: CloudOverviewComponent, canActivate: [AuthGuard]},

src/app/app.module.ts

@@ -11,10 +11,10 @@ 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 {HardwareOverviewComponent} from './components/hardware/hardware-overview/hardware-overview.component';
+import {HardwareOverviewComponent} from './components/overview-tables/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 {ImagesOverviewComponent} from './components/overview-tables/images-overview/images-overview.component';
+import {LocationsOverviewComponent} from './components/overview-tables/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';
@@ -31,6 +31,8 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { SchedulesBottomSheetComponent } from './components/schedules/schedules-bottom-sheet/schedules-bottom-sheet.component';
 import {environment} from '../environments/environment';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import { OverviewTableComponent } from './components/overview-tables/overview-table.component';
 
 /**
  * Default configuration required by the swagger API Module.
@@ -77,6 +79,7 @@ export class BottomSheetHammerConfig extends HammerGestureConfig {
     SchedulesOverviewComponent,
     SchedulesViewComponent,
     SchedulesBottomSheetComponent,
+    OverviewTableComponent,
   ],
   imports: [
     BrowserModule,
@@ -90,7 +93,8 @@ export class BottomSheetHammerConfig extends HammerGestureConfig {
     CdkTableModule,
     AppDialogModule,
     FlexLayoutModule,
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
+    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+    ScrollingModule
   ],
   providers: [
     {

src/app/components/app/app.component.spec.ts

@@ -6,10 +6,10 @@ import {NewCloudComponent} from '../clouds/new-cloud/new-cloud.component';
 import {CloudOverviewComponent} from '../clouds/cloud-overview/cloud-overview.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CloudCardComponent} from '../clouds/cloud-card/cloud-card.component';
-import {HardwareOverviewComponent} from '../hardware/hardware-overview/hardware-overview.component';
+import {HardwareOverviewComponent} from '../overview-tables/hardware-overview/hardware-overview.component';
 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 {ImagesOverviewComponent} from '../overview-tables/images-overview/images-overview.component';
+import {LocationsOverviewComponent} from '../overview-tables/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';
@@ -25,6 +25,7 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {AuthService} from '../../services/auth.service';
 import {of} from 'rxjs';
 import * as testData from 'testing/test-data';
+import {ScrollingModule} from '@angular/cdk/scrolling';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -55,7 +56,8 @@ describe('AppComponent', () => {
         CdkTableModule,
         ApiModule.forRoot(testData.testApiFactory),
         HttpClientTestingModule,
-        AppDialogModule
+        AppDialogModule,
+        ScrollingModule
       ],
       providers: []
     }).compileComponents();

src/app/components/clouds/cloud-overview/cloud-overview.component.html

@@ -1,24 +1,33 @@
 <div style="height: 100%;">
-<div class="hero">
-  <div class="hero-body">
-    <div class="container">
-      <h1 class="title">Clouds</h1>
+  <div class="hero">
+    <div class="hero-body">
+      <div class="container">
+        <h1 class="title">Clouds</h1>
+      </div>
     </div>
   </div>
-</div>
 
-<section class="section">
-  <div class="is-flowing is-gaping">
+  <section class="section">
+    <div class="is-flowing is-gaping">
 
-    <app-cloud-card *ngFor="let cloud of clouds" [cloud]="cloud"></app-cloud-card>
+      <ng-container *ngIf="!(cloudIsLoading$ | async); else cloudLoader">
+        <app-cloud-card *ngFor="let cloud of clouds" [cloud]="cloud"></app-cloud-card>
+      </ng-container>
+      <ng-template #cloudLoader>
+        <div class="card button is-secondary is-hoverable"
+             style="min-width: 15em; min-height: 5em; padding: 0 0; display: flex; flex-direction: column; ">
+          <div class="text-loading-animation" style="border-radius: 3rem; width: 11em; margin-bottom: 0.5em">&#8205;</div>
+          <div class="text-loading-animation" style="border-radius: 3rem; width: 10em; height: 1em">&#8205;</div>
+        </div>
+      </ng-template>
 
-    <!-- Add new cloud button -->
-    <a class="card button has-background-grey-lighter is-hoverable" routerLink="/new-cloud" routerLinkActive="active"
-       style="min-width: 15em; min-height: 5em">
+      <!-- Add new cloud button -->
+      <a class="card button has-background-grey-lighter is-hoverable" routerLink="/new-cloud" routerLinkActive="active"
+         style="min-width: 15em; min-height: 5em">
     <span class="icon is-large" style="width: 100%; height: 100%;">
     <i class="fas fa-plus fa-3x"></i>
     </span>
-    </a>
-  </div>
-</section>
+      </a>
+    </div>
+  </section>
 </div>

src/app/components/clouds/cloud-overview/cloud-overview.component.spec.ts

@@ -12,7 +12,8 @@ describe('CloudOverviewComponent', () => {
   let fixture: ComponentFixture<CloudOverviewComponent>;
 
   const mockCloudDataService = jasmine.createSpyObj('CloudDataService', {
-    'findClouds': of([])
+    'findClouds': of([]),
+    'cloudIsLoading': of(false)
   });
 
   beforeEach(async(() => {

src/app/components/clouds/cloud-overview/cloud-overview.component.ts

@@ -1,7 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {CloudDataService} from '../../../services/cloud-data.service';
 import {Cloud} from 'cloudiator-rest-api';
-import {Subscription} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
+import {map, tap} from 'rxjs/operators';
 
 /**
  * Overview of all clouds given as a set of horizontally flowing cards.
@@ -19,6 +20,8 @@ export class CloudOverviewComponent implements OnInit, OnDestroy {
    */
   public clouds: Cloud[] = [];
 
+  public cloudIsLoading$: Observable<boolean> = this.cloudDataService.cloudIsLoading();
+
   /**
    * All Subscriptions of this Component.
    * @type {any[]}