Skip to content

Commit f65cab0

Browse files
benjaminapetersenbenjaminapetersen
committed
Add namespace picker to service account tab on membership page
- Refresh service accounts list when project/namespace select changes
1 parent 16ebed8 commit f65cab0

File tree

6 files changed

+129
-77
lines changed

6 files changed

+129
-77
lines changed

‎app/scripts/controllers/membership.js

+28-4
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,24 @@ angular
7070
$scope.newBinding.newRole = null;
7171
};
7272

73+
var refreshServiceAccountsList = function(ctx) {
74+
DataService
75+
.list('serviceaccounts', ctx)
76+
.then(function(resp) {
77+
var serviceAccounts = _.keys(resp.by('metadata.name')).sort();
78+
angular.extend($scope, {
79+
serviceAccounts: serviceAccounts,
80+
refreshServiceAccounts: function(search) {
81+
if(search && !_.includes($scope.serviceAccounts, search)) {
82+
$scope.serviceAccounts = [search].concat(serviceAccounts);
83+
} else {
84+
$scope.serviceAccounts = serviceAccounts;
85+
}
86+
}
87+
});
88+
});
89+
};
90+
7391
var refreshRoleBindingList = function(toUpdateOnError) {
7492
DataService
7593
.list('rolebindings', requestContext, null , {
@@ -159,6 +177,7 @@ angular
159177
},
160178
selectTab: function(selected) {
161179
$scope.newBinding.kind = selected;
180+
$scope.newBinding.name = '';
162181
}
163182
});
164183

@@ -219,15 +238,18 @@ angular
219238
$scope.user = resp;
220239
});
221240

222-
223241
DataService
224242
.list('projects', {})
225243
.then(function(resp) {
226-
var projects = _.map(resp.by('metadata.name'), function(project) {
227-
return project.metadata.name;
228-
});
244+
var projects = _.keys(resp.by('metadata.name')).sort();
229245
angular.extend($scope, {
230246
projects: projects,
247+
selectProject: function(projectName) {
248+
$scope.newBinding.name = '';
249+
refreshServiceAccountsList({
250+
namespace: projectName
251+
});
252+
},
231253
refreshProjects: function(search) {
232254
if(search && !_.includes($scope.projects, search)) {
233255
$scope.projects = [search].concat(projects);
@@ -243,6 +265,7 @@ angular
243265
.then(_.spread(function(project, context) {
244266
requestContext = context;
245267
refreshRoleBindingList();
268+
refreshServiceAccountsList(requestContext);
246269
angular.extend($scope, {
247270
project: project,
248271
subjectKinds: subjectKinds,
@@ -364,5 +387,6 @@ angular
364387
}
365388
});
366389
});
390+
367391
}));
368392
});

‎app/styles/_membership.less

+8-5
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,8 @@
4141
min-width: 50%;
4242
}
4343
.word-break-all;
44-
min-width: 225px;
45-
max-width: 30%;
46-
padding: 0 5px 10px 0;
44+
width: 100%;
45+
padding: 0 0px 10px 0;
4746
input {
4847
max-width: 150px;
4948
}
@@ -71,7 +70,6 @@
7170
width: 150px;
7271
}
7372
.select-role {
74-
width: 150px;
7573
small {
7674
color: #999;
7775
}
@@ -124,7 +122,9 @@
124122
}
125123
}
126124
.col-name {
127-
width: 30%;
125+
min-width: 225px;
126+
max-width: 30%;
127+
padding: 0 5px 10px 0;
128128
input {
129129
max-width: 175px;
130130
}
@@ -134,6 +134,9 @@
134134
display: block;
135135
}
136136
}
137+
.select-role {
138+
width: 150px;
139+
}
137140
}
138141
}
139142
}

‎app/views/membership.html

