From 34185304d6b9441361ab85d852450f18d23cd4bb Mon Sep 17 00:00:00 2001 From: Michael Abashian Date: Thu, 28 Jan 2016 12:23:35 -0500 Subject: [PATCH] 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. --- awx/ui/client/legacy-styles/ansible-ui.less | 6 ++- awx/ui/client/legacy-styles/jobs.less | 4 -- awx/ui/client/legacy-styles/lists.less | 14 +++++++ awx/ui/client/src/forms/Inventories.js | 2 +- awx/ui/client/src/lists/AllJobs.js | 43 ++++++++++----------- awx/ui/client/src/lists/CompletedJobs.js | 43 +++++++++++---------- awx/ui/client/src/lists/HomeGroups.js | 15 ++++--- awx/ui/client/src/lists/HomeHosts.js | 16 ++++---- awx/ui/client/src/lists/Inventories.js | 12 +++--- awx/ui/client/src/lists/PortalJobs.js | 42 +++++++++----------- awx/ui/client/src/lists/Projects.js | 14 +++---- awx/ui/client/src/lists/ScheduledJobs.js | 8 ++-- 12 files changed, 118 insertions(+), 101 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 41076d3dc9..5a825ba5c6 100644 --- 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; diff --git a/awx/ui/client/legacy-styles/jobs.less b/awx/ui/client/legacy-styles/jobs.less index bc1fe5cbc5..05f4fd8d44 100644 --- 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 { } diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less index 55b3242fa1..22d259e535 100644 --- 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; +} diff --git a/awx/ui/client/src/forms/Inventories.js b/awx/ui/client/src/forms/Inventories.js index 1c5567c503..746c8a49a9 100644 --- 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'", diff --git a/awx/ui/client/src/lists/AllJobs.js b/awx/ui/client/src/lists/AllJobs.js index eb33c23744..3a99817c99 100644 --- 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 }, diff --git a/awx/ui/client/src/lists/CompletedJobs.js b/awx/ui/client/src/lists/CompletedJobs.js index ec7ba5d62b..4ed0d96dbf 100644 --- 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', diff --git a/awx/ui/client/src/lists/HomeGroups.js b/awx/ui/client/src/lists/HomeGroups.js index bcb242d132..77f296390d 100644 --- 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: { - + } }); diff --git a/awx/ui/client/src/lists/HomeHosts.js b/awx/ui/client/src/lists/HomeHosts.js index c3cfcf0ccd..9d36d7dc2c 100644 --- 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: { - + } }); diff --git a/awx/ui/client/src/lists/Inventories.js b/awx/ui/client/src/lists/Inventories.js index 25770b8a01..75c02ad7c3 100644 --- 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?', diff --git a/awx/ui/client/src/lists/PortalJobs.js b/awx/ui/client/src/lists/PortalJobs.js index 07fa2af312..645eb90e32 100644 --- 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)", diff --git a/awx/ui/client/src/lists/Projects.js b/awx/ui/client/src/lists/Projects.js index aeeb484fa5..cd76d48dcd 100644 --- 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)', diff --git a/awx/ui/client/src/lists/ScheduledJobs.js b/awx/ui/client/src/lists/ScheduledJobs.js index 82ad8b558a..07ab0256c0 100644 --- 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)",