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

Use label-editor for PVC labels #2423

Merged
merged 1 commit into from
Nov 1, 2017
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
15 changes: 15 additions & 0 deletions app/scripts/directives/oscPersistentVolumeClaim.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,21 @@ angular.module("openshiftConsole")
}];
scope.claim.selectedLabels = [];

var previousLabels = [];
scope.$watch('useLabels', function(useLabels, previousValue) {
if (useLabels === previousValue) {
return;
}

// Prefill the previous values if the checkbox was unchecked and checked again.
if (useLabels) {
scope.claim.selectedLabels = previousLabels;
} else {
previousLabels = scope.claim.selectedLabels;
scope.claim.selectedLabels = [];
}
});

scope.groupUnits = function(unit) {
switch (unit.value) {
case 'Mi':
Expand Down
42 changes: 17 additions & 25 deletions app/views/directives/osc-persistent-volume-claim.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<!-- Name -->
<div class="form-group">
<label for="claim-name" class="required">Name</label>
<span ng-class="{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }">
<span ng-class="{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$dirty && !claimDisabled }">
<input
id="claim-name"
class="form-control"
Expand All @@ -79,7 +79,7 @@
<div>
<span id="claim-name-help" class="help-block">A unique name for the storage claim within the project.</span>
</div>
<div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$touched && !claimDisabled">
<div class="has-error" ng-show="persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$dirty && !claimDisabled">
<span class="help-block">
Name is required.
</span>
Expand Down Expand Up @@ -201,30 +201,22 @@
</div>
</fieldset>
</div>
<!--advanced options-->
<div ng-show="!showAdvancedOptions" class="mar-bottom-xl">
Use
<a href="" ng-click="showAdvancedOptions = true">label selectors</a>
to request storage.
<div class="checkbox">
<label>
<input type="checkbox" ng-model="useLabels">
Use label selectors to request storage
</label>
<div class="help-block learn-more-block mar-bottom-xl">
<a ng-href="{{'selector_label' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>

<div ng-show="showAdvancedOptions" class="form-group">
<fieldset class="compute-resource">
<label>Label Selector</label>
<div class="help-block mar-bottom-lg">
Enter a label and value to use for your storage.
<div class="learn-more-block">
<a ng-href="{{'selector_label' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>
<key-value-editor
entries="claim.selectedLabels"
key-placeholder="label"
value-placeholder="value"
key-validator="[a-zA-Z][a-zA-Z0-9_-]*"
key-validator-error-tooltip="A valid label name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores and dashes."
add-row-link="Add Label"></key-value-editor>
</fieldset>
<div ng-show="useLabels" class="form-group osc-form">
<label-editor
labels="claim.selectedLabels"
expand="true"
can-toggle="false"
help-text="Enter a label and value to use for your storage.">
</label-editor>
</div>
</fieldset>
</ng-form>
14 changes: 9 additions & 5 deletions dist/scripts/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -10037,7 +10037,11 @@ label: "GB"
}, {
value: "T",
label: "TB"
} ], i.claim.selectedLabels = [], i.groupUnits = function(e) {
} ], i.claim.selectedLabels = [];
var l = [];
i.$watch("useLabels", function(e, t) {
e !== t && (e ? i.claim.selectedLabels = l : (l = i.claim.selectedLabels, i.claim.selectedLabels = []));
}), i.groupUnits = function(e) {
switch (e.value) {
case "Mi":
case "Gi":
Expand All @@ -10053,10 +10057,10 @@ return "";
}, i.showComputeUnitsHelp = function() {
r.showComputeUnitsHelp();
};
var l = function() {
var u = function() {
var e = i.claim.amount && c(i.claim.amount + i.claim.unit), t = _.has(i, "limits.min") && c(i.limits.min), n = _.has(i, "limits.max") && c(i.limits.max), a = !0, r = !0;
e && t && (a = e >= t), e && n && (r = e <= n), i.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMin", a), i.persistentVolumeClaimForm.capacity.$setValidity("limitRangeMax", r);
}, u = function() {
}, d = function() {
var e = a.isAnyStorageQuotaExceeded(i.quotas, i.clusterQuotas), t = a.willRequestExceedQuota(i.quotas, i.clusterQuotas, "requests.storage", i.claim.amount + i.claim.unit);
i.persistentVolumeClaimForm.capacity.$setValidity("willExceedStorage", !t), i.persistentVolumeClaimForm.capacity.$setValidity("outOfClaims", !e);
};
Expand Down Expand Up @@ -10092,12 +10096,12 @@ var t = e.by("metadata.name");
if (!_.isEmpty(t)) {
i.limits = n.getEffectiveLimitRange(t, "storage", "PersistentVolumeClaim");
var a;
i.limits.min && i.limits.max && c(i.limits.min) === c(i.limits.max) && (a = s(i.limits.max), i.claim.amount = Number(a[0]), i.claim.unit = a[1], i.capacityReadOnly = !0), i.$watchGroup([ "claim.amount", "claim.unit" ], l);
i.limits.min && i.limits.max && c(i.limits.min) === c(i.limits.max) && (a = s(i.limits.max), i.claim.amount = Number(a[0]), i.claim.unit = a[1], i.capacityReadOnly = !0), i.$watchGroup([ "claim.amount", "claim.unit" ], u);
}
}), t.list("resourcequotas", {
namespace: i.projectName
}, function(e) {
i.quotas = e.by("metadata.name"), i.$watchGroup([ "claim.amount", "claim.unit" ], u);
i.quotas = e.by("metadata.name"), i.$watchGroup([ "claim.amount", "claim.unit" ], d);
}), t.list("appliedclusterresourcequotas", {
namespace: i.projectName
}, function(e) {
Expand Down
27 changes: 11 additions & 16 deletions dist/scripts/templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -8187,13 +8187,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"\n" +
"<div class=\"form-group\">\n" +
"<label for=\"claim-name\" class=\"required\">Name</label>\n" +
"<span ng-class=\"{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$touched && !claimDisabled }\">\n" +
"<span ng-class=\"{ 'has-error': persistentVolumeClaimForm.name.$invalid && persistentVolumeClaimForm.name.$dirty && !claimDisabled }\">\n" +
"<input id=\"claim-name\" class=\"form-control\" type=\"text\" name=\"name\" ng-model=\"claim.name\" ng-required=\"true\" ng-pattern=\"nameValidation.pattern\" ng-maxlength=\"nameValidation.maxlength\" placeholder=\"my-storage-claim\" take-focus select-on-focus autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\" aria-describedby=\"claim-name-help\">\n" +
"</span>\n" +
"<div>\n" +
"<span id=\"claim-name-help\" class=\"help-block\">A unique name for the storage claim within the project.</span>\n" +
"</div>\n" +
"<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$touched && !claimDisabled\">\n" +
"<div class=\"has-error\" ng-show=\"persistentVolumeClaimForm.name.$error.required && persistentVolumeClaimForm.name.$dirty && !claimDisabled\">\n" +
"<span class=\"help-block\">\n" +
"Name is required.\n" +
"</span>\n" +
Expand Down Expand Up @@ -8304,23 +8304,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"</fieldset>\n" +
"</div>\n" +
"\n" +
"<div ng-show=\"!showAdvancedOptions\" class=\"mar-bottom-xl\">\n" +
"Use\n" +
"<a href=\"\" ng-click=\"showAdvancedOptions = true\">label selectors</a>\n" +
"to request storage.\n" +
"</div>\n" +
"<div ng-show=\"showAdvancedOptions\" class=\"form-group\">\n" +
"<fieldset class=\"compute-resource\">\n" +
"<label>Label Selector</label>\n" +
"<div class=\"help-block mar-bottom-lg\">\n" +
"Enter a label and value to use for your storage.\n" +
"<div class=\"learn-more-block\">\n" +
"<div class=\"checkbox\">\n" +
"<label>\n" +
"<input type=\"checkbox\" ng-model=\"useLabels\">\n" +
"Use label selectors to request storage\n" +
"</label>\n" +
"<div class=\"help-block learn-more-block mar-bottom-xl\">\n" +
"<a ng-href=\"{{'selector_label' | helpLink}}\" target=\"_blank\">Learn More&nbsp;<i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
"</div>\n" +
"</div>\n" +
"<key-value-editor entries=\"claim.selectedLabels\" key-placeholder=\"label\" value-placeholder=\"value\" key-validator=\"[a-zA-Z][a-zA-Z0-9_-]*\" key-validator-error-tooltip=\"A valid label name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores and dashes.\" add-row-link=\"Add Label\"></key-value-editor>\n" +
"</fieldset>\n" +
"<div ng-show=\"useLabels\" class=\"form-group osc-form\">\n" +
"<label-editor labels=\"claim.selectedLabels\" expand=\"true\" can-toggle=\"false\" help-text=\"Enter a label and value to use for your storage.\">\n" +
"</label-editor>\n" +
"</div>\n" +
"</fieldset>\n" +
"</ng-form>"
Expand Down