Add host list filters

frontend/packages/metal3-plugin/src/components/host.tsx

@@ -20,6 +20,7 @@ import { getHostBMCAddress, getHostMachine } from '../selectors';
 import { BaremetalHostRole } from './host-role';
 import MachineCell from './machine-cell';
 import BaremetalHostStatus from './host-status';
+import { hostStatusFilter } from './table-filters';
 
 const tableColumnClasses = [
   classNames('col-lg-3', 'col-md-4', 'col-sm-12', 'col-xs-12'),
@@ -131,17 +132,6 @@ const HostList: React.FC<React.ComponentProps<typeof Table>> = (props) => (
   <Table {...props} aria-label="Baremetal Hosts" Header={HostsTableHeader} Row={HostsTableRow} />
 );
 
-// TODO(jtomasek): re-enable filters once the extension point for list.tsx is in place
-const filters = [];
-// const filters = [
-//   {
-//     type: 'baremetalhost-status',
-//     selected: ['online', 'offline'],
-//     reducer: getSimpleHostStatus,
-//     items: [{ id: 'online', title: 'online' }, { id: 'offline', title: 'offline' }],
-//   },
-// ];
-
 type BaremetalHostsPageProps = {
   namespace: string;
 };
@@ -189,7 +179,7 @@ export const BaremetalHostsPage: React.FC<BaremetalHostsPageProps> = (props) =>
     <MultiListPage
       {...props}
       canCreate
-      rowFilters={filters}
+      rowFilters={[hostStatusFilter]}
       createButtonText="Add Host"
       namespace={props.namespace}
       resources={[hostsResource, machinesResource, nodesResource]}

frontend/packages/metal3-plugin/src/components/table-filters.ts

@@ -0,0 +1,56 @@
+import * as _ from 'lodash';
+
+import { Filter } from '@console/shared';
+import { K8sResourceKind } from '@console/internal/module/k8s';
+import { getSimpleHostStatus } from '../utils/host-status';
+import {
+  HOST_REGISTERING_STATES,
+  HOST_PROVISIONING_STATES,
+  HOST_STATUS_READY,
+  HOST_ERROR_STATES,
+  HOST_STATUS_TITLES,
+  HOST_STATUS_PROVISIONED,
+} from '../constants';
+
+const hostStatesToFilterMap = Object.freeze({
+  registering: {
+    title: 'Registering',
+    states: HOST_REGISTERING_STATES,
+  },
+  ready: {
+    title: 'Ready',
+    states: [HOST_STATUS_READY],
+  },
+  provisioning: {
+    title: 'Provisioning',
+    states: HOST_PROVISIONING_STATES,
+  },
+  provisioned: {
+    title: 'Provisioned',
+    states: [HOST_STATUS_PROVISIONED],
+  },
+  error: {
+    title: 'Error',
+    states: HOST_ERROR_STATES,
+  },
+  other: {
+    title: 'Other',
+    states: Object.keys(HOST_STATUS_TITLES),
+  },
+});
+
+const getHostFilterStatus = (host: K8sResourceKind): string => {
+  const status = getSimpleHostStatus(host);
+  return _.findKey(hostStatesToFilterMap, ({ states }) => states.includes(status));
+};
+
+export const hostStatusFilter: Filter = {
+  type: 'host-status',
+  selected: Object.keys(hostStatesToFilterMap),
+  reducer: getHostFilterStatus,
+  items: _.map(hostStatesToFilterMap, ({ title }, id) => ({ id, title })),
+  filter: (groups, host: K8sResourceKind) => {
+    const status = getHostFilterStatus(host);
+    return groups.selected.has(status) || !_.includes(groups.all, status);
+  },
+};

frontend/packages/metal3-plugin/src/constants.ts

@@ -42,6 +42,18 @@ export const HOST_STATUS_TITLES = {
   [HOST_STATUS_MATCH_PROFILE]: 'Matching profile',
 };
 
+export const HOST_REGISTERING_STATES = [
+  HOST_STATUS_REGISTERING,
+  HOST_STATUS_INSPECTING,
+  HOST_STATUS_MATCH_PROFILE,
+];
+
+export const HOST_PROVISIONING_STATES = [
+  HOST_STATUS_PREPARING_TO_PROVISION,
+  HOST_STATUS_PROVISIONING,
+  HOST_STATUS_MAKING_HOST_AVAILABLE,
+];
+
 export const HOST_ERROR_STATES = [
   HOST_STATUS_REGISTRATION_ERROR,
   HOST_STATUS_PROVISIONING_ERROR,
@@ -54,7 +66,6 @@ export const HOST_WARN_STATES = [];
 export const HOST_PROGRESS_STATES = [
   HOST_STATUS_INSPECTING,
   HOST_STATUS_PREPARING_TO_PROVISION,
-  HOST_STATUS_PREPARING_TO_PROVISION,
   HOST_STATUS_PROVISIONING,
   HOST_STATUS_DEPROVISIONING,
   HOST_STATUS_MAKING_HOST_AVAILABLE,