webpack/scenes/SmartProxy/ExpandedSmartProxyRepositories.js
/* eslint-disable react/no-array-index-key */
import React from 'react';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
import AdditionalCapsuleContent from './AdditionalCapsuleContent';
import InactiveText from '../ContentViews/components/InactiveText';
import RepoIcon from '../ContentViews/Details/Repositories/RepoIcon';
const ExpandedSmartProxyRepositories = ({
contentCounts, repositories, syncedToCapsule, envId,
}) => {
const filterDataByEnvId = () => {
const filteredData = {};
Object.keys(contentCounts).forEach((key) => {
const entry = contentCounts[key];
if (entry.metadata.env_id === envId) {
filteredData[key] = entry;
}
});
return filteredData;
};
const envContentCounts = filterDataByEnvId();
const getRepositoryNameById = id => (repositories.find(repo =>
Number(repo.id) === Number(id) || Number(repo.library_id) === Number(id)) || {}).name;
const dataListCellLists = (repoCounts, repo) => {
const cellList = [];
/* eslint-disable max-len */
cellList.push(<DataListCell key={`${repo.id}-name`}><span><a href={`/products/${envContentCounts[repo].metadata.product_id}/repositories/${envContentCounts[repo].metadata.library_instance_id}/`}>{getRepositoryNameById(envContentCounts[repo].metadata.library_instance_id)}</a></span></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-type`}><RepoIcon type={envContentCounts[repo].metadata.content_type} identifier={repo.id} /></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-rpm`}><span>{envContentCounts[repo].counts.rpm ? `${envContentCounts[repo].counts.rpm} ${__('Packages')}` : 'N/A'}</span></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-count`}><AdditionalCapsuleContent counts={envContentCounts[repo].counts} /></DataListCell>);
/* eslint-enable max-len */
return cellList;
};
const dataListCellListsNotSynced = (repo) => {
const cellList = [];
/* eslint-disable max-len */
cellList.push(<DataListCell key={`${repo.id}-name`}><span><a href={`/products/${repo.product_id}/repositories/${repo.library_id}/`}>{repo.name}</a></span></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-type`}><RepoIcon type={repo.content_type} identifier={repo.id} /></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-rpm`}><span><InactiveText text="N/A" /></span></DataListCell>);
cellList.push(<DataListCell key={`${repo.id}-count`}><InactiveText text="N/A" /></DataListCell>);
/* eslint-enable max-len */
return cellList;
};
if (syncedToCapsule) {
return (
<DataList aria-label="Expanded repository details" isCompact>
<DataListItem key="headers" >
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="primary content">
<b>{__('Repository')}</b>
</DataListCell>,
<DataListCell key="Type"><b>{__('Type')}</b></DataListCell>,
<DataListCell key="Package count"><b>{__('Packages')}</b></DataListCell>,
<DataListCell key="Additional content"><b>{__('Additional content')}</b></DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
{Object.keys(envContentCounts).length ?
Object.keys(envContentCounts).map((repo, index) => (
<DataListItem key={`${repo.id}-${index}`}>
<DataListItemRow>
<DataListItemCells
dataListCells={dataListCellLists(envContentCounts[repo], repo)}
/>
</DataListItemRow>
</DataListItem>
)) :
<DataListItem key="empty">
<DataListItemRow>
<DataListItemCells
dataListCells={[<DataListCell key="cv-empty"><InactiveText text={__('Content view version is empty')} /></DataListCell>]}
/>
</DataListItemRow>
</DataListItem>
}
</DataList>
);
}
return (
<DataList aria-label="Expanded repository details" isCompact>
<DataListItem key="headers" >
<DataListItemRow>
<DataListItemCells dataListCells={[
<DataListCell key="primary content">
<b>{__('Repository')}</b>
</DataListCell>,
<DataListCell key="Type"><b>{__('Type')}</b></DataListCell>,
<DataListCell key="Package count"><b>{__('Packages')}</b></DataListCell>,
<DataListCell key="Additional content"><b>{__('Additional content')}</b></DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
{repositories.length ?
repositories.map((repo, index) => (
<DataListItem key={`${repo.id}-${index}`}>
<DataListItemRow>
<DataListItemCells dataListCells={dataListCellListsNotSynced(repo)} />
</DataListItemRow>
</DataListItem>
)) :
<DataListItem key="empty">
<DataListItemRow>
<DataListItemCells
dataListCells={[<DataListCell key="cv-empty"><InactiveText text={__('Content view version is empty')} /></DataListCell>]}
/>
</DataListItemRow>
</DataListItem>
}
</DataList>);
};
ExpandedSmartProxyRepositories.propTypes = {
contentCounts: PropTypes.shape({}),
repositories: PropTypes.arrayOf(PropTypes.shape({})),
syncedToCapsule: PropTypes.bool,
envId: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string, // The API can sometimes return strings
]).isRequired,
};
ExpandedSmartProxyRepositories.defaultProps = {
contentCounts: {},
repositories: [{}],
syncedToCapsule: false,
};
export default ExpandedSmartProxyRepositories;