Loader component

Resolves #728

Author: oodamien

ui/src/app/runtime/runtime-app/runtime-app.component.html

@@ -33,4 +33,6 @@ <h4 class="modal-title pull-left">Instances for app <strong>{{ runtimeApp.deploy
   </div>
 </div>
 
-<ng-template #loading><div>Loading...</div></ng-template>
+<ng-template #loading>
+  <app-loader></app-loader>
+</ng-template>

ui/src/app/runtime/runtime-app/runtime-app.component.spec.ts

@@ -13,6 +13,7 @@ import {RuntimeApp} from '../model/runtime-app';
 import {KeyValuePipe} from '../../shared/pipes/key-value-filter.pipe';
 import {RuntimeAppInstance} from '../model/runtime-app-instance';
 import {NgBusyModule} from 'ng-busy';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 describe('RuntimeAppComponent', () => {
   let component: RuntimeAppComponent;
@@ -27,7 +28,8 @@ describe('RuntimeAppComponent', () => {
       declarations: [
         RuntimeAppComponent,
         KeyValuePipe,
-        RuntimeAppStateComponent
+        RuntimeAppStateComponent,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/runtime/runtime-apps/runtime-apps.component.html

@@ -71,7 +71,7 @@ <h1>Runtime applications</h1>
   </div>
 
   <ng-template #loading>
-    <div>Loading...</div>
+    <app-loader></app-loader>
   </ng-template>
 
 </div>

ui/src/app/runtime/runtime-apps/runtime-apps.component.spec.ts

@@ -14,6 +14,7 @@ import {RuntimeAppStateComponent} from '../components/runtime-app-state/runtime-
 import {RuntimeAppComponent} from '../runtime-app/runtime-app.component';
 import {NgBusyModule} from 'ng-busy';
 import {MockModalService} from '../../tests/mocks/modal';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 describe('RuntimeAppsComponent', () => {
   let component: RuntimeAppsComponent;
@@ -27,7 +28,8 @@ describe('RuntimeAppsComponent', () => {
       declarations: [
         RuntimeAppsComponent,
         KeyValuePipe,
-        RuntimeAppStateComponent
+        RuntimeAppStateComponent,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/shared/components/loader/loader.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+/**
+ * Loader component
+ * <app-loader></app-loader>
+ * <app-loader text="Loading in progress…"></app-loader>
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-loader',
+  styleUrls: ['styles.scss'],
+  template: `
+    <div class="app-loader">
+      <div class="icon icon-middle spinner" style="font-size: 16px;">
+        <svg class="icon-spinner-sm" height="100px" width="100px" viewBox="0 0 101 101">
+          <circle class="ring" cx="50%" cy="50%" fill="none" r="45%" stroke-linecap="butt" stroke-width="10%"></circle>
+          <circle class="path" cx="50%" cy="50%" fill="none" r="45%" stroke-linecap="butt" stroke-width="10%"></circle>
+        </svg>
+      </div>
+      <span>
+        {{ text }}
+      </span>
+    </div>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoaderComponent {
+
+  /**
+   * Text display
+   */
+  @Input() text: string = 'Loading…';
+
+}

ui/src/app/shared/components/loader/styles.scss

@@ -0,0 +1,14 @@
+
+:host {
+  padding: 1rem 0;
+  color: #939da2;
+  >div {
+    padding-left: 30px;
+    position: relative;
+    .icon {
+      position: absolute;
+      top: 4px;
+      left: 2px;
+    }
+  }
+}

ui/src/app/shared/shared.module.ts

@@ -1,31 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
 import { HttpModule } from '@angular/http';
-
 import { ToastyModule } from 'ng2-toasty';
-
 import { NgBusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS } from 'ng-busy';
 import { ErrorHandler } from './model/error-handler';
 import { CapitalizePipe } from './pipes/capitalize.pipe';
 import { TriStateCheckboxComponent } from './components/tri-state-checkbox.component';
 import { TriStateButtonComponent } from './components/tri-state-button.component';
 import { ClickOutsideDirective } from './directives/click-outside.directive';
 import { SearchfilterPipe } from './pipes/search-filter.pipe';
-
 import { KeyValuePipe } from './pipes/key-value-filter.pipe';
-
 import { NgxPaginationModule } from 'ngx-pagination';
 import { PropertyTableComponent } from './components/property-table/property-table.component';
-
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-
 import { TabComponent, TabsComponent } from './components/tabs.component';
-
 import { ParserService } from './services/parser.service';
 import { SharedAppsService } from './services/shared-apps.service';
 import { DataflowDateTimePipe } from './pipes/dataflow-date-time.pipe';
@@ -46,6 +38,7 @@ import { ConfirmComponent } from './components/confirm/confirm.component';
 import { BusyService } from './services/busy.service';
 import { AutoResizeDirective } from './directives/auto-resize.directive';
 import { StreamDslComponent } from './components/dsl/dsl.component';
+import { LoaderComponent } from './components/loader/loader.component';
 
 const busyConfig: BusyConfig = {
   message: 'Processing..',
@@ -100,7 +93,8 @@ const busyConfig: BusyConfig = {
     StreamDslComponent,
     TruncatePipe,
     OrderByPipe,
-    ConfirmComponent
+    ConfirmComponent,
+    LoaderComponent
   ],
   entryComponents: [
     ConfirmComponent
@@ -140,7 +134,8 @@ const busyConfig: BusyConfig = {
     TruncatePipe,
     OrderByPipe,
     ConfirmComponent,
-    AutoResizeDirective
+    AutoResizeDirective,
+    LoaderComponent
   ]
 })
 export class SharedModule {

ui/src/app/streams/stream-deploy/builder/builder.component.html

@@ -363,7 +363,5 @@
   </form>
 </div>
 <ng-template #loading>
-  <div>
-    Loading ...
-  </div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/streams/stream-deploy/stream-deploy.component.html

@@ -44,7 +44,5 @@ <h1 style="margin-bottom: 10px">Deploy Stream Definition {{ config.id }}</h1>
 </div>
 
 <ng-template #loading>
-  <div>
-    Loading ...
-  </div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/streams/stream/graph/stream-graph.component.spec.ts

@@ -13,6 +13,7 @@ import { RenderService } from '../../components/flo/render.service';
 import { MockSharedAppService } from '../../../tests/mocks/shared-app';
 import { BusyService } from '../../../shared/services/busy.service';
 import { StreamGraphComponent } from './stream-graph.component';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
 
 
 /**
@@ -38,7 +39,8 @@ describe('StreamGraphComponent', () => {
     TestBed.configureTestingModule({
       declarations: [
         StreamGraphComponent,
-        GraphViewComponent
+        GraphViewComponent,
+        LoaderComponent
       ],
       imports: [
         RouterTestingModule.withRoutes([]),

ui/src/app/streams/stream/summary/stream-summary.component.html

@@ -81,5 +81,5 @@
   </div>
 </div>
 <ng-template #loading>
-  <div>Loading...</div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/streams/stream/summary/stream-summary.component.spec.ts

@@ -19,6 +19,7 @@ import { MockAuthService } from '../../../tests/mocks/auth';
 import { AuthService } from '../../../auth/auth.service';
 import { MocksSharedAboutService } from '../../../tests/mocks/shared-about';
 import { SharedAboutService } from '../../../shared/services/shared-about.service';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
 
 /**
  * Test {@link StreamSummaryComponent}.
@@ -45,7 +46,8 @@ describe('StreamSummaryComponent', () => {
         StreamStatusComponent,
         AppTypeComponent,
         StreamDslComponent,
-        RolesDirective
+        RolesDirective,
+        LoaderComponent
       ],
       imports: [
         RouterTestingModule.withRoutes([]),

ui/src/app/streams/streams/deployment-properties-info/deployment-properties-info.component.html

@@ -11,4 +11,6 @@
     </div>
   </div>
 </div>
-<ng-template #loading><div>Loading...</div></ng-template>
+<ng-template #loading>
+  <app-loader></app-loader>
+</ng-template>

ui/src/app/streams/streams/deployment-properties-info/deployment-properties-info.component.spec.ts

@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStreamsService } from '../../../tests/mocks/streams';
 import { StreamsService } from '../../streams.service';
 import { StreamDefinition } from '../../model/stream-definition';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
 
 /**
  * Test {@link DeploymentPropertiesInfoComponent}.
@@ -31,7 +32,8 @@ describe('DeploymentPropertiesInfoComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
-        DeploymentPropertiesInfoComponent
+        DeploymentPropertiesInfoComponent,
+        LoaderComponent
       ],
       imports: [],
       providers: [

ui/src/app/streams/streams/streams.component.spec.ts

@@ -37,6 +37,7 @@ import { BusyService } from '../../shared/services/busy.service';
 import { MockModalService } from '../../tests/mocks/modal';
 import { AppsService } from '../../apps/apps.service';
 import { MockAppsService } from '../../tests/mocks/apps';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 /**
  * Test {@link StreamsComponent}.
@@ -74,7 +75,8 @@ describe('StreamsComponent', () => {
         StreamDslComponent,
         MasterCheckboxComponent,
         StreamGraphDefinitionComponent,
-        TruncatePipe
+        TruncatePipe,
+        LoaderComponent
       ],
       imports: [
         NgxPaginationModule,

ui/src/app/tasks/task-definition/graph/task-graph.component.html

@@ -5,7 +5,6 @@
   </app-graph-view>
 
 </div>
-
 <ng-template #loading>
-  <div>Loading...</div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/tasks/task-definition/summary/task-summary.component.html

@@ -71,5 +71,5 @@
   </div>
 </div>
 <ng-template #loading>
-  <div>Loading...</div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/tasks/task-definition/summary/task-summary.component.spec.ts

@@ -23,6 +23,7 @@ import { RolesDirective } from '../../../auth/directives/roles.directive';
 import { AuthService } from '../../../auth/auth.service';
 import { MockModalService } from '../../../tests/mocks/modal';
 import { BsModalService } from 'ngx-bootstrap';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
 
 /**
  * Test {@link TaskSummaryComponent}.
@@ -51,7 +52,8 @@ describe('TaskSummaryComponent', () => {
         DataflowDurationPipe,
         AppTypeComponent,
         TaskStatusComponent,
-        StreamDslComponent
+        StreamDslComponent,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/tasks/task-execution/task-execution.component.html

@@ -88,5 +88,5 @@ <h1>Task Execution Details - Execution ID: {{ taskExecution.executionId }}</h1>
 
 </div>
 <ng-template #loading>
-  <div>Loading...</div>
+  <app-loader></app-loader>
 </ng-template>

ui/src/app/tasks/task-execution/task-execution.component.spec.ts

@@ -14,6 +14,7 @@ import { DataflowDateTimePipe } from '../../shared/pipes/dataflow-date-time.pipe
 import { DataflowDurationPipe } from '../../shared/pipes/dataflow-duration.pipe';
 import * as moment from 'moment';
 import { TaskExecutionComponent } from './task-execution.component';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 describe('TaskExecutionsDetailsComponent', () => {
   let component: TaskExecutionComponent;
@@ -57,7 +58,8 @@ describe('TaskExecutionsDetailsComponent', () => {
       declarations: [
         TaskExecutionComponent,
         DataflowDateTimePipe,
-        DataflowDurationPipe
+        DataflowDurationPipe,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,

ui/src/app/tasks/task-launch/task-launch.component.html

@@ -117,5 +117,6 @@ <h2>Task Properties</h2>
   </form>
 </div>
 <ng-template #loading>
-  <div>Loading...</div>
+  <app-loader></app-loader>
 </ng-template>
+

ui/src/app/tasks/task-launch/task-launch.component.spec.ts

@@ -13,6 +13,7 @@ import { BusyService } from '../../shared/services/busy.service';
 import { MockTasksService } from '../../tests/mocks/tasks';
 import { TASK_DEFINITIONS } from '../../tests/mocks/mock-data';
 import { TaskLaunchComponent } from './task-launch.component';
+import { LoaderComponent } from '../../shared/components/loader/loader.component';
 
 /**
  * Test {@link TaskLaunchComponent}.
@@ -34,7 +35,8 @@ describe('TaskLaunchComponent', () => {
       declarations: [
         TaskLaunchComponent,
         DataflowDateTimePipe,
-        DataflowDurationPipe
+        DataflowDurationPipe,
+        LoaderComponent
       ],
       imports: [
         NgBusyModule,