mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
Enable credential info to get list, edit and remove via UI
This commit is contained in:
AhyoungRyu
parent
1ccbd602a8
commit
573c3d1448
2 changed files with 239 additions and 65 deletions
|
|
@ -14,43 +14,136 @@
|
|||
*/
|
||||
'use strict';
|
||||
|
||||
angular.module('zeppelinWebApp').controller('CredentialCtrl', function($scope, $route, $routeParams, $location,
|
||||
$rootScope, $http, baseUrlSrv) {
|
||||
angular.module('zeppelinWebApp').controller('CredentialCtrl', function($scope, $route, $routeParams, $location, $rootScope,
|
||||
$http, baseUrlSrv, ngToast) {
|
||||
$scope._ = _;
|
||||
|
||||
$scope.credentialEntity = '';
|
||||
$scope.credentialUsername = '';
|
||||
$scope.credentialPassword = '';
|
||||
$scope.credentialInfo = [];
|
||||
$scope.showAddNewCredentialInfo = false;
|
||||
|
||||
$scope.updateCredentials = function() {
|
||||
if (_.isEmpty($scope.credentialEntity.trim()) ||
|
||||
_.isEmpty($scope.credentialUsername.trim())) {
|
||||
BootstrapDialog.alert({
|
||||
closable: true,
|
||||
message: 'Username \\ Entity can not be empty.'
|
||||
var getCredentialInfo = function() {
|
||||
$http.get(baseUrlSrv.getRestApiBase()+'/credential').
|
||||
success(function(data, status, headers, config) {
|
||||
|
||||
$scope.credentialInfo = _.map(data.body.userCredentials, function(value, prop) {
|
||||
return {entity: prop, password: value.password, username: value.username };
|
||||
});
|
||||
console.log('Success %o %o', status, $scope.credentialInfo);
|
||||
}).
|
||||
error(function(data, status, headers, config) {
|
||||
console.log('Error %o %o', status, data.message);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.addNewCredentialInfo = function() {
|
||||
if ($scope.entity && _.isEmpty($scope.entity.trim()) &&
|
||||
$scope.username && _.isEmpty($scope.username.trim())) {
|
||||
ngToast.danger({
|
||||
content: 'Username \\ Entity can not be empty.',
|
||||
verticalPosition: 'bottom',
|
||||
timeout: '3000'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
$http.put(baseUrlSrv.getRestApiBase() + '/credential',
|
||||
{'entity': $scope.credentialEntity,
|
||||
'username': $scope.credentialUsername,
|
||||
'password': $scope.credentialPassword
|
||||
var newCredential = {
|
||||
'entity': $scope.entity,
|
||||
'username': $scope.username,
|
||||
'password': $scope.password
|
||||
};
|
||||
|
||||
$http.put(baseUrlSrv.getRestApiBase() + '/credential', newCredential).
|
||||
success(function(data, status, headers, config) {
|
||||
ngToast.success({
|
||||
content: 'Successfully saved credentials.',
|
||||
verticalPosition: 'bottom',
|
||||
timeout: '3000'
|
||||
});
|
||||
$scope.credentialInfo.push(newCredential);
|
||||
resetCredentialInfo();
|
||||
$scope.showAddNewCredentialInfo = false;
|
||||
console.log('Success %o %o', status, data.message);
|
||||
}).
|
||||
success(function(data, status, headers, config) {
|
||||
BootstrapDialog.alert({
|
||||
closable: true,
|
||||
message: 'Successfully saved credentials.'
|
||||
error(function(data, status, headers, config) {
|
||||
ngToast.danger({
|
||||
content: 'Error saving credentials',
|
||||
verticalPosition: 'bottom',
|
||||
timeout: '3000'
|
||||
});
|
||||
console.log('Error %o %o', status, data.message);
|
||||
});
|
||||
$scope.credentialEntity = '';
|
||||
$scope.credentialUsername = '';
|
||||
$scope.credentialPassword = '';
|
||||
console.log('Success %o %o', status, data.message);
|
||||
}).
|
||||
error(function(data, status, headers, config) {
|
||||
alert('Error saving credentials');
|
||||
console.log('Error %o %o', status, data.message);
|
||||
};
|
||||
|
||||
$scope.cancelCredentialInfo = function() {
|
||||
$scope.showAddNewCredentialInfo = false;
|
||||
resetCredentialInfo();
|
||||
};
|
||||
|
||||
var resetCredentialInfo = function() {
|
||||
$scope.entity = '';
|
||||
$scope.username = '';
|
||||
$scope.password = '';
|
||||
};
|
||||
|
||||
$scope.copyOriginCredentialsInfo = function() {
|
||||
ngToast.info({
|
||||
content: 'Since entity is a unique key, you can edit only username & password',
|
||||
verticalPosition: 'bottom',
|
||||
timeout: '3000'
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
$scope.updateCredentialInfo = function(form, data, entity) {
|
||||
var request = {
|
||||
entity: entity,
|
||||
username: data.username,
|
||||
password: data.password
|
||||
};
|
||||
|
||||
$http.put(baseUrlSrv.getRestApiBase() + '/credential/', request).
|
||||
success(function(data, status, headers, config) {
|
||||
var index = _.findIndex($scope.credentialInfo, { 'entity': entity });
|
||||
$scope.credentialInfo[index] = request;
|
||||
return true;
|
||||
}).
|
||||
error(function(data, status, headers, config) {
|
||||
console.log('Error %o %o', status, data.message);
|
||||
ngToast.danger({
|
||||
content: 'We couldn\'t save the credential',
|
||||
verticalPosition: 'bottom',
|
||||
timeout: '3000'
|
||||
});
|
||||
form.$show();
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.removeCredentialInfo = function(entity) {
|
||||
BootstrapDialog.confirm({
|
||||
closable: false,
|
||||
closeByBackdrop: false,
|
||||
closeByKeyboard: false,
|
||||
title: '',
|
||||
message: 'Do you want to delete this credential information?',
|
||||
callback: function(result) {
|
||||
if (result) {
|
||||
$http.delete(baseUrlSrv.getRestApiBase() + '/credential/' + entity).
|
||||
success(function(data, status, headers, config) {
|
||||
var index = _.findIndex($scope.credentialInfo, { 'entity': entity });
|
||||
$scope.credentialInfo.splice(index, 1);
|
||||
console.log('Success %o %o', status, data.message);
|
||||
}).
|
||||
error(function(data, status, headers, config) {
|
||||
console.log('Error %o %o', status, data.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
getCredentialInfo();
|
||||
};
|
||||
|
||||
init();
|
||||
});
|
||||
|
|
@ -18,53 +18,134 @@ limitations under the License.
|
|||
<h3 class="new_h3">
|
||||
Credentials
|
||||
</h3>
|
||||
<div class="pull-right" style="margin-top:10px;">
|
||||
<a style="cursor:pointer;margin-right:10px;text-decoration:none;"
|
||||
target="_blank"
|
||||
ng-href="http://zeppelin.apache.org/docs/{{zeppelinVersion}}/security/datasource_authorization.html"
|
||||
tooltip-placement="bottom" tooltip="Learn more">
|
||||
<i class="icon-question" ng-style="{color: showRepositoryInfo ? '#3071A9' : 'black' }"></i>
|
||||
</a>
|
||||
<button class="btn btn-default btn-sm"
|
||||
ng-click="showAddNewCredentialInfo = !showAddNewCredentialInfo">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
Add credentials for entities one at a time.<br/>
|
||||
Manage your credentials. You can add new credential information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Credential addition form-->
|
||||
<div class="row interpreter">
|
||||
<div class="col-md-12" ng-show="showAddNewCredentialInfo">
|
||||
<hr />
|
||||
<div class="interpreterSettingAdd">
|
||||
<h4>Add new credential</h4>
|
||||
<div>
|
||||
<div class="row interpreter">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:30%">Entity</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea msd-elastic ng-model="entity"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<textarea msd-elastic ng-model="username"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<input type="password" ng-model="password"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="btn btn-primary" ng-click="addNewCredentialInfo()">
|
||||
Save
|
||||
</span>
|
||||
<span class="btn btn-default" ng-click="cancelCredentialInfo()">
|
||||
Cancel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box width-full">
|
||||
<div>
|
||||
<div class="row interpreter">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:30%">Entity</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th ng-if="valueform.$visible">action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea msd-elastic ng-model="credentialEntity"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<textarea msd-elastic ng-model="credentialUsername"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<input type="password" ng-model="credentialPassword"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<form editable-form name="valueform" onaftersave="updateCredentials()">
|
||||
<button type="submit" class="btn btn-primary"
|
||||
ng-disabled="valueform.$waiting">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-disabled="valueform.$waiting"
|
||||
ng-click="valueform.$cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row interpreter">
|
||||
<div ng-show="_.isEmpty(credentialInfo) || valueform.$hidden"
|
||||
class="col-md-12 gray40-message">
|
||||
<em>Currently there is no credential information</em>
|
||||
</div>
|
||||
<div class="col-md-12" ng-show="!_.isEmpty(credentialInfo) || valueform.$visible">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:30%">Entity</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr ng-repeat="credential in credentialInfo">
|
||||
<td>
|
||||
<span>
|
||||
{{credential.entity}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span editable-textarea="credential.username" e-name="username" e-form="valueform"
|
||||
e-msd-elastic focus-if="credential.username.length == 0">
|
||||
{{credential.username}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span editable-password="credential.password" e-name="password" e-form="valueform"
|
||||
e-msd-elastic focus-if="credential.password.length == 0">
|
||||
**********
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- Edit credential info -->
|
||||
<span style="float:right" ng-show="!valueform.$visible">
|
||||
<button class="btn btn-default btn-xs"
|
||||
ng-click="valueform.$show();
|
||||
copyOriginCredentialsInfo();">
|
||||
<span class="fa fa-pencil"></span> edit</button>
|
||||
<button class="btn btn-default btn-xs"
|
||||
ng-click="removeCredentialInfo(credential.entity)">
|
||||
<span class="fa fa-trash"></span> remove</button>
|
||||
|
||||
</span>
|
||||
<span style="float:right" ng-show="valueform.$visible">
|
||||
<form editable-form name="valueform"
|
||||
onbeforesave="updateCredentialInfo(valueform, $data, credential.entity)"
|
||||
ng-show="valueform.$visible">
|
||||
<button type="submit" class="btn btn-primary btn-xs">
|
||||
<span class="fa fa-check"></span> save
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-xs"
|
||||
ng-disabled="valueform.$waiting"
|
||||
ng-click="valueform.$cancel();">
|
||||
<span class="fa fa-remove"></span> cancel
|
||||
</button>
|
||||
</form>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue