katello 4.2.1 → 4.3.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/Delete/affectedHosts.js

@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import TableWrapper from '../../../../../components/Table/TableWrapper';
+import { selectCVHosts, selectCVHostsStatus } from '../../ContentViewDetailSelectors';
+import EnvironmentLabels from '../../../components/EnvironmentLabels';
+import { getHosts } from '../../ContentViewDetailActions';
+
+const AffectedHosts = ({
+  versionEnvironments, selectedEnvSet, cvId, deleteCV,
+}) => {
+  const [searchQuery, updateSearchQuery] = useState('');
+  const response = useSelector(state => selectCVHosts(state), shallowEqual);
+  const status = useSelector(state => selectCVHostsStatus(state), shallowEqual);
+  const selectedEnv = deleteCV ?
+    versionEnvironments :
+    versionEnvironments.filter(env => selectedEnvSet?.has(env.id));
+
+
+  const fetchItems = useCallback(() => {
+    let cvQuery = `content_view_id=${cvId}`;
+    const selectedEnvStrings = selectedEnv.map(env => `lifecycle_environment_id=${env.id}`).join(' OR ');
+    if (selectedEnvStrings.length) cvQuery += ` AND (${selectedEnvStrings})`;
+    if (searchQuery.length) cvQuery += ` AND (${searchQuery} )`;
+    return getHosts({ search: cvQuery });
+  }, [cvId, searchQuery, selectedEnv]);
+  const columnHeaders = [
+    __('Name'),
+    __('Environment'),
+  ];
+  const emptyContentTitle = __('No matching hosts found.');
+  const emptyContentBody = __("Given criteria doesn't match any hosts. Try changing your rule.");
+  const emptySearchTitle = __('Your search returned no matching hosts.');
+  const emptySearchBody = __('Try changing your search criteria.');
+  const { results, ...metadata } = response;
+  return (
+    <TableWrapper
+      {...{
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        fetchItems,
+        status,
+      }}
+      autocompleteEndpoint="/hosts/auto_complete_search"
+      foremanApiAutoComplete
+      variant={TableVariant.compact}
+    >
+      <Thead>
+        <Tr>
+          {columnHeaders.map(col =>
+            <Th key={col}>{col}</Th>)}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {results?.map(({
+          name,
+          id,
+          content_facet_attributes: { lifecycle_environment: environment },
+        }) => (
+          <Tr key={`${id}`}>
+            <Td>
+              <a rel="noreferrer" target="_blank" href={urlBuilder(`hosts/${id}`, '')}>{name}</a>
+            </Td>
+            <Td><EnvironmentLabels environments={environment} /></Td>
+          </Tr>
+        ))
+      }
+      </Tbody>
+    </TableWrapper>
+  );
+};
+
+AffectedHosts.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  selectedEnvSet: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({}),
+  ]),
+  versionEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
+  deleteCV: PropTypes.bool,
+};
+
+AffectedHosts.defaultProps = {
+  selectedEnvSet: null,
+  versionEnvironments: null,
+  deleteCV: false,
+};
+
+export default AffectedHosts;

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailConfig.js