+38-30
Original file line numberDiff line numberDiff line change
@@ -167,71 +167,79 @@ <h3>
167167
<div
168168
ng-if="mode.edit"
169169
class="item-row form-new-role" row mobile="column">
170-
<div class="col-name" column>
170+
<div class="col-name pad-bottom-none" row mobile="column" tablet="column">
171171
<label
172172
ng-attr-for="newBindingName"
173173
class="sr-only">
174174
Name
175175
</label>
176+
177+
<!-- name entry field for everything but service accounts -->
176178
<input
179+
ng-if="newBinding.kind !== 'ServiceAccount'"
177180
type="text"
178181
class="form-control input-name"
179182
placeholder="Name"
180183
ng-model="newBinding.name"
181184
autocorrect="off"
182185
autocapitalize="off"
183186
spellcheck="false">
187+
<!-- namespace entry/picker for service accounts -->
184188
<div
185189
ng-if="newBinding.kind === 'ServiceAccount'"
186-
class="service-account-namespace hidden-sm hidden-md hidden-lg"
190+
class="service-account-namespace"
187191
aria-hidden="true">
188192
<ui-select
189193
ng-model="newBinding.namespace"
194+
on-select="selectProject($item, $model)"
190195
theme="bootstrap"
191196
search-enabled="true"
192197
title="Select a project"
193-
class="select-role">
198+
class="select-role pad-bottom-sm">
194199
<ui-select-match
195200
placeholder="Select a project">
196-
<span ng-bind="newBinding.namespace"></span>
201+
<span>{{newBinding.namespace}}</span>
197202
</ui-select-match>
198203
<ui-select-choices
199204
repeat="projectName in projects | filter: $select.search"
200205
refresh="refreshProjects($select.search)"
201206
refresh-delay="200">
202-
<div>{{projectName}}</div>
207+
<div ng-bind-html="projectName | highlight : $select.search"></div>
208+
</ui-select-choices>
209+
</ui-select>
210+
</div>
211+
212+
<span
213+
ng-if="newBinding.kind === 'ServiceAccount'"
214+
class="mar-left-md mar-right-md hidden-xs">/</span>
215+
216+
<!-- name entry/picker for service accounts -->
217+
<div
218+
ng-if="newBinding.kind === 'ServiceAccount'"
219+
class="service-account-name">
220+
<ui-select
221+
ng-model="newBinding.name"
222+
theme="bootstrap"
223+
search-enabled="true"
224+
title="Select a service account"
225+
class="select-role">
226+
<ui-select-match
227+
placeholder="Service account">
228+
<span>{{newBinding.name}}</span>
229+
</ui-select-match>
230+
<ui-select-choices
231+
repeat="saName in serviceAccounts | filter: $select.search"
232+
refresh="refreshServiceAccounts($select.search)"
233+
refresh-delay="200">
234+
<div ng-bind-html="saName | highlight : $select.search"></div>
203235
</ui-select-choices>
204236
</ui-select>
205237
</div>
206238
</div>
207239
<div
208240
class="action-set"
209241
flex row tablet="column" mobile="column">
210-
<div
211-
class="col-roles"
212-
row tablet="column" flex wrap axis="start">
213-
<div
214-
ng-if="newBinding.kind === 'ServiceAccount'"
215-
class="service-account-namespace hidden-xs">
216-
<ui-select
217-
ng-model="newBinding.namespace"
218-
theme="bootstrap"
219-
search-enabled="true"
220-
title="Select a project"
221-
class="select-project">
222-
<ui-select-match
223-
placeholder="Select a project">
224-
<span ng-bind="newBinding.namespace"></span>
225-
</ui-select-match>
226-
<ui-select-choices
227-
repeat="projectName in projects | filter: $select.search"
228-
refresh="refreshProjects($select.search)"
229-
refresh-delay="200">
230-
<div>{{projectName}}</div>
231-
</ui-select-choices>
232-
</ui-select>
233-
</div>
234-
</div>
242+
<div class="col-roles" flex row tablet="column">&nbsp;</div>
235243
<div class="col-add-role">
236244
<div ng-show="mode.edit" row>
237245
<ui-select

‎dist/scripts/scripts.js

