From 0c9a08a861d669a9839640d479443009ec4b946b Mon Sep 17 00:00:00 2001 From: Piotr Kubowicz Date: Sun, 21 Oct 2018 17:47:52 +0200 Subject: [PATCH 1/2] fix: Fix some invalid HTML - double on main page -
outside on matrix page - without a row on main page - add HTML 5 doctype --- DEVELOPER_SETUP.md | 1 + .../api/renderers/html_pact_renderer.rb | 2 +- .../ui/views/index/show-with-tags.haml | 67 ++--- lib/pact_broker/ui/views/index/show.haml | 55 ++-- lib/pact_broker/ui/views/layouts/main.haml | 4 +- lib/pact_broker/ui/views/matrix/show.haml | 252 +++++++++--------- spec/integration/ui/index_spec.rb | 4 +- 7 files changed, 193 insertions(+), 192 deletions(-) diff --git a/DEVELOPER_SETUP.md b/DEVELOPER_SETUP.md index 5c3e38853..762c6ad47 100644 --- a/DEVELOPER_SETUP.md +++ b/DEVELOPER_SETUP.md @@ -8,6 +8,7 @@ * To run the example: cd dev + bundle install bundle exec rackup * The application will be available on `http://localhost:9292` diff --git a/lib/pact_broker/api/renderers/html_pact_renderer.rb b/lib/pact_broker/api/renderers/html_pact_renderer.rb index 011f0a149..304240af9 100644 --- a/lib/pact_broker/api/renderers/html_pact_renderer.rb +++ b/lib/pact_broker/api/renderers/html_pact_renderer.rb @@ -167,4 +167,4 @@ def consumer_contract end end end -end \ No newline at end of file +end diff --git a/lib/pact_broker/ui/views/index/show-with-tags.haml b/lib/pact_broker/ui/views/index/show-with-tags.haml index b0b3d1f4b..3c8fb6da3 100644 --- a/lib/pact_broker/ui/views/index/show-with-tags.haml +++ b/lib/pact_broker/ui/views/index/show-with-tags.haml @@ -18,27 +18,28 @@ Pacts %table.table.table-bordered.table-striped{ id: 'relationships' } %thead - %th.consumer - Consumer - %span.glyphicon.glyphicon-sort.relationships-sort - %th.consumer-version-number - Consumer
Version - %span.glyphicon.glyphicon-sort.relationships-sort - %th.pact{ style: 'width: 40px' } - %th.provider - Provider - %span.glyphicon.glyphicon-sort.relationships-sort - %th.provider-version-number - Provider
Version - %span.glyphicon.glyphicon-sort.relationships-sort - %th - Published - %span.glyphicon.glyphicon-sort.relationships-sort - %th - Webhook
status - %th - Last
verified - %span.glyphicon.glyphicon-sort.relationships-sort + %tr + %th.consumer + Consumer + %span.glyphicon.glyphicon-sort.relationships-sort + %th.consumer-version-number + Consumer
Version + %span.glyphicon.glyphicon-sort.relationships-sort + %th.pact{ style: 'width: 40px' } + %th.provider + Provider + %span.glyphicon.glyphicon-sort.relationships-sort + %th.provider-version-number + Provider
Version + %span.glyphicon.glyphicon-sort.relationships-sort + %th + Published + %span.glyphicon.glyphicon-sort.relationships-sort + %th + Webhook
status + %th + Last
verified + %span.glyphicon.glyphicon-sort.relationships-sort %tbody - index_items.each do | index_item | @@ -84,17 +85,17 @@ %div.relationships-size = index_items.size_label -:javascript - $(function(){ - $("#relationships").tablesorter(); - }); + :javascript + $(function(){ + $("#relationships").tablesorter(); + }); - $(document).ready(function(){ - $("span.pact a").load("/images/doc-text.svg"); - $("span.pact-matrix a").load("/images/doc-matrix.svg"); - $('td[data-toggle="tooltip"]').each(function(index, td){ - //appended tooltip div screws up table if it's appended after a - //td, so need to append it to a div - $(td).tooltip({container: $(td).first()}); + $(document).ready(function(){ + $("span.pact a").load("/images/doc-text.svg"); + $("span.pact-matrix a").load("/images/doc-matrix.svg"); + $('td[data-toggle="tooltip"]').each(function(index, td){ + //appended tooltip div screws up table if it's appended after a + //td, so need to append it to a div + $(td).tooltip({container: $(td).first()}); + }); }); - }); diff --git a/lib/pact_broker/ui/views/index/show.haml b/lib/pact_broker/ui/views/index/show.haml index b7f52885e..5e2fc6053 100644 --- a/lib/pact_broker/ui/views/index/show.haml +++ b/lib/pact_broker/ui/views/index/show.haml @@ -18,22 +18,23 @@ Pacts %table.table.table-bordered.table-striped{ id: 'relationships' } %thead - %th - %th.consumer - Consumer - %span.glyphicon.glyphicon-sort.relationships-sort - %th.pact + %tr + %th + %th.consumer + Consumer + %span.glyphicon.glyphicon-sort.relationships-sort + %th.pact - %th.provider - Provider - %span.glyphicon.glyphicon-sort.relationships-sort - %th - %th - Latest pact
published - %th - Webhook
status - %th - Last
verified + %th.provider + Provider + %span.glyphicon.glyphicon-sort.relationships-sort + %th + %th + Latest pact
published + %th + Webhook
status + %th + Last
verified %tbody - index_items.each do | index_item | @@ -65,17 +66,17 @@ %div.relationships-size = index_items.size_label -:javascript - $(function(){ - $("#relationships").tablesorter(); - }); + :javascript + $(function(){ + $("#relationships").tablesorter(); + }); - $(document).ready(function(){ - $("span.pact a").load("/images/doc-text.svg"); - $("span.pact-matrix a").load("/images/doc-matrix.svg"); - $('td[data-toggle="tooltip"]').each(function(index, td){ - //appended tooltip div screws up table if it's appended after a - //td, so need to append it to a div - $(td).tooltip({container: $(td).first()}); + $(document).ready(function(){ + $("span.pact a").load("/images/doc-text.svg"); + $("span.pact-matrix a").load("/images/doc-matrix.svg"); + $('td[data-toggle="tooltip"]').each(function(index, td){ + //appended tooltip div screws up table if it's appended after a + //td, so need to append it to a div + $(td).tooltip({container: $(td).first()}); + }); }); - }); diff --git a/lib/pact_broker/ui/views/layouts/main.haml b/lib/pact_broker/ui/views/layouts/main.haml index 8ff13fa27..32e8d9b37 100644 --- a/lib/pact_broker/ui/views/layouts/main.haml +++ b/lib/pact_broker/ui/views/layouts/main.haml @@ -1,6 +1,6 @@ + %html %head %title= defined?(title) ? title : "" %link{rel: 'shortcut icon', href: '/images/favicon.ico', type:'image/x-icon'} - %body - = yield \ No newline at end of file + = yield diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml index 5f081ea76..5eb3381e6 100644 --- a/lib/pact_broker/ui/views/matrix/show.haml +++ b/lib/pact_broker/ui/views/matrix/show.haml @@ -7,142 +7,140 @@ %script{type: 'text/javascript', src:'/javascripts/matrix.js'} %script{type: 'text/javascript', src:'/js/bootstrap.min.js'} --# This code is an embarassment. Sorry. Just trying to get as much stuff done in the little time I have. + .container + .navbar-right + %a{href: '/'} + Home + %h1.page-header + = title -.container - .navbar-right - %a{href: '/'} - Home - %h1.page-header - = title + - if defined?(errors) && errors.any? + - errors.each do | error | + %div.alert.alert-danger + = error - - if defined?(errors) && errors.any? - - errors.each do | error | - %div.alert.alert-danger - = error + %form{action: '/matrix', onsubmit:'return onSubmit()'} + - selectors.each_with_index do | selector, index | + .selector + %label{for: "pacticipant#{index}"} + Pacticipant name + %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", value: selector.pacticipant_name} - %form{action: '/matrix', onsubmit:'return onSubmit()'} - - selectors.each_with_index do | selector, index | - .selector - %label{for: "pacticipant#{index}"} - Pacticipant name - %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", value: selector.pacticipant_name} + .input-group - .input-group - - .input-group - %select{ name: "ignorethis#{index}", class: 'version-selectorizor' } - %option{ value: 'specify-all-versions', selected: selector.specify_all_versions } - All versions - %option{ value: 'specify-latest', selected: selector.specify_latest } - Latest version - %option{ value: 'specify-version', selected: selector.specify_version } - Version number ... - %option{ value: 'specify-latest-tag', selected: selector.specify_latest_tag } - Latest version with tag ... - %option{ value: 'specify-all-tagged', selected: selector.specify_all_tagged } - All versions with tag... + .input-group + %select{ name: "ignorethis#{index}", class: 'version-selectorizor' } + %option{ value: 'specify-all-versions', selected: selector.specify_all_versions } + All versions + %option{ value: 'specify-latest', selected: selector.specify_latest } + Latest version + %option{ value: 'specify-version', selected: selector.specify_version } + Version number ... + %option{ value: 'specify-latest-tag', selected: selector.specify_latest_tag } + Latest version with tag ... + %option{ value: 'specify-all-tagged', selected: selector.specify_all_tagged } + All versions with tag... - %input{name: 'q[]version', type: 'text', id: "pacticipant#{index}_version", class: 'version', value: selector.pacticipant_version_number} + %input{name: 'q[]version', type: 'text', id: "pacticipant#{index}_version", class: 'version', value: selector.pacticipant_version_number} - %input{name: 'q[]tag', type: 'text', id: "pacticipant#{index}_tag", class: 'tag', value: selector.tag} + %input{name: 'q[]tag', type: 'text', id: "pacticipant#{index}_tag", class: 'tag', value: selector.tag} - %input{name: 'q[]latest', value: 'true', hidden: true, class: 'latest-flag'} + %input{name: 'q[]latest', value: 'true', hidden: true, class: 'latest-flag'} - %div.top-of-group - .input-group - %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked} - %label{for: 'all_rows'} - Show all results - %div - .input-group - %input{type: 'radio', name: "latestby", class: '', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked} - %label{for: 'cvpv'} - Show latest result for each consumer version/provider version - %div - .input-group - %input{type: 'radio', name: "latestby", class: '', value: 'cvp', id: 'cvp', checked: options.cvp_checked} - %label{for: 'cvp'} - Show latest result for each consumer version/provider - %div.top-of-group - - limit_text = "Note that the 'Show latest...' options are summaries of the 'Show all results' query, and that the limit applies to the underlying query, rather than the number of rows returned in the summary." - %label{for: "limit", "title": limit_text, "data-toggle": "tooltip", "data-placement": "right"} - Limit* - %input{name: 'limit', id: "limit", value: options.limit} - %div.top-of-group - %input{type: 'submit'} + %div.top-of-group + .input-group + %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked} + %label{for: 'all_rows'} + Show all results + %div + .input-group + %input{type: 'radio', name: "latestby", class: '', value: 'cvpv', id: 'cvpv', checked: options.cvpv_checked} + %label{for: 'cvpv'} + Show latest result for each consumer version/provider version + %div + .input-group + %input{type: 'radio', name: "latestby", class: '', value: 'cvp', id: 'cvp', checked: options.cvp_checked} + %label{for: 'cvp'} + Show latest result for each consumer version/provider + %div.top-of-group + - limit_text = "Note that the 'Show latest...' options are summaries of the 'Show all results' query, and that the limit applies to the underlying query, rather than the number of rows returned in the summary." + %label{for: "limit", "title": limit_text, "data-toggle": "tooltip", "data-placement": "right"} + Limit* + %input{name: 'limit', id: "limit", value: options.limit} + %div.top-of-group + %input{type: 'submit'} - %p{style: 'text-align:right'} - = "#{lines.size} rows" - %table.table.table-bordered.table-striped{id: 'matrix'} - %thead - %th.consumer - = "Consumer" - %span.glyphicon.glyphicon-sort.sort - %th.consumer-version - = "Consumer Version" - %span.glyphicon.glyphicon-sort.sort - %th.pact-published - = "Pact Published" - %span.glyphicon.glyphicon-sort.sort - %th.provider - = "Provider" - %span.glyphicon.glyphicon-sort.sort - %th.provider-version - = "Provider Version" - %span.glyphicon.glyphicon-sort.sort - %th.verification-result - Pact verified - %span.glyphicon.glyphicon-sort.sort - %tbody - - lines.each do | line | - %tr - %td.consumer{'data-sort-value' => line.consumer_name} - %a{href: line.consumer_name_url} - = line.consumer_name - %td.consumer-version{'data-sort-value' => line.consumer_version_order} - %div - %a{href: line.consumer_version_number_url} - = line.display_consumer_version_number - - line.latest_consumer_version_tags.each do | tag | - .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} - %a{href: tag.url} - .tag.label.label-primary - = tag.name - - line.other_consumer_version_tags.each do | tag | - .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} - %a{href: tag.url} - .tag.label.label-default - = tag.name - %td.pact-published{'data-sort-value' => line.pact_published_order, "title": line.inherited_verification_message, "data-toggle": "tooltip"} - %a{href: line.pact_publication_date_url} - - if options.all_rows_checked - = "#{line.pact_publication_date} (revision #{line.pact_revision_number})" - - else - = line.pact_publication_date + %p{style: 'text-align:right'} + = "#{lines.size} rows" + %table.table.table-bordered.table-striped{id: 'matrix'} + %thead + %th.consumer + = "Consumer" + %span.glyphicon.glyphicon-sort.sort + %th.consumer-version + = "Consumer Version" + %span.glyphicon.glyphicon-sort.sort + %th.pact-published + = "Pact Published" + %span.glyphicon.glyphicon-sort.sort + %th.provider + = "Provider" + %span.glyphicon.glyphicon-sort.sort + %th.provider-version + = "Provider Version" + %span.glyphicon.glyphicon-sort.sort + %th.verification-result + Pact verified + %span.glyphicon.glyphicon-sort.sort + %tbody + - lines.each do | line | + %tr + %td.consumer{'data-sort-value' => line.consumer_name} + %a{href: line.consumer_name_url} + = line.consumer_name + %td.consumer-version{'data-sort-value' => line.consumer_version_order} + %div + %a{href: line.consumer_version_number_url} + = line.display_consumer_version_number + - line.latest_consumer_version_tags.each do | tag | + .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} + %a{href: tag.url} + .tag.label.label-primary + = tag.name + - line.other_consumer_version_tags.each do | tag | + .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} + %a{href: tag.url} + .tag.label.label-default + = tag.name + %td.pact-published{'data-sort-value' => line.pact_published_order, "title": line.inherited_verification_message, "data-toggle": "tooltip"} + %a{href: line.pact_publication_date_url} + - if options.all_rows_checked + = "#{line.pact_publication_date} (revision #{line.pact_revision_number})" + - else + = line.pact_publication_date - %td.provider{'data-sort-value' => line.provider_name} - %a{href: line.provider_name_url} - = line.provider_name - %td.provider-version{'data-sort-value' => line.provider_version_order} - %div - %a{href: line.provider_version_number_url} - = line.display_provider_version_number - - line.latest_provider_version_tags.each do | tag | - .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} - %a{href: tag.url} - .tag.label.label-primary - = tag.name - - line.other_provider_version_tags.each do | tag | - .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} - %a{href: tag.url} - .tag.label.label-default - = tag.name - %td.verification-result{class: line.verification_status_class, "title": line.inherited_verification_message, "data-toggle": "tooltip"} - %a{href: line.verification_status_url} - - if options.all_rows_checked && line.number - = "#{line.verification_status} (number #{line.number})" - - else - = line.verification_status + %td.provider{'data-sort-value' => line.provider_name} + %a{href: line.provider_name_url} + = line.provider_name + %td.provider-version{'data-sort-value' => line.provider_version_order} + %div + %a{href: line.provider_version_number_url} + = line.display_provider_version_number + - line.latest_provider_version_tags.each do | tag | + .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} + %a{href: tag.url} + .tag.label.label-primary + = tag.name + - line.other_provider_version_tags.each do | tag | + .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"} + %a{href: tag.url} + .tag.label.label-default + = tag.name + %td.verification-result{class: line.verification_status_class, "title": line.inherited_verification_message, "data-toggle": "tooltip"} + %a{href: line.verification_status_url} + - if options.all_rows_checked && line.number + = "#{line.verification_status} (number #{line.number})" + - else + = line.verification_status diff --git a/spec/integration/ui/index_spec.rb b/spec/integration/ui/index_spec.rb index ec6441681..7fa642f78 100644 --- a/spec/integration/ui/index_spec.rb +++ b/spec/integration/ui/index_spec.rb @@ -22,14 +22,14 @@ end it "returns a table of pacts" do - expect(subject.body.scan(' Date: Tue, 23 Oct 2018 19:55:41 +1100 Subject: [PATCH 2/2] style: add missing tr to matrix thead --- lib/pact_broker/ui/views/matrix/show.haml | 37 ++++++++++++----------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml index 5eb3381e6..7190a7eba 100644 --- a/lib/pact_broker/ui/views/matrix/show.haml +++ b/lib/pact_broker/ui/views/matrix/show.haml @@ -76,24 +76,25 @@ = "#{lines.size} rows" %table.table.table-bordered.table-striped{id: 'matrix'} %thead - %th.consumer - = "Consumer" - %span.glyphicon.glyphicon-sort.sort - %th.consumer-version - = "Consumer Version" - %span.glyphicon.glyphicon-sort.sort - %th.pact-published - = "Pact Published" - %span.glyphicon.glyphicon-sort.sort - %th.provider - = "Provider" - %span.glyphicon.glyphicon-sort.sort - %th.provider-version - = "Provider Version" - %span.glyphicon.glyphicon-sort.sort - %th.verification-result - Pact verified - %span.glyphicon.glyphicon-sort.sort + %tr + %th.consumer + = "Consumer" + %span.glyphicon.glyphicon-sort.sort + %th.consumer-version + = "Consumer Version" + %span.glyphicon.glyphicon-sort.sort + %th.pact-published + = "Pact Published" + %span.glyphicon.glyphicon-sort.sort + %th.provider + = "Provider" + %span.glyphicon.glyphicon-sort.sort + %th.provider-version + = "Provider Version" + %span.glyphicon.glyphicon-sort.sort + %th.verification-result + Pact verified + %span.glyphicon.glyphicon-sort.sort %tbody - lines.each do | line | %tr