Skip to content

Commit

Permalink
extend credential ui angular
Browse files Browse the repository at this point in the history
  • Loading branch information
weand authored and Reamer committed Oct 28, 2024
1 parent 6a03eb1 commit a5a7eb2
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 13 deletions.
8 changes: 5 additions & 3 deletions zeppelin-web-angular/src/app/interfaces/credential.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,20 @@
*/

export interface Credential {
userCredentials: {
[key: string]: CredentialItem;
};
[key: string]: CredentialItem;
}

export interface CredentialItem {
username: string;
password: string;
readers: string[];
owners: string[];
}

export interface CredentialForm {
entity: string;
password: string;
username: string;
readers: string[];
owners: string[];
}
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@
<h2>Add new credential</h2>
<form nz-form nzLayout="inline" [formGroup]="addForm" (ngSubmit)="submitForm()">
<div nz-row>
<div nz-col [nzSpan]="16">
<div nz-col [nzSpan]="20">
<nz-form-item>
<nz-form-label>Entity</nz-form-label>
<nz-form-control nzErrorTip="Please input entity!">
<input [nzAutocomplete]="auto"
(input)="onEntityInput($event)"
formControlName="entity"
nz-input
placeholder="Interpreter Name"/>
placeholder="Credential entity (e.g. Interpreter Name)"/>
<nz-autocomplete nzBackfill #auto>
<nz-auto-option *ngFor="let option of interpreterFilteredNames" [nzValue]="option">
{{ option }}
Expand All @@ -69,8 +69,30 @@ <h2>Add new credential</h2>
<input formControlName="password" nz-input type="password" placeholder="Password"/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label>Owners</nz-form-label>
<nz-form-control>
<zeppelin-credential-permission-select
mode="edit"
reference="AddFormOwners"
[permission]="{ items: addForm.get('owners').value }"
(permissionsBack)="addForm.patchValue({owners: $event})">
</zeppelin-credential-permission-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label>Readers</nz-form-label>
<nz-form-control>
<zeppelin-credential-permission-select
mode="edit"
reference="AddFormReaders"
[permission]="{ items: addForm.get('readers').value }"
(permissionsBack)="addForm.patchValue({readers: $event})">
</zeppelin-credential-permission-select>
</nz-form-control>
</nz-form-item>
</div>
<div class="new-actions" nz-col [nzSpan]="8">
<div class="new-actions" nz-col [nzSpan]="4">
<nz-form-item>
<nz-form-control>
<button nz-button nzType="primary" [disabled]="!addForm.valid || adding">Save</button>
Expand All @@ -92,6 +114,8 @@ <h2>Add new credential</h2>
<th>Entity</th>
<th>Username</th>
<th>Password</th>
<th>Owners</th>
<th>Readers</th>
<th nzWidth="225px" class="actions-head">Actions</th>
</tr>
</thead>
Expand All @@ -103,6 +127,22 @@ <h2>Add new credential</h2>
<ng-container *ngIf="isEditing(control); else credentialDisplay">
<td><input nz-input formControlName="username"></td>
<td><input nz-input type="password" formControlName="password"></td>
<td>
<zeppelin-credential-permission-select
mode="edit"
[reference]="entity + 'Owners'"
[permission]="{ items: control.get('owners')?.value }"
(permissionsBack)="permissionSelect(control, 'owners', $event)">
</zeppelin-credential-permission-select>
</td>
<td>
<zeppelin-credential-permission-select
mode="edit"
[reference]="entity + 'Readers'"
[permission]="{ items: control.get('readers')?.value }"
(permissionsBack)="permissionSelect(control, 'readers', $event)">
</zeppelin-credential-permission-select>
</td>
<td class="credential-actions">
<button nz-button nzType="primary" (click)="saveCredential(control)"><i nz-icon nzType="save"
nzTheme="outline"></i> Save
Expand All @@ -115,6 +155,20 @@ <h2>Add new credential</h2>
<ng-template #credentialDisplay>
<td>{{control.get('username')?.value}}</td>
<td><strong>**********</strong></td>
<td>
<zeppelin-credential-permission-select
mode="view"
[reference]="entity + 'Owners'"
[permission]="{ items: control.get('owners')?.value }">
</zeppelin-credential-permission-select>
</td>
<td>
<zeppelin-credential-permission-select
mode="view"
[reference]="entity + 'Readers'"
[permission]="{ items: control.get('readers')?.value }">
</zeppelin-credential-permission-select>
</td>
<td class="credential-actions">
<button nz-button (click)="setEditable(control)"><i nz-icon nzType="edit" nzTheme="outline"></i> Edit
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';

import { finalize } from 'rxjs/operators';

