Skip to content

Commit 26622e7

Browse files
cdcabreracdcabrera
committed
Allow EnvFrom Prefix
Opened envFrom to allow prefix input.
1 parent 14188ec commit 26622e7

File tree

7 files changed

+163
-41
lines changed

7 files changed

+163
-41
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

+17-7
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
EditEnvironmentFrom
99
],
1010
bindings: {
11-
addRowLink: '@', // creates a link to "add row" and sets its text label
12-
entries: '=', // an array of objects containing configmaps and secrets
13-
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
14-
selectorPlaceholder: '@', // placeholder copy for dropdown selector
15-
isReadonly: '<?' // display as read only values
11+
addRowLink: '@', // creates a link to "add row" and sets its text label
12+
entries: '=', // an array of objects containing configmaps and secrets
13+
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
14+
prefixMinlength: '@?', // prefix minimum number of characters
15+
prefixValidator: '@', // prefix validation for ng-pattern
16+
prefixValidatorError: '@', // prefix validation error message
17+
prefixValidatorErrorTooltip: '@?', // prefix validation error tooltip message
18+
prefixValidatorErrorTooltipIcon: '@?',// prefix validation error tooltip icon
19+
selectorPlaceholder: '@', // placeholder copy for dropdown selector
20+
isReadonly: '<?' // display as read only values
1621
},
1722
templateUrl: 'views/directives/edit-environment-from.html'
1823
});
@@ -27,8 +32,9 @@
2732

2833
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
2934

30-
ctrl.viewOverlayPanel = function(entry) {
35+
ctrl.viewOverlayPanel = function(entry, prefix) {
3136
ctrl.overlayPaneEntryDetails = entry;
37+
ctrl.overlayPaneEntryPrefix = prefix;
3238
ctrl.overlayPanelVisible = true;
3339
};
3440

@@ -105,6 +111,10 @@
105111
break;
106112
}
107113

114+
if (entry.prefix) {
115+
newEnvFrom.prefix = entry.prefix;
116+
}
117+
108118
_.assign(ctrl.envFromEntries[index], newEnvFrom);
109119
ctrl.updateEntries(ctrl.envFromEntries);
110120
};
@@ -121,7 +131,7 @@
121131

122132
ctrl.envFromEntries = ctrl.entries || [];
123133

