webpack/scenes/ContentViews/components/ContentViewsCounter.js
import React from 'react';
import { useSelector } from 'react-redux';
import { translate as __ } from 'foremanReact/common/I18n';
import { Grid, GridItem, Flex, FlexItem, Tooltip } from '@patternfly/react-core';
import { InProgressIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
import ContentViewIcon from './ContentViewIcon';
import { selectOrganizationState } from '../../Organizations/OrganizationSelectors';
const ContentViewsCounter = () => {
const organization = useSelector(selectOrganizationState);
const {
composite_content_views_count: composite,
content_view_components_count: component,
} = organization;
if (composite || component) {
return (
<Grid>
<GridItem span={12}>
<b>
<Flex>
<FlexItem spacer={{ default: 'spacerXs' }}>
<ContentViewIcon
composite={false}
description={__('Content views')}
count={(component || component === 0) ? component : <InProgressIcon />}
/>
</FlexItem>
<FlexItem>
<Tooltip
position="top"
content={
__('Consists of repositories')
}
>
<OutlinedQuestionCircleIcon />
</Tooltip>
</FlexItem>
</Flex>
</b>
</GridItem>
<GridItem span={12}>
<b>
<Flex>
<FlexItem spacer={{ default: 'spacerXs' }}>
<ContentViewIcon
composite
description={__('Composite content views')}
count={(composite || composite === 0) ? composite : <InProgressIcon />}
/>
</FlexItem>
<FlexItem>
<Tooltip
position="top"
content={
__('Consists of content views')
}
>
<OutlinedQuestionCircleIcon />
</Tooltip>
</FlexItem>
</Flex>
</b>
</GridItem>
</Grid>
);
} return <></>;
};
export default ContentViewsCounter;