You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2018/04/09 07:38:13 UTC

incubator-griffin git commit: [GRIFFIN-111] UI--add progress indicator in every http request

Repository: incubator-griffin
Updated Branches:
  refs/heads/master c21d16ec4 -> 8633476ea


[GRIFFIN-111] UI--add progress indicator in every http request

Author: jenny <su...@gmail.com>

Closes #251 from icesmartjuan/juanli_ui_improvement.


Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/8633476e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/8633476e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/8633476e

Branch: refs/heads/master
Commit: 8633476ea1d4ec53ac2dfdc213a1c8cc432d7076
Parents: c21d16e
Author: jenny <su...@gmail.com>
Authored: Mon Apr 9 15:37:46 2018 +0800
Committer: Lionel Liu <bh...@163.com>
Committed: Mon Apr 9 15:37:46 2018 +0800

----------------------------------------------------------------------
 .gitignore                                      |  2 +
 ui/angular/src/app/app.component.html           |  1 +
 ui/angular/src/app/app.component.ts             |  5 +-
 ui/angular/src/app/app.module.ts                | 18 +++++--
 .../src/app/dataasset/dataasset.component.html  |  8 ++--
 .../src/app/dataasset/dataasset.component.ts    |  2 +-
 ui/angular/src/app/health/health.component.ts   |  2 +-
 .../app/job/create-job/create-job.component.ts  |  3 +-
 ui/angular/src/app/job/job.component.html       |  4 +-
 ui/angular/src/app/loader/loader.component.css  | 24 ++++++++++
 ui/angular/src/app/loader/loader.component.html | 21 ++++++++
 .../src/app/loader/loader.component.spec.ts     | 43 +++++++++++++++++
 ui/angular/src/app/loader/loader.component.ts   | 28 +++++++++++
 .../src/app/loader/loader.service.spec.ts       | 43 +++++++++++++++++
 ui/angular/src/app/loader/loader.service.ts     | 38 +++++++++++++++
 ui/angular/src/app/loader/loader.state.ts       | 21 ++++++++
 ui/angular/src/app/login/login.component.ts     |  2 +-
 .../measure/create-measure/ac/ac.component.ts   |  2 +-
 .../create-measure/create-measure.component.ts  |  2 +-
 .../src/app/measure/measure.component.html      |  4 +-
 ui/angular/src/app/service/http.service.spec.ts | 33 +++++++++++++
 ui/angular/src/app/service/http.service.ts      | 50 ++++++++++++++++++++
 ui/angular/src/app/service/service.service.ts   |  4 +-
 ui/angular/src/index.html                       |  4 +-
 24 files changed, 342 insertions(+), 22 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/.gitignore
----------------------------------------------------------------------
diff --git a/.gitignore b/.gitignore
index 58525d9..b43a694 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,5 @@ derby.log
 metastore_db
 
 measure/src/test/test_scala/*
+
+.vscode

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/app.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.html b/ui/angular/src/app/app.component.html
index 27eb941..da8f7e2 100644
--- a/ui/angular/src/app/app.component.html
+++ b/ui/angular/src/app/app.component.html
@@ -63,6 +63,7 @@ under the License.
       <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 30px; z-index:99" (click)="goback();"><span style="margin-bottom:20px;">Back</span></button>
       <!-- main content goes here-->
       <div id="mainWindow" (window:resize)="onResize($event)" class="row y-scrollable" ng-view style="padding-right: 10px;">
+        <app-loader></app-loader>
         <router-outlet></router-outlet>
       </div>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/app.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.ts b/ui/angular/src/app/app.component.ts
index f3a916b..f80a3be 100644
--- a/ui/angular/src/app/app.component.ts
+++ b/ui/angular/src/app/app.component.ts
@@ -16,11 +16,12 @@ under the License.
 */
 import { Component, Directive, ViewContainerRef, OnInit, AfterViewChecked } from "@angular/core";
 import { Router } from "@angular/router";
-import { HttpClient } from "@angular/common/http";
+import { XHRBackend } from '@angular/http';
 import * as $ from "jquery";
 import { ServiceService } from "./service/service.service";
 import { UserService } from "./service/user.service";
 import { Location, LocationStrategy, HashLocationStrategy } from "@angular/common";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
   selector: "app-root",
