extend credential ui angular

Author: weand

zeppelin-web-angular/src/app/interfaces/credential.ts

@@ -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[];
 }

zeppelin-web-angular/src/app/pages/workspace/credential/credential.component.html

@@ -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 }}
@@ -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>
@@ -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>
@@ -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
@@ -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>

zeppelin-web-angular/src/app/pages/workspace/credential/credential.component.ts

@@ -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({
@@ -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[];
@@ -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);
@@ -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: [[], []]
     });
   }
 }

zeppelin-web-angular/src/app/pages/workspace/credential/credential.module.ts

@@ -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,
@@ -44,6 +46,7 @@ import { CredentialComponent } from './credential.component';
     NzIconModule,
     NzDividerModule,
     NzInputModule,
+    NzSelectModule,
     NzMessageModule,
     NzTableModule,
     NzPopconfirmModule,

zeppelin-web-angular/src/app/pages/workspace/credential/permissions/permissions.component.html

@@ -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>

zeppelin-web-angular/src/app/pages/workspace/credential/permissions/permissions.component.less

@@ -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({
+
+});

zeppelin-web-angular/src/app/pages/workspace/credential/permissions/permissions.component.ts

@@ -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();
+  }
+}