Merge pull request #6669 from dmarcoux/improve-pulse-bootstrap

Improvements for the pulse page

src/api/app/controllers/webui/projects/pulse_controller.rb

@@ -2,6 +2,7 @@ module Webui
   module Projects
     class PulseController < WebuiController
       before_action :set_project
+      before_action :set_range
       before_action :set_pulse, if: -> { request.xhr? }
 
       def show
@@ -11,8 +12,11 @@ def show
 
       private
 
-      def set_pulse
+      def set_range
         @range = params[:range] == 'month' ? 'month' : 'week'
+      end
+
+      def set_pulse
         case @range
         when 'month'
           range = 1.month.ago..Date.tomorrow

src/api/app/views/webui2/webui/projects/pulse/_pulse_list.html.haml

@@ -12,81 +12,82 @@
       = render partial: 'pulse_list_comments', locals: { comments: comments }
 
   .col
-    .card
-      .card-header
-        Requests
-      .card-body
-        - if requests.any?
-          .row
-            .col
-              .progress
-                -# haml-lint:disable InlineStyles
-                - requests_by_percentage.each do |state, percentage|
-                  %div{ title: "#{requests_by_state[state]} #{state} requests",
-                        class: "progress-bar progress-state-#{state}",
-                        'aria-valuemax': '100', 'aria-valuemin': '0', 'aria-valuenow': percentage,
-                        role: 'progressbar', style: "width: #{percentage}%" }
-                -# haml-lint:enable InlineStyles
-              %p
-                = link_to('#pulse-requests') do
-                  = requests_by_state.values.sum
-                  active requests
-          .row
-            - requests_by_state.each_key do |state|
-              .col.border.text-center
-                %p.fa-3x
-                  %i{ class: "fa #{request_bootstrap_icon(state)} request-state-#{state}" }
-                %p
-                  = pluralize(requests_by_state[state], 'request')
-                  %br
-                  in #{state}
-        - else
-          = link_to(project_requests_path(project)) do
-            There have been no requests send to this project.
+    = render partial: 'pulse_list_requests_box', locals: { project: project,
+                                                           requests: requests,
+                                                           requests_by_percentage: requests_by_percentage,
+                                                           requests_by_state: requests_by_state }
+
 .row
   .col
-    %h5#pulse-packages
-      Package Changes
-    %hr
-    %ul.list-unstyled
-      - (commits + new_packages + deleted_packages + updates).sort_by(&:datetime).reverse_each do |log_entry|
-        %li
-          = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
-
-    %h5#pulse-project
-      Project Changes
-    %hr
-    %ul.list-unstyled
-      - project_changes.each do |log_entry|
-        %li
-          = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
+    - package_changes = commits + new_packages + deleted_packages + updates
+    - if package_changes.present?
+      %h5#pulse-packages
+        = link_to('.collapse-package-changes', aria: { controls: 'collapse-package-changes', expanded: 'true' },
+                  'data-toggle' => 'collapse', role: 'button') do
+          Package Changes
+          %small
+            %span.collapser (Hide)
+            %span.expander (Show)
+      %hr
+      .collapse.show.collapse-package-changes
+        %ul.list-unstyled
+          - package_changes.sort_by(&:datetime).reverse_each do |log_entry|
+            %li
+              = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
 
-    %h5#pulse-builds
-      Builds
-      %small
-        (in the last 24 hours)
-    %hr
-    %ul.list-unstyled
-      - builds.each do |log_entry|
-        %li
-          = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
+    - if project_changes.present?
+      %h5#pulse-project
+        = link_to('.collapse-project-changes', aria: { controls: 'collapse-project-changes', expanded: 'true' },
+                  'data-toggle' => 'collapse', role: 'button') do
+          Project Changes
+          %small
+            %span.collapser (Hide)
+            %span.expander (Show)
+      %hr
+      .collapse.show.collapse-project-changes
+        %ul.list-unstyled
+          - project_changes.each do |log_entry|
+            %li
+              = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
 
