Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow EnvFrom Prefix #2377

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions app/scripts/directives/editEnvironmentFrom.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@
EditEnvironmentFrom
],
bindings: {
addRowLink: '@', // creates a link to "add row" and sets its text label
entries: '=', // an array of objects containing configmaps and secrets
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
selectorPlaceholder: '@', // placeholder copy for dropdown selector
isReadonly: '<?' // display as read only values
entries: '=', // an array of objects containing configmaps and secrets
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
isReadonly: '<?' // display as read only values
},
templateUrl: 'views/directives/edit-environment-from.html'
});
Expand Down Expand Up @@ -52,7 +50,7 @@

ctrl.envFromEntries.splice(start, deleteCount);

if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
if(!ctrl.envFromEntries.length) {
addEntry(ctrl.envFromEntries);
}

Expand Down Expand Up @@ -105,6 +103,10 @@
break;
}

if (entry.prefix) {
newEnvFrom.prefix = entry.prefix;
}

_.assign(ctrl.envFromEntries[index], newEnvFrom);
ctrl.updateEntries(ctrl.envFromEntries);
};
Expand All @@ -121,7 +123,7 @@

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

if(!ctrl.envFromEntries.length) {
if (!ctrl.envFromEntries.length) {
addEntry(ctrl.envFromEntries);
}

Expand Down
35 changes: 26 additions & 9 deletions app/styles/_kve.less
Original file line number Diff line number Diff line change
Expand Up @@ -115,18 +115,20 @@
width: (@as-sortable-item-button-width * 2);
}

.key-value-editor-entry,
.environment-from-entry {
display: table;
margin-bottom: 15px;
padding-right: (@as-sortable-item-button-width * 2);
padding-right: 0;
@media(max-width: @screen-xxs-max) {
padding-right: (@as-sortable-item-button-width * 2);
}
position: relative;
table-layout: fixed;
width: 100%;
@media(min-width: @screen-md-min) {
@media(min-width: @screen-xs-min) {
.environment-from-editor-button {
float: left;
padding-right: 5px;
padding: 0 5px;
position: relative;
width: auto;
}
Expand All @@ -136,24 +138,38 @@
margin-bottom: 0;
padding-right: 5px;
width: 100%;
@media(min-width: @screen-md-min) {
width: 50%;
@media(min-width: @screen-xs-min) {
width: calc(~"50% - 26px"); // Adjust env-from width to match kve input, when env-from row doesn't have padding-right;
}
&.prefix {
padding-right: 0;
width: calc(~"50% + 26px"); // Adjust prefix width to match kve input, when env-from row doesn't have padding-right;
@media(max-width: @screen-xxs-max) {
margin-top: 5px;
width: 100%;
}
}
.faux-input-group,
.ui-select {
float: left;
width: 100%;
}
}
}
.environment-from-entry {
.environment-from-view-details {
float: left;
line-height: 1;
padding: 6px 0 0;
}
}

.key-value-editor-entry {
display: table;
margin-bottom: 15px;
padding-right: (@as-sortable-item-button-width * 2);
position: relative;
table-layout: fixed;
width: 100%;
}
.key-value-editor-input .ui-select {
@media(min-width: @screen-md-min) {
float: left;
Expand All @@ -170,7 +186,8 @@
}

.key-value-editor .key-value-editor-input,
.key-value-editor-header {
.key-value-editor-header,
.environment-from-editor-header {
Copy link
Contributor Author

@cdcabrera cdcabrera Oct 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sg00dwin made adjustment for the column widths see PR screenshot. Still looking like the column containing the prefix field is a few pixels off compared to the ui-select column above

float: left;
margin-bottom: 0;
padding-right: 5px;
Expand Down
94 changes: 69 additions & 25 deletions app/views/directives/edit-environment-from.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,21 @@
class="environment-from-entry environment-from-editor-entry-header">
<div class="form-group environment-from-editor-header value-header">
<div class="input-group">
<span class="help-block">{{$ctrl.selectorPlaceholder}}</span>
Config Map/Secret
</div>
</div>
<div class="form-group environment-from-editor-header value-header">
<div class="input-group"
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
Prefix
<small class="pficon pficon-help"
aria-hidden="true"
data-toggle="tooltip"
data-original-title="Optional prefix added to each environment variable name."></small>
</div>
</div>
</div>

<div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
<div
class="environment-from-entry"
Expand All @@ -23,8 +34,9 @@
</div>
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
Use all keys and values from
<span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}</span>
<span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}</span>
<span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span>
<span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span>
<span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span>
</div>
</div>

Expand All @@ -50,27 +62,59 @@
</div>
</div>

<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
<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>
<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>
</div>
<div class="environment-from-view-details">
<a
href=""
ng-if="entry.selectedEnvFrom"
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
<div class="form-group environment-from-input prefix">
<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) }">
<label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label>
<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_]+$/">

