External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-10 15:32:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

Adds nested lists for constructed inventories

Browse Source
This commit is contained in:
Alex Corey 2023-02-16 17:32:23 -05:00
parent 3335afcd3a
commit b15c54f462
34 changed files with 761 additions and 702 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
awx/ui/src/api/models/ConstructedInventories.js
View File

@ -5,6 +5,96 @@ class ConstructedInventories extends InstanceGroupsMixin(Base) {
constructor(http) {
super(http);
this.baseUrl = 'api/v2/constructed_inventories/';
this.readAccessList = this.readAccessList.bind(this);
this.readAccessOptions = this.readAccessOptions.bind(this);
this.readHosts = this.readHosts.bind(this);
this.readHostDetail = this.readHostDetail.bind(this);
this.readGroups = this.readGroups.bind(this);
this.readGroupsOptions = this.readGroupsOptions.bind(this);
this.promoteGroup = this.promoteGroup.bind(this);
}
readAccessList(id, params) {
return this.http.get(`${this.baseUrl}${id}/access_list/`, {
params,
});
}
readAccessOptions(id) {
return this.http.options(`${this.baseUrl}${id}/access_list/`);
}
createHost(id, data) {
return this.http.post(`${this.baseUrl}${id}/hosts/`, data);
}
readHosts(id, params) {
return this.http.get(`${this.baseUrl}${id}/hosts/`, {
params,
});
}
async readHostDetail(inventoryId, hostId) {
const {
data: { results },
} = await this.http.get(
`${this.baseUrl}${inventoryId}/hosts/?id=${hostId}`
);
if (Array.isArray(results) && results.length) {
return results[0];
}
throw new Error(
`How did you get here? Host not found for Inventory ID: ${inventoryId}`
);
}
readGroups(id, params) {
return this.http.get(`${this.baseUrl}${id}/groups/`, {
params,
});
}
readGroupsOptions(id) {
return this.http.options(`${this.baseUrl}${id}/groups/`);
}
readHostsOptions(id) {
return this.http.options(`${this.baseUrl}${id}/hosts/`);
}
promoteGroup(inventoryId, groupId) {
return this.http.post(`${this.baseUrl}${inventoryId}/groups/`, {
id: groupId,
disassociate: true,
});
}
readAdHocOptions(inventoryId) {
return this.http.options(`${this.baseUrl}${inventoryId}/ad_hoc_commands/`);
}
launchAdHocCommands(inventoryId, values) {
return this.http.post(
`${this.baseUrl}${inventoryId}/ad_hoc_commands/`,
values
);
}
associateLabel(id, label, orgId) {
return this.http.post(`${this.baseUrl}${id}/labels/`, {
name: label.name,
organization: orgId,
});
}
disassociateLabel(id, label) {
return this.http.post(`${this.baseUrl}${id}/labels/`, {
id: label.id,
disassociate: true,
});
}
}

29
awx/ui/src/screens/Inventory/ConstructedInventory.js
View File

