Skip to content

Commit 93fb759

Browse files
jeff-phillips-18jeff-phillips-18
committed
Add the ability to add a secret to an application
1 parent 73c7420 commit 93fb759

File tree

9 files changed

+609
-85
lines changed

9 files changed

+609
-85
lines changed

‎app/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ <h1>JavaScript Required</h1>
328328
<script src="scripts/directives/labels.js"></script>
329329
<script src="scripts/directives/lifecycleHook.js"></script>
330330
<script src="scripts/directives/actionChip.js"></script>
331+
<script src="scripts/directives/addSecretToApplication.js"></script>
331332
<script src="scripts/directives/templateopt.js"></script>
332333
<script src="scripts/directives/tasks.js"></script>
333334
<script src="scripts/directives/catalog.js"></script>

‎app/scripts/controllers/secret.js

+10
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,16 @@ angular.module('openshiftConsole')
2727
}
2828
];
2929

30+
$scope.addToApplicationVisible = false;
31+
32+
$scope.addToApplication = function() {
33+
$scope.addToApplicationVisible = true;
34+
};
35+
36+
$scope.closeAddToApplication = function() {
37+
$scope.addToApplicationVisible = false;
38+
};
39+
3040
ProjectsService
3141
.get($routeParams.project)
3242
.then(_.spread(function(project, context) {

‎app/scripts/directives/addSecretToApplication.js

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
"use strict";
2+
(function() {
3+
angular.module("openshiftConsole").component('addSecretToApplication', {
4+
controller: [
5+
'$filter',
6+
'$scope',
7+
'APIService',
8+
'DataService',
9+
'NotificationsService',
10+
'StorageService',
11+
AddSecretToApplication
12+
],
13+
controllerAs: 'ctrl',
14+
bindings: {
15+
project: '<',
16+
secret: '<',
17+
onComplete: '<',
18+
onCancel: '<'
19+
},
20+
templateUrl: 'views/directives/add-secret-to-application.html'
21+
});
22+
23+
function AddSecretToApplication($filter, $scope, APIService, DataService, NotificationsService, StorageService) {
24+
var ctrl = this;
25+
var deploymentConfigs;
26+
var deployments;
27+
var replicationControllers;
28+
var replicaSets;
29+
var statefulSets;
30+
31+
var sortApplications = function() {
32+
// Don't waste time sorting on each data load, just sort when we have them all
33+
if (deploymentConfigs && deployments && replicationControllers && replicaSets && statefulSets) {
34+
var apiObjects = deploymentConfigs.concat(deployments)
35+
.concat(replicationControllers)
36+
.concat(replicaSets)
37+
.concat(statefulSets);
38+
ctrl.applications = _.sortBy(apiObjects, ['metadata.name', 'kind']);
39+
ctrl.updating = false;
40+
}
41+
};
42+
43+
var getApplications = function() {
44+
var hasDeploymentFilter = $filter('hasDeployment');
45+
var hasDeploymentConfigFilter = $filter('hasDeploymentConfig');
46+
47+
ctrl.updating = true;
48+
var context = {
49+
namespace: ctrl.project.metadata.name
50+
};
51+
// Load all the "application" types
52+
DataService.list('deploymentconfigs', context).then(function(deploymentConfigData) {
53+
deploymentConfigs = _.toArray(deploymentConfigData.by('metadata.name'));
54+
sortApplications();
55+
});
56+
DataService.list('replicationcontrollers', context).then(function(replicationControllerData) {
57+
replicationControllers = _.reject(replicationControllerData.by('metadata.name'), hasDeploymentConfigFilter);
58+
sortApplications();
59+
});
60+
DataService.list({
61+
group: 'apps',
62+
resource: 'deployments'
63+
}, context).then(function(deploymentData) {
64+
deployments = _.toArray(deploymentData.by('metadata.name'));
65+
sortApplications();
66+
});
67+
DataService.list({
68+
group: 'extensions',
69+
resource: 'replicasets'
70+
}, context).then(function(replicaSetData) {
71+
replicaSets = _.reject(replicaSetData.by('metadata.name'), hasDeploymentFilter);
72+
sortApplications();
73+
});
74+
DataService.list({
75+
group: 'apps',
76+
resource: 'statefulsets'
77+
}, context).then(function(statefulSetData) {
78+
statefulSets = _.toArray(statefulSetData.by('metadata.name'));
79+
sortApplications();
80+
});
81+
};
82+
83+
ctrl.$onInit = function() {
84+
ctrl.addType = 'env';
85+
ctrl.disableInputs = false;
86+
getApplications();
87+
};
88+
89+
ctrl.$postLink = function() {
90+
$scope.$watch(function() {
91+
return ctrl.application;
92+
}, function() {
93+
// Look at the existing mount paths so that we can warn if the new value is not unique.
94+
var podTemplate = _.get(ctrl.application, 'spec.template');
95+
ctrl.existingMountPaths = StorageService.getMountPaths(podTemplate);
96+
});
97+
};
98+
99+
ctrl.addToApplication = function() {
100+
var podTemplate = _.get(ctrl.application, 'spec.template');
101+
102+
ctrl.disableInputs = true;
103+
104+
if (ctrl.addType === 'env') {
105+
var newEnvFrom = {
106+
secretRef: ctrl.secret.metadata
107+
};
108+
109+
// For each container, add the new volume mount.
110+
_.each(podTemplate.spec.containers, function(container) {
111+
container.envFrom = container.envFrom || [];
112+
container.envFrom.push(newEnvFrom);
113+
});
114+
} else {
115+
var generateName = $filter('generateName');
116+
var name = generateName('volume-');
117+
var newVolumeMount = {
118+
name: name,
119+
mountPath: ctrl.mountVolume,
120+
readOnly: true
121+
};
122+
123+
// For each selected container, add the new volume mount.
124+
_.each(podTemplate.spec.containers, function(container) {
125+
container.volumeMounts = container.volumeMounts || [];
126+
container.volumeMounts.push(newVolumeMount);
127+
});
128+
129+
var newVolume = {
130+
name: name,
131+
secret: {
132+
secretName: ctrl.secret.metadata.name,
133+
}
134+
};
135+
136+
podTemplate.spec.volumes = podTemplate.spec.volumes || [];
137+
podTemplate.spec.volumes.push(newVolume);
138+
}
139+
140+
var humanizeKind = $filter('humanizeKind');
141+
var sourceKind = humanizeKind(ctrl.secret.kind);
142+
var targetKind = humanizeKind(ctrl.application.kind);
143+
var context = {
144+
namespace: ctrl.project.metadata.name
145+
};
146+
147+
DataService.update(APIService.kindToResource(ctrl.application.kind), ctrl.application.metadata.name, ctrl.application, context).then(
148+
function() {
149+
NotificationsService.addNotification({
150+
type: "success",
151+
message: "Successfully added " + sourceKind + " " + ctrl.secret.metadata.name + " to " + targetKind + " " + ctrl.application.metadata.name + "."
152+
});
153+
if (angular.isFunction(ctrl.onComplete)) {
154+
ctrl.onComplete();
155+
}
156+
},
157+
function(result) {
158+
var getErrorDetails = $filter('getErrorDetails');
159+
160+
NotificationsService.addNotification({
161+
type: "error",
162+
message: "An error occurred adding " + sourceKind + " " + ctrl.secret.metadata.name + " to " + targetKind + " " + ctrl.application.metadata.name + ". " +
163+
getErrorDetails(result)
164+
});
165+
}).finally(function() {
166+
ctrl.disableInputs = false;
167+
}
168+
);
169+
};
170+
}
171+
})();

‎app/styles/_secrets.less

+49-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ dl.secret-data {
8080
}
8181

8282
.create-secret-modal {
83-
background-color: #F5F5F5;
83+
background-color: @color-pf-black-150;
8484
.modal-footer{
8585
margin-top: 0px
8686
}
@@ -98,3 +98,51 @@ dl.secret-data {
9898
margin-bottom: 10px;
9999
}
100100
}
101+
102+
.add-secret-to-application {
103+
.catalogs-overlay-panel {
104+
max-width: 600px;
105+
}
106+
107+
.dialog-title {
108+
border-bottom: 1px solid @color-pf-black-300;
109+
110+
h3 {
111+
margin: 18px 0;
112+
padding-left: 15px;
113+
}
114+
}
115+
116+
.dialog-body {
117+
padding: 20px;
118+
119+
.add-choice {
120+
margin-bottom: 10px;
121+
}
122+
.button-group {
123+
.btn {
124+
margin-left: 10px;
125+
&:first-of-type {
126+
margin-left: 0;
127+
}
128+
}
129+
}
130+
.form-group > label {
131+
font-size: 14px;
132+
}
133+
.radio {
134+
margin-top: 0;
135+
}
136+
}
137+
138+
.updating {
139+
background-color: @color-pf-white;
140+
bottom: 55px;
141+
left: 0;
142+
padding-top: 60px;
143+
position: absolute;
144+
right: 0;
145+
top: 55px;
146+
z-index: 1000;
147+
}
148+
}

‎app/views/browse/secret.html

+13-2
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,21 @@ <h2>The secret details could not be loaded.</h2>
1010
</div>
1111
<div ng-if="loaded && !error">
1212
<h1 class="contains-actions">
13-
<div class="pull-right dropdown" ng-hide="!('secrets' | canIDoAny)">
14-
<button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
13+
<div class="pull-right dropdown">
14+
<button type="button" class="btn btn-default hidden-xs" ng-click="addToApplication()">
15+
Add to Application
16+
</button>
17+
<button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown" ng-hide="!('secrets' | canIDoAny)">
1518
Actions
1619
<span class="caret"></span>
1720
</button>
1821
<a href=""
1922
class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
2023
data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
2124
<ul class="dropdown-menu dropdown-menu-right actions action-button">
25+
<li class="visible-xs">
26+
<a href="" role="button" ng-click="addToApplication()">Add to Application</a>
27+
</li>
2228
<li ng-if="'secrets' | canI : 'update'">
2329
<a ng-href="{{secret | editYamlURL}}" role="button">Edit YAML</a>
2430
</li>
@@ -32,6 +38,8 @@ <h1 class="contains-actions">
3238
</li>
3339
</ul>
3440
</div>
41+
<div class="pull-right" ng-hide="!('secrets' | canIDoAny)">
42+
</div>
3543
{{secret.metadata.name}}
3644
<small class="meta">created <span am-time-ago="secret.metadata.creationTimestamp"></span></small>
3745
</h1>
@@ -79,5 +87,8 @@ <h2 class="mar-top-none">
7987
</div><!-- /col-* -->
8088
</div>
8189
</div>
90+
<overlay-panel class="add-secret-to-application" show-panel="addToApplicationVisible" show-close="true" handle-close="closeAddToApplication">
91+
<add-secret-to-application project="project" secret="secret" on-cancel="closeAddToApplication" on-complete="closeAddToApplication"></add-secret-to-application>
92+
</overlay-panel>
8293
</div><!-- /middle-content -->
8394
</div>

‎app/views/directives/add-secret-to-application.html

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div>
2+
<div class="dialog-title">
3+
<h3>Add to Application</h3>
4+
</div>
5+
<div class="dialog-body">
6+
<form name="addToApplicationForm" novalidate>
7+
<fieldset ng-disabled="disableInputs">
8+
<div class="form-group">
9+
<label>Add this secret to application:</label>
10+
<div class="application-select">
11+
<ui-select ng-model="ctrl.application" required="true" ng-disabled="ctrl.disableInputs">
12+
<ui-select-match placeholder="{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}">
13+
<span>
14+
{{$select.selected.metadata.name}}
15+
<small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
16+
</span>
17+
</ui-select-match>
18+
<ui-select-choices
19+
repeat="application in (ctrl.applications) | filter : { metadata: { name: $select.search } } track by (application | uid)"
20+
group-by="ctrl.groupByKind">
21+
<span ng-bind-html="application.metadata.name | highlight : $select.search"></span>
22+
</ui-select-choices>
23+
</ui-select>
24+
</div>
25+
</div>
26+
<div class="form-group">
27+
<label>Add secret as:</label>
28+
<div class="radio">
29+
<label class="add-choice">
30+
<input type="radio" ng-model="ctrl.addType" value="env" ng-disabled="ctrl.disableInputs">
31+
Environment variables
32+
</label>
33+
<div>
34+
<label class="add-choice">
35+
<input type="radio" ng-model="ctrl.addType" value="volume" ng-disabled="ctrl.disableInputs">
36+
Volume
37+
</label>
38+
</div>
39+
<div ng-class="{'has-error': (addToApplicationForm.mountVolume.$error.pattern && addToApplicationForm.mountVolume.$touched)}">
40+
<input class="form-control"
41+
name="mountVolume"
42+
id="mountVolume"
43+
placeholder="Enter a mount path"
44+
type="text"
45+
required
46+
ng-pattern="/^\/.*$/"
47+
osc-unique="ctrl.existingMountPaths"
48+
aria-describedby="mount-path-help"
49+
ng-disabled="ctrl.addType !== 'volume' || ctrl.disableInputs"
50+
ng-model="ctrl.mountVolume"
51+
autocorrect="off"
52+
autocapitalize="off"
53+
spellcheck="false">
54+
</div>
55+
<div class="help-block bind-description">
56+
Mount Path for the volume. A file will be created in this director for each key from the secret. The file contents will be the value of the key.
57+
</div>
58+
<div class="has-error" ng-show="addToApplicationForm.mountVolume.$error.oscUnique">
59+
<span class="help-block">
60+
The mount path is already used. Please choose another mount path.
61+
</span>
62+
</div>
63+
</div>
64+
</div>
65+
<div class="button-group pull-right">
66+
<button
67+
class="btn btn-default"
68+
ng-class="{'dialog-btn': isDialog}"
69+
ng-click="ctrl.onCancel()">
70+
Cancel
71+
</button>
72+
<button type="submit"
73+
class="btn btn-primary"
74+
ng-class="{'dialog-btn': isDialog}"
75+
ng-click="ctrl.addToApplication()"
76+
ng-disabled="ctrl.addType === 'volume' && addToApplicationForm.$invalid || !ctrl.application"
77+
value="">
78+
Save
79+
</button>
80+
</div>
81+
</fieldset>
82+
</form>
83+
<div class="updating" ng-if="ctrl.updating">
84+
<div class="spinner spinner-lg" aria-hidden="true"></div>
85+
<h3>
86+
<span class="sr-only">Updating</span>
87+
</h3>
88+
</div>
89+
</div>
90+
</div>

0 commit comments

Comments
 (0)