Fixes #36822 - Design new hosts page

Created a HostIndex component

Update the TableIndexPage as a part of this action to accept things like
select all

Co-authored-by: Jeremy Lenz <[email protected]>

app/controllers/hosts_controller.rb

@@ -684,6 +684,14 @@ def statuses
     render :json => statuses
   end
 
+  def hosts_path(*args)
+    if Setting[:new_hosts_page]
+      new_hosts_index_page_path(*args)
+    else
+      super
+    end
+  end
+
   private
 
   def preload_reports

app/helpers/application_helper.rb

@@ -415,10 +415,19 @@ def ui_settings
       labFeatures: Setting[:lab_features],
       safeMode: Setting[:safemode_render],
       displayFqdnForHosts: Setting[:display_fqdn_for_hosts],
+      displayNewHostsPage: Setting[:new_hosts_page],
     }
   end
 
   def current_host_details_path(host)
     Setting['host_details_ui'] ? host_details_page_path(host) : host_path(host)
   end
+
+  def hosts_path(*args)
+    if Setting[:new_hosts_page]
+      new_hosts_index_page_path(*args)
+    else
+      super
+    end
+  end
 end

app/registries/foreman/settings/general.rb

@@ -51,6 +51,11 @@
       description: N_("Whether or not to show a menu to access experimental lab features (requires reload of page)"),
       default: false,
       full_name: N_('Show Experimental Labs'))