124-
if(!ctrl.envFromEntries.length) {
134+
if (!ctrl.envFromEntries.length) {
125135
addEntry(ctrl.envFromEntries);
126136
}
127137

‎app/styles/_kve.less

+8-1
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,14 @@
136136
margin-bottom: 0;
137137
padding-right: 5px;
138138
width: 100%;
139+
.environment-from-input {
140+
padding-right: 0;
141+
}
139142
@media(min-width: @screen-md-min) {
140143
width: 50%;
144+
.environment-from-input {
145+
padding-right: 5px;
146+
}
141147
}
142148
.faux-input-group,
143149
.ui-select {
@@ -170,7 +176,8 @@
170176
}
171177

172178
.key-value-editor .key-value-editor-input,
173-
.key-value-editor-header {
179+
.key-value-editor-header,
180+
.environment-from-editor-header {
174181
float: left;
175182
margin-bottom: 0;
176183
padding-right: 5px;

‎app/views/directives/edit-environment-from.html

+84-24
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,36 @@
44
class="environment-from-entry environment-from-editor-entry-header">
55
<div class="form-group environment-from-editor-header value-header">
66
<div class="input-group">
7-
<span class="help-block">{{$ctrl.selectorPlaceholder}}</span>
7+
{{$ctrl.selectorPlaceholder}}
8+
</div>
9+
</div>
10+
<div class="form-group environment-from-editor-header value-header">
11+
<div class="input-group"
12+
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
13+
Prefix
14+
<small class="pficon pficon-help"
15+
aria-hidden="true"
16+
data-toggle="tooltip"
17+
data-original-title="Optional prefix added to each environment variable name."></small>
818
</div>
919
</div>
1020
</div>
21+
22+
<div
23+
ng-if="showHeader"
24+
class="key-value-editor-entry key-value-editor-entry-header">
25+
<div class="form-group key-value-editor-header key-header">
26+
<div class="input-group">
27+
<span class="help-block">{{keyPlaceholder}}</span>
28+
</div>
29+
</div>
30+
<div class="form-group key-value-editor-header value-header">
31+
<div class="input-group">
32+
<span class="help-block">{{valuePlaceholder}}</span>
33+
</div>
34+
</div>
35+
</div>
36+
1137
<div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
1238
<div
1339
class="environment-from-entry"
@@ -23,8 +49,9 @@
2349
</div>
2450
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
2551
Use all keys and values from
26-
<span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}</span>
27-
<span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}</span>
52+
<span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span>
53+
<span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span>
54+
<span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span>
2855
</div>
2956
</div>
3057

@@ -50,27 +77,60 @@
5077
</div>
5178
</div>
5279

53-
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
54-
<span
55-
ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
56-
class="fa fa-bars sort-row"
57-
role="button"
58-
aria-label="Move row"
59-
aria-grabbed="false"
60-
as-sortable-item-handle></span>
61-
<a
62-
ng-if="!$ctrl.cannotDeleteAny"
63-
href=""
64-
class="pficon pficon-close delete-row as-sortable-item-delete"
65-
role="button"
66-
aria-label="Delete row"
67-
ng-click="$ctrl.deleteEntry($index, 1)"></a>
68-
</div>
69-
<div class="environment-from-view-details">
70-
<a
71-
href=""
72-
ng-if="entry.selectedEnvFrom"
73-
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
80+
<div class="form-group environment-from-input">
81+
<div class="environment-from-input"
82+
ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
83+
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
84+
<label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label>
85+
<input type="text"
86+
class="form-control"
87+
placeholder="Add prefix"
88+
id="envfrom-prefix-{{$index}}"
89+
name="envfrom-prefix-{{$index}}"
90+
ng-model="entry.prefix"
91+
ng-pattern="$ctrl.prefixValidator">
92+
93+
<span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched">
94+
<span class="help-block key-validation-error"
95+
ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
96+
<span class="validation-text">{{$ctrl.prefixValidatorError}}</span>
97+
<span ng-if="$ctrl.prefixValidatorErrorTooltip" class="help action-inline">
98+
<a
99+
aria-hidden="true"
100+
data-toggle="tooltip"
101+
data-placement="top"
102+
data-original-title="{{$ctrl.prefixValidatorErrorTooltip}}">
103+
<i class="{{$ctrl.prefixValidatorErrorTooltipIcon}}"
104+
ng-class="{'pficon pficon-help': !$ctrl.prefixValidatorErrorTooltipIcon}"></i>
105+
</a>
106+
</span>
107+
</span>
108+
</span>
109+
</div>
110+
111+
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
112+
<span
113+
ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
114+
class="fa fa-bars sort-row"
115+
role="button"
116+
aria-label="Move row"
117+
aria-grabbed="false"
118+
as-sortable-item-handle></span>
119+
<a
120+
ng-if="!$ctrl.cannotDeleteAny"
121+
href=""
122+
class="pficon pficon-close delete-row as-sortable-item-delete"
123+
role="button"
124+
aria-label="Delete row"
125+
ng-click="$ctrl.deleteEntry($index, 1)"></a>
126+
</div>
127+
128+
<div class="environment-from-view-details">
129+
<a
130+
ng-if="entry.selectedEnvFrom"
131+
href=""
132+
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom, entry.prefix)">View Details</a>
133+
</div>
74134
</div>
75135
</div>
76136

‎app/views/directives/edit-environment-variables.html

+3
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ <h4 class="section-label">
4747
env-from-selector-options="$ctrl.valueFromObjects"
4848
add-row-link="Add ALL Values from Config Map or Secret"
4949
is-readonly="$ctrl.ngReadonly"
50+
prefix-validator="[A-Za-z_][A-Za-z0-9_]*"
51+
prefix-validator-error="Please enter a valid prefix."
52+
prefix-validator-error-tooltip="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
5053
show-header>
5154
</edit-environment-from>
5255
</div>

