Skip to content

Commit

Permalink
Support EnvFrom in the Env Editors
Browse files Browse the repository at this point in the history 
Adding mobile style support. Removed
problematic display logic
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 27, 2017
1 parent 3177113 commit 42ee449
Show file tree
Hide file tree
Showing 8 changed files with 142 additions and 144 deletions.
69 changes: 34 additions & 35 deletions app/scripts/directives/editEnvironmentFrom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
EditEnvironmentFrom
],
bindings: {
addRowLink: '@',
entries: '=',
envFromSelectorOptions: '<',
selectorPlaceholder: '@'
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'
});
Expand All @@ -23,9 +23,9 @@

var canI = $filter('canI');
var humanizeKind = $filter('humanizeKind');
var uniqueId = _.uniqueId();

ctrl.$id = _.uniqueId();
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + ctrl.$id;
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;

var addEntry = function(entries, entry) {
entries && entries.push(entry || {});
Expand All @@ -37,7 +37,7 @@
};

ctrl.deleteEntry = function(start, deleteCount) {
if(ctrl.entries && !ctrl.entries.length) {
if(ctrl.envFromEntries && !ctrl.envFromEntries.length) {
return;
}

Expand All @@ -61,6 +61,16 @@
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 = {};

Expand Down Expand Up @@ -89,7 +99,7 @@
});
};