import { CredentialForm } from '@zeppelin/interfaces';
import { CredentialForm, ITicket } from '@zeppelin/interfaces';
import { CredentialService, InterpreterService, TicketService } from '@zeppelin/services';

@Component({
Expand All @@ -36,6 +36,7 @@ export class CredentialComponent implements OnInit {
editFlags: Map<string, CredentialForm> = new Map();
credentialFormArray: FormArray = this.fb.array([]);
docsLink: string;
defaultOwners: string[];

get credentialControls(): FormGroup[] {
return this.credentialFormArray.controls as FormGroup[];
Expand Down Expand Up @@ -140,13 +141,15 @@ export class CredentialComponent implements OnInit {

getCredentials() {
this.credentialService.getCredentials().subscribe(data => {
const controls = [...Object.entries(data.userCredentials)].map(e => {
const controls = [...Object.entries(data)].map(e => {
const entity = e[0];
const { username, password } = e[1];
const { username, password, owners, readers } = e[1];
return this.fb.group({
entity: [entity, [Validators.required]],
username: [username, [Validators.required]],
password: [password, [Validators.required]]
password: [password, [Validators.required]],
owners: [owners, []],
readers: [readers, []]
});
});
this.credentialFormArray = this.fb.array(controls);
Expand Down Expand Up @@ -185,18 +188,30 @@ export class CredentialComponent implements OnInit {
this.addForm.reset({
entity: null,
username: null,
password: null
password: null,
owners: this.defaultOwners,
readers: []
});
this.cdr.markForCheck();
}

permissionSelect(form: FormGroup, field: string, value: string[]) {
const obj = {};
obj[field] = value;
form.patchValue(obj);
}

ngOnInit(): void {
this.getCredentials();
this.getInterpreterNames();
const ticket = this.ticketService.originTicket;
this.defaultOwners = ticket.ticket === 'anonymous' ? [] : [ticket.principal];
this.addForm = this.fb.group({
entity: [null, [Validators.required]],
username: [null, [Validators.required]],
password: [null, [Validators.required]]
password: [null, [Validators.required]],
owners: [this.defaultOwners, []],
readers: [[], []]
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { CredentialRoutingModule } from './credential-routing.module';
import { CredentialComponent } from './credential.component';
import { CredentialPermissionSelectComponent } from './permissions/permissions.component';

@NgModule({
declarations: [CredentialComponent],
declarations: [CredentialComponent, CredentialPermissionSelectComponent],
imports: [
CommonModule,
CredentialRoutingModule,
Expand All @@ -44,6 +46,7 @@ import { CredentialComponent } from './credential.component';
NzIconModule,
NzDividerModule,
NzInputModule,
NzSelectModule,
NzMessageModule,
NzTableModule,
NzPopconfirmModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!--
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~ http://www.apache.org/licenses/LICENSE-2.0
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<nz-select
nzSize="small"
[(ngModel)]="permission.items"
nzServerSearch
(nzOnSearch)="searchUser($event)"
nzMode="tags"
style="width: 100%;"
nzPlaceHolder=""
nzAllowClear
[name]="reference"
[nzDisabled]="mode === 'view'"
(ngModelChange)="onChange()">
<nz-option *ngFor="let item of permission.items" [nzLabel]="item" [nzValue]="item"></nz-option>
<nz-option-group [nzLabel]="item.text" *ngFor="let item of listOfUserAndRole">
<nz-option *ngFor="let o of item.children" [nzLabel]="o" [nzValue]="o"></nz-option>
</nz-option-group>
</nz-select>
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@import "theme-mixin";

.themeMixin({

});
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';

import { DestroyHookComponent } from '@zeppelin/core';
import { SecurityService } from '@zeppelin/services';

@Component({
selector: 'zeppelin-credential-permission-select',
templateUrl: './permissions.component.html',
styleUrls: ['./permissions.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CredentialPermissionSelectComponent extends DestroyHookComponent {
@Input() reference: string;
@Input() permission: { items: string[] };
@Input() mode: 'create' | 'view' | 'edit' = 'view';
@Output() readonly permissionsBack = new EventEmitter<string[]>();
listOfUserAndRole = [];

searchUser(search: string) {
if (!search) {
return;
}
this.securityService.searchUsers(search).subscribe(data => {
const results = [];
if (data.users.length) {
results.push({
text: 'Users :',
children: data.users
});
}
if (data.roles.length) {
results.push({
text: 'Roles :',
children: data.roles
});
}
this.listOfUserAndRole = results;
this.cdr.markForCheck();
});
}

onChange() {
this.permissionsBack.emit(this.permission.items);
}

constructor(private securityService: SecurityService, private cdr: ChangeDetectorRef) {
super();
}
}

0 comments on commit a5a7eb2

Please sign in to comment.