foreman_rh_cloud 3.0.14 → 3.0.15

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/CloudConnectorConstants.js

@@ -0,0 +1,6 @@
+export const CONFIGURE_CLOUD_CONNECTOR = 'CONFIGURE_CLOUD_CONNECTOR';
+export const CONNECTOR_STATUS = {
+  PENDING: 'PENDING',
+  RESOLVED: 'RESOLVED',
+  NOT_RESOLVED: 'NOT_RESOLVED',
+};

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/CloudConnectorSelectors.js

@@ -0,0 +1,14 @@
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+
+import {
+  CONFIGURE_CLOUD_CONNECTOR,
+  CONNECTOR_STATUS,
+} from './CloudConnectorConstants';
+
+export const selectStatus = state =>
+  selectAPIResponse(state, CONFIGURE_CLOUD_CONNECTOR)?.result === 'success'
+    ? CONNECTOR_STATUS.RESOLVED
+    : CONNECTOR_STATUS.NOT_RESOLVED;
+
+export const selectJobLink = state =>
+  selectAPIResponse(state, CONFIGURE_CLOUD_CONNECTOR).job_link || '';

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/__tests__/CloudConnectorActions.test.js

@@ -0,0 +1,9 @@
+import { testActionSnapshotWithFixtures } from '@theforeman/test';
+import { configureCloudConnector } from '../CloudConnectorActions';
+
+const fixtures = {
+  'should configureCloudConnector': () => configureCloudConnector(),
+};
+
+describe('CloudConnector button actions', () =>
+  testActionSnapshotWithFixtures(fixtures));

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/__tests__/CloudConnectorButton.test.js

@@ -0,0 +1,22 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import { CloudConnectorButton } from '../CloudConnectorButton';
+import { CONNECTOR_STATUS } from '../CloudConnectorConstants';
+
+const fixtures = {
+  'render no cloud connector': {
+    status: CONNECTOR_STATUS.NOT_RESOLVED,
+    onClick: jest.fn(),
+  },
+  'render resolved cloud connector': {
+    status: CONNECTOR_STATUS.RESOLVED,
+    onClick: jest.fn(),
+  },
+  'render pending connector': {
+    jobLink: '/job-link',
+    status: CONNECTOR_STATUS.PENDING,
+    onClick: jest.fn(),
+  },
+};
+
+describe('CloudConnectorButton', () =>
+  testComponentSnapshotsWithFixtures(CloudConnectorButton, fixtures));

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/__tests__/__snapshots__/CloudConnectorActions.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CloudConnector button actions should configureCloudConnector 1`] = `
+Object {
+  "errorToast": [Function],
+  "key": "CONFIGURE_CLOUD_CONNECTOR",
+  "successToast": [Function],
+  "type": "post-some-type",
+  "url": "/foreman_inventory_upload/cloud_connector",
+}
+`;

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/__tests__/__snapshots__/CloudConnectorButton.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CloudConnectorButton render no cloud connector 1`] = `
+<Button
+  onClick={[MockFunction]}
+  variant="secondary"
+>
+  Configure Cloud Connector
+</Button>
+`;
+
+exports[`CloudConnectorButton render pending connector 1`] = `
+<Popover
+  aria-label="Popover with Link to cloud connector job"
+  bodyContent={
+    <div>
+      Cloud connector job is still running, you can view it here:
+      <a
+        href="/job-link"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Open job
+      </a>
+    </div>
+  }
+  closeBtnAriaLabel="Close cloud connector Popover"
+>
+  <Button
+    variant="secondary"
+  >
+    <Spinner
+      size="sm"
+    />
+     
+    Cloud Connector in progress
+  </Button>
+</Popover>
+`;
+
+exports[`CloudConnectorButton render resolved cloud connector 1`] = `
+<Button
+  isDisabled={true}
+  variant="secondary"
+>
+  Cloud Connector is configured
+</Button>
+`;

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/index.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { CloudConnectorButton } from './CloudConnectorButton';
+import {
+  configureCloudConnector,
+  getCloudConnector,
+} from './CloudConnectorActions';
+import { selectStatus, selectJobLink } from './CloudConnectorSelectors';
+
+const ConnectedCloudConnectorButton = () => {
+  const status = useSelector(selectStatus);
+  const jobLink = useSelector(selectJobLink);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getCloudConnector());
+  }, [dispatch]);
+  return (
+    <CloudConnectorButton
+      status={status}
+      onClick={() => dispatch(configureCloudConnector())}
+      jobLink={jobLink}
+    />
+  );
+};
+
+export default ConnectedCloudConnectorButton;

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/SyncButton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon, Spinner } from 'patternfly-react';
+import { Spinner, Button } from '@patternfly/react-core';
+import { ExclamationTriangleIcon, RedoIcon } from '@patternfly/react-icons';
 import { STATUS } from 'foremanReact/constants';
 import SyncModal from './components/Modal';
 import { SYNC_BUTTON_TEXT } from '../../../../ForemanInventoryConstants';
