extend credentials ui

weand · Reamer · commit bfb84fd0be0b · 2023-08-14T16:26:16.000+02:00
diff --git a/zeppelin-web/src/app/credential/credential-item.directive.js b/zeppelin-web/src/app/credential/credential-item.directive.js
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+angular.module('zeppelinWebApp').directive('credentialItem', CredentialItemDirective);
+
+function CredentialItemDirective($timeout) {
+  'ngInject';
+
+  return {
+    restrict: 'A',
+    link: function(scope, element, attr) {
+      if (scope.$last === true) {
+        $timeout(function() {
+          let id = 'ngRenderFinished';
+          scope.$emit(id);
+        });
+      }
+    },
+  };
+}
diff --git a/zeppelin-web/src/app/credential/credential.controller.js b/zeppelin-web/src/app/credential/credential.controller.js
@@ -26,6 +26,8 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
   $scope.entity = '';
   $scope.password = '';
   $scope.username = '';
+  $scope.readers = [];
+  $scope.owners = [];
 
   $scope.hasCredential = () => {
     return Array.isArray($scope.credentialInfo) && $scope.credentialInfo.length;
@@ -35,7 +37,7 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
     $http.get(baseUrlSrv.getRestApiBase() + '/credential')
       .success(function(data, status, headers, config) {
         $scope.credentialInfo.length = 0; // keep the ref while cleaning
-        const returnedCredentials = data.body.userCredentials;
+        const returnedCredentials = data.body;
 
         for (let key in returnedCredentials) {
           if (returnedCredentials.hasOwnProperty(key)) {
@@ -44,6 +46,8 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
               entity: key,
               password: value.password,
               username: value.username,
+              readers: value.readers,
+              owners: value.owners,
             });
           }
         }
@@ -75,8 +79,16 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
       'entity': $scope.entity,
       'username': $scope.username,
       'password': $scope.password,
+      'owners': angular.element('#NewCredentialOwners').val(),
+      'readers': angular.element('#NewCredentialReaders').val(),
     };
 
+    for (let i = 0; i < newCredential.owners.length; i++) {
+      newCredential.owners[i] = newCredential.owners[i].trim();
+    }
+    for (let i = 0; i < newCredential.readers.length; i++) {
+      newCredential.readers[i] = newCredential.readers[i].trim();
+    }
     $http.put(baseUrlSrv.getRestApiBase() + '/credential', newCredential)
       .success(function(data, status, headers, config) {
         showToast('Successfully saved credentials.', 'success');
@@ -115,8 +127,21 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
   $scope.toggleAddNewCredentialInfo = function() {
     if ($scope.showAddNewCredentialInfo) {
       $scope.showAddNewCredentialInfo = false;
+      angular.element('#NewCredentialOwners').select2({});
+      angular.element('#NewCredentialReaders').select2({});
     } else {
+      let initialOwner = $rootScope.ticket.principal === 'anonymous' ? [] : [$rootScope.ticket.principal];
       $scope.showAddNewCredentialInfo = true;
+      $scope.owners = initialOwner;
+      $scope.readers = [];
+      angular.element('#NewCredentialOwners').select2(getSelectJson());
+      angular.element('#NewCredentialReaders').select2(getSelectJson());
+      if (initialOwner.length) {
+        let initialOwnerOption = new Option(initialOwner[0], initialOwner[0], true, false);
+        angular.element('#NewCredentialOwners').append(initialOwnerOption).trigger('change');
+      }
+      angular.element('#NewCredentialOwners').val(null).trigger('change');
+      angular.element('#NewCredentialReaders').val(null).trigger('change');
     }
   };
 
@@ -129,12 +154,19 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
     $scope.entity = '';
     $scope.username = '';
     $scope.password = '';
+    $scope.readers = [];
+    $scope.owners = [];
   };
 
   $scope.copyOriginCredentialsInfo = function() {
     showToast('Since entity is a unique key, you can edit only username & password', 'info');
   };
 
+  let renderOwnersReadersSelect2 = function(entity) {
+    angular.element('#' + entity + 'Owners').select2(getSelectJson());
+    angular.element('#' + entity + 'Readers').select2(getSelectJson());
+  };
+
   $scope.updateCredentialInfo = function(form, data, entity) {
     if (!data.username || !data.password) {
       showToast('Username \\ Password can not be empty.', 'danger');
@@ -145,18 +177,32 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
       entity: entity,
       username: data.username,
       password: data.password,
+      owners: angular.element('#' + entity + 'Owners').val(),
+      readers: angular.element('#' + entity + 'Readers').val(),
     };
 
+    for (let i = 0; i < credential.owners.length; i++) {
+      credential.owners[i] = credential.owners[i].trim();
+    }
+    for (let i = 0; i < credential.readers.length; i++) {
+      credential.readers[i] = credential.readers[i].trim();
+    }
     $http.put(baseUrlSrv.getRestApiBase() + '/credential/', credential)
       .success(function(data, status, headers, config) {
         const index = $scope.credentialInfo.findIndex((elem) => elem.entity === entity);
         $scope.credentialInfo[index] = credential;
+        setTimeout(function() {
+          renderOwnersReadersSelect2(entity);
+        }, 100);
         return true;
       })
       .error(function(data, status, headers, config) {
         showToast('We could not save the credential', 'danger');
         console.log('Error %o %o', status, data.message);
         form.$show();
+        setTimeout(function() {
+          renderOwnersReadersSelect2(entity);
+        }, 100);
       });
     return false;
   };
@@ -198,6 +244,68 @@ function CredentialController($scope, $rootScope, $http, baseUrlSrv, ngToast) {
     }
   }
 