@@ -0,0 +1,332 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
+import { startCase } from 'lodash';
+import {
+  BugIcon,
+  SecurityIcon,
+  EnhancementIcon,
+} from '@patternfly/react-icons';
+import {
+  getAnsibleCollections,
+  getContentViewVersions,
+  getDebPackages,
+  getDockerTags,
+  getErrata,
+  getFiles,
+  getModuleStreams,
+  getPackageGroups,
+  getRepositories,
+  getRPMPackages,
+} from '../../ContentViewDetailActions';
+import {
+  selectAnsibleCollections,
+  selectAnsibleCollectionsStatus,
+  selectCVVersions,
+  selectCVVersionsStatus,
+  selectDebPackages,
+  selectDebPackagesStatus,
+  selectDockerTags,
+  selectDockerTagsStatus,
+  selectFiles,
+  selectFilesStatus,
+  selectErrata,
+  selectErrataStatus,
+  selectModuleStreams,
+  selectModuleStreamsStatus,
+  selectRepositories,
+  selectRepositoriesStatus,
+  selectRPMPackageGroups,
+  selectRPMPackageGroupsStatus,
+  selectRPMPackages,
+  selectRPMPackagesStatus,
+} from '../../ContentViewDetailSelectors';
+import ContentViewVersionRepositoryCell from './ContentViewVersionRepositoryCell';
+
+export const TableType = PropTypes.shape({
+  name: PropTypes.string,
+  getCountKey: PropTypes.func,
+  repoType: PropTypes.string,
+  responseSelector: PropTypes.func,
+  statusSelector: PropTypes.func,
+  autocompleteEndpoint: PropTypes.string,
+  fetchItems: PropTypes.func,
+  columnHeaders:
+    PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string,
+      width: PropTypes.number,
+      getProperty: PropTypes.func,
+    })),
+});
+
+export default ({ cvId, versionId }) => [
+  {
+    name: __('Components'),
+    getCountKey: item => item?.component_view_count,
+    responseSelector: state => selectCVVersions(state, cvId),
+    statusSelector: state => selectCVVersionsStatus(state, cvId),
+    autocompleteEndpoint: '',
+    fetchItems: params => getContentViewVersions(
+      cvId,
+      { composite_version_id: versionId, ...params, content_view_id: undefined },
+    ),
+    columnHeaders: [
+      {
+        title: __('Content View Name'),
+        getProperty: item => (
+          <a href={`${urlBuilder('content_views', '')}${item?.content_view_id}`}>
+            {item?.content_view?.name}
+          </a>),
+      },
+      { title: __('Version'), getProperty: item => item?.version },
+      {
+        title: __('Updated'),
+        getProperty: item => item?.updated_at &&
+          <LongDateTime date={item.updated_at} showRelativeTimeTooltip />,
+      },
+    ],
+    disableSearch: true,
+  },
+  {
+    name: __('Repositories'),
+    getCountKey: item => item?.repositories?.length,
+    responseSelector: state => selectRepositories(state),
+    statusSelector: state => selectRepositoriesStatus(state),
+    autocompleteEndpoint: `/repositories/auto_complete_search?archived=true&content_view_version_id=${versionId}`,
+    fetchItems: params => getRepositories({
+      content_view_version_id: versionId,
+      archived: true,
+      ...params,
+    }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`products/${item?.product?.id}/repositories/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      {
+        title: __('Type'),
+        getProperty: item => startCase(item?.content_type),
+      },
+      {
+        title: __('Product'),
+        getProperty: item => (
+          <a href={urlBuilder(`products/${item?.product?.id}`, '')}>
+            {item?.product?.name}
+          </a>),
+      },
+      {
+        title: __('Content'),
+        getProperty: item => <ContentViewVersionRepositoryCell data={item} />,
+      },
+    ],
+  },
+  {
+    name: __('RPM Packages'),
+    repoType: 'yum',
+    getCountKey: item => item?.rpm_count,
+    responseSelector: state => selectRPMPackages(state),
+    statusSelector: state => selectRPMPackagesStatus(state),
+    autocompleteEndpoint: `/packages/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getRPMPackages({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`packages/${item?.id}`, '')}>
+            {item?.nvrea}
+          </a>),
+      },
+      { title: __('Version'), getProperty: item => item?.version },
+      { title: __('Release'), getProperty: item => item?.release },
+      { title: __('Arch'), getProperty: item => item?.arch },
+    ],
+  },
+  {
+    name: __('RPM Package Groups'),
+    repoType: 'yum',
+    getCountKey: item => item?.package_group_count,
+    responseSelector: state => selectRPMPackageGroups(state),
+    statusSelector: state => selectRPMPackageGroupsStatus(state),
+    autocompleteEndpoint: `/package_groups/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getPackageGroups({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      { title: __('Name'), getProperty: item => item?.name },
+      { title: __('Repository'), getProperty: item => item?.repository?.name },
+    ],
+  },
+  {
+    name: __('Files'),
+    repoType: 'file',
+    getCountKey: item => item?.file_count,
+    responseSelector: state => selectFiles(state),
+    statusSelector: state => selectFilesStatus(state),
+    autocompleteEndpoint: `/files/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getFiles({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`files/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      { title: __('Path'), getProperty: item => item?.path },
+    ],
+  },
+  {
+    name: __('Errata'),
+    repoType: 'yum',
+    getCountKey: item => item?.erratum_count,
+    responseSelector: state => selectErrata(state),
+    statusSelector: state => selectErrataStatus(state),
+    autocompleteEndpoint: `/errata/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getErrata({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Errata ID'),
+        getProperty: item => (
+          <a href={urlBuilder(`errata/${item?.id}`, '')}>
+            {item?.errata_id}
+          </a>),
+      },
+      {
+        title: __('Title'),
+        getProperty: item => item?.name,
+      },
+      {
+        title: __('Type'),
+        getProperty: (item) => {
+          const errataIcons = {
+            security: SecurityIcon,
+            bugfix: BugIcon,
+            enhancement: EnhancementIcon,
+            enhancements: EnhancementIcon,
+          };
+          const ErrataIcon = errataIcons[item?.type];
+          if (!ErrataIcon) return startCase(item?.type);
+          return <><ErrataIcon />{' '}{startCase(item?.type)}{item?.severity && ` - ${item.severity}`}</>;
+        },
+      },
+      {
+        title: __('Modular'),
+        getProperty: (item) => {
+          if (item?.module_streams?.length) return __('Yes');
+          return __('No');
+        },
+      },
+      {
+        title: __('Applicable Content Hosts'),
+        getProperty: item => item?.hosts_applicable_count,
+        width: 25,
+      },
+      {
+        title: __('Updated'),
+        getProperty: item => item?.updated &&
+          <LongDateTime date={item.updated} showRelativeTimeTooltip />,
+      },
+    ],
+  },
+  {
+    name: __('Module Streams'),
+    repoType: 'yum',
+    getCountKey: item => item?.module_stream_count,
+    responseSelector: state => selectModuleStreams(state),
+    statusSelector: state => selectModuleStreamsStatus(state),
+    autocompleteEndpoint: `/module_streams/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getModuleStreams({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`module_streams/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      { title: __('Stream'), getProperty: item => item?.stream },
+      { title: __('Version'), getProperty: item => item?.version },
+      { title: __('Context'), getProperty: item => item?.context },
+      { title: __('Arch'), getProperty: item => item?.arch },
+    ],
+  },
+  {
+    name: __('Deb Packages'),
+    repoType: 'deb',
+    getCountKey: item => item?.deb_count,
+    responseSelector: state => selectDebPackages(state),
+    statusSelector: state => selectDebPackagesStatus(state),
+    autocompleteEndpoint: `/debs/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getDebPackages({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`debs/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      { title: __('Version'), getProperty: item => item?.version },
+      { title: __('Architecture'), getProperty: item => item?.architecture },
+    ],
+  },
+  {
+    name: __('Ansible Collections'),
+    repoType: 'ansible_collection',
+    getCountKey: item => item?.ansible_collection_count,
+    responseSelector: state => selectAnsibleCollections(state),
+    statusSelector: state => selectAnsibleCollectionsStatus(state),
+    autocompleteEndpoint: `/ansible_collections/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getAnsibleCollections({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`ansible_collections/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      {
+        title: __('Author'),
+        getProperty: item => item?.namespace,
+      },
+      {
+        title: __('Version'),
+        getProperty: item => item?.version,
+      },
+      {
+        title: __('Checksum'),
+        getProperty: item => item?.checksum,
+      },
+    ],
+  },
+  {
+    name: __('Docker Tags'),
+    repoType: 'docker',
+    getCountKey: item => item?.docker_tag_count,
+    responseSelector: state => selectDockerTags(state),
+    statusSelector: state => selectDockerTagsStatus(state),
+    autocompleteEndpoint: `/docker_tags/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params => getDockerTags({ content_view_version_id: versionId, ...params }),
+    columnHeaders: [
+      {
+        title: __('Name'),
+        getProperty: item => (
+          <a href={urlBuilder(`docker_tags/${item?.id}`, '')}>
+            {item?.name}
+          </a>),
+      },
+      {
+        title: __('Available Schema Versions'),
+        getProperty: (item) => {
+          if (item?.manifest_schema1) return __('Schema Version 1');
+          return __('Schema Version 2');
+        },
+      },
+      { title: __('Product Name'), getProperty: item => item?.product?.name },
+    ],
+  },
+];

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.js

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useParams, Route, useHistory, useLocation, Redirect, Switch } from 'react-router-dom';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import { isEmpty, camelCase, first } from 'lodash';
+import { Grid, Tabs, Tab, TabTitleText, Label } from '@patternfly/react-core';
+import { number, shape } from 'prop-types';
+import './ContentViewVersionDetails.scss';
+
+import { editContentViewVersionDetails, getContentViewVersionDetails } from '../../ContentViewDetailActions';
+import ContentViewVersionDetailsHeader from './ContentViewVersionDetailsHeader';
+import { selectCVVersionDetails, selectCVVersionDetailsStatus } from '../../ContentViewDetailSelectors';
+import getCVVersionTableConfigs from './ContentViewVersionDetailConfig.js';
+import ContentViewVersionDetailsTable from './ContentViewVersionDetailsTable';
+import Loading from '../../../../../components/Loading';
+
+const ContentViewVersionDetails = ({ cvId, details }) => {
+  const { versionId } = useParams();
+  const { pathname } = useLocation();
+  const { push } = useHistory();
+  const dispatch = useDispatch();
+  const [versionDetails, setVersionDetails] = useState({});
+  // Example urls expected:/versions/:id or /versions/:id/repositories.
+  const tab = pathname.split('/')[3];
+  const response = useSelector(state =>
+    selectCVVersionDetails(state, versionId, cvId), shallowEqual);
+  const status = useSelector(state =>
+    selectCVVersionDetailsStatus(state, versionId, cvId), shallowEqual);
+  const loaded = status === STATUS.RESOLVED;
+  const tableConfigs = getCVVersionTableConfigs({ cvId, versionId });
+
+  useEffect(() => {
+    if (isEmpty(response) && status === STATUS.PENDING) {
+      dispatch(getContentViewVersionDetails(versionId, cvId));
+    }
+  }, [dispatch, versionId, cvId, response, status]);
+
+  useDeepCompareEffect(() => {
+    if (loaded) {
+      setVersionDetails(response);
+    }
+  }, [response, loaded, tableConfigs]);
+
+  const editDiscription = (val, attribute) => {
+    const { description } = versionDetails;
+    if (val !== description) {
+      dispatch(editContentViewVersionDetails(
+        versionId,
+        cvId,
+        { [attribute]: val },
+        () => dispatch(getContentViewVersionDetails(versionId, cvId)),
+      ));
+    }
+  };
+
+  const onSelect = (_e, eventKey) => {
+    // This prevents needless pushing on repeated clicks of a tab
+    if (tab !== eventKey) {
+      push(eventKey);
+    }
+  };
+
+  // Checking versionDetails is done to prevent two renders of the table.
+  if (!loaded && isEmpty(versionDetails)) return <Loading />;
+  const filteredTableConfigs = tableConfigs.filter(({ getCountKey }) => !!getCountKey(response));
+  const { repositories } = versionDetails;
+  const showTabs = filteredTableConfigs.length > 0 && repositories;
+  const getCurrentActiveKey = tab ?? camelCase(first(filteredTableConfigs)?.name);
+
+  return (
+    <Grid>
+      <ContentViewVersionDetailsHeader
+        versionDetails={versionDetails}
+        onEdit={editDiscription}
+        details={details}
+      />
+      {showTabs &&
+        <div className="grid-with-top-border">
+          <Tabs
+            activeKey={getCurrentActiveKey}
+            onSelect={onSelect}
+            isVertical
+          >
+            {filteredTableConfigs.map(({ name, getCountKey }) => (
+              <Tab
+                key={name}
+                eventKey={camelCase(name)}
+                title={
+                  <>
+                    <TabTitleText>{name}</TabTitleText>
+                    <Label color="grey">{getCountKey(response)}</Label>
+                  </>
+                }
+              />
+            ))}
+          </Tabs>
+          <Switch>
+            {filteredTableConfigs.map(config => (
+              <Route
+                key={camelCase(config.name)}
+                exact
+                path={`/versions/:versionId([0-9]+)/${camelCase(config.name)}`}
+              >
+                <ContentViewVersionDetailsTable
+                  tableConfig={config}
+                  repositories={repositories}
+                />
+              </Route>))
+            }
+            <Redirect
+              to={`/versions/${versionId}/${camelCase(first(filteredTableConfigs).name)}`}
+            />
+          </Switch>
+        </div>
+      }
+    </Grid >
+  );
+};
+
+ContentViewVersionDetails.propTypes = {
+  cvId: number.isRequired,
+  details: shape({
+    permissions: shape({}),
+  }).isRequired,
+};
+
+export default ContentViewVersionDetails;

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.scss

@@ -0,0 +1,44 @@
+.content-view-header-content {
+  padding-top: 24px;
+
+  .pf-c-content {
+    dl {
+      margin: 0;
+    }
+  }
+
+  .pf-l-flex {
+    padding-top: 24px;
+  }
+}
+
+.grid-with-top-border {
+  border-top: 1px solid #d2d2d2;
+  margin-top: 24px;
+  display: flex;
+
+  .pf-c-tabs.pf-m-vertical {
+    max-width: 230px;
+    border-right: 1px solid #d2d2d2;
+    .pf-c-tabs__item {
+      margin-top: 0;
+      button {
+        align-items: center;
+        .pf-c-label__content {
+          &::before {
+            border: none;
+          }
+        }
+      }
+      &.pf-m-current .pf-c-label__content {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .pf-l-grid.pf-m-gutter {
+    padding: 24px;
+    display: initial;
+    width: 100%;
+  }
+}

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsHeader.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  GridItem,
+  TextContent,
+  Text,
+  TextList,
+  TextVariants,
+  TextListVariants,
+  Label,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import EditableTextInput from '../../../../../components/EditableTextInput';
+import { hasPermission } from '../../../helpers';
+
+const ContentViewVersionDetailsHeader = ({
+  versionDetails: {
+    version, description, environments,
+  },
+  onEdit,
+  details: { permissions },
+}) => (
+  <>
+    <GridItem span={12}>
+      <TextContent>
+        <Text component={TextVariants.h2}>{__('Version ')}{version}</Text>
+      </TextContent>
+    </GridItem>
+    <GridItem className="content-view-header-content" span={12}>
+      <TextContent>
+        <TextList component={TextListVariants.dl}>
+          <EditableTextInput
+            key={description} // This fixes a render issue with the initial value
+            textArea
+            label={__('Description')}
+            attribute="description"
+            placeholder={__('No description provided')}
+            onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
+            value={description}
+          />
+        </TextList>
+      </TextContent>
+      <Flex>
+        {environments?.map(({ name, id }) =>
+          <FlexItem key={name}><Label isTruncated color="purple" href={`/lifecycle_environments/${id}`}>{name}</Label></FlexItem>)}
+      </Flex>
+    </GridItem>
+  </>
+);
+
+ContentViewVersionDetailsHeader.propTypes = {
+  versionDetails: PropTypes.shape({
+    version: PropTypes.string,
+    environments: PropTypes.arrayOf(PropTypes.shape({ })),
+    description: PropTypes.string,
+  }).isRequired,
+  onEdit: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
+};
+
+export default ContentViewVersionDetailsHeader;