Skip to content

Commit 343cf64

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

File tree

7 files changed

+150
-62
lines changed

7 files changed

+150
-62
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@
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+
entries: '=', // an array of objects containing configmaps and secrets
12+
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
13+
isReadonly: '<?' // display as read only values
1614
},
1715
templateUrl: 'views/directives/edit-environment-from.html'
1816
});
@@ -52,7 +50,7 @@
5250

5351
ctrl.envFromEntries.splice(start, deleteCount);
5452

55-
if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
53+
if(!ctrl.envFromEntries.length) {
5654
addEntry(ctrl.envFromEntries);
5755
}
5856

@@ -105,6 +103,10 @@
105103
break;
106104
}
107105

106+
if (entry.prefix) {
107+
newEnvFrom.prefix = entry.prefix;
108+
}
109+
108110
_.assign(ctrl.envFromEntries[index], newEnvFrom);
109111
ctrl.updateEntries(ctrl.envFromEntries);
110112
};
@@ -121,7 +123,7 @@
121123

122124
ctrl.envFromEntries = ctrl.entries || [];
123125

124-
if(!ctrl.envFromEntries.length) {
126+
if (!ctrl.envFromEntries.length) {
125127
addEntry(ctrl.envFromEntries);
126128
}
127129

‎app/styles/_kve.less

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,18 +115,20 @@
115115
width: (@as-sortable-item-button-width * 2);
116116
}
117117

