Fixes #35287 - Create column selector on host index page

app/helpers/column_selector_helper.rb

@@ -0,0 +1,14 @@
+module ColumnSelectorHelper
+  def get_table_columns
+    User.current.table_preferences.select { |table| /#{auto_complete_controller_name}/.match?(table.name) }.first.columns
+  end
+
+  def mount_column_selector
+    url = send("api_users_path") + "/#{User.current[:id]}/table_preferences/#{auto_complete_controller_name}"
+    react_component("ColumnSelector", data: {
+                      url: url,
+                      controller: auto_complete_controller_name,
+                      columns: get_table_columns
+                    })
+  end
+end

app/views/layouts/_application_content.html.erb

@@ -13,6 +13,12 @@
         <%= mount_search_bar if searchable? %>
           <%= yield(:search_bar) %>&nbsp;
       </div>
+      <% if controller_name == 'hosts' %>
+        <div class="title_select col-md-4">
+          <%= mount_column_selector %>
+            <%= yield(:column_selector) %>&nbsp;
+        </div>
+      <% end %>
       <div id="title_action" class= <%= searchable? ? "col-md-6" : "col-md-8" %>>
         <div class="btn-toolbar pull-right">
           <%=h yield(:title_actions) %>

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+const ColumnSelector = props => {
+  const {
+    data: { url, controller, columns },
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div className="pf-c-select">
+      <p>columns</p>
+      <div className="pf-c-select-group">
+        <Select
+          variant={SelectVariant.checkbox}
+          aria-label="Select Input"
+          onToggle={setIsOpen}
+          isOpen={isOpen}
+          placeholderText="Filter columns"
+          controller={controller}
+          url={url}
+          >
+          <SelectOption key={columns.name} value="Name" />,
+          <SelectOption key={columns.os_title} value="Operating system" />,
+          <SelectOption key={columns.model} value="Model" />,
+          <SelectOption key={columns.owner} value="Owner" />
+          <SelectOption key={columns.hostgroup} value="Host group" />
+          <SelectOption key={columns.last_report} value="Last report" />
+          <SelectOption key={columns.comment} value="Comment" />
+        </Select>
+      </div>
+    </div>
+  );
+};
+
+ColumnSelector.propTypes = {
+  data: PropTypes.shape({
+    controller: PropTypes.string,
+    url: PropTypes.string,
+    columns: PropTypes.arrayOf(PropTypes.string)
+  })
+};
+
+ColumnSelector.defaultProps = {
+  data: {
+    controller: null,
+    url: null,
+    columns: []
+  }
+};
+
+export default ColumnSelector;

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

@@ -0,0 +1 @@
+import ColumnSelector from './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 },