Skip to content

Commit

Permalink
Allow EnvFrom Prefix
Browse files Browse the repository at this point in the history 
Opened envFrom to allow prefix input.
  • Loading branch information
@cdcabrera
cdcabrera committed Oct 27, 2017
1 parent 14188ec commit 26622e7
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 41 deletions.
24 changes: 17 additions & 7 deletions app/scripts/directives/editEnvironmentFrom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,16 @@
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
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
prefixMinlength: '@?', // prefix minimum number of characters
prefixValidator: '@', // prefix validation for ng-pattern
prefixValidatorError: '@', // prefix validation error message
prefixValidatorErrorTooltip: '@?', // prefix validation error tooltip message
prefixValidatorErrorTooltipIcon: '@?',// prefix validation error tooltip icon
selectorPlaceholder: '@', // placeholder copy for dropdown selector
isReadonly: '<?' // display as read only values
},
templateUrl: 'views/directives/edit-environment-from.html'
});
Expand All @@ -27,8 +32,9 @@

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

ctrl.viewOverlayPanel = function(entry) {
ctrl.viewOverlayPanel = function(entry, prefix) {
ctrl.overlayPaneEntryDetails = entry;
ctrl.overlayPaneEntryPrefix = prefix;
ctrl.overlayPanelVisible = true;
};

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

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

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

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

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

Expand Down
9 changes: 8 additions & 1 deletion app/styles/_kve.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,14 @@
margin-bottom: 0;
padding-right: 5px;
width: 100%;
.environment-from-input {
padding-right: 0;
}
@media(min-width: @screen-md-min) {
width: 50%;
.environment-from-input {
padding-right: 5px;
}
}
.faux-input-group,
.ui-select {
Expand Down Expand Up @@ -170,7 +176,8 @@
}

.key-value-editor .key-value-editor-input,
.key-value-editor-header {
.key-value-editor-header,
.environment-from-editor-header {
float: left;
margin-bottom: 0;
padding-right: 5px;
Expand Down
108 changes: 84 additions & 24 deletions app/views/directives/edit-environment-from.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,36 @@
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>
{{$ctrl.selectorPlaceholder}}
</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-if="showHeader"
class="key-value-editor-entry key-value-editor-entry-header">
<div class="form-group key-value-editor-header key-header">
<div class="input-group">
<span class="help-block">{{keyPlaceholder}}</span>
</div>
</div>
<div class="form-group key-value-editor-header value-header">
<div class="input-group">
<span class="help-block">{{valuePlaceholder}}</span>
</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 +49,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 +77,60 @@
</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">
<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="$ctrl.prefixValidator">

<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">{{$ctrl.prefixValidatorError}}</span>
<span ng-if="$ctrl.prefixValidatorErrorTooltip" class="help action-inline">
<a
aria-hidden="true"
data-toggle="tooltip"
data-placement="top"
data-original-title="{{$ctrl.prefixValidatorErrorTooltip}}">
<i class="{{$ctrl.prefixValidatorErrorTooltipIcon}}"
ng-class="{'pficon pficon-help': !$ctrl.prefixValidatorErrorTooltipIcon}"></i>
</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, entry.prefix)">View Details</a>
</div>
</div>
</div>

Expand Down
3 changes: 3 additions & 0 deletions app/views/directives/edit-environment-variables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ <h4 class="section-label">
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>
</edit-environment-from>
</div>
Expand Down
11 changes: 8 additions & 3 deletions dist/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9221,8 +9221,8 @@ n[e.key] = e.value;
angular.module("openshiftConsole").component("editEnvironmentFrom", {
controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
a.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e) {
a.overlayPaneEntryDetails = e, a.overlayPanelVisible = !0;
a.setFocusClass = "edit-environment-from-set-focus-" + i, a.viewOverlayPanel = function(e, t) {
a.overlayPaneEntryDetails = e, a.overlayPaneEntryPrefix = t, a.overlayPanelVisible = !0;
}, a.closeOverlayPanel = function() {
a.overlayPanelVisible = !1;
};
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 @@ -9299,6 +9299,11 @@ bindings: {
addRowLink: "@",
entries: "=",
envFromSelectorOptions: "<",
prefixMinlength: "@?",
prefixValidator: "@",
prefixValidatorError: "@",
prefixValidatorErrorTooltip: "@?",
prefixValidatorErrorTooltipIcon: "@?",
selectorPlaceholder: "@",
isReadonly: "<?"
},
Expand Down
45 changes: 40 additions & 5 deletions dist/scripts/templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6700,7 +6700,25 @@ 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" +
"{{$ctrl.selectorPlaceholder}}\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" +
"<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
"<div class=\"form-group key-value-editor-header key-header\">\n" +
"<div class=\"input-group\">\n" +
"<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group key-value-editor-header value-header\">\n" +
"<div class=\"input-group\">\n" +
"<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n" +
Expand All @@ -6713,8 +6731,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,12 +6752,28 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group environment-from-input\">\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=\"$ctrl.prefixValidator\">\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\">{{$ctrl.prefixValidatorError}}</span>\n" +
"<span ng-if=\"$ctrl.prefixValidatorErrorTooltip\" class=\"help action-inline\">\n" +
"<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"{{$ctrl.prefixValidatorErrorTooltip}}\">\n" +
"<i class=\"{{$ctrl.prefixValidatorErrorTooltipIcon}}\" ng-class=\"{'pficon pficon-help': !$ctrl.prefixValidatorErrorTooltipIcon}\"></i>\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, entry.prefix)\">View Details</a>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
Expand Down Expand Up @@ -6796,7 +6831,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\" 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" +
"</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

0 comments on commit 26622e7

Please sign in to comment.