-
Notifications
You must be signed in to change notification settings - Fork 230
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add 'Select from Project' wizard to allow project templatesto be imported #1966
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,21 +4,46 @@ | |
angular.module('openshiftConsole').component('processTemplateDialog', { | ||
controller: [ | ||
'$scope', | ||
'$filter', | ||
'Catalog', | ||
'DataService', | ||
'KeywordService', | ||
'NotificationsService', | ||
'ProjectsService', | ||
'RecentlyViewedProjectsService', | ||
ProcessTemplateDialog | ||
], | ||
controllerAs: '$ctrl', | ||
bindings: { | ||
template: '<', | ||
project: '<', | ||
useProjectTemplate: '<', | ||
onDialogClosed: '&' | ||
}, | ||
templateUrl: 'views/directives/process-template-dialog.html' | ||
}); | ||
|
||
function ProcessTemplateDialog($scope, DataService) { | ||
function ProcessTemplateDialog($scope, | ||
$filter, | ||
Catalog, | ||
DataService, | ||
KeywordService, | ||
NotificationsService, | ||
ProjectsService, | ||
RecentlyViewedProjectsService) { | ||
var ctrl = this; | ||
var validityWatcher; | ||
|
||
ctrl.selectStep = { | ||
id: 'projectTemplates', | ||
label: 'Selection', | ||
view: 'views/directives/process-template-dialog/process-template-select.html', | ||
hidden: ctrl.useProjectTemplate !== true, | ||
allowed: true, | ||
valid: false, | ||
onShow: showSelect | ||
}; | ||
|
||
ctrl.configStep = { | ||
id: 'configuration', | ||
label: 'Configuration', | ||
|
@@ -43,6 +68,38 @@ | |
|
||
ctrl.$onInit = function() { | ||
ctrl.loginBaseUrl = DataService.openshiftAPIBaseUrl(); | ||
ctrl.preSelectedProject = ctrl.selectedProject = ctrl.project; | ||
listProjects(); | ||
|
||
ctrl.projectEmptyState = { | ||
icon: 'pficon pficon-info', | ||
title: 'No Project Selected', | ||
info: 'Please select a project from the dropdown to load Templates from that project.' | ||
}; | ||
|
||
ctrl.templatesEmptyState = { | ||
icon: 'pficon pficon-info', | ||
title: 'No Templates', | ||
info: 'The selected project has no templates available to import.' | ||
}; | ||
|
||
ctrl.filterConfig = { | ||
fields: [ | ||
{ | ||
id: 'keyword', | ||
title: 'Keyword', | ||
placeholder: 'Filter by Keyword', | ||
filterType: 'text' | ||
} | ||
], | ||
inlineResults: true, | ||
showTotalCountResults: true, | ||
itemsLabel: 'Item', | ||
itemsLabelPlural: 'Items', | ||
resultsCount: 0, | ||
appliedFilters: [], | ||
onFilterChange: filterChange | ||
}; | ||
}; | ||
|
||
ctrl.$onChanges = function(changes) { | ||
|
@@ -52,6 +109,9 @@ | |
ctrl.iconClass = getIconClass(); | ||
} | ||
} | ||
if (changes.useProjectTemplate) { | ||
initializeSteps(); | ||
} | ||
}; | ||
|
||
$scope.$on('templateInstantiated', function(event, message) { | ||
|
@@ -85,13 +145,49 @@ | |
} | ||
}; | ||
|
||
ctrl.onProjectSelected = function(project) { | ||
ctrl.selectedProject = project; | ||
ctrl.configStep.valid = $scope.$ctrl.form.$valid && ctrl.selectedProject; | ||
}; | ||
|
||
ctrl.templateSelected = function(template) { | ||
ctrl.selectedTemplate = template; | ||
ctrl.template = _.get(template, 'resource'); | ||
ctrl.selectStep.valid = !!template; | ||
}; | ||
|
||
ctrl.templateProjectChange = function () { | ||
ctrl.templateProjectName = _.get(ctrl.templateProject, 'metadata.name'); | ||
|
||
// Get the templates for the selected project | ||
ctrl.catalogItems = {}; | ||
ctrl.templateSelected(); | ||
|
||
Catalog.getProjectCatalogItems(ctrl.templateProjectName, false, true).then( _.spread(function(catalogServiceItems, errorMessage) { | ||
ctrl.catalogItems = catalogServiceItems; | ||
ctrl.totalCount = ctrl.catalogItems.length; | ||
filterItems(); | ||
|
||
if (errorMessage) { | ||
NotificationsService.addNotification( | ||
{ | ||
type: "error", | ||
message: errorMessage | ||
} | ||
); | ||
} | ||
})); | ||
}; | ||
|
||
function getIconClass() { | ||
var icon = _.get(ctrl, 'template.metadata.annotations.iconClass', 'fa fa-clone'); | ||
return (icon.indexOf('icon-') !== -1) ? 'font-icon ' + icon : icon; | ||
} | ||
|
||
function initializeSteps() { | ||
ctrl.steps = [ctrl.configStep, ctrl.resultsStep]; | ||
if (!ctrl.steps) { | ||
ctrl.steps = [ctrl.selectStep, ctrl.configStep, ctrl.resultsStep]; | ||
} | ||
} | ||
|
||
function clearValidityWatcher() { | ||
|
@@ -101,19 +197,30 @@ | |
} | ||
} | ||
|
||
function showSelect() { | ||
ctrl.selectStep.selected = true; | ||
ctrl.configStep.selected = false; | ||
ctrl.resultsStep.selected = false; | ||
ctrl.nextTitle = "Next >"; | ||
clearValidityWatcher(); | ||
listProjects(); | ||
} | ||
|
||
function showConfig() { | ||
ctrl.selectStep.selected = false; | ||
ctrl.configStep.selected = true; | ||
ctrl.resultsStep.selected = false; | ||
ctrl.nextTitle = "Create"; | ||
ctrl.resultsStep.allowed = ctrl.configStep.valid; | ||
|
||
validityWatcher = $scope.$watch("$ctrl.form.$valid", function(isValid) { | ||
ctrl.configStep.valid = isValid; | ||
ctrl.configStep.valid = isValid && ctrl.selectedProject; | ||
ctrl.resultsStep.allowed = isValid; | ||
}); | ||
} | ||
|
||
function showResults() { | ||
ctrl.selectStep.selected = false; | ||
ctrl.configStep.selected = false; | ||
ctrl.resultsStep.selected = true; | ||
ctrl.nextTitle = "Close"; | ||
|
@@ -124,5 +231,60 @@ | |
function instantiateTemplate() { | ||
$scope.$broadcast('instantiateTemplate'); | ||
} | ||
|
||
function filterForKeywords(searchText, items) { | ||
return KeywordService.filterForKeywords(items, ['name', 'tags'], KeywordService.generateKeywords(searchText)); | ||
} | ||
|
||
function filterChange(filters) { | ||
ctrl.filterConfig.appliedFilters = filters; | ||
filterItems(); | ||
} | ||
|
||
function filterItems() { | ||
ctrl.filteredItems = ctrl.catalogItems; | ||
if (ctrl.filterConfig.appliedFilters && ctrl.filterConfig.appliedFilters.length > 0) { | ||
_.each(ctrl.filterConfig.appliedFilters, function(filter) { | ||
ctrl.filteredItems = filterForKeywords(filter.value, ctrl.filteredItems); | ||
}); | ||
} | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Curious if order of flow here matters, since what is inside There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adjusted, not sure what you were getting at but the timeout was unnecessary. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great! I just have a tendency to pause and ask a question when I see |
||
// Deselect the currently selected template if it was filtered out | ||
if (!_.includes(ctrl.filteredItems, ctrl.selectedTemplate)) { | ||
ctrl.templateSelected(); | ||
} | ||
|
||
updateFilterControls(); | ||
} | ||
|
||
function updateFilterControls() { | ||
ctrl.filterConfig.resultsCount = ctrl.filteredItems.length; | ||
|
||
if (ctrl.totalCount <= 1) { | ||
$('.filter-pf.filter-fields input').attr('disabled', ''); | ||
} else { | ||
$('.filter-pf.filter-fields input').removeAttr("disabled"); | ||
} | ||
} | ||
|
||
var updateProjects = function() { | ||
var filteredProjects = _.reject(ctrl.unfilteredProjects, 'metadata.deletionTimestamp'); | ||
var projects = _.sortBy(filteredProjects, $filter('displayName')); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hi, this |
||
ctrl.searchEnabled = !_.isEmpty(filteredProjects); | ||
|
||
ctrl.templateProjects = RecentlyViewedProjectsService.orderByMostRecentlyViewed(projects); | ||
}; | ||
|
||
function listProjects() { | ||
if (!ctrl.unfilteredProjects) { | ||
ProjectsService.list().then(function(projectData) { | ||
ctrl.unfilteredProjects = _.toArray(projectData.by("metadata.name")); | ||
}, function() { | ||
ctrl.unfilteredProjects = []; | ||
}).finally(function() { | ||
updateProjects(); | ||
}); | ||
} | ||
} | ||
} | ||
})(); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<div class="osc-form"> | ||
<form name="$ctrl.form"> | ||
<process-template template="$ctrl.template" is-dialog="true"></process-template> | ||
<process-template template="$ctrl.template" project="$ctrl.preSelectedProject" on-project-selected="$ctrl.onProjectSelected" available-projects="$ctrl.unfilteredProjects" is-dialog="true"></process-template> | ||
</form> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
<next-steps | ||
project="$ctrl.selectedProject" | ||
project-name="$ctrl.selectedProject.metadata.name" | ||
login-base-url="$ctrl.loginBaseUrl"> | ||
login-base-url="$ctrl.loginBaseUrl" | ||
on-continue="$ctrl.close"> | ||
</next-steps> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ctrl.useProjectTemplate !== true
vs!ctrl.useProjectTemplate
? Non-boolean options possible?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a passed in parameter, I am defaulting to false unless explicitly set to true.