+33-20
Original file line numberDiff line numberDiff line change
@@ -5343,6 +5343,16 @@ details:e
53435343
}, v = function() {
53445344
d.disableAddForm = !1, d.newBinding.name = "", d.newBinding.namespace = o, d.newBinding.newRole = null;
53455345
}, w = function(a) {
5346+
i.list("serviceaccounts", a).then(function(a) {
5347+
var b = _.keys(a.by("metadata.name")).sort();
5348+
angular.extend(d, {
5349+
serviceAccounts:b,
5350+
refreshServiceAccounts:function(a) {
5351+
a && !_.includes(d.serviceAccounts, a) ? d.serviceAccounts = [ a ].concat(b) :d.serviceAccounts = b;
5352+
}
5353+
});
5354+
});
5355+
}, x = function(a) {
53465356
i.list("rolebindings", n, null, {
53475357
errorNotification:!1
53485358
}).then(function(a) {
@@ -5354,9 +5364,9 @@ subjectKindsForUI:k.mapRolebindingsForUI(a.by("metadata.name"), s)
53545364
}, function() {
53555365
a && (d.roleBindings[a.metadata.name] = a, d.subjectKindsForUI = k.mapRolebindingsForUI(d.roleBindings, s)), v();
53565366
});
5357-
}, x = function(b, c) {
5367+
}, y = function(b, c) {
53585368
d.disableAddForm = !0, l.create(b, c, o, n).then(function() {
5359-
w(), u("rolebindingCreate", "success", t.update.subject.success({
5369+
x(), u("rolebindingCreate", "success", t.update.subject.success({
53605370
roleName:b.metadata.name,
53615371
subjectName:c.name
53625372
}));
@@ -5368,9 +5378,9 @@ subjectName:c.name
53685378
httpErr:a("getErrorDetails")(d)
53695379
}));
53705380
});
5371-
}, y = function(b, c, e) {
5381+
}, z = function(b, c, e) {
53725382
d.disableAddForm = !0, l.addSubject(b, c, e, n).then(function() {
5373-
w(), u("rolebindingUpdate", "success", t.update.subject.success({
5383+
x(), u("rolebindingUpdate", "success", t.update.subject.success({
53745384
roleName:b.roleRef.name,
53755385
subjectName:c.name
53765386
}));
@@ -5382,16 +5392,16 @@ subjectName:c.name
53825392
httpErr:a("getErrorDetails")(d)
53835393
}));
53845394
});
5385-
}, z = {};
5386-
c.tab && (z[c.tab] = !0);
5387-
var A = k.getSubjectKinds();
5395+
}, A = {};
5396+
c.tab && (A[c.tab] = !0);
5397+
var B = k.getSubjectKinds();
53885398
angular.extend(d, {
5389-
selectedTab:z,
5399+
selectedTab:A,
53905400
projectName:o,
53915401
alerts:{},
53925402
forms:{},
53935403
emptyMessage:"Loading...",
5394-
subjectKinds:A,
5404+
subjectKinds:B,
53955405
newBinding:{
53965406
role:"",
53975407
kind:c.tab || "User",
@@ -5404,7 +5414,7 @@ mode:{
54045414
edit:!1
54055415
},
54065416
selectTab:function(a) {
5407-
d.newBinding.kind = a;
5417+
d.newBinding.kind = a, d.newBinding.name = "";
54085418
}
54095419
}), angular.extend(d, {
54105420
excludeExistingRoles:function(a) {
@@ -5424,7 +5434,7 @@ return a ? e + (q(a, "description") || b) :b;
54245434
}
54255435
}
54265436
});
5427-
var B = function(a, b, c, e) {
5437+
var C = function(a, b, c, e) {
54285438
var f = {
54295439
alerts:{},
54305440
detailsMarkup:t.remove.areYouSure.html.subject({
@@ -5446,22 +5456,25 @@ roleName:c
54465456
g.withUser().then(function(a) {
54475457
d.user = a;
54485458
}), i.list("projects", {}).then(function(a) {
5449-
var b = _.map(a.by("metadata.name"), function(a) {
5450-
return a.metadata.name;
5451-
});
5459+
var b = _.keys(a.by("metadata.name")).sort();
54525460
angular.extend(d, {
54535461
projects:b,
5462+
selectProject:function(a) {
5463+
d.newBinding.name = "", w({
5464+
namespace:a
5465+
});
5466+
},
54545467
refreshProjects:function(a) {
54555468
a && !_.includes(d.projects, a) ? d.projects = [ a ].concat(b) :d.projects = b;
54565469
}
54575470
});
54585471
}), j.get(c.project).then(_.spread(function(c, e) {
5459-
n = e, w(), angular.extend(d, {
5472+
n = e, x(), w(n), angular.extend(d, {
54605473
project:c,
5461-
subjectKinds:A,
5474+
subjectKinds:B,
54625475
canUpdateRolebindings:r("rolebindings", "update", o),
54635476
confirmRemove:function(c, e, g) {
5464-
var i = null, j = B(c, e, g, d.user.metadata.name);
5477+
var i = null, j = C(c, e, g, d.user.metadata.name);
54655478
_.isEqual(c, d.user.metadata.name) && k.isLastRole(d.user.metadata.name, d.roleBindings) && (i = !0), f.open({
54665479
animation:!0,
54675480
templateUrl:"views/modals/confirm.html",
@@ -5474,7 +5487,7 @@ return j;
54745487
}).result.then(function() {
54755488
l.removeSubject(c, g, d.roleBindings, n).then(function(a) {
54765489
i ? b.url("./") :(h.getProjectRules(o, !0).then(function() {
5477-
w(a[0]);
5490+
x(a[0]);
54785491
var b = r("rolebindings", "update", o);
54795492
angular.extend(d, {
54805493
canUpdateRolebindings:b,
@@ -5511,7 +5524,7 @@ name:a
55115524
}) ? u("rolebindingUpdate", "info", t.update.subject.exists({
55125525
roleName:c.metadata.name,
55135526
subjectName:a
5514-
})) :g ? y(g, f, e) :x(c, f, e);
5527+
})) :g ? z(g, f, e) :y(c, f, e);
55155528
}
55165529
}), m.listAllRoles(n, {
55175530
errorNotification:!1
@@ -5524,7 +5537,7 @@ name:a
55245537
}
55255538
});
55265539
};
5527-
w(), angular.extend(d, {
5540+
x(), angular.extend(d, {
55285541
toggle:{
55295542
roles:!1
55305543
},

0 commit comments

Comments
 (0)