Add Job Splitting feature to UI

awx/ui/client/features/jobs/jobsList.controller.js

@@ -76,6 +76,22 @@ function ListJobsController (
             return { icon, link, value };
         });
 
+    vm.getSplitJobDetails = (details) => {
+        const internalLimitDetails = Object.assign({}, details);
+
+        if (!internalLimitDetails) {
+            return null;
+        }
+
+        const splitJobDetails = internalLimitDetails.shard;
+
+        if (!splitJobDetails) {
+            return null;
+        }
+
+        return `Split Job ${splitJobDetails.offset + 1}/${splitJobDetails.step}`;
+    };
+
     vm.getSref = ({ type, id }) => {
         let sref;
 

awx/ui/client/features/jobs/jobsList.view.html

@@ -23,7 +23,8 @@
                     status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', job.status) }}"
                     header-value="{{ job.id }} - {{ job.name }}"
                     header-state="{{ vm.getSref(job) }}"
-                    header-tag="{{ vm.jobTypes[job.type] }}">
+                    header-tag="{{ vm.jobTypes[job.type] }}"
+                    secondary-tag="{{ vm.getSplitJobDetails(job.summary_fields.internal_limit) }}">
                 </at-row-item>
                 <div class="at-Row--inline">
                     <at-row-item

awx/ui/client/features/output/details.component.js

@@ -126,22 +126,22 @@ function getSourceWorkflowJobDetails () {
     return { link, tooltip };
 }
 
-function getShardDetails () {
+function getSplitJobDetails () {
     const internalLimitDetails = resource.model.get('summary_fields.internal_limit');
 
     if (!internalLimitDetails) {
         return null;
     }
 
-    const shardDetails = resource.model.get('summary_fields.internal_limit.shard');
+    const splitJobDetails = resource.model.get('summary_fields.internal_limit.shard');
 
-    if (!shardDetails) {
+    if (!splitJobDetails) {
         return null;
     }
 
-    const label = strings.get('labels.SHARD_DETAILS');
+    const label = strings.get('labels.SPLIT_JOB');
-    const offset = `${shardDetails.offset} of ${shardDetails.step} shards`;
+    const offset = `${splitJobDetails.offset + 1}/${splitJobDetails.step}`;
-    const tooltip = strings.get('tooltips.SHARD_DETAILS');
+    const tooltip = strings.get('tooltips.SPLIT_JOB_DETAILS');
 
     return { label, offset, tooltip };
 }
@@ -691,7 +691,7 @@ function JobDetailsController (
         vm.jobType = getJobTypeDetails();
         vm.jobTemplate = getJobTemplateDetails();
         vm.sourceWorkflowJob = getSourceWorkflowJobDetails();
-        vm.shardDetails = getShardDetails();
+        vm.splitJobDetails = getSplitJobDetails();
         vm.inventory = getInventoryDetails();
         vm.project = getProjectDetails();
         vm.projectUpdate = getProjectUpdateDetails();

awx/ui/client/features/output/details.partial.html

@@ -151,10 +151,10 @@
     <div class="JobResults-resultRowText">{{ vm.jobType.value }}</div>
 </div>
 
-<!-- SHAAAAAARD -->
+<!-- SPLIT JOB DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.shardDetails">
+<div class="JobResults-resultRow" ng-if="vm.splitJobDetails">
-    <label class="JobResults-resultRowLabel">{{ vm.shardDetails.label }}</label>
+    <label class="JobResults-resultRowLabel">{{ vm.splitJobDetails.label }}</label>
-    <div class="JobResults-resultRowText">{{ vm.shardDetails.offset }}</div>
+    <div class="JobResults-resultRowText">{{ vm.splitJobDetails.offset }}</div>
 </div>
 
 <!-- LAUNCHED BY DETAIL -->

awx/ui/client/features/output/output.strings.js

@@ -23,7 +23,7 @@ function OutputStrings (BaseString) {
         EXTRA_VARS: t.s('Read-only view of extra variables added to the job template'),
         INVENTORY: t.s('View the Inventory'),
         JOB_TEMPLATE: t.s('View the Job Template'),
-        SHARD_DETAILS: t.s('Job is one of several shards from a JT that splits on inventory'),
+        SPLIT_JOB_DETAILS: t.s('Job is one of several from a JT that splits on inventory'),
         PROJECT: t.s('View the Project'),
         PROJECT_UPDATE: t.s('View Project checkout results'),
         SCHEDULE: t.s('View the Schedule'),
@@ -56,7 +56,7 @@ function OutputStrings (BaseString) {
         JOB_EXPLANATION: t.s('Explanation'),
         JOB_TAGS: t.s('Job Tags'),
         JOB_TEMPLATE: t.s('Job Template'),
-        SHARD_DETAILS: t.s('Shard Details'),
+        SPLIT_JOB: t.s('Split Job'),
         JOB_TYPE: t.s('Job Type'),
         LABELS: t.s('Labels'),
         LAUNCHED_BY: t.s('Launched By'),

awx/ui/client/lib/components/list/_index.less

@@ -197,7 +197,7 @@
     color: @at-color-list-row-item-tag-primary;
 }
 
-.at-RowItem-tag--header {
+.at-RowItem-tag--header, .at-RowItem-tag--secondary {
     line-height: inherit;
 }
 

awx/ui/client/lib/components/list/row-item.directive.js

@@ -13,6 +13,7 @@ function atRowItem () {
             headerLink: '@',
             headerState: '@',
             headerTag: '@',
+            secondaryTag: '@',
             status: '@',
             statusTip: '@',
             statusClick: '&?',

awx/ui/client/lib/components/list/row-item.partial.html

@@ -29,6 +29,9 @@
         <div class="at-RowItem-tag at-RowItem-tag--header" ng-if="headerTag">
             {{ headerTag }}
         </div>
+        <div class="at-RowItem-tag at-RowItem-tag--secondary" ng-if="secondaryTag">
+            {{ secondaryTag }}
+        </div>
         <div class="at-RowItem-label" ng-if="labelValue && labelLink">
             <a ng-href="{{ labelLink }}">{{ labelValue }}</a>
         </div>

awx/ui/client/src/templates/job_templates/job-template.form.js

@@ -257,6 +257,19 @@ function(NotificationsList, i18n) {
                     dataPlacement: 'right',
                     control: '<instance-groups-multiselect instance-groups="instance_groups" field-is-disabled="!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)"></instance-groups-multiselect>',
                 },
+                job_shard_count: {
+                    label: i18n._('Job Splitting'),
+                    type: 'number',
+                    integer: true,
+                    min: 1,
+                    default: 1,
+                    spinner: true,
+                    dataTitle: i18n._('Split Job Count'),
+                    dataPlacement: 'right',
+                    dataContainer: 'body',
+                    awPopOver: "<p>" + i18n._("The number of jobs to split into at runtime. Will cause the Job Template to launch a workflow if value is non-zero.") + "</p>",
+                    ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
+                },
                 diff_mode: {
                     label: i18n._('Show Changes'),
                     type: 'toggleSwitch',
@@ -271,20 +284,6 @@ function(NotificationsList, i18n) {
                     },
                     ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                 },
-                job_shard_count: {
-                    label: i18n._('Number of job shards to use'),
-                    type: 'number',
-                    integer: true,
-                    min: 0,
-                    spinner: true,
-                    // 'class': "input-small",
-                    // toggleSource: 'diff_mode',
-                    dataTitle: i18n._('Job Shard Count'),
-                    dataPlacement: 'right',
-                    dataContainer: 'body',
-                    awPopOver: "<p>" + i18n._("If non-zero, split into multiple jobs that run on mutually exclusive slices of the inventory.") + "</p>",
-                    ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
-                },
                 checkbox_group: {
                     label: i18n._('Options'),
                     type: 'checkbox_group',