katello 4.2.2 → 4.3.0.rc1

data/webpack/components/TypeAhead/pf4Search/TypeAheadSearch.js

@@ -1,21 +1,23 @@
 import React from 'react';
 import { InputGroup, Button } from '@patternfly/react-core';
-import { TimesIcon, SearchIcon } from '@patternfly/react-icons';
-import PropTypes from 'prop-types';
+import { SearchIcon } from '@patternfly/react-icons';
 
+import PropTypes from 'prop-types';
 import keyPressHandler from '../helpers/helpers';
 import TypeAheadInput from './TypeAheadInput';
 import TypeAheadItems from './TypeAheadItems';
 import commonSearchPropTypes from '../helpers/commonPropTypes';
+import Bookmark from './../../../components/Bookmark';
 
 const TypeAheadSearch = ({
-  userInputValue, clearSearch, getInputProps, getItemProps, isOpen, inputValue, highlightedIndex,
+  userInputValue, clearSearch, getInputProps, getItemProps, isOpen, highlightedIndex,
   selectedItem, selectItem, openMenu, onSearch, items, activeItems, shouldShowItems,
-  autoSearchEnabled,
+  autoSearchEnabled, isDisabled, bookmarkController, inputValue,
 }) => (
-  <React.Fragment>
+  <>
     <InputGroup>
       <TypeAheadInput
+        isDisabled={isDisabled}
         onKeyPress={
           (e) => {
             keyPressHandler(
@@ -30,36 +32,44 @@ const TypeAheadSearch = ({
           }
         }
         onInputFocus={openMenu}
-        passedProps={getInputProps()}
+        passedProps={{ ...getInputProps(), clearSearch }}
         autoSearchEnabled={autoSearchEnabled}
       />
-      <React.Fragment>
-        {userInputValue &&
-          <Button
-            variant={autoSearchEnabled ? 'plain' : 'control'}
-            className="foreman-pf4-search-clear"
-            onClick={clearSearch}
-          >
-            <TimesIcon />
+      <>
+        {bookmarkController &&
+          <Bookmark
+            {...{
+              isDisabled,
+              selectedItem,
+              selectItem,
+            }}
+            controller={bookmarkController}
+          />}
+        {!autoSearchEnabled &&
+          <Button aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
+            <SearchIcon />
           </Button>}
-      </React.Fragment>
-      {!autoSearchEnabled &&
-        <Button aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
-          <SearchIcon />
-        </Button>}
+      </>
     </InputGroup>
     <TypeAheadItems
       isOpen={shouldShowItems}
       {...{
-      items, highlightedIndex, selectedItem, getItemProps, activeItems,
-    }}
+        items, highlightedIndex, selectedItem, getItemProps, activeItems,
+      }}
     />
-  </React.Fragment>
+  </>
 );
 
 TypeAheadSearch.propTypes = {
+  isDisabled: PropTypes.bool,
   autoSearchEnabled: PropTypes.bool.isRequired,
+  bookmarkController: PropTypes.string,
   ...commonSearchPropTypes,
 };
 
+TypeAheadSearch.defaultProps = {
+  bookmarkController: undefined,
+  isDisabled: undefined,
+};
+
 export default TypeAheadSearch;

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Flex,
+  FlexItem,
+  GridItem,
+  Label,
+} from '@patternfly/react-core';
+
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import ContentViewIcon from '../../../../scenes/ContentViews/components/ContentViewIcon';
+
+const HostContentViewDetails = ({
+  contentView, lifecycleEnvironment, contentViewVersionId,
+  contentViewVersion, contentViewVersionLatest,
+}) => {
+  let versionLabel = `Version ${contentViewVersion}`;
+  if (contentViewVersionLatest) {
+    versionLabel += ' (latest)';
+  }
+
+  return (
+    <GridItem rowSpan={2} md={6} lg={3}>
+      <Card isHoverable>
+        <CardHeader>
+          <CardTitle>{__('Content View Details')}</CardTitle>
+        </CardHeader>
+        <CardBody>
+          <DescriptionList isHorizontal isAutoColumnWidths>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Content View')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Flex>
+                  <FlexItem spacer={{ default: 'spacerNone' }}><ContentViewIcon composite={contentView.composite} /></FlexItem>
+                  <FlexItem><a href={`/content_views/${contentView.id}`}>{`${contentView.name}`}</a> </FlexItem>
+                  <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{`${lifecycleEnvironment.name}`}</Label></FlexItem>
+                </Flex>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Version in use')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Flex>
+                  <FlexItem>
+                    <a href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
+                      {versionLabel}
+                    </a>
+                  </FlexItem>
+                </Flex>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardBody>
+      </Card>
+    </GridItem>
+  );
+};
+
+const ContentViewDetailsCard = ({ hostDetails }) => {
+  if (hostDetails.content_facet_attributes) {
+    return <HostContentViewDetails {...propsToCamelCase(hostDetails.content_facet_attributes)} />;
+  }
+  return null;
+};
+
+HostContentViewDetails.propTypes = {
+  contentView: PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+    composite: PropTypes.bool,
+  }).isRequired,
+  lifecycleEnvironment: PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  }).isRequired,
+  contentViewVersionId: PropTypes.number.isRequired,
+  contentViewVersion: PropTypes.string.isRequired,
+  contentViewVersionLatest: PropTypes.bool.isRequired,
+};
+
+ContentViewDetailsCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    content_facet_attributes: PropTypes.shape({}),
+  }),
+};
+
+ContentViewDetailsCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default ContentViewDetailsCard;