‎dist/scripts/scripts.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -9221,8 +9221,8 @@ n[e.key] = e.value;
92219221
angular.module("openshiftConsole").component("editEnvironmentFrom", {
92229222
controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
92239223
var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
9224-
a.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e) {
9225-
a.overlayPaneEntryDetails = e, a.overlayPanelVisible = !0;
9224+
a.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e, t) {
9225+
a.overlayPaneEntryDetails = e, a.overlayPaneEntryPrefix = t, a.overlayPanelVisible = !0;
92269226
}, a.closeOverlayPanel = function() {
92279227
a.overlayPanelVisible = !1;
92289228
};
@@ -9264,7 +9264,7 @@ r.configMapRef = {
92649264
name: n.metadata.name
92659265
}, delete a.envFromEntries[e].secretRef;
92669266
}
9267-
_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
9267+
t.prefix && (r.prefix = t.prefix), _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
92689268
}, a.updateEntries = function(e) {
92699269
a.entries = _.filter(e, function(e) {
92709270
return e.secretRef || e.configMapRef;
@@ -9299,6 +9299,11 @@ bindings: {
92999299
addRowLink: "@",
93009300
entries: "=",
93019301
envFromSelectorOptions: "<",
9302+
prefixMinlength: "@?",
9303+
prefixValidator: "@",
9304+
prefixValidatorError: "@",
9305+
prefixValidatorErrorTooltip: "@?",
9306+
prefixValidatorErrorTooltipIcon: "@?",
93029307
selectorPlaceholder: "@",
93039308
isReadonly: "<?"
93049309
},

‎dist/scripts/templates.js

+40-5
Original file line numberDiff line numberDiff line change
@@ -6700,7 +6700,25 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67006700
"<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
67016701
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
67026702
"<div class=\"input-group\">\n" +
6703-
"<span class=\"help-block\">{{$ctrl.selectorPlaceholder}}</span>\n" +
6703+
"{{$ctrl.selectorPlaceholder}}\n" +
6704+
"</div>\n" +
6705+
"</div>\n" +
6706+
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
6707+
"<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6708+
"Prefix\n" +
6709+
"<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
6710+
"</div>\n" +
6711+
"</div>\n" +
6712+
"</div>\n" +
6713+
"<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
6714+
"<div class=\"form-group key-value-editor-header key-header\">\n" +
6715+
"<div class=\"input-group\">\n" +
6716+
"<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
6717+
"</div>\n" +
6718+
"</div>\n" +
6719+
"<div class=\"form-group key-value-editor-header value-header\">\n" +
6720+
"<div class=\"input-group\">\n" +
6721+
"<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
67046722
"</div>\n" +
67056723
"</div>\n" +
67066724
"</div>\n" +
@@ -6713,8 +6731,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67136731
"</div>\n" +
67146732
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
67156733
"Use all keys and values from\n" +
6716-
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
6717-
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
6734+
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}.</span>\n" +
6735+
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}.</span>\n" +
6736+
"<span ng-if=\"entry.prefix\">Names will be prefixed with \"{{entry.prefix}}\"</span>\n" +
67186737
"</div>\n" +
67196738
"</div>\n" +
67206739
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
@@ -6733,12 +6752,28 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67336752
"</div>\n" +
67346753
"</div>\n" +
67356754
"</div>\n" +
6755+
"<div class=\"form-group environment-from-input\">\n" +
6756+
"<div class=\"environment-from-input\" ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\" ng-class=\"{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }\">\n" +
6757+
"<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
6758+
"<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"$ctrl.prefixValidator\">\n" +
6759+
"<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
6760+
"<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
6761+
"<span class=\"validation-text\">{{$ctrl.prefixValidatorError}}</span>\n" +
6762+
"<span ng-if=\"$ctrl.prefixValidatorErrorTooltip\" class=\"help action-inline\">\n" +
6763+
"<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"{{$ctrl.prefixValidatorErrorTooltip}}\">\n" +
6764+
"<i class=\"{{$ctrl.prefixValidatorErrorTooltipIcon}}\" ng-class=\"{'pficon pficon-help': !$ctrl.prefixValidatorErrorTooltipIcon}\"></i>\n" +
6765+
"</a>\n" +
6766+
"</span>\n" +
6767+
"</span>\n" +
6768+
"</span>\n" +
6769+
"</div>\n" +
67366770
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
67376771
"<span ng-if=\"!$ctrl.cannotSort && $ctrl.entries.length > 1\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +
67386772
"<a ng-if=\"!$ctrl.cannotDeleteAny\" href=\"\" class=\"pficon pficon-close delete-row as-sortable-item-delete\" role=\"button\" aria-label=\"Delete row\" ng-click=\"$ctrl.deleteEntry($index, 1)\"></a>\n" +
67396773
"</div>\n" +
67406774
"<div class=\"environment-from-view-details\">\n" +
6741-
"<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
6775+
"<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom, entry.prefix)\">View Details</a>\n" +
6776+
"</div>\n" +
67426777
"</div>\n" +
67436778
"</div>\n" +
67446779
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
@@ -6796,7 +6831,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67966831
"Environment From\n" +
67976832
"<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
67986833
"</h4>\n" +
6799-
"<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
6834+
"<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" is-readonly=\"$ctrl.ngReadonly\" prefix-validator=\"[A-Za-z_][A-Za-z0-9_]*\" prefix-validator-error=\"Please enter a valid prefix.\" prefix-validator-error-tooltip=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\" show-header>\n" +
68006835
"</edit-environment-from>\n" +
68016836
"</div>\n" +
68026837
"<button class=\"btn btn-default\" ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" ng-click=\"$ctrl.save()\" ng-disabled=\"$ctrl.form.$pristine || $ctrl.form.$invalid\">Save</button>\n" +

0 commit comments

Comments
 (0)