@@ -24,19 +25,16 @@ class SyncButton extends React.Component {
         <Button
           className="sync_button"
           onClick={handleClick}
-          bsSize="lg"
-          disabled={status === STATUS.PENDING}
+          size="lg"
+          isDisabled={status === STATUS.PENDING}
+          variant="secondary"
         >
           {!cloudToken && (
             <span>
-              <Icon name="warning" />{' '}
+              <ExclamationTriangleIcon />{' '}
             </span>
           )}
-          {status === STATUS.PENDING ? (
-            <Spinner loading size="xs" />
-          ) : (
-            <Icon name="refresh" />
-          )}
+          {status === STATUS.PENDING ? <Spinner size="sm" /> : <RedoIcon />}
           {SYNC_BUTTON_TEXT}
         </Button>
       </React.Fragment>

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/SyncButtonActions.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import API from 'foremanReact/API';
+import { API } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/redux/actions/toasts';
 import { inventoryUrl } from '../../../../ForemanInventoryHelpers';
 import Toast from './components/Toast';

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/__tests__/SyncButtonActions.test.js

@@ -1,9 +1,9 @@
 import { testActionSnapshotWithFixtures } from '@theforeman/test';
-import API from 'foremanReact/API';
+import { API } from 'foremanReact/redux/API';
 import { handleSync } from '../SyncButtonActions';
 import { successResponse } from './SyncButtonFixtures';
 
-jest.mock('foremanReact/API');
+jest.mock('foremanReact/redux/API');
 API.post.mockImplementation(async () => successResponse);
 
 const fixtures = {

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/__tests__/__snapshots__/SyncButton.test.js.snap

@@ -7,18 +7,16 @@ exports[`SyncButton rendering render with Props 1`] = `
     toggleModal={[Function]}
   />
   <Button
-    active={false}
-    block={false}
-    bsClass="btn"
-    bsSize="lg"
-    bsStyle="default"
     className="sync_button"
-    disabled={false}
+    isDisabled={false}
     onClick={[Function]}
+    size="lg"
+    variant="secondary"
   >
-    <Icon
-      name="refresh"
-      type="fa"
+    <RedoIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
     />
      Sync inventory status
   </Button>

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/ToolbarButtons.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import DocsButton from '../DocsButton';
-import HistoryButton from '../HistoryButton';
 import SyncButton from '../SyncButton';
+import CloudConnectorButton from '../CloudConnectorButton';
 import './toolbarButtons.scss';
 
 const ToolbarButtons = () => (
   <div className="inventory_toolbar_buttons">
+    <CloudConnectorButton />
     <SyncButton />
-    <HistoryButton />
-    <DocsButton />
   </div>
 );
 

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/__tests__/__snapshots__/ToolbarButtons.test.js.snap

@@ -4,8 +4,7 @@ exports[`ToolbarButtons rendering render without Props 1`] = `
 <div
   className="inventory_toolbar_buttons"
 >
+  <ConnectedCloudConnectorButton />
   <Connect(SyncButton) />
-  <HistoryButton />
-  <DocsButton />
 </div>
 `;

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/toolbarButtons.scss

@@ -1,9 +1,8 @@
 .inventory_toolbar_buttons {
   float: right;
 
-  .tasks_history_button,
   .sync_button {
-    margin-right: 5px;
+    margin-left: 5px;
   }
 
   .sync_button .spinner {

data/webpack/ForemanInventoryUpload/Components/Terminal/terminal.scss

@@ -10,6 +10,7 @@
     font-family: monospace;
     font-size: 16px;
     color: #22da26;
+    overflow-wrap: anywhere;
 
     &.terminal_error {
       color: #f00;

data/webpack/ForemanInventoryUpload/ForemanInventoryConstants.js

@@ -2,8 +2,8 @@ import { translate as __ } from 'foremanReact/common/I18n';
 
 export const INVENTORY_PAGE_TITLE = __('Red Hat Inventory');
 
-export const DOCS_BUTTON_TEXT = __(' Documentation');
+export const DOCS_BUTTON_TEXT = __('Documentation');
 
-export const ACTIONS_HISTORY_BUTTON_TEXT = __(' Actions history');
+export const ACTIONS_HISTORY_BUTTON_TEXT = __('Actions history');
 
 export const SYNC_BUTTON_TEXT = __(' Sync inventory status');

data/webpack/ForemanInventoryUpload/ForemanInventoryUpload.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import { IntlProvider } from 'react-intl';
-import { Grid } from 'patternfly-react';
+import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import AccountList from './Components/AccountList';
 import PageHeader from './Components/PageHeader';
-import { INVENTORY_PAGE_TITLE } from './ForemanInventoryConstants';
 
-const ForemanInventoryUpload = () => {
-  document.title = INVENTORY_PAGE_TITLE;
-  return (
-    <IntlProvider locale={navigator.language}>
-      <Grid fluid className="inventory-upload">
-        <PageHeader />
-        <AccountList />
-      </Grid>
-    </IntlProvider>
-  );
-};
+const ForemanInventoryUpload = () => (
+  <div className="rh-cloud-page">
+    <PageLayout searchable={false} beforeToolbarComponent={<PageHeader />}>
+      <AccountList />
+    </PageLayout>
+  </div>
+);
 
 ForemanInventoryUpload.propTypes = {};
 

data/webpack/ForemanInventoryUpload/__tests__/__snapshots__/ForemanInventoryUpload.test.js.snap

@@ -1,17 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ForemanInventoryUpload render without Props 1`] = `
-<IntlProvider
-  locale="en-US"
+<div
+  className="rh-cloud-page"
 >
-  <Grid
-    bsClass="container"
-    className="inventory-upload"
-    componentClass="div"
-    fluid={true}
+  <PageLayout
+    beforeToolbarComponent={<PageHeader />}
+    searchable={false}
   >
-    <PageHeader />
     <Connect(AccountList) />
-  </Grid>
-</IntlProvider>
+  </PageLayout>
+</div>
 `;

data/webpack/ForemanRhCloudPages.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import componentRegistry from 'foremanReact/components/componentRegistry';
+import { registerRoutes as foremanRegisterRoutes } from 'foremanReact/routes/RoutingService';
 import ForemanInventoryUpload from './ForemanInventoryUpload';
 import InsightsCloudSync from './InsightsCloudSync';
 import InsightsHostDetailsTab from './InsightsHostDetailsTab';
@@ -12,3 +14,20 @@ const pages = [
 export const registerPages = () => {
   pages.forEach(page => componentRegistry.register(page));
 };
+
+export const routes = [
+  {
+    path: '/foreman_rh_cloud/insights_cloud',
+    exact: true,
+    render: props => <InsightsCloudSync {...props} />,
+  },
+  {
+    path: '/foreman_rh_cloud/inventory_upload',
+    exact: true,
+    render: props => <ForemanInventoryUpload {...props} />,
+  },
+];
+
+export const registerRoutes = () => {
+  foremanRegisterRoutes('foreman_rh_cloud', routes);
+};

data/webpack/InsightsCloudSync/Components/InsightsHeader/InsightsHeader.scss

@@ -0,0 +1,4 @@
+.insights-header {
+  margin-bottom: '15px';
+  overflow: auto;
+}

data/webpack/InsightsCloudSync/Components/InsightsHeader/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import InsightsSettings from '../InsightsSettings';
+import './InsightsHeader.scss';
+
+const InsightsHeader = () => (
+  <div className="insights-header">
+    <InsightsSettings />
+    <p>
+      {__(`Insights synchronization process is used to provide Insights
+             recommendations output for hosts managed here`)}
+    </p>
+  </div>
+);
+
+export default InsightsHeader;

data/webpack/InsightsCloudSync/Components/InsightsSettings/InsightsSettingsActions.js

@@ -1,4 +1,4 @@
-import API from 'foremanReact/API';
+import { API } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/redux/actions/toasts';
 import { insightsCloudUrl } from '../../InsightsCloudSyncHelpers';
 import {

data/webpack/InsightsCloudSync/Components/InsightsSettings/__tests__/InsightsSettingsActions.test.js

@@ -1,5 +1,5 @@
 import { testActionSnapshotWithFixtures } from '@theforeman/test';
-import API from 'foremanReact/API';
+import { API } from 'foremanReact/redux/API';
 import {
   getInsightsSyncSettings,
   setInsightsSyncEnabled,
@@ -10,7 +10,7 @@ const serverMock = {
   data: { insightsSyncEnabled: true },
 };
 
-jest.mock('foremanReact/API');
+jest.mock('foremanReact/redux/API');
 API.get.mockImplementation(() => serverMock);
 API.patch.mockImplementation(() => serverMock);
 

data/webpack/InsightsCloudSync/Components/InsightsSettings/insightsSettings.scss

@@ -1,4 +1,5 @@
 .insights_settings {
+  margin-left: 10px;
   border: 1px solid #ededed;
   border-radius: 4px;
   padding: 10px;

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -0,0 +1,121 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
+import SelectAllAlert from './SelectAllAlert';
+import { columns, actions } from './InsightsTableConstants';
+import TableEmptyState from './components/EmptyState';
+import {
+  modifySelectedRows,
+  getSortColumnIndex,
+  getPerPageOptions,
+} from './InsightsTableHelpers';
+import './table.scss';
+
+const InsightsTable = ({
+  page,
+  perPage: urlPerPage,
+  status,
+  sortBy,
+  sortOrder,
+  hits,
+  query,
+  itemCount,
+  fetchInsights,
+  onTableSetPage,
+  onTablePerPageSelect,
+  onTableSort,
+  onTableSelect,
+  selectedIds,
+  showSelectAllAlert,
+  selectAll,
+  clearAllSelection,
+  error,
+  isAllSelected,
+}) => {
+  const { perPage: appPerPage } = useForemanSettings();
+  const perPage = urlPerPage || appPerPage;
+
+  // acts as componentDidMount
+  useEffect(() => {
+    fetchInsights({ page, perPage, query, sortBy, sortOrder });
+  }, []);
+
+  return (
+    <React.Fragment>
+      <SelectAllAlert
+        itemCount={itemCount}
+        selectedIds={selectedIds}
+        showSelectAllAlert={showSelectAllAlert}
+        selectAll={selectAll}
+        clearAllSelection={clearAllSelection}
+        isAllSelected={isAllSelected}
+      />
+      <Table
+        aria-label="Recommendations Table"
+        onSelect={(_event, isSelected, rowId) =>
+          onTableSelect(_event, isSelected, rowId, hits, selectedIds)
+        }
+        canSelectAll
+        sortBy={{ index: getSortColumnIndex(sortBy), direction: sortOrder }}
+        onSort={onTableSort}
+        cells={columns}
+        rows={modifySelectedRows(hits, selectedIds)}
+        actions={actions}
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+      <TableEmptyState status={status} error={error} />
+      <Pagination
+        itemCount={itemCount}
+        widgetId="recommendation-pagination"
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={onTableSetPage}
+        onPerPageSelect={onTablePerPageSelect}
+        perPageOptions={getPerPageOptions(urlPerPage, appPerPage)}
+      />
+    </React.Fragment>
+  );
+};
+
+InsightsTable.propTypes = {
+  page: PropTypes.number,
+  perPage: PropTypes.number,
+  status: PropTypes.string,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  hits: PropTypes.array.isRequired,
+  itemCount: PropTypes.number.isRequired,
+  onTableSetPage: PropTypes.func.isRequired,
+  onTablePerPageSelect: PropTypes.func.isRequired,
+  onTableSort: PropTypes.func.isRequired,
+  onTableSelect: PropTypes.func.isRequired,
+  selectedIds: PropTypes.object,
+  showSelectAllAlert: PropTypes.bool,
+  selectAll: PropTypes.func.isRequired,
+  clearAllSelection: PropTypes.func.isRequired,
+  fetchInsights: PropTypes.func.isRequired,
+  query: PropTypes.string,
+  error: PropTypes.string,
+  isAllSelected: PropTypes.bool,
+};
+
+InsightsTable.defaultProps = {
+  page: 1,
+  perPage: null,
+  status: null,
+  sortBy: '',
+  sortOrder: '',
+  selectedIds: {},
+  showSelectAllAlert: false,
+  query: '',
+  error: '',
+  isAllSelected: false,
+};
+
+export default InsightsTable;