ctrl.updateEnvFromEntries = function(entries) {
var updateEnvFromEntries = function(entries) {
ctrl.envFromEntries = entries || [];

if(!ctrl.envFromEntries.length) {
Expand All @@ -98,12 +108,12 @@

_.each(ctrl.envFromEntries, function(entry) {
if(entry) {
if (entry.configMapRef) {
entry.isReadonlyValue = !canI('configmaps', 'get');
if(entry.configMapRef && !canI('configmaps', 'get')) {
entry.isReadonlyValue = true;
}

if (entry.secretRef) {
entry.isReadonlyValue = !canI('secrets', 'get');
if(entry.secretRef && !canI('secrets', 'get')) {
entry.isReadonlyValue = true;
}
}
});
Expand All @@ -129,33 +139,22 @@
};

var findReferenceValueForEntries = function(entries, envFromSelectorOptions) {
_.each(envFromSelectorOptions, function(option) {
var referenceValue = getReferenceValue(option);
ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions));

if (referenceValue) {
_.set(referenceValue, 'selectedEnvFrom', option);
}
});
};
if(envFromSelectorOptions) {
_.each(envFromSelectorOptions, function(option) {
var referenceValue = getReferenceValue(option);

angular.extend(ctrl, {
dragControlListeners: {
accept: function (sourceItemHandleScope, destSortableScope) {
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
},
orderChanged: function() {
ctrl.editEnvironmentFromForm.$setDirty();
}
if (referenceValue) {
_.set(referenceValue, 'selectedEnvFrom', option);
}
});
}
});
};

ctrl.$onInit = function() {
ctrl.updateEnvFromEntries(ctrl.entries);
findReferenceValueForEntries(ctrl.envFromEntries, ctrl.envFromSelectorOptions);

if('cannotAdd' in $attrs) {
ctrl.cannotAdd = true;
}
updateEnvFromEntries(ctrl.entries);
findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions);

if('cannotDelete' in $attrs) {
ctrl.cannotDeleteAny = true;
Expand All @@ -180,7 +179,7 @@

ctrl.$onChanges = function(changes) {
if(changes.entries) {
ctrl.updateEnvFromEntries(changes.entries.currentValue);
updateEnvFromEntries(changes.entries.currentValue);
}

if(changes.envFromSelectorOptions) {
Expand Down
16 changes: 14 additions & 2 deletions app/styles/_kve.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,8 @@
}
}

.key-value-editor-buttons {
.key-value-editor-buttons,
.environment-from-editor-button {
position: absolute;
right: 0;
top: 0;
Expand All @@ -121,10 +122,21 @@
position: relative;
table-layout: fixed;
width: 100%;
@media(min-width: @screen-md-min) {
.environment-from-editor-button {
float: left;
padding-right: 5px;
position: relative;
width: 50%;
}
}
.environment-from-input {
float: left;
padding-right: 5px;
width: 50%;
width: 100%;
@media(min-width: @screen-md-min) {
width: 50%;
}
.faux-input-group,
.ui-select {
float: left;
Expand Down
54 changes: 21 additions & 33 deletions app/views/directives/edit-environment-from.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,13 @@

<div
class="form-group environment-from-input"
ng-class="{ 'has-error': (forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$invalid && forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$touched) }">
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm[uniqueForValue(unique, $index)].$invalid && $ctrl.editEnvironmentFromForm[uniqueForValue(unique, $index)].$touched) }">
<div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group">
<div class="faux-form-control readonly">
Set to values in {{entry.selectedEnvFrom.kind | humanizeKind : true | lowercase}}
<span
ng-if="!('configmaps' | canI : 'get') || !('secrets' | canI : 'get')">
{{entry.configMapRef.name || entry.secretRef.name}}
</span>
<a
ng-if="'configmaps' | canI : 'get'"
ng-href="{{entry.selectedEnvFrom | navigateResourceURL}}">
{{entry.configMapRef.name || entry.secretRef.name}}
</a>
<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">
Set to values in {{entry.configMapRef.name || entry.secretRef.name}}
</div>
</div>

Expand All @@ -56,37 +50,31 @@
</ui-select>
</div>
</div>

</div>
<div class="environment-from-input">

<div ng-if="!$ctrl.isEnvFromReadonly(entry)" 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
href=""
class="pficon pficon-close delete-row as-sortable-item-delete"
role="button"
aria-label="Delete row"
ng-hide="$ctrl.cannotDeleteAny || $ctrl.isReadonlyAny"
ng-click="$ctrl.deleteEntry($index, 1)"></a>
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-href="{{entry.selectedEnvFrom | navigateResourceURL}}"
class="pficon"
ng-show="entry.selectedEnvFrom"
ng-click="$ctrl.viewDetail(entry)">View {{entry.selectedEnvFrom.kind | humanizeKind : true}}</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)">
<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
<a
href=""
class="add-row-link"
role="button"
aria-label="Add row"
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/views/directives/edit-environment-variables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ <h4>Variables</h4>
key-validator="[A-Za-z_][A-Za-z0-9_]*"
key-validator-error="Please enter a valid key."
key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
add-row-link="Add Environment Variable"
add-row-with-selectors-link="Add Environment Variable Using a Config Map or Secret"
add-row-link="Add Variable"
add-row-with-selectors-link="Add Variable from Config Map or Secret"
show-header>
</key-value-editor>

Expand Down
2 changes: 0 additions & 2 deletions app/views/directives/key-value-editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,6 @@
href=""
class="add-row-link"
role="button"
aria-label="Add row"
ng-click="onAddRow()">{{ addRowLink }}</a>
<span ng-if="valueFromSelectorOptions.length">
<span
Expand All @@ -236,7 +235,6 @@
href=""
class="add-row-link"
role="button"
aria-label="Add row"
ng-click="onAddRowWithSelectors()">{{ addRowWithSelectorsLink }}</a>
</span>
</div>
Expand Down
50 changes: 24 additions & 26 deletions dist/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9081,19 +9081,26 @@ n[e.key] = e.value;
} ]), function() {
angular.module("openshiftConsole").component("editEnvironmentFrom", {
controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
var a = this, r = t("canI"), o = t("humanizeKind");
a.$id = _.uniqueId(), a.setFocusClass = "edit-environment-from-set-focus-" + a.$id;
var i = function(e, t) {
var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
a.setFocusClass = "edit-environment-from-set-focus-" + i;
var s = function(e, t) {
e && e.push(t || {});
};
a.onAddRow = function() {
i(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
}, a.deleteEntry = function(e, t) {
a.entries && !a.entries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && i(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
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.isEnvFromReadonly = function(e) {
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
}, a.groupByKind = function(e) {
return o(e.kind);
}, a.dragControlListeners = {
accept: function(e, t) {
return e.itemScope.sortableScope.$id === t.$id;
},
orderChanged: function() {
a.editEnvironmentFromForm.$setDirty();
}
}, a.envFromObjectSelected = function(e, t, n) {
var r = {};
switch (n.kind) {
Expand All @@ -9113,12 +9120,12 @@ _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
a.entries = _.filter(e, function(e) {
return e.secretRef || e.configMapRef;
});
}, a.updateEnvFromEntries = function(e) {
a.envFromEntries = e || [], a.envFromEntries.length || i(a.envFromEntries), _.each(a.envFromEntries, function(e) {
e && (e.configMapRef && (e.isReadonlyValue = !r("configmaps", "get")), e.secretRef && (e.isReadonlyValue = !r("secrets", "get")));
});
};
var s = function(e) {
var c = function(e) {
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
});
}, l = function(e) {
var t;
switch (e.kind) {
case "ConfigMap":
Expand All @@ -9139,27 +9146,18 @@ name: e.metadata.name
return t;
};
a.checkEntries = function(e) {
return !!s(e);
return !!l(e);
};
var c = function(e, t) {
_.each(t, function(e) {
var t = s(e);
var u = function(e, t) {
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
var t = l(e);
t && _.set(t, "selectedEnvFrom", e);
});
};
angular.extend(a, {
dragControlListeners: {
accept: function(e, t) {
return e.itemScope.sortableScope.$id === t.$id;
},
orderChanged: function() {
a.editEnvironmentFromForm.$setDirty();
}
}
}), a.$onInit = function() {
a.updateEnvFromEntries(a.entries), c(a.envFromEntries, a.envFromSelectorOptions), "cannotAdd" in e && (a.cannotAdd = !0), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "isReadonly" in e && (a.isReadonlyAny = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && i(a.envFromEntries);
a.$onInit = function() {
c(a.entries), u(a.entries, a.envFromSelectorOptions), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "isReadonly" in e && (a.isReadonlyAny = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && s(a.envFromEntries);
}, a.$onChanges = function(e) {
e.entries && a.updateEnvFromEntries(e.entries.currentValue), e.envFromSelectorOptions && c(a.envFromEntries, e.envFromSelectorOptions.currentValue);
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
};
} ],
bindings: {
Expand Down
Loading

0 comments on commit 42ee449

Please sign in to comment.