From 858c389fb0b25982130b261a1121dec9f30f0883 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Sun, 18 Aug 2013 20:20:39 -0400 Subject: [PATCH] Latest inventory hosts tab changes --- awx/ui/static/js/forms/Inventories.js | 44 +++------------- awx/ui/static/js/helpers/Hosts.js | 2 +- awx/ui/static/js/helpers/inventory.js | 8 +-- awx/ui/static/js/helpers/related-paginate.js | 3 +- awx/ui/static/less/ansible-ui.less | 50 +++++++++++-------- awx/ui/static/lib/ansible/directives.js | 15 ++++-- awx/ui/static/lib/ansible/form-generator.js | 37 ++++++++++---- .../static/lib/ansible/generator-helpers.js | 15 +++++- awx/ui/static/lib/ansible/list-generator.js | 10 ++-- awx/ui/templates/ui/index.html | 4 +- 10 files changed, 102 insertions(+), 86 deletions(-) diff --git a/awx/ui/static/js/forms/Inventories.js b/awx/ui/static/js/forms/Inventories.js index 1ffa95cb65..cbb0bcfe91 100644 --- a/awx/ui/static/js/forms/Inventories.js +++ b/awx/ui/static/js/forms/Inventories.js @@ -104,6 +104,7 @@ angular.module('InventoryFormDefinition', []) type: 'treeview', title: "groupTitle", iterator: 'host', + actions: { }, @@ -111,50 +112,19 @@ angular.module('InventoryFormDefinition', []) name: { key: true, label: 'Host Name', - ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')" + ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')", + badgeShow: "\{\{ host.has_active_failures \}\}", + badgeIcon: 'icon-exclamation-sign', + badgeToolTip: 'Most recent job failed', + badgePlacement: 'bottom' }, description: { label: 'Description', ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')" - }, - has_active_failures: { - label: 'Failed jobs?', - showValue: false, - ngClick: "showEvents('\{\{ host.name \}\}', '\{\{ host.related.last_job \}\}')", - ngShow: "\{\{ host.has_active_failures \}\}", - icon: 'icon-exclamation-sign', - "class": 'active-failures-\{\{ host.has_active_failures \}\}', - text: 'View failures', - searchField: 'has_active_failures', - searchType: 'boolean', - searchOptions: [{ name: "No", value: 0 }, { name: "Yes", value: 1 }] } }, - fieldActions: { - edit: { - ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')", - icon: 'icon-edit', - label: 'Edit', - awToolTip: 'Edit host', - 'class': 'btn-default' - }, - "remove": { - ngClick: "removeHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')", - icon: 'icon-minus-sign', - label: 'Remove', - "class": 'btn-success', - ngHide: "group_id === null || group_id === undefined", - awToolTip: 'Remove this host from the group, but leave it as part of the inventory under All Hosts' - }, - "delete": { - ngClick: "deleteHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')", - icon: 'icon-trash', - label: 'Delete', - "class": 'btn-danger', - awToolTip: 'Permanently remove this host from the inventory' - } - } + } } } diff --git a/awx/ui/static/js/helpers/Hosts.js b/awx/ui/static/js/helpers/Hosts.js index d690421115..b2fd2b4b90 100644 --- a/awx/ui/static/js/helpers/Hosts.js +++ b/awx/ui/static/js/helpers/Hosts.js @@ -448,7 +448,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H var relatedSets = { hosts: { url: url, iterator: 'host' } }; RelatedSearchInit({ scope: params.scope, form: InventoryForm, relatedSets: relatedSets }); - RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets }); + RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets, pageSize: 40 }); if (scope['hostFailureFilter']) { // If the user checked 'show only hosts with failures', filter for hosts with failed jobs diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js index 14c60fe97d..29ca4fafef 100644 --- a/awx/ui/static/js/helpers/inventory.js +++ b/awx/ui/static/js/helpers/inventory.js @@ -42,9 +42,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi Rest.get() .success( function(data, status, headers, config) { for (var i=0; i < data.results.length; i++) { - title = data.results[i].name; - title += (data.results[i].has_active_failures) ? ' ' + - '' : ''; + title = data.results[i].name; treeData[0].children.push({ data: { title: title @@ -147,9 +145,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi var title; var filter = (scope.inventoryFailureFilter) ? "has_active_failures=true&" : ""; for (var i=0; i < data.results.length; i++) { - title = data.results[i].name; - title += (data.results[i].has_active_failures) ? ' ' + - '' : ''; + title = data.results[i].name; response.push({ data: { title: title diff --git a/awx/ui/static/js/helpers/related-paginate.js b/awx/ui/static/js/helpers/related-paginate.js index a067aa134d..c72f4bd673 100644 --- a/awx/ui/static/js/helpers/related-paginate.js +++ b/awx/ui/static/js/helpers/related-paginate.js @@ -20,6 +20,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies']) var scope = params.scope; var relatedSets = params.relatedSets; + var pageSize = (params.pageSize) ? params.pageSize : 10; for (var key in relatedSets){ cookieSize = $cookieStore.get(relatedSets[key].iterator + 'PageSize'); @@ -29,7 +30,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies']) } else { scope[relatedSets[key].iterator + 'Page'] = 0; - scope[relatedSets[key].iterator + 'PageSize'] = 10; + scope[relatedSets[key].iterator + 'PageSize'] = pageSize; } } diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index e13c02b517..8d57bb83fe 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -176,6 +176,8 @@ a:hover { text-decoration: none; } + + .site-footer { width: 100%; padding-top: 20px; @@ -184,6 +186,33 @@ a:hover { color: @grey; text-align: center; background-color: @black; + + .inner-container { + max-width: 1170px; + margin: 0 auto; + padding: 0 10px; + } + + a, + a:active, + a:hover, + a:visited { + margin-right: 15px; + font-size: 18px; + color: @grey; + } + + .social { + display: inline-block; + } + + .logo { + display: inline-block; + } + + .logo img { + max-width: 125px; + } } .copyright { @@ -193,28 +222,9 @@ a:hover { text-align: center; } -.site-footer a, -.site-footer a:active, -.site-footer a:hover, -.site-footer a:visited { - margin-right: 15px; - font-size: 18px; - color: @grey; -} -.site-footer .social { - display: inline-block; - margin-left: 50px; -} -.site-footer .logo { - display: inline-block; - margin-right: 35px; -} -.site-footer .logo img { - max-width: 125px; -} .login-header { text-align: center; @@ -602,7 +612,7 @@ input[type="text"].job-successful { } - .tree-badge { + .host-badge { color: @red; font-size: 12px; } diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index 0c9ac0c834..4b62fd4d28 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/awx/ui/static/lib/ansible/directives.js @@ -477,7 +477,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos /* For reasons unknown calling Rest fails. It just dies with no errors or any info */ $.ajax({ - url: url, + url: url + '?order_by=name', headers: { 'Authorization': 'Token ' + token }, dataType: 'json', success: function(data) { @@ -494,11 +494,17 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos html += "data-name=\"" + data.results[i].name + "\" "; html += "data-group-id=\"" + data.results[i].id + "\">"; html += " "; - html += "" + data.results[i].name + "\n"; + html += "" + data.results[i].name + " "; + html += "" + + "\n"; } html = (html !== '') ? "\n" : ""; var compiled = $compile(html)(scope); parent.append(compiled); //append the new list to the parent
  • + if (!scope.$$phase) { + scope.$digest(); + } scope.$emit('childrenLoaded'); }, error: function(data, status) { @@ -532,7 +538,10 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos "data-failures=\"{{ treeData[0].failures }}\" " + "data-groups=\"{{ treeData[0].groups }}\" " + "data-name=\"{{ treeData[0].name }}\" " + - "> {{ treeData[0].name }}" + + "> " + + "{{ treeData[0].name }} " + + "" + + "" + "
    • \n" + "\n"; var compiled = $compile(html)(scope); diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index 8919c4e218..ceddc992dd 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -76,18 +76,18 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) } } - // Remove any lingering tooltip
    elements + // Remove any lingering tooltip and popover
    elements $('.tooltip').each( function(index) { $(this).remove(); }); + $('.popover').each(function(index) { + // remove lingering popover
    . Seems to be a bug in TB3 RC1 + $(this).remove(); + }); if (options.modal) { this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle; //Default title for default modal this.scope.formModalInfo = false //Disable info button for default modal - $('.popover').each(function(index) { - // remove lingering popover
    . Seems to be a bug in TB3 RC1 - $(this).remove(); - }); if (options.modal_selector) { $(options.modal_selector).modal({ show: true, backdrop: 'static', keyboard: true }); $(options.modal_selector).on('shown.bs.modal', function() { @@ -988,9 +988,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) html += "\n"; html += "\n"; html += "\n"; - html += "\n"; + //html += "\n"; html += "\n"; - for (var fld in form.related[itm].fields) { html += "\n"; // Row counter - html += "\n"; + //html += "\n"; // Select checkbox html += ""; - + var cnt = 1; var rfield; var base = (form.related[itm].base) ? form.related[itm].base : itm; @@ -1035,6 +1034,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) } // Row level actions + + /* html += "\n"; + html += "\n"; // Message for when a related collection is empty diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js index 43a2b3c851..ab7127c74e 100644 --- a/awx/ui/static/lib/ansible/generator-helpers.js +++ b/awx/ui/static/lib/ansible/generator-helpers.js @@ -101,7 +101,6 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers']) var field = list['fields'][fld]; var html = ''; - //html += "\n"; diff --git a/awx/ui/static/lib/ansible/list-generator.js b/awx/ui/static/lib/ansible/list-generator.js index bae6ea027b..f48867f26e 100644 --- a/awx/ui/static/lib/ansible/list-generator.js +++ b/awx/ui/static/lib/ansible/list-generator.js @@ -85,18 +85,18 @@ angular.module('ListGenerator', ['GeneratorHelpers']) this.scope[list.name] = null; this.scope[list.iterator] = null; - // Remove any lingering tooltip
    elements + // Remove any lingering tooltip and popover
    elements $('.tooltip').each( function(index) { $(this).remove(); }); + $('.popover').each(function(index) { + // remove lingering popover
    . Seems to be a bug in TB3 RC1 + $(this).remove(); + }); if (options.mode == 'lookup') { // options should include {hdr: , action: } this.scope.lookupHeader = options.hdr; - $('.popover').each(function(index) { - // remove lingering popover
    . Seems to be a bug in TB3 RC1 - $(this).remove(); - }); $('#lookup-modal').modal({ backdrop: 'static', keyboard: true }); $(document).bind('keydown', function(e) { if (e.keyCode === 27) { diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 1658eff0f3..40b3a7d4db 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -323,9 +323,9 @@

    working...

    - +
    -
    +
    ##" + @@ -1018,12 +1017,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies']) html += "
    {{ $index + (" + form.related[itm].iterator + "Page * " + - form.related[itm].iterator + "PageSize) + 1 }}.{{ $index + (" + form.related[itm].iterator + "Page * " + + // form.related[itm].iterator + "PageSize) + 1 }}."; for (action in form.related[itm].fieldActions) { html += "\n"; + html += "\n"; + html += "\n"; + html += "
    \n" : ""; + + // Badge + if (field.badgeIcon) { + if (field.badgeToolTip) { + html += ""; + html += " \n"; + } + else { + html += " \n"; + } + } return html += "