<span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched">
<span class="help-block key-validation-error"
ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
<span class="validation-text">Please enter a valid prefix.</span>
<span class="help action-inline">
<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.">
<span class="pficon pficon-help"></span>
</a>
</span>
</span>
</span>
</div>

<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
<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>
<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>
</div>

<div class="environment-from-view-details">
<a
ng-if="entry.selectedEnvFrom"
href=""
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
</div>
</div>
</div>

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

Expand Down
2 changes: 0 additions & 2 deletions app/views/directives/edit-environment-variables.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,7 @@ <h4 class="section-label">
</h4>
<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>
</edit-environment-from>
Expand Down
6 changes: 2 additions & 4 deletions dist/scripts/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -9232,7 +9232,7 @@ e && e.push(t || {});
a.onAddRow = function() {
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
}, a.deleteEntry = function(e, t) {
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());
a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), a.envFromEntries.length || s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
}, a.hasOptions = function() {
return !_.isEmpty(a.envFromSelectorOptions);
}, a.hasEntries = function() {
Expand Down Expand Up @@ -9264,7 +9264,7 @@ r.configMapRef = {
name: n.metadata.name
}, delete a.envFromEntries[e].secretRef;
}
_.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
t.prefix && (r.prefix = t.prefix), _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
}, a.updateEntries = function(e) {
a.entries = _.filter(e, function(e) {
return e.secretRef || e.configMapRef;
Expand Down Expand Up @@ -9296,10 +9296,8 @@ c(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.ca
};
} ],
bindings: {
addRowLink: "@",
entries: "=",
envFromSelectorOptions: "<",
selectorPlaceholder: "@",
isReadonly: "<?"
},
templateUrl: "views/directives/edit-environment-from.html"
Expand Down
35 changes: 29 additions & 6 deletions dist/scripts/templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -6700,7 +6700,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
"<div class=\"input-group\">\n" +
"<span class=\"help-block\">{{$ctrl.selectorPlaceholder}}</span>\n" +
"Config Map/Secret\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
"<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"Prefix\n" +
"<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n" +
Expand All @@ -6713,8 +6719,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
"Use all keys and values from\n" +
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}.</span>\n" +
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}.</span>\n" +
"<span ng-if=\"entry.prefix\">Names will be prefixed with \"{{entry.prefix}}\"</span>\n" +
"</div>\n" +
"</div>\n" +
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
Expand All @@ -6733,16 +6740,32 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group environment-from-input prefix\">\n" +
"<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" +
"<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
"<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" +
"<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
"<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
"<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
"<span class=\"help action-inline\">\n" +
"<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" +
"<span class=\"pficon pficon-help\"></span>\n" +
"</a>\n" +
"</span>\n" +
"</span>\n" +
"</span>\n" +
"</div>\n" +
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
"<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" +
"<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" +
"</div>\n" +
"<div class=\"environment-from-view-details\">\n" +
"<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
"<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
"</div>\n" +
"</div>\n" +
"<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
Expand Down Expand Up @@ -6796,7 +6819,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"Environment From\n" +
"<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" +
"</h4>\n" +
"<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" +
"<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
"</edit-environment-from>\n" +
"</div>\n" +
"<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" +
Expand Down
Loading