[helix-front] Resource add/remove/enable/disable
Project: http://git-wip-us.apache.org/repos/asf/helix/repo Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/a595e3f9 Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/a595e3f9 Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/a595e3f9 Branch: refs/heads/master Commit: a595e3f9e8a9c11760cad8beeab672aa04c9cb69 Parents: 1af0a84 Author: Vivo Xu <v...@linkedin.com> Authored: Mon Sep 11 16:29:05 2017 -0700 Committer: Junkai Xue <j...@linkedin.com> Committed: Mon Nov 6 17:08:00 2017 -0800 ---------------------------------------------------------------------- helix-front/client/app/app-routing.module.ts | 29 +--- .../cluster-detail.component.html | 14 +- .../cluster-detail.component.scss | 8 - .../config-detail/config-detail.component.html | 10 +- .../config-detail.component.spec.ts | 8 +- .../config-detail/config-detail.component.ts | 156 ++++++++----------- .../shared/configuration.service.ts | 18 +++ helix-front/client/app/core/helix.service.ts | 13 +- .../instance-detail.component.html | 16 +- .../instance-detail.component.scss | 9 +- .../instance-detail.component.ts | 23 +-- .../instance-list/instance-list.component.html | 2 +- .../instance-list/instance-list.component.scss | 10 -- .../partition-detail.component.html | 3 +- .../partition-list.component.html | 12 +- .../partition-list.component.spec.ts | 8 +- .../partition-list/partition-list.component.ts | 30 +++- .../resource-detail-for-instance.component.html | 64 ++++---- .../resource-detail.component.html | 25 ++- .../resource-detail.component.scss | 15 ++ .../resource-detail.component.spec.ts | 10 +- .../resource-detail.component.ts | 64 +++++++- .../resource-list.component.spec.ts | 21 +-- .../resource-node-viewer.component.html | 6 + .../resource-node-viewer.component.scss | 0 .../resource-node-viewer.component.spec.ts | 34 ++++ .../resource-node-viewer.component.ts | 56 +++++++ .../client/app/resource/resource.module.ts | 4 +- .../app/resource/shared/resource.model.ts | 15 +- .../app/resource/shared/resource.service.ts | 15 ++ .../disabled-label.component.html | 1 + .../disabled-label.component.scss | 12 ++ .../disabled-label.component.spec.ts | 25 +++ .../disabled-label/disabled-label.component.ts | 18 +++ .../client/app/shared/helper.service.spec.ts | 6 +- helix-front/client/app/shared/helper.service.ts | 12 ++ .../node-viewer/node-viewer.component.html | 3 +- .../shared/node-viewer/node-viewer.component.ts | 3 + helix-front/client/app/shared/shared.module.ts | 7 +- helix-front/client/testing/stubs.ts | 8 + helix-front/client/testing/testing.module.ts | 27 ++++ 41 files changed, 559 insertions(+), 261 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/app-routing.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app-routing.module.ts b/helix-front/client/app/app-routing.module.ts index 961bde5..f32a793 100644 --- a/helix-front/client/app/app-routing.module.ts +++ b/helix-front/client/app/app-routing.module.ts @@ -2,14 +2,13 @@ import { ModuleWithProviders } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; -import { NodeViewerComponent } from './shared/node-viewer/node-viewer.component'; import { ClusterComponent } from './cluster/cluster.component'; import { ClusterDetailComponent } from './cluster/cluster-detail/cluster-detail.component'; import { ConfigDetailComponent } from './configuration/config-detail/config-detail.component'; import { InstanceListComponent } from './instance/instance-list/instance-list.component'; -import { ResourceResolver } from './resource/shared/resource.resolver'; import { ResourceListComponent } from './resource/resource-list/resource-list.component'; import { ResourceDetailComponent } from './resource/resource-detail/resource-detail.component'; +import { ResourceNodeViewerComponent } from './resource/resource-node-viewer/resource-node-viewer.component'; import { PartitionListComponent } from './resource/partition-list/partition-list.component'; import { ControllerDetailComponent } from './controller/controller-detail/controller-detail.component'; import { HistoryListComponent } from './history/history-list/history-list.component'; @@ -43,10 +42,7 @@ const HELIX_ROUTES: Routes = [ }, { path: 'configs', - component: ConfigDetailComponent, - data: { - forCluster: true - } + component: ConfigDetailComponent }, { path: 'instances', @@ -80,9 +76,6 @@ const HELIX_ROUTES: Routes = [ { path: ':cluster_name/resources/:resource_name', component: ResourceDetailComponent, - resolve: { - resource: ResourceResolver - }, children: [ { path: '', @@ -95,24 +88,21 @@ const HELIX_ROUTES: Routes = [ }, { path: 'externalView', - component: NodeViewerComponent, + component: ResourceNodeViewerComponent, data: { - path: 'resource.externalView' + path: 'externalView' } }, { path: 'idealState', - component: NodeViewerComponent, + component: ResourceNodeViewerComponent, data: { - path: 'resource.idealState' + path: 'idealState' } }, { path: 'configs', - component: ConfigDetailComponent, - data: { - forResource: true - } + component: ConfigDetailComponent } ] }, @@ -138,10 +128,7 @@ const HELIX_ROUTES: Routes = [ }, { path: 'configs', - component: ConfigDetailComponent, - data: { - forInstance: true - } + component: ConfigDetailComponent }, { path: 'history', http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 4704417..e321703 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 @@ -2,6 +2,7 @@ <section *ngIf="clusterName"> <md-toolbar class="mat-elevation-z1"> <hi-detail-header [cluster]="clusterName"></hi-detail-header> + <hi-disabled-label *ngIf="!cluster?.enabled" text="DISABLED"></hi-disabled-label> <md-toolbar-row *ngIf="isLoading" class="information"> <md-spinner></md-spinner> </md-toolbar-row> @@ -9,11 +10,6 @@ <h6>Controller: <a md-button color="accent" routerLink="controller">{{ cluster.controller }}</a> </h6> - <section *ngIf="!cluster.enabled"> - <div class="offline"> - This Cluster is currently DISABLED - </div> - </section> <span fxFlex="1 1 auto"></span> <button md-mini-fab *ngIf="can" [mdMenuTriggerFor]="menu"> <md-icon>menu</md-icon> @@ -27,11 +23,15 @@ <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</md-icon> + <md-icon>add_circle</md-icon> <span>Add an Instance</span> </button> - <button md-menu-item (click)="deleteCluster()" disabled> + <button md-menu-item *ngIf="false" (click)="deleteCluster()" disabled> <md-icon>delete</md-icon> <span>DELETE this Cluster</span> </button> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 1da0a85..41884b5 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,11 +1,3 @@ -@import 'client/theme.scss'; - -.offline { - font-size: 14px; - padding-left: 24px; - color: mat-color($hi-warn); -} - .mat-spinner { width: 30px; height: 30px; http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/configuration/config-detail/config-detail.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/configuration/config-detail/config-detail.component.html b/helix-front/client/app/configuration/config-detail/config-detail.component.html index 7c053c5..8f310b3 100644 --- a/helix-front/client/app/configuration/config-detail/config-detail.component.html +++ b/helix-front/client/app/configuration/config-detail/config-detail.component.html @@ -1,12 +1,10 @@ -<section fxLayout="column" fxLayoutAlign="center center"> - <md-spinner *ngIf="isLoading"></md-spinner> +<section> <hi-node-viewer - *ngIf="!isLoading" - fxFlexFill + [loadingIndicator]="isLoading" [obj]="obj" - [unlockable]="can && clusterName != null" + [unlockable]="can && instanceName == null" (update)="updateConfig($event)" - (create)="createConfig($event)" + (create)="updateConfig($event)" (delete)="deleteConfig($event)"> </hi-node-viewer> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts b/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts index 5dd1149..d6a721e 100644 --- a/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts +++ b/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts @@ -1,9 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { HttpModule } from '@angular/http'; -import { MaterialModule } from '@angular/material'; -import { RouterTestingModule } from '@angular/router/testing'; +import { TestingModule } from '../../../testing/testing.module'; import { ConfigDetailComponent } from './config-detail.component'; describe('ConfigDetailComponent', () => { @@ -13,9 +11,7 @@ describe('ConfigDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - HttpModule, - RouterTestingModule, - MaterialModule + TestingModule ], declarations: [ ConfigDetailComponent http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/configuration/config-detail/config-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/configuration/config-detail/config-detail.component.ts b/helix-front/client/app/configuration/config-detail/config-detail.component.ts index 66b53aa..001091f 100644 --- a/helix-front/client/app/configuration/config-detail/config-detail.component.ts +++ b/helix-front/client/app/configuration/config-detail/config-detail.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { MdSnackBar } from '@angular/material'; import { ConfigurationService } from '../shared/configuration.service'; +import { HelperService } from '../../shared/helper.service'; @Component({ selector: 'hi-config-detail', @@ -15,119 +15,101 @@ export class ConfigDetailComponent implements OnInit { isLoading = true; obj: any = {}; clusterName: string; + instanceName: string; + resourceName: string; can = false; constructor( protected route: ActivatedRoute, protected service: ConfigurationService, - protected snackBar: MdSnackBar + protected helper: HelperService ) { } ngOnInit() { if (this.route.parent) { - // TODO vxu: convert this logic to config.resolver - if (this.route.snapshot.data.forInstance) { - this.isLoading = true; - - this.service - .getInstanceConfig( - this.route.parent.snapshot.params.cluster_name, - this.route.parent.snapshot.params.instance_name - ) - .subscribe( - config => this.obj = config, - error => this.handleError(error), - () => this.isLoading = false - ); - } else if (this.route.snapshot.data.forResource) { - this.isLoading = true; - - this.service - .getResourceConfig( - this.route.parent.snapshot.params.cluster_name, - this.route.parent.snapshot.params.resource_name - ) - .subscribe( - config => this.obj = config, - error => this.handleError(error), - () => this.isLoading = false - ); - } else { - this.clusterName = this.route.parent.snapshot.params['name']; - this.loadClusterConfig(); - } + this.clusterName = this.route.parent.snapshot.params.name || this.route.parent.snapshot.params.cluster_name; + this.instanceName = this.route.parent.snapshot.params.instance_name; + this.resourceName = this.route.parent.snapshot.params.resource_name; } + this.loadConfig(); + this.service.can().subscribe(data => this.can = data); } - loadClusterConfig() { - this.isLoading = true; - this.service - .getClusterConfig(this.clusterName) - .subscribe( + loadConfig() { + let observer: any; + + if (this.clusterName && this.instanceName) { + observer = this.service.getInstanceConfig(this.clusterName, this.instanceName); + } else if (this.clusterName && this.resourceName) { + observer = this.service.getResourceConfig(this.clusterName, this.resourceName); + } else { + observer = this.service.getClusterConfig(this.clusterName); + } + + if (observer) { + this.isLoading = true; + observer.subscribe( config => this.obj = config, - error => this.handleError(error), + error => { + // since rest API simply throws 404 instead of empty config when config is not initialized yet + // frontend has to treat 404 as normal result + if (error != 'Not Found') { + this.helper.showError(error); + } + this.isLoading = false; + }, () => this.isLoading = false ); - } - - createConfig(value: any) { - if (this.clusterName) { - this.isLoading = true; - this.service - .setClusterConfig(this.clusterName, value) - .subscribe( - () => { - this.snackBar.open('Configuration added!', 'OK', { - duration: 2000, - }); - this.loadClusterConfig(); - }, - error => this.handleError(error), - () => this.isLoading = false - ); } } updateConfig(value: any) { - if (this.clusterName) { + let observer: any; + + if (this.clusterName && this.instanceName) { + observer = this.service.setInstanceConfig(this.clusterName, this.instanceName, value); + } else if (this.clusterName && this.resourceName) { + observer = this.service.setResourceConfig(this.clusterName, this.resourceName, value); + } else { + observer = this.service.setClusterConfig(this.clusterName, value); + } + + if (observer) { this.isLoading = true; - this.service - .setClusterConfig(this.clusterName, value) - .subscribe( - () => { - this.snackBar.open('Configuration updated!', 'OK', { - duration: 2000, - }); - this.loadClusterConfig(); - }, - error => this.handleError(error), - () => this.isLoading = false - ); + observer.subscribe( + () => { + this.helper.showSnackBar('Configuration updated!'); + this.loadConfig(); + }, + error => this.helper.showError(error), + () => this.isLoading = false + ); } } deleteConfig(value: any) { - if (this.clusterName) { - this.isLoading = true; - this.service - .deleteClusterConfig(this.clusterName, value) - .subscribe( - () => { - this.snackBar.open('Configuration deleted!', 'OK', { - duration: 2000, - }); - this.loadClusterConfig(); - }, - error => this.handleError(error), - () => this.isLoading = false - ); + let observer: any; + + if (this.clusterName && this.instanceName) { + observer = this.service.deleteInstanceConfig(this.clusterName, this.instanceName, value); + } else if (this.clusterName && this.resourceName) { + observer = this.service.deleteResourceConfig(this.clusterName, this.resourceName, value); + } else { + observer = this.service.deleteClusterConfig(this.clusterName, value); } - } - protected handleError(error) { - // the API says if there's no config just return 404 ! sucks! - this.isLoading = false; + if (observer) { + this.isLoading = true; + observer.subscribe( + () => { + this.helper.showSnackBar('Configuration deleted!'); + this.loadConfig(); + }, + error => this.helper.showError(error), + () => this.isLoading = false + ); + } } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/configuration/shared/configuration.service.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/configuration/shared/configuration.service.ts b/helix-front/client/app/configuration/shared/configuration.service.ts index 688d9dc..7799094 100644 --- a/helix-front/client/app/configuration/shared/configuration.service.ts +++ b/helix-front/client/app/configuration/shared/configuration.service.ts @@ -18,11 +18,29 @@ export class ConfigurationService extends HelixService { return this.post(`/clusters/${ name }/configs?command=delete`, config.json(name)); } + public getInstanceConfig(clusterName: string, instanceName: string) { return this.request(`/clusters/${ clusterName }/instances/${ instanceName }/configs`); } + public setInstanceConfig(clusterName: string, instanceName: string, config: Node) { + return this.post(`/clusters/${ clusterName }/instances/${ instanceName }/configs?command=update`, config.json(instanceName)); + } + + public deleteInstanceConfig(clusterName: string, instanceName: string, config: Node) { + return this.post(`/clusters/${ clusterName }/instances/${ instanceName }/configs?command=delete`, config.json(instanceName)); + } + + public getResourceConfig(clusterName: string, resourceName: string) { return this.request(`/clusters/${ clusterName }/resources/${ resourceName }/configs`); } + + public setResourceConfig(clusterName: string, resourceName: string, config: Node) { + return this.post(`/clusters/${ clusterName }/resources/${ resourceName }/configs?command=update`, config.json(resourceName)); + } + + public deleteResourceConfig(clusterName: string, resourceName: string, config: Node) { + return this.post(`/clusters/${ clusterName }/resources/${ resourceName }/configs?command=delete`, config.json(resourceName)); + } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/core/helix.service.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/core/helix.service.ts b/helix-front/client/app/core/helix.service.ts index 8bb0345..0b53c95 100644 --- a/helix-front/client/app/core/helix.service.ts +++ b/helix-front/client/app/core/helix.service.ts @@ -86,10 +86,15 @@ console.log(this.router.url); let message = error.message || 'Cannot reach Helix restful service.'; if (error instanceof Response) { - message = error.text(); - try { - message = JSON.parse(message).error; - } catch (e) {} + if (error.status == 404) { + // rest api throws 404 directly to app without any wrapper + message = 'Not Found'; + } else { + message = error.text(); + try { + message = JSON.parse(message).error; + } catch (e) {} + } } return Observable.throw(message); http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 a1d89c4..4e96fa0 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,24 +1,18 @@ <section> <md-toolbar class="mat-elevation-z1"> - <hi-detail-header [cluster]="clusterName" [instance]="instance?.name"></hi-detail-header> + <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> - <hi-key-value-pairs *ngIf="!isLoading && instance.liveInstance != null" [obj]="instance"> + <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> - <section *ngIf="!isLoading && !instance.healthy"> - <div class="offline"> - This Instance is currently - <span *ngIf="!instance.liveInstance">OFFLINE</span> - <span *ngIf="!instance.liveInstance && !instance.enabled">and</span> - <span *ngIf="!instance.enabled">DISABLED</span> - </div> - </section> <span fxFlex="1 1 auto"></span> - <button md-mini-fab [mdMenuTriggerFor]="menu"> + <button md-mini-fab *ngIf="can" [mdMenuTriggerFor]="menu"> <md-icon>menu</md-icon> </button> <md-menu #menu="mdMenu"> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 2b809df..999ab59 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 @@ -1,17 +1,10 @@ -@import 'client/theme.scss'; - .information { font-size: 14px; - md-spinner { + .mat-spinner { width: 30px; height: 30px; margin: 0 20px; } - - .offline { - padding-left: 24px; - color: mat-color($hi-warn); - } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/instance/instance-detail/instance-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-detail/instance-detail.component.ts b/helix-front/client/app/instance/instance-detail/instance-detail.component.ts index 515342a..f6c4e70 100644 --- a/helix-front/client/app/instance/instance-detail/instance-detail.component.ts +++ b/helix-front/client/app/instance/instance-detail/instance-detail.component.ts @@ -1,11 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { MdDialog } from '@angular/material'; import { Instance } from '../shared/instance.model'; import { HelperService } from '../../shared/helper.service'; import { InstanceService } from '../shared/instance.service'; -import { ConfirmDialogComponent } from '../../shared/dialog/confirm-dialog/confirm-dialog.component'; @Component({ selector: 'hi-instance-detail', @@ -22,32 +20,28 @@ export class InstanceDetailComponent implements OnInit { ]; clusterName: string; + instanceName: string; instance: Instance; isLoading = true; + can = false; constructor( protected route: ActivatedRoute, protected router: Router, protected service: InstanceService, - protected dialog: MdDialog, protected helperService: HelperService ) { } ngOnInit() { - this.clusterName = this.route.snapshot.params['cluster_name']; + this.service.can().subscribe(data => this.can = data); + this.clusterName = this.route.snapshot.params.cluster_name; + this.instanceName = this.route.snapshot.params.instance_name; this.loadInstance(); } removeInstance() { - this.dialog - .open(ConfirmDialogComponent, { - data: { - title: 'Confirmation', - message: 'Are you sure you want to remove this Instance?' - } - }) - .afterClosed() - .subscribe(result => { + this.helperService.showConfirmation('Are you sure you want to remove this Instance?') + .then(result => { if (result) { this.service .remove(this.clusterName, this.instance.name) @@ -78,10 +72,9 @@ export class InstanceDetailComponent implements OnInit { } protected loadInstance() { - const instanceName = this.instance ? this.instance.name : this.route.snapshot.params['instance_name']; this.isLoading = true; this.service - .get(this.clusterName, instanceName) + .get(this.clusterName, this.instanceName) .subscribe( instance => this.instance = instance, error => this.helperService.showError(error), http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 192cc1a..b9e5cb7 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 @@ -29,7 +29,7 @@ <ng-template let-row="row" ngx-datatable-cell-template> <section fxLayout="row" fxLayoutAlign="start center"> {{ row.name }} - <span *ngIf="!row.enabled" class="status-disabled">DISABLED</span> + <hi-disabled-label *ngIf="!row.enabled" text="DISABLED"></hi-disabled-label> </section> </ng-template> </ngx-datatable-column> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/instance/instance-list/instance-list.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/instance/instance-list/instance-list.component.scss b/helix-front/client/app/instance/instance-list/instance-list.component.scss index d1ce388..66093a4 100644 --- a/helix-front/client/app/instance/instance-list/instance-list.component.scss +++ b/helix-front/client/app/instance/instance-list/instance-list.component.scss @@ -11,13 +11,3 @@ .status-not-healthy { color: mat-color(mat-palette($mat-red)); } - -.status-disabled { - margin-left: 10px; - padding: 2px 4px; - font-size: 10px; - border-radius: 4px; - border: 1px solid rgb(0, 0, 0); - background-color: rgba(0, 0, 0, .5); - color: rgb(255, 255, 255); -} http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 b494262..372368f 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 @@ -20,9 +20,8 @@ {{ value }} <a md-icon-button color="accent" - target="_blank" [routerLink]="['../../..', 'instances', value, 'resources']"> - <md-icon>open_in_new</md-icon> + <md-icon>arrow_forward</md-icon> </a> </ng-template> </ngx-datatable-column> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 20ff25e..b7a6a87 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 @@ -50,8 +50,14 @@ </ng-template> </ngx-datatable-row-detail> </ngx-datatable> - <div *ngIf="!canAnalyse()" class="message"> - <div>Sorry, we do not support this kind of partition information yet. Detailed debugging information:</div> - <ngx-json-viewer [json]="resource"></ngx-json-viewer> + <div *ngIf="!canAnalyse()" class="message" fxLayout="column" fxLayoutAlign="center center"> + <md-spinner *ngIf="isLoading"></md-spinner> + <section *ngIf="!isLoading && !resource.online" fxFlexFill> + The resource is OFFLINE and does not have partition information available. + </section> + <section *ngIf="!isLoading && resource.online" fxFlexFill> + <div>Sorry, we do not support this kind of partition information yet. Detailed debugging information:</div> + <ngx-json-viewer [json]="resource"></ngx-json-viewer> + </section> </div> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/partition-list/partition-list.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.spec.ts b/helix-front/client/app/resource/partition-list/partition-list.component.spec.ts index dabbe9c..9a5c017 100644 --- a/helix-front/client/app/resource/partition-list/partition-list.component.spec.ts +++ b/helix-front/client/app/resource/partition-list/partition-list.component.spec.ts @@ -1,8 +1,9 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { RouterTestingModule } from '@angular/router/testing'; +import { TestingModule } from '../../../testing/testing.module'; import { PartitionListComponent } from './partition-list.component'; +import { ResourceService } from '../shared/resource.service'; describe('PartitionListComponent', () => { let component: PartitionListComponent; @@ -11,7 +12,10 @@ describe('PartitionListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - RouterTestingModule + TestingModule + ], + providers: [ + ResourceService ], declarations: [ PartitionListComponent ], schemas: [ http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 3df892b..074c615 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 @@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Partition, IReplica, Resource } from '../shared/resource.model'; +import { HelperService } from '../../shared/helper.service'; +import { ResourceService } from '../shared/resource.service'; @Component({ selector: 'hi-partition-list', @@ -13,6 +15,8 @@ export class PartitionListComponent implements OnInit { @ViewChild('partitionsTable') table: any; + isLoading = true; + clusterName: string; resource: Resource; partitions: Partition[]; rowHeight = 40; @@ -21,12 +25,17 @@ export class PartitionListComponent implements OnInit { { prop: 'name', dir: 'asc'} ]; - constructor(protected route: ActivatedRoute) { } + constructor( + protected route: ActivatedRoute, + protected service: ResourceService, + protected helper: HelperService + ) { } ngOnInit() { if (this.route.parent) { - this.resource = this.route.parent.snapshot.data.resource; - this.partitions = this.resource.partitions; + this.clusterName = this.route.parent.snapshot.params.cluster_name; + + this.loadResource(); } } @@ -42,4 +51,19 @@ export class PartitionListComponent implements OnInit { this.table.rowDetail.toggleExpandRow(row); } + + protected loadResource() { + const resourceName = this.resource ? this.resource.name : this.route.parent.snapshot.params.resource_name; + this.isLoading = true; + this.service + .get(this.clusterName, resourceName) + .subscribe( + resource => { + this.resource = resource; + this.partitions = this.resource.partitions; + }, + error => this.helper.showError(error), + () => this.isLoading = false + ); + } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 e2eddf5..d2e75d2 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,35 +1,35 @@ -<md-spinner *ngIf="isLoading"></md-spinner> -<section *ngIf="!isLoading"> +<section> + <md-spinner *ngIf="isLoading"></md-spinner> + <section *ngIf="!isLoading"> + <a md-button + color="accent" + [routerLink]="['../../..', 'resources', resourceName]"> + Other Partitions + </a> - <a md-button - color="accent" - [routerLink]="['../../..', 'resources', resourceName]"> - Other Partitions - </a> - - <hi-key-value-pairs *ngIf="!isLoading" [obj]="resourceOnInstance"> - <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 - #partitionsTable - class="material" - [headerHeight]="rowHeight" - rowHeight="auto" - columnMode="force" - [rows]="resourceOnInstance.partitions" - [sorts]="sorts"> - <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"> - <hi-state-label [state]="row.currentState"></hi-state-label> - </span> - </ng-template> - </ngx-datatable-column> - </ngx-datatable> + <hi-key-value-pairs *ngIf="!isLoading" [obj]="resourceOnInstance"> + <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 + #partitionsTable + class="material" + [headerHeight]="rowHeight" + rowHeight="auto" + columnMode="force" + [rows]="resourceOnInstance.partitions" + [sorts]="sorts"> + <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"> + <hi-state-label [state]="row.currentState"></hi-state-label> + </span> + </ng-template> + </ngx-datatable-column> + </ngx-datatable> + </section> </section> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 ff96bb9..613ee82 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,15 +1,36 @@ <section> <md-toolbar class="mat-elevation-z1"> - <hi-detail-header [cluster]="resource?.cluster" [resource]="resource?.name"></hi-detail-header> + <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> - <hi-key-value-pairs [obj]="resource"> + <md-spinner *ngIf="isLoading"></md-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> <hi-key-value-pair name="State Model" prop="stateModel"></hi-key-value-pair> <hi-key-value-pair name="Ideal Partitions" prop="partitionCount"></hi-key-value-pair> <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> + <md-menu #menu="mdMenu"> + <button md-menu-item *ngIf="resource && resource.enabled" (click)="disableResource()"> + <md-icon>not_interested</md-icon> + <span>Disable this Resource</span> + </button> + <button md-menu-item *ngIf="resource && !resource.enabled" (click)="enableResource()"> + <md-icon>play_circle_outline</md-icon> + <span>Enable this Resource</span> + </button> + <button md-menu-item *ngIf="false" (click)="removeResource()"> + <md-icon>delete</md-icon> + <span>REMOVE this Resource</span> + </button> + </md-menu> </md-toolbar-row> </md-toolbar> <nav md-tab-nav-bar> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 e69de29..265278b 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 @@ -0,0 +1,15 @@ +@import 'client/theme.scss'; + +.offline { + font-size: 14px; + padding-left: 24px; + color: mat-color($hi-warn); +} + +.information { + .mat-spinner { + width: 30px; + height: 30px; + margin: 0 20px; + } +} http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-detail/resource-detail.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.spec.ts b/helix-front/client/app/resource/resource-detail/resource-detail.component.spec.ts index f7fc068..31721ac 100644 --- a/helix-front/client/app/resource/resource-detail/resource-detail.component.spec.ts +++ b/helix-front/client/app/resource/resource-detail/resource-detail.component.spec.ts @@ -1,8 +1,9 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { RouterTestingModule } from '@angular/router/testing'; +import { TestingModule } from '../../../testing/testing.module'; import { ResourceDetailComponent } from './resource-detail.component'; +import { ResourceService } from '../shared/resource.service'; describe('ResourceDetailComponent', () => { let component: ResourceDetailComponent; @@ -11,7 +12,10 @@ describe('ResourceDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - RouterTestingModule + TestingModule + ], + providers: [ + ResourceService ], declarations: [ ResourceDetailComponent ], schemas: [ @@ -28,7 +32,7 @@ describe('ResourceDetailComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + xit('should create', () => { expect(component).toBeTruthy(); }); }); http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-detail/resource-detail.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.ts b/helix-front/client/app/resource/resource-detail/resource-detail.component.ts index 49357b0..9602ebb 100644 --- a/helix-front/client/app/resource/resource-detail/resource-detail.component.ts +++ b/helix-front/client/app/resource/resource-detail/resource-detail.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; import { Resource } from '../shared/resource.model'; +import { HelperService } from '../../shared/helper.service'; +import { ResourceService } from '../shared/resource.service'; @Component({ selector: 'hi-resource-detail', @@ -17,12 +19,68 @@ export class ResourceDetailComponent implements OnInit { { label: 'Configuration', link: 'configs' } ]; + clusterName: string; + resourceName: string; resource: Resource; + isLoading = true; + can = false; - constructor(protected route: ActivatedRoute) { } + constructor( + protected route: ActivatedRoute, + protected router: Router, + protected service: ResourceService, + protected helper: HelperService + ) { } ngOnInit() { - this.resource = this.route.snapshot.data.resource; + this.service.can().subscribe(data => this.can = data); + this.clusterName = this.route.snapshot.params.cluster_name; + this.resourceName = this.route.snapshot.params.resource_name; + this.loadResource(); } + enableResource() { + this.service + .enable(this.clusterName, this.resource.name) + .subscribe( + () => this.loadResource(), + error => this.helper.showError(error) + ); + } + + disableResource() { + this.service + .disable(this.clusterName, this.resource.name) + .subscribe( + () => this.loadResource(), + error => this.helper.showError(error) + ); + } + + removeResource() { + this.helper + .showConfirmation('Are you sure you want to remove this Resource?') + .then(result => { + console.log(result); + if (result) { + this.service + .remove(this.clusterName, this.resourceName) + .subscribe(data => { + this.helper.showSnackBar(`Resource: ${ this.resourceName } removed!`); + this.router.navigate(['..'], { relativeTo: this.route }); + }); + } + }); + } + + protected loadResource() { + this.isLoading = true; + this.service + .get(this.clusterName, this.resourceName) + .subscribe( + resource => this.resource = resource, + error => this.helper.showError(error), + () => this.isLoading = false + ); + } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-list/resource-list.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-list/resource-list.component.spec.ts b/helix-front/client/app/resource/resource-list/resource-list.component.spec.ts index 24a3e61..f954647 100644 --- a/helix-front/client/app/resource/resource-list/resource-list.component.spec.ts +++ b/helix-front/client/app/resource/resource-list/resource-list.component.spec.ts @@ -1,36 +1,21 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { HttpModule } from '@angular/http'; -import { RouterTestingModule } from '@angular/router/testing'; +import { TestingModule } from '../../../testing/testing.module'; import { ResourceListComponent } from './resource-list.component'; import { ResourceService } from '../shared/resource.service'; -import { HelperService } from '../../shared/helper.service'; describe('ResourceListComponent', () => { let component: ResourceListComponent; let fixture: ComponentFixture<ResourceListComponent>; beforeEach(async(() => { - // stub HelperService for test purpose - const helperServiceStub = { - showError: (message: string) => {}, - showSnackBar: (message: string) => {} - }; - TestBed.configureTestingModule({ imports: [ - HttpModule, - RouterTestingModule + TestingModule ], declarations: [ ResourceListComponent ], - providers: [ - ResourceService, - { - provide: HelperService, - useValue: helperServiceStub - } - ], + providers: [ ResourceService ], schemas: [ /* avoid importing modules */ NO_ERRORS_SCHEMA http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.html b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.html new file mode 100644 index 0000000..1a64f88 --- /dev/null +++ b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.html @@ -0,0 +1,6 @@ +<section> + <hi-node-viewer + [loadingIndicator]="isLoading" + [obj]="obj"> + </hi-node-viewer> +</section> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.scss b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.scss new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.spec.ts b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.spec.ts new file mode 100644 index 0000000..a174b15 --- /dev/null +++ b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.spec.ts @@ -0,0 +1,34 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; + +import { TestingModule } from '../../../testing/testing.module'; +import { ResourceNodeViewerComponent } from './resource-node-viewer.component'; +import { ResourceService } from '../shared/resource.service'; + +describe('ResourceNodeViewerComponent', () => { + let component: ResourceNodeViewerComponent; + let fixture: ComponentFixture<ResourceNodeViewerComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ TestingModule ], + declarations: [ ResourceNodeViewerComponent ], + providers: [ ResourceService ], + schemas: [ + /* avoid importing modules */ + NO_ERRORS_SCHEMA + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceNodeViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.ts b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.ts new file mode 100644 index 0000000..5bcbf7c --- /dev/null +++ b/helix-front/client/app/resource/resource-node-viewer/resource-node-viewer.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +import * as _ from 'lodash'; + +import { Resource } from '../shared/resource.model'; +import { HelperService } from '../../shared/helper.service'; +import { ResourceService } from '../shared/resource.service'; + +@Component({ + selector: 'hi-resource-node-viewer', + templateUrl: './resource-node-viewer.component.html', + styleUrls: ['./resource-node-viewer.component.scss'] +}) +export class ResourceNodeViewerComponent implements OnInit { + + isLoading = true; + clusterName: string; + resourceName: string; + resource: Resource; + path: string; + obj: any; + + constructor( + protected route: ActivatedRoute, + protected service: ResourceService, + protected helper: HelperService + ) { } + + ngOnInit() { + if (this.route.snapshot.data.path) { + this.path = this.route.snapshot.data.path; + } + + if (this.route.parent) { + this.clusterName = this.route.parent.snapshot.params.cluster_name; + this.resourceName = this.route.parent.snapshot.params.resource_name; + + this.loadResource(); + } + } + + protected loadResource() { + this.isLoading = true; + this.service + .get(this.clusterName, this.resourceName) + .subscribe( + resource => { + this.resource = resource; + this.obj = _.get(this.resource, this.path); + }, + error => this.helper.showError(error), + () => this.isLoading = false + ); + } +} http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 b8be3e1..b8051cd 100644 --- a/helix-front/client/app/resource/resource.module.ts +++ b/helix-front/client/app/resource/resource.module.ts @@ -14,6 +14,7 @@ import { ResourceDetailComponent } from './resource-detail/resource-detail.compo import { ResourceDetailForInstanceComponent } from './resource-detail-for-instance/resource-detail-for-instance.component'; import { PartitionListComponent } from './partition-list/partition-list.component'; import { PartitionDetailComponent } from './partition-detail/partition-detail.component'; +import { ResourceNodeViewerComponent } from './resource-node-viewer/resource-node-viewer.component'; @NgModule({ imports: [ @@ -33,7 +34,8 @@ import { PartitionDetailComponent } from './partition-detail/partition-detail.co ResourceDetailComponent, ResourceDetailForInstanceComponent, PartitionListComponent, - PartitionDetailComponent + PartitionDetailComponent, + ResourceNodeViewerComponent ] }) export class ResourceModule { } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/shared/resource.model.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/shared/resource.model.ts b/helix-front/client/app/resource/shared/resource.model.ts index 9d848c0..4b38f46 100644 --- a/helix-front/client/app/resource/shared/resource.model.ts +++ b/helix-front/client/app/resource/shared/resource.model.ts @@ -36,12 +36,21 @@ export class Resource { readonly partitionCount: number; readonly replicaCount: number; - readonly partitions: Partition[]; - - // for debugging purpose only readonly idealState: any; readonly externalView: any; + get enabled(): boolean { + // there are two cases meaning enabled both: + // HELIX_ENABLED: true or no such item in idealState + return _.get(this.idealState, 'simpleFields.HELIX_ENABLED') != 'false'; + } + + get online(): boolean { + return !_.isEmpty(this.externalView); + } + + readonly partitions: Partition[]; + constructor(cluster: string, name: string, config: any, idealState: any, externalView: any) { this.cluster = cluster; this.name = name; http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/resource/shared/resource.service.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/resource/shared/resource.service.ts b/helix-front/client/app/resource/shared/resource.service.ts index e8ff5dd..7168fde 100644 --- a/helix-front/client/app/resource/shared/resource.service.ts +++ b/helix-front/client/app/resource/shared/resource.service.ts @@ -80,4 +80,19 @@ export class ResourceService extends HelixService { return ret; }); } + + public enable(clusterName: string, resourceName: string) { + return this + .post(`/clusters/${ clusterName }/resources/${ resourceName }?command=enable`, null); + } + + public disable(clusterName: string, resourceName: string) { + return this + .post(`/clusters/${ clusterName }/resources/${ resourceName }?command=disable`, null); + } + + public remove(clusterName: string, resourceName: string) { + return this + .delete(`/clusters/${ clusterName }/resources/${ resourceName }`); + } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/shared/disabled-label/disabled-label.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.html b/helix-front/client/app/shared/disabled-label/disabled-label.component.html new file mode 100644 index 0000000..9b51af8 --- /dev/null +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.html @@ -0,0 +1 @@ +<span class="status-disabled">{{ text }}</span> http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 new file mode 100644 index 0000000..9b10103 --- /dev/null +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss @@ -0,0 +1,12 @@ +@import '~@angular/material/theming'; + +.status-disabled { + margin-left: 10px; + padding: 4px 8px; + font-size: 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/a595e3f9/helix-front/client/app/shared/disabled-label/disabled-label.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.spec.ts b/helix-front/client/app/shared/disabled-label/disabled-label.component.spec.ts new file mode 100644 index 0000000..0ad4848 --- /dev/null +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DisabledLabelComponent } from './disabled-label.component'; + +describe('DisabledLabelComponent', () => { + let component: DisabledLabelComponent; + let fixture: ComponentFixture<DisabledLabelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DisabledLabelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DisabledLabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/shared/disabled-label/disabled-label.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.ts b/helix-front/client/app/shared/disabled-label/disabled-label.component.ts new file mode 100644 index 0000000..34057cd --- /dev/null +++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'hi-disabled-label', + templateUrl: './disabled-label.component.html', + styleUrls: ['./disabled-label.component.scss'] +}) +export class DisabledLabelComponent implements OnInit { + + @Input() + text: string; + + constructor() { } + + ngOnInit() { + } + +} http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/shared/helper.service.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/helper.service.spec.ts b/helix-front/client/app/shared/helper.service.spec.ts index 23faee2..544405e 100644 --- a/helix-front/client/app/shared/helper.service.spec.ts +++ b/helix-front/client/app/shared/helper.service.spec.ts @@ -1,15 +1,17 @@ import { TestBed, inject } from '@angular/core/testing'; import { HelperService } from './helper.service'; +import { TestingModule } from '../../testing/testing.module'; describe('HelperService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [HelperService] + imports: [ TestingModule ], + providers: [ HelperService ] }); }); - xit('should be created', inject([HelperService], (service: HelperService) => { + it('should be created', inject([HelperService], (service: HelperService) => { expect(service).toBeTruthy(); })); }); http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 12241d9..2bc7cb4 100644 --- a/helix-front/client/app/shared/helper.service.ts +++ b/helix-front/client/app/shared/helper.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { MdDialog, MdSnackBar } from '@angular/material'; import { AlertDialogComponent } from './dialog/alert-dialog/alert-dialog.component'; +import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; @Injectable() export class HelperService { @@ -26,4 +27,15 @@ export class HelperService { }); } + showConfirmation(message: string) { + return this.dialog + .open(ConfirmDialogComponent, { + data: { + title: 'Confirmation', + message: message + } + }) + .afterClosed() + .toPromise(); + } } http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/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 d6ba3ce..4b5b253 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,4 +1,5 @@ <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"> Table View @@ -23,8 +24,8 @@ </md-input-container> <span fxFlex="1 1 auto"></span> <button md-button + *ngIf="unlockable" (click)="editable = !editable" - [disabled]="!unlockable" [mdTooltip]="editable ? 'Click to prevent further changes' : 'Click to make changes'"> <md-icon>{{ editable ? 'lock_open' : 'lock' }}</md-icon> {{ editable ? 'Unlocked' : 'Locked' }} http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/shared/node-viewer/node-viewer.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.ts b/helix-front/client/app/shared/node-viewer/node-viewer.component.ts index 54baa3b..9842568 100644 --- a/helix-front/client/app/shared/node-viewer/node-viewer.component.ts +++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.ts @@ -47,6 +47,9 @@ export class NodeViewerComponent implements OnInit { @Input() unlockable = false; + @Input() + loadingIndicator = false; + private _editable = false; set editable(value: boolean) { this._editable = value; http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/app/shared/shared.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/shared/shared.module.ts b/helix-front/client/app/shared/shared.module.ts index aad868d..017a637 100644 --- a/helix-front/client/app/shared/shared.module.ts +++ b/helix-front/client/app/shared/shared.module.ts @@ -19,6 +19,7 @@ import { NodeViewerComponent } from './node-viewer/node-viewer.component'; import { InputInlineComponent } from './input-inline/input-inline.component'; import { DataTableComponent } from './data-table/data-table.component'; import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; +import { DisabledLabelComponent } from './disabled-label/disabled-label.component'; @NgModule({ imports: [ @@ -41,7 +42,8 @@ import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.c NodeViewerComponent, InputInlineComponent, DataTableComponent, - ConfirmDialogComponent + ConfirmDialogComponent, + DisabledLabelComponent ], entryComponents: [ InputDialogComponent, @@ -59,7 +61,8 @@ import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.c KeyValuePairsComponent, JsonViewerComponent, StateLabelComponent, - NodeViewerComponent + NodeViewerComponent, + DisabledLabelComponent ], providers: [ HelperService http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/testing/stubs.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/testing/stubs.ts b/helix-front/client/testing/stubs.ts new file mode 100644 index 0000000..15e31d3 --- /dev/null +++ b/helix-front/client/testing/stubs.ts @@ -0,0 +1,8 @@ +// stub HelperService for test purpose +export const HelperServiceStub = { + showError: (message: string) => {}, + showSnackBar: (message: string) => {}, + showConfirmation: (message: string): Promise<boolean> => { + return new Promise<boolean>(f => f(false)); + } +}; http://git-wip-us.apache.org/repos/asf/helix/blob/a595e3f9/helix-front/client/testing/testing.module.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/testing/testing.module.ts b/helix-front/client/testing/testing.module.ts new file mode 100644 index 0000000..36ba18d --- /dev/null +++ b/helix-front/client/testing/testing.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { HttpModule } from '@angular/http'; +import { MaterialModule } from '@angular/material'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { HelperService } from '../app/shared/helper.service'; +import { HelperServiceStub } from './stubs'; + +@NgModule({ + imports: [ + HttpModule, + MaterialModule, + RouterTestingModule + ], + providers: [ + { + provide: HelperService, + useValue: HelperServiceStub + } + ], + exports: [ + HttpModule, + MaterialModule, + RouterTestingModule + ] +}) +export class TestingModule { }