@@ -45,7 +46,7 @@ export class AppComponent implements AfterViewChecked, OnInit {
   }
   constructor(
     private router: Router,
-    private http: HttpClient,
+    private http:HttpClient,
     private location: Location,
     public serviceService: ServiceService,
     public userService: UserService

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/app.module.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.module.ts b/ui/angular/src/app/app.module.ts
index d2b5995..4815e55 100644
--- a/ui/angular/src/app/app.module.ts
+++ b/ui/angular/src/app/app.module.ts
@@ -19,7 +19,7 @@ under the License.
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule} from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { HttpClientModule} from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTableModule} from "angular2-datatable";
 import { TreeModule } from 'angular-tree-component';
 import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -49,6 +49,9 @@ import { RuleComponent } from './measure/create-measure/pr/rule/rule.component';
 import { TruncatePipe} from './sidebar/truncate.pipe';
 import { ConfigurationComponent } from './measure/create-measure/configuration/configuration.component';
 import { NouisliderModule } from 'ng2-nouislider';
+import { HttpService } from './service/http.service';
+import {LoaderService} from './loader/loader.service';
+import { LoaderComponent } from './loader/loader.component';
 
 
 const appRoutes: Routes = [
@@ -141,7 +144,8 @@ const appRoutes: Routes = [
     LoginComponent,
     RuleComponent,
     TruncatePipe,
-    ConfigurationComponent
+    ConfigurationComponent,
+    LoaderComponent
   ],
   imports: [
     BrowserModule,
@@ -161,7 +165,15 @@ const appRoutes: Routes = [
     MatNativeDateModule,
     MatDatepickerModule
   ],
-  providers: [],
+  exports: [
+    LoaderComponent
+],
+  providers: [ LoaderService,
+    {
+    provide: HTTP_INTERCEPTORS,
+    useClass: HttpService,
+    multi: true,
+  }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/dataasset/dataasset.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.html b/ui/angular/src/app/dataasset/dataasset.component.html
index de3f25d..c209537 100644
--- a/ui/angular/src/app/dataasset/dataasset.component.html
+++ b/ui/angular/src/app/dataasset/dataasset.component.html
@@ -23,9 +23,9 @@ under the License.
         <td colspan="7" style="text-align:center;display: none" id="message">
           No content.
         </td>
-        <td class="icon">
+        <!-- <td class="icon">
           <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-        </td>
+        </td> -->
       </tr>
     </table>
     <table class="table table-striped reco" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="5">
@@ -43,9 +43,9 @@ under the License.
           <td *ngIf="!results" colspan="7" style="text-align:center">
             No content.
           </td>
-          <td class="icon">
+          <!-- <td class="icon">
             <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-          </td>
+          </td> -->
         </tr>
       </tbody>
       <tbody *ngFor="let row of mf.data" style="word-break:break-all;">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/dataasset/dataasset.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.ts b/ui/angular/src/app/dataasset/dataasset.component.ts
index c675703..ee3384a 100644
--- a/ui/angular/src/app/dataasset/dataasset.component.ts
+++ b/ui/angular/src/app/dataasset/dataasset.component.ts
@@ -17,7 +17,7 @@ specific language governing permissions and limitations
 under the License.
 */
 import { Component, OnInit } from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from "@angular/common/http";
 import * as $ from 'jquery';
 import {ServiceService} from '../service/service.service';
 

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/health/health.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts
index 622a0ec..cd62ccc 100644
--- a/ui/angular/src/app/health/health.component.ts
+++ b/ui/angular/src/app/health/health.component.ts
@@ -29,7 +29,7 @@ import * as $ from "jquery";
 })
 export class HealthComponent implements OnInit {
   constructor(
-    private http: HttpClient,
+    private http:HttpClient,
     private router: Router,
     public serviceService: ServiceService
   ) {}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/job/create-job/create-job.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/create-job/create-job.component.ts b/ui/angular/src/app/job/create-job/create-job.component.ts
index 4ec7c57..61d1947 100644
--- a/ui/angular/src/app/job/create-job/create-job.component.ts
+++ b/ui/angular/src/app/job/create-job/create-job.component.ts
@@ -28,9 +28,10 @@ import { AngularMultiSelectModule } from "angular2-multiselect-dropdown/angular2
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster";
 import * as $ from "jquery";
-import { HttpClient, HttpParams } from "@angular/common/http";
+import { HttpParams } from "@angular/common/http";
 import { Router } from "@angular/router";
 import { NouisliderModule } from "ng2-nouislider";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
   selector: "app-create-job",

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/job/job.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html
index 1480445..b78a3c7 100644
--- a/ui/angular/src/app/job/job.component.html
+++ b/ui/angular/src/app/job/job.component.html
@@ -41,9 +41,9 @@ under the License.
           <td colspan="7" style="text-align:center;display:none">
             No content!
           </td>
-          <td class="icon" style="border-top-style:none">
+          <!-- <td class="icon" style="border-top-style:none">
             <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-          </td>
+          </td> -->
         </tr>
       </tbody>
       <tbody *ngFor="let row of mf.data">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.component.css b/ui/angular/src/app/loader/loader.component.css
new file mode 100644
index 0000000..9eb55e5
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.component.css
@@ -0,0 +1,24 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+.icon {
+    color: #fff;
+    position: absolute;
+    left: 50%;
+    padding-top: 20%;
+  }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.component.html b/ui/angular/src/app/loader/loader.component.html
new file mode 100644
index 0000000..423e1bd
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.component.html
@@ -0,0 +1,21 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<div class="icon" *ngIf="show">
+  <span class="fa fa-spinner fa-spin fa-4x fa-fw"></span>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.component.spec.ts b/ui/angular/src/app/loader/loader.component.spec.ts
new file mode 100644
index 0000000..af609a5
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.component.spec.ts
@@ -0,0 +1,43 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('CreateMeasureComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.component.ts b/ui/angular/src/app/loader/loader.component.ts
new file mode 100644
index 0000000..801f97d
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Subscription } from "rxjs/Subscription";
+import { LoaderService } from "./loader.service";
+import { LoadingState } from "./loader.state";
+
+@Component({
+    selector: "app-loader",
+    templateUrl: "./loader.component.html",
+    styleUrls: ["./loader.component.css"]
+})
+export class LoaderComponent implements OnInit {
+    show = false;
+    private subscription: Subscription;
+    constructor(
+        private loaderService: LoaderService
+    ) { }
+
+    ngOnInit() { 
+        this.subscription = this.loaderService.LoadingState
+            .subscribe((state: LoadingState) => {
+                this.show = state.show;
+            });
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.service.spec.ts b/ui/angular/src/app/loader/loader.service.spec.ts
new file mode 100644
index 0000000..8d0cd3a
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.service.spec.ts
@@ -0,0 +1,43 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderService } from './loader.service';
+
+describe('CreateMeasureComponent', () => {
+  let component: LoaderService;
+  let fixture: ComponentFixture<LoaderService>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderService ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderService);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.service.ts b/ui/angular/src/app/loader/loader.service.ts
new file mode 100644
index 0000000..acd4eb5
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.service.ts
@@ -0,0 +1,38 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Injectable } from "@angular/core";
+import { Subject } from "rxjs/Subject";
+import { LoadingState } from "./loader.state";
+
+@Injectable()
+export class LoaderService {
+
+    private loaderSubject = new Subject<LoadingState>();
+    LoadingState = this.loaderSubject.asObservable();
+
+    constructor() { }
+
+    show() { 
+        this.loaderSubject.next(<LoadingState>{show: true});
+    }
+
+    hide() {
+        this.loaderSubject.next(<LoadingState>{show: false});
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/loader/loader.state.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/loader/loader.state.ts b/ui/angular/src/app/loader/loader.state.ts
new file mode 100644
index 0000000..fc56233
--- /dev/null
+++ b/ui/angular/src/app/loader/loader.state.ts
@@ -0,0 +1,21 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+export interface LoadingState {
+    show: boolean;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/login/login.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/login/login.component.ts b/ui/angular/src/app/login/login.component.ts
index 0c8d664..6c80431 100644
--- a/ui/angular/src/app/login/login.component.ts
+++ b/ui/angular/src/app/login/login.component.ts
@@ -20,8 +20,8 @@ import { Component, OnInit } from "@angular/core";
 import { ServiceService } from "../service/service.service";
 import { UserService } from "../service/user.service";
 import { Router } from "@angular/router";
-import { HttpClient } from "@angular/common/http";
 import { LocationStrategy, HashLocationStrategy } from "@angular/common";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
   selector: "app-login",

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
index 469b3ca..ccedb38 100644
--- a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
@@ -24,8 +24,8 @@ import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from "angular-tree-c
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ToasterModule, ToasterService } from "angular2-toaster";
 import * as $ from "jquery";
-import { HttpClient } from "@angular/common/http";
 import { Router } from "@angular/router";
+import { HttpClient } from "@angular/common/http";
 
 class node {
   name: string;

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/measure/create-measure/create-measure.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.ts b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
index f2a60c0..9166e22 100644
--- a/ui/angular/src/app/measure/create-measure/create-measure.component.ts
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
@@ -24,7 +24,7 @@ import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from "angular-tree-c
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster";
 import * as $ from "jquery";
-import { HttpClient } from "@angular/common/http";
+import { HttpService } from '../../service/http.service';
 import { Router } from "@angular/router";
 
 @Component({

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/measure/measure.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/measure.component.html b/ui/angular/src/app/measure/measure.component.html
index cde2d49..9ac777e 100644
--- a/ui/angular/src/app/measure/measure.component.html
+++ b/ui/angular/src/app/measure/measure.component.html
@@ -37,9 +37,9 @@ under the License.
       <tbody>
         <tr *ngIf="!results">
           <td colspan="7" style="text-align:center;display:none">No content!</td>
-          <td class="icon" style="border-top-style:none">
+          <!-- <td class="icon" style="border-top-style:none">
             <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-          </td>
+          </td> -->
         </tr>
         <tr *ngFor="let row of mf.data">
           <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/service/http.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/http.service.spec.ts b/ui/angular/src/app/service/http.service.spec.ts
new file mode 100644
index 0000000..ddbe59b
--- /dev/null
+++ b/ui/angular/src/app/service/http.service.spec.ts
@@ -0,0 +1,33 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { TestBed, inject } from '@angular/core/testing';
+
+import { HttpService } from './http.service';
+
+describe('ServiceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HttpService]
+    });
+  });
+
+  it('should be created', inject([HttpService], (service: HttpService) => {
+    expect(service).toBeTruthy();
+  }));
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/service/http.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/http.service.ts b/ui/angular/src/app/service/http.service.ts
new file mode 100644
index 0000000..52ce666
--- /dev/null
+++ b/ui/angular/src/app/service/http.service.ts
@@ -0,0 +1,50 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Observable } from "rxjs/Observable";
+import 'rxjs/add/operator/do';
+import { LoaderService } from "./../loader/loader.service";
+
+@Injectable()
+export class HttpService implements HttpInterceptor {
+
+    constructor(private loaderService: LoaderService) {
+    }
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  
+        this.showLoading();
+        return next.handle(req).do((event: HttpEvent<any>) => {           
+            if (event instanceof HttpResponse) {               
+                this.hideLoading();
+            }
+        }, (err: any) => {            
+            this.hideLoading();
+        });
+    }
+
+    private showLoading(): void {
+        this.loaderService.show();
+    }
+
+    private hideLoading(): void {
+        this.loaderService.hide();
+    }
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/app/service/service.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts
index 4f9e39b..ff15e1e 100644
--- a/ui/angular/src/app/service/service.service.ts
+++ b/ui/angular/src/app/service/service.service.ts
@@ -21,9 +21,9 @@ import { Injectable } from "@angular/core";
 @Injectable()
 export class ServiceService {
   constructor() {}
-  //public BACKEND_SERVER = 'http://10.65.145.88:38080';
+  public BACKEND_SERVER = 'http://10.149.247.90:38080';
   // public BACKEND_SERVER = 'http://localhost:8080';
-  public BACKEND_SERVER = "";
+  //public BACKEND_SERVER = "";
   public API_ROOT_PATH = "/api/v1";
 
   public config = {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/8633476e/ui/angular/src/index.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/index.html b/ui/angular/src/index.html
index 0cd5c79..df88763 100644
--- a/ui/angular/src/index.html
+++ b/ui/angular/src/index.html
@@ -36,6 +36,8 @@ under the License.
 </head>
 <body>
 
-<app-root></app-root>
+      
+      <app-root></app-root>
+
 </body>
 </html>