-
Notifications
You must be signed in to change notification settings - Fork 230
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dropdown support to give the ability to add bulk additions within the environment editors
- Loading branch information
Showing
11 changed files
with
1,094 additions
and
614 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| "use strict"; | ||
| (function() { | ||
| angular.module("openshiftConsole").component('editEnvironmentFrom', { | ||
| controller: [ | ||
| '$attrs', | ||
| '$filter', | ||
| 'keyValueEditorUtils', | ||
| 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 | ||
| }, | ||
| templateUrl: 'views/directives/edit-environment-from.html' | ||
| }); | ||
|
|
||
| function EditEnvironmentFrom($attrs, | ||
| $filter, | ||
| utils) { | ||
| var ctrl = this; | ||
|
|
||
| var canI = $filter('canI'); | ||
| var humanizeKind = $filter('humanizeKind'); | ||
| var uniqueId = _.uniqueId(); | ||
|
|
||
| ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId; | ||
|
|
||
| var addEntry = function(entries, entry) { | ||
| entries && entries.push(entry || {}); | ||
| }; | ||
|
|
||
| ctrl.onAddRow = function() { | ||
| addEntry(ctrl.envFromEntries); | ||
| utils.setFocusOn('.'+ ctrl.setFocusClass); | ||
| }; | ||
|
|
||
| ctrl.deleteEntry = function(start, deleteCount) { | ||
| if(ctrl.envFromEntries && !ctrl.envFromEntries.length) { | ||
| return; | ||
| } | ||
|
|
||
| ctrl.envFromEntries.splice(start, deleteCount); | ||
| if(!ctrl.envFromEntries.length && ctrl.addRowLink) { | ||
| addEntry(ctrl.envFromEntries); | ||
| } | ||
|
|
||
| ctrl.updateEntries(ctrl.envFromEntries); | ||
| ctrl.editEnvironmentFromForm.$setDirty(); | ||
| }; | ||
|
|
||
| ctrl.isEnvFromReadonly = function(entry) { | ||
| return ctrl.isReadonlyAny || | ||
| entry.isReadonlyValue === true || | ||
| ((entry.secretRef || entry.configMapRef) && !entry.selectedEnvFrom) || | ||
| _.isEmpty(ctrl.envFromSelectorOptions); | ||
| }; | ||
|
|
||
| ctrl.groupByKind = function(object) { | ||
| return humanizeKind(object.kind); | ||
| }; | ||
|
|
||
| //ctrl.uniqueForValue = utils.uniqueForValue; | ||
| ctrl.dragControlListeners = { | ||
| accept: function (sourceItemHandleScope, destSortableScope) { | ||
| return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id; | ||
| }, | ||
| orderChanged: function() { | ||
| ctrl.editEnvironmentFromForm.$setDirty(); | ||
| } | ||
| }; | ||
|
|
||
| ctrl.envFromObjectSelected = function(index, entry, selected) { | ||
| var newEnvFrom = {}; | ||
|
|
||
| switch (selected.kind) { | ||
| case 'Secret': | ||
| newEnvFrom.secretRef = { | ||
| name: selected.metadata.name | ||
| }; | ||
| delete ctrl.envFromEntries[index].configMapRef; | ||
| break; | ||
| case 'ConfigMap': | ||
| newEnvFrom.configMapRef = { | ||
| name: selected.metadata.name | ||
| }; | ||
| delete ctrl.envFromEntries[index].secretRef; | ||
| break; | ||
| } | ||
|
|
||
| _.assign(ctrl.envFromEntries[index], newEnvFrom); | ||
| ctrl.updateEntries(ctrl.envFromEntries); | ||
| }; | ||
|
|
||
| ctrl.updateEntries = function(entries) { | ||
| ctrl.entries = _.filter(entries, function (val) { | ||
| return val.secretRef || val.configMapRef; | ||
| }); | ||
| }; | ||
|
|
||
| var updateEnvFromEntries = function(entries) { | ||
| ctrl.envFromEntries = entries || []; | ||
|
|
||
| if(!ctrl.envFromEntries.length) { | ||
| addEntry(ctrl.envFromEntries); | ||
| } | ||
|
|
||
| _.each(ctrl.envFromEntries, function(entry) { | ||
| if(entry) { | ||
| if(entry.configMapRef && !canI('configmaps', 'get')) { | ||
| entry.isReadonlyValue = true; | ||
| } | ||
|
|
||
| if(entry.secretRef && !canI('secrets', 'get')) { | ||
| entry.isReadonlyValue = true; | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| var getReferenceValue = function(option) { | ||
| var referenceValue; | ||
|
|
||
| switch(option.kind) { | ||
| case 'ConfigMap': | ||
| referenceValue = _.find(ctrl.envFromEntries, {configMapRef: {name: option.metadata.name}}); | ||
| break; | ||
| case 'Secret': | ||
| referenceValue = _.find(ctrl.envFromEntries, {secretRef: {name: option.metadata.name}}); | ||
| break; | ||
| } | ||
|
|
||
| return referenceValue; | ||
| }; | ||
|
|
||
| ctrl.checkEntries = function(option) { | ||
| return !!(getReferenceValue(option)); | ||
| }; | ||
|
|
||
| var findReferenceValueForEntries = function(entries, envFromSelectorOptions) { | ||
| ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions)); | ||
|
|
||
| if(envFromSelectorOptions) { | ||
| _.each(envFromSelectorOptions, function(option) { | ||
| var referenceValue = getReferenceValue(option); | ||
|
|
||
| if (referenceValue) { | ||
| _.set(referenceValue, 'selectedEnvFrom', option); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| ctrl.$onInit = function() { | ||
| updateEnvFromEntries(ctrl.entries); | ||
| findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions); | ||
|
|
||
| if('cannotDelete' in $attrs) { | ||
| ctrl.cannotDeleteAny = true; | ||
| } | ||
|
|
||
| if('cannotSort' in $attrs) { | ||
| ctrl.cannotSort = true; | ||
| } | ||
|
|
||
| if('isReadonly' in $attrs) { | ||
| ctrl.isReadonlyAny = true; | ||
| } | ||
|
|
||
| if('showHeader' in $attrs) { | ||
| ctrl.showHeader = true; | ||
| } | ||
|
|
||
| if(ctrl.envFromEntries && !ctrl.envFromEntries.length) { | ||
| addEntry(ctrl.envFromEntries); | ||
| } | ||
| }; | ||
|
|
||
| ctrl.$onChanges = function(changes) { | ||
| if(changes.entries) { | ||
| updateEnvFromEntries(changes.entries.currentValue); | ||
| } | ||
|
|
||
| if(changes.envFromSelectorOptions) { | ||
| findReferenceValueForEntries(ctrl.envFromEntries, changes.envFromSelectorOptions.currentValue); | ||
| } | ||
| }; | ||
| } | ||
| })(); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <ng-form name="$ctrl.editEnvironmentFromForm" novalidate> | ||
| <div | ||
| ng-if="$ctrl.showHeader" | ||
| 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> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners"> | ||
| <div | ||
| class="environment-from-entry" | ||
| ng-class-odd="'odd'" | ||
| ng-class-even="'even'" | ||
| ng-repeat="entry in $ctrl.envFromEntries" | ||
| as-sortable-item> | ||
|
|
||
| <div class="form-group environment-from-input"> | ||
| <div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group"> | ||
| <div ng-if="!entry.configMapRef.name && !entry.secretRef.name"> | ||
| No secrets or config maps have been added as Environment From. | ||
| </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> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div ng-if="!$ctrl.isEnvFromReadonly(entry)"> | ||
| <div class="ui-select"> | ||
| <ui-select ng-model="entry.selectedEnvFrom" | ||
| ng-required="entry.selectedEnvFrom" | ||
| on-select="$ctrl.envFromObjectSelected($index, entry, $select.selected)" | ||
| ng-class="{'{{$ctrl.setFocusClass}}' : $last}"> | ||
| <ui-select-match placeholder="Select a resource"> | ||
| <span> | ||
| {{$select.selected.metadata.name}} | ||
| <small class="text-muted">– {{$select.selected.kind | humanizeKind : true}}</small> | ||
| </span> | ||
| </ui-select-match> | ||
| <ui-select-choices | ||
| ui-disable-choice="$ctrl.checkEntries(source)" | ||
| repeat="source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)" | ||
| group-by="$ctrl.groupByKind"> | ||
| <span ng-bind-html="source.metadata.name | highlight : $select.search"></span> | ||
| </ui-select-choices> | ||
| </ui-select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div ng-if="!$ctrl.isEnvFromReadonly(entry)" class="environment-from-editor-button"> | ||
| <span | ||
| ng-if="!$ctrl.cannotSort" | ||
| 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> | ||
|
|
||
| <div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd"> | ||
| <a | ||
| href="" | ||
| class="add-row-link" | ||
| role="button" | ||
| ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a> | ||
| </div> | ||
| </div> | ||
| </ng-form> |
Oops, something went wrong.