Fixes #35287 - Create column selector on host index page

app/helpers/application_helper.rb

@@ -155,6 +155,10 @@ def searchable?
     end
   end
 
+  def filter_columns?
+    controller_name == 'hosts' && controller.action_name == 'index'
+  end
+
   def auto_complete_controller_name
     controller.respond_to?(:auto_complete_controller_name) ? controller.auto_complete_controller_name : controller_name
   end

app/helpers/column_selector_helper.rb

@@ -0,0 +1,15 @@
+module ColumnSelectorHelper
+  def get_selected_columns
+    User.current.table_preferences.find_by_name(auto_complete_controller_name)&.columns || []
+  end
+
+  def mount_column_selector
+    url = "#{api_users_path}/#{User.current[:id]}/table_preferences/#{auto_complete_controller_name}"
+    react_component("ColumnSelector", data: {
+                      url: url,
+                      controller: auto_complete_controller_name,
+                      selected: get_selected_columns,
+                      columns: ["Power", "Name", "Operating system", "Model", "Owner", "Host group", "Last report", "Comment"],
+                    })
+  end
+end

app/views/layouts/_application_content.html.erb

@@ -19,6 +19,14 @@
         </div>
       </div>
     </div>
+    <% if filter_columns? %>
+    <div class="row">
+      <div class="title_select col-md-4">
+        <%= mount_column_selector %>
+          <%= yield(:column_selector) %>&nbsp;
+      </div>
+    </div>
+    <% end %>
     <%= yield %>
   </div>
 </div>

webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { isEqual } from 'lodash';
+import { PropTypes } from 'prop-types';
+import {
+  Button,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { translate as __ } from '../../common/I18n';
+import './column-selector.scss';
+
+const ColumnSelector = props => {
+  const {
+    data: { url, controller, selected, columns },
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedColumns, setSelectedColumns] = useState(selected);
+
+  const onToggle = isExpanded => {
+    setIsOpen(isExpanded);
+  };
+
+  const onSelect = (event, selection) => {
+    if (selectedColumns.find(i => i === selection)) {
+      setSelectedColumns(selectedColumns.filter(e => e !== selection));
+    } else {
+      setSelectedColumns([...selectedColumns, selection]);
+    }
+  };
+
+  const onChange = event => {
+    const allColumns = new Set(columns).add(__('Select All'));
+    if (isEqual([...allColumns], selectedColumns)) {
+      setSelectedColumns([]);
+    } else {
+      setSelectedColumns([...allColumns]);
+    }
+  };
+
+  return (
+    <div className="pf-c-select-input">
+      <div className="column-selector pf-c-input-group" id="column-selector">
+        <Select
+          variant={SelectVariant.checkbox}
+          onToggle={onToggle}
+          isOpen={isOpen}
+          onSelect={onSelect}
+          isCheckboxSelectionBadgeHidden
+          selections={selectedColumns}
+          placeholderText={__('Filter Columns')}
+          controller={controller}
+          url={url}
+        >
+          <SelectOption onChange={onChange} value={__('Select All')} />
+          {columns.map((option, index) => (
+            <SelectOption key={index} value={option} />
+          ))}
+        </Select>
+        <Button
+          id="btn-filter"
+          variant="secondary"
+          className="pull-right"
+        >
+          {__('Filter')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+ColumnSelector.propTypes = {
+  data: PropTypes.shape({
+    controller: PropTypes.string,
+    url: PropTypes.string,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    columns: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
+
+ColumnSelector.defaultProps = {
+  data: {
+    controller: null,
+    url: null,
+    selected: [],
+    columns: [],
+  },
+};
+
+export default ColumnSelector;

webpack/assets/javascripts/react_app/components/ColumnSelector/column-selector.scss

@@ -0,0 +1,13 @@
+.column-selector {
+  width: 100%;
+
+  label {
+    font-size: 16px;
+    height: 36px;
+    border-bottom-color: var(--pf-global--BorderColor--200);
+    border-top-color: var(--pf-global--BorderColor--300);
+    border-left-color: var(--pf-global--BorderColor--300);
+    border-left-width: 0.7px;
+    border-top-width: 0;
+  }
+}

webpack/assets/javascripts/react_app/components/ColumnSelector/index.js

@@ -0,0 +1,3 @@
+import ColumnSelector from './ColumnSelector';
+
+export default ColumnSelector;

webpack/assets/javascripts/react_app/components/componentRegistry.js

@@ -22,6 +22,7 @@ import FactChart from './FactCharts';
 import Pagination from './Pagination';
 import AutoComplete from './AutoComplete';
 import SearchBar from './SearchBar';
+import ColumnSelector from './ColumnSelector';
 import Layout from './Layout';
 import EmptyState from './common/EmptyState';
 import ComponentWrapper from './common/ComponentWrapper/ComponentWrapper';
@@ -118,6 +119,7 @@ const componentRegistry = {
 const coreComponets = [
   { name: 'ReactApp', type: ReactApp },
   { name: 'SearchBar', type: SearchBar },
+  { name: 'ColumnSelector', type: ColumnSelector },
   { name: 'AutoComplete', type: AutoComplete },
   { name: 'AreaChart', type: AreaChart },
   { name: 'DonutChart', type: DonutChart },