implement new style jobs list in ui

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

@@ -151,6 +151,10 @@
     line-height: @at-height-list-row-item;
 }
 
+.at-RowItem-status {
+    margin-right: @at-margin-right-list-row-item-status;
+}
+
 .at-RowItem--isHeader {
     color: @at-color-body-text;
     margin-bottom: @at-margin-bottom-list-header;
@@ -263,6 +267,16 @@
     margin: 2px 20px 0 0;
 }
 
+.at-RowItem--inline {
+    display: inline-flex;
+    margin-right: @at-margin-right-list-row-item-inline;
+
+    .at-RowItem-label {
+        width: auto;
+        margin-right: @at-margin-right-list-row-item-inline-label;
+    }
+}
+
 @media screen and (max-width: @at-breakpoint-compact-list) {
     .at-Row-actions {
         flex-direction: column;
@@ -271,4 +285,14 @@
     .at-RowAction {
         margin: @at-margin-list-row-action-mobile;
     }
+
+    .at-RowItem--inline {
+        display: flex;
+        margin-right: inherit;
+
+        .at-RowItem-label {
+            width: @at-width-list-row-item-label;
+            margin-right: inherit;
+        }
+    }
 }

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

@@ -7,10 +7,13 @@ function atRowItem () {
         transclude: true,
         templateUrl,
         scope: {
+            inline: '@',
             badge: '@',
             headerValue: '@',
             headerLink: '@',
             headerTag: '@',
+            status: '@',
+            statusTip: '@',
             labelValue: '@',
             labelLink: '@',
             labelState: '@',

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

@@ -1,5 +1,13 @@
-<div class="at-RowItem" ng-class="{'at-RowItem--isHeader': headerValue}"
-    ng-show="headerValue || value || (smartStatus && smartStatus.summary_fields.recent_jobs.length) || (tagValues && tagValues.length)">
+<div class="at-RowItem" ng-class="{'at-RowItem--isHeader': headerValue, 'at-RowItem--inline': inline}"
+    ng-show="status || headerValue || value || (smartStatus && smartStatus.summary_fields.recent_jobs.length) || (tagValues && tagValues.length)">
+        <div class="at-RowItem-status" ng-if="status">
+            <a ng-if="headerLink" ng-href="{{ headerLink }}"
+                aw-tool-tip="{{ statusTip }}" aw-tip-watch="statusTip"
+                data-placement="top">
+                    <i class="fa icon-job-{{ status }}"></i>
+            </a>
+            <i ng-if="!headerLink" class="fa icon-job-{{ status }}"></i>
+        </div>
         <div class="at-RowItem-header" ng-if="headerValue && headerLink">
             <a ng-href="{{ headerLink }}">{{ headerValue }}</a>
         </div>
@@ -41,4 +49,4 @@
                 {{ tag.name }}
             </div>
         </div>
-</div>
+</div>

awx/ui/client/lib/models/UnifiedJob.js

@@ -0,0 +1,21 @@
+let Base;
+
+function UnifiedJobModel (method, resource, config) {
+    Base.call(this, 'unified_jobs');
+
+    this.Constructor = UnifiedJobModel;
+
+    return this.create(method, resource, config);
+}
+
+function UnifiedJobModelLoader (BaseModel) {
+    Base = BaseModel;
+
+    return UnifiedJobModel;
+}
+
+UnifiedJobModelLoader.$inject = [
+    'BaseModel'
+];
+
+export default UnifiedJobModelLoader;

awx/ui/client/lib/models/index.js

@@ -23,6 +23,7 @@ import UnifiedJobTemplate from '~models/UnifiedJobTemplate';
 import WorkflowJob from '~models/WorkflowJob';
 import WorkflowJobTemplate from '~models/WorkflowJobTemplate';
 import WorkflowJobTemplateNode from '~models/WorkflowJobTemplateNode';
+import UnifiedJob from '~models/UnifiedJob';
 
 const MODULE_NAME = 'at.lib.models';
 
@@ -49,6 +50,7 @@ angular
     .service('OrganizationModel', Organization)
     .service('ProjectModel', Project)
     .service('ScheduleModel', Schedule)
+    .service('UnifiedJobModel', UnifiedJob)
     .service('UnifiedJobTemplateModel', UnifiedJobTemplate)
     .service('WorkflowJobModel', WorkflowJob)
     .service('WorkflowJobTemplateModel', WorkflowJobTemplate)

awx/ui/client/lib/theme/_variables.less

@@ -262,6 +262,9 @@
 @at-margin-right-list-row-item-tag-icon: 8px;
 @at-margin-left-list-row-item-tag-container: -10px;
 @at-margin-list-row-action-mobile: 10px;
+@at-margin-right-list-row-item-status: @at-space-2x;
+@at-margin-right-list-row-item-inline: @at-space-4x;
+@at-margin-right-list-row-item-inline-label: @at-space-2x;
 
 @at-height-divider: @at-margin-panel;
 @at-height-input: 30px;