Merge pull request #8264 from DavidKang/bootstrap/merge-architectures

Replace bento view by bootstrap view for architectures

src/api/app/controllers/webui/architectures_controller.rb

@@ -23,7 +23,7 @@ def update
     end
 
     respond_to do |format|
-      format.js { render 'webui2/webui/architectures/update', status: status }
+      format.js { render 'webui/architectures/update', status: status }
     end
   end
 
@@ -35,13 +35,13 @@ def bulk_update_availability
         ::Configuration.write_to_backend
         format.js do
           flash.now[:success] = 'Updated availability for all architectures.'
-          render 'webui2/webui/architectures/bulk_update_availability'
+          render 'webui/architectures/bulk_update_availability'
         end
         format.html { redirect_to architectures_path, success: 'Architectures successfully updated.' }
       else
         format.js do
           flash.now[:error] = 'Updating architecture availability failed.'
-          render 'webui2/webui/architectures/bulk_update_availability', status: :unprocessable_entity
+          render 'webui/architectures/bulk_update_availability', status: :unprocessable_entity
         end
         format.html { redirect_back(fallback_location: root_path, error: 'Not all architectures could be saved') }
       end

src/api/app/views/webui/architectures/index.html.haml

@@ -1,24 +1,34 @@
-- @pagetitle = "Architecture Configuration"
-- @crumb_list = [@pagetitle]
-- @layouttype = 'custom'
-.grid_16.alpha.omega.box.box-shadow
+:ruby
+  @pagetitle = 'Architectures'
+
+.card.mb-3
   = render partial: 'webui/configuration/tabs'
-  .grid_16.alpha
+  .card-body#architectures
     %h3
       Architecture Availability
     %p
       Toggle the availability of architectures.
-    = form_tag(bulk_update_availability_path, method: 'patch' ) do
-      %table
-        %tr
-          %th Architecture
-          %th Availability
-        = fields_for :archs do |arch_fields|
-          - @architectures.each do |arch|
-            %tr
-              %td
-                = arch.name
-              %td
-                = arch_fields.check_box(arch.name, { checked: arch.available })
-      %p
-        = submit_tag 'Update'
+    .form-group
+      = button_tag('All', type: 'submit', class: 'btn btn-outline-primary filter-button mr-1', value: true,
+        data: { remote: true, url: bulk_update_availability_path(archs: { all: true }), method: :patch })
+      = button_tag('None', type: 'submit', class: 'btn btn-outline-primary filter-button mr-1', value: false,
+        data: { remote: true, url: bulk_update_availability_path(archs: { all: false }), method: :patch })
+      %i.fas.fa-spinner.invisible
+    .form-group.d-flex.flex-wrap
+      - @architectures.each do |arch|
+        .custom-control.custom-checkbox.custom-control-inline
+          = check_box_tag('available', true, arch.available, class: 'custom-control-input', id: "arch-#{arch}",
+            data: { remote: true, url: architecture_path(arch), method: :patch })
+          %label.custom-control-label.pr-2{ for: "arch-#{arch}" }
+            = arch.name
+          %i.fas.fa-spinner.invisible
+
+- content_for :ready_function do
+  :plain
+    $('#architectures').on('ajax:before ajax:complete', '.custom-control-input, .filter-button', function() {
+      $(this).prop('disabled', function(_, previousValue) { return !previousValue; });
+      $(this).siblings('i.fa-spinner').toggleClass('fa-spin invisible');
+    });
+    $('.filter-button').on('ajax:success', function() {
+      $('#architectures').find('input').prop('checked', $(this).val() === 'true');
+    });