foreman_remote_execution 3.3.4 → 4.1.0

data/webpack/__mocks__/foremanReact/redux/API/APISelectors.js

@@ -0,0 +1,2 @@
+export const selectAPIStatus = () => 'RESOLVED';
+export const selectAPIResponse = state => state;

data/webpack/__mocks__/foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors.js

@@ -0,0 +1 @@
+export const selectDoesIntervalExist = () => false;

data/webpack/react_app/components/TargetingHosts/TargetingHosts.js

@@ -5,8 +5,8 @@ import { LoadingState, Alert } from 'patternfly-react';
 import { STATUS } from 'foremanReact/constants';
 import HostItem from './components/HostItem';
 
-const TargetingHosts = ({ status, items }) => {
-  if (status === STATUS.ERROR) {
+const TargetingHosts = ({ apiStatus, items }) => {
+  if (apiStatus === STATUS.ERROR) {
     return (
       <Alert type="error">
         {__(
@@ -16,8 +16,24 @@ const TargetingHosts = ({ status, items }) => {
     );
   }
 
+  const tableBodyRows = items.length ? (
+    items.map(({ name, link, status, actions }) => (
+      <HostItem
+        key={name}
+        name={name}
+        link={link}
+        status={status}
+        actions={actions}
+      />
+    ))
+  ) : (
+    <tr>
+      <td colSpan="3">{__('No hosts found.')}</td>
+    </tr>
+  );
+
   return (
-    <LoadingState loading={!items.length}>
+    <LoadingState loading={!items.length && apiStatus === STATUS.PENDING}>
       <div>
         <table className="table table-bordered table-striped table-hover">
           <thead>
@@ -27,17 +43,7 @@ const TargetingHosts = ({ status, items }) => {
               <th>{__('Actions')}</th>
             </tr>
           </thead>
-          <tbody>
-            {items.map(host => (
-              <HostItem
-                key={host.name}
-                name={host.name}
-                link={host.link}
-                status={host.status}
-                actions={host.actions}
-              />
-            ))}
-          </tbody>
+          <tbody>{tableBodyRows}</tbody>
         </table>
       </div>
     </LoadingState>
@@ -45,7 +51,7 @@ const TargetingHosts = ({ status, items }) => {
 };
 
 TargetingHosts.propTypes = {
-  status: PropTypes.string.isRequired,
+  apiStatus: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired,
 };
 

data/webpack/react_app/components/TargetingHosts/TargetingHostsHelpers.js

@@ -0,0 +1,10 @@
+import { getURI } from 'foremanReact/common/urlHelpers';
+
+export const getApiUrl = (searchQuery, pagination) => {
+  const baseUrl = getURI()
+    .search('')
+    .addQuery('page', pagination.page)
+    .addQuery('per_page', pagination.perPage);
+
+  return searchQuery ? baseUrl.addQuery('search', searchQuery) : baseUrl;
+};

data/webpack/react_app/components/TargetingHosts/TargetingHostsPage.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+
+import SearchBar from 'foremanReact/components/SearchBar';
+import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
+import { getControllerSearchProps } from 'foremanReact/constants';
+
+import TargetingHosts from './TargetingHosts';
+import './TargetingHostsPage.scss';
+
+const TargetingHostsPage = ({
+  handleSearch,
+  searchQuery,
+  apiStatus,
+  items,
+  totalHosts,
+  pagination,
+  handlePagination,
+}) => (
+  <div id="targeting_hosts">
+    <Grid.Row>
+      <Grid.Col md={6} className="title_filter">
+        <SearchBar
+          onSearch={query => handleSearch(query)}
+          data={{
+            ...getControllerSearchProps('hosts'),
+            autocomplete: {
+              id: 'targeting_hosts_search',
+              searchQuery,
+              url: '/hosts/auto_complete_search',
+              useKeyShortcuts: true,
+            },
+            bookmarks: {},
+          }}
+        />
+      </Grid.Col>
+    </Grid.Row>
+    <br />
+    <TargetingHosts apiStatus={apiStatus} items={items} />
+    <Pagination
+      viewType="list"
+      itemCount={totalHosts}
+      pagination={pagination}
+      onChange={args => handlePagination(args)}
+      dropdownButtonId="targeting-hosts-pagination-dropdown"
+      className="targeting-hosts-pagination"
+    />
+  </div>
+);
+
+TargetingHostsPage.propTypes = {
+  handleSearch: PropTypes.func.isRequired,
+  searchQuery: PropTypes.string.isRequired,
+  apiStatus: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+  totalHosts: PropTypes.number.isRequired,
+  pagination: PropTypes.object.isRequired,
+  handlePagination: PropTypes.func.isRequired,
+};
+
+export default TargetingHostsPage;

data/webpack/react_app/components/TargetingHosts/TargetingHostsPage.scss

@@ -0,0 +1,6 @@
+.targeting-hosts-pagination {
+  margin-top: -7px;
+}
+#targeting_hosts {
+  min-height: 350px;
+}

data/webpack/react_app/components/TargetingHosts/TargetingHostsSelectors.js

@@ -2,11 +2,19 @@ import {
   selectAPIStatus,
   selectAPIResponse,
 } from 'foremanReact/redux/API/APISelectors';
+import { selectDoesIntervalExist } from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors';
+
 import { TARGETING_HOSTS } from './TargetingHostsConsts';
 
 export const selectItems = state =>
   selectAPIResponse(state, TARGETING_HOSTS).hosts || [];
 
 export const selectAutoRefresh = state =>
-  selectAPIResponse(state, TARGETING_HOSTS).autoRefresh;
-export const selectStatus = state => selectAPIStatus(state, TARGETING_HOSTS);
+  selectAPIResponse(state, TARGETING_HOSTS).autoRefresh || '';
+
+export const selectApiStatus = state => selectAPIStatus(state, TARGETING_HOSTS);
+export const selectTotalHosts = state =>
+  selectAPIResponse(state, TARGETING_HOSTS).total_hosts || 0;
+
+export const selectIntervalExists = state =>
+  selectDoesIntervalExist(state, TARGETING_HOSTS);

data/webpack/react_app/components/TargetingHosts/__tests__/TargetingHostsPage.test.js

@@ -0,0 +1,9 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import TargetingHostsPage from '../TargetingHostsPage';
+import { TargetingHostsPageFixtures } from './fixtures';
+
+describe('TargetingHostsPage', () =>
+  testComponentSnapshotsWithFixtures(
+    TargetingHostsPage,
+    TargetingHostsPageFixtures
+  ));

data/webpack/react_app/components/TargetingHosts/__tests__/TargetingHostsSelectors.test.js

@@ -0,0 +1,26 @@
+import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
+
+import {
+  selectItems,
+  selectAutoRefresh,
+  selectApiStatus,
+  selectTotalHosts,
+  selectIntervalExists,
+} from '../TargetingHostsSelectors';
+
+const state = {
+  hosts: [],
+  autoRefresh: 'true',
+  total_hosts: 0,
+};
+
+const fixtures = {
+  'should return hosts': () => selectItems(state),
+  'should return autoRefresh': () => selectAutoRefresh(state),
+  'should return apiStatus': () => selectApiStatus(state),
+  'should return totalHosts': () => selectTotalHosts(state),
+  'should return intervalExists': () => selectIntervalExists(state),
+};
+
+describe('TargetingHostsSelectors', () =>
+  testSelectorsSnapshotWithFixtures(fixtures));

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHosts.test.js.snap

@@ -33,6 +33,13 @@ exports[`TargetingHosts renders 1`] = `
           name="host"
           status="success"
         />
+        <HostItem
+          actions={Array []}
+          key="host2"
+          link="/link2"
+          name="host2"
+          status="success"
+        />
       </tbody>
     </table>
   </div>
@@ -74,7 +81,15 @@ exports[`TargetingHosts renders with loading 1`] = `
           </th>
         </tr>
       </thead>
-      <tbody />
+      <tbody>
+        <tr>
+          <td
+            colSpan="3"
+          >
+            No hosts found.
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </LoadingState>

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHostsPage.test.js.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TargetingHostsPage renders 1`] = `
+<div
+  id="targeting_hosts"
+>
+  <Row
+    bsClass="row"
+    componentClass="div"
+  >
+    <Col
+      bsClass="col"
+      className="title_filter"
+      componentClass="div"
+      md={6}
+    >
+      <SearchBar
+        data={
+          Object {
+            "autocomplete": Object {
+              "id": "targeting_hosts_search",
+              "searchQuery": "",
+              "url": "/hosts/auto_complete_search",
+              "useKeyShortcuts": true,
+            },
+            "bookmarks": Object {},
+            "controller": "hosts",
+          }
+        }
+        onSearch={[Function]}
+      />
+    </Col>
+  </Row>
+  <br />
+  <TargetingHosts
+    apiStatus="RESOLVED"
+    items={
+      Array [
+        Object {
+          "actions": Array [],
+          "link": "/link",
+          "name": "host",
+          "status": "success",
+        },
+        Object {
+          "actions": Array [],
+          "link": "/link2",
+          "name": "host2",
+          "status": "success",
+        },
+      ]
+    }
+  />
+  <PaginationWrapper
+    className="targeting-hosts-pagination"
+    dropdownButtonId="targeting-hosts-pagination-dropdown"
+    itemCount={1}
+    onChange={[Function]}
+    pagination={
+      Object {
+        "page": 1,
+        "perPage": 20,
+      }
+    }
+    viewType="list"
+  />
+</div>
+`;

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHostsSelectors.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TargetingHostsSelectors should return apiStatus 1`] = `"RESOLVED"`;
+
+exports[`TargetingHostsSelectors should return autoRefresh 1`] = `"true"`;
+
+exports[`TargetingHostsSelectors should return hosts 1`] = `Array []`;
+
+exports[`TargetingHostsSelectors should return intervalExists 1`] = `false`;
+
+exports[`TargetingHostsSelectors should return totalHosts 1`] = `0`;

data/webpack/react_app/components/TargetingHosts/__tests__/fixtures.js

@@ -1,3 +1,18 @@
+const items = [
+  {
+    name: 'host',
+    link: '/link',
+    status: 'success',
+    actions: [],
+  },
+  {
+    name: 'host2',
+    link: '/link2',
+    status: 'success',
+    actions: [],
+  },
+];
+
 export const HostItemFixtures = {
   renders: {
     name: 'Host1',
@@ -15,29 +30,30 @@ export const HostStatusFixtures = {
 
 export const TargetingHostsFixtures = {
   renders: {
-    status: '',
-    items: [
-      {
-        name: 'host',
-        link: '/link',
-        status: 'success',
-        actions: [],
-      },
-    ],
+    apiStatus: 'RESOLVED',
+    items,
   },
   'renders with error': {
-    status: 'ERROR',
-    items: [
-      {
-        name: 'host',
-        link: '/link',
-        status: 'success',
-        actions: [],
-      },
-    ],
+    apiStatus: 'ERROR',
+    items,
   },
   'renders with loading': {
-    status: '',
+    apiStatus: 'PENDING',
     items: [],
   },
 };
+
+export const TargetingHostsPageFixtures = {
+  renders: {
+    handleSearch: () => {},
+    searchQuery: '',
+    apiStatus: 'RESOLVED',
+    items,
+    totalHosts: 1,
+    pagination: {
+      page: 1,
+      perPage: 20,
+    },
+    handlePagination: () => {},
+  },
+};

data/webpack/react_app/components/TargetingHosts/index.js

@@ -1,37 +1,97 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
-import TargetingHosts from './TargetingHosts';
+
+import { get } from 'foremanReact/redux/API';
+import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
+import {
+  withInterval,
+  stopInterval,
+} from 'foremanReact/redux/middlewares/IntervalMiddleware';
 
 import {
   selectItems,
-  selectStatus,
+  selectApiStatus,
   selectAutoRefresh,
+  selectTotalHosts,
+  selectIntervalExists,
 } from './TargetingHostsSelectors';
-import { getData } from './TargetingHostsActions';
+import { getApiUrl } from './TargetingHostsHelpers';
 import { TARGETING_HOSTS } from './TargetingHostsConsts';
+import TargetingHostsPage from './TargetingHostsPage';
 
 const WrappedTargetingHosts = () => {
   const dispatch = useDispatch();
+  const { perPage, perPageOptions } = useForemanSettings();
+
   const autoRefresh = useSelector(selectAutoRefresh);
   const items = useSelector(selectItems);
-  const status = useSelector(selectStatus);
+  const apiStatus = useSelector(selectApiStatus);
+  const totalHosts = useSelector(selectTotalHosts);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [pagination, setPagination] = useState({
+    page: 1,
+    perPage,
+    perPageOptions,
+  });
+  const [apiUrl, setApiUrl] = useState(getApiUrl(searchQuery, pagination));
+  const intervalExists = useSelector(selectIntervalExists);
 
-  useEffect(() => {
-    dispatch(getData());
+  const handleSearch = query => {
+    const defaultPagination = { page: 1, perPage: pagination.perPage };
+    stopApiInterval();
 
-    return () => {
+    setApiUrl(getApiUrl(query, defaultPagination));
+    setSearchQuery(query);
+    setPagination(defaultPagination);
+  };
+
+  const handlePagination = args => {
+    stopApiInterval();
+    setPagination(args);
+    setApiUrl(getApiUrl(searchQuery, args));
+  };
+
+  const stopApiInterval = () => {
+    if (intervalExists) {
       dispatch(stopInterval(TARGETING_HOSTS));
-    };
-  }, [dispatch]);
+    }
+  };
+
+  const getData = url =>
+    withInterval(
+      get({
+        key: TARGETING_HOSTS,
+        url,
+        handleError: () => {
+          dispatch(stopInterval(TARGETING_HOSTS));
+        },
+      }),
+      1000
+    );
 
   useEffect(() => {
+    dispatch(getData(apiUrl));
+
     if (autoRefresh === 'false') {
       dispatch(stopInterval(TARGETING_HOSTS));
     }
-  }, [autoRefresh, dispatch]);
 
-  return <TargetingHosts status={status} items={items} />;
+    return () => {
+      dispatch(stopInterval(TARGETING_HOSTS));
+    };
+  }, [dispatch, apiUrl, autoRefresh]);
+
+  return (
+    <TargetingHostsPage
+      handleSearch={handleSearch}
+      searchQuery={searchQuery}
+      apiStatus={apiStatus}
+      items={items}
+      totalHosts={totalHosts}
+      pagination={pagination}
+      handlePagination={handlePagination}
+    />
+  );
 };
 
 export default WrappedTargetingHosts;