[ZEPPELIN-4399] Add credential page

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

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export interface Credential {
+  userCredentials: {
+    [key: string]: CredentialItem;
+  };
+}
+
+export interface CredentialItem {
+  username: string;
+  password: string;
+}
+
+export interface CredentialForm {
+  entity: string;
+  password: string;
+  username: string;
+}

zeppelin-web-angular/src/app/interfaces/public-api.ts

@@ -15,3 +15,4 @@ export * from './trash-folder-id';
 export * from './interpreter';
 export * from './message-interceptor';
 export * from './security';
+export * from './credential';

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

@@ -0,0 +1,28 @@
+/*
+ * 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 { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CredentialComponent } from './credential.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CredentialComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CredentialRoutingModule {}

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

@@ -0,0 +1,134 @@
+<!--
+  ~ 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.
+  -->
+
+<zeppelin-page-header
+  title="Credentials"
+  [extra]="headerExtra"
+  [description]="credentialsDescription">
+  <ng-template #credentialsDescription>
+    Manage your credentials. You can add new credential information. <a [href]="docsLink" target="_blank">
+    <i
+      nz-icon
+      nz-tooltip
+      nzTitle="Learn more"
+      nzType="question-circle"
+      nzTheme="outline"
+    ></i>
+  </a>
+
+  </ng-template>
+  <ng-template #headerExtra>
+    <button
+      class="repository-trigger"
+      nz-button
+      [nzType]="showAdd ? 'primary' : 'default'"
+      (click)="triggerAdd()">
+      <i nz-icon nzType="plus" nzTheme="outline"></i>
+      Add
+    </button>
+  </ng-template>
+  <div [@collapseMotion]="showAdd ? 'expanded' : 'collapsed' ">
+    <nz-divider nzType="horizontal"></nz-divider>
+    <h2>Add new credential</h2>
+    <form nz-form nzLayout="inline" [formGroup]="addForm" (ngSubmit)="submitForm()">
+      <div nz-row>
+        <div nz-col [nzSpan]="16">
+          <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="[Group].[Name]"/>
+              <nz-autocomplete nzBackfill #auto>
+                <nz-auto-option *ngFor="let option of interpreterFilteredNames" [nzValue]="option">
+                  {{ option }}
+                </nz-auto-option>
+              </nz-autocomplete>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item>
+            <nz-form-label>Username</nz-form-label>
+            <nz-form-control nzErrorTip="Please input username!">
+              <input formControlName="username" nz-input placeholder="Username"/>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item>
+            <nz-form-label>Password</nz-form-label>
+            <nz-form-control nzErrorTip="Please input Password!">
+              <input formControlName="password" nz-input type="password" placeholder="Password"/>
+            </nz-form-control>
+          </nz-form-item>
+        </div>
+        <div class="new-actions" nz-col [nzSpan]="8">
+          <nz-form-item>
+            <nz-form-control>
+              <button nz-button nzType="primary" [disabled]="!addForm.valid || adding">Save</button>
+              <button nz-button type="button" (click)="cancelAdd()">Cancel</button>
+            </nz-form-control>
+          </nz-form-item>
+        </div>
+      </div>
+    </form>
+  </div>
+</zeppelin-page-header>
+<div class="content">
+  <nz-table nzSize="small"
+            [nzData]="credentialControls"
+            [nzFrontPagination]="false"
+            [nzShowPagination]="false">
+    <thead>
+    <tr>
+      <th>Entity</th>
+      <th>Username</th>
+      <th>Password</th>
+      <th nzWidth="225px" class="actions-head">Actions</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let control of credentialControls">
+      <ng-container *ngIf="control.get('entity')?.value as entity" [formGroup]="control">
+        <td>{{entity}}</td>
+
+        <ng-container *ngIf="isEditing(control); else credentialDisplay">
+          <td><input nz-input formControlName="username"></td>
+          <td><input nz-input type="password" formControlName="password"></td>
+          <td class="credential-actions">
+            <button nz-button nzType="primary" (click)="saveCredential(control)"><i nz-icon nzType="save"
+                                                                                    nzTheme="outline"></i> Save
+            </button>
+            <button nz-button (click)="unsetEditable(control)"><i nz-icon nzType="close" nzTheme="outline"></i> Cancel
+            </button>
+          </td>
+        </ng-container>
+
+        <ng-template #credentialDisplay>
+          <td>{{control.get('username')?.value}}</td>
+          <td><strong>**********</strong></td>
+          <td class="credential-actions">
+            <button nz-button (click)="setEditable(control)"><i nz-icon nzType="edit" nzTheme="outline"></i> Edit
+            </button>
+            <button nz-button
+                    nz-popconfirm
+                    nzPopconfirmTitle="Do you want to delete this credential information?"
+                    (nzOnConfirm)="removeCredential(control)">
+              <i nz-icon nzType="delete" nzTheme="outline"></i> Remove
+            </button>
+          </td>
+        </ng-template>
+      </ng-container>
+    </tr>
+
+    </tbody>
+  </nz-table>
+</div>

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

@@ -0,0 +1,39 @@
+/*
+ * 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({
+  ::ng-deep {
+    .ant-form-inline .ant-form-item-with-help {
+      margin-bottom: 0;
+    }
+
+    .credential-actions, .new-actions {
+      text-align: right;
+      button+button {
+        margin-left: 8px;
+      }
+    }
+
+    .actions-head {
+      text-align: right;
+    }
+  }
+
+  .content {
+    padding: @card-padding-base / 2;
+    nz-table {
+      background: @card-background;
+    }
+  }
+});