From 9279d8eed47e3a18b804172e4c1d1c4b46879034 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 4 Jul 2018 12:33:50 +0200 Subject: [PATCH] Checks listing design & responsivity --- app/frontend/packs/application.js | 1 + app/frontend/scss/_variables.scss | 10 ++++++++ app/frontend/scss/index.scss | 1 + app/helpers/application_helper.rb | 4 +++ app/helpers/checks_helper.rb | 34 +++++++++++++++++++------ app/models/check.rb | 4 +-- app/views/checks/_filters.html.erb | 40 ++++++++++++++++++++++++++++++ app/views/checks/_table.html.erb | 21 ++++++++++------ app/views/checks/index.html.erb | 15 ++++------- config/locales/en.yml | 19 ++++++++++++++ config/locales/fr.yml | 19 ++++++++++++++ db/seeds.rb | 2 +- 12 files changed, 143 insertions(+), 27 deletions(-) create mode 100644 app/frontend/scss/_variables.scss create mode 100644 app/views/checks/_filters.html.erb diff --git a/app/frontend/packs/application.js b/app/frontend/packs/application.js index 6a32480..4ae8b7a 100644 --- a/app/frontend/packs/application.js +++ b/app/frontend/packs/application.js @@ -12,6 +12,7 @@ import Turbolinks from 'turbolinks'; import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/dropdown'; +import 'bootstrap/js/dist/button'; import '../scss'; diff --git a/app/frontend/scss/_variables.scss b/app/frontend/scss/_variables.scss new file mode 100644 index 0000000..822dfbf --- /dev/null +++ b/app/frontend/scss/_variables.scss @@ -0,0 +1,10 @@ +$input-placeholder-color: #adb5bd; +$enable-rounded: false; +$theme-colors: ( + "primary": #259EDB, + "secondary": #565554, + "success": #42935C, + "warning": #F6AE2D, + "danger": #E94F37, + "info": #2E86AB, +); diff --git a/app/frontend/scss/index.scss b/app/frontend/scss/index.scss index 2577ff8..4b15d76 100644 --- a/app/frontend/scss/index.scss +++ b/app/frontend/scss/index.scss @@ -1,3 +1,4 @@ +@import '_variables'; @import '~bootstrap/scss/bootstrap'; @import 'layout'; @import 'icons'; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 53fa2d6..3d6fea9 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,4 +1,8 @@ module ApplicationHelper + def format_date(time, format: :long) + l(time.utc.to_date, format: format) + end + def format_utc(time, format: :default) l(time.utc, format: format) end diff --git a/app/helpers/checks_helper.rb b/app/helpers/checks_helper.rb index 84bf8e0..654671d 100644 --- a/app/helpers/checks_helper.rb +++ b/app/helpers/checks_helper.rb @@ -1,15 +1,11 @@ module ChecksHelper - def check_kind_label(check) - check.kind.upcase - end - def check_row_class(check) expiry_date = check.domain_expires_at return unless expiry_date.present? - return "table-danger" if expiry_date <= 2.weeks.from_now - return "table-warning" if expiry_date <= 30.days.from_now + return "table-danger" if expiry_date <= 3.days.from_now + return "table-warning" if expiry_date < 1.month.from_now end def checks_sort_links(field) @@ -19,7 +15,7 @@ module ChecksHelper sort = "#{field}_#{direction}" icon = direction == :asc ? "chevron-up" : "chevron-down" - html = Octicons::Octicon.new(icon).to_svg.html_safe + html = Octicons::Octicon.new(icon, class: "mx-1").to_svg.html_safe filter_params = current_criterias.merge(sort: sort) link_to_unless sort == current_sort_str, html, checks_path(filter_params) @@ -29,4 +25,28 @@ module ChecksHelper def current_criterias current_scopes.merge(sort: params[:sort]) end + + def scoped_with?(scope) + name, value = scope.first + scope_value = current_scopes[name] + scope_value = scope_value.to_sym if scope_value.respond_to?(:to_sym) + + scope_value == value + end + + def check_button_criterias(scope) + if scoped_with?(scope) + current_criterias.except(scope.keys.first) + else + current_criterias.merge(scope) + end + end + + def check_button_scope_class(scope = nil) + "btn btn-sm " << if scope && scoped_with?(scope) + "btn-info active" + else + "btn-outline-info" + end + end end diff --git a/app/models/check.rb b/app/models/check.rb index a54def2..5074339 100644 --- a/app/models/check.rb +++ b/app/models/check.rb @@ -61,8 +61,8 @@ class Check < ApplicationRecord scope :kind, ->(kind) { where(kind: kind) } scope :by_domain, ->(domain) { where("domain LIKE ?", "%#{domain}%") } scope :recurrent_failures, -> { - where("last_run_at IS NOT NULL"). - where("last_success_at IS NULL OR last_success_at <= DATE_SUB(last_run_at, INTERVAL 72 HOUR)") + where("last_run_at IS NOT NULL") + .where("last_success_at IS NULL OR last_success_at <= DATE_SUB(last_run_at, INTERVAL 3 DAY)") } def self.default_sort diff --git a/app/views/checks/_filters.html.erb b/app/views/checks/_filters.html.erb new file mode 100644 index 0000000..1c84746 --- /dev/null +++ b/app/views/checks/_filters.html.erb @@ -0,0 +1,40 @@ +
+ +
+
+ <% Check.kinds.keys.map(&:to_sym).each do |kind_name| %> + <%= link_to t(".kind_#{kind_name}"), + checks_path(check_button_criterias(kind: kind_name)), + class: check_button_scope_class(kind: kind_name) %> + <% end %> +
+ + <%= link_to t(".with_error"), + checks_path(check_button_criterias(recurrent_failures: true)), + class: check_button_scope_class(recurrent_failures: true) %> +
+ +
+ <%= form_tag(checks_path, method: :get) do %> +
+
+
+ <%= search_field_tag :by_domain, current_scopes[:by_domain], class: "form-control form-control-sm", placeholder: ".com, example.org, …" %> +
+ <%= button_tag Octicons::Octicon.new("search").to_svg.html_safe, class: "btn btn-sm btn-outline-secondary" %> +
+
+ + <%- current_criterias.except(:by_domain).compact.each_pair do |name, value| %> + <%= hidden_field_tag name, value%> + <% end %> +
+ +
+ <%= link_to Octicons::Octicon.new("x").to_svg.html_safe, checks_path, class: "btn btn-danger btn-sm btn-outline-danger" %> +
+
+ + <% end %> +
+
diff --git a/app/views/checks/_table.html.erb b/app/views/checks/_table.html.erb index 94531a1..074cd57 100644 --- a/app/views/checks/_table.html.erb +++ b/app/views/checks/_table.html.erb @@ -1,32 +1,39 @@ -
+
- + <% checks.each do |check| %> -
<%= t(".domain") %> - <%== checks_sort_links(:domain) %> + + <%== checks_sort_links(:domain) %> + <%= t(".expiry_date") %> - <%== checks_sort_links(:domain_expires_at) %> + + <%== checks_sort_links(:domain_expires_at) %> + <%= t(".edit") %><%= t(".edit") %>
- <%= check_kind_label(check) %> + <%= t(".kind_labels.#{check.kind}") %> <%= check.domain %> - <%= format_utc(check.domain_expires_at) if check.domain_expires_at.present? %> + <% if check.domain_expires_at.present? %> + <%= content_tag :span, format_date(check.domain_expires_at), class: "d-none d-md-inline" %> + <%= content_tag :span, format_date(check.domain_expires_at, format: :short), class: "d-inline d-md-none" %> + <% end %> + <%= link_to edit_check_path(check) do %> <%== Octicons::Octicon.new("pencil").to_svg %> <% end %> diff --git a/app/views/checks/index.html.erb b/app/views/checks/index.html.erb index b6ce6b3..642c41d 100644 --- a/app/views/checks/index.html.erb +++ b/app/views/checks/index.html.erb @@ -1,19 +1,14 @@ -
+
-
+
<% if @checks.empty? && current_scopes.blank? %>
<%= t(".no_check_yet_html", new_domain_path: new_check_path(kind: :domain), new_ssl_path: new_check_path(kind: :ssl)) %>
<% else %> -

