Made the "status" columns throughout the project a static width and nestled it up against the name/id column to match up with the spec. Made all the tooltip hovers appear to the right of the icon since they are all lined up on the left side of the table now.

2026-01-11 10:00:01 -03:30 · 2016-01-28 12:23:35 -05:00 · 2016-01-28 12:23:35 -05:00 · 34185304d6
commit 34185304d6
parent 9c538b5618
12 changed files with 118 additions and 101 deletions
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/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;
--- a/awx/ui/client/legacy-styles/jobs.less
+++ b/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 {

        }
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/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;
+}
--- a/awx/ui/client/src/forms/Inventories.js
+++ b/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'",
--- a/awx/ui/client/src/lists/AllJobs.js
+++ b/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',
-                columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
+                label: '',
+                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
            },
--- a/awx/ui/client/src/lists/CompletedJobs.js
+++ b/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',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                label: '',
+                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',
--- a/awx/ui/client/src/lists/HomeGroups.js
+++ b/awx/ui/client/src/lists/HomeGroups.js
@ -19,7 +19,7 @@ export default
        fields: {
            status: {
                label: 'Status',
-                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: {
-            
+
        }

    });
--- a/awx/ui/client/src/lists/HomeHosts.js
+++ b/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: {
-            
+
        }

    });
--- a/awx/ui/client/src/lists/Inventories.js
+++ b/awx/ui/client/src/lists/Inventories.js
@ -21,8 +21,8 @@ export default

        fields: {
            status: {
-                label: 'Status',
-                columnClass: 'col-md-2 col-sm-2 col-xs-2',
+                label: '',
+                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?',
--- a/awx/ui/client/src/lists/PortalJobs.js
+++ b/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',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
-                // awToolTip: "{{ job.status_tip }}",
-                // awTipPlacement: "top",
+                label: '',
+                columnClass: 'List-staticColumn--smallStatus',
                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"
-            },
-            name: {
-                label: 'Name',
-                columnClass: 'col-md-5 col-xs-5',
-                //ngClick: "viewJobLog(job.id, job.nameHref)",
-                defaultSearchField: true
+                columnClass: "col-lg-4 col-md-4 col-sm-3 xs-hidden"
            }
        },

        actions: { },

        fieldActions: {
+
+            columnClass: 'col-lg-3 col-md-4 col-sm-3 col-xs-4',
+
            job_details: {
                mode: 'all',
                ngClick: "viewJobLog(portal_job.id)",
--- a/awx/ui/client/src/lists/Projects.js
+++ b/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)',
--- a/awx/ui/client/src/lists/ScheduledJobs.js
+++ b/awx/ui/client/src/lists/ScheduledJobs.js
@ -18,10 +18,10 @@ export default

        fields: {
            status: {
-                label: 'Status',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                label: '',
+                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)",