@ -20,10 +20,10 @@ import JobList from 'components/JobList';
import RelatedTemplateList from 'components/RelatedTemplateList';
import { ResourceAccessList } from 'components/ResourceAccessList';
import RoutedTabs from 'components/RoutedTabs';
import ConstructedInventoryDetail from './ConstructedInventoryDetail';
import ConstructedInventoryEdit from './ConstructedInventoryEdit';
import ConstructedInventoryGroups from './ConstructedInventoryGroups';
import ConstructedInventoryHosts from './ConstructedInventoryHosts';
import ConstructedInventoryDetail from './InventoryDetail';
import ConstructedInventoryEdit from './InventoryEdit';
import ConstructedInventoryGroups from './InventoryGroups';
import ConstructedInventoryHosts from './InventoryHosts';
import { getInventoryPath } from './shared/utils';
function ConstructedInventory({ setBreadcrumb }) {
@ -111,7 +111,12 @@ function ConstructedInventory({ setBreadcrumb }) {
}
let showCardHeader = true;
if (['edit'].some((name) => location.pathname.includes(name))) {
if (
['edit', 'add', 'groups/', 'hosts/', 'sources/'].some((name) =>
location.pathname.includes(name)
)
) {
showCardHeader = false;
}
@ -152,15 +157,21 @@ function ConstructedInventory({ setBreadcrumb }) {
</Route>,
<Route
path="/inventories/constructed_inventory/:id/hosts"
key="hosts"
key="constructed_inventory_hosts"
>
<ConstructedInventoryHosts />
<ConstructedInventoryHosts
inventory={inventory}
setBreadcrumb={setBreadcrumb}
/>
</Route>,
<Route
path="/inventories/constructed_inventory/:id/groups"
key="groups"
key="constructed_inventory_groups"
>
<ConstructedInventoryGroups />
<ConstructedInventoryGroups
inventory={inventory}
setBreadcrumb={setBreadcrumb}
/>
</Route>,
<Route
key="jobs"

288
awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js
View File

@ -1,288 +0,0 @@
import React, { useCallback, useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { t } from '@lingui/macro';
import {
Button,
Chip,
TextList,
TextListItem,
TextListItemVariants,
TextListVariants,
} from '@patternfly/react-core';
import AlertModal from 'components/AlertModal';
import { CardBody, CardActionsRow } from 'components/Card';
import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
import { VariablesDetail } from 'components/CodeEditor';
import DeleteButton from 'components/DeleteButton';
import ErrorDetail from 'components/ErrorDetail';
import ContentError from 'components/ContentError';
import ContentLoading from 'components/ContentLoading';
import ChipGroup from 'components/ChipGroup';
import Popover from 'components/Popover';
import { InventoriesAPI, ConstructedInventoriesAPI } from 'api';
import useRequest, { useDismissableError } from 'hooks/useRequest';
import { Inventory } from 'types';
import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
import InstanceGroupLabels from 'components/InstanceGroupLabels';
import getHelpText from '../shared/Inventory.helptext';
function ConstructedInventoryDetail({ inventory }) {
const history = useHistory();
const helpText = getHelpText();
const {
result: { instanceGroups, sourceInventories, actions },
request: fetchRelatedDetails,
error: contentError,
isLoading,
} = useRequest(
useCallback(async () => {
const [response, sourceInvResponse, options] = await Promise.all([
InventoriesAPI.readInstanceGroups(inventory.id),
InventoriesAPI.readSourceInventories(inventory.id),
ConstructedInventoriesAPI.readOptions(inventory.id),
]);
return {
instanceGroups: response.data.results,
sourceInventories: sourceInvResponse.data.results,
actions: options.data.actions.GET,
};
}, [inventory.id]),
{
instanceGroups: [],
sourceInventories: [],
actions: {},
isLoading: true,
}
);
useEffect(() => {
fetchRelatedDetails();
}, [fetchRelatedDetails]);
const { request: deleteInventory, error: deleteError } = useRequest(
useCallback(async () => {
await InventoriesAPI.destroy(inventory.id);
history.push(`/inventories`);
}, [inventory.id, history])
);
const { error, dismissError } = useDismissableError(deleteError);
const { organization, user_capabilities: userCapabilities } =
inventory.summary_fields;
const deleteDetailsRequests =
relatedResourceDeleteRequests.inventory(inventory);
if (isLoading) {
return <ContentLoading />;
}
if (contentError) {
return <ContentError error={contentError} />;
}
return (
<CardBody>
<DetailList>
<Detail
label={t`Name`}
value={inventory.name}
dataCy="constructed-inventory-name"
/>
<Detail
label={t`Description`}
value={inventory.description}
dataCy="constructed-inventory-description"
/>
<Detail
label={t`Type`}
value={t`Constructed Inventory`}
dataCy="constructed-inventory-type"
/>
<Detail
label={actions.limit.label}
value={inventory.limit}
helpText={actions.limit.help_text}
dataCy="constructed-inventory-limit"
/>
<Detail
label={t`Organization`}
dataCy="constructed-inventory-organization"
value={
<Link to={`/organizations/${organization.id}/details`}>
{organization.name}
</Link>
}
/>
<Detail
label={actions.total_groups.label}
value={inventory.total_groups}
helpText={actions.total_groups.help_text}
dataCy="constructed-inventory-total-groups"
/>
<Detail
label={actions.total_hosts.label}
value={inventory.total_hosts}
helpText={actions.total_hosts.help_text}
dataCy="constructed-inventory-total-hosts"
/>
<Detail
label={actions.total_inventory_sources.label}
value={inventory.total_inventory_sources}
helpText={actions.total_inventory_sources.help_text}
dataCy="constructed-inventory-sources"
/>
<Detail
label={actions.update_cache_timeout.label}
value={inventory.update_cache_timeout}
helpText={actions.update_cache_timeout.help_text}
dataCy="constructed-inventory-cache-timeout"
/>
<Detail
label={actions.inventory_sources_with_failures.label}
value={inventory.inventory_sources_with_failures}
helpText={actions.inventory_sources_with_failures.help_text}
dataCy="constructed-inventory-sources-with-failures"
/>
<Detail
label={actions.verbosity.label}
value={inventory.verbosity}
helpText={actions.verbosity.help_text}
dataCy="constructed-inventory-verbosity"
/>
{instanceGroups && (
<Detail
fullWidth
label={t`Instance Groups`}
value={<InstanceGroupLabels labels={instanceGroups} isLinkable />}
isEmpty={instanceGroups.length === 0}
dataCy="constructed-inventory-instance-groups"
/>
)}
{inventory.prevent_instance_group_fallback && (
<Detail
fullWidth
label={t`Enabled Options`}
dataCy="constructed-inventory-instance-group-fallback"
value={
<TextList component={TextListVariants.ul}>
{inventory.prevent_instance_group_fallback && (
<TextListItem component={TextListItemVariants.li}>
{t`Prevent Instance Group Fallback`}
<Popover
header={t`Prevent Instance Group Fallback`}
content={helpText.preventInstanceGroupFallback}
/>
</TextListItem>
)}
</TextList>
}
/>
)}
<Detail
fullWidth
helpText={helpText.labels}
dataCy="constructed-inventory-labels"
label={t`Labels`}
value={
<ChipGroup
numChips={5}
totalChips={inventory.summary_fields.labels?.results?.length}
>
{inventory.summary_fields.labels?.results?.map((l) => (
<Chip key={l.id} isReadOnly>
{l.name}
</Chip>
))}
</ChipGroup>
}
isEmpty={inventory.summary_fields.labels?.results?.length === 0}
/>
<Detail
fullWidth
label={t`Source Inventories`}
value={
<ChipGroup
numChips={5}
totalChips={sourceInventories?.length}
ouiaId="source-inventory-chips"
>
{sourceInventories?.map((sourceInventory) => (
<Link
key={sourceInventory.id}
to={`/inventories/inventory/${sourceInventory.id}/details`}
>
<Chip key={sourceInventory.id} isReadOnly>
{sourceInventory.name}
</Chip>
</Link>
))}
</ChipGroup>
}
isEmpty={sourceInventories?.length === 0}
/>
<VariablesDetail
label={actions.source_vars.label}
helpText={helpText.variables()}
value={inventory.source_vars}
rows={4}
name="variables"
dataCy="inventory-detail-variables"
/>
<UserDateDetail
label={actions.created.label}
date={inventory.created}
user={inventory.summary_fields.created_by}
/>
<UserDateDetail
label={actions.modified.label}
date={inventory.modified}
user={inventory.summary_fields.modified_by}
/>
</DetailList>
<CardActionsRow>
{userCapabilities.edit && (
<Button
ouiaId="inventory-detail-edit-button"
component={Link}
to={`/inventories/constructed_inventory/${inventory.id}/edit`}
>
{t`Edit`}
</Button>
)}
{userCapabilities.delete && (
<DeleteButton
name={inventory.name}
modalTitle={t`Delete Inventory`}
onConfirm={deleteInventory}
deleteDetailsRequests={deleteDetailsRequests}
deleteMessage={t`This inventory is currently being used by other resources. Are you sure you want to delete it?`}
>
{t`Delete`}
</DeleteButton>
)}
</CardActionsRow>
{error && (
<AlertModal
isOpen={error}
variant="error"
title={t`Error!`}
onClose={dismissError}
>
{t`Failed to delete inventory.`}
<ErrorDetail error={error} />
</AlertModal>
)}
</CardBody>
);
}
ConstructedInventoryDetail.propTypes = {
inventory: Inventory.isRequired,
};
export default ConstructedInventoryDetail;

66
awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.test.js
View File

@ -1,66 +0,0 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { InventoriesAPI, CredentialTypesAPI } from 'api';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import ConstructedInventoryDetail from './ConstructedInventoryDetail';
jest.mock('../../../api');
const mockInventory = {
id: 1,
type: 'inventory',
summary_fields: {
organization: {
id: 1,
name: 'The Organization',
description: '',
},
created_by: {
username: 'the_creator',
id: 2,
},
modified_by: {
username: 'the_modifier',
id: 3,
},
user_capabilities: {
edit: true,
delete: true,
copy: true,
adhoc: true,
},
},
created: '2019-10-04T16:56:48.025455Z',
modified: '2019-10-04T16:56:48.025468Z',
name: 'Constructed Inv',
description: '',
organization: 1,
kind: 'constructed',
has_active_failures: false,
total_hosts: 0,
hosts_with_active_failures: 0,
total_groups: 0,
groups_with_active_failures: 0,
has_inventory_sources: false,
total_inventory_sources: 0,
inventory_sources_with_failures: 0,
pending_deletion: false,
prevent_instance_group_fallback: false,
update_cache_timeout: 0,
limit: '',
verbosity: 1,
};
describe('<ConstructedInventoryDetail />', () => {
test('initially renders successfully', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(
<ConstructedInventoryDetail inventory={mockInventory} />
);
});
expect(wrapper.length).toBe(1);
expect(wrapper.find('ConstructedInventoryDetail').length).toBe(1);
});
});

1
awx/ui/src/screens/Inventory/ConstructedInventoryDetail/index.js
View File

@ -1 +0,0 @@
export { default } from './ConstructedInventoryDetail';

13
awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.js
View File

@ -1,13 +0,0 @@
/* eslint i18next/no-literal-string: "off" */
import React from 'react';
import { CardBody } from 'components/Card';
function ConstructedInventoryGroups() {
return (
<CardBody>
<div>Coming Soon!</div>
</CardBody>
);
}
export default ConstructedInventoryGroups;

15
awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.test.js
View File

@ -1,15 +0,0 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import ConstructedInventoryGroups from './ConstructedInventoryGroups';
describe('<ConstructedInventoryGroups />', () => {
test('initially renders successfully', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(<ConstructedInventoryGroups />);
});
expect(wrapper.length).toBe(1);
expect(wrapper.find('ConstructedInventoryGroups').length).toBe(1);
});
});

