Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs in the Tower display.
"),
dataContainer: 'body',
- ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
variables: {
label: i18n._('Extra Variables'),
@@ -360,14 +362,14 @@ export default
variable: 'ask_variables_on_launch',
text: i18n._('Prompt on launch')
},
- ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
+ ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)' // TODO: get working
}
},
buttons: { //for now always generates tags
add_survey: {
ngClick: 'addSurvey()',
- ngShow: 'job_type.value !== "scan" && !survey_exists && (job_template_obj.summary_fields.user_capabilities.edit || canAdd)',
+ ngShow: 'job_type.value !== "scan" && !survey_exists && (job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)',
awFeature: 'surveys',
awToolTip: 'Surveys allow users to be prompted at job launch with a series of questions related to the job. This allows for variables to be defined that affect the playbook run at time of launch.',
dataPlacement: 'top'
@@ -375,25 +377,25 @@ export default
edit_survey: {
ngClick: 'editSurvey()',
awFeature: 'surveys',
- ngShow: 'job_type.value !== "scan" && survey_exists && (job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: 'job_type.value !== "scan" && survey_exists && (job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
view_survey: {
ngClick: 'editSurvey()',
awFeature: 'surveys',
- ngShow: 'job_type.value !== "scan" && survey_exists && !(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: 'job_type.value !== "scan" && survey_exists && !(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
cancel: {
ngClick: 'formCancel()',
- ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
close: {
ngClick: 'formCancel()',
- ngShow: '!(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
},
save: {
ngClick: 'formSave()', //$scope.function to call on click, optional
ngDisabled: "job_templates_form.$invalid",//true //Disable when $pristine or $invalid, optional and when can_edit = false, for permission reasons
- ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
}
},
@@ -420,7 +422,7 @@ export default
awToolTip: 'Add a permission',
actionClass: 'btn List-buttonSubmit',
buttonContent: '+ ADD',
- ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAdd)'
+ ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
}
},
diff --git a/awx/ui/client/src/forms/Jobs.js b/awx/ui/client/src/forms/Jobs.js
deleted file mode 100644
index 0584c10159..0000000000
--- a/awx/ui/client/src/forms/Jobs.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
- /**
- * @ngdoc function
- * @name forms.function:Jobs
- * @description This form is for adding/editing a Job
-*/
-
-export default
- angular.module('JobFormDefinition', [])
- .value('JobForm', {
-
- addTitle: 'Create Job',
- editTitle: '{{ id }} - {{ name }}',
- name: 'jobs',
- stateTree: 'jobs',
- well: true,
- base: 'jobs',
- tabs: true,
-
- navigationLinks: {
- details: {
- href: "/#/jobs/{{ job_id }}",
- label: 'Status',
- icon: 'icon-zoom-in',
- active: true,
- ngShow: "job_id !== null"
- },
- events: {
- href: "/#/jobs/{{ job_id }}/job_events",
- label: 'Events',
- icon: 'icon-list-ul'
- },
- hosts: {
- href: "/#/jobs/{{ job_id }}/job_host_summaries",
- label: 'Host Summary',
- icon: 'icon-laptop'
- }
- },
-
- fields: {
- status: {
- type: 'custom',
- control: "Select the credential you want the job to use when accessing the remote hosts. Choose the credential containing " +
+ " the username and SSH key or password that Ansible will need to log into the remote hosts.
"),
+ dataTitle: i18n._('Credential'),
+ dataPlacement: 'right',
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_credential_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate',
+ awRequiredWhen: {
+ reqExpression: 'selectedTemplate && selectedTemplate.ask_credential_on_launch'
+ }
+ },
+ inventory: {
+ label: i18n._('Inventory'),
+ type: 'lookup',
+ sourceModel: 'inventory',
+ sourceField: 'name',
+ list: 'OrganizationList',
+ basePath: 'organization',
+ ngClick: 'lookUpInventory()',
+ requiredErrorMsg: i18n._("Please select an Inventory."),
+ class: 'Form-formGroup--fullWidth',
+ awPopOver: i18n._("Select the inventory containing the hosts you want this job to manage.
"),
+ dataTitle: i18n._('Inventory'),
+ dataPlacement: 'right',
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_inventory_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate',
+ awRequiredWhen: {
+ reqExpression: 'selectedTemplate && selectedTemplate.ask_inventory_on_launch'
+ }
+ },
+ job_type: {
+ label: i18n._('Job Type'),
+ type: 'select',
+ ngOptions: 'type.label for type in job_type_options track by type.value',
+ "default": 0,
+ class: 'Form-formGroup--fullWidth',
+ awPopOver: i18n._("When this template is submitted as a job, setting the type to run will execute the playbook, running tasks " +
+ " on the selected hosts.
Setting the type to check will not execute the playbook. Instead, ansible will check playbook " +
+ " syntax, test environment setup and report problems.
Setting the type to scan will execute the playbook and store any " +
+ " scanned facts for use with Tower's System Tracking feature.
"),
+ dataTitle: i18n._('Job Type'),
+ dataPlacement: 'right',
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_job_type_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate',
+ awRequiredWhen: {
+ reqExpression: 'selectedTemplate && selectedTemplate.ask_job_type_on_launch'
+ }
+ },
+ limit: {
+ label: i18n._('Limit'),
+ type: 'text',
+ class: 'Form-formGroup--fullWidth',
+ awPopOver: i18n._("Provide a host pattern to further constrain the list of hosts that will be managed or affected by the playbook. " +
+ "Multiple patterns can be separated by ; : or ,
For more information and examples see " +
+ "the Patterns topic at docs.ansible.com .
"),
+ dataTitle: i18n._('Limit'),
+ dataPlacement: 'right',
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_limit_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate'
+ },
+ job_tags: {
+ label: i18n._('Job Tags'),
+ type: 'textarea',
+ rows: 5,
+ 'elementClass': 'Form-textInput',
+ class: 'Form-formGroup--fullWidth',
+ awPopOver: i18n._("Provide a comma separated list of tags.
\n" +
+ "Tags are useful when you have a large playbook, and you want to run a specific part of a play or task.
" +
+ "Consult the Ansible documentation for further details on the usage of tags.
"),
+ dataTitle: i18n._("Job Tags"),
+ dataPlacement: "right",
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_tags_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate'
+ },
+ skip_tags: {
+ label: i18n._('Skip Tags'),
+ type: 'textarea',
+ rows: 5,
+ 'elementClass': 'Form-textInput',
+ class: 'Form-formGroup--fullWidth',
+ awPopOver: i18n._("Provide a comma separated list of tags.
\n" +
+ "Skip tags are useful when you have a large playbook, and you want to skip specific parts of a play or task.
" +
+ "Consult the Ansible documentation for further details on the usage of tags.
"),
+ dataTitle: i18n._("Skip Tags"),
+ dataPlacement: "right",
+ dataContainer: "body",
+ ngShow: "selectedTemplate.ask_skip_tags_on_launch",
+ ngDisabled: '!canAddWorkflowJobTemplate'
+ }
+ },
+ buttons: {
+ cancel: {
+ ngClick: 'cancelNodeForm()',
+ ngShow: 'canAddWorkflowJobTemplate'
+ },
+ close: {
+ ngClick: 'cancelNodeForm()',
+ ngShow: '!canAddWorkflowJobTemplate'
+ },
+ save: {
+ ngClick: 'saveNodeForm()',
+ ngDisabled: "workflow_maker_form.$invalid || !selectedTemplate",
+ ngShow: 'canAddWorkflowJobTemplate'
+ }
+ }
+ };}])
+ .factory('WorkflowMakerForm', ['WorkflowMakerFormObject', 'NotificationsList', function(WorkflowMakerFormObject, NotificationsList) {
+ return function() {
+ var itm;
+ for (itm in WorkflowMakerFormObject.related) {
+ if (WorkflowMakerFormObject.related[itm].include === "NotificationsList") {
+ WorkflowMakerFormObject.related[itm] = NotificationsList;
+ WorkflowMakerFormObject.related[itm].generateList = true; // tell form generator to call list generator and inject a list
+ }
+ }
+ return WorkflowMakerFormObject;
+ };
+ }]);
diff --git a/awx/ui/client/src/forms/Workflows.js b/awx/ui/client/src/forms/Workflows.js
new file mode 100644
index 0000000000..113251b8c4
--- /dev/null
+++ b/awx/ui/client/src/forms/Workflows.js
@@ -0,0 +1,208 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/**
+ * @ngdoc function
+ * @name forms.function:Workflow
+ * @description This form is for adding/editing a Workflow
+*/
+
+export default
+ angular.module('WorkflowFormDefinition', [])
+
+ .factory('WorkflowFormObject', ['i18n', function(i18n) {
+ return {
+
+ addTitle: i18n._('New Workflow'),
+ editTitle: '{{ name }}',
+ name: 'workflow_job_template',
+ base: 'workflow',
+ basePath: 'workflow_job_templates',
+ // the top-most node of generated state tree
+ stateTree: 'templates',
+ activeEditState: 'templates.editWorkflowJobTemplate',
+ tabs: true,
+
+ fields: {
+ name: {
+ label: i18n._('Name'),
+ type: 'text',
+ required: true,
+ ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)',
+ column: 1
+ },
+ description: {
+ label: i18n._('Description'),
+ type: 'text',
+ column: 1,
+ ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ },
+ organization: {
+ label: i18n._('Organization'),
+ type: 'lookup',
+ sourceModel: 'organization',
+ basePath: 'organizations',
+ list: 'OrganizationList',
+ sourceField: 'name',
+ dataTitle: i18n._('Organization'),
+ dataContainer: 'body',
+ dataPlacement: 'right',
+ column: 1,
+ ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ },
+ labels: {
+ label: i18n._('Labels'),
+ type: 'select',
+ class: 'Form-formGroup--fullWidth',
+ ngOptions: 'label.label for label in labelOptions track by label.value',
+ multiSelect: true,
+ dataTitle: i18n._('Labels'),
+ dataPlacement: 'right',
+ awPopOver: i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs in the Tower display.
"),
+ dataContainer: 'body',
+ ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ },
+ variables: {
+ label: i18n._('Extra Variables'),
+ type: 'textarea',
+ class: 'Form-textAreaLabel Form-formGroup--fullWidth',
+ rows: 6,
+ "default": "---",
+ column: 2,
+ awPopOver: i18n._("Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter " +
+ "for ansible-playbook. Provide key/value pairs using either YAML or JSON.
" +
+ "JSON:{ \n" +
+ "YAML:--- \n"),
+ dataTitle: i18n._('Extra Variables'),
+ dataPlacement: 'right',
+ dataContainer: "body",
+ ngDisabled: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)' // TODO: get working
+ }
+ },
+
+ buttons: { //for now always generates tags
+ cancel: {
+ ngClick: 'formCancel()',
+ ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ },
+ close: {
+ ngClick: 'formCancel()',
+ ngShow: '!(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ },
+ save: {
+ ngClick: 'formSave()', //$scope.function to call on click, optional
+ ngDisabled: "workflow_form.$invalid || can_edit!==true", //Disable when $pristine or $invalid, optional and when can_edit = false, for permission reasons
+ ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ }
+ },
+
+ related: {
+ permissions: {
+ awToolTip: i18n._('Please save before assigning permissions'),
+ dataPlacement: 'top',
+ basePath: 'api/v1/workflow_job_templates/{{$stateParams.workflow_job_template_id}}/access_list/',
+ search: {
+ order_by: 'username'
+ },
+ type: 'collection',
+ title: i18n._('Permissions'),
+ iterator: 'permission',
+ index: false,
+ open: false,
+ actions: {
+ add: {
+ ngClick: "$state.go('.add')",
+ label: 'Add',
+ awToolTip: 'Add a permission',
+ actionClass: 'btn List-buttonSubmit',
+ buttonContent: '+ ADD',
+ ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
+ }
+ },
+
+ fields: {
+ username: {
+ key: true,
+ label: 'User',
+ linkBase: 'users',
+ class: 'col-lg-3 col-md-3 col-sm-3 col-xs-4'
+ },
+ role: {
+ label: 'Role',
+ type: 'role',
+ noSort: true,
+ class: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
+ },
+ team_roles: {
+ label: 'Team Roles',
+ type: 'team_roles',
+ noSort: true,
+ class: 'col-lg-5 col-md-5 col-sm-5 col-xs-4',
+ }
+ }
+ },
+ "notifications": {
+ include: "NotificationsList"
+ }
+ },
+
+ relatedButtons: {
+ add_survey: {
+ ngClick: 'addSurvey()',
+ ngShow: '!survey_exists',
+ awFeature: 'surveys',
+ awToolTip: i18n._('Please save before adding a survey'),
+ dataPlacement: 'top',
+ label: i18n._('Add Survey'),
+ class: 'Form-primaryButton'
+ },
+ edit_survey: {
+ ngClick: 'editSurvey()',
+ awFeature: 'surveys',
+ ngShow: 'survey_exists',
+ label: i18n._('Edit Survey'),
+ class: 'Form-primaryButton'
+ },
+ workflow_editor: {
+ ngClick: 'openWorkflowMaker()',
+ awToolTip: i18n._('Please save before defining the workflow graph'),
+ dataPlacement: 'top',
+ label: i18n._('Workflow Editor'),
+ class: 'Form-primaryButton'
+ }
+ },
+
+ relatedSets: function(urls) {
+ return {
+ permissions: {
+ iterator: 'permission',
+ url: urls.access_list
+ },
+ notifications: {
+ iterator: 'notification',
+ url: '/api/v1/notification_templates/'
+ }
+ };
+ }
+ };}])
+
+ .factory('WorkflowForm', ['WorkflowFormObject', 'NotificationsList',
+ function(WorkflowFormObject, NotificationsList) {
+ return function() {
+ var itm;
+
+ for (itm in WorkflowFormObject.related) {
+ if (WorkflowFormObject.related[itm].include === "NotificationsList") {
+ WorkflowFormObject.related[itm] = NotificationsList;
+ WorkflowFormObject.related[itm].generateList = true; // tell form generator to call list generator and inject a list
+ }
+ }
+
+ return WorkflowFormObject;
+ };
+ }]);
diff --git a/awx/ui/client/src/helpers/JobDetail.js b/awx/ui/client/src/helpers/JobDetail.js
index b96c8c3d37..0cda454f2e 100644
--- a/awx/ui/client/src/helpers/JobDetail.js
+++ b/awx/ui/client/src/helpers/JobDetail.js
@@ -1039,7 +1039,6 @@ export default
//plays = JSON.parse(JSON.stringify(scope.jobData.plays)),
plays = scope.jobData.plays,
filteredListX = [],
- filteredListA = [],
filteredListB = [],
key,
keys;
@@ -1113,7 +1112,6 @@ export default
var scope = params.scope,
result = [],
filteredListX = [],
- filteredListA = [],
filteredListB = [],
idx, key, keys, newKeys, tasks, t;
@@ -1196,11 +1194,9 @@ export default
return function(params) {
var scope = params.scope,
result = [],
- filteredListA = [],
filteredListB = [],
idx = 0,
hostResults,
- key,
keys;
if (scope.activePlay && scope.activeTask && scope.jobData.plays[scope.activePlay] &&
@@ -1232,7 +1228,7 @@ export default
// else {
// filteredListB = filteredListA;
// }
-
+
keys = Object.keys(filteredListB);
keys.sort(function compare(a, b) {
if (filteredListB[a].name === filteredListB[b].name) {
diff --git a/awx/ui/client/src/helpers/Schedules.js b/awx/ui/client/src/helpers/Schedules.js
index 198d204975..b56d966e4f 100644
--- a/awx/ui/client/src/helpers/Schedules.js
+++ b/awx/ui/client/src/helpers/Schedules.js
@@ -381,7 +381,6 @@ export default
return function(params) {
var scope = params.scope,
id = params.id,
- callback = params.callback,
url = GetBasePath('schedules') + id +'/';
// Perform the update
diff --git a/awx/ui/client/src/helpers/teams.js b/awx/ui/client/src/helpers/teams.js
index 2ff67079ca..b89d2a1283 100644
--- a/awx/ui/client/src/helpers/teams.js
+++ b/awx/ui/client/src/helpers/teams.js
@@ -22,8 +22,7 @@ export default
return function (params) {
var scope = params.scope,
- set = params.set,
- iterator = params.iterator;
+ set = params.set;
// Listeners to perform lookups after main inventory list loads
@@ -74,66 +73,4 @@ export default
});
};
}
- ])
-
- .factory('TeamLookUpOrganizationInit', ['Alert', 'Rest', 'OrganizationList', 'generateList',
- function (Alert, Rest, OrganizationList, GenerateList) {
- return function (params) {
-
- var scope = params.scope;
-
- // Show pop-up to select organization
- scope.lookUpOrganization = function () {
- var list = OrganizationList,
- listGenerator = GenerateList,
- listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select Organization' }),
- defaultUrl = '/api/v1/organizations/';
-
- listScope.selectAction = function () {
- var i, found = false;
- for (i = 0; i < listScope[list.name].length; i++) {
- if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] === "success") {
- found = true;
- scope.organization = listScope[list.name][i].id;
- scope.organization_name = listScope[list.name][i].name;
- scope.team_form.$setDirty();
- listGenerator.hide();
- }
- }
- if (found === false) {
- Alert('No Selection', 'Click on a row to select an Organization before clicking the Select button.');
- }
- };
-
- listScope.toggle_organization = function (id) {
- // when user clicks a row, remove 'success' class from all rows except clicked-on row
- if (listScope[list.name]) {
- for (var i = 0; i < listScope[list.name].length; i++) {
- listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] = "";
- }
- }
- if (id !== null && id !== undefined) {
- listScope[list.iterator + "_" + id + "_class"] = "success";
- }
- };
-
- // @issue: OLD SEARCH
- // SearchInit({
- // scope: listScope,
- // set: list.name,
- // list: list,
- // url: defaultUrl
- // });
- // PaginateInit({
- // scope: listScope,
- // list: list,
- // url: defaultUrl,
- // mode: 'lookup'
- // });
- // scope.search(list.iterator);
-
- listScope.toggle_organization(scope.organization);
- };
- };
- }
]);
diff --git a/awx/ui/client/src/i18n.js b/awx/ui/client/src/i18n.js
index c5e5b782de..0b64a40222 100644
--- a/awx/ui/client/src/i18n.js
+++ b/awx/ui/client/src/i18n.js
@@ -1,3 +1,5 @@
+/* jshint ignore:start */
+
function isString(arg) {
return typeof arg === 'string';
}
@@ -83,7 +85,7 @@ export default
gettextCatalog.setCurrentLanguage(langInfo);
// TODO: the line below is commented out temporarily until
// the .po files are received from the i18n team, in order to avoid
- // 404 file not found console errors in dev
+ // 404 file not found console errors in dev
// gettextCatalog.loadRemote('/static/languages/' + langUrl + '.json');
};
}])
diff --git a/awx/ui/client/src/inventories/edit/inventory-edit.controller.js b/awx/ui/client/src/inventories/edit/inventory-edit.controller.js
index 8d6b690a7d..697bfdd949 100644
--- a/awx/ui/client/src/inventories/edit/inventory-edit.controller.js
+++ b/awx/ui/client/src/inventories/edit/inventory-edit.controller.js
@@ -14,7 +14,7 @@ function InventoriesEdit($scope, $rootScope, $compile, $location,
$log, $stateParams, InventoryForm, Rest, Alert, ProcessErrors,
ClearScope, GetBasePath, ParseTypeChange, Wait, ToJSON,
ParseVariableString, Prompt, InitiatePlaybookRun,
- deleteJobTemplate, $state, $filter) {
+ JobTemplateService, $state, $filter) {
// Inject dynamic view
var defaultUrl = GetBasePath('inventory'),
@@ -141,25 +141,23 @@ function InventoriesEdit($scope, $rootScope, $compile, $location,
$location.path($location.path() + '/job_templates/' + this.scan_job_template.id);
};
- $scope.deleteScanJob = function() {
- var id = this.scan_job_template.id,
- action = function() {
- $('#prompt-modal').modal('hide');
- Wait('start');
- deleteJobTemplate(id)
- .success(function() {
- $('#prompt-modal').modal('hide');
- // @issue: OLD SEARCH
- // $scope.search(form.related.scan_job_templates.iterator);
- })
- .error(function(data) {
- Wait('stop');
- ProcessErrors($scope, data, status, null, {
- hdr: 'Error!',
- msg: 'DELETE returned status: ' + status
- });
- });
- };
+ $scope.deleteScanJob = function () {
+ var id = this.scan_job_template.id ,
+ action = function () {
+ $('#prompt-modal').modal('hide');
+ Wait('start');
+ JobTemplateService.deleteJobTemplate(id)
+ .success(function () {
+ $('#prompt-modal').modal('hide');
+ // @issue: OLD SEARCH
+ // $scope.search(form.related.scan_job_templates.iterator);
+ })
+ .error(function (data) {
+ Wait('stop');
+ ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+ msg: 'DELETE returned status: ' + status });
+ });
+ };
Prompt({
hdr: 'Delete',
@@ -176,5 +174,5 @@ export default ['$scope', '$rootScope', '$compile', '$location',
'$log', '$stateParams', 'InventoryForm', 'Rest', 'Alert',
'ProcessErrors', 'ClearScope', 'GetBasePath', 'ParseTypeChange', 'Wait',
'ToJSON', 'ParseVariableString', 'Prompt', 'InitiatePlaybookRun',
- 'deleteJobTemplate', '$state', '$filter', InventoriesEdit,
+ 'JobTemplateService', '$state', '$filter', InventoriesEdit,
];
diff --git a/awx/ui/client/src/inventories/manage/groups/groups-add.controller.js b/awx/ui/client/src/inventories/manage/groups/groups-add.controller.js
index 97da922561..031cf03f8a 100644
--- a/awx/ui/client/src/inventories/manage/groups/groups-add.controller.js
+++ b/awx/ui/client/src/inventories/manage/groups/groups-add.controller.js
@@ -8,8 +8,8 @@ export default ['$state', '$stateParams', '$scope', 'GroupForm', 'CredentialList
'GroupManageService', 'GetChoices', 'GetBasePath', 'CreateSelect2', 'GetSourceTypeOptions', 'rbacUiControlService', 'ToJSON',
function($state, $stateParams, $scope, GroupForm, CredentialList, ParseTypeChange, GenerateForm, inventoryData,
GroupManageService, GetChoices, GetBasePath, CreateSelect2, GetSourceTypeOptions, rbacUiControlService, ToJSON) {
- var generator = GenerateForm,
- form = GroupForm();
+
+ let form = GroupForm();
init();
function init() {
diff --git a/awx/ui/client/src/inventories/manage/groups/groups-list.controller.js b/awx/ui/client/src/inventories/manage/groups/groups-list.controller.js
index 1c9559e76e..7385e2f09b 100644
--- a/awx/ui/client/src/inventories/manage/groups/groups-list.controller.js
+++ b/awx/ui/client/src/inventories/manage/groups/groups-list.controller.js
@@ -6,10 +6,10 @@
export default
['$scope', '$rootScope', '$state', '$stateParams', 'InventoryGroups', 'generateList', 'InventoryUpdate',
'GroupManageService', 'GroupsCancelUpdate', 'ViewUpdateStatus', 'rbacUiControlService', 'GetBasePath',
- 'InventoryManageService', 'groupsUrl', 'GetSyncStatusMsg', 'GetHostsStatusMsg', 'groupsDataset',
+ 'InventoryManageService', 'groupsUrl', 'GetSyncStatusMsg', 'GetHostsStatusMsg', 'groupsDataset', 'Find',
function($scope, $rootScope, $state, $stateParams, InventoryGroups, generateList, InventoryUpdate,
GroupManageService, GroupsCancelUpdate, ViewUpdateStatus, rbacUiControlService, GetBasePath,
- InventoryManageService, groupsUrl, GetSyncStatusMsg, GetHostsStatusMsg, groupsDataset){
+ InventoryManageService, groupsUrl, GetSyncStatusMsg, GetHostsStatusMsg, groupsDataset, Find){
let list = InventoryGroups;
diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js
index edeeab1034..067c26aa1f 100644
--- a/awx/ui/client/src/job-detail/job-detail.controller.js
+++ b/awx/ui/client/src/job-detail/job-detail.controller.js
@@ -525,7 +525,7 @@ export default
scope.job_template_name = data.name;
scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
- scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
+ scope.job_template_url = '/#/templates/' + data.unified_job_template;
scope.inventory_url = (scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
scope.project_url = (scope.project_name && data.project) ? '/#/projects/' + data.project : '';
scope.credential_url = (data.credential) ? '/#/credentials/' + data.credential : '';
diff --git a/awx/ui/client/src/job-submission/job-submission-factories/initiateplaybookrun.factory.js b/awx/ui/client/src/job-submission/job-submission-factories/initiateplaybookrun.factory.js
index ed16e745e5..eaea7f4d8b 100644
--- a/awx/ui/client/src/job-submission/job-submission-factories/initiateplaybookrun.factory.js
+++ b/awx/ui/client/src/job-submission/job-submission-factories/initiateplaybookrun.factory.js
@@ -10,10 +10,10 @@ export default
var scope = params.scope.$new(),
id = params.id,
relaunch = params.relaunch || false,
- system_job = params.system_job || false;
+ job_type = params.job_type;
scope.job_template_id = id;
- var el = $compile( "Are you sure you want to delete the ' + (template.type === "Workflow Job Template" ? 'workflow ' : '') + 'job template below?
' + $filter('sanitize')(template.name) + '
',
+ action: function() {
+
+ function handleSuccessfulDelete() {
+ // TODO: look at this
+ if (parseInt($state.params.id) === template.id) {
+ $state.go("^", null, {reload: true});
+ } else {
+ $state.go(".", null, {reload: true});
+ }
+ Wait('stop');
+ }
+
+ $('#prompt-modal').modal('hide');
+ Wait('start');
+ if(template.type && (template.type === 'Workflow Job Template' || template.type === 'workflow_job_template')) {
+ JobTemplateService.deleteWorkflowJobTemplate(template.id)
+ .then(function () {
+ handleSuccessfulDelete();
+ }, function (data) {
+ Wait('stop');
+ ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+ msg: 'Call to delete workflow job template failed. DELETE returned status: ' + status });
+ });
+ }
+ else if(template.type && (template.type === 'Job Template' || template.type === 'job_template')) {
+ JobTemplateService.deleteJobTemplate(template.id)
+ .then(function () {
+ handleSuccessfulDelete();
+ }, function (data) {
+ Wait('stop');
+ ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+ msg: 'Call to delete job template failed. DELETE returned status: ' + status });
+ });
+ }
+ else {
+ Wait('stop');
+ Alert('Error: Unable to determine template type', 'We were unable to determine this template\'s type while deleting.');
+ }
+ },
+ actionText: 'DELETE'
});
- };
-
- Prompt({
- hdr: 'Delete',
- body: 'Are you sure you want to delete the job template below?
' + $filter('sanitize')(name) + '
',
- action: action,
- actionText: 'DELETE'
- });
+ }
+ else {
+ Alert('Error: Unable to delete template', 'Template parameter is missing');
+ }
};
- $scope.submitJob = function(id) {
- InitiatePlaybookRun({ scope: $scope, id: id });
+ $scope.submitJob = function(template) {
+ if(template) {
+ if(template.type && (template.type === 'Job Template' || template.type === 'job_template')) {
+ InitiatePlaybookRun({ scope: $scope, id: template.id, job_type: 'job_template' });
+ }
+ else if(template.type && (template.type === 'Workflow Job Template' || template.type === 'workflow_job_template')) {
+ InitiatePlaybookRun({ scope: $scope, id: template.id, job_type: 'workflow_job_template' });
+ }
+ else {
+ // Something went wrong - Let the user know that we're unable to launch because we don't know
+ // what type of job template this is
+ Alert('Error: Unable to determine template type', 'We were unable to determine this template\'s type while launching.');
+ }
+ }
+ else {
+ Alert('Error: Unable to launch template', 'Template parameter is missing');
+ }
};
- $scope.scheduleJob = function(id) {
- $state.go('jobTemplateSchedules', { id: id });
+ $scope.scheduleJob = function(template) {
+ if(template) {
+ if(template.type && (template.type === 'Job Template' || template.type === 'job_template')) {
+ $state.go('jobTemplateSchedules', {id: template.id});
+ }
+ else if(template.type && (template.type === 'Workflow Job Template' || template.type === 'workflow_job_template')) {
+ $state.go('workflowJobTemplateSchedules', {id: template.id});
+ }
+ else {
+ // Something went wrong - Let the user know that we're unable to redirect to schedule because we don't know
+ // what type of job template this is
+ Alert('Error: Unable to determine template type', 'We were unable to determine this template\'s type while routing to schedule.');
+ }
+ }
+ else {
+ Alert('Error: Unable to schedule job', 'Template parameter is missing');
+ }
};
}
];
diff --git a/awx/ui/client/src/job-templates/list/job-templates-list.route.js b/awx/ui/client/src/job-templates/list/job-templates-list.route.js
new file mode 100644
index 0000000000..3e64e8cd1a
--- /dev/null
+++ b/awx/ui/client/src/job-templates/list/job-templates-list.route.js
@@ -0,0 +1,49 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default {
+ name: 'templates',
+ route: '/templates',
+ ncyBreadcrumb: {
+ label: "TEMPLATES"
+ },
+ data: {
+ socket: {
+ "groups": {
+ "jobs": ["status_changed"]
+ }
+ }
+ },
+ params: {
+ template_search: {
+ value: {
+ type: 'workflow_job_template,job_template'
+ }
+ }
+ },
+ searchPrefix: 'template',
+ views: {
+ '@': {
+ controller: 'JobTemplatesListController',
+ templateProvider: function(JobTemplateList, generateList) {
+ let html = generateList.build({
+ list: JobTemplateList,
+ mode: 'edit'
+ });
+ html = generateList.wrapPanel(html);
+ return generateList.insertFormView() + html;
+ }
+ }
+ },
+ resolve: {
+ Dataset: ['JobTemplateList', 'QuerySet', '$stateParams', 'GetBasePath',
+ function(list, qs, $stateParams, GetBasePath) {
+ let path = GetBasePath(list.basePath) || GetBasePath(list.name);
+ return qs.search(path, $stateParams[`${list.iterator}_search`]);
+ }
+ ]
+ }
+};
diff --git a/awx/ui/client/src/job-templates/list/main.js b/awx/ui/client/src/job-templates/list/main.js
index e6da0727b5..95ef62cac5 100644
--- a/awx/ui/client/src/job-templates/list/main.js
+++ b/awx/ui/client/src/job-templates/list/main.js
@@ -8,4 +8,4 @@ import controller from './job-templates-list.controller';
export default
angular.module('jobTemplatesList', [])
- .controller('JobTemplatesList', controller);
+ .controller('JobTemplatesListController', controller);
diff --git a/awx/ui/client/src/job-templates/main.js b/awx/ui/client/src/job-templates/main.js
index 840894a4bc..c450115d50 100644
--- a/awx/ui/client/src/job-templates/main.js
+++ b/awx/ui/client/src/job-templates/main.js
@@ -4,47 +4,490 @@
* All Rights Reserved
*************************************************/
-import deleteJobTemplate from './delete-job-template.service';
+import jobTemplateService from './job-template.service';
import surveyMaker from './survey-maker/main';
import jobTemplatesList from './list/main';
-import jobTemplatesAdd from './add/main';
-import jobTemplatesEdit from './edit/main';
+import jobTemplatesAdd from './add-job-template/main';
+import jobTemplatesEdit from './edit-job-template/main';
import jobTemplatesCopy from './copy/main';
+import workflowAdd from './add-workflow/main';
+import workflowEdit from './edit-workflow/main';
import labels from './labels/main';
+import workflowChart from './workflow-chart/main';
+import workflowMaker from './workflow-maker/main';
+import jobTemplatesListRoute from './list/job-templates-list.route';
export default
angular.module('jobTemplates', [surveyMaker.name, jobTemplatesList.name, jobTemplatesAdd.name,
- jobTemplatesEdit.name, jobTemplatesCopy.name, labels.name
+ jobTemplatesEdit.name, jobTemplatesCopy.name, labels.name, workflowAdd.name, workflowEdit.name,
+ workflowChart.name, workflowMaker.name
])
- .service('deleteJobTemplate', deleteJobTemplate)
- .config(['$stateProvider', 'stateDefinitionsProvider',
- function($stateProvider, stateDefinitionsProvider) {
- let stateDefinitions = stateDefinitionsProvider.$get();
+ .service('JobTemplateService', jobTemplateService)
+ .config(['$stateProvider', 'stateDefinitionsProvider', '$stateExtenderProvider',
+ function($stateProvider, stateDefinitionsProvider, $stateExtenderProvider) {
+ let stateTree, addJobTemplate, editJobTemplate, addWorkflow, editWorkflow,
+ workflowMaker, inventoryLookup, credentialLookup,
+ stateDefinitions = stateDefinitionsProvider.$get(),
+ stateExtender = $stateExtenderProvider.$get();
- $stateProvider.state({
- name: 'jobTemplates',
- url: '/job_templates',
- lazyLoad: () => stateDefinitions.generateTree({
- parent: 'jobTemplates',
- modes: ['add', 'edit'],
- list: 'JobTemplateList',
+ function generateStateTree() {
+
+ addJobTemplate = stateDefinitions.generateTree({
+ name: 'templates.addJobTemplate',
+ url: '/add_job_template',
+ modes: ['add'],
form: 'JobTemplateForm',
controllers: {
- list: 'JobTemplatesList',
- add: 'JobTemplatesAdd',
- edit: 'JobTemplatesEdit'
- },
+ add: 'JobTemplateAdd'
+ }
+ });
+
+ editJobTemplate = stateDefinitions.generateTree({
+ name: 'templates.editJobTemplate',
+ url: '/job_template/:job_template_id',
+ modes: ['edit'],
+ form: 'JobTemplateForm',
+ controllers: {
+ edit: 'JobTemplateEdit'
+ }
+ });
+
+ addWorkflow = stateDefinitions.generateTree({
+ name: 'templates.addWorkflowJobTemplate',
+ url: '/add_workflow_job_template',
+ modes: ['add'],
+ form: 'WorkflowForm',
+ controllers: {
+ add: 'WorkflowAdd'
+ }
+ });
+
+ editWorkflow = stateDefinitions.generateTree({
+ name: 'templates.editWorkflowJobTemplate',
+ url: '/workflow_job_template/:workflow_job_template_id',
+ modes: ['edit'],
+ form: 'WorkflowForm',
+ controllers: {
+ edit: 'WorkflowEdit'
+ }
+ });
+
+ workflowMaker = {
+ name: 'templates.editWorkflowJobTemplate.workflowMaker',
+ url: '/workflow-maker',
+ // ncyBreadcrumb: {
+ // label: 'WORKFLOW MAKER'
+ // },
data: {
- activityStream: true,
- activityStreamTarget: 'job_template',
- socket: {
- "groups": {
- "jobs": ["status_changed"]
+ formChildState: true
+ },
+ params: {
+ job_template_search: {
+ value: {
+ page_size: '5',
+ type: 'job_template'
+ },
+ squash: true,
+ dynamic: true
+ },
+ project_search: {
+ value: {
+ page_size: '5'
+ },
+ squash: true,
+ dynamic: true
+ },
+ inventory_source_search: {
+ value: {
+ page_size: '5'
+ },
+ squash: true,
+ dynamic: true
+ }
+ },
+ views: {
+ 'modal': {
+ template: ` ${list_html} `;
+
}
}
},
- })
- });
+ resolve: {
+ ListDefinition: ['InventoryList', function(list) {
+ // mutate the provided list definition here
+ return list;
+ }],
+ Dataset: ['ListDefinition', 'QuerySet', '$stateParams', 'GetBasePath',
+ (list, qs, $stateParams, GetBasePath) => {
+ let path = GetBasePath(list.name) || GetBasePath(list.basePath);
+ return qs.search(path, $stateParams[`${list.iterator}_search`]);
+ }
+ ]
+ },
+ onExit: function($state) {
+ if ($state.transition) {
+ $('#form-modal').modal('hide');
+ $('.modal-backdrop').remove();
+ $('body').removeClass('modal-open');
+ }
+ },
+ };
+
+ credentialLookup = {
+ searchPrefix: 'credential',
+ name: 'templates.editWorkflowJobTemplate.workflowMaker.credential',
+ url: '/credential',
+ data: {
+ formChildState: true
+ },
+ params: {
+ credential_search: {
+ value: {
+ page_size: '5'
+ },
+ squash: true,
+ dynamic: true
+ }
+ },
+ views: {
+ 'related': {
+ templateProvider: function(ListDefinition, generateList) {
+ let list_html = generateList.build({
+ mode: 'lookup',
+ list: ListDefinition,
+ input_type: 'radio'
+ });
+ return `${list_html} `;
+
+ }
+ }
+ },
+ resolve: {
+ ListDefinition: ['CredentialList', function(list) {
+ // mutate the provided list definition here
+ return list;
+ }],
+ Dataset: ['ListDefinition', 'QuerySet', '$stateParams', 'GetBasePath',
+ (list, qs, $stateParams, GetBasePath) => {
+ let path = GetBasePath(list.name) || GetBasePath(list.basePath);
+ return qs.search(path, $stateParams[`${list.iterator}_search`]);
+ }
+ ]
+ },
+ onExit: function($state) {
+ if ($state.transition) {
+ $('#form-modal').modal('hide');
+ $('.modal-backdrop').remove();
+ $('body').removeClass('modal-open');
+ }
+ },
+ };
+
+
+ return Promise.all([
+ addJobTemplate,
+ editJobTemplate,
+ addWorkflow,
+ editWorkflow
+ ]).then((generated) => {
+ return {
+ states: _.reduce(generated, (result, definition) => {
+ return result.concat(definition.states);
+ }, [
+ stateExtender.buildDefinition(jobTemplatesListRoute),
+ stateExtender.buildDefinition(workflowMaker),
+ stateExtender.buildDefinition(inventoryLookup),
+ stateExtender.buildDefinition(credentialLookup)
+ ])
+ };
+ });
+ }
+
+ stateTree = {
+ name: 'templates',
+ url: '/templates',
+ lazyLoad: () => generateStateTree()
+ };
+
+ $stateProvider.state(stateTree);
+
}
]);
diff --git a/awx/ui/client/src/job-templates/workflow-chart/main.js b/awx/ui/client/src/job-templates/workflow-chart/main.js
new file mode 100644
index 0000000000..76f0484889
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-chart/main.js
@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import workflowChart from './workflow-chart.directive';
+
+export default
+ angular.module('jobTemplatesWorkflowChart', [])
+ .directive('workflowChart', workflowChart);
diff --git a/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.block.less b/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.block.less
new file mode 100644
index 0000000000..9afc170a01
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.block.less
@@ -0,0 +1,69 @@
+@import "./client/src/shared/branding/colors.default.less";
+
+.nodeConnector circle, .nodeConnector .linkCross, .node .addCircle, .node .removeCircle, .node .WorkflowChart-hoverPath {
+ opacity: 0;
+}
+
+.node .addCircle, .nodeConnector .addCircle {
+ fill: @default-succ;
+}
+
+.addCircle.addHovering {
+ fill: @default-succ-hov;
+}
+
+.node .removeCircle {
+ fill: @default-err;
+}
+
+.removeCircle.removeHovering {
+ fill: @default-err-hov;
+}
+
+.node .WorkflowChart-defaultText {
+ font-size: 12px;
+ font-family: 'Open Sans', sans-serif;
+ fill: @default-interface-txt;
+}
+
+.node .rect {
+ fill: @default-secondary-bg;
+}
+
+.rect.placeholder {
+ stroke-dasharray: 3;
+}
+
+.node .transparentRect {
+ fill: @default-bg;
+ opacity: 0;
+}
+
+.WorkflowChart-alwaysShowAdd circle,
+.WorkflowChart-alwaysShowAdd path,
+.WorkflowChart-alwaysShowAdd .linkCross,
+.hovering .addCircle,
+.hovering .removeCircle,
+.hovering .WorkflowChart-hoverPath,
+.hovering .linkCross {
+ opacity: 1;
+}
+
+.link {
+ fill: none;
+ stroke-width: 2px;
+}
+
+.link.placeholder {
+ stroke-dasharray: 3;
+}
+
+.WorkflowChart-svg {
+ background-color: @default-no-items-bord;
+}
+.WorkflowChart-nodeTypeCircle {
+ fill: @default-icon;
+}
+.WorkflowChart-nodeTypeLetter {
+ fill: @default-bg;
+}
diff --git a/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.directive.js b/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.directive.js
new file mode 100644
index 0000000000..f989bbc2a0
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-chart/workflow-chart.directive.js
@@ -0,0 +1,467 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default [
+ function() {
+
+ return {
+ scope: {
+ treeData: '=',
+ canAddWorkflowJobTemplate: '=',
+ addNode: '&',
+ editNode: '&',
+ deleteNode: '&'
+ },
+ restrict: 'E',
+ link: function(scope, element) {
+
+ scope.$watch('canAddWorkflowJobTemplate', function() {
+ // Redraw the graph if permissions change
+ update();
+ });
+
+ let margin = {top: 20, right: 20, bottom: 20, left: 20},
+ width = 950,
+ height = 590 - margin.top - margin.bottom,
+ i = 0,
+ rectW = 120,
+ rectH = 60,
+ rootW = 60,
+ rootH = 40;
+
+ let tree = d3.layout.tree()
+ .size([height, width]);
+
+ let line = d3.svg.line()
+ .x(function(d){return d.x;})
+ .y(function(d){return d.y;});
+
+ function lineData(d){
+
+ let sourceX = d.source.isStartNode ? d.source.y + rootW : d.source.y + rectW;
+ let sourceY = d.source.isStartNode ? d.source.x + 10 + rootH / 2 : d.source.x + rectH / 2;
+ let targetX = d.target.y;
+ let targetY = d.target.x + rectH / 2;
+
+ let points = [
+ {
+ x: sourceX,
+ y: sourceY
+ },
+ {
+ x: targetX,
+ y: targetY
+ }
+ ];
+
+ return line(points);
+ }
+
+ // TODO: this function is hacky and we need to come up with a better solution
+ // see: http://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg#answer-27723752
+ function wrap(text) {
+ if(text && text.length > 15) {
+ return text.substring(0,15) + '...';
+ }
+ else {
+ return text;
+ }
+ }
+
+ let svg = d3.select(element[0]).append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .attr("class", "WorkflowChart-svg")
+ .append("g")
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+ let node = svg.selectAll(".node"),
+ link = svg.selectAll(".link");
+
+ function update() {
+ // Declare the nodes
+ let nodes = tree.nodes(scope.treeData);
+ node = node.data(nodes, function(d) { d.y = d.depth * 180; return d.id || (d.id = ++i); });
+ link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; });
+
+ let nodeEnter = node.enter().append("g")
+ .attr("class", "node")
+ .attr("id", function(d){return "node-" + d.id;})
+ .attr("parent", function(d){return d.parent ? d.parent.id : null;})
+ .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
+ .attr("fill", "red");
+
+ nodeEnter.each(function(d) {
+ let thisNode = d3.select(this);
+ if(d.isStartNode) {
+ thisNode.append("rect")
+ .attr("width", 60)
+ .attr("height", 40)
+ .attr("y", 10)
+ .attr("rx", 5)
+ .attr("ry", 5)
+ .attr("fill", "#5cb85c")
+ .attr("class", "WorkflowChart-rootNode")
+ .call(add_node);
+ thisNode.append("path")
+ .style("fill", "white")
+ .attr("transform", function() { return "translate(" + 30 + "," + 30 + ")"; })
+ .attr("d", d3.svg.symbol()
+ .size(120)
+ .type("cross")
+ )
+ .call(add_node);
+ thisNode.append("text")
+ .attr("x", 14)
+ .attr("y", 0)
+ .attr("dy", ".35em")
+ .attr("class", "WorkflowChart-defaultText")
+ .text(function () { return "START"; });
+ }
+ else {
+ thisNode.append("rect")
+ .attr("width", rectW)
+ .attr("height", rectH)
+ .attr("rx", 5)
+ .attr("ry", 5)
+ .attr('stroke', function(d) { return d.isActiveEdit ? "#337ab7" : "#D7D7D7"; })
+ .attr('stroke-width', function(d){ return d.isActiveEdit ? "2px" : "1px"; })
+ .attr("class", function(d) {
+ return d.placeholder ? "rect placeholder" : "rect";
+ });
+ thisNode.append("text")
+ .attr("x", rectW / 2)
+ .attr("y", rectH / 2)
+ .attr("dy", ".35em")
+ .attr("text-anchor", "middle")
+ .attr("class", "WorkflowChart-defaultText WorkflowChart-nameText")
+ .text(function (d) {
+ return (d.unifiedJobTemplate && d.unifiedJobTemplate.name) ? d.unifiedJobTemplate.name : "";
+ }).each(wrap);
+
+ thisNode.append("circle")
+ .attr("cy", rectH)
+ .attr("r", 10)
+ .attr("class", "WorkflowChart-nodeTypeCircle")
+ .style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? null : "none"; });
+
+ thisNode.append("text")
+ .attr("y", rectH)
+ .attr("dy", ".35em")
+ .attr("text-anchor", "middle")
+ .attr("class", "WorkflowChart-nodeTypeLetter")
+ .text(function (d) {
+ return (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update")) ? "P" : (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? "I" : "");
+ })
+ .style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? null : "none"; });
+
+ thisNode.append("rect")
+ .attr("width", rectW)
+ .attr("height", rectH)
+ .attr("class", "transparentRect")
+ .call(edit_node)
+ .on("mouseover", function(d) {
+ if(!d.isStartNode) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", true);
+ }
+ })
+ .on("mouseout", function(d){
+ if(!d.isStartNode) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", false);
+ }
+ });
+ thisNode.append("circle")
+ .attr("id", function(d){return "node-" + d.id + "-add";})
+ .attr("cx", rectW)
+ .attr("r", 10)
+ .attr("class", "addCircle nodeCircle")
+ .style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; })
+ .call(add_node)
+ .on("mouseover", function(d) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", true);
+ d3.select("#node-" + d.id + "-add")
+ .classed("addHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#node-" + d.id)
+ .classed("hovering", false);
+ d3.select("#node-" + d.id + "-add")
+ .classed("addHovering", false);
+ });
+ thisNode.append("path")
+ .attr("class", "nodeAddCross WorkflowChart-hoverPath")
+ .style("fill", "white")
+ .attr("transform", function() { return "translate(" + rectW + "," + 0 + ")"; })
+ .attr("d", d3.svg.symbol()
+ .size(60)
+ .type("cross")
+ )
+ .style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; })
+ .call(add_node)
+ .on("mouseover", function(d) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", true);
+ d3.select("#node-" + d.id + "-add")
+ .classed("addHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#node-" + d.id)
+ .classed("hovering", false);
+ d3.select("#node-" + d.id + "-add")
+ .classed("addHovering", false);
+ });
+ thisNode.append("circle")
+ .attr("id", function(d){return "node-" + d.id + "-remove";})
+ .attr("cx", rectW)
+ .attr("cy", rectH)
+ .attr("r", 10)
+ .attr("class", "removeCircle")
+ .style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; })
+ .call(remove_node)
+ .on("mouseover", function(d) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", true);
+ d3.select("#node-" + d.id + "-remove")
+ .classed("removeHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#node-" + d.id)
+ .classed("hovering", false);
+ d3.select("#node-" + d.id + "-remove")
+ .classed("removeHovering", false);
+ });
+ thisNode.append("path")
+ .attr("class", "nodeRemoveCross WorkflowChart-hoverPath")
+ .style("fill", "white")
+ .attr("transform", function() { return "translate(" + rectW + "," + rectH + ") rotate(-45)"; })
+ .attr("d", d3.svg.symbol()
+ .size(60)
+ .type("cross")
+ )
+ .style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; })
+ .call(remove_node)
+ .on("mouseover", function(d) {
+ d3.select("#node-" + d.id)
+ .classed("hovering", true);
+ d3.select("#node-" + d.id + "-remove")
+ .classed("removeHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#node-" + d.id)
+ .classed("hovering", false);
+ d3.select("#node-" + d.id + "-remove")
+ .classed("removeHovering", false);
+ });
+ }
+ });
+
+ node.exit().remove();
+
+ let linkEnter = link.enter().append("g")
+ .attr("class", "nodeConnector")
+ .attr("id", function(d){return "link-" + d.source.id + "-" + d.target.id;});
+
+ // Add entering links in the parent’s old position.
+ linkEnter.insert("path", ".node")
+ .attr("class", function(d) {
+ return (d.source.placeholder || d.target.placeholder) ? "link placeholder" : "link";
+ })
+ .attr("d", lineData)
+ .attr('stroke', function(d) {
+ if(d.target.edgeType) {
+ if(d.target.edgeType === "failure") {
+ return "#d9534f";
+ }
+ else if(d.target.edgeType === "success") {
+ return "#5cb85c";
+ }
+ else if(d.target.edgeType === "always"){
+ return "#337ab7";
+ }
+ }
+ else {
+ return "#D7D7D7";
+ }
+ });
+
+ linkEnter.append("circle")
+ .attr("id", function(d){return "link-" + d.source.id + "-" + d.target.id + "-add";})
+ .attr("cx", function(d) {
+ return (d.target.y + d.source.y + rectW) / 2;
+ })
+ .attr("cy", function(d) {
+ return (d.target.x + d.source.x + rectH) / 2;
+ })
+ .attr("r", 10)
+ .attr("class", "addCircle linkCircle")
+ .style("display", function(d) { return (d.source.placeholder || d.target.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; })
+ .call(add_node_between)
+ .on("mouseover", function(d) {
+ d3.select("#link-" + d.source.id + "-" + d.target.id)
+ .classed("hovering", true);
+ d3.select("#link-" + d.source.id + "-" + d.target.id + "-add")
+ .classed("addHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#link-" + d.source.id + "-" + d.target.id)
+ .classed("hovering", false);
+ d3.select("#link-" + d.source.id + "-" + d.target.id + "-add")
+ .classed("addHovering", false);
+ });
+
+ linkEnter.append("path")
+ .attr("class", "linkCross")
+ .style("fill", "white")
+ .attr("transform", function(d) { return "translate(" + (d.target.y + d.source.y + rectW) / 2 + "," + (d.target.x + d.source.x + rectH) / 2 + ")"; })
+ .attr("d", d3.svg.symbol()
+ .size(60)
+ .type("cross")
+ )
+ .style("display", function(d) { return (d.source.placeholder || d.target.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; })
+ .call(add_node_between)
+ .on("mouseover", function(d) {
+ d3.select("#link-" + d.source.id + "-" + d.target.id)
+ .classed("hovering", true);
+ d3.select("#link-" + d.source.id + "-" + d.target.id + "-add")
+ .classed("addHovering", true);
+ })
+ .on("mouseout", function(d){
+ d3.select("#link-" + d.source.id + "-" + d.target.id)
+ .classed("hovering", false);
+ d3.select("#link-" + d.source.id + "-" + d.target.id + "-add")
+ .classed("addHovering", false);
+ });
+
+ link.exit().remove();
+
+ // Transition nodes and links to their new positions.
+ let t = svg.transition();
+
+ t.selectAll(".nodeCircle")
+ .style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; });
+
+ t.selectAll(".nodeAddCross")
+ .style("display", function(d) { return d.placeholder || scope.canAddWorkflowJobTemplate === false ? "none" : null; });
+
+ t.selectAll(".removeCircle")
+ .style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; });
+
+ t.selectAll(".nodeRemoveCross")
+ .style("display", function(d) { return (d.canDelete === false || d.placeholder || scope.canAddWorkflowJobTemplate === false) ? "none" : null; });
+
+ t.selectAll(".link")
+ .attr("class", function(d) {
+ return (d.source.placeholder || d.target.placeholder) ? "link placeholder" : "link";
+ })
+ .attr("d", lineData)
+ .attr('stroke', function(d) {
+ if(d.target.edgeType) {
+ if(d.target.edgeType === "failure") {
+ return "#d9534f";
+ }
+ else if(d.target.edgeType === "success") {
+ return "#5cb85c";
+ }
+ else if(d.target.edgeType === "always"){
+ return "#337ab7";
+ }
+ }
+ else {
+ return "#D7D7D7";
+ }
+ });
+
+ t.selectAll(".linkCircle")
+ .style("display", function(d) { return (d.source.placeholder || d.target.placeholder) ? "none" : null; })
+ .attr("cx", function(d) {
+ return (d.target.y + d.source.y + rectW) / 2;
+ })
+ .attr("cy", function(d) {
+ return (d.target.x + d.source.x + rectH) / 2;
+ });
+
+ t.selectAll(".linkCross")
+ .style("display", function(d) { return (d.source.placeholder || d.target.placeholder) ? "none" : null; })
+ .attr("transform", function(d) { return "translate(" + (d.target.y + d.source.y + rectW) / 2 + "," + (d.target.x + d.source.x + rectH) / 2 + ")"; });
+
+ t.selectAll(".rect")
+ .attr('stroke', function(d) { return d.isActiveEdit ? "#337ab7" : "#D7D7D7"; })
+ .attr('stroke-width', function(d){ return d.isActiveEdit ? "2px" : "1px"; })
+ .attr("class", function(d) {
+ return d.placeholder ? "rect placeholder" : "rect";
+ });
+
+ t.selectAll(".WorkflowChart-nameText")
+ .text(function (d) {
+ return (d.unifiedJobTemplate && d.unifiedJobTemplate.name) ? wrap(d.unifiedJobTemplate.name) : "";
+ });
+
+ t.selectAll(".node")
+ .attr("transform", function(d) {d.px = d.x; d.py = d.y; return "translate(" + d.y + "," + d.x + ")"; });
+
+ t.selectAll(".WorkflowChart-nodeTypeCircle")
+ .style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update" ) ? null : "none"; });
+
+ t.selectAll(".WorkflowChart-nodeTypeLetter")
+ .text(function (d) {
+ return (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update")) ? "P" : (d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? "I" : "");
+ })
+ .style("display", function(d) { return d.unifiedJobTemplate && (d.unifiedJobTemplate.type === "project" || d.unifiedJobTemplate.unified_job_type === "project_update" || d.unifiedJobTemplate.type === "inventory_source" || d.unifiedJobTemplate.unified_job_type === "inventory_update") ? null : "none"; });
+
+ }
+
+ function add_node() {
+ this.on("click", function(d) {
+ if(scope.canAddWorkflowJobTemplate !== false) {
+ scope.addNode({
+ parent: d,
+ betweenTwoNodes: false
+ });
+ }
+ });
+ }
+
+ function add_node_between() {
+ this.on("click", function(d) {
+ if(scope.canAddWorkflowJobTemplate !== false) {
+ scope.addNode({
+ parent: d,
+ betweenTwoNodes: true
+ });
+ }
+ });
+ }
+
+ function remove_node() {
+ this.on("click", function(d) {
+ if(scope.canAddWorkflowJobTemplate !== false) {
+ scope.deleteNode({
+ nodeToDelete: d
+ });
+ }
+ });
+ }
+
+ function edit_node() {
+ this.on("click", function(d) {
+ if(d.canEdit){
+ scope.editNode({
+ nodeToEdit: d
+ });
+ }
+ });
+ }
+
+ scope.$on('refreshWorkflowChart', function(){
+ update();
+ });
+
+ }
+ };
+}];
diff --git a/awx/ui/client/src/job-templates/workflow-maker/main.js b/awx/ui/client/src/job-templates/workflow-maker/main.js
new file mode 100644
index 0000000000..8266617679
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/main.js
@@ -0,0 +1,11 @@
+import helper from './workflow-help.service';
+import workflowMaker from './workflow-maker.directive';
+import WorkflowMakerController from './workflow-maker.controller';
+
+export default
+ angular.module('jobTemplates.workflowMaker', [])
+ .service('WorkflowHelpService', helper)
+ // In order to test this controller I had to expose it at the module level
+ // like so. Is this correct? Is there a better pattern for doing this?
+ .controller('WorkflowMakerController', WorkflowMakerController)
+ .directive('workflowMaker', workflowMaker);
diff --git a/awx/ui/client/src/job-templates/workflow-maker/workflow-help.service.js b/awx/ui/client/src/job-templates/workflow-maker/workflow-help.service.js
new file mode 100644
index 0000000000..25b889e4fd
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/workflow-help.service.js
@@ -0,0 +1,127 @@
+export default ['CreateDialog', 'Wait', '$q', '$state', function(CreateDialog, Wait, $q, $state){
+ return {
+ closeDialog: function() {
+ $('#workflow-modal-dialog').dialog('destroy');
+
+ $state.go('^');
+ },
+ searchTree: function(params) {
+ // params.element
+ // params.matchingId
+
+ if(params.element.id === params.matchingId){
+ return params.element;
+ }else if (params.element.children && params.element.children.length > 0){
+ let result = null;
+ const thisService = this;
+ _.forEach(params.element.children, function(child) {
+ result = thisService.searchTree({
+ element: child,
+ matchingId: params.matchingId
+ });
+ if(result) {
+ return false;
+ }
+ });
+ return result;
+ }
+ return null;
+ },
+ removeNodeFromTree: function(params) {
+ // params.tree
+ // params.nodeToBeDeleted
+
+ let parentNode = this.searchTree({
+ element: params.tree,
+ matchingId: params.nodeToBeDeleted.parent.id
+ });
+ let nodeToBeDeleted = this.searchTree({
+ element: parentNode,
+ matchingId: params.nodeToBeDeleted.id
+ });
+
+ if(nodeToBeDeleted.children) {
+ _.forEach(nodeToBeDeleted.children, function(child) {
+ if(nodeToBeDeleted.isRoot) {
+ child.isRoot = true;
+ child.edgeType = "always";
+ }
+
+ parentNode.children.push(child);
+ });
+ }
+
+ _.forEach(parentNode.children, function(child, index) {
+ if(child.id === params.nodeToBeDeleted.id) {
+ parentNode.children.splice(index, 1);
+ return false;
+ }
+ });
+ },
+ addPlaceholderNode: function(params) {
+ // params.parent
+ // params.betweenTwoNodes
+ // params.tree
+ // params.id
+
+ let placeholder = {
+ children: [],
+ c: "#D7D7D7",
+ id: params.id,
+ canDelete: true,
+ canEdit: false,
+ canAddTo: true,
+ placeholder: true,
+ isNew: true,
+ edited: false
+ };
+
+ let parentNode = (params.betweenTwoNodes) ? this.searchTree({element: params.tree, matchingId: params.parent.source.id}) : this.searchTree({element: params.tree, matchingId: params.parent.id});
+ let placeholderRef;
+
+ if(params.betweenTwoNodes) {
+ _.forEach(parentNode.children, function(child, index) {
+ if(child.id === params.parent.target.id) {
+ placeholder.children.push(angular.copy(child));
+ parentNode.children[index] = placeholder;
+ placeholderRef = parentNode.children[index];
+ return false;
+ }
+ });
+ }
+ else {
+ if(parentNode.children) {
+ parentNode.children.push(placeholder);
+ placeholderRef = parentNode.children[parentNode.children.length - 1];
+ } else {
+ parentNode.children = [placeholder];
+ placeholderRef = parentNode.children[0];
+ }
+ }
+
+ return placeholderRef;
+ },
+ getSiblingConnectionTypes: function(params) {
+ // params.parentId
+ // params.tree
+
+ let siblingConnectionTypes = {};
+
+ let parentNode = this.searchTree({
+ element: params.tree,
+ matchingId: params.parentId
+ });
+
+ if(parentNode.children && parentNode.children.length > 0) {
+ // Loop across them and add the types as keys to siblingConnectionTypes
+ _.forEach(parentNode.children, function(child) {
+ if(!child.placeholder && child.edgeType) {
+ siblingConnectionTypes[child.edgeType] = true;
+ }
+ });
+ }
+
+ return Object.keys(siblingConnectionTypes);
+ }
+ };
+}];
diff --git a/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.block.less
new file mode 100644
index 0000000000..0dd966a5c2
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.block.less
@@ -0,0 +1,194 @@
+@import "./client/src/shared/branding/colors.default.less";
+
+.WorkflowMaker-header {
+ display: flex;
+ height: 34px;
+}
+.WorkflowMaker-title {
+ align-items: center;
+ flex: 1 0 auto;
+ display: flex;
+ height: 34px;
+}
+.WorkflowMaker-titleText {
+ color: @list-title-txt;
+ font-size: 14px;
+ font-weight: bold;
+ margin-right: 10px;
+ text-transform: uppercase;
+}
+.WorkflowMaker-exitHolder {
+ justify-content: flex-end;
+ display: flex;
+}
+.WorkflowMaker-exit{
+ cursor:pointer;
+ padding:0px;
+ border: none;
+ height:20px;
+ font-size: 20px;
+ background-color:@default-bg;
+ color:@d7grey;
+ transition: color 0.2s;
+ line-height:1;
+}
+.WorkflowMaker-exit:hover{
+ color:@default-icon;
+}
+.WorkflowMaker-contentHolder {
+ display: flex;
+ border: 1px solid #EBEBEB;
+ height: ~"calc(100% - 85px)";
+}
+.WorkflowMaker-contentLeft {
+ flex: 1 0 auto;
+ flex-direction: column;
+ height: 100%;
+}
+.WorkflowMaker-contentRight {
+ flex: 0 0 400px;
+ border-left: 1px solid #EBEBEB;
+ padding: 20px;
+ height: 100%;
+ overflow-y: scroll;
+}
+.WorkflowMaker-buttonHolder {
+ height: 30px;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+}
+.WorkflowMaker-saveButton{
+ background-color: @submit-button-bg;
+ color: @submit-button-text;
+ text-transform: uppercase;
+ transition: background-color 0.2s;
+ padding-left:15px;
+ padding-right: 15px;
+ margin-left: 20px;
+}
+
+.WorkflowMaker-saveButton:disabled{
+ background-color: @submit-button-bg-dis;
+}
+
+.WorkflowMaker-saveButton:hover{
+ background-color: @submit-button-bg-hov;
+ color: @submit-button-text;
+}
+
+.WorkflowMaker-cancelButton{
+ background-color: @default-bg;
+ color: @btn-txt;
+ text-transform: uppercase;
+ border-radius: 5px;
+ border: 1px solid @btn-bord;
+ transition: background-color 0.2s;
+ padding-left:15px;
+ padding-right: 15px;
+}
+
+.WorkflowMaker-cancelButton:hover{
+ background-color: @btn-bg-hov;
+ color: @btn-txt;
+}
+
+.WorkflowMaker-deleteOverlay {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: rgba(0,0,0,0.3);
+ z-index: 3;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+}
+.WorkflowMaker-deleteModal {
+ height: 200px;
+ width: 600px;
+ background-color: @default-bg;
+ border-radius: 5px;
+}
+.WorkflowMaker-formTitle {
+ color: @list-title-txt;
+ font-size: 14px;
+ font-weight: bold;
+ text-transform: uppercase;
+ margin-bottom: 20px;
+}
+.WorkflowMaker-formHelp {
+ color: #707070;
+}
+.WorkflowMaker-formLists {
+ margin-bottom: 20px;
+}
+.WorkflowMaker-formTitle {
+ display: flex;
+ color: #707070;
+ margin-right: 10px;
+}
+.WorkflowMaker-formLabel {
+ font-weight: normal;
+}
+.WorkflowMaker-formElement {
+ margin-bottom: 10px;
+}
+.WorkflowMaker-legend {
+ display: flex;
+ height: 40px;
+ line-height: 40px;
+ color: #707070;
+}
+.WorkflowMaker-chart {
+ display: flex;
+}
+.WorkflowMaker-legendLeft {
+ display: flex;
+ flex: 1 0 auto;
+ padding-left: 20px;
+}
+.WorkflowMaker-legendRight {
+ flex: 0 0 170px;
+ text-align: right;
+ padding-right: 20px;
+}
+.WorkflowMaker-legendItem {
+ display: flex;
+}
+.WorkflowMaker-legendItem:not(:last-child) {
+ padding-right: 20px;
+}
+.WorkflowMaker-onSuccessLegend {
+ height: 4px;
+ width: 20px;
+ background-color: @submit-button-bg;
+ margin: 18px 5px 18px 0px;
+}
+.WorkflowMaker-onFailLegend {
+ height: 4px;
+ width: 20px;
+ background-color: #d9534f;
+ margin: 18px 5px 18px 0px;
+}
+.WorkflowMaker-alwaysLegend {
+ height: 4px;
+ width: 20px;
+ background-color: #337ab7;
+ margin: 18px 5px 18px 0px;
+}
+.WorkflowMaker-letterCircle{
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ background: #848992;
+ color: #FFF;
+ text-align: center;
+ margin: 10px 5px 10px 0px;
+ line-height: 20px;
+}
+.WorkflowMaker-totalJobs {
+ margin-right: 10px;
+}
diff --git a/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.controller.js b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.controller.js
new file mode 100644
index 0000000000..01cc4441c2
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.controller.js
@@ -0,0 +1,520 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default ['$scope', 'WorkflowHelpService', 'generateList', 'JobTemplateList', 'ProjectList',
+ 'GetBasePath', 'Wait', 'JobTemplateService', '$state',
+ 'ProcessErrors', 'InventorySourcesList', 'CreateSelect2', 'WorkflowMakerForm',
+ 'GenerateForm', 'InventoryList', 'CredentialList', '$q',
+ function($scope, WorkflowHelpService, GenerateList, JobTemplateList, ProjectList,
+ GetBasePath, Wait, JobTemplateService, $state,
+ ProcessErrors, InventorySourcesList, CreateSelect2, WorkflowMakerForm,
+ GenerateForm, InventoryList, CredentialList, $q) {
+
+ let form = WorkflowMakerForm();
+
+ $scope.workflowMakerFormConfig = {
+ nodeMode: "idle",
+ activeTab: "jobs",
+ formIsValid: false
+ };
+
+ $scope.job_type_options = [{
+ label: "Run",
+ value: "run"
+ }, {
+ label: "Check",
+ value: "check"
+ }];
+
+ function init() {
+ $scope.treeDataMaster = angular.copy($scope.treeData.data);
+ $scope.$broadcast("refreshWorkflowChart");
+ }
+
+ function resetNodeForm() {
+ $scope.workflowMakerFormConfig.nodeMode = "idle";
+ $scope.showTypeOptions = false;
+ delete $scope.selectedTemplate;
+ delete $scope.workflow_job_templates;
+ delete $scope.workflow_projects;
+ delete $scope.workflow_inventory_sources;
+ delete $scope.placeholderNode;
+ delete $scope.betweenTwoNodes;
+ $scope.nodeBeingEdited = null;
+ $scope.edgeTypeRestriction = null;
+ $scope.workflowMakerFormConfig.activeTab = "jobs";
+ }
+
+ $scope.lookUpInventory = function(){
+ $state.go('.inventory');
+ };
+
+ $scope.lookUpCredential = function(){
+ $state.go('.credential');
+ };
+
+ $scope.closeWorkflowMaker = function() {
+ // Revert the data to the master which was created when the dialog was opened
+ $scope.treeData.data = angular.copy($scope.treeDataMaster);
+ WorkflowHelpService.closeDialog();
+ };
+
+ $scope.saveWorkflowMaker = function() {
+ WorkflowHelpService.closeDialog();
+ };
+
+ /* ADD NODE FUNCTIONS */
+
+ $scope.startAddNode = function(parent, betweenTwoNodes) {
+
+ if ($scope.placeholderNode || $scope.nodeBeingEdited) {
+ $scope.cancelNodeForm();
+ }
+
+ $scope.workflowMakerFormConfig.nodeMode = "add";
+ $scope.addParent = parent;
+ $scope.betweenTwoNodes = betweenTwoNodes;
+
+ $scope.placeholderNode = WorkflowHelpService.addPlaceholderNode({
+ parent: parent,
+ betweenTwoNodes: betweenTwoNodes,
+ tree: $scope.treeData.data,
+ id: $scope.treeData.nextIndex
+ });
+
+ $scope.treeData.nextIndex++;
+
+ let siblingConnectionTypes = WorkflowHelpService.getSiblingConnectionTypes({
+ tree: $scope.treeData.data,
+ parentId: betweenTwoNodes ? parent.source.id : parent.id
+ });
+
+ // Set the default to success
+ let edgeType = "success";
+
+ if (parent && ((betweenTwoNodes && parent.source.isStartNode) || (!betweenTwoNodes && parent.isStartNode))) {
+ // We don't want to give the user the option to select
+ // a type as this node will always be executed
+ edgeType = "always";
+ $scope.showTypeOptions = false;
+ } else {
+ if ((_.includes(siblingConnectionTypes, "success") || _.includes(siblingConnectionTypes, "failure")) && _.includes(siblingConnectionTypes, "always")) {
+ // This is a problem...
+ } else if (_.includes(siblingConnectionTypes, "success") || _.includes(siblingConnectionTypes, "failure")) {
+ $scope.edgeTypeRestriction = "successFailure";
+ edgeType = "success";
+ } else if (_.includes(siblingConnectionTypes, "always")) {
+ $scope.edgeTypeRestriction = "always";
+ edgeType = "always";
+ }
+
+ $scope.showTypeOptions = true;
+ }
+
+ $scope.$broadcast("setEdgeType", edgeType);
+ $scope.$broadcast("refreshWorkflowChart");
+
+ };
+
+ $scope.confirmNodeForm = function(formValues) {
+ if ($scope.workflowMakerFormConfig.nodeMode === "add") {
+ if ($scope.selectedTemplate && formValues.edgeType) {
+
+ $scope.placeholderNode.unifiedJobTemplate = $scope.selectedTemplate;
+ $scope.placeholderNode.edgeType = formValues.edgeType;
+ if ($scope.placeholderNode.unifiedJobTemplate.type === 'job_template') {
+ $scope.placeholderNode.promptValues = {
+ credential: {
+ id: formValues.credential,
+ name: formValues.credential_name
+ },
+ inventory: {
+ id: formValues.inventory,
+ name: formValues.inventory_name
+ },
+ limit: formValues.limit,
+ job_type: formValues.job_type && formValues.job_type.value ? formValues.job_type.value : null,
+ job_tags: formValues.job_tags,
+ skip_tags: formValues.skip_tags
+ };
+ }
+ $scope.placeholderNode.canEdit = true;
+
+ delete $scope.placeholderNode.placeholder;
+
+ resetNodeForm();
+
+ // Increment the total node counter
+ $scope.treeData.data.totalNodes++;
+
+ }
+ } else if ($scope.workflowMakerFormConfig.nodeMode === "edit") {
+ if ($scope.selectedTemplate && formValues.edgeType) {
+ $scope.nodeBeingEdited.unifiedJobTemplate = $scope.selectedTemplate;
+ $scope.nodeBeingEdited.edgeType = formValues.edgeType;
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.type === 'job_template') {
+ $scope.nodeBeingEdited.promptValues = {
+ credential: {
+ id: formValues.credential,
+ name: formValues.credential_name
+ },
+ inventory: {
+ id: formValues.inventory,
+ name: formValues.inventory_name
+ },
+ limit: formValues.limit,
+ job_type: formValues.job_type && formValues.job_type.value ? formValues.job_type.value : null,
+ job_tags: formValues.job_tags,
+ skip_tags: formValues.skip_tags
+ };
+ }
+
+ $scope.nodeBeingEdited.isActiveEdit = false;
+
+ $scope.nodeBeingEdited.edited = true;
+
+ resetNodeForm();
+ }
+ }
+
+ $scope.$broadcast("refreshWorkflowChart");
+ };
+
+ $scope.cancelNodeForm = function() {
+ if ($scope.workflowMakerFormConfig.nodeMode === "add") {
+ // Remove the placeholder node from the tree
+ WorkflowHelpService.removeNodeFromTree({
+ tree: $scope.treeData.data,
+ nodeToBeDeleted: $scope.placeholderNode
+ });
+ } else if ($scope.workflowMakerFormConfig.nodeMode === "edit") {
+ $scope.nodeBeingEdited.isActiveEdit = false;
+ }
+
+ // Reset the form
+ resetNodeForm();
+
+ $scope.$broadcast("refreshWorkflowChart");
+ };
+
+ /* EDIT NODE FUNCTIONS */
+
+ $scope.startEditNode = function(nodeToEdit) {
+
+ if (!$scope.nodeBeingEdited || ($scope.nodeBeingEdited && $scope.nodeBeingEdited.id !== nodeToEdit.id)) {
+ if ($scope.placeholderNode || $scope.nodeBeingEdited) {
+ $scope.cancelNodeForm();
+ }
+
+ $scope.workflowMakerFormConfig.nodeMode = "edit";
+
+ let parent = WorkflowHelpService.searchTree({
+ element: $scope.treeData.data,
+ matchingId: nodeToEdit.parent.id
+ });
+
+ $scope.nodeBeingEdited = WorkflowHelpService.searchTree({
+ element: parent,
+ matchingId: nodeToEdit.id
+ });
+
+ $scope.nodeBeingEdited.isActiveEdit = true;
+
+ let finishConfiguringEdit = function() {
+
+ let formValues = {};
+
+ // build any prompt values
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_credential_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && $scope.nodeBeingEdited.promptValues.credential) {
+ formValues.credential_name = $scope.nodeBeingEdited.promptValues.credential.name;
+ formValues.credential = $scope.nodeBeingEdited.promptValues.credential.id;
+ } else if ($scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.credential) {
+ formValues.credential_name = $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.credential.name ? $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.credential.name : null;
+ formValues.credential = $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.credential.id ? $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.credential.id : null;
+ } else {
+ formValues.credential_name = null;
+ formValues.credential = null;
+ }
+ }
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_inventory_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && $scope.nodeBeingEdited.promptValues.inventory) {
+ formValues.inventory_name = $scope.nodeBeingEdited.promptValues.inventory.name;
+ formValues.inventory = $scope.nodeBeingEdited.promptValues.inventory.id;
+ } else if ($scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.inventory) {
+ formValues.inventory_name = $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.inventory.name ? $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.inventory.name : null;
+ formValues.inventory = $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.inventory.id ? $scope.nodeBeingEdited.unifiedJobTemplate.summary_fields.inventory.id : null;
+ } else {
+ formValues.inventory_name = null;
+ formValues.inventory = null;
+ }
+ }
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_job_type_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && $scope.nodeBeingEdited.promptValues.job_type) {
+ formValues.job_type = {
+ value: $scope.nodeBeingEdited.promptValues.job_type
+ };
+ } else if ($scope.nodeBeingEdited.originalNodeObj.job_type) {
+ formValues.job_type = {
+ value: $scope.nodeBeingEdited.originalNodeObj.job_type
+ };
+ } else if ($scope.nodeBeingEdited.unifiedJobTemplate.job_type) {
+ formValues.job_type = {
+ value: $scope.nodeBeingEdited.unifiedJobTemplate.job_type
+ };
+ } else {
+ formValues.job_type = {
+ value: null
+ };
+ }
+
+ }
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_limit_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && typeof $scope.nodeBeingEdited.promptValues.limit === 'string') {
+ formValues.limit = $scope.nodeBeingEdited.promptValues.limit;
+ } else if (typeof $scope.nodeBeingEdited.originalNodeObj.limit === 'string') {
+ formValues.limit = $scope.nodeBeingEdited.originalNodeObj.limit;
+ } else if (typeof $scope.nodeBeingEdited.unifiedJobTemplate.limit === 'string') {
+ formValues.limit = $scope.nodeBeingEdited.unifiedJobTemplate.limit;
+ } else {
+ formValues.limit = null;
+ }
+ }
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_skip_tags_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && typeof $scope.nodeBeingEdited.promptValues.skip_tags === 'string') {
+ formValues.skip_tags = $scope.nodeBeingEdited.promptValues.skip_tags;
+ } else if (typeof $scope.nodeBeingEdited.originalNodeObj.skip_tags === 'string') {
+ formValues.skip_tags = $scope.nodeBeingEdited.originalNodeObj.skip_tags;
+ } else if (typeof $scope.nodeBeingEdited.unifiedJobTemplate.skip_tags === 'string') {
+ formValues.skip_tags = $scope.nodeBeingEdited.unifiedJobTemplate.skip_tags;
+ } else {
+ formValues.skip_tags = null;
+ }
+ }
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_tags_on_launch) {
+ if ($scope.nodeBeingEdited.promptValues && typeof $scope.nodeBeingEdited.promptValues.job_tags === 'string') {
+ formValues.job_tags = $scope.nodeBeingEdited.promptValues.job_tags;
+ } else if (typeof $scope.nodeBeingEdited.originalNodeObj.job_tags === 'string') {
+ formValues.job_tags = $scope.nodeBeingEdited.originalNodeObj.job_tags;
+ } else if (typeof $scope.nodeBeingEdited.unifiedJobTemplate.job_tags === 'string') {
+ formValues.job_tags = $scope.nodeBeingEdited.unifiedJobTemplate.job_tags;
+ } else {
+ formValues.job_tags = null;
+ }
+ }
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.type === "job_template") {
+ $scope.workflowMakerFormConfig.activeTab = "jobs";
+ }
+
+ $scope.selectedTemplate = $scope.nodeBeingEdited.unifiedJobTemplate;
+
+ switch ($scope.nodeBeingEdited.unifiedJobTemplate.type) {
+ case "job_template":
+ $scope.workflowMakerFormConfig.activeTab = "jobs";
+ break;
+ case "project":
+ $scope.workflowMakerFormConfig.activeTab = "project_sync";
+ break;
+ case "inventory_source":
+ $scope.workflowMakerFormConfig.activeTab = "inventory_sync";
+ break;
+ }
+
+ //formValues.edgeType = $scope.nodeBeingEdited.edgeType;
+ $scope.showTypeOptions = (parent && parent.isStartNode) ? false : true;
+
+ $scope.$broadcast('setEdgeType', $scope.nodeBeingEdited.edgeType);
+
+ $scope.$broadcast('templateSelected', {
+ presetValues: formValues,
+ activeTab: $scope.workflowMakerFormConfig.activeTab
+ });
+
+ $scope.$broadcast("refreshWorkflowChart");
+ };
+
+ // Determine whether or not we need to go out and GET this nodes unified job template
+ // in order to determine whether or not prompt fields are needed
+
+ if (!$scope.nodeBeingEdited.isNew && !$scope.nodeBeingEdited.edited && $scope.nodeBeingEdited.unifiedJobTemplate.unified_job_type && $scope.nodeBeingEdited.unifiedJobTemplate.unified_job_type === 'job') {
+ // This is a node that we got back from the api with an incomplete
+ // unified job template so we're going to pull down the whole object
+
+ JobTemplateService.getUnifiedJobTemplate($scope.nodeBeingEdited.unifiedJobTemplate.id)
+ .then(function(data) {
+
+ $scope.nodeBeingEdited.unifiedJobTemplate = _.clone(data.data.results[0]);
+
+ let defers = [];
+ let retrievingCredential = false;
+ let retrievingInventory = false;
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_credential_on_launch && $scope.nodeBeingEdited.originalNodeObj.credential) {
+ defers.push(JobTemplateService.getCredential($scope.nodeBeingEdited.originalNodeObj.credential));
+ retrievingCredential = true;
+ }
+
+ if ($scope.nodeBeingEdited.unifiedJobTemplate.ask_inventory_on_launch && $scope.nodeBeingEdited.originalNodeObj.inventory) {
+ defers.push(JobTemplateService.getInventory($scope.nodeBeingEdited.originalNodeObj.inventory));
+ retrievingInventory = true;
+ }
+
+ $q.all(defers)
+ .then(function(responses) {
+ if (retrievingCredential) {
+ $scope.nodeBeingEdited.promptValues.credential = {
+ name: responses[0].data.name,
+ id: responses[0].data.id
+ };
+
+ if (retrievingInventory) {
+ $scope.nodeBeingEdited.promptValues.inventory = {
+ name: responses[1].data.name,
+ id: responses[1].data.id
+ };
+ }
+ } else if (retrievingInventory) {
+ $scope.nodeBeingEdited.promptValues.inventory = {
+ name: responses[0].data.name,
+ id: responses[0].data.id
+ };
+ }
+ finishConfiguringEdit();
+ });
+
+
+ }, function(error) {
+ ProcessErrors($scope, error.data, error.status, form, {
+ hdr: 'Error!',
+ msg: 'Failed to get unified job template. GET returned ' +
+ 'status: ' + error.status
+ });
+ });
+ } else {
+ finishConfiguringEdit();
+ }
+
+ }
+
+ };
+
+ /* DELETE NODE FUNCTIONS */
+
+ function resetDeleteNode() {
+ $scope.nodeToBeDeleted = null;
+ $scope.deleteOverlayVisible = false;
+ }
+
+ $scope.startDeleteNode = function(nodeToDelete) {
+ $scope.nodeToBeDeleted = nodeToDelete;
+ $scope.deleteOverlayVisible = true;
+ };
+
+ $scope.cancelDeleteNode = function() {
+ resetDeleteNode();
+ };
+
+ $scope.confirmDeleteNode = function() {
+ if ($scope.nodeToBeDeleted) {
+
+ // TODO: turn this into a promise so that we can handle errors
+
+ WorkflowHelpService.removeNodeFromTree({
+ tree: $scope.treeData.data,
+ nodeToBeDeleted: $scope.nodeToBeDeleted
+ });
+
+ if ($scope.nodeToBeDeleted.isNew !== true) {
+ $scope.treeData.data.deletedNodes.push($scope.nodeToBeDeleted.nodeId);
+ }
+
+ if ($scope.nodeToBeDeleted.isActiveEdit) {
+ resetNodeForm();
+ }
+
+ resetDeleteNode();
+
+ $scope.$broadcast("refreshWorkflowChart");
+
+ $scope.treeData.data.totalNodes--;
+ }
+
+ };
+
+ $scope.toggleFormTab = function(tab) {
+ if ($scope.workflowMakerFormConfig.activeTab !== tab) {
+ $scope.workflowMakerFormConfig.activeTab = tab;
+ }
+ };
+
+ $scope.templateSelected = function(selectedTemplate) {
+
+ $scope.selectedTemplate = angular.copy(selectedTemplate);
+
+ let formValues = {};
+
+ if ($scope.selectedTemplate.ask_credential_on_launch) {
+ if ($scope.selectedTemplate.summary_fields.credential) {
+ formValues.credential_name = $scope.selectedTemplate.summary_fields.credential.name ? $scope.selectedTemplate.summary_fields.credential.name : null;
+ formValues.credential = $scope.selectedTemplate.summary_fields.credential.id ? $scope.selectedTemplate.summary_fields.credential.id : null;
+ } else {
+ formValues.credential_name = null;
+ formValues.credential = null;
+ }
+ }
+
+ if ($scope.selectedTemplate.ask_inventory_on_launch) {
+ if ($scope.selectedTemplate.summary_fields.inventory) {
+ formValues.inventory_name = $scope.selectedTemplate.summary_fields.inventory.name ? $scope.selectedTemplate.summary_fields.inventory.name : null;
+ formValues.inventory = $scope.selectedTemplate.summary_fields.inventory.id ? $scope.selectedTemplate.summary_fields.inventory.id : null;
+ } else {
+ formValues.inventory_name = null;
+ formValues.inventory = null;
+ }
+ }
+
+ if ($scope.selectedTemplate.ask_job_type_on_launch) {
+ formValues.job_type = {
+ value: $scope.selectedTemplate.job_type ? $scope.selectedTemplate.job_type : null
+ };
+
+ // The default needs to be in place before we can select2-ify the dropdown
+ CreateSelect2({
+ element: '#workflow_maker_job_type',
+ multiple: false
+ });
+ }
+
+ if ($scope.selectedTemplate.ask_limit_on_launch) {
+ formValues.limit = $scope.selectedTemplate.limit ? $scope.selectedTemplate.limit : null;
+ }
+
+ if ($scope.selectedTemplate.ask_skip_tags_on_launch) {
+ formValues.skip_tags = $scope.selectedTemplate.skip_tags ? $scope.selectedTemplate.skip_tags : null;
+ }
+
+ if ($scope.selectedTemplate.ask_tags_on_launch) {
+ formValues.job_tags = $scope.selectedTemplate.job_tags ? $scope.selectedTemplate.job_tags : null;
+ }
+
+ // Communicate down the scope chain to our children that a template has been selected. This
+ // will handle populating the form properly as well as clearing out any previously selected
+ // templates in different lists
+ $scope.$broadcast('templateSelected', {
+ presetValues: formValues,
+ activeTab: $scope.workflowMakerFormConfig.activeTab
+ });
+ };
+
+ init();
+
+ }
+];
diff --git a/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.directive.js b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.directive.js
new file mode 100644
index 0000000000..95da492a14
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.directive.js
@@ -0,0 +1,55 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import workflowMakerController from './workflow-maker.controller';
+
+export default ['templateUrl', 'CreateDialog', 'Wait',
+ function(templateUrl, CreateDialog, Wait) {
+ return {
+ scope: {
+ treeData: '=',
+ canAddWorkflowJobTemplate: '='
+ },
+ restrict: 'E',
+ templateUrl: templateUrl('job-templates/workflow-maker/workflow-maker'),
+ controller: workflowMakerController,
+ link: function(scope) {
+ CreateDialog({
+ id: 'workflow-modal-dialog',
+ scope: scope,
+ width: 1400,
+ height: 720,
+ draggable: false,
+ dialogClass: 'SurveyMaker-dialog',
+ position: ['center', 20],
+ onClose: function() {
+ $('#workflow-modal-dialog').empty();
+ },
+ onOpen: function() {
+ Wait('stop');
+
+ // Let the modal height be variable based on the content
+ // and set a uniform padding
+ $('#workflow-modal-dialog').css({ 'padding': '20px' });
+
+ },
+ _allowInteraction: function(e) {
+ return !!$(e.target).is('.select2-input') || this._super(e);
+ },
+ callback: 'WorkflowDialogReady'
+ });
+ if (scope.removeWorkflowDialogReady) {
+ scope.removeWorkflowDialogReady();
+ }
+ scope.removeWorkflowDialogReady = scope.$on('WorkflowDialogReady', function() {
+ $('#workflow-modal-dialog').dialog('open');
+
+ scope.$broadcast("refreshWorkflowChart");
+ });
+ }
+ };
+ }
+];
diff --git a/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.partial.html b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.partial.html
new file mode 100644
index 0000000000..77cdd18d9c
--- /dev/null
+++ b/awx/ui/client/src/job-templates/workflow-maker/workflow-maker.partial.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
Are you sure you want to remove the template below?
+
{{nodeToBeDeleted.unifiedJobTemplate.name}}
+
+
+
+
+
+
+
+
+
{{(workflowMakerFormConfig.nodeMode === 'edit' && nodeBeingEdited && nodeBeingEdited.unifiedJobTemplate && nodeBeingEdited.unifiedJobTemplate.name) ? nodeBeingEdited.unifiedJobTemplate.name : "ADD A TEMPLATE"}}
+
Please hover over a template and click the Add button.
+
+
+
+
+ Close
+ Save
+
+
+ href="/#/templates"
+ ng-class="{'is-currentRoute' : isCurrentState('templates')}">
- JOB TEMPLATES
+ TEMPLATES
+ ng-class="{'is-currentRoute' : isCurrentState('templates'), 'is-loggedOut' : !current_user || !current_user.username}">
- JOB TEMPLATES
+ TEMPLATES
{
+ $scope.$on('selectedOrDeselected', ()=>{
throw {name: 'NotYetImplemented'};
});
}
diff --git a/awx/ui/client/src/organizations/linkout/main.js b/awx/ui/client/src/organizations/linkout/main.js
index 0701b87b96..e6d31a156c 100644
--- a/awx/ui/client/src/organizations/linkout/main.js
+++ b/awx/ui/client/src/organizations/linkout/main.js
@@ -1,4 +1,3 @@
-import routes from './organizations-linkout.route';
import AddUsers from './addUsers/main';
export default angular.module('organizationsLinkout', [AddUsers.name]);
diff --git a/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js b/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
index 207ab2d8ec..c22b3c1049 100644
--- a/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
+++ b/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
@@ -4,7 +4,6 @@
* All Rights Reserved
*************************************************/
-import { templateUrl } from '../../shared/template-url/template-url.factory';
import OrganizationsAdmins from './controllers/organizations-admins.controller';
import OrganizationsInventories from './controllers/organizations-inventories.controller';
import OrganizationsJobTemplates from './controllers/organizations-job-templates.controller';
diff --git a/awx/ui/client/src/partials/job-template-smart-status.html b/awx/ui/client/src/partials/job-template-smart-status.html
index a9c6365970..1c45c5fe36 100644
--- a/awx/ui/client/src/partials/job-template-smart-status.html
+++ b/awx/ui/client/src/partials/job-template-smart-status.html
@@ -1 +1 @@
-Please select a value.
\n";
@@ -1433,8 +1449,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
// Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML
// string to be injected into the current view.
//
- var btn, button, fld, field, html = '', i, section, group,
- tab, sectionShow, offset, width,ngDisabled, itm;
+ var btn, button, fld, field, html = '', section, group,
+ sectionShow, offset, width,ngDisabled, itm;
// title and exit button
if(!(this.form.showHeader !== undefined && this.form.showHeader === false)) {
@@ -1473,14 +1489,14 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += ""; //end of Form-header
}
- if (!_.isEmpty(this.form.related)) {
+ if (!_.isEmpty(this.form.related) || !_.isEmpty(this.form.relatedButtons)) {
var collection, details = i18n._('Details');
- html += `";//tabHolder
}
- if(!_.isEmpty(this.form.related) && this.mode === "edit"){
- html += `
diff --git a/awx/ui/client/src/shared/main.js b/awx/ui/client/src/shared/main.js
index 78bc5d19f9..8db9dd8172 100644
--- a/awx/ui/client/src/shared/main.js
+++ b/awx/ui/client/src/shared/main.js
@@ -10,7 +10,6 @@ import lookupModal from './lookup/main';
import smartSearch from './smart-search/main';
import paginate from './paginate/main';
import columnSort from './column-sort/main';
-import title from './title.directive';
import lodashAsPromised from './lodash-as-promised';
import stringFilters from './string-filters/main';
import truncatedText from './truncated-text.directive';
diff --git a/awx/ui/client/src/shared/paginate/paginate.controller.js b/awx/ui/client/src/shared/paginate/paginate.controller.js
index b8d0a4ecf5..f0276bdebd 100644
--- a/awx/ui/client/src/shared/paginate/paginate.controller.js
+++ b/awx/ui/client/src/shared/paginate/paginate.controller.js
@@ -50,9 +50,9 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
}
function calcDataRange() {
- if ($scope.current() == 1 && $scope.dataset.count < parseInt(pageSize)) {
+ if ($scope.current() === 1 && $scope.dataset.count < parseInt(pageSize)) {
return `1 - ${$scope.dataset.count}`;
- } else if ($scope.current() == 1) {
+ } else if ($scope.current() === 1) {
return `1 - ${pageSize}`;
} else {
let floor = (($scope.current() - 1) * parseInt(pageSize)) + 1;
diff --git a/awx/ui/client/src/shared/smart-search/queryset.service.js b/awx/ui/client/src/shared/smart-search/queryset.service.js
index 12057c1a90..1296a1394b 100644
--- a/awx/ui/client/src/shared/smart-search/queryset.service.js
+++ b/awx/ui/client/src/shared/smart-search/queryset.service.js
@@ -1,5 +1,5 @@
-export default ['$q', 'Rest', 'ProcessErrors', '$rootScope', 'Wait', 'DjangoSearchModel', '$cacheFactory', 'GetBasePath',
- function($q, Rest, ProcessErrors, $rootScope, Wait, DjangoSearchModel, $cacheFactory, GetBasePath) {
+export default ['$q', 'Rest', 'ProcessErrors', '$rootScope', 'Wait', 'DjangoSearchModel', '$cacheFactory',
+ function($q, Rest, ProcessErrors, $rootScope, Wait, DjangoSearchModel, $cacheFactory) {
return {
// kick off building a model for a specific endpoint
// this is usually a list's basePath
diff --git a/awx/ui/client/src/shared/socket/socket.service.js b/awx/ui/client/src/shared/socket/socket.service.js
index 1af67cb6ef..64933f8fbd 100644
--- a/awx/ui/client/src/shared/socket/socket.service.js
+++ b/awx/ui/client/src/shared/socket/socket.service.js
@@ -50,13 +50,13 @@ export default
$log.debug('Websocket Error Logged: ' + error); //log errors
};
- self.socket.onconnecting = function (event) {
+ self.socket.onconnecting = function () {
self.checkStatus();
$log.debug('Websocket reconnecting');
needsResubscribing = true;
};
- self.socket.onclose = function (event) {
+ self.socket.onclose = function () {
self.checkStatus();
$log.debug(`Websocket disconnected`);
};
diff --git a/awx/ui/client/src/shared/stateDefinitions.factory.js b/awx/ui/client/src/shared/stateDefinitions.factory.js
index 0c4112aa7b..b76c5b5a36 100644
--- a/awx/ui/client/src/shared/stateDefinitions.factory.js
+++ b/awx/ui/client/src/shared/stateDefinitions.factory.js
@@ -9,8 +9,6 @@
* generateLookupNodes - Attaches to a form node. Builds an abstract '*.lookup' node with field-specific 'lookup.*' children e.g. {name: 'projects.add.lookup.organizations', ...}
*/
-import { templateUrl } from './template-url/template-url.factory';
-
export default ['$injector', '$stateExtender', '$log', function($injector, $stateExtender, $log) {
return {
/**
@@ -140,12 +138,14 @@ export default ['$injector', '$stateExtender', '$log', function($injector, $stat
let formNode, states = [];
switch (mode) {
case 'add':
+ // breadcrumbName necessary for resources that are more than one word like
+ // job templates. form.name can't have spaces in it or it busts form gen
formNode = $stateExtender.buildDefinition({
name: params.name || `${params.parent}.add`,
url: params.url || '/add',
ncyBreadcrumb: {
[params.parent ? 'parent' : null]: `${params.parent}`,
- label: `CREATE ${form.name}`
+ label: `CREATE ${form.breadcrumbName || form.name}`
},
views: {
'form': {
@@ -370,7 +370,7 @@ export default ['$injector', '$stateExtender', '$log', function($injector, $stat
// a lookup field's basePath takes precedence over generic list definition's basePath, if supplied
data: {
basePath: field.basePath || null,
- lookup: true
+ formChildState: true
},
params: {
[field.sourceModel + '_search']: {
diff --git a/awx/ui/client/src/standard-out/standard-out.controller.js b/awx/ui/client/src/standard-out/standard-out.controller.js
index 663d165cf3..ffed821d7d 100644
--- a/awx/ui/client/src/standard-out/standard-out.controller.js
+++ b/awx/ui/client/src/standard-out/standard-out.controller.js
@@ -52,7 +52,7 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams,
$scope.created_by = data.summary_fields.created_by;
$scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
$scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
- $scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
+ $scope.job_template_url = '/#/templates/' + data.unified_job_template;
$scope.inventory_url = ($scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
$scope.project_url = ($scope.project_name && data.project) ? '/#/projects/' + data.project : '';
$scope.credential_name = (data.summary_fields.credential) ? data.summary_fields.credential.name : '';
diff --git a/awx/ui/client/src/workflow-results/main.js b/awx/ui/client/src/workflow-results/main.js
new file mode 100644
index 0000000000..7faf366fc9
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/main.js
@@ -0,0 +1,16 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import workflowStatusBar from './workflow-status-bar/main';
+import route from './workflow-results.route.js';
+import workflowResultsService from './workflow-results.service';
+
+export default
+ angular.module('workflowResults', [workflowStatusBar.name])
+ .run(['$stateExtender', function($stateExtender) {
+ $stateExtender.addState(route);
+ }])
+ .service('workflowResultsService', workflowResultsService);
diff --git a/awx/ui/client/src/workflow-results/workflow-results.block.less b/awx/ui/client/src/workflow-results/workflow-results.block.less
new file mode 100644
index 0000000000..a053db98c1
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -0,0 +1,114 @@
+@import '../shared/branding/colors.less';
+@import '../shared/branding/colors.default.less';
+@import '../shared/layouts/one-plus-two.less';
+
+@breakpoint-md: 1200px;
+@breakpoint-sm: 623px;
+
+.WorkflowResults {
+ .OnePlusTwo-container(100%, @breakpoint-md);
+
+ &.fullscreen {
+ .WorkflowResults-rightSide {
+ max-width: 100%;
+ }
+ }
+}
+
+.WorkflowResults-leftSide {
+ .OnePlusTwo-left--panel(100%, @breakpoint-md);
+ // TODO: needs to be set based on height of browser window
+ height: 870px !important;
+}
+
+.WorkflowResults-rightSide {
+ .OnePlusTwo-right--panel(100%, @breakpoint-md);
+ // TODO: needs to be set based on height of browser window
+ height: 870px !important;
+
+ @media (max-width: @breakpoint-md - 1px) {
+ padding-right: 15px;
+ }
+}
+
+.WorkflowResults-stdoutActionButton--active {
+ display: none;
+ visibility: hidden;
+ flex:none;
+ width:0px;
+ padding-right: 0px;
+}
+
+.WorkflowResults-panelHeader {
+ display: flex;
+ height: 30px;
+}
+
+.WorkflowResults-panelHeaderText {
+ color: @default-interface-txt;
+ flex: 1 0 auto;
+ font-size: 14px;
+ font-weight: bold;
+ margin-right: 10px;
+ text-transform: uppercase;
+}
+
+.WorkflowResults-resultRow {
+ width: 100%;
+ display: flex;
+ padding-bottom: 10px;
+ flex-wrap: wrap;
+}
+
+.WorkflowResults-resultRow--variables {
+ flex-direction: column;
+}
+
+.WorkflowResults-resultRowLabel {
+ text-transform: uppercase;
+ color: @default-interface-txt;
+ font-size: 14px;
+ font-weight: normal!important;
+ width: 30%;
+ margin-right: 20px;
+
+ @media screen and (max-width: @breakpoint-md) {
+ flex: 2.5 0 auto;
+ }
+}
+
+.WorkflowResults-resultRowLabel--fullWidth {
+ width: 100%;
+ margin-right: 0px;
+}
+
+.WorkflowResults-resultRowText {
+ width: ~"calc(70% - 20px)";
+ flex: 1 0 auto;
+ text-transform: none;
+ word-wrap: break-word;
+}
+
+.WorkflowResults-resultRowText--fullWidth {
+ width: 100%;
+}
+
+.WorkflowResults-statusResultIcon {
+ padding-left: 0px;
+ padding-right: 10px;
+}
+
+.WorkflowResults-badgeRow {
+ display: flex;
+ align-items: center;
+ margin-right: 5px;
+}
+
+.WorkflowResults-badgeTitle{
+ color: @default-interface-txt;
+ font-size: 14px;
+ margin-right: 10px;
+ font-weight: normal;
+ text-transform: uppercase;
+ margin-left: 20px;
+}
diff --git a/awx/ui/client/src/workflow-results/workflow-results.controller.js b/awx/ui/client/src/workflow-results/workflow-results.controller.js
new file mode 100644
index 0000000000..d3f6eb4da9
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-results.controller.js
@@ -0,0 +1,188 @@
+export default ['workflowData',
+ 'workflowResultsService',
+ 'workflowDataOptions',
+ 'jobLabels',
+ 'workflowNodes',
+ '$scope',
+ 'ParseTypeChange',
+ 'ParseVariableString',
+ function(workflowData,
+ workflowResultsService,
+ workflowDataOptions,
+ jobLabels,
+ workflowNodes,
+ $scope,
+ ParseTypeChange,
+ ParseVariableString
+ ) {
+ var getTowerLinks = function() {
+ var getTowerLink = function(key) {
+ if ($scope.workflow.related[key]) {
+ return '/#/' + $scope.workflow.related[key]
+ .split('api/v1/')[1];
+ }
+ else {
+ return null;
+ }
+ };
+
+ $scope.workflow_template_link = '/#/templates/workflow_job_template/'+$scope.workflow.workflow_job_template;
+ $scope.created_by_link = getTowerLink('created_by');
+ $scope.cloud_credential_link = getTowerLink('cloud_credential');
+ $scope.network_credential_link = getTowerLink('network_credential');
+ };
+
+ var getTowerLabels = function() {
+ var getTowerLabel = function(key) {
+ if ($scope.workflowOptions && $scope.workflowOptions[key]) {
+ return $scope.workflowOptions[key].choices
+ .filter(val => val[0] === $scope.workflow[key])
+ .map(val => val[1])[0];
+ } else {
+ return null;
+ }
+ };
+
+ $scope.status_label = getTowerLabel('status');
+ $scope.type_label = getTowerLabel('job_type');
+ $scope.verbosity_label = getTowerLabel('verbosity');
+ };
+
+ // var getTotalHostCount = function(count) {
+ // return Object
+ // .keys(count).reduce((acc, i) => acc += count[i], 0);
+ // };
+
+ // put initially resolved request data on scope
+ $scope.workflow = workflowData;
+ $scope.workflow_nodes = workflowNodes;
+ $scope.workflowOptions = workflowDataOptions.actions.GET;
+ $scope.labels = jobLabels;
+
+ // turn related api browser routes into tower routes
+ getTowerLinks();
+
+ // use options labels to manipulate display of details
+ getTowerLabels();
+
+ // set up a read only code mirror for extra vars
+ $scope.variables = ParseVariableString($scope.workflow.extra_vars);
+ $scope.parseType = 'yaml';
+ ParseTypeChange({ scope: $scope,
+ field_id: 'pre-formatted-variables',
+ readOnly: true });
+
+ // Click binding for the expand/collapse button on the standard out log
+ $scope.stdoutFullScreen = false;
+ $scope.toggleStdoutFullscreen = function() {
+ $scope.stdoutFullScreen = !$scope.stdoutFullScreen;
+ };
+
+ $scope.deleteJob = function() {
+ workflowResultsService.deleteJob($scope.workflow);
+ };
+
+ $scope.cancelJob = function() {
+ workflowResultsService.cancelJob($scope.workflow);
+ };
+
+ $scope.relaunchJob = function() {
+ workflowResultsService.relaunchJob($scope);
+ };
+
+ $scope.stdoutArr = [];
+
+ // EVENT STUFF BELOW
+
+ // just putting the event queue on scope so it can be inspected in the
+ // console
+ // $scope.event_queue = eventQueue.queue;
+ // $scope.defersArr = eventQueue.populateDefers;
+
+ // This is where the async updates to the UI actually happen.
+ // Flow is event queue munging in the service -> $scope setting in here
+ // var processEvent = function(event) {
+ // // put the event in the queue
+ // eventQueue.populate(event).then(mungedEvent => {
+ // // make changes to ui based on the event returned from the queue
+ // if (mungedEvent.changes) {
+ // mungedEvent.changes.forEach(change => {
+ // // we've got a change we need to make to the UI!
+ // // update the necessary scope and make the change
+ // if (change === 'startTime' && !$scope.workflow.start) {
+ // $scope.workflow.start = mungedEvent.startTime;
+ // }
+ //
+ // if (change === 'count' && !$scope.countFinished) {
+ // // for all events that affect the host count,
+ // // update the status bar as well as the host
+ // // count badge
+ // $scope.count = mungedEvent.count;
+ // $scope.hostCount = getTotalHostCount(mungedEvent
+ // .count);
+ // }
+ //
+ // if (change === 'playCount') {
+ // $scope.playCount = mungedEvent.playCount;
+ // }
+ //
+ // if (change === 'taskCount') {
+ // $scope.taskCount = mungedEvent.taskCount;
+ // }
+ //
+ // if (change === 'finishedTime' && !$scope.workflow.finished) {
+ // $scope.workflow.finished = mungedEvent.finishedTime;
+ // }
+ //
+ // if (change === 'countFinished') {
+ // // the playbook_on_stats event actually lets
+ // // us know that we don't need to iteratively
+ // // look at event to update the host counts
+ // // any more.
+ // $scope.countFinished = true;
+ // }
+ //
+ // if(change === 'stdout'){
+ // angular
+ // .element(".JobResultsStdOut-stdoutContainer")
+ // .append($compile(mungedEvent
+ // .stdout)($scope));
+ // }
+ // });
+ // }
+ //
+ // // the changes have been processed in the ui, mark it in the queue
+ // eventQueue.markProcessed(event);
+ // });
+ // };
+
+ // PULL! grab completed event data and process each event
+ // TODO: implement retry logic in case one of these requests fails
+ // var getEvents = function(url) {
+ // workflowResultsService.getEvents(url)
+ // .then(events => {
+ // events.results.forEach(event => {
+ // // get the name in the same format as the data
+ // // coming over the websocket
+ // event.event_name = event.event;
+ // processEvent(event);
+ // });
+ // if (events.next) {
+ // getEvents(events.next);
+ // }
+ // });
+ // };
+ // getEvents($scope.job.related.job_events);
+
+ // // Processing of job_events messages from the websocket
+ // $scope.$on(`ws-job_events-${$scope.workflow.id}`, function(e, data) {
+ // processEvent(data);
+ // });
+
+ // Processing of job-status messages from the websocket
+ $scope.$on(`ws-jobs`, function(e, data) {
+ if (parseInt(data.unified_job_id, 10) === parseInt($scope.workflow.id,10)) {
+ $scope.workflow.status = data.status;
+ }
+ });
+}];
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
new file mode 100644
index 0000000000..9612719221
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -0,0 +1,236 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Started
+
+
+ {{ workflow.started | longDate }}
+
+
+
+
+
+
+ Finished
+
+
+ {{ (workflow.finished |
+ longDate) || "Not Finished" }}
+
+
+
+
+
+
+
+
+
+ Job Type
+
+
+ Workflow Job
+
+
+
+
+
+
+
+
+
+
+ Extra Variables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ workflow.name }}
+
+
+
+
+
+
+ Total Jobs
+
+
+ {{ workflow_nodes.length || 0}}
+
+
+
+
+ Elapsed
+
+
+ {{ job.elapsed * 1000 }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Are you sure you want to delete the workflow below?
+
+
+ #${workflow.id} ${$filter('sanitize')(workflow.name)}
+
`,
+ action: function() {
+ Wait('start');
+ Rest.setUrl(workflow.url);
+ Rest.destroy()
+ .success(function() {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ $state.go('jobs');
+ })
+ .error(function(obj, status) {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ ProcessErrors(null, obj, status, null, {
+ hdr: 'Error!',
+ msg: `Could not delete job.
+ Returned status: ${status}`
+ });
+ });
+ },
+ actionText: 'DELETE'
+ });
+ },
+ cancelJob: function(workflow) {
+ var doCancel = function() {
+ Rest.setUrl(workflow.url + 'cancel');
+ Rest.post({})
+ .success(function() {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ })
+ .error(function(obj, status) {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ ProcessErrors(null, obj, status, null, {
+ hdr: 'Error!',
+ msg: `Could not cancel workflow.
+ Returned status: ${status}`
+ });
+ });
+ };
+
+ Prompt({
+ hdr: 'Cancel Workflow',
+ body: `
+ Are you sure you want to cancel the workflow below?
+
+
+ #${workflow.id} ${$filter('sanitize')(workflow.name)}
+
`,
+ action: function() {
+ Wait('start');
+ Rest.setUrl(workflow.url + 'cancel');
+ Rest.get()
+ .success(function(data) {
+ if (data.can_cancel === true) {
+ doCancel();
+ } else {
+ $('#prompt-modal').modal('hide');
+ ProcessErrors(null, data, null, null, {
+ hdr: 'Error!',
+ msg: `Job has completed,
+ unabled to be canceled.`
+ });
+ }
+ });
+ Rest.destroy()
+ .success(function() {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ })
+ .error(function(obj, status) {
+ Wait('stop');
+ $('#prompt-modal').modal('hide');
+ ProcessErrors(null, obj, status, null, {
+ hdr: 'Error!',
+ msg: `Could not cancel workflow.
+ Returned status: ${status}`
+ });
+ });
+ },
+ actionText: 'CANCEL'
+ });
+ },
+ relaunchJob: function(scope) {
+ InitiatePlaybookRun({ scope: scope, id: scope.workflow.id,
+ relaunch: true });
+ }
+ };
+ return val;
+}];
diff --git a/awx/ui/client/src/workflow-results/workflow-status-bar/main.js b/awx/ui/client/src/workflow-results/workflow-status-bar/main.js
new file mode 100644
index 0000000000..251258fc70
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-status-bar/main.js
@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import workflowStatusBar from './workflow-status-bar.directive';
+
+export default
+ angular.module('workflowStatusBarDirective', [])
+ .directive('workflowStatusBar', workflowStatusBar);
diff --git a/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.block.less b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.block.less
new file mode 100644
index 0000000000..38e57d4883
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.block.less
@@ -0,0 +1,80 @@
+@import '../../shared/branding/colors.default.less';
+
+.WorkflowStatusBar {
+ display: flex;
+ flex: 0 0 auto;
+ width: 100%;
+ margin-top: 10px;
+}
+
+.WorkflowStatusBar-ok,
+.WorkflowStatusBar-changed,
+.WorkflowStatusBar-unreachable,
+.WorkflowStatusBar-failures,
+.WorkflowStatusBar-skipped,
+.WorkflowStatusBar-noData {
+ height: 15px;
+ border-top: 5px solid @default-bg;
+ border-bottom: 5px solid @default-bg;
+}
+
+.WorkflowStatusBar-ok {
+ background-color: @default-succ;
+ display: flex;
+ flex: 0 0 auto;
+}
+
+.WorkflowStatusBar-changed {
+ background-color: @default-warning;
+ flex: 0 0 auto;
+}
+
+.WorkflowStatusBar-unreachable {
+ background-color: @default-unreachable;
+ flex: 0 0 auto;
+}
+
+.WorkflowStatusBar-failures {
+ background-color: @default-err;
+ flex: 0 0 auto;
+}
+
+.WorkflowStatusBar-skipped {
+ background-color: @default-link;
+ flex: 0 0 auto;
+}
+
+.WorkflowStatusBar-noData {
+ background-color: @default-icon-hov;
+ flex: 1 0 auto;
+}
+
+.WorkflowStatusBar-tooltipLabel {
+ text-transform: uppercase;
+ margin-right: 15px;
+}
+
+.WorkflowStatusBar-tooltipBadge {
+ border-radius: 5px;
+}
+
+.WorkflowStatusBar-tooltipBadge--ok {
+ background-color: @default-succ;
+}
+
+.WorkflowStatusBar-tooltipBadge--unreachable {
+ background-color: @default-unreachable;
+}
+
+.WorkflowStatusBar-tooltipBadge--skipped {
+ background-color: @default-link;
+}
+
+.WorkflowStatusBar-tooltipBadge--changed {
+ background-color: @default-warning;
+}
+
+.WorkflowStatusBar-tooltipBadge--failures {
+ background-color: @default-err;
+
+}
diff --git a/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.directive.js b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.directive.js
new file mode 100644
index 0000000000..a6899eb0da
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.directive.js
@@ -0,0 +1,43 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+// import WorkflowStatusBarController from './host-status-bar.controller';
+export default [ 'templateUrl',
+ function(templateUrl) {
+ return {
+ scope: true,
+ templateUrl: templateUrl('workflow-results/workflow-status-bar/workflow-status-bar'),
+ restrict: 'E',
+ // controller: standardOutLogController,
+ link: function(scope) {
+ // as count is changed by event data coming in,
+ // update the host status bar
+ scope.$watch('count', function(val) {
+ if (val) {
+ Object.keys(val).forEach(key => {
+ // reposition the hosts status bar by setting
+ // the various flex values to the count of
+ // those hosts
+ $(`.WorkflowStatusBar-${key}`)
+ .css('flex', `${val[key]} 0 auto`);
+
+ // set the tooltip to give how many hosts of
+ // each type
+ if (val[key] > 0) {
+ scope[`${key}CountTip`] = `${key} ${val[key]} `;
+ }
+ });
+
+ // if there are any hosts that have finished, don't
+ // show default grey bar
+ scope.hostsFinished = (Object
+ .keys(val)
+ .filter(key => (val[key] > 0)).length > 0);
+ }
+ });
+ }
+ };
+}];
diff --git a/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.partial.html b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.partial.html
new file mode 100644
index 0000000000..e0efddc7b6
--- /dev/null
+++ b/awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.partial.html
@@ -0,0 +1,26 @@
+
diff --git a/awx/ui/tests/spec/job-templates/job-templates-list.controller-test.js b/awx/ui/tests/spec/job-templates/job-templates-list.controller-test.js
new file mode 100644
index 0000000000..5d542622cd
--- /dev/null
+++ b/awx/ui/tests/spec/job-templates/job-templates-list.controller-test.js
@@ -0,0 +1,269 @@
+'use strict';
+
+describe('Controller: JobTemplatesList', () => {
+ // Setup
+ let scope,
+ rootScope,
+ state,
+ JobTemplatesListController,
+ ClearScope,
+ GetChoices,
+ Alert,
+ Prompt,
+ InitiatePlaybookRun,
+ rbacUiControlService,
+ canAddDeferred,
+ q,
+ JobTemplateService,
+ deleteWorkflowJobTemplateDeferred,
+ deleteJobTemplateDeferred,
+ Dataset;
+
+ beforeEach(angular.mock.module('Tower'));
+ beforeEach(angular.mock.module('jobTemplates', ($provide) => {
+
+ state = jasmine.createSpyObj('state', [
+ '$get',
+ 'transitionTo',
+ 'go'
+ ]);
+
+ state.params = {
+ id: 1
+ };
+
+ rbacUiControlService = {
+ canAdd: function(){
+ return angular.noop;
+ }
+ };
+
+ JobTemplateService = {
+ deleteWorkflowJobTemplate: function(){
+ return angular.noop;
+ },
+ deleteJobTemplate: function(){
+ return angular.noop;
+ }
+ };
+
+ Dataset = {
+ data: {
+ results: []
+ }
+ };
+
+ ClearScope = jasmine.createSpy('ClearScope');
+ GetChoices = jasmine.createSpy('GetChoices');
+ Alert = jasmine.createSpy('Alert');
+ Prompt = jasmine.createSpy('Prompt').and.callFake(function(args) {
+ args.action();
+ });
+ InitiatePlaybookRun = jasmine.createSpy('InitiatePlaybookRun');
+
+ $provide.value('ClearScope', ClearScope);
+ $provide.value('GetChoices', GetChoices);
+ $provide.value('Alert', Alert);
+ $provide.value('Prompt', Prompt);
+ $provide.value('state', state);
+ $provide.value('InitiatePlaybookRun', InitiatePlaybookRun);
+ }));
+
+ beforeEach(angular.mock.inject( ($rootScope, $controller, $q, _state_, _ConfigService_, _ClearScope_, _GetChoices_, _Alert_, _Prompt_, _InitiatePlaybookRun_) => {
+ scope = $rootScope.$new();
+ rootScope = $rootScope;
+ q = $q;
+ state = _state_;
+ ClearScope = _ClearScope_;
+ GetChoices = _GetChoices_;
+ Alert = _Alert_;
+ Prompt = _Prompt_;
+ InitiatePlaybookRun = _InitiatePlaybookRun_;
+ canAddDeferred = q.defer();
+ deleteWorkflowJobTemplateDeferred = q.defer();
+ deleteJobTemplateDeferred = q.defer();
+
+ rbacUiControlService.canAdd = jasmine.createSpy('canAdd').and.returnValue(canAddDeferred.promise);
+
+ JobTemplateService.deleteWorkflowJobTemplate = jasmine.createSpy('deleteWorkflowJobTemplate').and.returnValue(deleteWorkflowJobTemplateDeferred.promise);
+ JobTemplateService.deleteJobTemplate = jasmine.createSpy('deleteJobTemplate').and.returnValue(deleteJobTemplateDeferred.promise);
+
+ JobTemplatesListController = $controller('JobTemplatesListController', {
+ $scope: scope,
+ $rootScope: rootScope,
+ $state: state,
+ ClearScope: ClearScope,
+ GetChoices: GetChoices,
+ Alert: Alert,
+ Prompt: Prompt,
+ InitiatePlaybookRun: InitiatePlaybookRun,
+ rbacUiControlService: rbacUiControlService,
+ JobTemplateService: JobTemplateService,
+ Dataset: Dataset
+ });
+ }));
+
+ describe('scope.editJobTemplate()', () => {
+
+ it('should call Alert when template param is not present', ()=>{
+ scope.editJobTemplate();
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to edit template', 'Template parameter is missing');
+ });
+
+ it('should transition to templates.editJobTemplate when type is "Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Job Template",
+ id: 1
+ };
+
+ scope.editJobTemplate(testTemplate);
+ expect(state.transitionTo).toHaveBeenCalledWith('templates.editJobTemplate', {job_template_id: 1});
+ });
+
+ it('should transition to templates.templates.editWorkflowJobTemplate when type is "Workflow Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Workflow Job Template",
+ id: 1
+ };
+
+ scope.editJobTemplate(testTemplate);
+ expect(state.transitionTo).toHaveBeenCalledWith('templates.editWorkflowJobTemplate', {workflow_job_template_id: 1});
+ });
+
+ it('should call Alert when type is not "Job Template" or "Workflow Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Some Other Type",
+ id: 1
+ };
+
+ scope.editJobTemplate(testTemplate);
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to determine template type', 'We were unable to determine this template\'s type while routing to edit.');
+ });
+
+ });
+
+ describe('scope.deleteJobTemplate()', () => {
+
+ it('should call Alert when template param is not present', ()=>{
+ scope.deleteJobTemplate();
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to delete template', 'Template parameter is missing');
+ });
+
+ it('should call Prompt if template param is present', ()=>{
+
+ var testTemplate = {
+ id: 1,
+ name: "Test Template"
+ };
+
+ scope.deleteJobTemplate(testTemplate);
+ expect(Prompt).toHaveBeenCalled();
+ });
+
+ it('should call JobTemplateService.deleteWorkflowJobTemplate when the user takes affirmative action on the delete modal and type = "Workflow Job Template"', ()=>{
+ // Note that Prompt has been mocked up above to immediately call the callback function that gets passed in
+ // which is how we access the private function in the controller
+
+ var testTemplate = {
+ id: 1,
+ name: "Test Template",
+ type: "Workflow Job Template"
+ };
+
+ scope.deleteJobTemplate(testTemplate);
+ expect(JobTemplateService.deleteWorkflowJobTemplate).toHaveBeenCalled();
+ });
+
+ it('should call JobTemplateService.deleteJobTemplate when the user takes affirmative action on the delete modal and type = "Workflow Job Template"', ()=>{
+ // Note that Prompt has been mocked up above to immediately call the callback function that gets passed in
+ // which is how we access the private function in the controller
+
+ var testTemplate = {
+ id: 1,
+ name: "Test Template",
+ type: "Job Template"
+ };
+
+ scope.deleteJobTemplate(testTemplate);
+ expect(JobTemplateService.deleteJobTemplate).toHaveBeenCalled();
+ });
+
+ });
+
+ describe('scope.submitJob()', () => {
+
+ it('should call Alert when template param is not present', ()=>{
+ scope.submitJob();
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to launch template', 'Template parameter is missing');
+ });
+
+ it('should call InitiatePlaybookRun when type is "Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Job Template",
+ id: 1
+ };
+
+ scope.submitJob(testTemplate);
+ expect(InitiatePlaybookRun).toHaveBeenCalled();
+ });
+
+ xit('should call [something] when type is "Workflow Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Workflow Job Template",
+ id: 1
+ };
+
+ scope.submitJob(testTemplate);
+ expect([something]).toHaveBeenCalled();
+ });
+
+ it('should call Alert when type is not "Job Template" or "Workflow Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Some Other Type",
+ id: 1
+ };
+
+ scope.submitJob(testTemplate);
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to determine template type', 'We were unable to determine this template\'s type while launching.');
+ });
+
+ });
+
+ describe('scope.scheduleJob()', () => {
+
+ it('should transition to jobTemplateSchedules when type is "Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Job Template",
+ id: 1
+ };
+
+ scope.scheduleJob(testTemplate);
+ expect(state.go).toHaveBeenCalledWith('jobTemplateSchedules', {id: 1});
+ });
+
+ it('should transition to workflowJobTemplateSchedules when type is "Workflow Job Template"', ()=>{
+
+ var testTemplate = {
+ type: "Workflow Job Template",
+ id: 1
+ };
+
+ scope.scheduleJob(testTemplate);
+ expect(state.go).toHaveBeenCalledWith('workflowJobTemplateSchedules', {id: 1});
+ });
+
+ it('should call Alert when template param is not present', ()=>{
+ scope.scheduleJob();
+ expect(Alert).toHaveBeenCalledWith('Error: Unable to schedule job', 'Template parameter is missing');
+ });
+
+ });
+
+});
diff --git a/awx/ui/tests/spec/workflows/workflow-add.controller-test.js b/awx/ui/tests/spec/workflows/workflow-add.controller-test.js
new file mode 100644
index 0000000000..a631ac66ff
--- /dev/null
+++ b/awx/ui/tests/spec/workflows/workflow-add.controller-test.js
@@ -0,0 +1,161 @@
+'use strict';
+
+describe('Controller: WorkflowAdd', () => {
+ // Setup
+ let scope,
+ state,
+ WorkflowAdd,
+ ClearScope,
+ Alert,
+ GenerateForm,
+ JobTemplateService,
+ q,
+ getLabelsDeferred,
+ createWorkflowJobTemplateDeferred,
+ httpBackend,
+ ProcessErrors,
+ CreateSelect2,
+ Wait,
+ ParseTypeChange,
+ ToJSON;
+
+ beforeEach(angular.mock.module('Tower'));
+ beforeEach(angular.mock.module('jobTemplates', ($provide) => {
+
+ state = jasmine.createSpyObj('state', [
+ '$get',
+ 'transitionTo',
+ 'go'
+ ]);
+
+ GenerateForm = jasmine.createSpyObj('GenerateForm', [
+ 'inject',
+ 'reset',
+ 'clearApiErrors',
+ 'applyDefaults'
+ ]);
+
+ JobTemplateService = {
+ getLabelOptions: function(){
+ return angular.noop;
+ },
+ createWorkflowJobTemplate: function(){
+ return angular.noop;
+ }
+ };
+
+ ClearScope = jasmine.createSpy('ClearScope');
+ Alert = jasmine.createSpy('Alert');
+ ProcessErrors = jasmine.createSpy('ProcessErrors');
+ CreateSelect2 = jasmine.createSpy('CreateSelect2');
+ Wait = jasmine.createSpy('Wait');
+ ParseTypeChange = jasmine.createSpy('ParseTypeChange');
+ ToJSON = jasmine.createSpy('ToJSON');
+
+ $provide.value('ClearScope', ClearScope);
+ $provide.value('Alert', Alert);
+ $provide.value('GenerateForm', GenerateForm);
+ $provide.value('state', state);
+ $provide.value('ProcessErrors', ProcessErrors);
+ $provide.value('CreateSelect2', CreateSelect2);
+ $provide.value('Wait', Wait);
+ $provide.value('ParseTypeChange', ParseTypeChange);
+ $provide.value('ToJSON', ToJSON);
+ }));
+
+ beforeEach(angular.mock.inject( ($rootScope, $controller, $q, $httpBackend, _state_, _ConfigService_, _ClearScope_, _GetChoices_, _Alert_, _GenerateForm_, _ProcessErrors_, _CreateSelect2_, _Wait_, _ParseTypeChange_, _ToJSON_) => {
+ scope = $rootScope.$new();
+ state = _state_;
+ q = $q;
+ ClearScope = _ClearScope_;
+ Alert = _Alert_;
+ GenerateForm = _GenerateForm_;
+ httpBackend = $httpBackend;
+ ProcessErrors = _ProcessErrors_;
+ CreateSelect2 = _CreateSelect2_;
+ Wait = _Wait_;
+ getLabelsDeferred = q.defer();
+ createWorkflowJobTemplateDeferred = q.defer();
+ ParseTypeChange = _ParseTypeChange_;
+ ToJSON = _ToJSON_;
+
+ JobTemplateService.getLabelOptions = jasmine.createSpy('getLabelOptions').and.returnValue(getLabelsDeferred.promise);
+ JobTemplateService.createWorkflowJobTemplate = jasmine.createSpy('createWorkflowJobTemplate').and.returnValue(createWorkflowJobTemplateDeferred.promise);
+
+ WorkflowAdd = $controller('WorkflowAdd', {
+ $scope: scope,
+ $state: state,
+ ClearScope: ClearScope,
+ Alert: Alert,
+ GenerateForm: GenerateForm,
+ JobTemplateService: JobTemplateService,
+ ProcessErrors: ProcessErrors,
+ CreateSelect2: CreateSelect2,
+ Wait: Wait,
+ ParseTypeChange: ParseTypeChange,
+ ToJSON
+ });
+ }));
+
+ it('should call ClearScope', ()=>{
+ expect(ClearScope).toHaveBeenCalled();
+ });
+
+ it('should get/set the label options and select2-ify the input', ()=>{
+ // Resolve JobTemplateService.getLabelsForJobTemplate
+ getLabelsDeferred.resolve({
+ foo: "bar"
+ });
+ // We expect the digest cycle to fire off this call to /static/config.js so we go ahead and handle it
+ httpBackend.expectGET('/static/config.js').respond(200);
+ scope.$digest();
+ expect(scope.labelOptions).toEqual({
+ foo: "bar"
+ });
+ expect(CreateSelect2).toHaveBeenCalledWith({
+ element:'#workflow_job_template_labels',
+ multiple: true,
+ addNew: true
+ });
+ });
+
+ it('should call ProcessErrors when getLabelsForJobTemplate returns a rejected promise', ()=>{
+ // Reject JobTemplateService.getLabelsForJobTemplate
+ getLabelsDeferred.reject({
+ data: "mockedData",
+ status: 400
+ });
+ // We expect the digest cycle to fire off this call to /static/config.js so we go ahead and handle it
+ httpBackend.expectGET('/static/config.js').respond(200);
+ scope.$digest();
+ expect(ProcessErrors).toHaveBeenCalled();
+ });
+
+ describe('scope.formSave()', () => {
+
+ it('should call JobTemplateService.createWorkflowJobTemplate', ()=>{
+ scope.name = "Test Workflow";
+ scope.description = "This is a test description";
+ scope.formSave();
+ expect(JobTemplateService.createWorkflowJobTemplate).toHaveBeenCalledWith({
+ name: "Test Workflow",
+ description: "This is a test description",
+ labels: undefined,
+ organization: undefined,
+ variables: undefined,
+ extra_vars: undefined
+ });
+ });
+
+ });
+
+ describe('scope.formCancel()', () => {
+
+ it('should transition to templates', ()=>{
+ scope.formCancel();
+ expect(state.transitionTo).toHaveBeenCalledWith('templates');
+ });
+
+ });
+
+});
diff --git a/awx/ui/tests/spec/workflows/workflow-maker.controller-test.js b/awx/ui/tests/spec/workflows/workflow-maker.controller-test.js
new file mode 100644
index 0000000000..0486356249
--- /dev/null
+++ b/awx/ui/tests/spec/workflows/workflow-maker.controller-test.js
@@ -0,0 +1,58 @@
+'use strict';
+
+describe('Controller: WorkflowMaker', () => {
+ // Setup
+ let scope,
+ WorkflowMakerController,
+ WorkflowHelpService;
+
+ beforeEach(angular.mock.module('Tower'));
+ beforeEach(angular.mock.module('jobTemplates', ($provide) => {
+
+ WorkflowHelpService = jasmine.createSpyObj('WorkflowHelpService', [
+ 'closeDialog',
+ 'addPlaceholderNode',
+ 'getSiblingConnectionTypes'
+ ]);
+
+ $provide.value('WorkflowHelpService', WorkflowHelpService);
+
+ }));
+
+ beforeEach(angular.mock.inject( ($rootScope, $controller, _WorkflowHelpService_) => {
+ scope = $rootScope.$new();
+ scope.treeData = {
+ data: {
+ id: 1,
+ canDelete: false,
+ canEdit: false,
+ canAddTo: true,
+ isStartNode: true,
+ unifiedJobTemplate: {
+ name: "Workflow Launch"
+ },
+ children: [],
+ deletedNodes: [],
+ totalNodes: 0
+ },
+ nextIndex: 2
+ };
+ WorkflowHelpService = _WorkflowHelpService_;
+
+ WorkflowMakerController = $controller('WorkflowMakerController', {
+ $scope: scope,
+ WorkflowHelpService: WorkflowHelpService
+ });
+
+ }));
+
+ describe('scope.saveWorkflowMaker()', () => {
+
+ it('should close the dialog', ()=>{
+ scope.saveWorkflowMaker();
+ expect(WorkflowHelpService.closeDialog).toHaveBeenCalled();
+ });
+
+ });
+
+});