[helix-front] Upgrade Angular to 5; Material to 5; ngx-datatable to 11
Project: http://git-wip-us.apache.org/repos/asf/helix/repo Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/b3ecd2a7 Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/b3ecd2a7 Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/b3ecd2a7 Branch: refs/heads/master Commit: b3ecd2a7f0d054c6a5b8586d65df75de1ea3049c Parents: 52d3bb8 Author: Vivo Xu <[email protected]> Authored: Thu Dec 21 15:38:07 2017 -0800 Committer: Junkai Xue <[email protected]> Committed: Wed Jan 24 18:33:11 2018 -0800 ---------------------------------------------------------------------- helix-front/client/app/app.component.html | 16 +- helix-front/client/app/app.component.spec.ts | 4 +- helix-front/client/app/app.module.ts | 4 - .../helix-list/helix-list.component.html | 18 +- .../helix-list/helix-list.component.spec.ts | 8 +- .../cluster-detail.component.html | 98 +- .../cluster-detail.component.scss | 6 +- .../cluster-detail/cluster-detail.component.ts | 4 +- .../cluster-list/cluster-list.component.html | 26 +- .../cluster-list/cluster-list.component.ts | 6 +- .../client/app/cluster/cluster.component.html | 12 +- .../client/app/cluster/cluster.component.scss | 2 +- .../client/app/cluster/cluster.module.ts | 3 - .../config-detail/config-detail.component.scss | 19 - .../controller-detail.component.html | 20 +- .../controller-detail.component.scss | 4 +- .../client/app/controller/controller.module.ts | 4 - helix-front/client/app/core/settings.ts | 3 +- .../history-list/history-list.component.html | 12 +- .../history-list/history-list.component.scss | 4 +- .../history-list/history-list.component.ts | 4 +- .../client/app/history/history.module.ts | 8 +- .../instance-detail.component.html | 44 +- .../instance-detail.component.scss | 2 - .../instance-list/instance-list.component.html | 10 +- .../instance-list/instance-list.component.ts | 4 +- .../client/app/instance/instance.module.ts | 4 - .../partition-detail.component.html | 12 +- .../partition-detail.component.ts | 4 +- .../partition-list.component.html | 14 +- .../partition-list/partition-list.component.ts | 4 +- .../resource-detail-for-instance.component.html | 7 +- .../resource-detail-for-instance.component.scss | 4 +- .../resource-detail.component.html | 44 +- .../resource-detail.component.scss | 2 - .../resource-list/resource-list.component.html | 14 +- .../resource-list/resource-list.component.ts | 9 +- .../client/app/resource/resource.module.ts | 4 - .../shared/data-table/data-table.component.html | 8 +- .../data-table/data-table.component.spec.ts | 6 +- .../shared/data-table/data-table.component.ts | 4 +- .../detail-header/detail-header.component.html | 6 +- .../detail-header/detail-header.component.scss | 5 +- .../alert-dialog/alert-dialog.component.html | 4 +- .../alert-dialog/alert-dialog.component.ts | 4 +- .../confirm-dialog.component.html | 10 +- .../confirm-dialog/confirm-dialog.component.ts | 8 +- .../input-dialog/input-dialog.component.html | 20 +- .../input-dialog/input-dialog.component.ts | 8 +- .../disabled-label.component.scss | 2 +- helix-front/client/app/shared/helper.service.ts | 6 +- .../input-inline/input-inline.component.html | 12 +- .../key-value-pairs.component.scss | 2 + .../client/app/shared/material.module.ts | 66 + .../node-viewer/node-viewer.component.html | 102 +- .../node-viewer/node-viewer.component.scss | 4 +- .../node-viewer/node-viewer.component.spec.ts | 8 +- .../shared/node-viewer/node-viewer.component.ts | 5 +- helix-front/client/app/shared/shared.module.ts | 2 +- .../state-label/state-label.component.html | 2 +- .../workflow-detail.component.html | 16 +- .../workflow-list/workflow-list.component.html | 10 +- helix-front/client/styles.scss | 4 + helix-front/client/testing/testing.module.ts | 9 +- helix-front/client/tsconfig.app.json | 4 + helix-front/package-lock.json | 11094 +++++++++++++++++ helix-front/package.json | 43 +- 67 files changed, 11542 insertions(+), 399 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/app.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app.component.html b/helix-front/client/app/app.component.html index f10f7dd..87be9e4 100644 --- a/helix-front/client/app/app.component.html +++ b/helix-front/client/app/app.component.html @@ -1,22 +1,22 @@ <section class="app" fxLayout="column" fxFill> - <md-toolbar *ngIf="headerEnabled" class="header mat-elevation-z7" color="primary"> - <button md-icon-button + <mat-toolbar *ngIf="headerEnabled" class="header mat-elevation-z7" color="primary"> + <button mat-icon-button *ngIf="isNarrowView" (click)="sidenav.open()"> - <md-icon>menu</md-icon> + <mat-icon>menu</mat-icon> </button> <h2 routerLink="/">Helix</h2> <span fxFlex="1 1 auto"></span> - <a md-button> - <md-icon>person</md-icon> + <a mat-button> + <mat-icon>person</mat-icon> {{ currentUser | async }} </a> - </md-toolbar> - <md-progress-bar *ngIf="isLoading" mode="indeterminate" [ngClass]="{'no-header': !headerEnabled}"></md-progress-bar> + </mat-toolbar> + <mat-progress-bar *ngIf="isLoading" mode="indeterminate" [ngClass]="{'no-header': !headerEnabled}"></mat-progress-bar> <section class="main-container" [ngClass]="{'no-header': !headerEnabled}"> <router-outlet></router-outlet> </section> <section *ngIf="footerEnabled" class="footer mat-elevation-z7" fxLayout="row" fxLayoutAlign="center center"> - <span>© 2017 Helix. All rights reserved.</span> + <span>© 2018 Helix. All rights reserved.</span> </section> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/app.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app.component.spec.ts b/helix-front/client/app/app.component.spec.ts index 030b256..2ac2d90 100644 --- a/helix-front/client/app/app.component.spec.ts +++ b/helix-front/client/app/app.component.spec.ts @@ -39,10 +39,10 @@ describe('AppComponent', () => { expect(app.footerEnabled).toBeDefined(); })); - xit('should render title in a md-toolbar', async(() => { + xit('should render title in a mat-toolbar', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('md-toolbar').textContent).toContain('Helix'); + expect(compiled.querySelector('mat-toolbar').textContent).toContain('Helix'); })); }); http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/app.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app.module.ts b/helix-front/client/app/app.module.ts index 2c66e5c..0b5fd25 100644 --- a/helix-front/client/app/app.module.ts +++ b/helix-front/client/app/app.module.ts @@ -2,8 +2,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; -import { FlexLayoutModule } from '@angular/flex-layout'; -import { MaterialModule } from '@angular/material'; import { Angulartics2Module, Angulartics2Piwik } from 'angulartics2'; @@ -32,8 +30,6 @@ import { ChooserModule } from './chooser/chooser.module'; Angulartics2Module.forRoot([ Angulartics2Piwik ]), CoreModule, SharedModule, - FlexLayoutModule, - MaterialModule, ClusterModule, ConfigurationModule, InstanceModule, http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/chooser/helix-list/helix-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/chooser/helix-list/helix-list.component.html b/helix-front/client/app/chooser/helix-list/helix-list.component.html index d042c51..e8df780 100644 --- a/helix-front/client/app/chooser/helix-list/helix-list.component.html +++ b/helix-front/client/app/chooser/helix-list/helix-list.component.html @@ -1,15 +1,15 @@ -<md-card *ngFor="let group of keys(groups)"> - <md-card-header> - <md-card-title>{{ group }}</md-card-title> - </md-card-header> - <md-card-content> +<mat-card *ngFor="let group of keys(groups)"> + <mat-card-header> + <mat-card-title>{{ group }}</mat-card-title> + </mat-card-header> + <mat-card-content> <section *ngFor="let section of groups[group]" class="section"> <a *ngFor="let helix of keys(section)" - md-button + mat-button [routerLink]="['/', group + '.' + helix]"> - <md-icon>group_work</md-icon> + <mat-icon>group_work</mat-icon> {{ helix }} </a> </section> - </md-card-content> -</md-card> + </mat-card-content> +</mat-card> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts b/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts index 08d5161..6d5c7a7 100644 --- a/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts +++ b/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts @@ -1,9 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { MaterialModule } from '@angular/material'; -import { RouterTestingModule } from '@angular/router/testing'; -import { HttpModule } from '@angular/http'; +import { TestingModule } from '../../../testing/testing.module'; import { HelixListComponent } from './helix-list.component'; import { ChooserService } from '../shared/chooser.service'; @@ -14,9 +12,7 @@ describe('HelixListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MaterialModule, - RouterTestingModule, - HttpModule + TestingModule ], declarations: [ HelixListComponent ], providers: [ ChooserService ], http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.html b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.html index fe9091a..5b8a78c 100644 --- a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.html +++ b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.html @@ -1,54 +1,56 @@ -<section class="cluster-detail"> - <section *ngIf="clusterName"> - <md-toolbar class="mat-elevation-z1"> +<section *ngIf="clusterName" class="cluster-detail" fxLayout="column" fxFill> + <mat-toolbar class="mat-elevation-z1" fxFlex="none"> + <mat-toolbar-row> <hi-detail-header [cluster]="clusterName"></hi-detail-header> <hi-disabled-label *ngIf="!cluster?.enabled" text="DISABLED"></hi-disabled-label> - <md-toolbar-row class="information"> - <md-spinner *ngIf="isLoading"></md-spinner> - <h6 *ngIf="!isLoading">Controller: - <a md-button color="accent" routerLink="controller">{{ cluster.controller }}</a> - </h6> - <span fxFlex="1 1 auto"></span> - <button md-mini-fab *ngIf="can" [mdMenuTriggerFor]="menu"> - <md-icon>menu</md-icon> + </mat-toolbar-row> + <mat-toolbar-row class="information"> + <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner> + <h6 *ngIf="!isLoading">Controller: + <a mat-button color="accent" routerLink="controller">{{ cluster.controller }}</a> + </h6> + <span fxFlex="1 1 auto"></span> + <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu"> + <mat-icon>menu</mat-icon> + </button> + <mat-menu #menu="matMenu"> + <button mat-menu-item *ngIf="cluster?.controller == 'No Lead Controller!'" (click)="activateCluster()"> + <mat-icon>settings_input_antenna</mat-icon> + <span>Activate this Cluster</span> </button> - <md-menu #menu="mdMenu"> - <button md-menu-item *ngIf="cluster?.controller == 'No Lead Controller!'" (click)="activateCluster()"> - <md-icon>settings_input_antenna</md-icon> - <span>Activate this Cluster</span> - </button> - <button md-menu-item *ngIf="cluster?.enabled" (click)="disableCluster()"> - <md-icon>not_interested</md-icon> - <span>Disable this Cluster</span> - </button> - <button md-menu-item *ngIf="!cluster?.enabled" (click)="enableCluster()"> - <md-icon>play_circle_outline</md-icon> - <span>Enable this Cluster</span> - </button> - <button md-menu-item *ngIf="false" (click)="addResource()"> - <md-icon>note_add</md-icon> - <span>Add a Resource</span> - </button> - <button md-menu-item (click)="addInstance()"> - <md-icon>add_circle</md-icon> - <span>Add an Instance</span> - </button> - <button md-menu-item *ngIf="false" (click)="deleteCluster()" disabled> - <md-icon>delete</md-icon> - <span>DELETE this Cluster</span> - </button> - </md-menu> - </md-toolbar-row> - </md-toolbar> - <nav md-tab-nav-bar> - <a md-tab-link - *ngFor="let tabLink of tabLinks" - [routerLink]="tabLink.link" - routerLinkActive #rla="routerLinkActive" - [active]="rla.isActive"> - {{ tabLink.label }} - </a> - </nav> + <button mat-menu-item *ngIf="cluster?.enabled" (click)="disableCluster()"> + <mat-icon>not_interested</mat-icon> + <span>Disable this Cluster</span> + </button> + <button mat-menu-item *ngIf="!cluster?.enabled" (click)="enableCluster()"> + <mat-icon>play_circle_outline</mat-icon> + <span>Enable this Cluster</span> + </button> + <button mat-menu-item *ngIf="false" (click)="addResource()"> + <mat-icon>note_add</mat-icon> + <span>Add a Resource</span> + </button> + <button mat-menu-item (click)="addInstance()"> + <mat-icon>add_circle</mat-icon> + <span>Add an Instance</span> + </button> + <button mat-menu-item *ngIf="false" (click)="deleteCluster()" disabled> + <mat-icon>delete</mat-icon> + <span>DELETE this Cluster</span> + </button> + </mat-menu> + </mat-toolbar-row> + </mat-toolbar> + <nav mat-tab-nav-bar> + <a mat-tab-link + *ngFor="let tabLink of tabLinks" + [routerLink]="tabLink.link" + routerLinkActive #rla="routerLinkActive" + [active]="rla.isActive"> + {{ tabLink.label }} + </a> + </nav> + <section fxFlex> <router-outlet></router-outlet> </section> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.scss b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.scss index 41884b5..d16a356 100644 --- a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.scss +++ b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.scss @@ -1,5 +1,7 @@ .mat-spinner { - width: 30px; - height: 30px; margin: 0 20px; } + +.mat-toolbar h6 { + font-size: 14px; +} http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts index e0db1b5..1308b4d 100644 --- a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts +++ b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { MdDialog } from '@angular/material'; +import { MatDialog } from '@angular/material'; import { Cluster } from '../shared/cluster.model'; import { HelperService } from '../../shared/helper.service'; @@ -32,7 +32,7 @@ export class ClusterDetailComponent implements OnInit { constructor( protected route: ActivatedRoute, protected router: Router, - protected dialog: MdDialog, + protected dialog: MatDialog, protected helperService: HelperService, protected clusterService: ClusterService, protected instanceService: InstanceService http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster-list/cluster-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.html b/helix-front/client/app/cluster/cluster-list/cluster-list.component.html index 7df5531..c32b1b8 100644 --- a/helix-front/client/app/cluster/cluster-list/cluster-list.component.html +++ b/helix-front/client/app/cluster/cluster-list/cluster-list.component.html @@ -1,29 +1,29 @@ <section class="cluster-list"> <section *ngIf="isLoading" fxLayout="row" fxLayoutAlign="center center"> - <md-spinner> + <mat-spinner> Loading all clusters ... - </md-spinner> + </mat-spinner> </section> - <md-nav-list *ngIf="!isLoading && !errorMessage"> - <button md-button routerLink="/"> - <md-icon>arrow_back</md-icon> Back to Index + <mat-nav-list *ngIf="!isLoading && !errorMessage"> + <button mat-button routerLink="/"> + <mat-icon>arrow_back</mat-icon> Back to Index </button> - <button md-mini-fab *ngIf="can" (click)="createCluster()"> - <md-icon>add</md-icon> + <button mat-mini-fab *ngIf="can" (click)="createCluster()"> + <mat-icon>add</mat-icon> </button> - <h3 md-subheader>Clusters ({{ clusters.length }})</h3> + <h3 mat-subheader>Clusters ({{ clusters.length }})</h3> <a *ngFor="let cluster of clusters" - md-list-item + mat-list-item [routerLink]="[cluster.name]" routerLinkActive="cluster-list-item-selected"> - <md-icon md-list-icon>blur_circular</md-icon> - <h4 md-line>{{ cluster.name }}</h4> + <mat-icon mat-list-icon>blur_circular</mat-icon> + <h4 mat-line>{{ cluster.name }}</h4> </a> <div *ngIf="clusters.length == 0" class="empty"> There's no cluster here. - <a md-button *ngIf="can" (click)="createCluster()">Create one?</a> + <a mat-button *ngIf="can" (click)="createCluster()">Create one?</a> </div> - </md-nav-list> + </mat-nav-list> <section class="error-message" *ngIf="errorMessage"> {{ errorMessage }} </section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts b/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts index f9a2321..35d0b92 100644 --- a/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts +++ b/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { MdDialog, MdSnackBar } from '@angular/material'; +import { MatDialog, MatSnackBar } from '@angular/material'; import { ClusterService } from '../shared/cluster.service'; import { Cluster } from '../shared/cluster.model'; @@ -20,8 +20,8 @@ export class ClusterListComponent implements OnInit { constructor( protected clusterService: ClusterService, - protected dialog: MdDialog, - protected snackBar: MdSnackBar + protected dialog: MatDialog, + protected snackBar: MatSnackBar ) { } ngOnInit() { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.html b/helix-front/client/app/cluster/cluster.component.html index 6f98d10..d1a31e8 100644 --- a/helix-front/client/app/cluster/cluster.component.html +++ b/helix-front/client/app/cluster/cluster.component.html @@ -1,11 +1,13 @@ -<md-sidenav-container fxFill> - <md-sidenav +<mat-sidenav-container fxFill> + <mat-sidenav #sidenav [mode]="isNarrowView ? 'over' : 'side'" [opened]="!isNarrowView" [disableClose]="!isNarrowView" class="mat-elevation-z4"> <hi-cluster-list></hi-cluster-list> - </md-sidenav> - <router-outlet></router-outlet> -</md-sidenav-container> + </mat-sidenav> + <section fxFill> + <router-outlet></router-outlet> + </section> +</mat-sidenav-container> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.scss b/helix-front/client/app/cluster/cluster.component.scss index 5845753..3f4d819 100644 --- a/helix-front/client/app/cluster/cluster.component.scss +++ b/helix-front/client/app/cluster/cluster.component.scss @@ -1,4 +1,4 @@ -md-sidenav { +mat-sidenav { width: 25vw; min-width: 200px; } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/cluster/cluster.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.module.ts b/helix-front/client/app/cluster/cluster.module.ts index b58b4ae..02efb7f 100644 --- a/helix-front/client/app/cluster/cluster.module.ts +++ b/helix-front/client/app/cluster/cluster.module.ts @@ -1,8 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpModule } from '@angular/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import 'hammerjs'; import { SharedModule } from '../shared/shared.module'; import { ClusterService } from './shared/cluster.service'; @@ -15,7 +13,6 @@ import { ClusterComponent } from './cluster.component'; imports: [ CommonModule, HttpModule, - BrowserAnimationsModule, SharedModule ], declarations: [ http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/configuration/config-detail/config-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/configuration/config-detail/config-detail.component.scss b/helix-front/client/app/configuration/config-detail/config-detail.component.scss index 5863640..e69de29 100644 --- a/helix-front/client/app/configuration/config-detail/config-detail.component.scss +++ b/helix-front/client/app/configuration/config-detail/config-detail.component.scss @@ -1,19 +0,0 @@ -@import '~@angular/material/theming'; -@import 'client/theme.scss'; - -.primary { - color: mat-color($hi-primary); -} - -md-input-container { - width: 300px; - padding: 10px 0 0 5px; -} - -md-card { - margin-bottom: 10px; -} - -ngx-datatable { - word-break: break-all; -} http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/controller/controller-detail/controller-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/controller/controller-detail/controller-detail.component.html b/helix-front/client/app/controller/controller-detail/controller-detail.component.html index 62a3674..7f5f2bf 100644 --- a/helix-front/client/app/controller/controller-detail/controller-detail.component.html +++ b/helix-front/client/app/controller/controller-detail/controller-detail.component.html @@ -1,18 +1,20 @@ <section> - <md-toolbar class="mat-elevation-z1"> - <hi-detail-header [cluster]="clusterName" [controller]="controller?.name"></hi-detail-header> - <md-toolbar-row class="information" fxLayout="row"> - <a md-mini-fab routerLink="../"><md-icon>arrow_back</md-icon></a> - <md-spinner *ngIf="isLoading"></md-spinner> + <mat-toolbar class="mat-elevation-z1"> + <mat-toolbar-row> + <hi-detail-header [cluster]="clusterName" [controller]="controller?.name"></hi-detail-header> + </mat-toolbar-row> + <mat-toolbar-row class="information" fxLayout="row"> + <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a> + <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner> <hi-key-value-pairs *ngIf="!isLoading" [obj]="controller"> <hi-key-value-pair name="Instance" prop="liveInstance"></hi-key-value-pair> <hi-key-value-pair name="Session ID" prop="sessionId"></hi-key-value-pair> <hi-key-value-pair name="Helix Version" prop="helixVersion"></hi-key-value-pair> </hi-key-value-pairs> - </md-toolbar-row> - </md-toolbar> - <nav md-tab-nav-bar> - <a md-tab-link + </mat-toolbar-row> + </mat-toolbar> + <nav mat-tab-nav-bar> + <a mat-tab-link routerLink="history" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive"> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/controller/controller-detail/controller-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/controller/controller-detail/controller-detail.component.scss b/helix-front/client/app/controller/controller-detail/controller-detail.component.scss index bef3b1f..cd18c9e 100644 --- a/helix-front/client/app/controller/controller-detail/controller-detail.component.scss +++ b/helix-front/client/app/controller/controller-detail/controller-detail.component.scss @@ -1,7 +1,5 @@ .information { - md-spinner { - width: 30px; - height: 30px; + .mat-spinner { margin: 0 20px; } } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/controller/controller.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/controller/controller.module.ts b/helix-front/client/app/controller/controller.module.ts index 1e1b92f..40b454a 100644 --- a/helix-front/client/app/controller/controller.module.ts +++ b/helix-front/client/app/controller/controller.module.ts @@ -1,7 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MaterialModule } from '@angular/material'; -import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; import { ControllerDetailComponent } from './controller-detail/controller-detail.component'; @@ -9,8 +7,6 @@ import { ControllerDetailComponent } from './controller-detail/controller-detail @NgModule({ imports: [ CommonModule, - RouterModule, - MaterialModule, SharedModule ], declarations: [ControllerDetailComponent] http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/core/settings.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/core/settings.ts b/helix-front/client/app/core/settings.ts index a68263c..cdb496f 100644 --- a/helix-front/client/app/core/settings.ts +++ b/helix-front/client/app/core/settings.ts @@ -1,5 +1,6 @@ export class Settings { - static readonly tableRowHeight = 40; + static readonly tableHeaderHeight = 40; + static readonly tableRowHeight = 50; static readonly helixAPI = '/api/helix'; static readonly userAPI = '/api/user'; } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/history/history-list/history-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/history/history-list/history-list.component.html b/helix-front/client/app/history/history-list/history-list.component.html index 6249ac5..5a333b9 100644 --- a/helix-front/client/app/history/history-list/history-list.component.html +++ b/helix-front/client/app/history/history-list/history-list.component.html @@ -3,21 +3,21 @@ #historyTable class="material" [loadingIndicator]="isLoading" - [headerHeight]="rowHeight" - rowHeight="auto" + [headerHeight]="headerHeight" + [rowHeight]="rowHeight" columnMode="force" [rows]="rows" [sorts]="sorts"> <ngx-datatable-column name="Date (GMT)" prop="date" [width]="240" [canAutoResize]="false"></ngx-datatable-column> <ngx-datatable-column name="Epoch Time" prop="time" [width]="200" [canAutoResize]="false"> <ng-template let-value="value" ngx-datatable-cell-template> - <span mdTooltip="Local time: {{ value | date: 'yMMMdjms' }}"> + <span matTooltip="Local time: {{ value | date: 'medium' }}"> {{ value }} </span> - <button md-icon-button - mdTooltip="Copy to clipboard" + <button mat-icon-button + matTooltip="Copy to clipboard" ngxClipboard [cbContent]="value"> - <md-icon>content_copy</md-icon> + <mat-icon>content_copy</mat-icon> </button> </ng-template> </ngx-datatable-column> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/history/history-list/history-list.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/history/history-list/history-list.component.scss b/helix-front/client/app/history/history-list/history-list.component.scss index 8171744..459c950 100644 --- a/helix-front/client/app/history/history-list/history-list.component.scss +++ b/helix-front/client/app/history/history-list/history-list.component.scss @@ -8,7 +8,7 @@ hi-history-list { color: mat-color($hi-primary); } - .datatable-body-cell { - line-height: 40px !important; + .mat-icon { + @include md-icon-size(20px); } } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/history/history-list/history-list.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/history/history-list/history-list.component.ts b/helix-front/client/app/history/history-list/history-list.component.ts index 008d72f..eee1ff7 100644 --- a/helix-front/client/app/history/history-list/history-list.component.ts +++ b/helix-front/client/app/history/history-list/history-list.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import * as _ from 'lodash'; +import { Settings } from '../../core/settings'; import { HistoryService } from '../shared/history.service'; import { History } from '../shared/history.model'; @@ -17,7 +18,8 @@ import { History } from '../shared/history.model'; export class HistoryListComponent implements OnInit { rows: History[]; - rowHeight = 40; + rowHeight = Settings.tableRowHeight; + headerHeight = Settings.tableHeaderHeight; isController: boolean; isLoading = true; sorts = [ http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/history/history.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/history/history.module.ts b/helix-front/client/app/history/history.module.ts index e0807b4..34fbf25 100644 --- a/helix-front/client/app/history/history.module.ts +++ b/helix-front/client/app/history/history.module.ts @@ -1,20 +1,18 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { MaterialModule } from '@angular/material'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { ClipboardModule } from 'ngx-clipboard'; +import { SharedModule } from '../shared/shared.module'; import { HistoryListComponent } from './history-list/history-list.component'; @NgModule({ imports: [ CommonModule, - RouterModule, - MaterialModule, NgxDatatableModule, - ClipboardModule + ClipboardModule, + SharedModule ], declarations: [HistoryListComponent] }) http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/instance/instance-detail/instance-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-detail/instance-detail.component.html b/helix-front/client/app/instance/instance-detail/instance-detail.component.html index 4e96fa0..bcdc12d 100644 --- a/helix-front/client/app/instance/instance-detail/instance-detail.component.html +++ b/helix-front/client/app/instance/instance-detail/instance-detail.component.html @@ -1,38 +1,40 @@ <section> - <md-toolbar class="mat-elevation-z1"> - <hi-detail-header [cluster]="clusterName" [instance]="instanceName"></hi-detail-header> - <hi-disabled-label *ngIf="!isLoading && !instance.liveInstance" text="OFFLINE"></hi-disabled-label> - <hi-disabled-label *ngIf="!isLoading && !instance.enabled" text="DISABLED"></hi-disabled-label> - <md-toolbar-row class="information"> - <a md-mini-fab routerLink="../"><md-icon>arrow_back</md-icon></a> - <md-spinner *ngIf="isLoading"></md-spinner> + <mat-toolbar class="mat-elevation-z1"> + <mat-toolbar-row> + <hi-detail-header [cluster]="clusterName" [instance]="instanceName"></hi-detail-header> + <hi-disabled-label *ngIf="!isLoading && !instance.liveInstance" text="OFFLINE"></hi-disabled-label> + <hi-disabled-label *ngIf="!isLoading && !instance.enabled" text="DISABLED"></hi-disabled-label> + </mat-toolbar-row> + <mat-toolbar-row class="information"> + <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a> + <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner> <hi-key-value-pairs *ngIf="!isLoading" [obj]="instance"> <hi-key-value-pair name="Instance" prop="liveInstance"></hi-key-value-pair> <hi-key-value-pair name="Session ID" prop="sessionId"></hi-key-value-pair> <hi-key-value-pair name="Helix Version" prop="helixVersion"></hi-key-value-pair> </hi-key-value-pairs> <span fxFlex="1 1 auto"></span> - <button md-mini-fab *ngIf="can" [mdMenuTriggerFor]="menu"> - <md-icon>menu</md-icon> + <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu"> + <mat-icon>menu</mat-icon> </button> - <md-menu #menu="mdMenu"> - <button md-menu-item *ngIf="instance && instance.enabled" (click)="disableInstance()"> - <md-icon>not_interested</md-icon> + <mat-menu #menu="matMenu"> + <button mat-menu-item *ngIf="instance && instance.enabled" (click)="disableInstance()"> + <mat-icon>not_interested</mat-icon> <span>Disable this Instance</span> </button> - <button md-menu-item *ngIf="instance && !instance.enabled" (click)="enableInstance()"> - <md-icon>play_circle_outline</md-icon> + <button mat-menu-item *ngIf="instance && !instance.enabled" (click)="enableInstance()"> + <mat-icon>play_circle_outline</mat-icon> <span>Enable this Instance</span> </button> - <button md-menu-item (click)="removeInstance()"> - <md-icon>delete</md-icon> + <button mat-menu-item (click)="removeInstance()"> + <mat-icon>delete</mat-icon> <span>REMOVE this Instance</span> </button> - </md-menu> - </md-toolbar-row> - </md-toolbar> - <nav md-tab-nav-bar> - <a md-tab-link + </mat-menu> + </mat-toolbar-row> + </mat-toolbar> + <nav mat-tab-nav-bar> + <a mat-tab-link *ngFor="let tabLink of tabLinks" [routerLink]="tabLink.link" routerLinkActive #rla="routerLinkActive" http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/instance/instance-detail/instance-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-detail/instance-detail.component.scss b/helix-front/client/app/instance/instance-detail/instance-detail.component.scss index 999ab59..1cbb18e 100644 --- a/helix-front/client/app/instance/instance-detail/instance-detail.component.scss +++ b/helix-front/client/app/instance/instance-detail/instance-detail.component.scss @@ -3,8 +3,6 @@ font-size: 14px; .mat-spinner { - width: 30px; - height: 30px; margin: 0 20px; } } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/instance/instance-list/instance-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-list/instance-list.component.html b/helix-front/client/app/instance/instance-list/instance-list.component.html index b9e5cb7..17a0301 100644 --- a/helix-front/client/app/instance/instance-list/instance-list.component.html +++ b/helix-front/client/app/instance/instance-list/instance-list.component.html @@ -2,7 +2,7 @@ <ngx-datatable #instancesTable class="material" - [headerHeight]="rowHeight" + [headerHeight]="headerHeight" [rowHeight]="rowHeight" columnMode="force" [footerHeight]="rowHeight" @@ -19,10 +19,10 @@ [draggable]="false" [canAutoResize]="false"> <ng-template let-row="row" ngx-datatable-cell-template> - <md-icon *ngIf="row.healthy" class="status-healthy">lens</md-icon> - <md-icon *ngIf="!row.healthy && row.enabled" class="status-not-healthy" mdTooltip="The instance is offline.">lens</md-icon> - <md-icon *ngIf="!row.healthy && row.liveInstance" class="status-not-healthy" mdTooltip="The instance is disabled.">lens</md-icon> - <md-icon *ngIf="!row.healthy && !row.enabled && !row.liveInstance" class="status-not-healthy" mdTooltip="The instance is offline and disabled.">lens</md-icon> + <mat-icon *ngIf="row.healthy" class="status-healthy">lens</mat-icon> + <mat-icon *ngIf="!row.healthy && row.enabled" class="status-not-healthy" matTooltip="The instance is offline.">lens</mat-icon> + <mat-icon *ngIf="!row.healthy && row.liveInstance" class="status-not-healthy" matTooltip="The instance is disabled.">lens</mat-icon> + <mat-icon *ngIf="!row.healthy && !row.enabled && !row.liveInstance" class="status-not-healthy" matTooltip="The instance is offline and disabled.">lens</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Name"> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/instance/instance-list/instance-list.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-list/instance-list.component.ts b/helix-front/client/app/instance/instance-list/instance-list.component.ts index 748dbc6..985e193 100644 --- a/helix-front/client/app/instance/instance-list/instance-list.component.ts +++ b/helix-front/client/app/instance/instance-list/instance-list.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; +import { Settings } from '../../core/settings'; import { InstanceService } from '../shared/instance.service'; import { HelperService } from '../../shared/helper.service'; @@ -14,7 +15,8 @@ export class InstanceListComponent implements OnInit { isLoading = true; clusterName: string; instances: any[]; - rowHeight = 40; + rowHeight = Settings.tableRowHeight; + headerHeight = Settings.tableHeaderHeight; sorts = [ { prop: 'liveInstance', dir: 'asc'}, { prop: 'name', dir: 'asc'} http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/instance/instance.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance.module.ts b/helix-front/client/app/instance/instance.module.ts index 7c85835..2332bb5 100644 --- a/helix-front/client/app/instance/instance.module.ts +++ b/helix-front/client/app/instance/instance.module.ts @@ -1,7 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { MaterialModule } from '@angular/material'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; @@ -13,8 +11,6 @@ import { InstanceDetailComponent } from './instance-detail/instance-detail.compo @NgModule({ imports: [ CommonModule, - RouterModule, - MaterialModule, NgxDatatableModule, SharedModule ], http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/partition-detail/partition-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-detail/partition-detail.component.html b/helix-front/client/app/resource/partition-detail/partition-detail.component.html index 372368f..de0e08c 100644 --- a/helix-front/client/app/resource/partition-detail/partition-detail.component.html +++ b/helix-front/client/app/resource/partition-detail/partition-detail.component.html @@ -1,7 +1,7 @@ <ngx-datatable class="material" - [headerHeight]="rowHeight" - rowHeight="auto" + [headerHeight]="headerHeight" + [rowHeight]="rowHeight" columnMode="force" [rows]="partition?.replicas"> <ngx-datatable-column @@ -9,8 +9,8 @@ [width]="80" [resizeable]="false" [canAutoResize]="false"> - <ng-template let-row="row" ngx-datatable-cell-template> - <strong>#{{ row.$$index + 1 }}</strong> + <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template> + <strong>#{{ rowIndex + 1 }}</strong> </ng-template> </ngx-datatable-column> <ngx-datatable-column @@ -18,10 +18,10 @@ prop="instanceName"> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} - <a md-icon-button + <a mat-icon-button color="accent" [routerLink]="['../../..', 'instances', value, 'resources']"> - <md-icon>arrow_forward</md-icon> + <mat-icon>arrow_forward</mat-icon> </a> </ng-template> </ngx-datatable-column> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/partition-detail/partition-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-detail/partition-detail.component.ts b/helix-front/client/app/resource/partition-detail/partition-detail.component.ts index b16ea9c..9c5623a 100644 --- a/helix-front/client/app/resource/partition-detail/partition-detail.component.ts +++ b/helix-front/client/app/resource/partition-detail/partition-detail.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'; +import { Settings } from '../../core/settings'; import { Partition, IReplica } from '../shared/resource.model'; @Component({ @@ -13,7 +14,8 @@ export class PartitionDetailComponent implements OnInit { @Input() clusterName: string; @Input() partition: Partition; - rowHeight = 40; + headerHeight = Settings.tableHeaderHeight; + rowHeight = Settings.tableRowHeight; constructor() { } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/partition-list/partition-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.html b/helix-front/client/app/resource/partition-list/partition-list.component.html index 238d5e8..041b97e 100644 --- a/helix-front/client/app/resource/partition-list/partition-list.component.html +++ b/helix-front/client/app/resource/partition-list/partition-list.component.html @@ -3,8 +3,8 @@ *ngIf="canAnalyse()" #partitionsTable class="material" - [headerHeight]="rowHeight" - rowHeight="auto" + [headerHeight]="headerHeight" + [rowHeight]="rowHeight" columnMode="force" [footerHeight]="rowHeight" [rows]="partitions" @@ -18,8 +18,8 @@ [sortable]="false" [draggable]="false" [canAutoResize]="false"> - <ng-template let-row="row" ngx-datatable-cell-template> - <md-icon>{{ row.$$expanded ? 'expand_more' : 'chevron_right' }}</md-icon> + <ng-template let-expanded="expanded" ngx-datatable-cell-template> + <mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column @@ -30,7 +30,7 @@ [draggable]="false" [canAutoResize]="false"> <ng-template let-value="value" ngx-datatable-cell-template> - <md-icon [ngClass]="value ? 'status-ready' : 'status-not-ready'">lens</md-icon> + <mat-icon [ngClass]="value ? 'status-ready' : 'status-not-ready'">lens</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Name"></ngx-datatable-column> @@ -40,7 +40,7 @@ [resizeable]="false" [canAutoResize]="false"> <ng-template let-value="value" ngx-datatable-cell-template> - <span *ngFor="let replica of value" [mdTooltip]="replica.instanceName"> + <span *ngFor="let replica of value" [matTooltip]="replica.instanceName"> <hi-state-label [state]="replica.externalView" [isReady]="replica.externalView && replica.externalView == replica.idealState"></hi-state-label> </span> </ng-template> @@ -78,7 +78,7 @@ </ngx-datatable-footer> </ngx-datatable> <div *ngIf="!canAnalyse()" class="message" fxLayout="column" fxLayoutAlign="center center"> - <md-spinner *ngIf="isLoading"></md-spinner> + <mat-spinner *ngIf="isLoading"></mat-spinner> <section *ngIf="!isLoading && getReasonWhyCannotAnalyse()" fxFlexFill> {{ getReasonWhyCannotAnalyse() }} </section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/partition-list/partition-list.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.ts b/helix-front/client/app/resource/partition-list/partition-list.component.ts index bee8e72..158da29 100644 --- a/helix-front/client/app/resource/partition-list/partition-list.component.ts +++ b/helix-front/client/app/resource/partition-list/partition-list.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { Settings } from '../../core/settings'; import { Partition, IReplica, Resource } from '../shared/resource.model'; import { HelperService } from '../../shared/helper.service'; import { ResourceService } from '../shared/resource.service'; @@ -19,7 +20,8 @@ export class PartitionListComponent implements OnInit { clusterName: string; resource: Resource; partitions: Partition[]; - rowHeight = 40; + headerHeight = Settings.tableHeaderHeight; + rowHeight = Settings.tableRowHeight; sorts = [ { prop: 'isReady', dir: 'asc'}, { prop: 'name', dir: 'asc'} http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.html b/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.html index d2e75d2..c2b3739 100644 --- a/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.html +++ b/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.html @@ -1,7 +1,7 @@ <section> - <md-spinner *ngIf="isLoading"></md-spinner> + <mat-spinner *ngIf="isLoading"></mat-spinner> <section *ngIf="!isLoading"> - <a md-button + <a mat-button color="accent" [routerLink]="['../../..', 'resources', resourceName]"> Other Partitions @@ -11,7 +11,6 @@ <hi-key-value-pair name="Session ID" prop="sessionId"></hi-key-value-pair> <hi-key-value-pair name="State Model" prop="stateModelDef"></hi-key-value-pair> <hi-key-value-pair name="State Model Factory Name" prop="stateModelFactoryName"></hi-key-value-pair> - <hi-key-value-pair name="Bucket Size" prop="bucketSize"></hi-key-value-pair> </hi-key-value-pairs> <ngx-datatable @@ -25,7 +24,7 @@ <ngx-datatable-column name="Partition" prop="name"></ngx-datatable-column> <ngx-datatable-column name="Current State" [width]="120" [canAutoResize]="false"> <ng-template let-row="row" ngx-datatable-cell-template> - <span [mdTooltip]="row.info"> + <span [matTooltip]="row.info"> <hi-state-label [state]="row.currentState"></hi-state-label> </span> </ng-template> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.scss b/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.scss index 417c834..66ebc48 100644 --- a/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.scss +++ b/helix-front/client/app/resource/resource-detail-for-instance/resource-detail-for-instance.component.scss @@ -1,8 +1,8 @@ -md-spinner { +mat-spinner { margin: 0 auto; } -[md-button] { +[mat-button] { float: right; } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-detail/resource-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.html b/helix-front/client/app/resource/resource-detail/resource-detail.component.html index 613ee82..82eca4c 100644 --- a/helix-front/client/app/resource/resource-detail/resource-detail.component.html +++ b/helix-front/client/app/resource/resource-detail/resource-detail.component.html @@ -1,11 +1,13 @@ <section> - <md-toolbar class="mat-elevation-z1"> - <hi-detail-header [cluster]="clusterName" [resource]="resourceName"></hi-detail-header> - <hi-disabled-label *ngIf="!isLoading && !resource.online" text="OFFLINE"></hi-disabled-label> - <hi-disabled-label *ngIf="!isLoading && !resource.enabled" text="DISABLED"></hi-disabled-label> - <md-toolbar-row class="information"> - <a md-mini-fab routerLink="../"><md-icon>arrow_back</md-icon></a> - <md-spinner *ngIf="isLoading"></md-spinner> + <mat-toolbar class="mat-elevation-z1"> + <mat-toolbar-row> + <hi-detail-header [cluster]="clusterName" [resource]="resourceName"></hi-detail-header> + <hi-disabled-label *ngIf="!isLoading && !resource.online" text="OFFLINE"></hi-disabled-label> + <hi-disabled-label *ngIf="!isLoading && !resource.enabled" text="DISABLED"></hi-disabled-label> + </mat-toolbar-row> + <mat-toolbar-row class="information"> + <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a> + <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner> <hi-key-value-pairs *ngIf="!isLoading" [obj]="resource"> <hi-key-value-pair name="Ideal State Mode" prop="idealStateMode"></hi-key-value-pair> <hi-key-value-pair name="Rebalance Mode" prop="rebalanceMode"></hi-key-value-pair> @@ -14,27 +16,27 @@ <hi-key-value-pair name="Replication Factor" prop="replicaCount"></hi-key-value-pair> </hi-key-value-pairs> <span fxFlex="1 1 auto"></span> - <button md-mini-fab *ngIf="can" [mdMenuTriggerFor]="menu"> - <md-icon>menu</md-icon> + <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu"> + <mat-icon>menu</mat-icon> </button> - <md-menu #menu="mdMenu"> - <button md-menu-item *ngIf="resource && resource.enabled" (click)="disableResource()"> - <md-icon>not_interested</md-icon> + <mat-menu #menu="matMenu"> + <button mat-menu-item *ngIf="resource && resource.enabled" (click)="disableResource()"> + <mat-icon>not_interested</mat-icon> <span>Disable this Resource</span> </button> - <button md-menu-item *ngIf="resource && !resource.enabled" (click)="enableResource()"> - <md-icon>play_circle_outline</md-icon> + <button mat-menu-item *ngIf="resource && !resource.enabled" (click)="enableResource()"> + <mat-icon>play_circle_outline</mat-icon> <span>Enable this Resource</span> </button> - <button md-menu-item *ngIf="false" (click)="removeResource()"> - <md-icon>delete</md-icon> + <button mat-menu-item *ngIf="false" (click)="removeResource()"> + <mat-icon>delete</mat-icon> <span>REMOVE this Resource</span> </button> - </md-menu> - </md-toolbar-row> - </md-toolbar> - <nav md-tab-nav-bar> - <a md-tab-link + </mat-menu> + </mat-toolbar-row> + </mat-toolbar> + <nav mat-tab-nav-bar> + <a mat-tab-link *ngFor="let tabLink of tabLinks" [routerLink]="tabLink.link" routerLinkActive #rla="routerLinkActive" http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-detail/resource-detail.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.scss b/helix-front/client/app/resource/resource-detail/resource-detail.component.scss index 265278b..bb71765 100644 --- a/helix-front/client/app/resource/resource-detail/resource-detail.component.scss +++ b/helix-front/client/app/resource/resource-detail/resource-detail.component.scss @@ -8,8 +8,6 @@ .information { .mat-spinner { - width: 30px; - height: 30px; margin: 0 20px; } } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-list/resource-list.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-list/resource-list.component.html b/helix-front/client/app/resource/resource-list/resource-list.component.html index 5348c5a..8b61d00 100644 --- a/helix-front/client/app/resource/resource-list/resource-list.component.html +++ b/helix-front/client/app/resource/resource-list/resource-list.component.html @@ -2,8 +2,8 @@ <ngx-datatable #resourcesTable class="material" - [headerHeight]="rowHeight" - rowHeight="auto" + [headerHeight]="headerHeight" + [rowHeight]="rowHeight" columnMode="force" [footerHeight]="rowHeight" [rows]="resources" @@ -15,13 +15,13 @@ *ngIf="!isForInstance" name="Status" prop="alive" - [width]="85" + [width]="88" [resizeable]="false" [draggable]="false" [canAutoResize]="false"> <ng-template let-value="value" ngx-datatable-cell-template> - <md-icon *ngIf="value" color="primary">lens</md-icon> - <md-icon *ngIf="!value" color="warn" mdTooltip="The resource is offline.">panorama_fish_eye</md-icon> + <mat-icon *ngIf="value" color="primary">lens</mat-icon> + <mat-icon *ngIf="!value" color="warn" matTooltip="The resource is offline.">panorama_fish_eye</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column @@ -31,8 +31,8 @@ [sortable]="false" [draggable]="false" [canAutoResize]="false"> - <ng-template let-row="row" ngx-datatable-cell-template> - <md-icon>{{ row.$$expanded ? 'expand_more' : 'chevron_right' }}</md-icon> + <ng-template let-expanded="expanded" ngx-datatable-cell-template> + <mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Name"></ngx-datatable-column> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource-list/resource-list.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-list/resource-list.component.ts b/helix-front/client/app/resource/resource-list/resource-list.component.ts index 4c72cf3..fb9db0a 100644 --- a/helix-front/client/app/resource/resource-list/resource-list.component.ts +++ b/helix-front/client/app/resource/resource-list/resource-list.component.ts @@ -1,12 +1,14 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs/Rx'; + +import * as _ from 'lodash'; +import { Settings } from '../../core/settings'; import { Resource } from '../shared/resource.model'; import { ResourceService } from '../shared/resource.service'; import { WorkflowService } from '../../workflow/shared/workflow.service'; import { HelperService } from '../../shared/helper.service'; -import { Observable } from 'rxjs/Rx'; -import * as _ from 'lodash'; @Component({ selector: 'hi-resource-list', @@ -20,7 +22,8 @@ export class ResourceListComponent implements OnInit { table: any; isForInstance = false; - rowHeight = 40; + headerHeight = Settings.tableHeaderHeight; + rowHeight = Settings.tableRowHeight; resources: Resource[]; isLoading = true; clusterName: string; http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/resource/resource.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource.module.ts b/helix-front/client/app/resource/resource.module.ts index b8051cd..f818e86 100644 --- a/helix-front/client/app/resource/resource.module.ts +++ b/helix-front/client/app/resource/resource.module.ts @@ -1,7 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { MaterialModule } from '@angular/material'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxJsonViewerModule } from 'ngx-json-viewer'; @@ -19,8 +17,6 @@ import { ResourceNodeViewerComponent } from './resource-node-viewer/resource-nod @NgModule({ imports: [ CommonModule, - RouterModule, - MaterialModule, NgxDatatableModule, NgxJsonViewerModule, SharedModule http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/data-table/data-table.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/data-table/data-table.component.html b/helix-front/client/app/shared/data-table/data-table.component.html index e665361..f396c97 100644 --- a/helix-front/client/app/shared/data-table/data-table.component.html +++ b/helix-front/client/app/shared/data-table/data-table.component.html @@ -15,8 +15,8 @@ [draggable]="false" [canAutoResize]="false"> <ng-template let-row="row" ngx-datatable-cell-template> - <button md-icon-button mdTooltip="Click to delete" (click)="onDelete(row)"> - <md-icon>delete_forever</md-icon> + <button mat-icon-button matTooltip="Click to delete" (click)="onDelete(row)"> + <mat-icon>delete_forever</mat-icon> </button> </ng-template> </ngx-datatable-column> @@ -44,8 +44,8 @@ let-pageSize="pageSize" let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> - <button md-button *ngIf="insertable" (click)="onCreate()"> - <md-icon>add</md-icon> + <button mat-button *ngIf="insertable" (click)="onCreate()"> + <mat-icon>add</mat-icon> Add new entry </button> <section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/data-table/data-table.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/data-table/data-table.component.spec.ts b/helix-front/client/app/shared/data-table/data-table.component.spec.ts index c99d516..b6bff79 100644 --- a/helix-front/client/app/shared/data-table/data-table.component.spec.ts +++ b/helix-front/client/app/shared/data-table/data-table.component.spec.ts @@ -1,8 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { MaterialModule } from '@angular/material'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { TestingModule } from '../../../testing/testing.module'; import { DataTableComponent } from './data-table.component'; describe('DataTableComponent', () => { @@ -12,8 +11,7 @@ describe('DataTableComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MaterialModule, - NoopAnimationsModule + TestingModule ], declarations: [ DataTableComponent ], schemas: [ http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/data-table/data-table.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/data-table/data-table.component.ts b/helix-front/client/app/shared/data-table/data-table.component.ts index e92ec5f..dffae92 100644 --- a/helix-front/client/app/shared/data-table/data-table.component.ts +++ b/helix-front/client/app/shared/data-table/data-table.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { MdDialog } from '@angular/material'; +import { MatDialog } from '@angular/material'; import { Settings } from '../../core/settings'; import { InputDialogComponent } from '../dialog/input-dialog/input-dialog.component'; @@ -25,7 +25,7 @@ export class DataTableComponent implements OnInit { rowHeight = Settings.tableRowHeight; constructor( - protected dialog: MdDialog + protected dialog: MatDialog ) { } ngOnInit() { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/detail-header/detail-header.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/detail-header/detail-header.component.html b/helix-front/client/app/shared/detail-header/detail-header.component.html index da4ea4f..0a735dc 100644 --- a/helix-front/client/app/shared/detail-header/detail-header.component.html +++ b/helix-front/client/app/shared/detail-header/detail-header.component.html @@ -1,11 +1,11 @@ -<h4> +<h4 fxLayout="row" fxLayoutAlign="center center"> <span [ngClass]="{'secondary': isSecondary()}">{{ cluster }}</span> - <md-icon *ngIf="isSecondary()" class="secondary">navigate_next</md-icon> + <mat-icon *ngIf="isSecondary()" class="secondary">navigate_next</mat-icon> <span *ngIf="controller">{{ controller }}</span> <span *ngIf="instance">{{ instance }}</span> <span *ngIf="resource">{{ resource }}</span> <span *ngIf="workflow">{{ workflow }}</span> - <span class="tag"> + <span class="tag" fxLayout="row" fxLayoutAlign="center center"> <span [ngClass]="getTag()">{{ getTag() }}</span> <!-- for testing purpose only <span class="cluster">Cluster</span> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/detail-header/detail-header.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/detail-header/detail-header.component.scss b/helix-front/client/app/shared/detail-header/detail-header.component.scss index d2f8d6b..e17143d 100644 --- a/helix-front/client/app/shared/detail-header/detail-header.component.scss +++ b/helix-front/client/app/shared/detail-header/detail-header.component.scss @@ -8,14 +8,13 @@ padding-left: 10px; span { - display: inline-block; color: #fff; font-size: 12px; + line-height: 12px; text-transform: uppercase; font-weight: normal; border-radius: 24px; - padding: 4px 8px; - vertical-align: text-bottom;; // ? + padding: 6px 8px; } .cluster { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.html b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.html index 3195db5..d20aac2 100644 --- a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.html +++ b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.html @@ -1,2 +1,2 @@ -<h1 md-dialog-title>{{ title }}</h1> -<div md-dialog-content>{{ message }}</div> +<h1 mat-dialog-title>{{ title }}</h1> +<div mat-dialog-content>{{ message }}</div> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts index 54c5643..d276e88 100644 --- a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MD_DIALOG_DATA } from '@angular/material'; +import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'hi-alert-dialog', @@ -12,7 +12,7 @@ export class AlertDialogComponent implements OnInit { message: string; constructor( - @Inject(MD_DIALOG_DATA) protected data: any + @Inject(MAT_DIALOG_DATA) protected data: any ) { } ngOnInit() { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html index c783641..f4aab6c 100644 --- a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html +++ b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html @@ -1,12 +1,12 @@ <form (ngSubmit)="onCancel()" #inputForm="ngForm"> - <h1 md-dialog-title>{{ title }}</h1> - <div md-dialog-content> + <h1 mat-dialog-title>{{ title }}</h1> + <div mat-dialog-content> <section> {{ message }} </section> </div> - <div md-dialog-actions> - <button md-button type="submit" color="primary" [disabled]="!inputForm.form.valid">Cancel</button> - <button md-button type="button" (click)="onConfirm()">Continue</button> + <div mat-dialog-actions> + <button mat-button type="submit" color="primary" [disabled]="!inputForm.form.valid">Cancel</button> + <button mat-button type="button" (click)="onConfirm()">Continue</button> </div> </form> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts index 4db1198..6f4ec8d 100644 --- a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MdDialogRef } from '@angular/material'; -import { MD_DIALOG_DATA } from '@angular/material'; +import { MatDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'hi-confirm-dialog', @@ -13,8 +13,8 @@ export class ConfirmDialogComponent implements OnInit { message: string; constructor( - @Inject(MD_DIALOG_DATA) protected data: any, - protected dialogRef: MdDialogRef<ConfirmDialogComponent> + @Inject(MAT_DIALOG_DATA) protected data: any, + protected dialogRef: MatDialogRef<ConfirmDialogComponent> ) { } ngOnInit() { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html index 1086458..bf4cd78 100644 --- a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html +++ b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.html @@ -1,29 +1,29 @@ <form (ngSubmit)="onSubmit()" #inputForm="ngForm"> - <h1 md-dialog-title>{{ title }}</h1> - <div md-dialog-content> + <h1 mat-dialog-title>{{ title }}</h1> + <div mat-dialog-content> <section> {{ message }} </section> <section *ngFor="let name of getKeys(values)"> <section *ngIf="values[name].type === 'boolean'"> {{ values[name].label }}: - <md-slide-toggle + <mat-slide-toggle [name]="name" [(ngModel)]="values[name].value"> {{ values[name].value ? 'True' : 'False' }} - </md-slide-toggle> + </mat-slide-toggle> </section> - <md-input-container *ngIf="values[name].type !== 'boolean'"> - <input mdInput + <mat-form-field *ngIf="values[name].type !== 'boolean'"> + <input matInput [name]="name" [(ngModel)]="values[name].value" [placeholder]="values[name].label" required> - </md-input-container> + </mat-form-field> </section> </div> - <div md-dialog-actions> - <button md-button type="submit" color="primary" [disabled]="!inputForm.form.valid">OK</button> - <button md-button type="button" (click)="onCancel()">Cancel</button> + <div mat-dialog-actions> + <button mat-button type="submit" color="primary" [disabled]="!inputForm.form.valid">OK</button> + <button mat-button type="button" (click)="onCancel()">Cancel</button> </div> </form> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts index 5934997..d098008 100644 --- a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MdDialogRef } from '@angular/material'; -import { MD_DIALOG_DATA } from '@angular/material'; +import { MatDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'hi-input-dialog', @@ -14,8 +14,8 @@ export class InputDialogComponent implements OnInit { values: any[]; constructor( - @Inject(MD_DIALOG_DATA) protected data: any, - protected dialogRef: MdDialogRef<InputDialogComponent> + @Inject(MAT_DIALOG_DATA) protected data: any, + protected dialogRef: MatDialogRef<InputDialogComponent> ) { } ngOnInit() { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/disabled-label/disabled-label.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss index 9b10103..0b492f1 100644 --- a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss @@ -4,9 +4,9 @@ margin-left: 10px; padding: 4px 8px; font-size: 12px; + line-height: 12px; border-radius: 4px; border: 1px solid mat-color(mat-palette($mat-red), 900); background-color: mat-color(mat-palette($mat-red), darker); color: rgb(255, 255, 255); - line-height: 26px; } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/helper.service.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/helper.service.ts b/helix-front/client/app/shared/helper.service.ts index 2bc7cb4..29c10ec 100644 --- a/helix-front/client/app/shared/helper.service.ts +++ b/helix-front/client/app/shared/helper.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { MdDialog, MdSnackBar } from '@angular/material'; +import { MatDialog, MatSnackBar } from '@angular/material'; import { AlertDialogComponent } from './dialog/alert-dialog/alert-dialog.component'; import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; @@ -8,8 +8,8 @@ import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.c export class HelperService { constructor( - protected snackBar: MdSnackBar, - protected dialog: MdDialog + protected snackBar: MatSnackBar, + protected dialog: MatDialog ) { } showError(message: string) { http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/input-inline/input-inline.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/input-inline/input-inline.component.html b/helix-front/client/app/shared/input-inline/input-inline.component.html index fdabc36..21ea2c9 100644 --- a/helix-front/client/app/shared/input-inline/input-inline.component.html +++ b/helix-front/client/app/shared/input-inline/input-inline.component.html @@ -1,6 +1,6 @@ <section> - <md-input-container *ngIf="editing" class="full-width {{ hasError() ? 'error' : ''}}"> - <input mdInput + <mat-form-field *ngIf="editing" class="full-width {{ hasError() ? 'error' : ''}}"> + <input matInput #inputControl [min]="min" [max]="max" @@ -15,13 +15,13 @@ [(ngModel)]="value" [type]="type" [placeholder]="label" /> - <md-hint *ngIf="hasError()" align="start">{{ errorLabel }}</md-hint> - <md-hint align="end">press ESC to cancel</md-hint> - </md-input-container> + <mat-hint *ngIf="hasError()" align="start">{{ errorLabel }}</mat-hint> + <mat-hint align="end">press ESC to cancel</mat-hint> + </mat-form-field> <section *ngIf="!editing"> <div class="inline-edit {{hasError() ? 'error': ''}}" - [md-tooltip]="editLabel" + [matTooltip]="editLabel" (click)="edit(value)" (focus)="edit(value)" tabindex="0"> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.scss b/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.scss index a70ad51..af8355f 100644 --- a/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.scss +++ b/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.scss @@ -1,5 +1,6 @@ .groups { font-size: 14px; + line-height: 14px; .column { padding-left: 40px; @@ -7,6 +8,7 @@ .name { font-size: 12px; + line-height: 12px; color: rgba(0, 0, 0, .54); } } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/material.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/material.module.ts b/helix-front/client/app/shared/material.module.ts new file mode 100644 index 0000000..c082d0b --- /dev/null +++ b/helix-front/client/app/shared/material.module.ts @@ -0,0 +1,66 @@ +import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatToolbarModule, + MatTooltipModule, + MatDialogModule, + MatSnackBarModule, + MatSlideToggleModule, + MatInputModule, + MatIconModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatSidenavModule, + MatListModule, + MatMenuModule, + MatTabsModule +} from '@angular/material'; +import 'hammerjs'; + +@NgModule({ + imports: [ + BrowserAnimationsModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatToolbarModule, + MatTooltipModule, + MatDialogModule, + MatSnackBarModule, + MatSlideToggleModule, + MatInputModule, + MatIconModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatSidenavModule, + MatListModule, + MatMenuModule, + MatTabsModule + ], + exports: [ + BrowserAnimationsModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatToolbarModule, + MatTooltipModule, + MatDialogModule, + MatSnackBarModule, + MatSlideToggleModule, + MatInputModule, + MatIconModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatSidenavModule, + MatListModule, + MatMenuModule, + MatTabsModule + ] +}) +export class MaterialModule { } http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/node-viewer/node-viewer.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.html b/helix-front/client/app/shared/node-viewer/node-viewer.component.html index 006761b..25777e3 100644 --- a/helix-front/client/app/shared/node-viewer/node-viewer.component.html +++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.html @@ -1,46 +1,46 @@ <section class="node-viewer" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px"> - <md-progress-bar *ngIf="loadingIndicator" mode="indeterminate"></md-progress-bar> - <md-button-toggle-group #group="mdButtonToggleGroup" value="table"> - <md-button-toggle value="table"> + <mat-progress-bar *ngIf="loadingIndicator" mode="indeterminate"></mat-progress-bar> + <mat-button-toggle-group #group="matButtonToggleGroup" value="table"> + <mat-button-toggle value="table"> Table View - </md-button-toggle> - <md-button-toggle value="json"> + </mat-button-toggle> + <mat-button-toggle value="json"> JSON View - </md-button-toggle> - </md-button-toggle-group> + </mat-button-toggle> + </mat-button-toggle-group> <section class="viewer" [ngSwitch]="group.value" fxFlexFill> <ngx-json-viewer *ngSwitchCase="'json'" [json]="obj"></ngx-json-viewer> <section *ngSwitchCase="'table'"> - <!-- TODO vxu: use md-simple-table when it's available --> + <!-- TODO vxu: use mat-simple-table when it's available --> <section fxLayout="row" fxLayoutAlign="center center"> <span fxFlex="1 1 auto"></span> - <md-icon>search</md-icon> - <md-input-container> - <input mdInput + <mat-icon>search</mat-icon> + <mat-form-field class="search-form-field"> + <input matInput placeholder="Type to filter the fields..." (keyup)="updateFilter($event)"/> - </md-input-container> + </mat-form-field> <span fxFlex="1 1 auto"></span> - <button md-button + <button mat-button *ngIf="unlockable" (click)="editable = !editable" - [mdTooltip]="editable ? 'Click to prevent further changes' : 'Click to make changes'"> - <md-icon>{{ editable ? 'lock_open' : 'lock' }}</md-icon> + [matTooltip]="editable ? 'Click to prevent further changes' : 'Click to make changes'"> + <mat-icon>{{ editable ? 'lock_open' : 'lock' }}</mat-icon> {{ editable ? 'Unlocked' : 'Locked' }} </button> </section> - <md-card> - <md-card-header> - <md-card-title> + <mat-card> + <mat-card-header> + <mat-card-title> Simple Fields <span *ngIf="simpleConfigs.length == 0">is empty.</span> <span *ngIf="keyword" class="primary">(filtered)</span> - </md-card-title> - </md-card-header> - <md-card-content> + </mat-card-title> + </mat-card-header> + <mat-card-content> <hi-data-table *ngIf="simpleConfigs.length || editable" [rows]="simpleConfigs" @@ -52,25 +52,25 @@ (create)="created('simple', $event)" (delete)="onDelete('simple', $event.row)"> </hi-data-table> - </md-card-content> - </md-card> + </mat-card-content> + </mat-card> - <md-card> - <md-card-header> - <md-card-title> + <mat-card> + <mat-card-header> + <mat-card-title> List Fields <span *ngIf="listConfigs.length == 0">is empty.</span> <span *ngIf="keyword" class="primary">(filtered)</span> - </md-card-title> - </md-card-header> - <md-card-content> + </mat-card-title> + </mat-card-header> + <mat-card-content> <ngx-datatable *ngIf="listConfigs.length || editable" #listTable class="material" - [headerHeight]="rowHeight" + [headerHeight]="headerHeight" rowHeight="auto" - [footerHeight]="rowHeight" + [footerHeight]="headerHeight" columnMode="force" [rows]="listConfigs" [sorts]="sorts" @@ -82,8 +82,8 @@ [draggable]="false" [canAutoResize]="false"> <ng-template let-row="row" ngx-datatable-cell-template> - <button md-icon-button class="delete-button" mdTooltip="Click to delete" (click)="beforeDelete('list', row)"> - <md-icon>delete_forever</md-icon> + <button mat-icon-button class="delete-button" matTooltip="Click to delete" (click)="beforeDelete('list', row)"> + <mat-icon>delete_forever</mat-icon> </button> </ng-template> </ngx-datatable-column> @@ -109,8 +109,8 @@ let-pageSize="pageSize" let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> - <button md-button *ngIf="editable" (click)="onCreate('list')"> - <md-icon>add</md-icon> + <button mat-button *ngIf="editable" (click)="onCreate('list')"> + <mat-icon>add</mat-icon> Add new entry </button> <section> @@ -133,25 +133,25 @@ </ng-template> </ngx-datatable-footer> </ngx-datatable> - </md-card-content> - </md-card> + </mat-card-content> + </mat-card> - <md-card> - <md-card-header> - <md-card-title> + <mat-card> + <mat-card-header> + <mat-card-title> Map Fields <span *ngIf="mapConfigs.length == 0">is empty.</span> <span *ngIf="keyword" class="primary">(filtered)</span> - </md-card-title> - </md-card-header> - <md-card-content> + </mat-card-title> + </mat-card-header> + <mat-card-content> <ngx-datatable *ngIf="mapConfigs.length || editable" #mapTable class="material" - [headerHeight]="rowHeight" + [headerHeight]="headerHeight" rowHeight="auto" - [footerHeight]="rowHeight" + [footerHeight]="headerHeight" columnMode="force" [rows]="mapConfigs" [sorts]="sorts" @@ -163,8 +163,8 @@ [draggable]="false" [canAutoResize]="false"> <ng-template let-row="row" ngx-datatable-cell-template> - <button md-icon-button class="delete-button" mdTooltip="Click to delete" (click)="beforeDelete('map', row)"> - <md-icon>delete_forever</md-icon> + <button mat-icon-button class="delete-button" matTooltip="Click to delete" (click)="beforeDelete('map', row)"> + <mat-icon>delete_forever</mat-icon> </button> </ng-template> </ngx-datatable-column> @@ -190,8 +190,8 @@ let-pageSize="pageSize" let-curPage="curPage"> <section class="footer" fxLayout="row" fxLayoutAlign="space-between center"> - <button md-button *ngIf="editable" (click)="onCreate('map')"> - <md-icon>add</md-icon> + <button mat-button *ngIf="editable" (click)="onCreate('map')"> + <mat-icon>add</mat-icon> Add new entry </button> <section> @@ -214,8 +214,8 @@ </ng-template> </ngx-datatable-footer> </ngx-datatable> - </md-card-content> - </md-card> + </mat-card-content> + </mat-card> </section> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/b3ecd2a7/helix-front/client/app/shared/node-viewer/node-viewer.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.scss b/helix-front/client/app/shared/node-viewer/node-viewer.component.scss index 9fd5d3c..a1e27f2 100644 --- a/helix-front/client/app/shared/node-viewer/node-viewer.component.scss +++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.scss @@ -9,12 +9,12 @@ color: mat-color($hi-primary); } -md-input-container { +.search-form-field { width: 300px; padding: 10px 0 0 5px; } -md-card { +mat-card { margin-bottom: 10px; }