1
awx/ui/src/screens/Inventory/ConstructedInventoryGroups/index.js
View File

@ -1 +0,0 @@
export { default } from './ConstructedInventoryGroups';

13
awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.js
View File

@ -1,13 +0,0 @@
/* eslint i18next/no-literal-string: "off" */
import React from 'react';
import { CardBody } from 'components/Card';
function ConstructedInventoryHosts() {
return (
<CardBody>
<div>Coming Soon!</div>
</CardBody>
);
}
export default ConstructedInventoryHosts;

15
awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.test.js
View File

@ -1,15 +0,0 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import ConstructedInventoryHosts from './ConstructedInventoryHosts';
describe('<ConstructedInventoryHosts />', () => {
test('initially renders successfully', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(<ConstructedInventoryHosts />);
});
expect(wrapper.length).toBe(1);
expect(wrapper.find('ConstructedInventoryHosts').length).toBe(1);
});
});

1
awx/ui/src/screens/Inventory/ConstructedInventoryHosts/index.js
View File

@ -1 +0,0 @@
export { default } from './ConstructedInventoryHosts';

14
awx/ui/src/screens/Inventory/Inventory.js
View File

@ -8,6 +8,7 @@ import {
Link,
useLocation,
useRouteMatch,
useParams,
} from 'react-router-dom';
import { CaretLeftIcon } from '@patternfly/react-icons';
import { Card, PageSection } from '@patternfly/react-core';
@ -30,14 +31,15 @@ function Inventory({ setBreadcrumb }) {
const [hasContentLoading, setHasContentLoading] = useState(true);
const [inventory, setInventory] = useState(null);
const location = useLocation();
const { id: inventoryId } = useParams();
const match = useRouteMatch({
path: '/inventories/inventory/:id',
path: `/inventories/:inventoryType/:id`,
});
useEffect(() => {
async function fetchData() {
try {
const { data } = await InventoriesAPI.readDetail(match.params.id);
const { data } = await InventoriesAPI.readDetail(inventoryId);
setBreadcrumb(data);
setInventory(data);
} catch (error) {
@ -48,7 +50,7 @@ function Inventory({ setBreadcrumb }) {
}
fetchData();
}, [match.params.id, location.pathname, setBreadcrumb]);
}, [inventoryId, location.pathname, setBreadcrumb]);
const tabsArray = [
{
@ -185,10 +187,8 @@ function Inventory({ setBreadcrumb }) {
</Route>,
<Route path="*" key="not-found">
<ContentError isNotFound>
{match.params.id && (
<Link
to={`/inventories/inventory/${match.params.id}/details`}
>
{inventoryId && (
<Link to={`/inventories/inventory/${inventoryId}/details`}>
{t`View Inventory Details`}
</Link>
)}

20
awx/ui/src/screens/Inventory/InventoryDetail/InventoryDetail.js
View File

@ -24,6 +24,7 @@ import useRequest, { useDismissableError } from 'hooks/useRequest';
import { Inventory } from 'types';
import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
import InstanceGroupLabels from 'components/InstanceGroupLabels';
import { VERBOSITY } from 'components/VerbositySelectField';
import getHelpText from '../shared/Inventory.helptext';
function InventoryDetail({ inventory }) {
@ -102,6 +103,7 @@ function InventoryDetail({ inventory }) {
}
/>
<Detail label={t`Total hosts`} value={inventory.total_hosts} />
<Detail label={t`Total groups`} value={inventory.total_groups} />
{instanceGroups && (
<Detail
fullWidth
@ -117,6 +119,21 @@ function InventoryDetail({ inventory }) {
helpText={helpText.preventInstanceGroupFallback}
/>
)}
<Detail
label={t`Limit`}
dataCy="inv-detail-limit"
value={inventory.limit}
/>
<Detail
label={t`Cache timeout`}
value={inventory.update_cache_timeout}
dataCy="inv-detail-cache-timeout"
/>
<Detail
label={t`Verbosity`}
dataCy="inv-detail-verbosity"
value={VERBOSITY()[inventory.verbosity]}
/>
{renderOptionsField && (
<Detail
fullWidth
@ -149,7 +166,7 @@ function InventoryDetail({ inventory }) {
<VariablesDetail
label={t`Variables`}
helpText={helpText.variables()}
value={inventory.variables}
value={inventory.variables || inventory.source_vars}
rows={4}
name="variables"
dataCy="inventory-detail-variables"
@ -187,7 +204,6 @@ function InventoryDetail({ inventory }) {
</DeleteButton>
)}
</CardActionsRow>
{/* Update delete modal to show dependencies https://github.com/ansible/awx/issues/5546 */}
{error && (
<AlertModal
isOpen={error}

24
awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
View File

@ -23,7 +23,7 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
const [inventoryGroup, setInventoryGroup] = useState(null);
const [contentLoading, setContentLoading] = useState(true);
const [contentError, setContentError] = useState(null);
const { id: inventoryId, groupId } = useParams();
const { id: inventoryId, groupId, inventoryType } = useParams();
const location = useLocation();
useEffect(() => {
@ -50,22 +50,22 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
{t`Back to Groups`}
</>
),
link: `/inventories/inventory/${inventory.id}/groups`,
link: `/inventories/${inventoryType}/${inventoryId}/groups`,
id: 99,
},
{
name: t`Details`,
link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/details`,
link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/details`,
id: 0,
},
{
name: t`Related Groups`,
link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_groups`,
link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_groups`,
id: 1,
},
{
name: t`Hosts`,
link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_hosts`,
link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_hosts`,
id: 2,
},
];
@ -105,32 +105,32 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
{showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
<Switch>
<Redirect
from="/inventories/inventory/:id/groups/:groupId"
to="/inventories/inventory/:id/groups/:groupId/details"
from="/inventories/:inventoryType/:id/groups/:groupId"
to="/inventories/:inventoryType/:id/groups/:groupId/details"
exact
/>
{inventoryGroup && [
<Route
key="edit"
path="/inventories/inventory/:id/groups/:groupId/edit"
path="/inventories/:inventoryType/:id/groups/:groupId/edit"
>
<InventoryGroupEdit inventoryGroup={inventoryGroup} />
</Route>,
<Route
key="details"
path="/inventories/inventory/:id/groups/:groupId/details"
path="/inventories/:inventoryType/:id/groups/:groupId/details"
>
<InventoryGroupDetail inventoryGroup={inventoryGroup} />
</Route>,
<Route
key="hosts"
path="/inventories/inventory/:id/groups/:groupId/nested_hosts"
path="/inventories/:inventoryType/:id/groups/:groupId/nested_hosts"
>
<InventoryGroupHosts inventoryGroup={inventoryGroup} />
</Route>,
<Route
key="relatedGroups"
path="/inventories/inventory/:id/groups/:groupId/nested_groups"
path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups"
>
<InventoryRelatedGroups />
</Route>,
@ -138,7 +138,7 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
<Route key="not-found" path="*">
<ContentError>
{inventory && (
<Link to={`/inventories/inventory/${inventory.id}/details`}>
<Link to={`/inventories/:inventoryType/${inventory.id}/details`}>
{t`View Inventory Details`}
</Link>
)}

81
awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.test.js
View File

@ -11,15 +11,16 @@ import {
import InventoryGroup from './InventoryGroup';
jest.mock('../../../api');
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
}),
}));
describe('<InventoryGroup />', () => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
inventoryType: 'inventory',
}),
}));
let wrapper;
let history;
const inventory = { id: 1, name: 'Foo' };
@ -41,11 +42,11 @@ describe('<InventoryGroup />', () => {
},
});
history = createMemoryHistory({
initialEntries: ['/inventories/inventory/1/groups/1/details'],
initialEntries: [`/inventories/inventory/1/groups/1/details`],
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/inventory/:id/groups">
<Route path="/inventories/:inventoryType/:id/groups">
<InventoryGroup setBreadcrumb={() => {}} inventory={inventory} />
</Route>,
{ context: { router: { history } } }
@ -63,7 +64,7 @@ describe('<InventoryGroup />', () => {
expect(routedTabs).toHaveLength(1);
const tabs = routedTabs.prop('tabsArray');
expect(tabs[0].link).toEqual('/inventories/inventory/1/groups');
expect(tabs[0].link).toEqual(`/inventories/inventory/1/groups`);
expect(tabs[1].name).toEqual('Details');
expect(tabs[2].name).toEqual('Related Groups');
expect(tabs[3].name).toEqual('Hosts');
@ -71,7 +72,7 @@ describe('<InventoryGroup />', () => {
test('should show content error when user attempts to navigate to erroneous route', async () => {
history = createMemoryHistory({
initialEntries: ['/inventories/inventory/1/groups/1/foobar'],
initialEntries: [`/inventories/inventory/1/groups/1/foobar`],
});
await act(async () => {
wrapper = mountWithContexts(
@ -92,3 +93,59 @@ describe('<InventoryGroup />', () => {
await waitForElement(wrapper, 'ContentError', (el) => el.length === 1);
});
});
describe('constructed inventory', () => {
let wrapper;
let history;
const inventory = { id: 1, name: 'Foo' };
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
inventoryType: 'constructed_inventory',
}),
}));
beforeEach(async () => {
GroupsAPI.readDetail.mockResolvedValue({
data: {
id: 1,
name: 'Foo',
description: 'Bar',
variables: 'bizz: buzz',
summary_fields: {
inventory: { id: 1 },
created_by: { id: 1, username: 'Athena' },
modified_by: { id: 1, username: 'Apollo' },
},
created: '2020-04-25T01:23:45.678901Z',
modified: '2020-04-25T01:23:45.678901Z',
},
});
history = createMemoryHistory({
initialEntries: [`/inventories/constructed_inventory/1/groups/1/details`],
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/:inventoryType/:id/groups">
<InventoryGroup setBreadcrumb={() => {}} inventory={inventory} />
</Route>,
{ context: { router: { history } } }
);
});
await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
});
test('Constructed Inventory expect all tabs to exist, including Back to Groups', async () => {
const routedTabs = wrapper.find('RoutedTabs');
expect(routedTabs).toHaveLength(1);
const tabs = routedTabs.prop('tabsArray');
expect(tabs[0].link).toEqual(`/inventories/constructed_inventory/1/groups`);
expect(tabs[1].name).toEqual('Details');
expect(tabs[2].name).toEqual('Related Groups');
expect(tabs[3].name).toEqual('Hosts');
});
});

56
awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.js
View File

@ -1,9 +1,8 @@
import React, { useState } from 'react';
import { t } from '@lingui/macro';
import { useHistory, useParams } from 'react-router-dom';
import { Button } from '@patternfly/react-core';
import { useHistory, useParams } from 'react-router-dom';
import { VariablesDetail } from 'components/CodeEditor';
import { CardBody, CardActionsRow } from 'components/Card';
import ErrorDetail from 'components/ErrorDetail';
@ -12,6 +11,7 @@ import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
function InventoryGroupDetail({ inventoryGroup }) {
const { inventoryType } = useParams();
const {
summary_fields: { created_by, modified_by, user_capabilities },
created,
@ -47,31 +47,33 @@ function InventoryGroupDetail({ inventoryGroup }) {
user={modified_by}
/>
</DetailList>
<CardActionsRow>
{user_capabilities?.edit && (
<Button
ouiaId="inventory-group-detail-edit-button"
variant="primary"
aria-label={t`Edit`}
onClick={() =>
history.push(
`/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
)
}
>
{t`Edit`}
</Button>
)}
{user_capabilities?.delete && (
<InventoryGroupsDeleteModal
groups={[inventoryGroup]}
isDisabled={false}
onAfterDelete={() =>
history.push(`/inventories/inventory/${params.id}/groups`)
}
/>
)}
</CardActionsRow>
{inventoryType !== 'constructed_inventory' && (
<CardActionsRow>
{user_capabilities?.edit && (
<Button
ouiaId="inventory-group-detail-edit-button"
variant="primary"
aria-label={t`Edit`}
onClick={() =>
history.push(
`/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
)
}
>
{t`Edit`}
</Button>
)}
{user_capabilities?.delete && (
<InventoryGroupsDeleteModal
groups={[inventoryGroup]}
isDisabled={false}
onAfterDelete={() =>
history.push(`/inventories/inventory/${params.id}/groups`)
}
/>
)}
</CardActionsRow>
)}
{error && (
<AlertModal
variant="error"

60
awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.js
View File

@ -39,6 +39,14 @@ describe('<InventoryGroupDetail />', () => {
let history;
describe('User has full permissions', () => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 3,
inventoryType: 'inventory',
}),
}));
beforeEach(async () => {
await act(async () => {
history = createMemoryHistory({
@ -116,6 +124,14 @@ describe('<InventoryGroupDetail />', () => {
});
describe('User has read-only permissions', () => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 3,
inventoryType: 'inventory',
}),
}));
test('should hide edit/delete buttons', async () => {
const readOnlyGroup = {
...inventoryGroup,
@ -159,4 +175,48 @@ describe('<InventoryGroupDetail />', () => {
expect(wrapper.find('button[aria-label="Delete"]').length).toBe(0);
});
});
describe('Cannot edit or delete constructed inventory group', () => {
beforeEach(async () => {
await act(async () => {
history = createMemoryHistory({
initialEntries: ['/inventories/inventory/1/groups/1/details'],
});
wrapper = mountWithContexts(
<Route path="/inventories/inventory/:id/groups/:groupId">
<InventoryGroupDetail inventoryGroup={inventoryGroup} />
</Route>,
{
context: {
router: {
history,
route: {
location: history.location,
match: {
params: {
id: 1,
group: 2,
inventoryType: 'constructed_inventory',
},
},
},
},
},
}
);
await waitForElement(
wrapper,
'ContentLoading',
(el) => el.length === 0
);
});
});
afterEach(() => {
jest.clearAllMocks();
});
test('should not show edit button', () => {
const editButton = wrapper.find('Button[aria-label="edit"]');
expect(editButton.length).toBe(0);
expect(wrapper.find('Button[aria-label="delete"]').length).toBe(0);
});
});
});

6
awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.js
View File

@ -34,7 +34,7 @@ const QS_CONFIG = getQSConfig('host', {
function InventoryGroupHostList() {
const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const { id: inventoryId, groupId } = useParams();
const { id: inventoryId, groupId, inventoryType } = useParams();
const location = useLocation();
const {
@ -259,8 +259,8 @@ function InventoryGroupHostList() {
key={host.id}
rowIndex={index}
host={host}
detailUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/details`}
editUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/edit`}
detailUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/details`}
editUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/edit`}
isSelected={selected.some((row) => row.id === host.id)}
onSelect={() => handleSelect(host)}
/>

50
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
View File

@ -1,25 +1,20 @@
import React from 'react';
import { bool, func, number, oneOfType, string } from 'prop-types';
import { bool, func } from 'prop-types';
import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
import { Group } from 'types';
function InventoryGroupItem({
group,
inventoryId,
isSelected,
onSelect,
rowIndex,
}) {
function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
const { id: inventoryId, inventoryType } = useParams();
const labelId = `check-action-${group.id}`;
const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;
return (
<Tr id={`group-row-${group.id}`} ouiaId={`group-row-${group.id}`}>
@ -36,29 +31,30 @@ function InventoryGroupItem({
<b>{group.name}</b>
</Link>
</Td>
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
<ActionItem
visible={group.summary_fields.user_capabilities.edit}
tooltip={t`Edit group`}
>
<Button
ouiaId={`${group.id}-edit-button`}
aria-label={t`Edit Group`}
variant="plain"
component={Link}
to={editUrl}
{inventoryType !== 'constructed_inventory' && (
<ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
<ActionItem
visible={group.summary_fields.user_capabilities.edit}
tooltip={t`Edit group`}
>
<PencilAltIcon />
</Button>
</ActionItem>
</ActionsTd>
<Button
ouiaId={`${group.id}-edit-button`}
aria-label={t`Edit Group`}
variant="plain"
component={Link}
to={editUrl}
>
<PencilAltIcon />
</Button>
</ActionItem>
</ActionsTd>
)}
</Tr>
);
}
InventoryGroupItem.propTypes = {
group: Group.isRequired,
inventoryId: oneOfType([number, string]).isRequired,
isSelected: bool.isRequired,
onSelect: func.isRequired,
};

37
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.js
View File

@ -1,4 +1,6 @@
import React from 'react';
import { Route } from 'react-router-dom';
import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import InventoryGroupItem from './InventoryGroupItem';
@ -57,4 +59,39 @@ describe('<InventoryGroupItem />', () => {
);
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
});
test('edit button should be hidden from constructed inventory group', async () => {
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({ id: 42, inventoryType: 'constructed_inventory' }),
}));
const mockGroup = {
id: 2,
type: 'group',
name: 'foo',
inventory: 1,
summary_fields: {
user_capabilities: {
edit: true,
},
},
};
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/:inventoryType/:id/groups">
<table>
<tbody>
<InventoryGroupItem
group={mockGroup}
inventoryId={1}
isSelected={false}
onSelect={() => {}}
/>
</tbody>
</table>
</Route>
);
});
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
});
});

9
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroups.js
View File

@ -16,11 +16,14 @@ function InventoryGroups({ setBreadcrumb, inventory }) {
inventory={inventory}
/>
</Route>
<Route key="details" path="/inventories/inventory/:id/groups/:groupId/">
<Route
key="details"
path="/inventories/:inventoryType/:id/groups/:groupId/"
>
<InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
</Route>
<Route key="list" path="/inventories/inventory/:id/groups">
<InventoryGroupsList />
<Route key="list" path="/inventories/:inventoryType/:id/groups">
<InventoryGroupsList inventory={inventory} />
</Route>
</Switch>
);

51
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.js
View File

@ -5,7 +5,7 @@ import { Tooltip } from '@patternfly/react-core';
import { getQSConfig, parseQueryString } from 'util/qs';
import useSelected from 'hooks/useSelected';
import useRequest from 'hooks/useRequest';
import { InventoriesAPI } from 'api';
import { ConstructedInventoriesAPI, InventoriesAPI } from 'api';
import DataListToolbar from 'components/DataListToolbar';
import PaginatedTable, {
HeaderRow,
@ -29,7 +29,7 @@ function cannotDelete(item) {
function InventoryGroupsList() {
const location = useLocation();
const { id: inventoryId } = useParams();
const { id: inventoryId, inventoryType } = useParams();
const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
const {
@ -104,8 +104,10 @@ function InventoryGroupsList() {
};
const canAdd =
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
actions &&
Object.prototype.hasOwnProperty.call(actions, 'POST') &&
inventoryType !== 'constructed_inventory';
const canDelete = inventoryType !== 'constructed_inventory';
return (
<PaginatedTable
contentError={contentError}
@ -139,14 +141,15 @@ function InventoryGroupsList() {
headerRow={
<HeaderRow qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
<HeaderCell>{t`Actions`}</HeaderCell>
{inventoryType !== 'constructed_inventory' && (
<HeaderCell>{t`Actions`}</HeaderCell>
)}
</HeaderRow>
}
renderRow={(item, index) => (
<InventoryGroupItem
key={item.id}
group={item}
inventoryId={inventoryId}
isSelected={selected.some((row) => row.id === item.id)}
onSelect={() => handleSelect(item)}
rowIndex={index}
@ -177,20 +180,28 @@ function InventoryGroupsList() {
/>,
]
: []),
<Tooltip content={renderTooltip()} position="top" key="delete">
<div>
<InventoryGroupsDeleteModal
groups={selected}
isDisabled={
selected.length === 0 || selected.some(cannotDelete)
}
onAfterDelete={() => {
fetchData();
clearSelected();
}}
/>
</div>
</Tooltip>,
...(canDelete
? [
<Tooltip
content={renderTooltip()}
position="top"
key="delete"
>
<div>
<InventoryGroupsDeleteModal
groups={selected}
isDisabled={
selected.length === 0 || selected.some(cannotDelete)
}
onAfterDelete={() => {
fetchData();
clearSelected();
}}
/>
</div>
</Tooltip>,
]
: []),
]}
/>
)}

92
awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.js
View File

@ -10,12 +10,6 @@ import {
import InventoryGroupsList from './InventoryGroupsList';
jest.mock('../../../api');
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
}),
}));
const mockGroups = [
{
id: 1,
@ -60,7 +54,14 @@ const mockGroups = [
describe('<InventoryGroupsList />', () => {
let wrapper;
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
inventoryType: 'inventory',
}),
}));
beforeEach(async () => {
InventoriesAPI.readGroups.mockResolvedValue({
data: {
@ -96,7 +97,7 @@ describe('<InventoryGroupsList />', () => {
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/inventory/:id/groups">
<Route path="/inventories/:inventoryType/:id/groups">
<InventoryGroupsList />
</Route>,
{
@ -316,3 +317,78 @@ describe('<InventoryGroupsList/> error handling', () => {
});
});
});
describe('Constructed Inventory group', () => {
let wrapper;
let history;
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
inventoryType: 'constructed_inventory',
}),
}));
beforeEach(async () => {
InventoriesAPI.readGroups.mockResolvedValue({
data: {
count: mockGroups.length,
results: mockGroups,
},
});
InventoriesAPI.readGroupsOptions.mockResolvedValue({
data: {
actions: {
GET: {},
POST: {},
},
},
});
InventoriesAPI.readAdHocOptions.mockResolvedValue({
data: {
actions: {
GET: {
module_name: {
choices: [
['command', 'command'],
['shell', 'shell'],
],
},
},
POST: {},
},
},
});
history = createMemoryHistory({
initialEntries: ['/inventories/constructed_inventory/3/groups'],
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/:inventoryType/:id/groups">
<InventoryGroupsList />
</Route>,
{
context: {
router: {
history,
route: {
location: history.location,
},
},
},
}
);
});
await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
});
afterEach(() => {
jest.clearAllMocks();
});
test('should not show add button', () => {
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
expect(wrapper.find('ToolbarDeleteButton').length).toBe(0);
expect(wrapper.find('AdHocCommands').length).toBe(1);
});
});

28
awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js
View File

@ -8,6 +8,7 @@ import {
Link,
useRouteMatch,
useLocation,
useParams,
} from 'react-router-dom';
import { Card } from '@patternfly/react-core';
import { CaretLeftIcon } from '@patternfly/react-icons';
@ -25,9 +26,9 @@ import InventoryHostGroups from '../InventoryHostGroups';
function InventoryHost({ setBreadcrumb, inventory }) {
const location = useLocation();
const match = useRouteMatch('/inventories/inventory/:id/hosts/:hostId');
const hostListUrl = `/inventories/inventory/${inventory.id}/hosts`;
const { hostId, id: inventoryId, inventoryType } = useParams();
const match = useRouteMatch('/inventories/:inventoryType/:id/hosts/:hostId');
const hostListUrl = `/inventories/${inventoryType}/${inventory.id}/hosts`;
const {
result: { host },
error: contentError,
@ -35,14 +36,11 @@ function InventoryHost({ setBreadcrumb, inventory }) {
request: fetchHost,
} = useRequest(
useCallback(async () => {
const response = await InventoriesAPI.readHostDetail(
inventory.id,
match.params.hostId
);
const response = await InventoriesAPI.readHostDetail(inventoryId, hostId);
return {
host: response,
};
}, [inventory.id, match.params.hostId]),
}, [inventoryId, hostId]),
{
host: null,
}
@ -120,37 +118,37 @@ function InventoryHost({ setBreadcrumb, inventory }) {
{!isLoading && host && (
<Switch>
<Redirect
from="/inventories/inventory/:id/hosts/:hostId"
to="/inventories/inventory/:id/hosts/:hostId/details"
from="/inventories/:inventoryType/:id/hosts/:hostId"
to="/inventories/:inventoryType/:id/hosts/:hostId/details"
exact
/>
<Route
key="details"
path="/inventories/inventory/:id/hosts/:hostId/details"
path="/inventories/:inventoryType/:id/hosts/:hostId/details"
>
<InventoryHostDetail host={host} />
</Route>
<Route
key="edit"
path="/inventories/inventory/:id/hosts/:hostId/edit"
path="/inventories/:inventoryType/:id/hosts/:hostId/edit"
>
<InventoryHostEdit host={host} inventory={inventory} />
</Route>
<Route
key="facts"
path="/inventories/inventory/:id/hosts/:hostId/facts"
path="/inventories/:inventoryType/:id/hosts/:hostId/facts"
>
<InventoryHostFacts host={host} />
</Route>
<Route
key="groups"
path="/inventories/inventory/:id/hosts/:hostId/groups"
path="/inventories/:inventoryType/:id/hosts/:hostId/groups"
>
<InventoryHostGroups />
</Route>
<Route
key="jobs"
path="/inventories/inventory/:id/hosts/:hostId/jobs"
path="/inventories/:inventoryType/:id/hosts/:hostId/jobs"
>
<JobList defaultParams={{ job__hosts: host.id }} />
</Route>

43
awx/ui/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.js
View File

@ -1,6 +1,6 @@
import 'styled-components/macro';
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Link, useHistory, useParams } from 'react-router-dom';
import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core';
@ -16,6 +16,7 @@ import { HostsAPI } from 'api';
import HostToggle from 'components/HostToggle';
function InventoryHostDetail({ host }) {
const { inventoryType } = useParams();
const {
created,
description,
@ -92,25 +93,27 @@ function InventoryHostDetail({ host }) {
dataCy="inventory-host-detail-variables"
/>
</DetailList>
<CardActionsRow>
{user_capabilities?.edit && (
<Button
ouiaId="inventory-host-detail-edit-button"
aria-label={t`edit`}
component={Link}
to={`/inventories/inventory/${inventory.id}/hosts/${id}/edit`}
>
{t`Edit`}
</Button>
)}
{user_capabilities?.delete && (
<DeleteButton
name={name}
modalTitle={t`Delete Host`}
onConfirm={() => handleHostDelete()}
/>
)}
</CardActionsRow>
{inventoryType !== 'constructed_inventory' && (
<CardActionsRow>
{user_capabilities?.edit && (
<Button
ouiaId="inventory-host-detail-edit-button"
aria-label={t`edit`}
component={Link}
to={`/inventories/inventory/${inventory.id}/hosts/${id}/edit`}
>
{t`Edit`}
</Button>
)}
{user_capabilities?.delete && (
<DeleteButton
name={name}
modalTitle={t`Delete Host`}
onConfirm={() => handleHostDelete()}
/>
)}
</CardActionsRow>
)}
{deletionError && (
<AlertModal
isOpen={deletionError}

182
awx/ui/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.test.js
View File

@ -1,4 +1,6 @@
import React from 'react';
import { Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { act } from 'react-dom/test-utils';
import { HostsAPI } from 'api';
import {
@ -10,93 +12,119 @@ import mockHost from '../shared/data.host.json';
jest.mock('../../../api');
describe('<InventoryHostDetail />', () => {
describe('User has edit permissions', () => {
let wrapper;
describe('User has edit permissions', () => {
beforeAll(() => {
beforeEach(async () => {
await act(async () => {
wrapper = mountWithContexts(<InventoryHostDetail host={mockHost} />);
});
});
test('should render Details', async () => {
function assertDetail(label, value) {
expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
}
test('should render Details', async () => {
function assertDetail(label, value) {
expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
}
assertDetail('Name', 'localhost');
assertDetail('Description', 'localhost description');
assertDetail('Created', '10/28/2019, 9:26:54 PM');
assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(
1
);
});
test('should show edit button for users with edit permission', () => {
const editButton = wrapper.find('Button[aria-label="edit"]');
expect(editButton.text()).toEqual('Edit');
expect(editButton.prop('to')).toBe(
'/inventories/inventory/3/hosts/2/edit'
);
});
test('expected api call is made for delete', async () => {
await act(async () => {
wrapper.find('DeleteButton').invoke('onConfirm')();
});
expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
});
test('Error dialog shown for failed deletion', async () => {
HostsAPI.destroy.mockImplementationOnce(() =>
Promise.reject(new Error())
);
await act(async () => {
wrapper.find('DeleteButton').invoke('onConfirm')();
});
await waitForElement(
wrapper,
'Modal[title="Error!"]',
(el) => el.length === 1
);
await act(async () => {
wrapper.find('Modal[title="Error!"]').invoke('onClose')();
});
await waitForElement(
wrapper,
'Modal[title="Error!"]',
(el) => el.length === 0
);
});
assertDetail('Name', 'localhost');
assertDetail('Description', 'localhost description');
assertDetail('Created', '10/28/2019, 9:26:54 PM');
assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(1);
});
describe('User has read-only permissions', () => {
beforeAll(() => {
const readOnlyHost = {
...mockHost,
summary_fields: {
...mockHost.summary_fields,
user_capabilities: {
...mockHost.summary_fields.user_capabilities,
},
},
};
readOnlyHost.summary_fields.user_capabilities.edit = false;
readOnlyHost.summary_fields.recent_jobs = [];
wrapper = mountWithContexts(<InventoryHostDetail host={readOnlyHost} />);
});
test('should show edit button for users with edit permission', () => {
const editButton = wrapper.find('Button[aria-label="edit"]');
expect(editButton.text()).toEqual('Edit');
expect(editButton.prop('to')).toBe('/inventories/inventory/3/hosts/2/edit');
});
test('should hide activity stream when there are no recent jobs', async () => {
expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(
0
);
const activity_detail = wrapper.find(`Detail[label="Activity"]`).at(0);
expect(activity_detail.prop('isEmpty')).toEqual(true);
test('expected api call is made for delete', async () => {
await act(async () => {
wrapper.find('DeleteButton').invoke('onConfirm')();
});
expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
});
test('should hide edit button for users without edit permission', async () => {
expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
test('Error dialog shown for failed deletion', async () => {
HostsAPI.destroy.mockImplementationOnce(() => Promise.reject(new Error()));
await act(async () => {
wrapper.find('DeleteButton').invoke('onConfirm')();
});
await waitForElement(
wrapper,
'Modal[title="Error!"]',
(el) => el.length === 1
);
await act(async () => {
wrapper.find('Modal[title="Error!"]').invoke('onClose')();
});
await waitForElement(
wrapper,
'Modal[title="Error!"]',
(el) => el.length === 0
);
});
});
describe('User has read-only permissions', () => {
let wrapper;
beforeEach(async () => {
const readOnlyHost = {
...mockHost,
summary_fields: {
...mockHost.summary_fields,
user_capabilities: {
...mockHost.summary_fields.user_capabilities,
},
},
};
readOnlyHost.summary_fields.user_capabilities.edit = false;
readOnlyHost.summary_fields.recent_jobs = [];
await act(async () => {
wrapper = mountWithContexts(<InventoryHostDetail host={readOnlyHost} />);
});
});
test('should hide activity stream when there are no recent jobs', async () => {
expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(0);
const activity_detail = wrapper.find(`Detail[label="Activity"]`).at(0);
expect(activity_detail.prop('isEmpty')).toEqual(true);
});
test('should hide edit button for users without edit permission', async () => {
expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
});
});
describe('Cannot delete a constructed inventory', () => {
let wrapper;
let history;
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 42,
hostId: 3,
inventoryType: 'constructed_inventory',
}),
}));
beforeEach(async () => {
history = createMemoryHistory({
initialEntries: [`/inventories/constructed_inventory/1/hosts/1/details`],
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/:inventoryType/:id/hosts/:id/details">
<InventoryHostDetail host={mockHost} />
</Route>,
{ context: { router: { history } } }
);
});
});
test('should not show edit button', () => {
const editButton = wrapper.find('Button[aria-label="edit"]');
expect(editButton.length).toBe(0);
expect(wrapper.find('Button[aria-label="delete"]').length).toBe(0);
});
});

18
awx/ui/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupItem.js
View File

@ -1,24 +1,19 @@
import React from 'react';
import { bool, func, number, oneOfType, string } from 'prop-types';
import { bool, func } from 'prop-types';
import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import { ActionsTd, ActionItem } from 'components/PaginatedTable';
import { Group } from 'types';
function InventoryHostGroupItem({
group,
inventoryId,
isSelected,
onSelect,
rowIndex,
}) {
function InventoryHostGroupItem({ group, isSelected, onSelect, rowIndex }) {
const { id: inventoryId, inventoryType } = useParams();
const labelId = `check-action-${group.id}`;
const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;
return (
<Tr
@ -59,7 +54,6 @@ function InventoryHostGroupItem({
InventoryHostGroupItem.propTypes = {
group: Group.isRequired,
inventoryId: oneOfType([number, string]).isRequired,
isSelected: bool.isRequired,
onSelect: func.isRequired,
};

32
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostItem.js
View File

@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
import { string, bool, func } from 'prop-types';
import { t } from '@lingui/macro';
import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import { Button, Chip } from '@patternfly/react-core';
import { HostsAPI } from 'api';
@ -22,6 +22,8 @@ function InventoryHostItem({
onSelect,
rowIndex,
}) {
const { inventoryType } = useParams();
const labelId = `check-action-${host.id}`;
const initialGroups = host?.summary_fields?.groups ?? {
results: [],
@ -95,20 +97,22 @@ function InventoryHostItem({
gridColumns="auto 40px"
>
<HostToggle host={host} />
<ActionItem
visible={host.summary_fields.user_capabilities?.edit}
tooltip={t`Edit host`}
>
<Button
aria-label={t`Edit host`}
ouiaId={`${host.id}-edit-button`}
variant="plain"
component={Link}
to={`${editUrl}`}
{inventoryType !== 'constructed_inventory' && (
<ActionItem
visible={host.summary_fields.user_capabilities?.edit}
tooltip={t`Edit host`}
>
<PencilAltIcon />
</Button>
</ActionItem>
<Button
aria-label={t`Edit host`}
ouiaId={`${host.id}-edit-button`}
variant="plain"
component={Link}
to={`${editUrl}`}
>
<PencilAltIcon />
</Button>
</ActionItem>
)}
</ActionsTd>
</Tr>
{dismissableError && (

28
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostList.js
View File

@ -26,7 +26,7 @@ const QS_CONFIG = getQSConfig('host', {
function InventoryHostList() {
const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
const { id } = useParams();
const { id, inventoryType } = useParams();
const { search } = useLocation();
const {
@ -100,8 +100,10 @@ function InventoryHostList() {
};
const canAdd =
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
actions &&
Object.prototype.hasOwnProperty.call(actions, 'POST') &&
inventoryType !== 'constructed_inventory';
const canDelete = inventoryType !== 'constructed_inventory';
return (
<>
<PaginatedTable
@ -166,12 +168,16 @@ function InventoryHostList() {
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={handleDeleteHosts}
itemsToDelete={selected}
pluralizedItemName={t`Hosts`}
/>,
...(canDelete
? [
<ToolbarDeleteButton
key="delete"
onDelete={handleDeleteHosts}
itemsToDelete={selected}
pluralizedItemName={t`Hosts`}
/>,
]
: []),
]}
/>
)}
@ -179,8 +185,8 @@ function InventoryHostList() {
<InventoryHostItem
key={host.id}
host={host}
detailUrl={`/inventories/inventory/${id}/hosts/${host.id}/details`}
editUrl={`/inventories/inventory/${id}/hosts/${host.id}/edit`}
detailUrl={`/inventories/${inventoryType}/${id}/hosts/${host.id}/details`}
editUrl={`/inventories/${inventoryType}/${id}/hosts/${host.id}/edit`}
isSelected={selected.some((row) => row.id === host.id)}
onSelect={() => handleSelect(host)}
rowIndex={index}

79
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostList.test.js
View File

@ -1,4 +1,6 @@
import React from 'react';
import { Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { act } from 'react-dom/test-utils';
import { InventoriesAPI, HostsAPI } from 'api';
import {
@ -359,3 +361,80 @@ describe('<InventoryHostList />', () => {
expect(wrapper.find('AdHocCommands')).toHaveLength(0);
});
});
describe('Should not show add button for constructed inventory host list', () => {
let wrapper;
let history;
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
id: 1,
groupId: 2,
inventoryType: 'constructed_inventory',
}),
}));
beforeEach(async () => {
InventoriesAPI.readHosts.mockResolvedValue({
data: {
count: mockHosts.length,
results: mockHosts,
},
});
InventoriesAPI.readHostsOptions.mockResolvedValue({
data: {
actions: {
GET: {},
POST: {},
},
related_search_fields: ['first_key__search', 'ansible_facts'],
},
});
InventoriesAPI.readAdHocOptions.mockResolvedValue({
data: {
actions: {
GET: {
module_name: {
choices: [
['command', 'command'],
['shell', 'shell'],
],
},
},
POST: {},
},
},
});
history = createMemoryHistory({
initialEntries: ['/inventories/constructed_inventory/3/hosts'],
});
await act(async () => {
wrapper = mountWithContexts(
<Route path="/inventories/:inventoryType/:id/hosts">
<InventoryHostList />
</Route>,
{
context: {
router: {
history,
route: {
location: history.location,
},
},
},
}
);
});
await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
});
afterEach(() => {
jest.clearAllMocks();
});
test('should not show add button', () => {
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
expect(wrapper.find('ToolbarDeleteButton').length).toBe(0);
expect(wrapper.find('AdHocCommands').length).toBe(1);
});
});

8
awx/ui/src/screens/Inventory/InventoryHosts/InventoryHosts.js
View File

@ -8,14 +8,14 @@ import InventoryHostList from './InventoryHostList';
function InventoryHosts({ setBreadcrumb, inventory }) {
return (
<Switch>
<Route key="host-add" path="/inventories/inventory/:id/hosts/add">
<Route key="host-add" path="/inventories/:inventoryType/:id/hosts/add">
<InventoryHostAdd inventory={inventory} />
</Route>
<Route key="host" path="/inventories/inventory/:id/hosts/:hostId">
<Route key="host" path="/inventories/:inventoryType/:id/hosts/:hostId">
<InventoryHost setBreadcrumb={setBreadcrumb} inventory={inventory} />
</Route>
<Route key="host-list" path="/inventories/inventory/:id/hosts">
<InventoryHostList />
<Route key="host-list" path="/inventories/:inventoryType/:id/hosts">
<InventoryHostList inventory={inventory} />
</Route>
</Switch>
);

2
awx/ui/src/screens/Inventory/InventoryHosts/index.js
View File

@ -1 +1 @@
export { default } from './InventoryHostList';
export { default } from './InventoryHosts';

7
awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupList.js
View File

@ -33,7 +33,7 @@ function InventoryRelatedGroupList() {
const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
const [associateError, setAssociateError] = useState(null);
const [disassociateError, setDisassociateError] = useState(null);
const { id: inventoryId, groupId } = useParams();
const { id: inventoryId, groupId, inventoryType } = useParams();
const location = useLocation();
const {
@ -69,9 +69,10 @@ function InventoryRelatedGroupList() {
searchableKeys: getSearchableKeys(actions.data.actions?.GET),
canAdd:
actions.data.actions &&
Object.prototype.hasOwnProperty.call(actions.data.actions, 'POST'),
Object.prototype.hasOwnProperty.call(actions.data.actions, 'POST') &&
inventoryType !== 'constructed_inventory',
};
}, [groupId, location.search, inventoryId]),
}, [groupId, location.search, inventoryType, inventoryId]),
{
groups: [],
itemCount: 0,

4
awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroups.js
View File

@ -8,13 +8,13 @@ function InventoryRelatedGroups() {
<Switch>
<Route
key="addRelatedGroups"
path="/inventories/inventory/:id/groups/:groupId/nested_groups/add"
path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups/add"
>
<InventoryRelatedGroupAdd />
</Route>
<Route
key="relatedGroups"
path="/inventories/inventory/:id/groups/:groupId/nested_groups"
path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups"
>
<InventoryRelatedGroupList />
</Route>