Commit 43da3c78 by Jeffrey Phillips

Update bind pages for different bind types

Bind types available are now ‘application’, ‘secret-only’, or ‘none’.
parent 47bb9504
...@@ -98,8 +98,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -98,8 +98,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"sr-only\">Success</span>\n" + " <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" + " <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" + " <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>&nbsp;has been bound</span>\n" + " <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.applicationToBind\">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" + " <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" </h3>\n" + " </h3>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"sub-title\">\n" + " <div class=\"sub-title\">\n" +
...@@ -152,13 +152,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -152,13 +152,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <fieldset>\n" + " <fieldset>\n" +
" <div class=\"radio\">\n" + " <div class=\"radio\">\n" +
" <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" + " <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\" ng-disabled=\"!ctrl.applications.length\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
" Bind to an application\n" + " Bind to an application\n" +
" </label>\n" + " </label>\n" +
" <div class=\"application-select\">\n" + " <div class=\"application-select\">\n" +
" <ui-select ng-model=\"ctrl.appToBind\"\n" + " <ui-select ng-model=\"ctrl.appToBind\"\n" +
" ng-disabled=\"ctrl.shouldBindToApp !== 'true'\"\n" + " ng-disabled=\"ctrl.bindType !== 'application'\"\n" +
" ng-required=\"ctrl.shouldBindToApp === 'true'\">\n" + " ng-required=\"ctrl.bindType === 'application'\">\n" +
" <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" + " <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" +
" <span>\n" + " <span>\n" +
" {{$select.selected.metadata.name}}\n" + " {{$select.selected.metadata.name}}\n" +
...@@ -173,14 +173,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -173,14 +173,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </ui-select>\n" + " </ui-select>\n" +
" </div>\n" + " </div>\n" +
" <label class=\"bind-choice\">\n" + " <label class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"false\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
" Create a secret in my project\n" + " Create a secret in my project\n" +
" </label>\n" + " </label>\n" +
" <div class=\"help-block bind-description\">\n" + " <div class=\"help-block bind-description\">\n" +
" You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" + " You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
" </div>\n" + " </div>\n" +
" <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" + " <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"none\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
" Do not bind at this time\n" + " Do not bind at this time\n" +
" </label>\n" + " </label>\n" +
" <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" + " <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
...@@ -482,6 +482,7 @@ angular.module('openshiftCommonUI').component('bindResults', { ...@@ -482,6 +482,7 @@ angular.module('openshiftCommonUI').component('bindResults', {
binding: '<', binding: '<',
progressInline: '@', progressInline: '@',
serviceToBind: '<', serviceToBind: '<',
bindType: '@',
applicationToBind: '<', applicationToBind: '<',
showPodPresets: '<', showPodPresets: '<',
secretHref: '<' secretHref: '<'
...@@ -509,17 +510,20 @@ angular.module('openshiftCommonUI').component('bindServiceForm', { ...@@ -509,17 +510,20 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
bindings: { bindings: {
serviceClass: '<', serviceClass: '<',
serviceClassName: '<', serviceClassName: '<',
formName: '=',
applications: '<', applications: '<',
appToBind: '=', formName: '=',
createBinding: '=?',
allowNoBinding: '<?', allowNoBinding: '<?',
shouldBindToApp: '=', bindType: '=', // One of: 'none', 'application', 'secret-only'
groupByKind: '<' appToBind: '=' // only applicable to 'application' bindType
}, },
templateUrl: 'src/components/binding/bindServiceForm.html', templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () { controller: function ($filter) {
var ctrl = this; var ctrl = this;
var humanizeKind = $filter('humanizeKind');
ctrl.groupByKind = function(object) {
return humanizeKind(object.kind);
};
} }
}); });
;"use strict"; ;"use strict";
......
...@@ -269,8 +269,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -269,8 +269,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"sr-only\">Success</span>\n" + " <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" + " <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" + " <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>&nbsp;has been bound</span>\n" + " <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.applicationToBind\">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" + " <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" </h3>\n" + " </h3>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"sub-title\">\n" + " <div class=\"sub-title\">\n" +
...@@ -323,13 +323,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -323,13 +323,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <fieldset>\n" + " <fieldset>\n" +
" <div class=\"radio\">\n" + " <div class=\"radio\">\n" +
" <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" + " <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\" ng-disabled=\"!ctrl.applications.length\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
" Bind to an application\n" + " Bind to an application\n" +
" </label>\n" + " </label>\n" +
" <div class=\"application-select\">\n" + " <div class=\"application-select\">\n" +
" <ui-select ng-model=\"ctrl.appToBind\"\n" + " <ui-select ng-model=\"ctrl.appToBind\"\n" +
" ng-disabled=\"ctrl.shouldBindToApp !== 'true'\"\n" + " ng-disabled=\"ctrl.bindType !== 'application'\"\n" +
" ng-required=\"ctrl.shouldBindToApp === 'true'\">\n" + " ng-required=\"ctrl.bindType === 'application'\">\n" +
" <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" + " <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" +
" <span>\n" + " <span>\n" +
" {{$select.selected.metadata.name}}\n" + " {{$select.selected.metadata.name}}\n" +
...@@ -344,14 +344,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -344,14 +344,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </ui-select>\n" + " </ui-select>\n" +
" </div>\n" + " </div>\n" +
" <label class=\"bind-choice\">\n" + " <label class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"false\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
" Create a secret in my project\n" + " Create a secret in my project\n" +
" </label>\n" + " </label>\n" +
" <div class=\"help-block bind-description\">\n" + " <div class=\"help-block bind-description\">\n" +
" You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" + " You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
" </div>\n" + " </div>\n" +
" <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" + " <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"none\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
" Do not bind at this time\n" + " Do not bind at this time\n" +
" </label>\n" + " </label>\n" +
" <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" + " <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
...@@ -653,6 +653,7 @@ angular.module('openshiftCommonUI').component('bindResults', { ...@@ -653,6 +653,7 @@ angular.module('openshiftCommonUI').component('bindResults', {
binding: '<', binding: '<',
progressInline: '@', progressInline: '@',
serviceToBind: '<', serviceToBind: '<',
bindType: '@',
applicationToBind: '<', applicationToBind: '<',
showPodPresets: '<', showPodPresets: '<',
secretHref: '<' secretHref: '<'
...@@ -680,18 +681,21 @@ angular.module('openshiftCommonUI').component('bindServiceForm', { ...@@ -680,18 +681,21 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
bindings: { bindings: {
serviceClass: '<', serviceClass: '<',
serviceClassName: '<', serviceClassName: '<',
formName: '=',
applications: '<', applications: '<',
appToBind: '=', formName: '=',
createBinding: '=?',
allowNoBinding: '<?', allowNoBinding: '<?',
shouldBindToApp: '=', bindType: '=', // One of: 'none', 'application', 'secret-only'
groupByKind: '<' appToBind: '=' // only applicable to 'application' bindType
}, },
templateUrl: 'src/components/binding/bindServiceForm.html', templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () { controller: ["$filter", function ($filter) {
var ctrl = this; var ctrl = this;
}
var humanizeKind = $filter('humanizeKind');
ctrl.groupByKind = function(object) {
return humanizeKind(object.kind);
};
}]
}); });
;"use strict"; ;"use strict";
......
...@@ -86,8 +86,8 @@ description:"Name must consist of lower-case letters, numbers, periods, and hyph ...@@ -86,8 +86,8 @@ description:"Name must consist of lower-case letters, numbers, periods, and hyph
}), hawtioPluginLoader.addModule("openshiftCommonUI"), angular.module("openshiftCommonUI").run([ "$templateCache", function($templateCache) { }), hawtioPluginLoader.addModule("openshiftCommonUI"), angular.module("openshiftCommonUI").run([ "$templateCache", function($templateCache) {
"use strict"; "use strict";
$templateCache.put("src/components/binding/bindApplicationForm.html", '<div class="bind-form">\n <form>\n <div class="form-group">\n <label>\n <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n </label>\n <span class="help-block">\n Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n </span>\n </div>\n </form>\n\n <form name="ctrl.formName">\n <fieldset>\n <div class="radio">\n <label ng-if="ctrl.allowNoBinding">\n <input type="radio" ng-model="ctrl.serviceToBind" value="">\n Do not bind at this time.\n </label>\n <div ng-if="ctrl.allowNoBinding" class="bind-description">\n <span class="help-block service-instance-name">\n You can create the binding later from your project.\n </span>\n </div>\n <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances">\n <label>\n <input type="radio" ng-model="ctrl.serviceToBind" value="{{serviceInstance.metadata.name}}">\n {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n </label>\n <div class="bind-description">\n <span class="pficon pficon-info"\n ng-if="!(serviceInstance | isServiceInstanceReady)"\n data-content="This service is not yet ready. If you bind to it, then the binding will be pending until the service is ready."\n data-toggle="popover"\n data-trigger="hover">\n </span>\n <span class="help-block service-instance-name">\n {{serviceInstance.metadata.name}}\n </span>\n </div>\n </div>\n <h4 ng-if="!ctrl.bindableServiceInstances.length">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="help-block service-instance-name">\n There are no bindable services in this project\n </span>\n </h4>\n </div>\n </fieldset>\n </form>\n</div>\n'), $templateCache.put("src/components/binding/bindApplicationForm.html", '<div class="bind-form">\n <form>\n <div class="form-group">\n <label>\n <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n </label>\n <span class="help-block">\n Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n </span>\n </div>\n </form>\n\n <form name="ctrl.formName">\n <fieldset>\n <div class="radio">\n <label ng-if="ctrl.allowNoBinding">\n <input type="radio" ng-model="ctrl.serviceToBind" value="">\n Do not bind at this time.\n </label>\n <div ng-if="ctrl.allowNoBinding" class="bind-description">\n <span class="help-block service-instance-name">\n You can create the binding later from your project.\n </span>\n </div>\n <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances">\n <label>\n <input type="radio" ng-model="ctrl.serviceToBind" value="{{serviceInstance.metadata.name}}">\n {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n </label>\n <div class="bind-description">\n <span class="pficon pficon-info"\n ng-if="!(serviceInstance | isServiceInstanceReady)"\n data-content="This service is not yet ready. If you bind to it, then the binding will be pending until the service is ready."\n data-toggle="popover"\n data-trigger="hover">\n </span>\n <span class="help-block service-instance-name">\n {{serviceInstance.metadata.name}}\n </span>\n </div>\n </div>\n <h4 ng-if="!ctrl.bindableServiceInstances.length">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="help-block service-instance-name">\n There are no bindable services in this project\n </span>\n </h4>\n </div>\n </fieldset>\n </form>\n</div>\n'),
$templateCache.put("src/components/binding/bindResults.html", '<div ng-if="!ctrl.error">\n <div ng-if="!(ctrl.binding | isBindingReady)" class="bind-status" ng-class="{\'text-center\': !ctrl.progressInline, \'show-progress\': !ctrl.progressInline}">\n <div class="spinner" ng-class="{\'spinner-sm\': ctrl.progressInline, \'spinner-inline\': ctrl.progressInline, \'spinner-lg\': !ctrl.progressInline}" aria-hidden="true"></div>\n <h3 class="bind-message">\n <span class="sr-only">Pending</span>\n <div class="bind-pending-message" ng-class="{\'progress-inline\': ctrl.progressInline}">The binding was created but is not ready yet.</div>\n </h3>\n </div>\n <div ng-if="(ctrl.binding | isBindingReady)">\n <div class="bind-status">\n <span class="pficon pficon-ok" aria-hidden="true"></span>\n <span class="sr-only">Success</span>\n <h3 class="bind-message">\n <strong>{{ctrl.serviceToBind}}</strong>\n <span>&nbsp;has been bound</span>\n <span ng-if="ctrl.applicationToBind">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n </h3>\n </div>\n <div class="sub-title">\n The binding operation created the secret\n <a ng-if="ctrl.secretHref && \'secrets\' | canI : \'list\'"\n ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>\n <span ng-if="!ctrl.secretHref || !(\'secrets\' | canI : \'list\')">{{ctrl.binding.spec.secretName}}</span>\n that you may need to reference in your application.\n <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>\n </div>\n <div class="alert alert-info bind-info">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="sr-only">Info</span>\n The binding secret will only be available to new pods. You will need to redeploy your application.\n </div>\n </div>\n</div>\n<div ng-if="ctrl.error">\n <div class="bind-status">\n <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>\n <span class="sr-only">Error</span>\n <h3 class="bind-message">\n <span>Binding Failed</span>\n </h3>\n </div>\n <div class="sub-title">\n <span ng-if="ctrl.error.data.message">\n {{ctrl.error.data.message | upperFirst}}\n </span>\n <span ng-if="!ctrl.error.data.message">\n An error occurred creating the binding.\n </span>\n </div>\n</div>\n'), $templateCache.put("src/components/binding/bindResults.html", '<div ng-if="!ctrl.error">\n <div ng-if="!(ctrl.binding | isBindingReady)" class="bind-status" ng-class="{\'text-center\': !ctrl.progressInline, \'show-progress\': !ctrl.progressInline}">\n <div class="spinner" ng-class="{\'spinner-sm\': ctrl.progressInline, \'spinner-inline\': ctrl.progressInline, \'spinner-lg\': !ctrl.progressInline}" aria-hidden="true"></div>\n <h3 class="bind-message">\n <span class="sr-only">Pending</span>\n <div class="bind-pending-message" ng-class="{\'progress-inline\': ctrl.progressInline}">The binding was created but is not ready yet.</div>\n </h3>\n </div>\n <div ng-if="(ctrl.binding | isBindingReady)">\n <div class="bind-status">\n <span class="pficon pficon-ok" aria-hidden="true"></span>\n <span class="sr-only">Success</span>\n <h3 class="bind-message">\n <strong>{{ctrl.serviceToBind}}</strong>\n <span>has been bound</span>\n <span ng-if="ctrl.bindType === \'application\'"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n </h3>\n </div>\n <div class="sub-title">\n The binding operation created the secret\n <a ng-if="ctrl.secretHref && \'secrets\' | canI : \'list\'"\n ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>\n <span ng-if="!ctrl.secretHref || !(\'secrets\' | canI : \'list\')">{{ctrl.binding.spec.secretName}}</span>\n that you may need to reference in your application.\n <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>\n </div>\n <div class="alert alert-info bind-info">\n <span class="pficon pficon-info" aria-hidden="true"></span>\n <span class="sr-only">Info</span>\n The binding secret will only be available to new pods. You will need to redeploy your application.\n </div>\n </div>\n</div>\n<div ng-if="ctrl.error">\n <div class="bind-status">\n <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>\n <span class="sr-only">Error</span>\n <h3 class="bind-message">\n <span>Binding Failed</span>\n </h3>\n </div>\n <div class="sub-title">\n <span ng-if="ctrl.error.data.message">\n {{ctrl.error.data.message | upperFirst}}\n </span>\n <span ng-if="!ctrl.error.data.message">\n An error occurred creating the binding.\n </span>\n </div>\n</div>\n'),
$templateCache.put("src/components/binding/bindServiceForm.html", '<div class="bind-form">\n <form>\n <div class="form-group">\n <label>\n <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>\n </label>\n <span class="help-block">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>\n </div>\n </form>\n\n <form name="ctrl.formName" class="mar-bottom-lg">\n <fieldset>\n <div class="radio">\n <label class="bind-choice" ng-disabled="!ctrl.applications.length">\n <input type="radio" ng-model="ctrl.shouldBindToApp" value="true" ng-disabled="!ctrl.applications.length">\n Bind to an application\n </label>\n <div class="application-select">\n <ui-select ng-model="ctrl.appToBind"\n ng-disabled="ctrl.shouldBindToApp !== \'true\'"\n ng-required="ctrl.shouldBindToApp === \'true\'">\n <ui-select-match placeholder="{{ctrl.applications.length ? \'Select an application\' : \'There are no applications in this project\'}}">\n <span>\n {{$select.selected.metadata.name}}\n <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>\n </span>\n </ui-select-match>\n <ui-select-choices\n repeat="application in (ctrl.applications) | filter : { metadata: { name: $select.search } } track by (application | uid)"\n group-by="ctrl.groupByKind">\n <span ng-bind-html="application.metadata.name | highlight : $select.search"></span>\n </ui-select-choices>\n </ui-select>\n </div>\n <label class="bind-choice">\n <input type="radio" ng-model="ctrl.shouldBindToApp" value="false">\n Create a secret in my project\n </label>\n <div class="help-block bind-description">\n You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n </div>\n <label ng-if="ctrl.allowNoBinding" class="bind-choice">\n <input type="radio" ng-model="ctrl.shouldBindToApp" value="none">\n Do not bind at this time\n </label>\n <div ng-if="ctrl.allowNoBinding" class="help-block bind-description">\n You can create the binding later from your project.\n </div>\n </div>\n </fieldset>\n </form>\n</div>\n'), $templateCache.put("src/components/binding/bindServiceForm.html", '<div class="bind-form">\n <form>\n <div class="form-group">\n <label>\n <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>\n </label>\n <span class="help-block">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>\n </div>\n </form>\n\n <form name="ctrl.formName" class="mar-bottom-lg">\n <fieldset>\n <div class="radio">\n <label class="bind-choice" ng-disabled="!ctrl.applications.length">\n <input type="radio" ng-model="ctrl.bindType" value="application" ng-disabled="!ctrl.applications.length">\n Bind to an application\n </label>\n <div class="application-select">\n <ui-select ng-model="ctrl.appToBind"\n ng-disabled="ctrl.bindType !== \'application\'"\n ng-required="ctrl.bindType === \'application\'">\n <ui-select-match placeholder="{{ctrl.applications.length ? \'Select an application\' : \'There are no applications in this project\'}}">\n <span>\n {{$select.selected.metadata.name}}\n <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>\n </span>\n </ui-select-match>\n <ui-select-choices\n repeat="application in (ctrl.applications) | filter : { metadata: { name: $select.search } } track by (application | uid)"\n group-by="ctrl.groupByKind">\n <span ng-bind-html="application.metadata.name | highlight : $select.search"></span>\n </ui-select-choices>\n </ui-select>\n </div>\n <label class="bind-choice">\n <input type="radio" ng-model="ctrl.bindType" value="secret-only">\n Create a secret in my project\n </label>\n <div class="help-block bind-description">\n You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n </div>\n <label ng-if="ctrl.allowNoBinding" class="bind-choice">\n <input type="radio" ng-model="ctrl.bindType" value="none">\n Do not bind at this time\n </label>\n <div ng-if="ctrl.allowNoBinding" class="help-block bind-description">\n You can create the binding later from your project.\n </div>\n </div>\n </fieldset>\n </form>\n</div>\n'),
$templateCache.put("src/components/create-project/createProject.html", '<form name="createProjectForm" novalidate>\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="name" class="required">Name</label>\n <span ng-class="{\'has-error\': (createProjectForm.name.$error.pattern && createProjectForm.name.$touched) || nameTaken}">\n <input class="form-control input-lg"\n name="name"\n id="name"\n placeholder="my-project"\n type="text"\n required\n take-focus\n minlength="2"\n maxlength="63"\n pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"\n aria-describedby="nameHelp"\n ng-model="name"\n ng-model-options="{ updateOn: \'default blur\' }"\n ng-change="nameTaken = false"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false">\n </span>\n <div>\n <span class="help-block">A unique name for the project.</span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.required && createProjectForm.name.$dirty">\n Name is required.\n </span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched">\n Name must have at least two characters.\n </span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.pattern && createProjectForm.name.$touched">\n Project names may only contain lower-case letters, numbers, and dashes.\n They may not start or end with a dash.\n </span>\n </div>\n <div class="has-error">\n <span class="help-block" ng-if="nameTaken">\n This name is already in use. Please choose a different name.\n </span>\n </div>\n </div>\n\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control input-lg"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control input-lg"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="createProject()"\n ng-disabled="createProjectForm.$invalid || nameTaken || disableInputs"\n value="">\n Create\n </button>\n <button\n class="btn btn-default btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelCreateProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'), $templateCache.put("src/components/create-project/createProject.html", '<form name="createProjectForm" novalidate>\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="name" class="required">Name</label>\n <span ng-class="{\'has-error\': (createProjectForm.name.$error.pattern && createProjectForm.name.$touched) || nameTaken}">\n <input class="form-control input-lg"\n name="name"\n id="name"\n placeholder="my-project"\n type="text"\n required\n take-focus\n minlength="2"\n maxlength="63"\n pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"\n aria-describedby="nameHelp"\n ng-model="name"\n ng-model-options="{ updateOn: \'default blur\' }"\n ng-change="nameTaken = false"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false">\n </span>\n <div>\n <span class="help-block">A unique name for the project.</span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.required && createProjectForm.name.$dirty">\n Name is required.\n </span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched">\n Name must have at least two characters.\n </span>\n </div>\n <div class="has-error">\n <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.pattern && createProjectForm.name.$touched">\n Project names may only contain lower-case letters, numbers, and dashes.\n They may not start or end with a dash.\n </span>\n </div>\n <div class="has-error">\n <span class="help-block" ng-if="nameTaken">\n This name is already in use. Please choose a different name.\n </span>\n </div>\n </div>\n\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control input-lg"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control input-lg"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="createProject()"\n ng-disabled="createProjectForm.$invalid || nameTaken || disableInputs"\n value="">\n Create\n </button>\n <button\n class="btn btn-default btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelCreateProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'),
$templateCache.put("src/components/delete-project/delete-project-button.html", '<div class="actions">\n <!-- Avoid whitespace inside the link -->\n <a href=""\n ng-click="$event.stopPropagation(); openDeleteModal()"\n role="button"\n class="action-button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n ><i class="fa fa-trash-o" aria-hidden="true"\n ></i><span class="sr-only">Delete Project {{projectName}}</span></a>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-modal.html", '<div class="delete-resource-modal">\n <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n <form>\n <div class="modal-body">\n <h1>Are you sure you want to delete the project\n \'<strong>{{displayName ? displayName : projectName}}</strong>\'?</h1>\n <p>\n This will <strong>delete all resources</strong> associated with\n the project {{displayName ? displayName : projectName}} and <strong>cannot be\n undone</strong>. Make sure this is something you really want to do!\n </p>\n <div ng-show="typeNameToConfirm">\n <p>Type the name of the project to confirm.</p>\n <p>\n <label class="sr-only" for="resource-to-delete">project to delete</label>\n <input\n ng-model="confirmName"\n id="resource-to-delete"\n type="text"\n class="form-control input-lg"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n autofocus>\n </p>\n </div>\n </div>\n <div class="modal-footer">\n <button ng-disabled="typeNameToConfirm && confirmName !== projectName && confirmName !== displayName" class="btn btn-lg btn-danger" type="submit" ng-click="delete();">Delete</button>\n <button class="btn btn-lg btn-default" type="button" ng-click="cancel();">Cancel</button>\n </div>\n </form>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-button.html", '<div class="actions">\n <!-- Avoid whitespace inside the link -->\n <a href=""\n ng-click="$event.stopPropagation(); openDeleteModal()"\n role="button"\n class="action-button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n ><i class="fa fa-trash-o" aria-hidden="true"\n ></i><span class="sr-only">Delete Project {{projectName}}</span></a>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-modal.html", '<div class="delete-resource-modal">\n <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n <form>\n <div class="modal-body">\n <h1>Are you sure you want to delete the project\n \'<strong>{{displayName ? displayName : projectName}}</strong>\'?</h1>\n <p>\n This will <strong>delete all resources</strong> associated with\n the project {{displayName ? displayName : projectName}} and <strong>cannot be\n undone</strong>. Make sure this is something you really want to do!\n </p>\n <div ng-show="typeNameToConfirm">\n <p>Type the name of the project to confirm.</p>\n <p>\n <label class="sr-only" for="resource-to-delete">project to delete</label>\n <input\n ng-model="confirmName"\n id="resource-to-delete"\n type="text"\n class="form-control input-lg"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n autofocus>\n </p>\n </div>\n </div>\n <div class="modal-footer">\n <button ng-disabled="typeNameToConfirm && confirmName !== projectName && confirmName !== displayName" class="btn btn-lg btn-danger" type="submit" ng-click="delete();">Delete</button>\n <button class="btn btn-lg btn-default" type="button" ng-click="cancel();">Cancel</button>\n </div>\n </form>\n</div>\n'),
$templateCache.put("src/components/delete-project/delete-project.html", '<a href="javascript:void(0)"\n ng-click="openDeleteModal()"\n role="button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n>{{label || \'Delete\'}}</a>\n'), $templateCache.put("src/components/edit-project/editProject.html", '<form name="editProjectForm">\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control input-lg"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="editableFields.displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control input-lg"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="editableFields.description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="update()"\n ng-disabled="editProjectForm.$invalid || disableInputs"\n value="">{{submitButtonLabel}}</button>\n <button\n class="btn btn-default btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelEditProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'), $templateCache.put("src/components/delete-project/delete-project.html", '<a href="javascript:void(0)"\n ng-click="openDeleteModal()"\n role="button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n>{{label || \'Delete\'}}</a>\n'), $templateCache.put("src/components/edit-project/editProject.html", '<form name="editProjectForm">\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control input-lg"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="editableFields.displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control input-lg"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="editableFields.description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="update()"\n ng-disabled="editProjectForm.$invalid || disableInputs"\n value="">{{submitButtonLabel}}</button>\n <button\n class="btn btn-default btn-lg"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelEditProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'),
...@@ -121,6 +121,7 @@ error:"<", ...@@ -121,6 +121,7 @@ error:"<",
binding:"<", binding:"<",
progressInline:"@", progressInline:"@",
serviceToBind:"<", serviceToBind:"<",
bindType:"@",
applicationToBind:"<", applicationToBind:"<",
showPodPresets:"<", showPodPresets:"<",
secretHref:"<" secretHref:"<"
...@@ -139,17 +140,19 @@ controllerAs:"ctrl", ...@@ -139,17 +140,19 @@ controllerAs:"ctrl",
bindings:{ bindings:{
serviceClass:"<", serviceClass:"<",
serviceClassName:"<", serviceClassName:"<",
formName:"=",
applications:"<", applications:"<",
appToBind:"=", formName:"=",
createBinding:"=?",
allowNoBinding:"<?", allowNoBinding:"<?",
shouldBindToApp:"=", bindType:"=",
groupByKind:"<" appToBind:"="
}, },
templateUrl:"src/components/binding/bindServiceForm.html", templateUrl:"src/components/binding/bindServiceForm.html",
controller:function() { controller:[ "$filter", function($filter) {
} var ctrl = this, humanizeKind = $filter("humanizeKind");
ctrl.groupByKind = function(object) {
return humanizeKind(object.kind);
};
} ]
}), angular.module("openshiftCommonUI").directive("createProject", [ "$window", function($window) { }), angular.module("openshiftCommonUI").directive("createProject", [ "$window", function($window) {
return { return {
restrict:"E", restrict:"E",
......
...@@ -71,8 +71,8 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -71,8 +71,8 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <span class=\"sr-only\">Success</span>\n" + " <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" + " <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" + " <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>&nbsp;has been bound</span>\n" + " <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.applicationToBind\">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" + " <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" </h3>\n" + " </h3>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"sub-title\">\n" + " <div class=\"sub-title\">\n" +
...@@ -125,13 +125,13 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -125,13 +125,13 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <fieldset>\n" + " <fieldset>\n" +
" <div class=\"radio\">\n" + " <div class=\"radio\">\n" +
" <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" + " <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\" ng-disabled=\"!ctrl.applications.length\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
" Bind to an application\n" + " Bind to an application\n" +
" </label>\n" + " </label>\n" +
" <div class=\"application-select\">\n" + " <div class=\"application-select\">\n" +
" <ui-select ng-model=\"ctrl.appToBind\"\n" + " <ui-select ng-model=\"ctrl.appToBind\"\n" +
" ng-disabled=\"ctrl.shouldBindToApp !== 'true'\"\n" + " ng-disabled=\"ctrl.bindType !== 'application'\"\n" +
" ng-required=\"ctrl.shouldBindToApp === 'true'\">\n" + " ng-required=\"ctrl.bindType === 'application'\">\n" +
" <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" + " <ui-select-match placeholder=\"{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}\">\n" +
" <span>\n" + " <span>\n" +
" {{$select.selected.metadata.name}}\n" + " {{$select.selected.metadata.name}}\n" +
...@@ -146,14 +146,14 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -146,14 +146,14 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" </ui-select>\n" + " </ui-select>\n" +
" </div>\n" + " </div>\n" +
" <label class=\"bind-choice\">\n" + " <label class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"false\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
" Create a secret in my project\n" + " Create a secret in my project\n" +
" </label>\n" + " </label>\n" +
" <div class=\"help-block bind-description\">\n" + " <div class=\"help-block bind-description\">\n" +
" You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" + " You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
" </div>\n" + " </div>\n" +
" <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" + " <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"none\">\n" + " <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
" Do not bind at this time\n" + " Do not bind at this time\n" +
" </label>\n" + " </label>\n" +
" <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" + " <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
......
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
<span class="sr-only">Success</span> <span class="sr-only">Success</span>
<h3 class="bind-message"> <h3 class="bind-message">
<strong>{{ctrl.serviceToBind}}</strong> <strong>{{ctrl.serviceToBind}}</strong>
<span>&nbsp;has been bound</span> <span>has been bound</span>
<span ng-if="ctrl.applicationToBind">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span> <span ng-if="ctrl.bindType === 'application'"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>
</h3> </h3>
</div> </div>
<div class="sub-title"> <div class="sub-title">
......
...@@ -7,6 +7,7 @@ angular.module('openshiftCommonUI').component('bindResults', { ...@@ -7,6 +7,7 @@ angular.module('openshiftCommonUI').component('bindResults', {
binding: '<', binding: '<',
progressInline: '@', progressInline: '@',
serviceToBind: '<', serviceToBind: '<',
bindType: '@',
applicationToBind: '<', applicationToBind: '<',
showPodPresets: '<', showPodPresets: '<',
secretHref: '<' secretHref: '<'
......
...@@ -12,13 +12,13 @@ ...@@ -12,13 +12,13 @@
<fieldset> <fieldset>
<div class="radio"> <div class="radio">
<label class="bind-choice" ng-disabled="!ctrl.applications.length"> <label class="bind-choice" ng-disabled="!ctrl.applications.length">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="true" ng-disabled="!ctrl.applications.length"> <input type="radio" ng-model="ctrl.bindType" value="application" ng-disabled="!ctrl.applications.length">
Bind to an application Bind to an application
</label> </label>
<div class="application-select"> <div class="application-select">
<ui-select ng-model="ctrl.appToBind" <ui-select ng-model="ctrl.appToBind"
ng-disabled="ctrl.shouldBindToApp !== 'true'" ng-disabled="ctrl.bindType !== 'application'"
ng-required="ctrl.shouldBindToApp === 'true'"> ng-required="ctrl.bindType === 'application'">
<ui-select-match placeholder="{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}"> <ui-select-match placeholder="{{ctrl.applications.length ? 'Select an application' : 'There are no applications in this project'}}">
<span> <span>
{{$select.selected.metadata.name}} {{$select.selected.metadata.name}}
...@@ -33,14 +33,14 @@ ...@@ -33,14 +33,14 @@
</ui-select> </ui-select>
</div> </div>
<label class="bind-choice"> <label class="bind-choice">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="false"> <input type="radio" ng-model="ctrl.bindType" value="secret-only">
Create a secret in my project Create a secret in my project
</label> </label>
<div class="help-block bind-description"> <div class="help-block bind-description">
You can reference this secret later from any application either as environment variables or configuration files mounted as volumes. You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.
</div> </div>
<label ng-if="ctrl.allowNoBinding" class="bind-choice"> <label ng-if="ctrl.allowNoBinding" class="bind-choice">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="none"> <input type="radio" ng-model="ctrl.bindType" value="none">
Do not bind at this time Do not bind at this time
</label> </label>
<div ng-if="ctrl.allowNoBinding" class="help-block bind-description"> <div ng-if="ctrl.allowNoBinding" class="help-block bind-description">
......
...@@ -5,16 +5,19 @@ angular.module('openshiftCommonUI').component('bindServiceForm', { ...@@ -5,16 +5,19 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
bindings: { bindings: {
serviceClass: '<', serviceClass: '<',
serviceClassName: '<', serviceClassName: '<',
formName: '=',
applications: '<', applications: '<',
appToBind: '=', formName: '=',
createBinding: '=?',
allowNoBinding: '<?', allowNoBinding: '<?',
shouldBindToApp: '=', bindType: '=', // One of: 'none', 'application', 'secret-only'
groupByKind: '<' appToBind: '=' // only applicable to 'application' bindType
}, },
templateUrl: 'src/components/binding/bindServiceForm.html', templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () { controller: function ($filter) {
var ctrl = this; var ctrl = this;
var humanizeKind = $filter('humanizeKind');
ctrl.groupByKind = function(object) {
return humanizeKind(object.kind);
};
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment