katello 4.4.2.2 → 4.5.0.rc1

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/__tests__/envPaths.fixtures.json

@@ -0,0 +1,320 @@
+{
+    "total": 2,
+    "subtotal": 2,
+    "selectable": 2,
+    "page": null,
+    "per_page": null,
+    "error": null,
+    "search": null,
+    "sort": {
+        "by": null,
+        "order": null
+    },
+    "results": [
+        {
+            "environments": [
+                {
+                    "library": true,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 1,
+                    "name": "Library",
+                    "label": "Library",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-03-18 14:11:05 -0400",
+                    "updated_at": "2022-03-18 14:11:05 -0400",
+                    "prior": null,
+                    "successor": null,
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 2,
+                        "packages": 55250,
+                        "module_streams": 445,
+                        "errata": {
+                            "security": 1701,
+                            "bugfix": 4272,
+                            "enhancement": 952,
+                            "total": 6927
+                        },
+                        "yum_repositories": 6,
+                        "docker_repositories": 0,
+                        "ostree_repositories": 0,
+                        "products": 4
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": false,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": [
+                        {
+                            "name": "cv_1",
+                            "id": 2
+                        },
+                        {
+                            "name": "composite_cv",
+                            "id": 3
+                        }
+                    ]
+                },
+                {
+                    "library": false,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 2,
+                    "name": "dev",
+                    "label": "dev",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-03-29 15:58:06 -0400",
+                    "updated_at": "2022-03-29 15:58:06 -0400",
+                    "prior": {
+                        "name": "Library",
+                        "id": 1
+                    },
+                    "successor": {
+                        "name": "stages",
+                        "id": 3
+                    },
+                    "counts": {
+                        "content_hosts": 2,
+                        "content_views": 2
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": false,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": [
+                        {
+                            "name": "cv_1",
+                            "id": 2
+                        },
+                        {
+                            "name": "composite_cv",
+                            "id": 3
+                        }
+                    ]
+                },
+                {
+                    "library": false,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 3,
+                    "name": "stages",
+                    "label": "stages",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-03-29 15:58:20 -0400",
+                    "updated_at": "2022-03-29 15:58:20 -0400",
+                    "prior": {
+                        "name": "dev",
+                        "id": 2
+                    },
+                    "successor": {
+                        "name": "prod",
+                        "id": 4
+                    },
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 1
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": true,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": [
+                        {
+                            "name": "composite_cv",
+                            "id": 3
+                        }
+                    ]
+                },
+                {
+                    "library": false,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 4,
+                    "name": "prod",
+                    "label": "prod",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-03-29 15:58:31 -0400",
+                    "updated_at": "2022-03-29 15:58:31 -0400",
+                    "prior": {
+                        "name": "stages",
+                        "id": 3
+                    },
+                    "successor": null,
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 0
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": true,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": []
+                }
+            ]
+        },
+        {
+            "environments": [
+                {
+                    "library": true,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 1,
+                    "name": "Library",
+                    "label": "Library",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-03-18 14:11:05 -0400",
+                    "updated_at": "2022-03-18 14:11:05 -0400",
+                    "prior": null,
+                    "successor": null,
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 2,
+                        "packages": 55250,
+                        "module_streams": 445,
+                        "errata": {
+                            "security": 1701,
+                            "bugfix": 4272,
+                            "enhancement": 952,
+                            "total": 6927
+                        },
+                        "yum_repositories": 6,
+                        "docker_repositories": 0,
+                        "ostree_repositories": 0,
+                        "products": 4
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": false,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": [
+                        {
+                            "name": "cv_1",
+                            "id": 2
+                        },
+                        {
+                            "name": "composite_cv",
+                            "id": 3
+                        }
+                    ]
+                },
+                {
+                    "library": false,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 5,
+                    "name": "Path Two",
+                    "label": "Path_Two",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-04-04 11:35:21 -0400",
+                    "updated_at": "2022-04-04 11:35:21 -0400",
+                    "prior": {
+                        "name": "Library",
+                        "id": 1
+                    },
+                    "successor": {
+                        "name": "path2_2",
+                        "id": 6
+                    },
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 0
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": true,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": []
+                },
+                {
+                    "library": false,
+                    "registry_name_pattern": null,
+                    "registry_unauthenticated_pull": false,
+                    "id": 6,
+                    "name": "path2_2",
+                    "label": "path2_2",
+                    "description": null,
+                    "organization_id": 1,
+                    "organization": {
+                        "name": "Default Organization",
+                        "label": "Default_Organization",
+                        "id": 1
+                    },
+                    "created_at": "2022-04-04 11:35:33 -0400",
+                    "updated_at": "2022-04-04 11:35:33 -0400",
+                    "prior": {
+                        "name": "Path Two",
+                        "id": 5
+                    },
+                    "successor": null,
+                    "counts": {
+                        "content_hosts": 0,
+                        "content_views": 0
+                    },
+                    "permissions": {
+                        "create_lifecycle_environments": true,
+                        "view_lifecycle_environments": true,
+                        "edit_lifecycle_environments": true,
+                        "destroy_lifecycle_environments": true,
+                        "promote_or_remove_content_views_to_environments": true
+                    },
+                    "content_views": []
+                }
+            ]
+        }
+    ]
+}

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

@@ -14,9 +14,12 @@ import PropTypes from 'prop-types';
 import { ChartPie } from '@patternfly/react-charts';
 import { ErrataMapper } from '../../../../components/Errata';
 import { hostIsRegistered } from '../hostDetailsHelpers';
+import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
+import EmptyStateMessage from '../../../Table/EmptyStateMessage';
+import './ErrataOverviewCard.scss';
 
 function HostInstallableErrata({
-  id, errataCounts,
+  id, errataCounts, errataStatus,
 }) {
   const errataTotal = errataCounts.total;
   const errataSecurity = errataCounts.security;
@@ -33,41 +36,55 @@ function HostInstallableErrata({
     <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
       <Card isHoverable>
         <CardHeader>
-          <CardTitle>{__('Installable Errata')}</CardTitle>
+          <CardTitle>{__('Installable errata')}</CardTitle>
         </CardHeader>
         <CardBody>
-          <Flex direction="column">
-            <FlexItem>
-              <a href="#/Content/errata">
-                {errataTotal} errata
-              </a>
-            </FlexItem>
-            <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
-              <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
-                <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
-                  <ChartPie
-                    ariaDesc="errataChart"
-                    data={chartData}
-                    constrainToVisibleArea
-                    labels={({ datum }) => `${datum.y} ${datum.w}`}
-                    padding={{
-                      bottom: 20,
-                      left: 20,
-                      right: 140,
-                      top: 20,
-                    }}
-                    width={250}
-                    height={130}
-                  />
+          {errataStatus === 0 &&
+            <EmptyStateMessage
+              title={__('All errata up-to-date')}
+              body={__('No action required')}
+              happy
+            />
+          }
+          {errataStatus !== 0 &&
+            <Flex direction="column">
+              <FlexItem>
+                <TranslatedAnchor
+                  id="errata-card-total-count"
+                  href="#/Content/errata"
+                  count={errataTotal}
+                  plural="errata"
+                  singular="erratum"
+                  ariaLabel={`${errataTotal} total errata`}
+                />
+              </FlexItem>
+              <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
+                <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
+                  <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
+                    <ChartPie
+                      ariaDesc="errataChart"
+                      data={chartData}
+                      constrainToVisibleArea
+                      labels={({ datum }) => `${datum.y} ${datum.w}`}
+                      padding={{
+                        bottom: 20,
+                        left: 20,
+                        right: 140,
+                        top: 20,
+                      }}
+                      width={250}
+                      height={130}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className="erratalegend" style={{ minWidth: '140px' }}>
-                <FlexItem>
-                  <ErrataMapper data={chartData} id={id} />
-                </FlexItem>
-              </div>
+                <div className="erratalegend" style={{ minWidth: '140px' }}>
+                  <FlexItem>
+                    <ErrataMapper data={chartData} id={id} />
+                  </FlexItem>
+                </div>
+              </Flex>
             </Flex>
-          </Flex>
+          }
         </CardBody>
       </Card>
     </GridItem>
@@ -76,10 +93,11 @@ function HostInstallableErrata({
 
 const ErrataOverviewCard = ({ hostDetails }) => {
   if (hostIsRegistered({ hostDetails }) && hostDetails.content_facet_attributes) {
-    const { id: hostId } = hostDetails;
+    const { id: hostId, errata_status: errataStatus } = hostDetails;
     return (<HostInstallableErrata
       {...propsToCamelCase(hostDetails.content_facet_attributes)}
       id={hostId}
+      errataStatus={errataStatus}
     />);
   }
   return null;
@@ -93,12 +111,18 @@ HostInstallableErrata.propTypes = {
     security: PropTypes.number,
     total: PropTypes.number,
   }).isRequired,
+  errataStatus: PropTypes.number,
+};
+
+HostInstallableErrata.defaultProps = {
+  errataStatus: undefined,
 };
 
 ErrataOverviewCard.propTypes = {
   hostDetails: PropTypes.shape({
     content_facet_attributes: PropTypes.shape({}),
     id: PropTypes.number,
+    errata_status: PropTypes.number,
   }),
 };
 

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -0,0 +1,3 @@
+.pf-c-empty-state {
+  margin-top: 0;
+}

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsActions.js

@@ -0,0 +1,30 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
+import { errorToast } from '../../../../../scenes/Tasks/helpers';
+import api, { foremanApi } from '../../../../../services/api';
+import { ALTER_HOST_HOST_COLLECTIONS_KEY, AVAILABLE_HOST_COLLECTIONS_KEY, REMOVABLE_HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
+
+export const getHostAvailableHostCollections = params => get({
+  type: API_OPERATIONS.GET,
+  key: AVAILABLE_HOST_COLLECTIONS_KEY,
+  url: api.getApiUrl('/host_collections?available_for=host'),
+  params,
+});
+
+export const getHostRemovableHostCollections = params => get({
+  type: API_OPERATIONS.GET,
+  key: REMOVABLE_HOST_COLLECTIONS_KEY,
+  url: api.getApiUrl('/host_collections'),
+  params,
+});
+
+export const alterHostCollections = (hostId, params, refreshHostDetails) => put({
+  type: API_OPERATIONS.PUT,
+  key: ALTER_HOST_HOST_COLLECTIONS_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}/host_collections`),
+  params,
+  successToast: () => __('Host collections updated'),
+  errorToast: error => errorToast(error),
+  handleSuccess: () => refreshHostDetails(),
+});
+

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

@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import {
+  Badge,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  ExpandableSection,
+  KebabToggle,
+  Flex,
+  FlexItem,
+  GridItem,
+  DropdownItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import { useSet } from '../../../../Table/TableHooks';
+import { HostCollectionsAddModal, HostCollectionsRemoveModal } from './HostCollectionsModal';
+import { hostIsRegistered } from '../../hostDetailsHelpers';
+
+const HostCollectionsDetails = ({
+  hostCollections, id: hostId, name: hostName,
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const toggleBulkAction = () => setIsDropdownOpen(prev => !prev);
+
+  const expandedHostCollections = useSet([]);
+  const hostCollectionIds = hostCollections?.map(({ id }) => id) ?? [];
+
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const closeAddModal = () => setIsAddModalOpen(false);
+  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
+  const closeRemoveModal = () => setIsRemoveModalOpen(false);
+
+  const openAddHostCollectionsModal = () => {
+    setIsDropdownOpen(false);
+    setIsAddModalOpen(true);
+  };
+  const openRemoveHostCollectionsModal = () => {
+    setIsDropdownOpen(false);
+    setIsRemoveModalOpen(true);
+  };
+
+  const dropdownItems = [
+    <DropdownItem
+      aria-label="add_host_to_collections"
+      key="add_host_to_collections"
+      component="button"
+      onClick={openAddHostCollectionsModal}
+    >
+      {__('Add host to collections')}
+    </DropdownItem>,
+    <DropdownItem
+      aria-label="remove_host_from_collections"
+      key="remove_host_from_collections"
+      component="button"
+      isDisabled={!hostCollections.length}
+      onClick={openRemoveHostCollectionsModal}
+    >
+      {__('Remove host from collections')}
+    </DropdownItem>,
+  ];
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+      <Card isHoverable>
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem>
+                  <CardTitle>{__('Host collections')}</CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  {!!hostCollections?.length && <Badge isRead>{hostCollections.length}</Badge>}
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            <FlexItem>
+              <Dropdown
+                toggle={<KebabToggle aria-label="host_collections_bulk_actions" onToggle={toggleBulkAction} />}
+                isOpen={isDropdownOpen}
+                isPlain
+                position="right"
+                dropdownItems={dropdownItems}
+              />
+            </FlexItem>
+          </Flex>
+        </CardHeader>
+        <CardBody>
+          {hostCollections?.map((hostCollection) => {
+            const {
+              id, name, description, maxHosts, unlimitedHosts, totalHosts,
+            } = propsToCamelCase(hostCollection);
+            const isExpanded = expandedHostCollections.has(id);
+            return (
+              <Flex
+                alignItems={{ default: 'alignItemsBaseline' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+                direction={{ default: 'row' }}
+                flexWrap={{ default: 'nowrap' }}
+                key={id}
+              >
+                <FlexItem
+                  grow={{ default: 'grow' }}
+                  style={{ whiteSpace: 'pre-line' }}
+                >
+                  <ExpandableSection
+                    toggleText={name}
+                    onToggle={() => expandedHostCollections.onToggle(!isExpanded, id)}
+                    isExpanded={isExpanded}
+                    isIndented
+                  >
+                    <div style={{ fontSize: '14px' }}>
+                      {description || <span style={{ color: '#c1c1c1' }}>{__('No description provided')}</span>}
+                    </div>
+                  </ExpandableSection>
+                </FlexItem>
+                <FlexItem component="span">
+                  {totalHosts}/{unlimitedHosts ? 'unlimited' : maxHosts}
+                </FlexItem>
+              </Flex>
+            );
+          })}
+        </CardBody>
+      </Card>
+      {hostId &&
+        <>
+          <HostCollectionsAddModal
+            isOpen={isAddModalOpen}
+            closeModal={closeAddModal}
+            hostId={hostId}
+            key={`hc-add-modal-${hostId}`}
+            hostName={hostName}
+            existingHostCollectionIds={hostCollectionIds}
+          />
+          <HostCollectionsRemoveModal
+            isOpen={isRemoveModalOpen}
+            closeModal={closeRemoveModal}
+            hostId={hostId}
+            key={`hc-remove-modal-${hostId}`}
+            hostName={hostName}
+            existingHostCollectionIds={hostCollectionIds}
+          />
+        </>
+      }
+    </GridItem>
+  );
+};
+
+const HostCollectionsCard = ({ hostDetails }) => {
+  if (hostIsRegistered({ hostDetails })) {
+    return <HostCollectionsDetails {...propsToCamelCase(hostDetails)} />;
+  }
+  return null;
+};
+
+HostCollectionsDetails.propTypes = {
+  hostCollections: PropTypes.arrayOf(PropTypes.shape({})),
+  id: PropTypes.number,
+  name: PropTypes.string,
+};
+
+HostCollectionsDetails.defaultProps = {
+  hostCollections: [],
+  id: null,
+  name: '',
+};
+
+HostCollectionsCard.propTypes = {
+  hostDetails: PropTypes.shape({}),
+};
+
+HostCollectionsCard.defaultProps = {
+  hostDetails: null,
+};
+
+export default HostCollectionsCard;

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsConstants.js

@@ -0,0 +1,7 @@
+export const AVAILABLE_HOST_COLLECTIONS_KEY = 'AVAILABLE_HOST_COLLECTIONS';
+export const REMOVABLE_HOST_COLLECTIONS_KEY = 'REMOVABLE_HOST_COLLECTIONS';
+export const ALTER_HOST_HOST_COLLECTIONS_KEY = 'ALTER_HOST_HOST_COLLECTIONS';
+export const MODAL_TYPES = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE',
+};