Skip to content

O
origin-web-common
Commit 79e31fda by Jessica Forrester Committed by GitHub
Options

Merge pull request #58 from jeff-phillips-18/bind 

Add common components for binding
parents bb3f5eab 42d9adc3
Showing with 1165 additions and 1 deletions
dist/less/_bind-service.less 0 → 100644
.bind-form {
h3 {
margin-top: 0;
}
.application-select {
margin-top: 10px;
padding-left: 20px;
}
.bind-description {
padding-left: 20px;
}
.bind-choice {
margin-top: 10px;
&:first-of-type {
margin-top: 0;
}
}
.help-block {
&.service-instance-name {
display: inline-block;
margin-top: 0;
}
}
.radio label[disabled] {
cursor: not-allowed;
}
}
.bind-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-status {
display: flex;
font-size: 16px;
margin-top: 0;
.bind-message {
flex: 1;
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.pficon {
margin-top: 3px;
}
&.show-progress {
display: block;
.bind-message {
padding-left: 0;
}
}
.spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
width: 16px;
}
}
.bind-pending-message {
margin-top: 15px;
&.progress-inline {
margin-top: 0;
}
}
dist/less/common.less
// origin-web-common sans external dependency variables
@import "_animations.less";
@import "_bind-service.less";
@import "_core.less";
@import "_forms.less";
@import "_guided-tour.less";
......
dist/origin-web-common-ui.js
......@@ -11,6 +11,165 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
;angular.module('openshiftCommonUI').run(['$templateCache', function($templateCache) {
'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 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.serviceInstances\">\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" +
" </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.generatedSecretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref || !('secrets' | canI : 'list')\">{{ctrl.generatedSecretName}}</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\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\">\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=\"Select an application\">\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/create-project/createProject.html',
"<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" +
......@@ -256,6 +415,74 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
);
}]);
;'use strict';
angular.module('openshiftCommonUI').component('bindApplicationForm', {
controllerAs: 'ctrl',
bindings: {
allowNoBinding: '<?',
createBinding: '=',
applicationName: '=',
formName: '=',
serviceClasses: '<',
serviceInstances: '<',
serviceToBind: '='
},
templateUrl: 'src/components/binding/bindApplicationForm.html',
controller: function () {
var ctrl = this;
}
});
;'use strict';
angular.module('openshiftCommonUI').component('bindResults', {
controllerAs: 'ctrl',
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
applicationToBind: '<',
generatedSecretName: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
});
;'use strict';
angular.module('openshiftCommonUI').component('bindServiceForm', {
controllerAs: 'ctrl',
bindings: {
serviceClass: '<',
serviceClassName: '<',
formName: '=',
applications: '<',
appToBind: '=',
createBinding: '=?',
allowNoBinding: '<?',
shouldBindToApp: '=',
groupByKind: '<'
},
templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () {
var ctrl = this;
}
});
;"use strict";
angular.module("openshiftCommonUI")
......@@ -1140,6 +1367,25 @@ angular.module('openshiftCommonUI')
return humanized.toLowerCase();
};
})
// gets the status condition that matches provided type
// statusCondition(object, 'Ready')
.filter('statusCondition', function() {
return function(apiObject, type) {
if (!apiObject) {
return null;
}
return _.find(_.get(apiObject, 'status.conditions'), {type: type});
};
})
.filter('isServiceInstanceReady', function(statusConditionFilter) {
return function(apiObject) {
return _.get(statusConditionFilter(apiObject, 'Ready'), 'status') === 'True';
};
})
.filter('isBindingReady', function(isServiceInstanceReadyFilter) {
return isServiceInstanceReadyFilter;
});
;'use strict';
angular.module('openshiftCommonUI')
......
dist/origin-web-common.css
......@@ -18,6 +18,65 @@
transform: translateX(150px);
}
}
.bind-form h3 {
margin-top: 0;
}
.bind-form .application-select {
margin-top: 10px;
padding-left: 20px;
}
.bind-form .bind-description {
padding-left: 20px;
}
.bind-form .bind-choice {
margin-top: 10px;
}
.bind-form .bind-choice:first-of-type {
margin-top: 0;
}
.bind-form .help-block.service-instance-name {
display: inline-block;
margin-top: 0;
}
.bind-form .radio label[disabled] {
cursor: not-allowed;
}
.bind-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-status {
display: flex;
font-size: 16px;
margin-top: 0;
}
.bind-status .bind-message {
flex: 1;
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.bind-status .pficon {
margin-top: 3px;
}
.bind-status.show-progress {
display: block;
}
.bind-status.show-progress .bind-message {
padding-left: 0;
}
.bind-status .spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
width: 16px;
}
.bind-pending-message {
margin-top: 15px;
}
.bind-pending-message.progress-inline {
margin-top: 0;
}
.delete-resource-modal {
background-color: #f1f1f1;
}
......
dist/origin-web-common.js
......@@ -182,6 +182,165 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
;angular.module('openshiftCommonUI').run(['$templateCache', function($templateCache) {
'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 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.serviceInstances\">\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" +
" </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.generatedSecretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref || !('secrets' | canI : 'list')\">{{ctrl.generatedSecretName}}</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\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\">\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=\"Select an application\">\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/create-project/createProject.html',
"<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" +
......@@ -427,6 +586,74 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
);
}]);
;'use strict';
angular.module('openshiftCommonUI').component('bindApplicationForm', {
controllerAs: 'ctrl',
bindings: {
allowNoBinding: '<?',
createBinding: '=',
applicationName: '=',
formName: '=',
serviceClasses: '<',
serviceInstances: '<',
serviceToBind: '='
},
templateUrl: 'src/components/binding/bindApplicationForm.html',
controller: function () {
var ctrl = this;
}
});
;'use strict';
angular.module('openshiftCommonUI').component('bindResults', {
controllerAs: 'ctrl',
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
applicationToBind: '<',
generatedSecretName: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
});
;'use strict';
angular.module('openshiftCommonUI').component('bindServiceForm', {
controllerAs: 'ctrl',
bindings: {
serviceClass: '<',
serviceClassName: '<',
formName: '=',
applications: '<',
appToBind: '=',
createBinding: '=?',
allowNoBinding: '<?',
shouldBindToApp: '=',
groupByKind: '<'
},
templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () {
var ctrl = this;
}
});
;"use strict";
angular.module("openshiftCommonUI")
......@@ -1311,6 +1538,25 @@ angular.module('openshiftCommonUI')
return humanized.toLowerCase();
};
}])
// gets the status condition that matches provided type
// statusCondition(object, 'Ready')
.filter('statusCondition', function() {
return function(apiObject, type) {
if (!apiObject) {
return null;
}
return _.find(_.get(apiObject, 'status.conditions'), {type: type});
};
})
.filter('isServiceInstanceReady', ["statusConditionFilter", function(statusConditionFilter) {
return function(apiObject) {
return _.get(statusConditionFilter(apiObject, 'Ready'), 'status') === 'True';
};
}])
.filter('isBindingReady', ["isServiceInstanceReadyFilter", function(isServiceInstanceReadyFilter) {
return isServiceInstanceReadyFilter;
}]);
;'use strict';
angular.module('openshiftCommonUI')
......
dist/origin-web-common.min.js
......@@ -75,12 +75,66 @@ window.OPENSHIFT_CONFIG.api.k8s.resources = api.k8s, window.OPENSHIFT_CONFIG.api
allDeferreds = allDeferreds.concat(additionalDeferreds), $.when.apply(this, allDeferreds).always(discoveryFinished);
}), angular.module("openshiftCommonUI", []), hawtioPluginLoader.addModule("openshiftCommonUI"), angular.module("openshiftCommonUI").run([ "$templateCache", function($templateCache) {
"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 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.serviceInstances">\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 </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.generatedSecretName}}</a>\n <span ng-if="!ctrl.secretHref || !(\'secrets\' | canI : \'list\')">{{ctrl.generatedSecretName}}</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">\n <input type="radio" ng-model="ctrl.shouldBindToApp" value="true">\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="Select an application">\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/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.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/toast-notifications/toast-notifications.html", '<div class="toast-notifications-list-pf">\n <div ng-repeat="(notificationID, notification) in notifications track by (notificationID + (notification.message || notification.details))" ng-if="!notification.hidden"\n ng-mouseenter="setHover(notification, true)" ng-mouseleave="setHover(notification, false)">\n <div class="toast-pf alert {{notification.type | alertStatus}}" ng-class="{\'alert-dismissable\': !hideCloseButton}">\n <button ng-if="!hideCloseButton" type="button" class="close" ng-click="close(notification)">\n <span class="pficon pficon-close" aria-hidden="true"></span>\n <span class="sr-only">Close</span>\n </button>\n <span class="{{notification.type | alertIcon}}" aria-hidden="true"></span>\n <span class="sr-only">{{notification.type}}</span>\n <span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span>\n <span ng-if="notification.details">{{notification.details}}</span>\n <span ng-repeat="link in notification.links">\n <a ng-if="!link.href" href="" ng-click="onClick(notification, link)" role="button">{{link.label}}</a>\n <a ng-if="link.href" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a>\n <span ng-if="!$last" class="toast-action-divider">|</span>\n </span>\n </div>\n </div>\n</div>\n'),
$templateCache.put("src/components/truncate-long-text/truncateLongText.html", '<!--\n Do not remove class `truncated-content` (here or below) even though it\'s not\n styled directly in origin-web-common. `truncated-content` is used by\n origin-web-console in certain contexts.\n-->\n<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n<span ng-if="truncated">\n <span ng-if="!toggles.expanded">\n <span ng-attr-title="{{content}}" class="truncation-block">\n <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;\n </span>\n <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="nowrap">See All</a>\n </span>\n <span ng-if="toggles.expanded">\n <div ng-if="prettifyJson" class="well">\n <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>\n <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>\n </div>\n <span ng-if="!prettifyJson">\n <span class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>\n <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n </span>\n </span>\n</span>\n');
} ]), angular.module("openshiftCommonUI").directive("createProject", [ "$window", function($window) {
} ]), angular.module("openshiftCommonUI").component("bindApplicationForm", {
controllerAs:"ctrl",
bindings:{
allowNoBinding:"<?",
createBinding:"=",
applicationName:"=",
formName:"=",
serviceClasses:"<",
serviceInstances:"<",
serviceToBind:"="
},
templateUrl:"src/components/binding/bindApplicationForm.html",
controller:function() {
}
}), angular.module("openshiftCommonUI").component("bindResults", {
controllerAs:"ctrl",
bindings:{
error:"<",
binding:"<",
progressInline:"@",
serviceToBind:"<",
applicationToBind:"<",
generatedSecretName:"<",
showPodPresets:"<",
secretHref:"<"
},
templateUrl:"src/components/binding/bindResults.html",
controller:function() {
var ctrl = this;
ctrl.$onInit = function() {
ctrl.progressInline = "true" === ctrl.progressInline;
}, ctrl.$onChanges = function(onChangesObj) {
onChangesObj.progressInline && (ctrl.progressInline = "true" === ctrl.progressInline);
};
}
}), angular.module("openshiftCommonUI").component("bindServiceForm", {
controllerAs:"ctrl",
bindings:{
serviceClass:"<",
serviceClassName:"<",
formName:"=",
applications:"<",
appToBind:"=",
createBinding:"=?",
allowNoBinding:"<?",
shouldBindToApp:"=",
groupByKind:"<"
},
templateUrl:"src/components/binding/bindServiceForm.html",
controller:function() {
}
}), angular.module("openshiftCommonUI").directive("createProject", [ "$window", function($window) {
return {
restrict:"E",
scope:{
......@@ -526,6 +580,18 @@ if (!kind) return kind;
var humanized = _.startCase(kind);
return useTitleCase ? humanized :humanized.toLowerCase();
};
} ]).filter("statusCondition", function() {
return function(apiObject, type) {
return apiObject ? _.find(_.get(apiObject, "status.conditions"), {
type:type
}) :null;
};
}).filter("isServiceInstanceReady", [ "statusConditionFilter", function(statusConditionFilter) {
return function(apiObject) {
return "True" === _.get(statusConditionFilter(apiObject, "Ready"), "status");
};
} ]).filter("isBindingReady", [ "isServiceInstanceReadyFilter", function(isServiceInstanceReadyFilter) {
return isServiceInstanceReadyFilter;
} ]), angular.module("openshiftCommonUI").filter("camelToLower", function() {
return function(str) {
return str ? _.startCase(str).toLowerCase() :str;
......
dist/scripts/templates.js
angular.module('openshiftCommonUI').run(['$templateCache', function($templateCache) {
'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 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.serviceInstances\">\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" +
" </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.generatedSecretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref || !('secrets' | canI : 'list')\">{{ctrl.generatedSecretName}}</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\">\n" +
" <input type=\"radio\" ng-model=\"ctrl.shouldBindToApp\" value=\"true\">\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=\"Select an application\">\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/create-project/createProject.html',
"<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" +
......
src/components/binding/bindApplicationForm.html 0 → 100644
<div class="bind-form">
<form>
<div class="form-group">
<label>
<h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>
</label>
<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>
</div>
</form>
<form name="ctrl.formName">
<fieldset>
<div class="radio">
<label ng-if="ctrl.allowNoBinding">
<input type="radio" ng-model="ctrl.serviceToBind" value="">
Do not bind at this time.
</label>
<div class="bind-description">
<span class="help-block service-instance-name">
You can create the binding later from your project.
</span>
</div>
<div ng-repeat="serviceInstance in ctrl.serviceInstances">
<label>
<input type="radio" ng-model="ctrl.serviceToBind" value="{{serviceInstance.metadata.name}}">
{{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}
</label>
<div class="bind-description">
<span class="pficon pficon-info"
ng-if="!(serviceInstance | isServiceInstanceReady)"
data-content="This service is not yet ready. If you bind to it, then the binding will be pending until the service is ready."
data-toggle="popover"
data-trigger="hover">
</span>
<span class="help-block service-instance-name">
{{serviceInstance.metadata.name}}
</span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
src/components/binding/bindApplicationForm.js 0 → 100644
'use strict';
angular.module('openshiftCommonUI').component('bindApplicationForm', {
controllerAs: 'ctrl',
bindings: {
allowNoBinding: '<?',
createBinding: '=',
applicationName: '=',
formName: '=',
serviceClasses: '<',
serviceInstances: '<',
serviceToBind: '='
},
templateUrl: 'src/components/binding/bindApplicationForm.html',
controller: function () {
var ctrl = this;
}
});
src/components/binding/bindResults.html 0 → 100644
<div ng-if="!ctrl.error">
<div ng-if="!(ctrl.binding | isBindingReady)" class="bind-status" ng-class="{'text-center': !ctrl.progressInline, 'show-progress': !ctrl.progressInline}">
<div class="spinner" ng-class="{'spinner-sm': ctrl.progressInline, 'spinner-inline': ctrl.progressInline, 'spinner-lg': !ctrl.progressInline}" aria-hidden="true"></div>
<h3 class="bind-message">
<span class="sr-only">Pending</span>
<div class="bind-pending-message" ng-class="{'progress-inline': ctrl.progressInline}">The binding was created but is not ready yet.</div>
</h3>
</div>
<div ng-if="(ctrl.binding | isBindingReady)">
<div class="bind-status">
<span class="pficon pficon-ok" aria-hidden="true"></span>
<span class="sr-only">Success</span>
<h3 class="bind-message">
<strong>{{ctrl.serviceToBind}}</strong>
<span>&nbsp;has been bound</span>
<span ng-if="ctrl.applicationToBind">&nbsp;to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>
</h3>
</div>
<div class="sub-title">
The binding operation created the secret
<a ng-if="ctrl.secretHref && 'secrets' | canI : 'list'"
ng-href="{{ctrl.secretHref}}">{{ctrl.generatedSecretName}}</a>
<span ng-if="!ctrl.secretHref || !('secrets' | canI : 'list')">{{ctrl.generatedSecretName}}</span>
that you may need to reference in your application.
<span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>
</div>
<div class="alert alert-info bind-info">
<span class="pficon pficon-info" aria-hidden="true"></span>
<span class="sr-only">Info</span>
The binding secret will only be available to new pods. You will need to redeploy your application.
</div>
</div>
</div>
<div ng-if="ctrl.error">
<div class="bind-status">
<span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
<span class="sr-only">Error</span>
<h3 class="bind-message">
<span>Binding Failed</span>
</h3>
</div>
<div class="sub-title">
<span ng-if="ctrl.error.data.message">
{{ctrl.error.data.message | upperFirst}}
</span>
<span ng-if="!ctrl.error.data.message">
An error occurred creating the binding.
</span>
</div>
</div>
src/components/binding/bindResults.js 0 → 100644
'use strict';
angular.module('openshiftCommonUI').component('bindResults', {
controllerAs: 'ctrl',
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
applicationToBind: '<',
generatedSecretName: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
});
src/components/binding/bindServiceForm.html 0 → 100644
<div class="bind-form">
<form>
<div class="form-group">
<label>
<h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>
</label>
<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>
</div>
</form>
<form name="ctrl.formName" class="mar-bottom-lg">
<fieldset>
<div class="radio">
<label class="bind-choice">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="true">
Bind to an application
</label>
<div class="application-select">
<ui-select ng-model="ctrl.appToBind"
ng-disabled="ctrl.shouldBindToApp !== 'true'"
ng-required="ctrl.shouldBindToApp === 'true'">
<ui-select-match placeholder="Select an application">
<span>
{{$select.selected.metadata.name}}
<small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
</span>
</ui-select-match>
<ui-select-choices
repeat="application in (ctrl.applications) | filter : { metadata: { name: $select.search } } track by (application | uid)"
group-by="ctrl.groupByKind">
<span ng-bind-html="application.metadata.name | highlight : $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
<label class="bind-choice">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="false">
Create a secret in my project
</label>
<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.
</div>
<label ng-if="ctrl.allowNoBinding" class="bind-choice">
<input type="radio" ng-model="ctrl.shouldBindToApp" value="none">
Do not bind at this time
</label>
<div ng-if="ctrl.allowNoBinding" class="help-block bind-description">
You can create the binding later from your project.
</div>
</div>
</fieldset>
</form>
</div>
src/components/binding/bindServiceForm.js 0 → 100644
'use strict';
angular.module('openshiftCommonUI').component('bindServiceForm', {
controllerAs: 'ctrl',
bindings: {
serviceClass: '<',
serviceClassName: '<',
formName: '=',
applications: '<',
appToBind: '=',
createBinding: '=?',
allowNoBinding: '<?',
shouldBindToApp: '=',
groupByKind: '<'
},
templateUrl: 'src/components/binding/bindServiceForm.html',
controller: function () {
var ctrl = this;
}
});
src/filters/resources.js
......@@ -114,4 +114,23 @@ angular.module('openshiftCommonUI')
return humanized.toLowerCase();
};
})
// gets the status condition that matches provided type
// statusCondition(object, 'Ready')
.filter('statusCondition', function() {
return function(apiObject, type) {
if (!apiObject) {
return null;
}
return _.find(_.get(apiObject, 'status.conditions'), {type: type});
};
})
.filter('isServiceInstanceReady', function(statusConditionFilter) {
return function(apiObject) {
return _.get(statusConditionFilter(apiObject, 'Ready'), 'status') === 'True';
};
})
.filter('isBindingReady', function(isServiceInstanceReadyFilter) {
return isServiceInstanceReadyFilter;
});
src/styles/_bind-service.less 0 → 100644
.bind-form {
h3 {
margin-top: 0;
}
.application-select {
margin-top: 10px;
padding-left: 20px;
}
.bind-description {
padding-left: 20px;
}
.bind-choice {
margin-top: 10px;
&:first-of-type {
margin-top: 0;
}
}
.help-block {
&.service-instance-name {
display: inline-block;
margin-top: 0;
}
}
.radio label[disabled] {
cursor: not-allowed;
}
}
.bind-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-status {
display: flex;
font-size: 16px;
margin-top: 0;
.bind-message {
flex: 1;
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.pficon {
margin-top: 3px;
}
&.show-progress {
display: block;
.bind-message {
padding-left: 0;
}
}
.spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
width: 16px;
}
}
.bind-pending-message {
margin-top: 15px;
&.progress-inline {
margin-top: 0;
}
}
src/styles/common.less
// origin-web-common sans external dependency variables
@import "_animations.less";
@import "_bind-service.less";
@import "_core.less";
@import "_forms.less";
@import "_guided-tour.less";
......
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