diff --git a/src/api/app/views/webui2/webui/project/_monitor_control.html.haml b/src/api/app/views/webui2/webui/project/_monitor_control.html.haml
index 272717a1e40b..e6e2750be5c2 100644
--- a/src/api/app/views/webui2/webui/project/_monitor_control.html.haml
+++ b/src/api/app/views/webui2/webui/project/_monitor_control.html.haml
@@ -9,8 +9,8 @@
           %button.btn.btn-link.monitor-no-filter-link No filter
           - status.each do |status|
             .custom-control.custom-checkbox.dropdown-item.ml-2
-              %input.custom-control-input{ type: :checkbox, id: "#{status}-checkbox", checked: false, value: status }
-              %label.custom-control-label{ for: "#{status}-checkbox" }
+              %input.custom-control-input{ type: :checkbox, id: "#{status}-checkbox".parameterize, checked: false, value: status }
+              %label.custom-control-label{ for: "#{status}-checkbox".parameterize }
                 = status
       %span.dropdown#project-monitor-architectures-dropdown
         %button.btn.btn-outline-secondary.dropdown-toggle{ data: { toggle: :dropdown }, type: :button }
@@ -20,8 +20,8 @@
           %button.btn.btn-link.monitor-no-filter-link No filter
           - architectures.each do |architecture|
             .custom-control.custom-checkbox.dropdown-item.ml-2
-              %input.custom-control-input{ type: :checkbox, id: "#{architecture}-checkbox", checked: false, value: architecture }
-              %label.custom-control-label{ for: "#{architecture}-checkbox" }
+              %input.custom-control-input{ type: :checkbox, id: "#{architecture}-checkbox".parameterize, checked: false, value: architecture }
+              %label.custom-control-label{ for: "#{architecture}-checkbox".parameterize }
                 = architecture
       %span.dropdown#project-monitor-repositories-dropdown
         %button.btn.btn-outline-secondary.dropdown-toggle{ data: { toggle: :dropdown }, type: :button }
@@ -31,8 +31,8 @@
           %button.btn.btn-link.monitor-no-filter-link No filter
           - repositories.each do |repository|
             .custom-control.custom-checkbox.dropdown-item.ml-2
-              %input.custom-control-input{ type: :checkbox, id: "#{repository}-checkbox", checked: false, value: repository }
-              %label.custom-control-label{ for: "#{repository}-checkbox" }
+              %input.custom-control-input{ type: :checkbox, id: "#{repository}-checkbox".parameterize, checked: false, value: repository }
+              %label.custom-control-label{ for: "#{repository}-checkbox".parameterize }
                 = repository
       %button.btn.btn-outline-secondary{ data: { toggle: 'modal', target: '#build-monitor-legend' }, title: 'Build status legend' }
         Legend
