Skip to content

Commit

Permalink
feat: update UI
Browse files Browse the repository at this point in the history
  • Loading branch information
bethesque committed Sep 10, 2021
1 parent cef5e13 commit 0ba5eda
Show file tree
Hide file tree
Showing 19 changed files with 388 additions and 104 deletions.
6 changes: 3 additions & 3 deletions lib/pact/doc/markdown/consumer_contract_renderer.rb
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ def call
attr_reader :consumer_contract

def title
"### A pact between #{consumer_name} and #{provider_name}\n\n"
"# A pact between #{consumer_name} and #{provider_name}\n\n"
end

def interaction_renderers
@interaction_renderers ||= sorted_interactions.collect{|interaction| InteractionRenderer.new interaction, @consumer_contract}
end

def summaries_title
"#### Requests from #{consumer_name} to #{provider_name}\n\n"
"### Requests from #{consumer_name} to #{provider_name}\n\n"
end

def interactions_title
"#### Interactions\n\n"
"### Interactions\n\n"
end

def summaries
Expand Down
2 changes: 1 addition & 1 deletion lib/pact_broker/api/pact_broker_urls.rb
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ def matrix_url_from_params params, base_url = ""
end

def group_url(pacticipant_name, base_url = "")
"#{base_url}/groups/#{url_encode(pacticipant_name)}"
"#{base_url}/pacticipants/#{url_encode(pacticipant_name)}"
end

def environments_url(base_url = "")
Expand Down
26 changes: 15 additions & 11 deletions lib/pact_broker/api/renderers/html_pact_renderer.rb
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ def call
"<html>
<head>#{head}</head>
<body>
#{pact_metadata}#{html}
#{breadcrumbs}#{pact_metadata}#{html}
</body>
</html>"
end
Expand All @@ -39,10 +39,10 @@ def call
def head
"<title>#{title}</title>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/github.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/pact.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/github-json.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/material-menu.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/pact.css'>
<link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/jquery-confirm.min.css'>
<script src='#{base_url}/javascripts/highlight.pack.js'></script>
<script src='#{base_url}/javascripts/jquery-3.5.1.min.js'></script>
Expand All @@ -53,6 +53,17 @@ def head
<script>hljs.initHighlightingOnLoad();</script>"
end

def breadcrumbs
"
<nav aria-label=\"breadcrumb\">
<ol class=\"breadcrumb\" style=\"margin:0; margin-bottom:1rem\">
<li class=\"breadcrumb-item\" style=\"margin:0;\"><a href=\"#{base_url}/\">Home</a></li>
<li class=\"breadcrumb-item active\" aria-current=\"page\" style=\"margin:0;\">Pact</li>
</ol>
</nav>
"
end

def pact_metadata
"<div class='pact-metadata'>
<ul>
Expand All @@ -66,19 +77,12 @@ def pact_metadata
<span class='name' title='#{published_date}'>Date published:</span>
<span class='value' title='#{published_date}'>#{published_date_in_words}</span>
</li>
<li>
<a href=\"#{json_url}\">View in API Browser</a>
</li>
<li>
<a href=\"#{matrix_url}\">View Matrix</a>
</li>
<li>
<a href=\"#{base_url}/\">Home</a>
</li>
<li>
<span data-consumer-name=\"#{consumer_name}\"
data-provider-name=\"#{provider_name}\"
data-consumer-version-number=\"#{consumer_version_number}\"
data-api-browser-url=\"#{json_url}\"
data-matrix-url=\"#{matrix_url}\"
data-pact-url=\"#{pact_url}\"
class='more-options kebab-horizontal'
aria-hidden='true'></span>
Expand Down
2 changes: 2 additions & 0 deletions lib/pact_broker/locale/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ en:
response_body_hidden: For security purposes, the response details are not logged. To enable response logging, configure the webhook_host_whitelist property. See %{base_url}/doc/webhooks#whitelist for more information.
index:
title: Pacts
dashboard:
title: "%{consumer_name} / %{provider_name}"
matrix:
pre_verified: This pact was "pre-verified" as it has identical content to a previously verified pact.
webhooks:
Expand Down
8 changes: 7 additions & 1 deletion lib/pact_broker/ui/app.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
require "pact_broker/ui/controllers/matrix"
require "pact_broker/ui/controllers/can_i_deploy"
require "pact_broker/ui/controllers/error_test"
require "pact_broker/ui/controllers/dashboard"
require "pact_broker/doc/controllers/app"