data/webpack/components/extensions/HostDetails/Cards/__tests__/contentViewDetailsCard.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from 'react-testing-lib-wrapper';
+import ContentViewDetailsCard from '../ContentViewDetailsCard';
+
+test('shows host details when content facet is set', () => {
+  const hostDetails = {
+    content_facet_attributes: {
+      content_view: {
+        name: 'CV',
+        id: 100,
+        composite: false,
+      },
+      lifecycle_environment: {
+        name: 'ENV',
+        id: 300,
+      },
+      content_view_version_id: 1000,
+      content_view_version: '1.0',
+      content_view_version_latest: true,
+    },
+  };
+  const { getByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
+  expect(getByText('Version 1.0 (latest)')).toBeInTheDocument();
+});
+
+
+test('doesnot show host details when content facet is not set', () => {
+  const { queryByText } = render(<ContentViewDetailsCard />);
+  expect(queryByText('Version 1.0')).toBeNull();
+});
+
+
+test('shows host details not latest', () => {
+  const hostDetails = {
+    content_facet_attributes: {
+      content_view: {
+        name: 'CV',
+        id: 100,
+        composite: false,
+      },
+      lifecycle_environment: {
+        name: 'ENV',
+        id: 300,
+      },
+      content_view_version_id: 1000,
+      content_view_version: '1.0',
+      content_view_version_latest: false,
+    },
+  };
+  const { getByText, queryByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
+  expect(getByText('Version 1.0')).toBeInTheDocument();
+  expect(queryByText('Version 1.0 (latest)')).toBeNull();
+});

data/webpack/components/extensions/HostDetails/HostErrata/HostErrataActions.js

@@ -0,0 +1,47 @@
+import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
+import { foremanApi } from '../../../../services/api';
+import { HOST_ERRATA_KEY, HOST_ERRATA_APPLICABILITY_KEY, HOST_ERRATA_APPLY_KEY } from './HostErrataConstants';
+import { getResponseErrorMsgs } from '../../../../utils/helpers';
+import { renderTaskStartedToast } from '../../../../scenes/Tasks/helpers';
+
+const errorToast = (error) => {
+  const message = getResponseErrorMsgs(error.response);
+  return message;
+};
+
+export const getInstallableErrata = (hostId, params) => get({
+  type: API_OPERATIONS.GET,
+  key: HOST_ERRATA_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}/errata`),
+  params,
+});
+
+export const regenerateApplicability = (hostId, params) => put({
+  type: API_OPERATIONS.PUT,
+  key: HOST_ERRATA_APPLICABILITY_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}/errata/applicability`),
+  // This endpoint doesn't return a task, so can't use renderTaskStartedToast
+  // also can't use successToast because we want the type to be 'info'
+  handleSuccess: () => {
+    window.tfm.toastNotifications.notify({
+      message: 'Regenerating errata applicability.',
+      type: 'info',
+      link: {
+        children: 'View related tasks',
+        href: '/foreman_tasks/tasks?search=action+~+applicability&page=1',
+      },
+    });
+  },
+  errorToast: error => errorToast(error),
+  params,
+});
+
+export const applyViaKatelloAgent = (hostId, params) => put({
+  type: API_OPERATIONS.PUT,
+  key: HOST_ERRATA_APPLY_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}/errata/apply`),
+  handleSuccess: response => renderTaskStartedToast(response.data),
+  errorToast: error => errorToast(error),
+  params,
+});
+

data/webpack/components/extensions/HostDetails/HostErrata/HostErrataConstants.js

@@ -0,0 +1,32 @@
+export const HOST_ERRATA_KEY = 'HOST_ERRATUM';
+export const HOST_ERRATA_APPLICABILITY_KEY = 'HOST_ERRATA_APPLICABILITY';
+export const HOST_ERRATA_APPLY_KEY = 'HOST_ERRATUM_APPLY';
+
+export const ERRATA_TYPES = {
+  SECURITY: 'Security',
+  BUGFIX: 'Bugfix',
+  ENHANCEMENT: 'Enhancement',
+};
+export const ERRATA_SEVERITIES = {
+  NOT_APPLICABLE: 'N/A',
+  LOW: 'Low',
+  MODERATE: 'Moderate',
+  IMPORTANT: 'Important',
+  CRITICAL: 'Critical',
+};
+
+export const TYPES_TO_PARAM = {
+  [ERRATA_TYPES.SECURITY]: 'security',
+  [ERRATA_TYPES.BUGFIX]: 'bugfix',
+  [ERRATA_TYPES.ENHANCEMENT]: 'enhancement',
+};
+
+export const SEVERITIES_TO_PARAM = {
+  [ERRATA_SEVERITIES.NOT_APPLICABLE]: 'None',
+  [ERRATA_SEVERITIES.LOW]: 'Low',
+  [ERRATA_SEVERITIES.MODERATE]: 'Moderate',
+  [ERRATA_SEVERITIES.IMPORTANT]: 'Important',
+  [ERRATA_SEVERITIES.CRITICAL]: 'Critical',
+};
+
+export default HOST_ERRATA_KEY;

data/webpack/components/extensions/HostDetails/HostErrata/HostErrataSelectors.js

@@ -0,0 +1,16 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { HOST_ERRATA_KEY } from './HostErrataConstants';
+
+export const selectHostErrata = state =>
+  selectAPIResponse(state, HOST_ERRATA_KEY) || {};
+
+export const selectHostErrataStatus = state =>
+  selectAPIStatus(state, HOST_ERRATA_KEY) || STATUS.PENDING;
+
+export const selectHostErrataError = state =>
+  selectAPIError(state, HOST_ERRATA_KEY);

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/EmptyPage.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PFEmptyPage from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+
+const EmptyPage = ({ header }) => (
+  <div className="host-details-tab-item">
+    <PFEmptyPage
+      icon="enterprise"
+      header={header}
+      description="This is a demo for adding content to the new host details page"
+    />
+  </div>
+);
+
+EmptyPage.propTypes = {
+  header: PropTypes.string.isRequired,
+};
+
+export default EmptyPage;

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/SecondaryTabsRoutes.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { ErrataTab } from '../ErrataTab';
+import { route } from './helpers';
+
+const SecondaryTabRoutes = () => (
+  <Switch>
+    <Route exact path="/Content">
+      <Redirect to={route('errata')} />
+    </Route>
+    <Route path={route('errata')}>
+      <ErrataTab />
+    </Route>
+  </Switch>
+);
+
+export default SecondaryTabRoutes;

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/constants.js

@@ -0,0 +1,7 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const SECONDARY_TABS = [
+  { key: 'errata', title: __('Errata') },
+];
+
+export default SECONDARY_TABS;

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/helpers.js

@@ -0,0 +1,3 @@
+export const hashRoute = subpath => `#/Content/${subpath}`;
+export const route = subpath => hashRoute(subpath).substring(1);
+export const activeTab = path => path.split('/')[2];

data/webpack/components/extensions/HostDetails/Tabs/ContentTab/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import SecondaryTabRoutes from './SecondaryTabsRoutes';
+import { activeTab } from './helpers';
+import SECONDARY_TABS from './constants';
+
+const ContentTab = ({ location: { pathname } }) => {
+  const hashHistory = useHistory();
+  return (
+    <>
+      <Tabs
+        onSelect={(evt, subTab) => hashHistory.push(subTab)}
+        isSecondary
+        activeKey={activeTab(pathname)}
+      >
+        {SECONDARY_TABS.map(({ key, title }) => (
+          <Tab
+            key={key}
+            eventKey={key}
+            title={<TabTitleText>{title}</TabTitleText>}
+          />
+        ))}
+      </Tabs>
+      <SecondaryTabRoutes />
+    </>
+  );
+};
+
+ContentTab.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }),
+};
+ContentTab.defaultProps = {
+  location: { pathname: '' },
+};
+
+export default ContentTab;