-    %h5#pulse-collaboration
-      Collaboration
-    %hr
-    %ul.list-unstyled
-      - (branches + comments).sort_by(&:datetime).reverse_each.each do |log_entry|
-        %li
-          = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
+    - if builds.present?
+      %h5#pulse-builds
+        = link_to('.collapse-builds', aria: { controls: 'collapse-builds', expanded: 'true' }, 'data-toggle' => 'collapse', role: 'button') do
+          Builds
+          %small
+            (in the last 24 hours)
+            %span.collapser (Hide)
+            %span.expander (Show)
+      %hr
+      .collapse.show.collapse-builds
+        %ul.list-unstyled
+          - builds.each do |log_entry|
+            %li
+              = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
 
-    %h5#pulse-requests
-      Requests
-      - if requests.count > 30
-        %small.text-muted
-          ( last 30,
-          = link_to(project_requests_path(project)) do
-            view all
-          )
-    %hr
-    = render partial: 'pulse_list_requests', locals: { requests: requests }
+    - collaboration = branches + comments
+    - if collaboration.present?
+      %h5#pulse-collaboration
+        = link_to('.collapse-collaboration', aria: { controls: 'collapse-collaboration', expanded: 'true' },
+                  'data-toggle' => 'collapse', role: 'button') do
+          Collaboration
+          %small
+            %span.collapser (Hide)
+            %span.expander (Show)
+      %hr
+      .collapse.show.collapse-collaboration
+        %ul.list-unstyled
+          - collaboration.sort_by(&:datetime).reverse_each.each do |log_entry|
+            %li
+              = render partial: 'pulse_list_entry', locals: { log_entry: log_entry, project: project }
 
+    - if requests.present?
+      %h5#pulse-requests
+        = link_to('.collapse-requests', aria: { controls: 'collapse-requests', expanded: 'true' }, 'data-toggle' => 'collapse', role: 'button') do
+          Requests
+          %small
+            %span.collapser (Hide)
+            %span.expander (Show)
+      %hr
+      .collapse.show.collapse-requests
+        = render partial: 'pulse_list_requests', locals: { requests: requests }

src/api/app/views/webui2/webui/projects/pulse/_pulse_list_changes.html.haml

@@ -1,5 +1,6 @@
 - if project_changes.any?
   And the project setup has been changed
-  #{pluralize(project_changes.count, 'time')}.
+  %b
+    #{pluralize(project_changes.count, 'time')}.
 - else
   And no one touched the project setup.

src/api/app/views/webui2/webui/projects/pulse/_pulse_list_comments.html.haml

@@ -1,7 +1,8 @@
 - if comments.any?
   And
   - people = comments.group(:user_name).count
-  = pluralize(people.count, 'person')
+  %b
+    = pluralize(people.count, 'person')
   added
   = link_to('#pulse-collaboration') do
     = pluralize(comments.count, 'comment')

src/api/app/views/webui2/webui/projects/pulse/_pulse_list_commits.html.haml

@@ -8,11 +8,13 @@
   to packages in this project.
   - if updates.any?
     Out of those commits,
-    = pluralize(updates.count, 'was a', plural: 'were')
-    version #{'update'.pluralize(updates.count)}.
+    %b
+      = pluralize(updates.count, 'was a', plural: 'were')
+      version #{'update'.pluralize(updates.count)}.
   - top_committer = commits.group(:user_name).count.max_by { |_, v| v }
   %span{ title: "with #{pluralize(top_committer.second, 'commit')}" }
-    = top_committer.first
+    %b
+      = top_committer.first
     was the busiest commiter, hooray!
 - else
   no one committed anything.

src/api/app/views/webui2/webui/projects/pulse/_pulse_list_requests.html.haml

@@ -4,9 +4,8 @@
       %span{ class: "badge progress-state-#{request.state} text-light" }
         = request.state.to_s
     %dd.col-11
-      = link_to(request_show_path(request.number)) do
+      = link_to(request_show_path(request.number), title: request.description) do
         = request.number
-      (#{truncate(request.description)})
       - if request.request_history_elements.any?
         = request.request_history_elements.last.description.gsub('Request', '')
       - else

src/api/app/views/webui2/webui/projects/pulse/_pulse_list_requests_box.html.haml

@@ -0,0 +1,31 @@
+.card
+  .card-header
+    Requests
+  .card-body
+    - if requests.any?
+      .row
+        .col
+          .progress
+            -# haml-lint:disable InlineStyles
+            - requests_by_percentage.each do |state, percentage|
+              %div{ title: "#{requests_by_state[state]} #{state} requests",
+                    class: "progress-bar progress-state-#{state}",
+                    'aria-valuemax': '100', 'aria-valuemin': '0', 'aria-valuenow': percentage,
+                    role: 'progressbar', style: "width: #{percentage}%" }
+            -# haml-lint:enable InlineStyles
+          %p
+            = link_to('#pulse-requests') do
+              = requests_by_state.values.sum
+              active requests
+      .row
+        - requests_by_state.each_key do |state|
+          .col.border.text-center
+            %p.fa-3x
+              %i{ class: "fa #{request_bootstrap_icon(state)} request-state-#{state}" }
+            %p
+              = pluralize(requests_by_state[state], 'request')
+              %br
+              in #{state}
+    - else
+      = link_to(project_requests_path(project)) do
+        There have been no requests send to this project.

src/api/app/views/webui2/webui/projects/pulse/show.html.haml

@@ -7,7 +7,7 @@
     .row
       .col-8.mb-3
         %h3#range-header
-          = pulse_period('month')
+          = pulse_period(@range)
       .col
         .dropdown.float-right
           %button.btn.btn-secondary.dropdown-toggle#period-dropdown{ 'aria-expanded': 'false',
@@ -16,7 +16,7 @@
                                                                      type: 'button' }
             Period: One
             %span#range-text
-              Week
+              = @range.capitalize
           .dropdown-menu{ 'aria-labelledby': 'dropdownMenuButton' }
             %h6.dropdown-header
               Period to display:
@@ -25,20 +25,21 @@
             = link_to(project_pulse_path(@project, range: 'month'), remote: true, type: :json, class: 'dropdown-item') do
               One Month
     .row
-      .col#pulse
+      .col.spinner
         .row
           .col.text-center
             %i.fas.fa-spinner.fa-spin.fa-3x
-
+      .col.d-none#pulse
 
 :javascript
   $.ajax({
-    url: "#{project_pulse_path(@project)}",
+    url: "#{project_pulse_path(@project, range: @range)}",
     type: "get",
     dataType: 'script'
   });
+
   $(".dropdown-item").click(function() {
-    $("#pulse").html('<div class="fa-3x"><i class="fas fa-spinner fa-spin"></i></div>')
+    $('#pulse, .col.spinner').toggleClass('d-none');
     // FIXME: No idea why this is needed, maybe remote links are not covered by bootstrap?
     $('#period-dropdown').dropdown('toggle')
   });

src/api/app/views/webui2/webui/projects/pulse/show.js.erb

@@ -1,14 +1,15 @@
 $('#range-header').html("<%= escape_javascript(pulse_period(@range)) %>");
 $('#range-text').html("<%= @range.titleize %>");
+$('#pulse, .col.spinner').toggleClass('d-none');
 $('#pulse').html("<%= escape_javascript render partial: 'pulse_list', locals: { requests_by_percentage: @requests_by_percentage,
-                                                                               requests_by_state: @requests_by_state,
-                                                                               project: @project,
-                                                                               commits: @commits,
-                                                                               new_packages: @new_packages,
-                                                                               deleted_packages: @deleted_packages,
-                                                                               updates: @updates,
-                                                                               project_changes: @project_changes,
-                                                                               builds: @builds,
-                                                                               branches: @branches,
-                                                                               comments: @comments,
-                                                                               requests: @requests } %>");
+                                                                                requests_by_state: @requests_by_state,
+                                                                                project: @project,
+                                                                                commits: @commits,
+                                                                                new_packages: @new_packages,
+                                                                                deleted_packages: @deleted_packages,
+                                                                                updates: @updates,
+                                                                                project_changes: @project_changes,
+                                                                                builds: @builds,
+                                                                                branches: @branches,
+                                                                                comments: @comments,
+                                                                                requests: @requests } %>");