Merge pull request #736 from mabashian/status-icon-with-name

Shifted status column to the left side of all tables

awx/ui/client/legacy-styles/ansible-ui.less

@@ -1406,7 +1406,7 @@ input[type="checkbox"].checkbox-no-label {
 
   #inventories_table i[class*="icon-job-"],
   #home_groups_table i[class*="icon-job-"] {
-      margin-left: 10px;
+      margin-left: 5px;
   }
 
   .selected {
@@ -1990,6 +1990,10 @@ button.dropdown-toggle,
     border-left-color: #848992;
 }
 
+.tooltip.right .tooltip-arrow {
+    border-right-color: #848992;
+}
+
 .tooltip.Tooltip.fade.bottom.in {
     opacity: 1;
     padding-top: 4px;

awx/ui/client/legacy-styles/jobs.less

@@ -17,10 +17,6 @@
     }
 
     .job-list {
-        thead >tr >th, .page-row {
-            font-size: 12px;
-            color: #666;
-        }
         .pagination li {
 
         }

awx/ui/client/legacy-styles/lists.less

@@ -271,3 +271,17 @@ table, tbody {
 .List-searchRow {
     margin-bottom: 20px;
 }
+
+.List-staticColumn--smallStatus {
+    width: 25px;
+    padding-right: 0px!important;
+}
+
+.List-staticColumn--mediumStatus {
+    width: 51px;
+    padding-right: 0px!important;
+}
+
+.List-staticColumnAdjacent {
+    padding-left: 10px!important;
+}

awx/ui/client/src/forms/Inventories.js

@@ -98,7 +98,7 @@ export default
                     fields: {
                       smart_status: {
                           label: 'Status',
-                          // columnClass: 'col-md-2 col-sm-2 col-xs-2',
+                          columnClass: 'List-tableCell',
                           searchable: false,
                           nosort: true,
                           ngInclude: "'/static/partials/scan-job-template-smart-status.html'",

awx/ui/client/src/lists/AllJobs.js

@@ -17,30 +17,13 @@ export default
         well: false,
 
         fields: {
-            id: {
-                label: 'ID',
-                ngClick:"viewJobLog(all_job.id)",
-                searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
-                awToolTip: "{{ all_job.status_tip }}",
-                dataPlacement: 'top'
-            },
-            name: {
-                label: 'Name',
-                columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-3',
-                ngClick: "viewJobLog(all_job.id, all_job.nameHref)",
-                defaultSearchField: true,
-                awToolTip: "{{ all_job.name | sanitize }}",
-                dataPlacement: 'top'
-            },
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
+                columnClass: 'List-staticColumn--smallStatus',
                 awToolTip: "{{ all_job.status_tip }}",
-                awTipPlacement: "top",
+                awTipPlacement: "right",
                 dataTitle: "{{ all_job.status_popover_title }}",
                 icon: 'icon-job-{{ all_job.status }}',
-                alt_text: "{{all_job.status_label}}",
                 iconOnly: true,
                 ngClick:"viewJobLog(all_job.id)",
                 searchable: true,
@@ -53,11 +36,27 @@ export default
                     { name: "Canceled", value: "canceled" }
                 ]
             },
+            id: {
+                label: 'ID',
+                ngClick:"viewJobLog(all_job.id)",
+                searchType: 'int',
+                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumnAdjacent',
+                awToolTip: "{{ all_job.status_tip }}",
+                dataPlacement: 'top'
+            },
+            name: {
+                label: 'Name',
+                columnClass: 'col-lg-3 col-md-3 col-sm-4 col-xs-6',
+                ngClick: "viewJobLog(all_job.id, all_job.nameHref)",
+                defaultSearchField: true,
+                awToolTip: "{{ all_job.name | sanitize }}",
+                dataPlacement: 'top'
+            },
             type: {
                 label: 'Type',
                 ngBind: 'all_job.type_label',
                 link: false,
-                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
+                columnClass: "col-lg-3 col-md-3 hidden-sm hidden-xs",
                 columnShow: "showJobType",
                 searchable: true,
                 searchType: 'select',
@@ -68,7 +67,7 @@ export default
                 noLink: true,
                 searchable: false,
                 filter: "longDate",
-                columnClass: "col-lg-2 col-md-2 col-sm-2 hidden-xs",
+                columnClass: "col-lg-3 col-md-3 col-sm-3 hidden-xs",
                 key: true,
                 desc: true
             },

awx/ui/client/src/lists/CompletedJobs.js

@@ -19,19 +19,11 @@ export default
         well: false,
 
         fields: {
-            id: {
-                label: 'ID',
-                ngClick:"viewJobLog(completed_job.id)",
-                searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
-                awToolTip: "{{ completed_job.status_tip }}",
-                dataPlacement: 'top'
-            },
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'List-staticColumn--smallStatus',
                 awToolTip: "{{ completed_job.status_tip }}",
-                awTipPlacement: "top",
+                awTipPlacement: "right",
                 dataTitle: "{{ completed_job.status_popover_title }}",
                 icon: 'icon-job-{{ completed_job.status }}',
                 iconOnly: true,
@@ -46,12 +38,28 @@ export default
                     { name: "Canceled", value: "canceled" }
                 ]
             },
+            id: {
+                label: 'ID',
+                ngClick:"viewJobLog(completed_job.id)",
+                searchType: 'int',
+                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumnAdjacent',
+                awToolTip: "{{ completed_job.status_tip }}",
+                dataPlacement: 'top'
+            },
+            name: {
+                label: 'Name',
+                columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-6',
+                ngClick: "viewJobLog(completed_job.id, completed_job.nameHref)",
+                defaultSearchField: true,
+                awToolTip: "{{ completed_job.name | sanitize }}",
+                dataPlacement: 'top'
+            },
             finished: {
                 label: 'Finished',
                 noLink: true,
                 searchable: false,
                 filter: "longDate",
-                columnClass: "col-lg-2 col-md-2 hidden-xs",
+                columnClass: "col-lg-3 col-md-3 col-sm-3 hidden-xs",
                 key: true,
                 desc: true
             },
@@ -65,14 +73,6 @@ export default
                 searchType: 'select',
                 searchOptions: []    // populated via GetChoices() in controller
             },
-            name: {
-                label: 'Name',
-                columnClass: 'col-md-3 col-sm-4 col-xs-4',
-                ngClick: "viewJobLog(completed_job.id, completed_job.nameHref)",
-                defaultSearchField: true,
-                awToolTip: "{{ completed_job.name | sanitize }}",
-                dataPlacement: 'top'
-            },
             failed: {
                 label: 'Job failed?',
                 searchSingleValue: true,
@@ -86,6 +86,9 @@ export default
         actions: { },
 
         fieldActions: {
+
+            columnClass: 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
+
             stdout: {
                 mode: 'all',
                 href: '/#/jobs/{{ completed_job.id }}/stdout',

awx/ui/client/src/lists/HomeGroups.js

@@ -18,8 +18,8 @@ export default
 
         fields: {
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'List-staticColumn--mediumStatus',
                 searchable: false,
                 nosort: true,
                 ngClick: "null",
@@ -28,13 +28,13 @@ export default
                     icon: "{{ 'icon-cloud-' + group.status_class }}",
                     awToolTip: "{{ group.status_tooltip }}",
                     dataTipWatch: "group.launch_tooltip",
-                    awTipPlacement: "top",
+                    awTipPlacement: "right",
                     ngClick: "viewUpdateStatus(group.id)",
                     ngClass: "group.launch_class"
                 },{
                     icon: "{{ 'icon-job-' + group.hosts_status_class }}",
                     awToolTip: "{{ group.hosts_status_tip }}",
-                    awTipPlacement: "top",
+                    awTipPlacement: "right",
                     ngClick: "showHostSummary($event, group.id)",
                     ngClass: ""
                 }]
@@ -43,13 +43,13 @@ export default
                 key: true,
                 label: 'Group',
                 ngClick: "editGroup(group.id, group.inventory)",
-                columnClass: 'col-lg-4 col-md3 col-sm-3 col-xs-6 ellipsis'
+                columnClass: 'col-lg-6 col-md-5 col-sm-5 col-xs-8 ellipsis List-staticColumnAdjacent'
             },
             inventory_name: {
                 label: 'Inventory',
                 sourceModel: 'inventory',
                 sourceField: 'name',
-                columnClass: 'col-lg-3 col-md2 col-sm-2 hidden-xs elllipsis',
+                columnClass: 'col-lg-4 col-md-5 col-sm-3 hidden-xs elllipsis',
                 linkTo: "{{ '/#/inventories/' + group.inventory + '/' }}"
             },
             source: {
@@ -117,6 +117,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-lg-2 col-md-2 col-sm-4 col-xs-4',
+
             /*
             sync_status: {
                 mode: 'all',
@@ -161,7 +164,7 @@ export default
         },
 
         actions: {
-            
+
         }
 
     });

awx/ui/client/src/lists/HomeHosts.js

@@ -19,23 +19,22 @@ export default
 
         fields: {
             status: {
-                label: "Status",
+                label: "",
                 iconOnly: true,
                 icon: "{{ 'icon-job-' + host.active_failures }}",
                 awToolTip: "{{ host.badgeToolTip }}",
-                awTipPlacement: "top",
+                awTipPlacement: "right",
                 dataPlacement: "right",
                 awPopOver: "{{ host.job_status_html }}",
-                dataTitle: "{{ host.job_status_title }}",
                 ngClick:"bob",
-                columnClass: "col-md-1 col-sm-2 col-xs-3",
+                columnClass: "List-staticColumn--smallStatus",
                 searchable: false,
                 nosort: true
             },
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: 'col-lg-4 col-md3 col-sm-3 col-xs-7 ellipsis',
+                columnClass: 'col-lg-5 col-md-5 col-sm-5 col-xs-8 ellipsis List-staticColumnAdjacent',
                 ngClass: "{ 'host-disabled-label': !host.enabled }",
                 ngClick: "editHost(host.id)"
             },
@@ -43,7 +42,7 @@ export default
                 label: 'Inventory',
                 sourceModel: 'inventory',
                 sourceField: 'name',
-                columnClass: 'col-lg-3 col-md2 col-sm-2 hidden-xs elllipsis',
+                columnClass: 'col-lg-5 col-md-4 col-sm-4 hidden-xs elllipsis',
                 linkTo: "{{ '/#/inventories/' + host.inventory }}"
             },
             enabled: {
@@ -74,6 +73,9 @@ export default
         },
 
         fieldActions: {
+
+            columnClass: 'col-lg-2 col-md-3 col-sm-3 col-xs-4',
+
             /*active_failures: {
                 //label: 'Job Status',
                 //ngHref: "\{\{'/#/hosts/' + host.id + '/job_host_summaries/?inventory=' + inventory_id \}\}",
@@ -94,7 +96,7 @@ export default
         },
 
         actions: {
-            
+
         }
 
     });

awx/ui/client/src/lists/Inventories.js

@@ -21,8 +21,8 @@ export default
 
         fields: {
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'List-staticColumn--mediumStatus',
                 searchable: false,
                 nosort: true,
                 ngClick: "null",
@@ -31,13 +31,13 @@ export default
                 icons: [{
                     icon: "{{ 'icon-cloud-' + inventory.syncStatus }}",
                     awToolTip: "{{ inventory.syncTip }}",
-                    awTipPlacement: "top",
+                    awTipPlacement: "right",
                     ngClick: "showGroupSummary($event, inventory.id)",
                     ngClass: "inventory.launch_class"
                 },{
                     icon: "{{ 'icon-job-' + inventory.hostsStatus }}",
                     awToolTip: "{{ inventory.hostsTip }}",
-                    awTipPlacement: "top",
+                    awTipPlacement: "right",
                     ngClick: "showHostSummary($event, inventory.id)",
                     ngClass: ""
                 }]
@@ -45,7 +45,7 @@ export default
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: 'col-md-4 col-sm-6 col-xs-6',
+                columnClass: 'col-md-5 col-sm-5 col-xs-8 List-staticColumnAdjacent',
                 modalColumnClass: 'col-md-8',
                 linkTo: '/#/inventories/{{inventory.id}}/manage'
             },
@@ -56,7 +56,7 @@ export default
                 sourceModel: 'organization',
                 sourceField: 'name',
                 excludeModal: true,
-                columnClass: 'col-md-4 hidden-sm hidden-xs'
+                columnClass: 'col-md-5 col-sm-3 hidden-xs'
             },
             has_inventory_sources: {
                 label: 'Cloud sourced?',

awx/ui/client/src/lists/PortalJobs.js

@@ -18,26 +18,12 @@ export default
         well: true,
 
         fields: {
-            id: {
-                label: 'ID',
-                //ngClick:"viewJobLog(job.id)",
-                key: true,
-                noLink: true, //undocumented: 'key' above will automatically made the fields a link, but 'noLink' will override this setting
-                desc: true,
-                searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
-                // awToolTip: "{{ job.status_tip }}",
-                // awTipPlacement: "top",
-            },
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'List-staticColumn--smallStatus',
-                // awToolTip: "{{ job.status_tip }}",
-                // awTipPlacement: "top",
                 dataTitle: "{{ portal_job.status_popover_title }}",
                 icon: 'icon-job-{{ portal_job.status }}',
                 iconOnly: true,
-                // ngClick:"viewJobLog(job.id)",
                 searchable: true,
                 nosort: true,
                 searchType: 'select',
@@ -48,24 +34,34 @@ export default
                     { name: "Canceled", value: "canceled" }
                 ]
             },
+            id: {
+                label: 'ID',
+                key: true,
+                noLink: true, //undocumented: 'key' above will automatically made the fields a link, but 'noLink' will override this setting
+                desc: true,
+                searchType: 'int',
+                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumnAdjacent',
+            },
+            name: {
+                label: 'Name',
+                columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-6',
+                defaultSearchField: true
+            },
             started: {
                 label: 'Started',
                 noLink: true,
                 searchable: false,
                 filter: "longDate",
-                columnClass: "col-lg-3 col-md-3 hidden-sm"
+                columnClass: "col-lg-4 col-md-4 col-sm-3 xs-hidden"
-            },
-            name: {
-                label: 'Name',
-                columnClass: 'col-md-5 col-xs-5',
-                //ngClick: "viewJobLog(job.id, job.nameHref)",
-                defaultSearchField: true
             }
         },
 
         actions: { },
 
         fieldActions: {
+
+            columnClass: 'col-lg-3 col-md-4 col-sm-3 col-xs-4',
+
             job_details: {
                 mode: 'all',
                 ngClick: "viewJobLog(portal_job.id)",

awx/ui/client/src/lists/Projects.js

@@ -21,14 +21,14 @@ export default
 
         fields: {
             status: {
-                label: 'Status',
+                label: '',
                 iconOnly: true,
                 ngClick: 'showSCMStatus(project.id)',
                 awToolTip: '{{ project.statusTip }}',
                 dataTipWatch: 'project.statusTip',
-                dataPlacement: 'top',
+                dataPlacement: 'right',
                 icon: "icon-job-{{ project.statusIcon }}",
-                columnClass: "col-lg-1 col-md-1 col-sm-2 col-xs-2",
+                columnClass: "List-staticColumn--smallStatus",
                 nosort: true,
                 searchType: 'select',
                 searchOptions: [],  //set in the controller
@@ -37,7 +37,7 @@ export default
             name: {
                 key: true,
                 label: 'Name',
-                columnClass: "col-lg-5 col-md-4 col-sm-6 col-xs-6",
+                columnClass: "col-lg-4 col-md-4 col-sm-5 col-xs-7 List-staticColumnAdjacent",
                 modalColumnClass: 'col-md-8'
             },
             scm_type: {
@@ -45,12 +45,12 @@ export default
                 searchType: 'select',
                 searchOptions: [], // will be set by Options call to projects resource
                 excludeModal: true,
-                columnClass: 'col-lg-2 col-md-2 hidden-sm hidden-xs'
+                columnClass: 'col-lg-3 col-md-2 col-sm-3 hidden-xs'
             },
             last_updated: {
                 label: 'Last Updated',
                 filter: "longDate",
-                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
+                columnClass: "col-lg-3 col-md-3 hidden-sm hidden-xs",
                 excludeModal: true,
                 searchable: false,
                 nosort: true
@@ -77,7 +77,7 @@ export default
 
         fieldActions: {
 
-            columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-4',
+            columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-5',
 
             scm_update: {
                 ngClick: 'SCMUpdate(project.id, $event)',

awx/ui/client/src/lists/ScheduledJobs.js

@@ -18,10 +18,10 @@ export default
 
         fields: {
             status: {
-                label: 'Status',
+                label: '',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'List-staticColumn--smallStatus',
                 awToolTip: "{{ schedule.status_tip }}",
-                awTipPlacement: "top",
+                awTipPlacement: "right",
                 icon: 'icon-job-{{ schedule.status }}',
                 iconOnly: true,
                 ngClick: "toggleSchedule($event, schedule.id)",
@@ -30,7 +30,7 @@ export default
             },
             name: {
                 label: 'Name',
-                columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
+                columnClass: 'col-lg-4 col-md-5 col-sm-5 col-xs-7 List-staticColumnAdjacent',
                 sourceModel: 'unified_job_template',
                 sourceField: 'name',
                 ngClick: "editSchedule(schedule.id)",