Skip to content

Commit 573c3d1

Browse files
AhyoungRyuAhyoungRyu
committed
Enable credential info to get list, edit and remove via UI
1 parent 1ccbd60 commit 573c3d1

File tree

2 files changed

+239
-65
lines changed

2 files changed

+239
-65
lines changed

‎zeppelin-web/src/app/credential/credential.controller.js‎

Lines changed: 121 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,43 +14,136 @@
1414
*/
1515
'use strict';
1616

17-
angular.module('zeppelinWebApp').controller('CredentialCtrl', function($scope, $route, $routeParams, $location,
18-
$rootScope, $http, baseUrlSrv) {
17+
angular.module('zeppelinWebApp').controller('CredentialCtrl', function($scope, $route, $routeParams, $location, $rootScope,
18+
$http, baseUrlSrv, ngToast) {
1919
$scope._ = _;
2020

21-
$scope.credentialEntity = '';
22-
$scope.credentialUsername = '';
23-
$scope.credentialPassword = '';
21+
$scope.credentialInfo = [];
22+
$scope.showAddNewCredentialInfo = false;
2423

25-
$scope.updateCredentials = function() {
26-
if (_.isEmpty($scope.credentialEntity.trim()) ||
27-
_.isEmpty($scope.credentialUsername.trim())) {
28-
BootstrapDialog.alert({
29-
closable: true,
30-
message: 'Username \\ Entity can not be empty.'
24+
var getCredentialInfo = function() {
25+
$http.get(baseUrlSrv.getRestApiBase()+'/credential').
26+
success(function(data, status, headers, config) {
27+
28+
$scope.credentialInfo = _.map(data.body.userCredentials, function(value, prop) {
29+
return {entity: prop, password: value.password, username: value.username };
30+
});
31+
console.log('Success %o %o', status, $scope.credentialInfo);
32+
}).
33+
error(function(data, status, headers, config) {
34+
console.log('Error %o %o', status, data.message);
35+
});
36+
};
37+
38+
$scope.addNewCredentialInfo = function() {
39+
if ($scope.entity && _.isEmpty($scope.entity.trim()) &&
40+
$scope.username && _.isEmpty($scope.username.trim())) {
41+
ngToast.danger({
42+
content: 'Username \\ Entity can not be empty.',
43+
verticalPosition: 'bottom',
44+
timeout: '3000'
3145
});
3246
return;
3347
}
3448

35-
$http.put(baseUrlSrv.getRestApiBase() + '/credential',
36-
{'entity': $scope.credentialEntity,
37-
'username': $scope.credentialUsername,
38-
'password': $scope.credentialPassword
49+
var newCredential = {
50+
'entity': $scope.entity,
51+
'username': $scope.username,
52+
'password': $scope.password
53+
};
54+
55+
$http.put(baseUrlSrv.getRestApiBase() + '/credential', newCredential).
56+
success(function(data, status, headers, config) {
57+
ngToast.success({
58+
content: 'Successfully saved credentials.',
59+
verticalPosition: 'bottom',
60+
timeout: '3000'
61+
});
62+
$scope.credentialInfo.push(newCredential);
63+
resetCredentialInfo();
64+
$scope.showAddNewCredentialInfo = false;
65+
console.log('Success %o %o', status, data.message);
66+
}).
67+
error(function(data, status, headers, config) {
68+
ngToast.danger({
69+
content: 'Error saving credentials',
70+
verticalPosition: 'bottom',
71+
timeout: '3000'
72+
});
73+
console.log('Error %o %o', status, data.message);
74+
});
75+
};
76+
77+
$scope.cancelCredentialInfo = function() {
78+
$scope.showAddNewCredentialInfo = false;
79+
resetCredentialInfo();
80+
};
81+
82+
var resetCredentialInfo = function() {
83+
$scope.entity = '';
84+
$scope.username = '';
85+
$scope.password = '';
86+
};
87+
88+
$scope.copyOriginCredentialsInfo = function() {
89+
ngToast.info({
90+
content: 'Since entity is a unique key, you can edit only username & password',
91+
verticalPosition: 'bottom',
92+
timeout: '3000'
93+
});
94+
};
95+
96+
$scope.updateCredentialInfo = function(form, data, entity) {
97+
var request = {
98+
entity: entity,
99+
username: data.username,
100+
password: data.password
101+
};
102+
103+
$http.put(baseUrlSrv.getRestApiBase() + '/credential/', request).
104+
success(function(data, status, headers, config) {
105+
var index = _.findIndex($scope.credentialInfo, { 'entity': entity });
106+
$scope.credentialInfo[index] = request;
107+
return true;
39108
}).
40-
success(function(data, status, headers, config) {
41-
BootstrapDialog.alert({
42-
closable: true,
43-
message: 'Successfully saved credentials.'
109+
error(function(data, status, headers, config) {
110+
console.log('Error %o %o', status, data.message);
111+
ngToast.danger({
112+
content: 'We couldn\'t save the credential',
113+
verticalPosition: 'bottom',
114+
timeout: '3000'
115+
});
116+
form.$show();
44117
});
45-
$scope.credentialEntity = '';
46-
$scope.credentialUsername = '';
47-
$scope.credentialPassword = '';
48-
console.log('Success %o %o', status, data.message);
49-
}).
50-
error(function(data, status, headers, config) {
51-
alert('Error saving credentials');
52-
console.log('Error %o %o', status, data.message);
118+
return false;
119+
};
120+
121+
$scope.removeCredentialInfo = function(entity) {
122+
BootstrapDialog.confirm({
123+
closable: false,
124+
closeByBackdrop: false,
125+
closeByKeyboard: false,
126+
title: '',
127+
message: 'Do you want to delete this credential information?',
128+
callback: function(result) {
129+
if (result) {
130+
$http.delete(baseUrlSrv.getRestApiBase() + '/credential/' + entity).
131+
success(function(data, status, headers, config) {
132+
var index = _.findIndex($scope.credentialInfo, { 'entity': entity });
133+
$scope.credentialInfo.splice(index, 1);
134+
console.log('Success %o %o', status, data.message);
135+
}).
136+
error(function(data, status, headers, config) {
137+
console.log('Error %o %o', status, data.message);
138+
});
139+
}
140+
}
53141
});
54142
};
55143

56-
});
144+
var init = function() {
145+
getCredentialInfo();
146+
};
147+
148+
init();
149+
});

‎zeppelin-web/src/app/credential/credential.html‎

Lines changed: 118 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,53 +18,134 @@
1818
<h3 class="new_h3">
1919
Credentials
2020
</h3>
21+
<div class="pull-right" style="margin-top:10px;">
22+
<a style="cursor:pointer;margin-right:10px;text-decoration:none;"
23+
target="_blank"
24+
ng-href="http://zeppelin.apache.org/docs/{{zeppelinVersion}}/security/datasource_authorization.html"
25+
tooltip-placement="bottom" tooltip="Learn more">
26+
<i class="icon-question" ng-style="{color: showRepositoryInfo ? '#3071A9' : 'black' }"></i>
27+
</a>
28+
<button class="btn btn-default btn-sm"
29+
ng-click="showAddNewCredentialInfo = !showAddNewCredentialInfo">
30+
<i class="fa fa-plus"></i>
31+
Add
32+
</button>
33+
</div>
2134
</div>
2235
</div>
2336
<div class="row">
2437
<div class="col-md-12">
25-
Add credentials for entities one at a time.<br/>
38+
Manage your credentials. You can add new credential information.
39+
</div>
40+
</div>
41+
</div>
42+
43+
<!--Credential addition form-->
44+
<div class="row interpreter">
45+
<div class="col-md-12" ng-show="showAddNewCredentialInfo">
46+
<hr />
47+
<div class="interpreterSettingAdd">
48+
<h4>Add new credential</h4>
49+
<div>
50+
<div class="row interpreter">
51+
<div class="col-md-12">
52+
<table class="table table-striped">
53+
<thead>
54+
<tr>
55+
<th style="width:30%">Entity</th>
56+
<th>Username</th>
57+
<th>Password</th>
58+
</tr>
59+
</thead>
60+
<tr>
61+
<td>
62+
<textarea msd-elastic ng-model="entity"></textarea>
63+
</td>
64+
<td>
65+
<textarea msd-elastic ng-model="username"></textarea>
66+
</td>
67+
<td>
68+
<input type="password" ng-model="password"/>
69+
</td>
70+
</tr>
71+
</table>
72+
<span class="btn btn-primary" ng-click="addNewCredentialInfo()">
73+
Save
74+
</span>
75+
<span class="btn btn-default" ng-click="cancelCredentialInfo()">
76+
Cancel
77+
</span>
78+
</div>
79+
</div>
80+
</div>
2681
</div>
2782
</div>
2883
</div>
2984
</div>
3085

3186
<div class="box width-full">
32-
<div>
33-
<div class="row interpreter">
34-
<div class="col-md-12">
35-
<table class="table table-striped">
36-
<thead>
37-
<tr>
38-
<th style="width:30%">Entity</th>
39-
<th>Username</th>
40-
<th>Password</th>
41-
<th ng-if="valueform.$visible">action</th>
42-
</tr>
43-
</thead>
44-
<tr>
45-
<td>
46-
<textarea msd-elastic ng-model="credentialEntity"></textarea>
47-
</td>
48-
<td>
49-
<textarea msd-elastic ng-model="credentialUsername"></textarea>
50-
</td>
51-
<td>
52-
<input type="password" ng-model="credentialPassword"/>
53-
</td>
54-
</tr>
55-
</table>
56-
<form editable-form name="valueform" onaftersave="updateCredentials()">
57-
<button type="submit" class="btn btn-primary"
58-
ng-disabled="valueform.$waiting">
59-
Save
60-
</button>
61-
<button type="button" class="btn btn-default"
62-
ng-disabled="valueform.$waiting"
63-
ng-click="valueform.$cancel()">
64-
Cancel
65-
</button>
66-
</form>
67-
</div>
87+
<div class="row interpreter">
88+
<div ng-show="_.isEmpty(credentialInfo) || valueform.$hidden"
89+
class="col-md-12 gray40-message">
90+
<em>Currently there is no credential information</em>
91+
</div>
92+
<div class="col-md-12" ng-show="!_.isEmpty(credentialInfo) || valueform.$visible">
93+
<table class="table table-striped">
94+
<thead>
95+
<tr>
96+
<th style="width:30%">Entity</th>
97+
<th>Username</th>
98+
<th>Password</th>
99+
<th></th>
100+
</tr>
101+
</thead>
102+
<tr ng-repeat="credential in credentialInfo">
103+
<td>
104+
<span>
105+
{{credential.entity}}
106+
</span>
107+
</td>
108+
<td>
109+
<span editable-textarea="credential.username" e-name="username" e-form="valueform"
110+
e-msd-elastic focus-if="credential.username.length == 0">
111+
{{credential.username}}
112+
</span>
113+
</td>
114+
<td>
115+
<span editable-password="credential.password" e-name="password" e-form="valueform"
116+
e-msd-elastic focus-if="credential.password.length == 0">
117+
**********
118+
</span>
119+
</td>
120+
<td>
121+
<!-- Edit credential info -->
122+
<span style="float:right" ng-show="!valueform.$visible">
123+
<button class="btn btn-default btn-xs"
124+
ng-click="valueform.$show();
125+
copyOriginCredentialsInfo();">
126+
<span class="fa fa-pencil"></span> edit</button>
127+
<button class="btn btn-default btn-xs"
128+
ng-click="removeCredentialInfo(credential.entity)">
129+
<span class="fa fa-trash"></span> remove</button>
130+
131+
</span>
132+
<span style="float:right" ng-show="valueform.$visible">
133+
<form editable-form name="valueform"
134+
onbeforesave="updateCredentialInfo(valueform, $data, credential.entity)"
135+
ng-show="valueform.$visible">
136+
<button type="submit" class="btn btn-primary btn-xs">
137+
<span class="fa fa-check"></span> save
138+
</button>
139+
<button type="button" class="btn btn-default btn-xs"
140+
ng-disabled="valueform.$waiting"
141+
ng-click="valueform.$cancel();">
142+
<span class="fa fa-remove"></span> cancel
143+
</button>
144+
</form>
145+
</span>
146+
</td>
147+
</tr>
148+
</table>
68149
</div>
69150
</div>
70151
</div>

0 commit comments

Comments
 (0)