+  let getSelectJson = function() {
+    let selectJson = {
+      tags: true,
+      minimumInputLength: 3,
+      multiple: true,
+      tokenSeparators: [',', ' '],
+      ajax: {
+        url: function(params) {
+          if (!params.term) {
+            return false;
+          }
+          return baseUrlSrv.getRestApiBase() + '/security/userlist/' + params.term;
+        },
+        delay: 250,
+        processResults: function(data, params) {
+          let results = [];
+
+          if (data.body.users.length !== 0) {
+            let users = [];
+            for (let len = 0; len < data.body.users.length; len++) {
+              users.push({
+                'id': data.body.users[len],
+                'text': data.body.users[len],
+              });
+            }
+            results.push({
+              'text': 'Users :',
+              'children': users,
+            });
+          }
+          if (data.body.roles.length !== 0) {
+            let roles = [];
+            for (let len = 0; len < data.body.roles.length; len++) {
+              roles.push({
+                'id': data.body.roles[len],
+                'text': data.body.roles[len],
+              });
+            }
+            results.push({
+              'text': 'Roles :',
+              'children': roles,
+            });
+          }
+          return {
+            results: results,
+            pagination: {
+              more: false,
+            },
+          };
+        },
+        cache: false,
+      },
+    };
+    return selectJson;
+  };
+
+  $scope.$on('ngRenderFinished', function(event, data) {
+    for (let credential = 0; credential < $scope.credentialInfo.length; credential++) {
+      renderOwnersReadersSelect2($scope.credentialInfo[credential].entity);
+    }
+  });
+
   $scope.getCredentialDocsLink = function() {
     const currentVersion = $rootScope.zeppelinVersion;
     const isVersionOver0Point7 = currentVersion && currentVersion.split('.')[1] > 7;
diff --git a/zeppelin-web/src/app/credential/credential.html b/zeppelin-web/src/app/credential/credential.html
@@ -56,18 +56,29 @@ <h4>Add new credential</h4>
                   <th style="width:30%">Entity</th>
                   <th>Username</th>
                   <th>Password</th>
+                  <th>Owners</th>
+                  <th>Readers</th>
                 </tr>
                 </thead>
                 <tr>
                   <td>
-                    <input id="entityname" ng-model="entity" placeholder="Interpreter Name"/>
+                    <input id="entityname" ng-model="entity" placeholder="Credential entity (e.g. Interpreter Name)"/>
                   </td>
                   <td>
                     <textarea msd-elastic ng-model="username"></textarea>
                   </td>
                   <td>
                     <input type="password" ng-model="password"/>
                   </td>
+                  <td>
+                    <select id="NewCredentialOwners" class="form-control" multiple="multiple">
+                      <option ng-repeat="owner in owners" selected="selected">{{owner}}</option>
+                    </select>
+                  </td>
+                  <td>
+                    <select id="NewCredentialReaders" class="form-control" multiple="multiple">
+                    </select>
+                  </td>
                 </tr>
               </table>
               <span class="btn btn-primary" ng-click="addNewCredentialInfo()">
@@ -90,13 +101,16 @@ <h4>Add new credential</h4>
          class="col-md-12 gray40-message">
       <em>Currently there is no credential information</em>
     </div>
+    <div credential-item ng-repeat="credential in credentialInfo"></div>
     <div class="col-md-12" ng-show="hasCredential(credentialInfo) || valueform.$visible">
       <table class="table table-striped">
         <thead>
         <tr>
           <th style="width:30%">Entity</th>
           <th>Username</th>
           <th>Password</th>
+          <th>Owners</th>
+          <th>Readers</th>
           <th></th>
         </tr>
         </thead>
@@ -119,6 +133,16 @@ <h4>Add new credential</h4>
                 **********
               </span>
             </td>
+            <td>
+                <select id="{{credential.entity}}Owners" class="form-control" multiple="multiple" ng-disabled="!valueform.$visible">
+                  <option ng-repeat="owner in credential.owners" selected="selected">{{owner}}</option>
+                </select>
+            </td>
+            <td>
+                <select id="{{credential.entity}}Readers" class="form-control" multiple="multiple" ng-disabled="!valueform.$visible">
+                  <option ng-repeat="reader in credential.readers" selected="selected">{{reader}}</option>
+                </select>
+            </td>
             <td>
               <!-- Edit credential info -->
               <span style="float:right" ng-show="!valueform.$visible">
@@ -135,7 +159,8 @@ <h4>Add new credential</h4>
                 <form editable-form name="valueform"
                       onbeforesave="updateCredentialInfo(valueform, $data, credential.entity)"
                       ng-show="valueform.$visible">
-                  <button type="submit" class="btn btn-primary btn-xs">
+                  <button type="submit" class="btn btn-primary btn-xs"
+                        ng-click="resetSelect(credential.entity)">
                     <span class="fa fa-check"></span> save
                   </button>
                   <button type="button" class="btn btn-default btn-xs"
diff --git a/zeppelin-web/src/app/credential/credential.test.js b/zeppelin-web/src/app/credential/credential.test.js
@@ -14,7 +14,12 @@ describe('Controller: Credential', function() {
     $httpBackend = _$httpBackend_;
   }));
 
-  const credentialResponse = {'spark.testCredential': {username: 'user1', password: 'password1'}};
+  const credentialResponse = {'spark.testCredential': {
+    username: 'user1',
+    password: 'password1',
+    readers: [],
+    owners: ['anonymous']},
+  };
   const interpreterResponse = [
     {'name': 'spark', 'group': 'spark'},
     {'name': 'md', 'group': 'md'},
@@ -42,7 +47,7 @@ describe('Controller: Credential', function() {
     $httpBackend.flush();
 
     expect($scope.credentialInfo).toEqual(
-      [{entity: 'spark.testCredential', username: 'user1', password: 'password1'}]
+      [{entity: 'spark.testCredential', username: 'user1', password: 'password1', readers: [], owners: ['anonymous']}]
     );
     expect($scope.availableInterpreters).toEqual(
       ['spark', 'md']
diff --git a/zeppelin-web/src/index.js b/zeppelin-web/src/index.js
@@ -43,6 +43,7 @@ import './app/interpreter/interpreter.filter.js';
 import './app/interpreter/interpreter-item.directive.js';
 import './app/interpreter/widget/number-widget.directive.js';
 import './app/credential/credential.controller.js';
+import './app/credential/credential-item.directive.js';
 import './app/configuration/configuration.controller.js';
 import './app/notebook/revisions-comparator/revisions-comparator.component.js';
 import './app/notebook/paragraph/paragraph.controller.js';