module PactBroker
Expand All @@ -30,7 +31,7 @@ def initialize
run PactBroker::UI::Controllers::Index
end

map "/groups" do
map "/pacticipants" do
run PactBroker::UI::Controllers::Groups
end

Expand Down Expand Up @@ -58,6 +59,11 @@ def initialize
run PactBroker::UI::Controllers::ErrorTest
end

map "/dashboard" do
use PathInfoFixer
run PactBroker::UI::Controllers::Dashboard
end

map "/" do
use PathInfoFixer
run PactBroker::UI::Controllers::Index
Expand Down
63 changes: 63 additions & 0 deletions lib/pact_broker/ui/controllers/dashboard.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
require "pact_broker/ui/controllers/base_controller"
require "pact_broker/ui/view_models/index_items"
require "haml"

module PactBroker
module UI
module Controllers
class Dashboard < Base
include PactBroker::Services

get "/provider/:provider_name/consumer/:consumer_name" do
set_headers
tags = true
page_number = params[:page]&.to_i || 1
# Make page size smaller for data intensive query
page_size = params[:pageSize]&.to_i || 30
options = {
tags: tags,
page_number: page_number,
page_size: page_size,
consumer_name: params[:consumer_name],
provider_name: params[:provider_name]
}.compact
error_messages = []

consumer = pacticipant_service.find_pacticipant_by_name(params[:consumer_name])
provider = pacticipant_service.find_pacticipant_by_name(params[:provider_name])

index_items = if consumer && provider
index_service.find_index_items(options)
else
[]
end

view_index_items = ViewDomain::IndexItems.new(index_items, base_url: base_url)

page = :'dashboard/show'
locals = {
title: PactBroker::Messages.message("messages.dashboard.title", consumer_name: params[:consumer_name], provider_name: params[:provider_name]),
index_items: view_index_items,
page_number: page_number,
page_size: page_size,
pagination_record_count: view_index_items.pagination_record_count,
current_page_size: view_index_items.size,
base_url: base_url,
errors: error_messages,
tags: tags
}

haml page, { locals: locals, layout: :'layouts/main', escape_html: true }
end

private

def set_headers
response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
response.headers["Pragma"] = "no-cache"
response.headers["Expires"] = "0"
end
end
end
end
end
28 changes: 22 additions & 6 deletions lib/pact_broker/ui/controllers/groups.rb
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,33 @@ class Groups < Base
get ":name" do
pacticipant = pacticipant_service.find_pacticipant_by_name(params[:name])
erb :'groups/show.html', {
locals: {
csv_path: "#{base_url}/groups/#{ERB::Util.url_encode(params[:name])}.csv",
pacticipant_name: params[:name],
repository_url: pacticipant&.repository_url,
base_url: base_url
}
locals: locals(tab: "properties")
}, {
layout: "layouts/main",
}
end

get ":name/network" do

erb :'groups/show.html', {
locals: locals(tab: "network")
}, {
layout: "layouts/main",
}
end

def locals(overrides)
pacticipant = pacticipant_service.find_pacticipant_by_name(params[:name])
{
csv_path: "#{base_url}/groups/#{ERB::Util.url_encode(params[:name])}.csv",
pacticipant_name: params[:name],
repository_url: pacticipant&.repository_url,
base_url: base_url,
pacticipant: pacticipant,
properties_url: "#{base_url}/pacticipants/#{ERB::Util.url_encode(params[:name])}",
network_url: "#{base_url}/pacticipants/#{ERB::Util.url_encode(params[:name])}/network"
}.merge(overrides)
end
end
end
end
Expand Down
2 changes: 1 addition & 1 deletion lib/pact_broker/ui/helpers/url_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ module URLHelper
extend self

def group_url pacticipant_name, base_url = ""
"#{base_url}/groups/#{ERB::Util.url_encode(pacticipant_name)}"
"#{base_url}/pacticipants/#{ERB::Util.url_encode(pacticipant_name)}"
end

def matrix_url consumer_name, provider_name, base_url = ""
Expand Down
139 changes: 139 additions & 0 deletions lib/pact_broker/ui/views/dashboard/show.haml
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
%body
!= render :haml, :'index/_css_and_js', :layout => false
.container
!= render :haml, :'index/_dashboard_navbar', :layout => false, locals: {tag_toggle: nil, base_url: base_url}
%h1.page-header
= title