118-
.key-value-editor-entry,
119118
.environment-from-entry {
120119
display: table;
121120
margin-bottom: 15px;
122-
padding-right: (@as-sortable-item-button-width * 2);
121+
padding-right: 0;
122+
@media(max-width: @screen-xxs-max) {
123+
padding-right: (@as-sortable-item-button-width * 2);
124+
}
123125
position: relative;
124126
table-layout: fixed;
125127
width: 100%;
126-
@media(min-width: @screen-md-min) {
128+
@media(min-width: @screen-xs-min) {
127129
.environment-from-editor-button {
128130
float: left;
129-
padding-right: 5px;
131+
padding: 0 5px;
130132
position: relative;
131133
width: auto;
132134
}
@@ -136,24 +138,38 @@
136138
margin-bottom: 0;
137139
padding-right: 5px;
138140
width: 100%;
139-
@media(min-width: @screen-md-min) {
140-
width: 50%;
141+
@media(min-width: @screen-xs-min) {
142+
width: calc(~"50% - 26px"); // Adjust env-from width to match kve input, when env-from row doesn't have padding-right;
143+
}
144+
&.prefix {
145+
padding-right: 0;
146+
width: calc(~"50% + 26px"); // Adjust prefix width to match kve input, when env-from row doesn't have padding-right;
147+
@media(max-width: @screen-xxs-max) {
148+
margin-top: 5px;
149+
width: 100%;
150+
}
141151
}
142152
.faux-input-group,
143153
.ui-select {
144154
float: left;
145155
width: 100%;
146156
}
147157
}
148-
}
149-
.environment-from-entry {
150158
.environment-from-view-details {
151159
float: left;
152160
line-height: 1;
153161
padding: 6px 0 0;
154162
}
155163
}
156164

165+
.key-value-editor-entry {
166+
display: table;
167+
margin-bottom: 15px;
168+
padding-right: (@as-sortable-item-button-width * 2);
169+
position: relative;
170+
table-layout: fixed;
171+
width: 100%;
172+
}
157173
.key-value-editor-input .ui-select {
158174
@media(min-width: @screen-md-min) {
159175
float: left;
@@ -170,7 +186,8 @@
170186
}
171187

172188
.key-value-editor .key-value-editor-input,
173-
.key-value-editor-header {
189+
.key-value-editor-header,
190+
.environment-from-editor-header {
174191
float: left;
175192
margin-bottom: 0;
176193
padding-right: 5px;

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

Lines changed: 69 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,21 @@
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+
Config Map/Secret
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+
1122
<div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
1223
<div
1324
class="environment-from-entry"
@@ -23,8 +34,9 @@
2334
</div>
2435
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
2536
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>
37+
<span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span>
38+
<span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span>
39+
<span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span>
2840
</div>
2941
</div>
3042

@@ -50,27 +62,59 @@
5062
</div>
5163
</div>
5264

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>
65+
<div class="form-group environment-from-input prefix">
66+
<div class="environment-from-input"
67+
ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
68+
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
69+
<label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label>
70+
<input type="text"
71+
class="form-control"
72+
placeholder="Add prefix"
73+
id="envfrom-prefix-{{$index}}"
74+
name="envfrom-prefix-{{$index}}"
75+
ng-model="entry.prefix"
76+
ng-pattern="/^[a-zA-Z0-9_]+$/">
77+
78+
<span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched">
79+
<span class="help-block key-validation-error"
80+
ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
81+
<span class="validation-text">Please enter a valid prefix.</span>
82+
<span class="help action-inline">
83+
<a
84+
aria-hidden="true"
85+
data-toggle="tooltip"
86+
data-placement="top"
87+
data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
88+
<span class="pficon pficon-help"></span>
89+
</a>
90+
</span>
91+
</span>
92+
</span>
93+
</div>
94+
95+
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
96+
<span
97+
ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
98+
class="fa fa-bars sort-row"
99+
role="button"
100+
aria-label="Move row"
101+
aria-grabbed="false"
102+
as-sortable-item-handle></span>
103+
<a
104+
ng-if="!$ctrl.cannotDeleteAny"
105+
href=""
106+
class="pficon pficon-close delete-row as-sortable-item-delete"
107+
role="button"
108+
aria-label="Delete row"
109+
ng-click="$ctrl.deleteEntry($index, 1)"></a>
110+
</div>
111+
112+
<div class="environment-from-view-details">
113+
<a
114+
ng-if="entry.selectedEnvFrom"
115+
href=""
116+
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
117+
</div>
74118
</div>
75119
</div>
76120

@@ -79,7 +123,7 @@
79123
href=""
80124
class="add-row-link"
81125
role="button"
82-
ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a>
126+
ng-click="$ctrl.onAddRow()">Add ALL Values from Config Map or Secret</a>
83127
</div>
84128
</div>
85129

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@ <h4 class="section-label">
4343
</h4>
4444
<edit-environment-from
4545
entries="container.envFrom"
46-
selector-placeholder="Config Map/Secret"
4746
env-from-selector-options="$ctrl.valueFromObjects"
48-
add-row-link="Add ALL Values from Config Map or Secret"
4947
is-readonly="$ctrl.ngReadonly"
5048
show-header>
5149
</edit-environment-from>

‎dist/scripts/scripts.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9232,7 +9232,7 @@ e && e.push(t || {});
92329232
a.onAddRow = function() {
92339233
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
92349234
}, a.deleteEntry = function(e, t) {
9235-
a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
9235+
a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), a.envFromEntries.length || s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
92369236
}, a.hasOptions = function() {
92379237
return !_.isEmpty(a.envFromSelectorOptions);
92389238
}, a.hasEntries = function() {
@@ -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;
@@ -9296,10 +9296,8 @@ c(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.ca
92969296
};
92979297
} ],
92989298
bindings: {
9299-
addRowLink: "@",
93009299
entries: "=",
93019300
envFromSelectorOptions: "<",
9302-
selectorPlaceholder: "@",
93039301
isReadonly: "<?"
93049302
},
93059303
templateUrl: "views/directives/edit-environment-from.html"

‎dist/scripts/templates.js

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6700,7 +6700,13 @@ 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+
"Config Map/Secret\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" +
67046710
"</div>\n" +
67056711
"</div>\n" +
67066712
"</div>\n" +
@@ -6713,8 +6719,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67136719
"</div>\n" +
67146720
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
67156721
"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" +
6722+
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}.</span>\n" +
6723+
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}.</span>\n" +
6724+
"<span ng-if=\"entry.prefix\">Names will be prefixed with \"{{entry.prefix}}\"</span>\n" +
67186725
"</div>\n" +
67196726
"</div>\n" +
67206727
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
@@ -6733,16 +6740,32 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67336740
"</div>\n" +
67346741
"</div>\n" +
67356742
"</div>\n" +
6743+
"<div class=\"form-group environment-from-input prefix\">\n" +
6744+
"<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" +
6745+
"<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
6746+
"<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"/^[a-zA-Z0-9_]+$/\">\n" +
6747+
"<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
6748+
"<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
6749+
"<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
6750+
"<span class=\"help action-inline\">\n" +
6751+
"<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" +
6752+
"<span class=\"pficon pficon-help\"></span>\n" +
6753+
"</a>\n" +
6754+
"</span>\n" +
6755+
"</span>\n" +
6756+
"</span>\n" +
6757+
"</div>\n" +
67366758
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
67376759
"<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" +
67386760
"<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" +
67396761
"</div>\n" +
67406762
"<div class=\"environment-from-view-details\">\n" +
6741-
"<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
6763+
"<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
6764+
"</div>\n" +
67426765
"</div>\n" +
67436766
"</div>\n" +
67446767
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6745-
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
6768+
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
67466769
"</div>\n" +
67476770
"</div>\n" +
67486771
"<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
@@ -6796,7 +6819,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67966819
"Environment From\n" +
67976820
"<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" +
67986821
"</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" +
6822+
"<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
68006823
"</edit-environment-from>\n" +
68016824
"</div>\n" +
68026825
"<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)