diff --git a/src/api/spec/bootstrap/features/webui/projects/monitor_spec.rb b/src/api/spec/bootstrap/features/webui/projects/monitor_spec.rb
new file mode 100644
index 000000000000..badb91542b0c
--- /dev/null
+++ b/src/api/spec/bootstrap/features/webui/projects/monitor_spec.rb
@@ -0,0 +1,102 @@
+require 'browser_helper'
+require 'bootstrap/support/page/monitor_page'
+
+RSpec.feature 'Monitor', type: :feature, js: true do
+  describe 'monitor' do
+    let(:admin_user) { create(:admin_user) }
+    let!(:project) { create(:project, name: 'TestProject') }
+    let!(:package1) { create(:package, project: project, name: 'TestPackage') }
+    let!(:package2) { create(:package, project: project, name: 'SecondPackage') }
+    let!(:repository1) { create(:repository, project: project, name: 'openSUSE_Tumbleweed', architectures: ['x86_64', 'i586']) }
+    let!(:repository2) { create(:repository, project: project, name: 'openSUSE_Leap_42.3', architectures: ['x86_64', 'i586']) }
+    let!(:repository3) { create(:repository, project: project, name: 'openSUSE_Leap_42.2', architectures: ['x86_64', 'i586']) }
+
+    let(:build_results_xml) do
+      <<-XML
+      <resultlist state="dc66a487ea4d97b4f157d075a0e747b9">
+        <result project="TestProject" repository="openSUSE_Tumbleweed" arch="x86_64" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="succeeded">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+        <result project="TestProject" repository="openSUSE_Leap_42.3" arch="x86_64" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+        <result project="TestProject" repository="openSUSE_Leap_42.2" arch="x86_64" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+        <result project="TestProject" repository="openSUSE_Tumbleweed" arch="i586" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+        <result project="TestProject" repository="openSUSE_Leap_42.3" arch="i586" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+        <result project="TestProject" repository="openSUSE_Leap_42.2" arch="i586" code="published" state="published">
+          <status package="SecondPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+          <status package="TestPackage" code="broken">
+            <details>no source uploaded</details>
+          </status>
+        </result>
+      </resultlist>
+      XML
+    end
+
+    before do
+      login admin_user
+      allow(Backend::Api::BuildResults::Status).to receive(:result_swiss_knife).and_return(build_results_xml)
+      visit project_monitor_path(project.name)
+      expect(page).to have_text('Monitor')
+    end
+
+    scenario 'filtering build results by architecture' do
+      page = Page::MonitorPage.new(:architectures)
+      page.filter('i586')
+
+      expect(page).to have_column('i586')
+      expect(page).not_to have_column('x86_64')
+    end
+
+    scenario 'filtering build results by repository' do
+      page = Page::MonitorPage.new(:repositories)
+      page.filter('openSUSE_Leap_42.2')
+      page.filter('openSUSE_Leap_42.3')
+
+      expect(page).to have_column('openSUSE_Leap_42.2')
+      expect(page).to have_column('openSUSE_Leap_42.3')
+      expect(page).not_to have_column('Tumbleweed')
+    end
+
+    scenario 'filtering build results by status' do
+      page = Page::MonitorPage.new(:status)
+      page.filter('succeeded')
+
+      expect(page).to have_row('TestPackage')
+      expect(page).not_to have_row('SecondPackage')
+    end
+  end
+end
\ No newline at end of file
diff --git a/src/api/spec/bootstrap/support/page/monitor_page.rb b/src/api/spec/bootstrap/support/page/monitor_page.rb
new file mode 100644
index 000000000000..1fbe6f72d919
--- /dev/null
+++ b/src/api/spec/bootstrap/support/page/monitor_page.rb
@@ -0,0 +1,34 @@
+module Page
+  class MonitorPage
+    include Capybara::DSL
+
+    def initialize(filter_name)
+      @filter_name = filter_name
+    end
+
+    def filter(element)
+      find("#project-monitor-#{filter_name}-dropdown").click
+      find(:css, "label[for='#{element.parameterize}-checkbox']").click
+    end
+
+    def has_column?(column)
+      header.has_text?(column)
+    end
+
+    def has_row?(row)
+      rows.has_text?(row)
+    end
+
+    private
+
+    attr_reader :filter_name
+
+    def rows
+      find('table#project-monitor-table')
+    end
+
+    def header
+      find('.dataTables_scrollHead')
+    end
+  end
+end
\ No newline at end of file
diff --git a/src/api/spec/features/webui/projects_spec.rb b/src/api/spec/features/webui/projects_spec.rb
index 365b3c2839f2..bf28b098a5f9 100644
--- a/src/api/spec/features/webui/projects_spec.rb
+++ b/src/api/spec/features/webui/projects_spec.rb
@@ -506,6 +506,7 @@
     end
 
     scenario 'filtering build results by package name' do
+      skip_if_bootstrap # this is now handled by datatables, we don't need to test it
       fill_in 'pkgname', with: package1.name
       click_button 'Filter:'
 
@@ -515,6 +516,7 @@
     end
 
     scenario 'filtering build results by architecture' do
+      skip_if_bootstrap
       find('#archlink').click
       uncheck 'arch_x86_64'
       click_button 'Filter:'
@@ -525,6 +527,7 @@
     end
 
     scenario 'filtering build results by repository' do
+      skip_if_bootstrap
       find('#repolink').click
       uncheck 'repo_openSUSE_Leap_42_2'
       uncheck 'repo_openSUSE_Leap_42_3'
@@ -537,6 +540,7 @@
     end
 
     scenario 'filtering build results by last build' do
+      skip_if_bootstrap # we don't support this anymore
       check 'lastbuild'
       click_button 'Filter:'