There is now a single integrated UI that shows all the differences between two inspect reports, using collapsible bullet lists. When a bullet item representing a resource is expanded, it shows a table of resource properties.
Paired-with: Nick Lewis <[email protected]> Signed-off-by: Paul Berry <[email protected]> --- Local-branch: ticket/next/5880 app/controllers/reports_controller.rb | 6 +- app/views/reports/diff.html.haml | 1 - app/views/reports/diff_summary.html.haml | 58 +++++++++++++++++--------- public/images/icons/bullet_green.png | Bin 0 -> 295 bytes public/images/icons/bullet_toggle_minus.png | Bin 0 -> 207 bytes public/images/icons/bullet_toggle_plus.png | Bin 0 -> 209 bytes public/javascripts/application.js | 42 +++++++++++++++++++- public/stylesheets/tables.css | 41 +++++++++++++++++++ 8 files changed, 123 insertions(+), 25 deletions(-) create mode 100755 public/images/icons/bullet_green.png create mode 100755 public/images/icons/bullet_toggle_minus.png create mode 100755 public/images/icons/bullet_toggle_plus.png diff --git a/app/controllers/reports_controller.rb b/app/controllers/reports_controller.rb index f97d85e..fb9a5e9 100644 --- a/app/controllers/reports_controller.rb +++ b/app/controllers/reports_controller.rb @@ -45,12 +45,12 @@ class ReportsController < InheritedResources::Base def diff_summary diff - @resources = {} + @resource_statuses = {:failure => [], :pass => []} @diff.each do |resource, differences| if ! differences.empty? - @resources[resource] = :failure + @resource_statuses[:failure] << resource else - @resources[resource] = :pass + @resource_statuses[:pass] << resource end end end diff --git a/app/views/reports/diff.html.haml b/app/views/reports/diff.html.haml index c0a8529..6e250a4 100644 --- a/app/views/reports/diff.html.haml +++ b/app/views/reports/diff.html.haml @@ -19,4 +19,3 @@ %td= h property %td= h expected %td= h actual -= link_to "Summary", :id => @my_report, :action => "diff_summary", :baseline_id => @baseline_report diff --git a/app/views/reports/diff_summary.html.haml b/app/views/reports/diff_summary.html.haml index e12cb66..b98389b 100644 --- a/app/views/reports/diff_summary.html.haml +++ b/app/views/reports/diff_summary.html.haml @@ -1,20 +1,38 @@ -.header - %h2 - = render 'report_title', :report => @my_report - compared against - = render 'report_title', :report => @baseline_report -%table.inspector - %thead - %tr - %th Resource - %th Status - %tbody - - @resources.each do |resource, status| - %tr{:class => "status #{status}"} - %td - - if status == :failure - = link_to h(resource), :id => @my_report, :action => "diff", :baseline_id => @baseline_report, :anchor => h(resource) - - else - = h(resource) - %td= h status -= link_to "Details", :id => @my_report, :action => "diff", :baseline_id => @baseline_report +#sidebar= render 'shared/node_manager_sidebar' +#main + .header + %h2 + Comparing + = render 'report_title', :report => @my_report + %br + against baseline + = render 'report_title', :report => @baseline_report + .item + %h4 + = pluralize(@resource_statuses[:failure].length, 'Mismatch') + - if @resource_statuses[:failure].present? + %a{ :href => '#', :class => 'expand-all' } (expand all) + - if @resource_statuses[:failure].present? + %dl#baseline-diff-report + - @resource_statuses[:failure].each do |resource| + %dt{:class => cycle( 'odd', 'even' )} + = link_to h(resource), {}, {:class => 'expandable-link collapsed-link'} + %dd.expandable.collapsed + %table + %tr + %th Property + %th Actual + %th Baseline + - @diff[ resource ].each do |property, expected_actual| + %tr + - baseline, actual = expected_actual + %td= h property + %td= h actual + %td= h baseline + %h4= pluralize(@resource_statuses[:pass].length, 'Match') + - if @resource_statuses[:pass].present? + %dl#baseline-diff-report + - @resource_statuses[:pass].each do |resource| + %dt{:class => cycle( 'odd', 'even' )} + %span{:class => 'non-expandable-bullet'} + = h(resource) diff --git a/public/images/icons/bullet_green.png b/public/images/icons/bullet_green.png new file mode 100755 index 0000000000000000000000000000000000000000..058ad261f520490be9d3fc2e322392fdedfd1cbd GIT binary patch literal 295 zcmV+?0oeYDP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUyxk*GpR5;6H z`2YVu10|SY)Bx-TIP9{L0^$by?Uq;VH(Ok_U2E20v&=+_6ayM&Uz`5_(4&L@ci-Rj zf9jb@|1IVkHV|!q{Wi<12Ob{yKlReo|D9(#{x7+*=)d_Cy{kkUV7I~i>ef43{&%10 z`rmr0`TyJtv;LcOX%laN^>UMjsi!CYUwmcZ|JfI2{-1ED=f8fLD)C;hoM$LyF<rmG tv`^=%QLE-v-6G`%twcGg(UeFd0{|By;sdLiru+Z^002ovPDHLkV1gRsgk1mt literal 0 HcmV?d00001 diff --git a/public/images/icons/bullet_toggle_minus.png b/public/images/icons/bullet_toggle_minus.png new file mode 100755 index 0000000000000000000000000000000000000000..b47ce55f685dac56ee9d63f2c3d426bfc4c9e31a GIT binary patch literal 207 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6SkfJR9T^zbpD<_bdI{u9mbgZg z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-$h^mK6y(Kw&{<9vg>(S^W+6Zii9 z|Nhthr~iNb*Z!}6uiN$Dz5neG3a-`baBX8yz1H+_;eX)`ni0%X8XBDc-`=Ph(Uan2 zYsR{H!kvIN--9isvHznRs<i)4|8qXx+(6ND8xzBc$?{dfrt4dQmN9s``njxgN@xNA D;VV%` literal 0 HcmV?d00001 diff --git a/public/images/icons/bullet_toggle_plus.png b/public/images/icons/bullet_toggle_plus.png new file mode 100755 index 0000000000000000000000000000000000000000..9ab4a89664eee1aa81a51ca127f64cb3ac6fa918 GIT binary patch literal 209 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6SkfJR9T^zbpD<_bdI{u9mbgZg z1m~xflqVLYGB~E>C#5QQ<|d}62BjvZR2H60wE-$h_H=O!(Kw&{<9vg>(S^W+6Zii9 z|Nhthr~iNb*Z!}6uiN$Dz5neG3a-`baBX8yz4q@v|B?28{s)#N@CGn3@%_y|zAV9T z66e<&B4?b6oF&azg|C(V&1ZbI_D}pL`}(^FT2yXwG1Ph~$Q@h8mJYOz!PC{xWt~$( F699+YQR)By literal 0 HcmV?d00001 diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 819fdd2..1da37f5 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -102,5 +102,45 @@ jQuery(document).ready(function(J) { J(this).hide(); }); - + init_baseline_diff_report(); }); + +function init_baseline_diff_report() { + jQuery( '.expand-all' ).live( 'click', function() { + jQuery('.expandable-link.collapsed-link').each(toggle_expandable_link); + return false; + }); + jQuery( '.collapse-all' ).live( 'click', function() { + jQuery('.expandable-link').not('.collapsed-link').each(toggle_expandable_link); + return false; + }); + jQuery( '.expandable-link' ).live( 'click', function() { + toggle_expandable_link.call(this); + return false; + }); +} + +function toggle_expandable_link() { + jQuery(this).toggleClass('collapsed-link'); + if (jQuery(this).hasClass('collapsed-link')) { + jQuery(this).parent().next( '.expandable' ) + .addClass('collapsed'); + if (jQuery('.expandable-link').not('.collapsed-link').size() == 0) { + var old_text = jQuery('.collapse-all').text(); + jQuery('.collapse-all') + .removeClass( 'collapse-all' ) + .addClass( 'expand-all' ) + .text( old_text.replace( 'collapse', 'expand' )); + } + } else { + jQuery(this).parent().next( '.expandable' ) + .removeClass('collapsed'); + if (jQuery('.expandable-link.collapsed-link').size() == 0) { + var old_text = jQuery('.expand-all').text(); + jQuery('.expand-all') + .removeClass( 'expand-all' ) + .addClass( 'collapse-all' ) + .text( old_text.replace( 'expand', 'collapse' )); + } + } +} diff --git a/public/stylesheets/tables.css b/public/stylesheets/tables.css index 475fd08..beb4ea2 100644 --- a/public/stylesheets/tables.css +++ b/public/stylesheets/tables.css @@ -115,3 +115,44 @@ table td.empty { color: #999; background: #F8F8F8; } +/* this isn't even really a table anymore */ +#baseline-diff-report { + padding : 1em; + background : #fff; + width : auto; +} +#baseline-diff-report .even { + background: #F5F5F5; +} +#baseline-diff-report .expandable { + margin-bottom : 1em; +} +#baseline-diff-report .collapsed { + display: none; +} +#baseline-diff-report .expandable-link.collapsed-link:before { + content: url('../../images/icons/bullet_toggle_plus.png'); +} +#baseline-diff-report .expandable-link:before { + content: url('../../images/icons/bullet_toggle_minus.png'); +} +#baseline-diff-report .non-expandable-bullet:before { + content: url('../../images/icons/bullet_green.png'); +} +#baseline-diff-report .expandable-link, #baseline-diff-report .non-expandable-bullet { + vertical-align: bottom; +} +#baseline-diff-report table th { + font-weight : bold; +} +#baseline-diff-report table td, +#baseline-diff-report table th { + padding : .25em .5em .15em; +} +.content { + padding : 1em; + background : #fff; +} +.content h4 { + margin-top : 1em; +} -- 1.7.2 -- You received this message because you are subscribed to the Google Groups "Puppet Developers" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/puppet-dev?hl=en.
