Skip to content

Commit e46dcaf

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 e46dcaf

File tree

6 files changed

+126
-76
lines changed

6 files changed

+126
-76
lines changed

‎app/scripts/controllers/membership.js

+26-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 , {
@@ -219,15 +237,17 @@ angular
219237
$scope.user = resp;
220238
});
221239

222-
223240
DataService
224241
.list('projects', {})
225242
.then(function(resp) {
226-
var projects = _.map(resp.by('metadata.name'), function(project) {
227-
return project.metadata.name;
228-
});
243+
var projects = _.keys(resp.by('metadata.name')).sort();
229244
angular.extend($scope, {
230245
projects: projects,
246+
selectProject: function(projectName) {
247+
refreshServiceAccountsList({
248+
namespace: projectName
249+
});
250+
},
231251
refreshProjects: function(search) {
232252
if(search && !_.includes($scope.projects, search)) {
233253
$scope.projects = [search].concat(projects);
@@ -243,6 +263,7 @@ angular
243263
.then(_.spread(function(project, context) {
244264
requestContext = context;
245265
refreshRoleBindingList();
266+
refreshServiceAccountsList(requestContext);
246267
angular.extend($scope, {
247268
project: project,
248269
subjectKinds: subjectKinds,
@@ -364,5 +385,6 @@ angular
364385
}
365386
});
366387
});
388+
367389
}));
368390
});

‎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

+32-19
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",
@@ -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+
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
},

‎dist/scripts/templates.js

+18-15
Original file line numberDiff line numberDiff line change
@@ -10328,35 +10328,38 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1032810328
"</div>\n" +
1032910329
"<ng-form class=\"new-binding\" novalidate name=\"forms.newBindingForm\" ng-if=\"newBinding\">\n" +
1033010330
"<div ng-if=\"mode.edit\" class=\"item-row form-new-role\" row mobile=\"column\">\n" +
10331-
"<div class=\"col-name\" column>\n" +
10331+
"<div class=\"col-name pad-bottom-none\" row mobile=\"column\" tablet=\"column\">\n" +
1033210332
"<label ng-attr-for=\"newBindingName\" class=\"sr-only\">\n" +
1033310333
"Name\n" +
1033410334
"</label>\n" +
10335-
"<input type=\"text\" class=\"form-control input-name\" placeholder=\"Name\" ng-model=\"newBinding.name\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
10336-
"<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace hidden-sm hidden-md hidden-lg\" aria-hidden=\"true\">\n" +
10337-
"<ui-select ng-model=\"newBinding.namespace\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role\">\n" +
10335+
"\n" +
10336+
"<input ng-if=\"newBinding.kind !== 'ServiceAccount'\" type=\"text\" class=\"form-control input-name\" placeholder=\"Name\" ng-model=\"newBinding.name\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
10337+
"\n" +
10338+
"<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace\" aria-hidden=\"true\">\n" +
10339+
"<ui-select ng-model=\"newBinding.namespace\" on-select=\"selectProject($item, $model)\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role pad-bottom-sm\">\n" +
1033810340
"<ui-select-match placeholder=\"Select a project\">\n" +
10339-
"<span ng-bind=\"newBinding.namespace\"></span>\n" +
10341+
"<span>{{newBinding.namespace}}</span>\n" +
1034010342
"</ui-select-match>\n" +
1034110343
"<ui-select-choices repeat=\"projectName in projects | filter: $select.search\" refresh=\"refreshProjects($select.search)\" refresh-delay=\"200\">\n" +
10342-
"<div>{{projectName}}</div>\n" +
10344+
"<div ng-bind-html=\"projectName | highlight : $select.search\"></div>\n" +
1034310345
"</ui-select-choices>\n" +
1034410346
"</ui-select>\n" +
1034510347
"</div>\n" +
10346-
"</div>\n" +
10347-
"<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
10348-
"<div class=\"col-roles\" row tablet=\"column\" flex wrap axis=\"start\">\n" +
10349-
"<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace hidden-xs\">\n" +
10350-
"<ui-select ng-model=\"newBinding.namespace\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-project\">\n" +
10351-
"<ui-select-match placeholder=\"Select a project\">\n" +
10352-
"<span ng-bind=\"newBinding.namespace\"></span>\n" +
10348+
"<span ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"mar-left-md mar-right-md hidden-xs\">/</span>\n" +
10349+
"\n" +
10350+
"<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-name\">\n" +
10351+
"<ui-select ng-model=\"newBinding.name\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a service account\" class=\"select-role\">\n" +
10352+
"<ui-select-match placeholder=\"Service account\">\n" +
10353+
"<span>{{newBinding.name}}</span>\n" +
1035310354
"</ui-select-match>\n" +
10354-
"<ui-select-choices repeat=\"projectName in projects | filter: $select.search\" refresh=\"refreshProjects($select.search)\" refresh-delay=\"200\">\n" +
10355-
"<div>{{projectName}}</div>\n" +
10355+
"<ui-select-choices repeat=\"saName in serviceAccounts | filter: $select.search\" refresh=\"refreshServiceAccounts($select.search)\" refresh-delay=\"200\">\n" +
10356+
"<div ng-bind-html=\"saName | highlight : $select.search\"></div>\n" +
1035610357
"</ui-select-choices>\n" +
1035710358
"</ui-select>\n" +
1035810359
"</div>\n" +
1035910360
"</div>\n" +
10361+
"<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
10362+
"<div class=\"col-roles\" flex row tablet=\"column\">&nbsp;</div>\n" +
1036010363
"<div class=\"col-add-role\">\n" +
1036110364
"<div ng-show=\"mode.edit\" row>\n" +
1036210365
"<ui-select ng-if=\"filteredRoles.length\" ng-model=\"newBinding.newRole\" theme=\"bootstrap\" search-enabled=\"true\" title=\"new {{subjectKind.name}} role\" class=\"select-role\" flex>\n" +

0 commit comments

Comments
 (0)