- unless errors.blank?
- errors.each do | error |
%div.alert.alert-danger
= error

%table.table.table-bordered.table-striped{ id: 'relationships' }
%thead
%tr
%th.consumer-version-number
Consumer<br>Version
%span.sort-icon.relationships-sort
%th.pact{ style: 'width: 40px' }
%th.provider-version-number
Provider<br>Version
%span.sort-icon.relationships-sort
%th
Published
%span.sort-icon.relationships-sort
%th
Webhook<br>status
%th
Last<br>verified
%span.sort-icon.relationships-sort
%th
%tbody

- index_items.each do | index_item |
%tr{'data-pact-versions-url': index_item.pact_versions_url,
'data-consumer-name': index_item.consumer_name,
'data-provider-name': index_item.provider_name,
'data-integration-url': index_item.integration_url,
'data-tagged-pacts': index_item.tagged_pacts}
%td.consumer-version-number{"data-text": index_item.consumer_version_order}
%div.clippable{"data-clippable": index_item.consumer_version_number}
= index_item.display_consumer_version_number
- if index_item.display_consumer_version_number
%button.clippy.invisible{ title: "Copy to clipboard" }
%span.copy-icon
- index_item.consumer_version_branches.each do | branch_name |
%div{"class": "tag badge badge-dark"}
= "branch: " + branch_name
- index_item.consumer_version_latest_tag_names.each do | tag_name |
.tag.badge.badge-primary
= "tag: " + tag_name
- index_item.consumer_version_environment_names.each do | environment_name |
.tag.badge.badge-success
= "env: " + environment_name
- if index_item.latest?
.tag.badge.bg-light
latest
%td.pact
%span.pact
%a{ href: index_item.pact_url, title: "View pact" }
%span.pact-matrix
%a{ href: index_item.pact_matrix_url, title: "View pact matrix" }
%td.provider-version-number
%div.clippable{"data-clippable": index_item.provider_version_number}
= index_item.display_provider_version_number
- if index_item.display_provider_version_number
%button.clippy.invisible{ title: "Copy to clipboard" }
%span.copy-icon
- index_item.provider_version_branches.each do | branch_name |
%div{"class": "tag badge badge-dark"}
= "branch: " + branch_name
- index_item.provider_version_latest_tag_names.each do | tag_name |
.tag.badge.badge-primary
= "tag: " + tag_name
- index_item.provider_version_environment_names.each do | environment_name |
.tag.badge.badge-success
= "env: " + environment_name
%td{"data-text": index_item.publication_date_of_latest_pact_order}
= index_item.publication_date_of_latest_pact.gsub("about ", "")
%td{ class: "table-#{index_item.webhook_status}" }
- if index_item.show_webhook_status?
%a{ href: index_item.webhook_url }
= index_item.webhook_label

%td{ class: "table-#{index_item.pseudo_branch_verification_status}", title: index_item.verification_tooltip, "data-toggle": "tooltip", "data-placement": "left" }
%div
= index_item.last_verified_date.gsub("about ", "")
- if index_item.warning?
%span.warning-icon{ 'aria-hidden': true }
%td
%span.integration-settings.kebab-horizontal{ 'aria-hidden': true }

%div.pagination.text-center

- pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }
!= render :haml, :'index/_pagination', :layout => false, locals: pagination_locals

:javascript
$(function(){
$("#relationships").tablesorter();
});

$(document).ready(function(){
initializeClipper(".clippable");

$("span.pact a").load("#{base_url}/images/doc-text.svg");
$("span.pact-matrix a").load("#{base_url}/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()});
});
});

$(".reset-search").on("click", function() {
const url = new URL(window.location)
url.searchParams.delete('search')
window.location = url.toString();
})

$(".submit-search").on("click", function() {
search = $("#search").val();
const url = new URL(window.location)
url.searchParams.set('search', search)
window.location = url.toString();
})

$(".search").keypress(function(event) {
const enterKeyCode = 13;

const key = event.which;
if (key === enterKeyCode) {
event.preventDefault();
search = $("#search").val();
const url = new URL(window.location)
url.searchParams.set('search', search)
window.location = url.toString();
}
})
Loading

0 comments on commit 0ba5eda

Please sign in to comment.