data/webpack/components/extensions/HostDetails/Tabs/EnableTracerEmptyState.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  Title,
+  EmptyStateVariant,
+  Button,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { WrenchIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import EnableTracerModal from './EnableTracerModal';
+
+const EnableTracerEmptyState = () => {
+  const title = __('Traces are not enabled');
+  const body = __('Traces help administrators identify applications that need to be restarted after a system is patched.');
+  const [enableTracerModalOpen, setEnableTracerModalOpen] = useState(false);
+
+  return (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={WrenchIcon} />
+      <Title headingLevel="h2" size="lg">
+        {title}
+      </Title>
+      <EmptyStateBody>
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>{body}</FlexItem>
+          <FlexItem>
+            <Button onClick={() => setEnableTracerModalOpen(true)}>
+              {__('Enable Traces')}
+            </Button>
+          </FlexItem>
+        </Flex>
+      </EmptyStateBody>
+      <EnableTracerModal isOpen={enableTracerModalOpen} setIsOpen={setEnableTracerModalOpen} />
+    </EmptyState>
+  );
+};
+
+export default EnableTracerEmptyState;

data/webpack/components/extensions/HostDetails/Tabs/EnableTracerModal.js

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  Modal,
+  ModalVariant,
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import { installTracerPackage } from './HostTracesActions';
+import { katelloPackageInstallUrl } from './customizedRexUrlHelpers';
+
+const EnableTracerModal = ({ isOpen, setIsOpen }) => {
+  const title = __('Enable Tracer');
+  const body = __('Enabling will install the katello-host-tools-tracer package on the host.');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [buttonLoading, setButtonLoading] = useState(false);
+  const toggleDropdownOpen = () => setIsDropdownOpen(prev => !prev);
+  const dropdownOptions = [
+    __('via remote execution'),
+    __('via customized remote execution'),
+  ];
+  const [selectedOption, setSelectedOption] = useState(dropdownOptions[0]);
+  const dispatch = useDispatch();
+  const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
+  const { name: hostname } = hostDetails;
+  const handleSelect = () => {
+    setIsDropdownOpen(false);
+  };
+  const enableTracer = () => {
+    dispatch(installTracerPackage({ hostname }));
+    setIsOpen(false);
+  };
+
+  const dropdownItems = dropdownOptions.map(text => (
+    <DropdownItem key={`option_${text}`} onClick={() => setSelectedOption(text)}>{text}</DropdownItem>
+  ));
+
+  const customizedRexUrl = katelloPackageInstallUrl({ hostname });
+
+  const getEnableTracerButton = () => {
+    const [viaRex] = dropdownOptions;
+    if (selectedOption === viaRex) {
+      return (
+        <Button
+          key="enable_button"
+          type="submit"
+          variant="primary"
+          onClick={enableTracer}
+        >
+          {title}
+        </Button>
+      );
+    }
+    return (
+      <Button
+        key="enable_button"
+        component="a"
+        isLoading={buttonLoading}
+        onClick={() => setButtonLoading(true)}
+        variant="primary"
+        href={customizedRexUrl}
+      >
+        {title}
+      </Button>
+    );
+  };
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title={title}
+      width="28em"
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      actions={[
+        getEnableTracerButton(),
+        <Button key="cancel_button" variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>,
+      ]}
+    >
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>{body}</FlexItem>
+        <FlexItem><div>{__('Select a provider to install katello-host-tools-tracer')}</div></FlexItem>
+        <FlexItem>
+          <Dropdown
+            toggle={
+              <DropdownToggle
+                id="toggle-enable-tracer-modal-dropdown"
+                onToggle={toggleDropdownOpen}
+                toggleIndicator={CaretDownIcon}
+              >
+                {selectedOption}
+              </DropdownToggle>
+            }
+            onSelect={handleSelect}
+            isOpen={isDropdownOpen}
+            dropdownItems={dropdownItems}
+            menuAppendTo="parent"
+          />
+        </FlexItem>
+      </Flex>
+    </Modal>
+  );
+};
+
+EnableTracerModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+};
+
+export default EnableTracerModal;