+    setting('new_hosts_page',
+      type: :boolean,
+      description: N_("Whether or not to show the new overview page for All Hosts (requires reload of page)"),
+      default: false,
+      full_name: N_('Show New Host Overview Page'))
     setting('display_fqdn_for_hosts',
       type: :boolean,
       description: N_('Display names of hosts as FQDNs. If disabled, only display names of hosts as hostnames.'),

app/registries/menu/loader.rb

@@ -52,7 +52,13 @@ def self.load
         end
 
         menu.sub_menu :hosts_menu,      :caption => N_('Hosts'), :icon => 'fa fa-server' do
-          menu.item :hosts,             :caption => N_('All Hosts')
+          menu.item :hosts, :caption => N_('All Hosts'),
+                :if => proc { !Setting[:new_hosts_page] }
+          menu.item :newhosts, :caption => N_('All Hosts'),
+                :if => proc { Setting[:new_hosts_page] },
+                :url => '/new/hosts',
+                :url_hash => { :controller => 'api/v2/hosts', :action => 'index' }
+
           menu.item :newhost,           :caption => N_('Create Host'),
                     :url_hash => {:controller => '/hosts', :action => 'new'}
           menu.item :register_hosts,    :caption => N_('Register Host'),

app/views/api/v2/hosts/main.json.rabl

@@ -2,8 +2,9 @@ object @host
 
 extends "api/v2/hosts/base"
 extends "api/v2/smart_proxies/children_nodes"
+extends "api/v2/layouts/permissions"
 
-# we need to cache results with @last_reports, rabl can't pass custom parameters to attriute methods
+# we need to cache results with @last_reports, rabl can't pass custom parameters to attribute methods
 @object.global_status_label(:last_reports => @last_reports)
 @object.configuration_status(:last_reports => @last_reports)
 @object.configuration_status_label(:last_reports => @last_reports)

config/routes.rb

@@ -551,9 +551,12 @@
   end
 
   match 'host_statuses' => 'react#index', :via => :get
+  match 'new/hosts/auto_complete_search', :via => :get, :to => 'hosts#auto_complete_search', :as => "auto_complete_search_hosts_new"
   constraints(id: /[^\/]+/) do
     match 'new/hosts/:id' => 'react#index', :via => :get, :as => :host_details_page
   end
+  match 'new/hosts/' => 'react#index', :via => :get, :as => :new_hosts_index_page
+
   get 'page-not-found' => 'react#index'
   get 'links/:type(/:section)' => 'links#show', :as => 'external_link', :constraints => { section: %r{.*} }
 end

webpack/assets/javascripts/react_app/Root/Context/ForemanContext.js

@@ -13,3 +13,8 @@ export const useForemanDocUrl = () => useForemanMetadata().docUrl;
 export const useForemanOrganization = () => useForemanMetadata().organization;
 export const useForemanLocation = () => useForemanMetadata().location;
 export const useForemanUser = () => useForemanMetadata().user;
+
+export const useForemanHostsPageUrl = () => {
+  const { displayNewHostsPage } = useForemanSettings();
+  return displayNewHostsPage ? '/new/hosts' : '/hosts';
+};

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

@@ -40,10 +40,12 @@ import { useAPI } from '../../common/hooks/API/APIHooks';
 import TabRouter from './Tabs/TabRouter';
 import RedirectToEmptyHostPage from './EmptyState';
 import BreadcrumbBar from '../BreadcrumbBar';
-import { foremanUrl } from '../../common/helpers';
 import { CardExpansionContextWrapper } from './CardExpansionContext';
 import Head from '../Head';
-import { useForemanSettings } from '../../Root/Context/ForemanContext';
+import {
+  useForemanSettings,
+  useForemanHostsPageUrl,
+} from '../../Root/Context/ForemanContext';
 
 const HostDetails = ({
   match: {
@@ -59,6 +61,7 @@ const HostDetails = ({
     HOST_DETAILS_API_OPTIONS
   );
   const isNavCollapsed = useSelector(selectIsCollapsed);
+  const hostsIndexUrl = useForemanHostsPageUrl();
   const tabs = useSelector(
     state => selectFillsIDs(state, TABS_SLOT_ID),
     shallowEqual
@@ -113,7 +116,7 @@ const HostDetails = ({
                 switcherItemUrl: '/new/hosts/:name',
               }}
               breadcrumbItems={[
-                { caption: __('Hosts'), url: foremanUrl('/hosts') },
+                { caption: __('Hosts'), url: hostsIndexUrl },
                 {
                   caption: displayFqdnForHosts
                     ? response.name

webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, KebabToggle } from '@patternfly/react-core';
+
+/**
+ * Generate a button or a dropdown of buttons
+ * @param  {String} title The title of the button for the title and text inside the button
+ * @param  {Object} action action to preform when the button is click can be href with data-method or Onclick
+ * @return {Function} button component or splitbutton component
+ */
+export const ActionKebab = ({ items }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  if (!items.length) return null;
+  return (
+    <>
+      {items.length > 0 && (
+        <Dropdown
+          ouiaId="action-buttons-dropdown"
+          toggle={
+            <KebabToggle
+              aria-label="toggle action dropdown"
+              onToggle={setIsOpen}
+            />
+          }
+          isOpen={isOpen}
+          isPlain
+          dropdownItems={items}
+        />
+      )}
+    </>
+  );
+};
+
+ActionKebab.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.node),
+};
+
+ActionKebab.defaultProps = {
+  items: [],
+};

webpack/assets/javascripts/react_app/components/HostsIndex/Selectors.js

@@ -0,0 +1,4 @@
+import { selectComponentByWeight } from '../common/Slot/SlotSelectors';
+
+export const selectKebabItems = () =>
+  selectComponentByWeight('hosts-index-kebab');

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

@@ -0,0 +1,124 @@
+import React, { createContext } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Td } from '@patternfly/react-table';
+import { ToolbarItem } from '@patternfly/react-core';
+import { translate as __ } from '../../common/I18n';
+import TableIndexPage from '../PF4/TableIndexPage/TableIndexPage';
+import { ActionKebab } from './ActionKebab';
+import { HOSTS_API_PATH, API_REQUEST_KEY } from '../../routes/Hosts/constants';
+import { selectKebabItems } from './Selectors';
+import { useAPI } from '../../common/hooks/API/APIHooks';
+import { useBulkSelect } from '../PF4/TableIndexPage/Table/TableHooks';
+import SelectAllCheckbox from '../PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { getPageStats } from '../PF4/TableIndexPage/Table/helpers';
+
+export const ForemanHostsIndexActionsBarContext = createContext({});
+
+const HostsIndex = () => {
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: ({ id, name }) => <a href={`hosts/${id}`}>{name}</a>,
+      isSorted: true,
+    },
+  };
+  const defaultParams = { search: '' }; // search ||
+
+  const response = useAPI('get', `${HOSTS_API_PATH}?include_permissions=true`, {
+    key: API_REQUEST_KEY,
+    params: defaultParams,
+  });
+
+  const {
+    response: {
+      search: apiSearchQuery,
+      results,
+      total,
+      per_page: perPage,
+      page,
+    },
+  } = response;
+
+  const { pageRowCount } = getPageStats({ total, page, perPage });
+
+  const { fetchBulkParams, ...selectAllOptions } = useBulkSelect({
+    results,
+    metadata: { total, page },
+    initialSearchQuery: apiSearchQuery || '',
+  });
+
+  const {
+    selectAll,
+    selectPage,
+    selectNone,
+    selectedCount,
+    selectOne,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+    isSelected,
+  } = selectAllOptions;
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectAll,
+          selectPage,
+          selectNone,
+          selectedCount,
+          pageRowCount,
+        }}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const RowSelectTd = ({ rowData }) => (
+    <Td
+      select={{
+        rowIndex: rowData.id,
+        onSelect: (_event, isSelecting) => {
+          selectOne(isSelecting, rowData.id);
+        },
+        isSelected: isSelected(rowData.id),
+        disable: false,
+      }}
+    />
+  );
+
+  RowSelectTd.propTypes = {
+    rowData: PropTypes.object.isRequired,
+  };
+
+  const actionNode = [];
+  const registeredItems = useSelector(selectKebabItems, shallowEqual);
+  const customToolbarItems = (
+    <ForemanHostsIndexActionsBarContext.Provider
+      value={{ ...selectAllOptions, fetchBulkParams }}
+    >
+      <ActionKebab items={actionNode.concat(registeredItems)} />
+    </ForemanHostsIndexActionsBarContext.Provider>
+  );
+
+  return (
+    <TableIndexPage
+      apiUrl={HOSTS_API_PATH}
+      apiOptions={{ key: API_REQUEST_KEY }}
+      header={__('Hosts')}
+      controller="hosts"
+      isDeleteable
+      columns={columns}
+      creatable={false}
+      replacementResponse={response}
+      customToolbarItems={customToolbarItems}
+      selectionToolbar={selectionToolbar}
+      showCheckboxes
+      rowSelectTd={RowSelectTd}
+    />
+  );
+};
+
+export default HostsIndex;

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox/SelectAllCheckbox.scss

@@ -0,0 +1,3 @@
+.table-select-all-checkbox {
+  font-weight: normal;
+}