Repository: knox Updated Branches: refs/heads/master 5af2d25f6 -> 834d64325
KNOX-1040 - Separated the provider config selection modal into its own component. Project: http://git-wip-us.apache.org/repos/asf/knox/repo Commit: http://git-wip-us.apache.org/repos/asf/knox/commit/834d6432 Tree: http://git-wip-us.apache.org/repos/asf/knox/tree/834d6432 Diff: http://git-wip-us.apache.org/repos/asf/knox/diff/834d6432 Branch: refs/heads/master Commit: 834d6432572c8c60477a965b5cf2aeac1b8db073 Parents: 5af2d25 Author: Phil Zampino <pzamp...@apache.org> Authored: Fri Feb 2 22:01:48 2018 -0500 Committer: Phil Zampino <pzamp...@apache.org> Committed: Sun Feb 4 16:02:45 2018 -0500 ---------------------------------------------------------------------- gateway-admin-ui/src/app/app.module.ts | 6 +- .../provider-config-selector.component.css | 0 .../provider-config-selector.component.html | 25 +++++++++ .../provider-config-selector.component.spec.ts | 25 +++++++++ .../provider-config-selector.component.ts | 58 ++++++++++++++++++++ .../resource-detail.component.html | 27 ++------- .../resource-detail.component.ts | 14 +++-- .../src/app/resource/resource.component.ts | 8 ++- .../src/app/resource/resource.service.ts | 50 ++++++++++------- .../src/app/topology-detail.component.ts | 6 +- 10 files changed, 163 insertions(+), 56 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/app.module.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/app.module.ts b/gateway-admin-ui/src/app/app.module.ts index 173a638..fc682a3 100644 --- a/gateway-admin-ui/src/app/app.module.ts +++ b/gateway-admin-ui/src/app/app.module.ts @@ -37,7 +37,8 @@ import { ResourceTypesService } from './resourcetypes/resourcetypes.service'; import { ResourceComponent } from './resource/resource.component'; import { ResourceService } from './resource/resource.service'; import { DescriptorComponent } from './descriptor/descriptor.component'; -import { ResourceDetailComponent } from './resource-detail/resource-detail.component' +import { ResourceDetailComponent } from './resource-detail/resource-detail.component'; +import { ProviderConfigSelectorComponent } from './provider-config-selector/provider-config-selector.component' @NgModule({ imports: [ BrowserModule, @@ -57,7 +58,8 @@ import { ResourceDetailComponent } from './resource-detail/resource-detail.compo ResourcetypesComponent, ResourceComponent, DescriptorComponent, - ResourceDetailComponent + ResourceDetailComponent, + ProviderConfigSelectorComponent ], providers: [ TopologyService, GatewayVersionService, http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.css ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.css b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.css new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.html ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.html b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.html new file mode 100644 index 0000000..9a9a5c2 --- /dev/null +++ b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.html @@ -0,0 +1,25 @@ +<bs-modal (onClose)="onClose()" #chooseProviderConfigModal> + <bs-modal-header [showDismiss]="true"> + <label class="modal-title">Choose a Provider Configuration</label> + </bs-modal-header> + <bs-modal-body> + <div class="form-group"> + <select autofocus required class="md-select form-control" [(ngModel)]="selectedName" id="select" > + <option *ngFor="let pc of getProviderConfigs()" + class="md-option" + [value]="getReferenceName(pc.name)" + [selected]="getReferenceName(pc.name) === selectedName">{{getReferenceName(pc.name)}}</option> + </select> + </div> + </bs-modal-body> + <bs-modal-footer> + <button type="button" + class="btn btn-default btn-sm" + data-dismiss="chooseProviderConfigModal" + (click)="chooseProviderConfigModal.dismiss()">Cancel</button> + <button type="button" + class="btn btn-primary btn-sm" + [disabled]="!selectedName" + (click)="chooseProviderConfigModal.close()">Ok</button> + </bs-modal-footer> +</bs-modal> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.spec.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.spec.ts b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.spec.ts new file mode 100644 index 0000000..33c0710 --- /dev/null +++ b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProviderConfigSelectorComponent } from './provider-config-selector.component'; + +describe('ProviderConfigSelectorComponent', () => { + let component: ProviderConfigSelectorComponent; + let fixture: ComponentFixture<ProviderConfigSelectorComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProviderConfigSelectorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProviderConfigSelectorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.ts b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.ts new file mode 100644 index 0000000..bbc86ff --- /dev/null +++ b/gateway-admin-ui/src/app/provider-config-selector/provider-config-selector.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ResourceService } from "../resource/resource.service"; +import { Resource } from "../resource/resource"; +import { BsModalComponent } from "ng2-bs3-modal"; +import { Descriptor } from "../resource-detail/descriptor"; + + +@Component({ + selector: 'app-provider-config-selector', + templateUrl: './provider-config-selector.component.html', + styleUrls: ['./provider-config-selector.component.css'] +}) +export class ProviderConfigSelectorComponent implements OnInit { + + @ViewChild('chooseProviderConfigModal') + private childModal: BsModalComponent; + + private providerConfigs: Resource[]; + + // The descriptor whose provider configuration reference should be updated as a result of the selection in this component + private descriptor: Descriptor; + + selectedName: string; + + constructor(private resourceService: ResourceService) { + } + + ngOnInit() { } + + open(desc: Descriptor, size?: string) { + this.descriptor = desc; + this.selectedName = desc.providerConfig; // Set the default selection based on the current ref in the descriptor + + // Load the available provider configs every time this modal is open + this.resourceService.getResources('Provider Configurations').then(result => this.providerConfigs = result); + + this.childModal.open(size); + } + + onClose() { + // Assign the descriptor's provider configuration to the selection + this.descriptor.setProviderConfig(this.selectedName); + } + + getProviderConfigs(): Resource[] { + return this.providerConfigs; + } + + getReferenceName(providerConfigName: string): string { + let refName = providerConfigName; + let extIndex = providerConfigName.lastIndexOf('.'); + if (extIndex > 0) { + refName = providerConfigName.substring(0, extIndex); + } + return refName; + } + +} http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/resource-detail/resource-detail.component.html ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/resource-detail/resource-detail.component.html b/gateway-admin-ui/src/app/resource-detail/resource-detail.component.html index 79d3ba8..3303341 100644 --- a/gateway-admin-ui/src/app/resource-detail/resource-detail.component.html +++ b/gateway-admin-ui/src/app/resource-detail/resource-detail.component.html @@ -52,31 +52,14 @@ <input type="text" class="col-md-sm form-control input-sm" [(ngModel)]="descriptor.providerConfig" id="textbox"/> </span> <span class="col-md-1 pull-left"> - <button id="chooseProviderConfig" (click)="chooseProviderConfigModal.open('sm')" class="btn btn-default btn-xs glyphicon glyphicon-edit" type="submit"> - <!-- <span class="glyphicon glyphicon-edit"></span>--> + <button id="chooseProviderConfig" + class="btn btn-default btn-xs glyphicon glyphicon-edit" + (click)="chooseProviderConfigModal.open(descriptor, 'sm')" + type="submit"> </button> </span> </div> - <bs-modal (onClose)="descriptor.setProviderConfig(newProviderConfigRef)" #chooseProviderConfigModal> - <!--<bs-modal-header [show-close]="true">--> - <bs-modal-header> - <label class="modal-title">Choose a Provider Configuration</label> - </bs-modal-header> - <bs-modal-body> - <div class="form-group"> - <select autofocus required class="md-select form-control" required [(ngModel)]="newProviderConfigRef" id="select" > - <option *ngFor="let pc of availableProviderConfigs" - class="md-option" - [value]="pc.name" - [selected]="pc.name === descriptor.providerConfig">{{pc.name}}</option> - </select> - </div> - </bs-modal-body> - <bs-modal-footer> - <button type="button" class="btn btn-default btn-sm" data-dismiss="chooseProviderConfigModal" (click)="chooseProviderConfigModal.dismiss()">Cancel</button> - <button type="button" class="btn btn-primary btn-sm" [disabled]="!newProviderConfigRef" (click)="chooseProviderConfigModal.close()">Ok</button> - </bs-modal-footer> - </bs-modal> + <app-provider-config-selector #choosePC></app-provider-config-selector> </div> <br><br> http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/resource-detail/resource-detail.component.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/resource-detail/resource-detail.component.ts b/gateway-admin-ui/src/app/resource-detail/resource-detail.component.ts index acbe71b..3a85574 100644 --- a/gateway-admin-ui/src/app/resource-detail/resource-detail.component.ts +++ b/gateway-admin-ui/src/app/resource-detail/resource-detail.component.ts @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit} from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { ResourceService } from '../resource/resource.service'; import { Resource } from '../resource/resource'; import { ProviderConfig } from './provider-config'; @@ -25,6 +25,9 @@ import { parseString } from 'xml2js'; import 'brace/theme/monokai'; import 'brace/mode/xml'; +import { ProviderConfigSelectorComponent } from "../provider-config-selector/provider-config-selector.component"; + + @Component({ selector: 'app-resource-detail', templateUrl: './resource-detail.component.html', @@ -49,6 +52,9 @@ export class ResourceDetailComponent implements OnInit { availableProviderConfigs: Resource[]; + @ViewChild('choosePC') + chooseProviderConfigModal: ProviderConfigSelectorComponent; + constructor(private resourceService: ResourceService) { } @@ -133,7 +139,7 @@ export class ResourceDetailComponent implements OnInit { }); } } catch (e) { - console.log('Error parsing resource content: ' + e); + console.error('Error parsing ' + res.name + ' content: ' + e); } } } @@ -142,7 +148,7 @@ export class ResourceDetailComponent implements OnInit { this.resourceContent = content; if (this.resourceContent) { try { - console.log('Parsing descriptor ' + res.name); + console.debug('ResourceDetailComponent --> setDescriptorContent() --> Parsing descriptor ' + res.name); let contentObj; if (res.name.endsWith('json')) { contentObj = JSON.parse(this.resourceContent); @@ -161,7 +167,7 @@ export class ResourceDetailComponent implements OnInit { } this.descriptor = tempDesc; } catch (e) { - console.log('Error parsing resource content: ' + e); + console.error('Error parsing '+ res.name + ' content: ' + e); } } } http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/resource/resource.component.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/resource/resource.component.ts b/gateway-admin-ui/src/app/resource/resource.component.ts index c46b732..264e03e 100644 --- a/gateway-admin-ui/src/app/resource/resource.component.ts +++ b/gateway-admin-ui/src/app/resource/resource.component.ts @@ -51,10 +51,12 @@ export class ResourceComponent implements OnInit { this.resources = []; // Clear the table before loading the new resources this.resourceService.getResources(resType).then(resources => { this.resources = resources; - console.log('Found ' + resources.length + ' ' + this.resourceType + ' resources'); - for (let resource of resources) { - console.log('Resource: ' + resource.name); + + let debugMsg = 'ResourceComponent --> Found ' + resources.length + ' ' + resType + ' resources\n'; + for (let res of resources) { + debugMsg += ' ' + res.name + '\n'; } + console.debug(debugMsg); }); } http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/resource/resource.service.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/resource/resource.service.ts b/gateway-admin-ui/src/app/resource/resource.service.ts index 009ca2a..d6c8327 100644 --- a/gateway-admin-ui/src/app/resource/resource.service.ts +++ b/gateway-admin-ui/src/app/resource/resource.service.ts @@ -55,8 +55,8 @@ export class ResourceService { } getProviderConfigResources(): Promise<Resource[]> { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); + let headers = this.addJsonHeaders(new HttpHeaders()); + this.logHeaders(headers); return this.http.get(this.providersUrl, { headers: headers }) .toPromise() .then(response => response['items'] as Resource[]) @@ -64,8 +64,8 @@ export class ResourceService { } getDescriptorResources(): Promise<Resource[]> { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); + let headers = this.addJsonHeaders(new HttpHeaders()); + this.logHeaders(headers); return this.http.get(this.descriptorsUrl, { headers: headers }) .toPromise() .then(response => response['items'] as Resource[]) @@ -73,8 +73,8 @@ export class ResourceService { } getTopologyResources(): Promise<Resource[]> { - let headers = new HttpHeaders(); - headers = this.addJsonHeaders(headers); + let headers = this.addJsonHeaders(new HttpHeaders()); + this.logHeaders(headers); return this.http.get(this.topologiesUrl, { headers: headers }) .toPromise() .then(response => response['topologies'].topology as Resource[]) @@ -84,38 +84,45 @@ export class ResourceService { getResource(resType: string, res : Resource): Promise<string> { let headers = new HttpHeaders(); headers = (resType === 'Topologies') ? this.addXmlHeaders(headers) : this.addHeaders(headers, res.name); + this.logHeaders(headers); return this.http.get(res.href, { headers: headers, responseType: 'text' }) .toPromise() - .then(response => { return response; }) + .then(response => { + console.debug('ResourceService --> getResource() --> response: ' + response); + return response; + }) .catch(this.handleError); } saveResource(url: string, xml : string): Promise<string> { - let xheaders = new HttpHeaders(); - this.addXmlHeaders(xheaders); - this.addCsrfHeaders(xheaders); - return this.http.put(url, xml, {headers: xheaders}) + let headers = this.addXmlHeaders(new HttpHeaders()); + headers = this.addCsrfHeaders(headers); + this.logHeaders(headers); + + return this.http.put(url, xml, {headers: headers}) .toPromise() .then(() => xml) .catch(this.handleError); } createResource(name: string, xml : string): Promise<string> { - let xheaders = new HttpHeaders(); - this.addXmlHeaders(xheaders); - this.addCsrfHeaders(xheaders); + let headers = this.addXmlHeaders(new HttpHeaders()); + headers = this.addCsrfHeaders(headers); + this.logHeaders(headers); + let url = this.topologiesUrl + "/" + name; - return this.http.put(url, xml, {headers: xheaders}) + return this.http.put(url, xml, {headers: headers}) .toPromise() .then(() => xml) .catch(this.handleError); } deleteResource(href: string): Promise<string> { - let headers = new HttpHeaders(); - this.addJsonHeaders(headers); - this.addCsrfHeaders(headers); + let headers = this.addJsonHeaders(new HttpHeaders()); + headers = this.addCsrfHeaders(headers); + this.logHeaders(headers); + return this.http.delete(href, { headers: headers } ) .toPromise() .then(response => response) @@ -184,15 +191,16 @@ export class ResourceService { } private handleError(error: any): Promise<any> { - console.error('An error occurred', error); // for demo purposes only + console.error('ResourceService --> An error occurred', error); return Promise.reject(error.message || error); } private logHeaders(headers: HttpHeaders) { - console.log('Header count: ' + headers.keys().length); + let debugMsg = 'ResourceService --> Request header count: ' + headers.keys().length + '\n'; headers.keys().forEach(key => { - console.log('Header: ' + key + '=' + headers.get(key)); + debugMsg += ' ' + key + '=' + headers.get(key) + '\n'; }); + console.debug(debugMsg); } } http://git-wip-us.apache.org/repos/asf/knox/blob/834d6432/gateway-admin-ui/src/app/topology-detail.component.ts ---------------------------------------------------------------------- diff --git a/gateway-admin-ui/src/app/topology-detail.component.ts b/gateway-admin-ui/src/app/topology-detail.component.ts index a4e4713..c21e578 100644 --- a/gateway-admin-ui/src/app/topology-detail.component.ts +++ b/gateway-admin-ui/src/app/topology-detail.component.ts @@ -54,8 +54,7 @@ import 'brace/mode/xml'; </div> <bs-modal (onClose)="createTopology()" #duplicateModal> - <!--<bs-modal-header [show-close]="true">--> - <bs-modal-header> + <bs-modal-header [showDismiss]="true"> <h4 class="modal-title">Create a copy</h4> </bs-modal-header> <bs-modal-body> @@ -70,8 +69,7 @@ import 'brace/mode/xml'; </bs-modal-footer> </bs-modal> <bs-modal (onClose)="deleteTopology()" #deleteConfirmModal> - <!--<bs-modal-header [show-close]="true">--> - <bs-modal-header> + <bs-modal-header [showDismiss]="true"> <h4 class="modal-title">Deleting Topology {{titleSuffix}}</h4> </bs-modal-header> <bs-modal-body>