<%= t(".title") %>

- <%= link_to("Domains", checks_path(current_criterias.merge(kind: :domain))) %> - <%= link_to("SSL", checks_path(current_criterias.merge(kind: :ssl))) %> - <%= link_to("In error", checks_path(current_criterias.merge(recurrent_failures: true))) %> - <%= form_tag(checks_path(current_scopes), method: :get) do %> - <%= search_field_tag :by_domain, current_scopes[:by_domain] %> - <%= button_tag t(".filter") %> - <% end %> +

<%= t(".title") %>

+ + <%= render "filters" %> <% if @checks.any? %> <%= render "table", checks: @checks %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 5bde33f..a17b4ec 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -12,6 +12,11 @@ en: check: past: "can't be in the future" + date: + formats: + short: "%-d, %b %Y" + long: "%A, %B %d, %Y" + devise: registrations: new: @@ -64,6 +69,7 @@ en: checks: index: title: List of your checks + no_matching_check: "No checks match your filters." no_check_yet_html: | You have not set up a check yet. Please add a domain @@ -80,6 +86,11 @@ en: saved: "Your check has been saved." invalid: "Please check the form." + filters: + kind_domain: Domain + kind_ssl: SSL + with_error: Error + form: generic: domain: Domain @@ -90,3 +101,11 @@ en: notifications_hint: | Receive notifications to warn you when our system detects that the expiration date is coming. The time is set in number of days. + + table: + domain: Name + expiry_date: Expiration + edit: Edit + kind_labels: + domain: Domain + ssl: SSL diff --git a/config/locales/fr.yml b/config/locales/fr.yml index c2a85e4..aa2c3b7 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -47,6 +47,11 @@ fr: short: "%d %b %H:%M" pm: pm + date: + formats: + short: "%d/%m/%Y" + long: "%A %d %B %Y" + devise: registrations: new: @@ -99,6 +104,7 @@ fr: checks: index: title: "Liste de vos vérifications" + no_matching_check: "Aucune vérification ne correspond à vos critères." no_check_yet_html: | Vous n'avez pas encore créé de vérification. Vous pouvez en ajouter pour un domaine @@ -115,6 +121,11 @@ fr: saved: La vérification est enregistrée. invalid: Veuillez vérifier le formulaire. + filters: + kind_domain: Domaine + kind_ssl: SSL + with_error: En erreur + form: generic: domain: Domaine @@ -125,3 +136,11 @@ fr: notifications_hint: | Recevez des notifications pour vous avertir lorsque notre système détecte que la date d'expiration approche. Le délai est indiqué ennombre de jours. + + table: + domain: Nom + expiry_date: "Expiration" + edit: Modifier + kind_labels: + domain: Domaine + ssl: SSL diff --git a/db/seeds.rb b/db/seeds.rb index 560b288..e81814b 100644 --- a/db/seeds.rb +++ b/db/seeds.rb @@ -76,7 +76,7 @@ ssl_check_chexpire_org_error = Check.create!( user: [user1, user2].sample, kind: Check.kinds.keys.sample, domain: "#{word}.#{ext}", - domain_expires_at: rand(1..300).days.from_now, + domain_expires_at: rand(8..300).days.from_now, domain_updated_at: rand(1..300).days.ago, domain_created_at: rand(301..3000).days.ago, )