mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 11:00:03 -03:30
Merge pull request #5600 from AlexSCorey/5266-InventoryHostDetails
Adds Toggle, Variables, User Link and Delete to Inventory Host/Host Details Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
commit
1bf0bc8203
@ -116,6 +116,7 @@ class SelectResourceStep extends React.Component {
|
||||
name={item[displayKey]}
|
||||
label={item[displayKey]}
|
||||
onSelect={() => onRowClick(item)}
|
||||
onDeselect={() => onRowClick(item)}
|
||||
/>
|
||||
)}
|
||||
renderToolbar={props => <DataListToolbar {...props} fillWidth />}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import { shape, string, number, arrayOf } from 'prop-types';
|
||||
import { shape, string, number, arrayOf, node, oneOfType } from 'prop-types';
|
||||
import { Tab, Tabs as PFTabs } from '@patternfly/react-core';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { CaretLeftIcon } from '@patternfly/react-icons';
|
||||
|
||||
const Tabs = styled(PFTabs)`
|
||||
--pf-c-tabs__button--PaddingLeft: 20px;
|
||||
@ -63,15 +62,7 @@ function RoutedTabs(props) {
|
||||
eventKey={tab.id}
|
||||
key={tab.id}
|
||||
link={tab.link}
|
||||
title={
|
||||
tab.isNestedTabs ? (
|
||||
<>
|
||||
<CaretLeftIcon /> {tab.name}
|
||||
</>
|
||||
) : (
|
||||
tab.name
|
||||
)
|
||||
}
|
||||
title={tab.name}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
@ -87,7 +78,7 @@ RoutedTabs.propTypes = {
|
||||
shape({
|
||||
id: number.isRequired,
|
||||
link: string.isRequired,
|
||||
name: string.isRequired,
|
||||
name: oneOfType([string.isRequired, node.isRequired]),
|
||||
})
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
@ -2,13 +2,17 @@ import React, { Component } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
import { Card } from '@patternfly/react-core';
|
||||
import { CaretLeftIcon } from '@patternfly/react-icons';
|
||||
|
||||
import { TabbedCardHeader } from '@components/Card';
|
||||
import CardCloseButton from '@components/CardCloseButton';
|
||||
import RoutedTabs from '@components/RoutedTabs';
|
||||
import ContentError from '@components/ContentError';
|
||||
import ContentLoading from '@components/ContentLoading';
|
||||
import HostFacts from './HostFacts';
|
||||
import HostDetail from './HostDetail';
|
||||
|
||||
import HostEdit from './HostEdit';
|
||||
import HostGroups from './HostGroups';
|
||||
import HostCompletedJobs from './HostCompletedJobs';
|
||||
@ -46,14 +50,20 @@ class Host extends Component {
|
||||
}
|
||||
|
||||
async loadHost() {
|
||||
const { match, setBreadcrumb } = this.props;
|
||||
const id = parseInt(match.params.id, 10);
|
||||
const { match, setBreadcrumb, history, inventory } = this.props;
|
||||
|
||||
this.setState({ contentError: null, hasContentLoading: true });
|
||||
try {
|
||||
const { data } = await HostsAPI.readDetail(id);
|
||||
setBreadcrumb(data);
|
||||
const { data } = await HostsAPI.readDetail(
|
||||
match.params.hostId || match.params.id
|
||||
);
|
||||
this.setState({ host: data });
|
||||
|
||||
if (history.location.pathname.startsWith('/hosts')) {
|
||||
setBreadcrumb(data);
|
||||
} else {
|
||||
setBreadcrumb(inventory, data);
|
||||
}
|
||||
} catch (err) {
|
||||
this.setState({ contentError: err });
|
||||
} finally {
|
||||
@ -63,20 +73,41 @@ class Host extends Component {
|
||||
|
||||
render() {
|
||||
const { location, match, history, i18n } = this.props;
|
||||
|
||||
const { host, contentError, hasContentLoading, isInitialized } = this.state;
|
||||
|
||||
const { host, hasContentLoading, isInitialized, contentError } = this.state;
|
||||
const tabsArray = [
|
||||
{ name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
|
||||
{ name: i18n._(t`Facts`), link: `${match.url}/facts`, id: 1 },
|
||||
{ name: i18n._(t`Groups`), link: `${match.url}/groups`, id: 2 },
|
||||
{
|
||||
name: i18n._(t`Details`),
|
||||
link: `${match.url}/details`,
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Facts`),
|
||||
link: `${match.url}/facts`,
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Groups`),
|
||||
link: `${match.url}/groups`,
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Completed Jobs`),
|
||||
link: `${match.url}/completed_jobs`,
|
||||
id: 3,
|
||||
},
|
||||
];
|
||||
|
||||
if (!history.location.pathname.startsWith('/hosts')) {
|
||||
tabsArray.unshift({
|
||||
name: (
|
||||
<>
|
||||
<CaretLeftIcon />
|
||||
{i18n._(t`Back to Hosts`)}
|
||||
</>
|
||||
),
|
||||
link: `/inventories/inventory/${match.params.id}/hosts`,
|
||||
id: 99,
|
||||
});
|
||||
}
|
||||
let cardHeader = (
|
||||
<TabbedCardHeader>
|
||||
<RoutedTabs
|
||||
@ -101,78 +132,98 @@ class Host extends Component {
|
||||
cardHeader = null;
|
||||
}
|
||||
|
||||
if (!hasContentLoading && contentError) {
|
||||
return (
|
||||
<PageSection>
|
||||
<Card className="awx-c-card">
|
||||
<ContentError error={contentError}>
|
||||
{contentError.response.status === 404 && (
|
||||
<span>
|
||||
{i18n._(`Host not found.`)}{' '}
|
||||
<Link to="/hosts">{i18n._(`View all Hosts.`)}</Link>
|
||||
</span>
|
||||
)}
|
||||
</ContentError>
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
if (hasContentLoading) {
|
||||
return <ContentLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
if (!hasContentLoading && contentError) {
|
||||
return (
|
||||
<Card className="awx-c-card">
|
||||
{cardHeader}
|
||||
<Switch>
|
||||
<Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/edit"
|
||||
render={() => <HostEdit match={match} host={host} />}
|
||||
/>
|
||||
<ContentError error={contentError}>
|
||||
{contentError.response.status === 404 && (
|
||||
<span>
|
||||
{i18n._(`Host not found.`)}{' '}
|
||||
<Link to="/hosts">{i18n._(`View all Hosts.`)}</Link>
|
||||
</span>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/details"
|
||||
render={() => <HostDetail host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/facts"
|
||||
render={() => <HostFacts host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/groups"
|
||||
render={() => <HostGroups host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/completed_jobs"
|
||||
render={() => <HostCompletedJobs host={host} />}
|
||||
/>
|
||||
)}
|
||||
<Route
|
||||
key="not-found"
|
||||
path="*"
|
||||
render={() =>
|
||||
!hasContentLoading && (
|
||||
<ContentError isNotFound>
|
||||
{match.params.id && (
|
||||
<Link to={`/hosts/${match.params.id}/details`}>
|
||||
{i18n._(`View Host Details`)}
|
||||
</Link>
|
||||
)}
|
||||
</ContentError>
|
||||
)
|
||||
}
|
||||
/>
|
||||
,
|
||||
</Switch>
|
||||
</ContentError>
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
const redirect = location.pathname.startsWith('/hosts') ? (
|
||||
<Redirect from="/hosts/:id" to="/hosts/:id/details" exact />
|
||||
) : (
|
||||
<Redirect
|
||||
from="/inventories/inventory/:id/hosts/:hostId"
|
||||
to="/inventories/inventory/:id/hosts/:hostId/details"
|
||||
exact
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Card className="awx-c-card">
|
||||
{cardHeader}
|
||||
<Switch>
|
||||
{redirect}
|
||||
{host && (
|
||||
<Route
|
||||
path={[
|
||||
'/hosts/:id/details',
|
||||
'/inventories/inventory/:id/hosts/:hostId/details',
|
||||
]}
|
||||
render={() => (
|
||||
<HostDetail
|
||||
host={host}
|
||||
onUpdateHost={newHost => this.setState({ host: newHost })}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
))
|
||||
{host && (
|
||||
<Route
|
||||
path={[
|
||||
'/hosts/:id/edit',
|
||||
'/inventories/inventory/:id/hosts/:hostId/edit',
|
||||
]}
|
||||
render={() => <HostEdit match={match} host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/facts"
|
||||
render={() => <HostFacts host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/groups"
|
||||
render={() => <HostGroups host={host} />}
|
||||
/>
|
||||
)}
|
||||
{host && (
|
||||
<Route
|
||||
path="/hosts/:id/completed_jobs"
|
||||
render={() => <HostCompletedJobs host={host} />}
|
||||
/>
|
||||
)}
|
||||
<Route
|
||||
key="not-found"
|
||||
path="*"
|
||||
render={() =>
|
||||
!hasContentLoading && (
|
||||
<ContentError isNotFound>
|
||||
{match.params.id && (
|
||||
<Link to={`/hosts/${match.params.id}/details`}>
|
||||
{i18n._(`View Host Details`)}
|
||||
</Link>
|
||||
)}
|
||||
</ContentError>
|
||||
)
|
||||
}
|
||||
/>
|
||||
,
|
||||
</Switch>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +1,167 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useHistory, useParams, useLocation } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Host } from '@types';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { CardBody, CardActionsRow } from '@components/Card';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
|
||||
import { VariablesDetail } from '@components/CodeMirrorInput';
|
||||
import { Sparkline } from '@components/Sparkline';
|
||||
import DeleteButton from '@components/DeleteButton';
|
||||
import Switch from '@components/Switch';
|
||||
import { HostsAPI } from '@api';
|
||||
|
||||
function HostDetail({ host, i18n }) {
|
||||
const { created, description, id, modified, name, summary_fields } = host;
|
||||
function HostDetail({ host, i18n, onUpdateHost }) {
|
||||
const {
|
||||
created,
|
||||
description,
|
||||
id,
|
||||
modified,
|
||||
name,
|
||||
enabled,
|
||||
summary_fields: {
|
||||
inventory,
|
||||
recent_jobs,
|
||||
kind,
|
||||
created_by,
|
||||
modified_by,
|
||||
user_capabilities,
|
||||
},
|
||||
} = host;
|
||||
|
||||
const history = useHistory();
|
||||
const { pathname } = useLocation();
|
||||
const { id: inventoryId, hostId: inventoryHostId } = useParams();
|
||||
const [isLoading, setIsloading] = useState(false);
|
||||
const [deletionError, setDeletionError] = useState(false);
|
||||
const [toggleLoading, setToggleLoading] = useState(false);
|
||||
const [toggleError, setToggleError] = useState(false);
|
||||
|
||||
const handleHostToggle = async () => {
|
||||
setToggleLoading(true);
|
||||
try {
|
||||
const { data } = await HostsAPI.update(id, {
|
||||
enabled: !enabled,
|
||||
});
|
||||
onUpdateHost(data);
|
||||
} catch (err) {
|
||||
setToggleError(err);
|
||||
} finally {
|
||||
setToggleLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHostDelete = async () => {
|
||||
setIsloading(true);
|
||||
try {
|
||||
await HostsAPI.destroy(id);
|
||||
setIsloading(false);
|
||||
history.push(`/inventories/inventory/${inventoryId}/hosts`);
|
||||
} catch (err) {
|
||||
setDeletionError(err);
|
||||
}
|
||||
};
|
||||
|
||||
if (toggleError && !toggleLoading) {
|
||||
return (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={() => setToggleError(false)}
|
||||
>
|
||||
{i18n._(t`Failed to toggle host.`)}
|
||||
<ErrorDetail error={toggleError} />
|
||||
</AlertModal>
|
||||
);
|
||||
}
|
||||
if (!isLoading && deletionError) {
|
||||
return (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(false)}
|
||||
>
|
||||
{i18n._(t`Failed to delete ${name}.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<CardBody>
|
||||
<Switch
|
||||
css="padding-bottom: 40px"
|
||||
id={`host-${id}-toggle`}
|
||||
label={i18n._(t`On`)}
|
||||
labelOff={i18n._(t`Off`)}
|
||||
isChecked={enabled}
|
||||
isDisabled={!user_capabilities.edit}
|
||||
onChange={() => handleHostToggle()}
|
||||
aria-label={i18n._(t`Toggle Host`)}
|
||||
/>
|
||||
<DetailList gutter="sm">
|
||||
<Detail label={i18n._(t`Name`)} value={name} />
|
||||
<Detail
|
||||
css="display: flex; flex: 1;"
|
||||
value={<Sparkline jobs={recent_jobs} />}
|
||||
label={i18n._(t`Activity`)}
|
||||
/>
|
||||
<Detail label={i18n._(t`Description`)} value={description} />
|
||||
{summary_fields.inventory && (
|
||||
{inventory && (
|
||||
<Detail
|
||||
label={i18n._(t`Inventory`)}
|
||||
value={
|
||||
<Link
|
||||
to={`/inventories/${
|
||||
summary_fields.inventory.kind === 'smart'
|
||||
? 'smart_inventory'
|
||||
: 'inventory'
|
||||
}/${summary_fields.inventory.id}/details`}
|
||||
kind === 'smart' ? 'smart_inventory' : 'inventory'
|
||||
}/${inventoryId}/details`}
|
||||
>
|
||||
{summary_fields.inventory.name}
|
||||
{inventory.name}
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<UserDateDetail
|
||||
label={i18n._(t`Created`)}
|
||||
date={created}
|
||||
user={summary_fields.created_by}
|
||||
label={i18n._(t`Created`)}
|
||||
user={created_by}
|
||||
/>
|
||||
<UserDateDetail
|
||||
label={i18n._(t`Last Modified`)}
|
||||
user={modified_by}
|
||||
date={modified}
|
||||
user={summary_fields.modified_by}
|
||||
/>
|
||||
<VariablesDetail
|
||||
label={i18n._(t`Variables`)}
|
||||
value={host.variables}
|
||||
rows={6}
|
||||
rows={4}
|
||||
label={i18n._(t`Variables`)}
|
||||
/>
|
||||
</DetailList>
|
||||
<CardActionsRow>
|
||||
{summary_fields.user_capabilities &&
|
||||
summary_fields.user_capabilities.edit && (
|
||||
<Button
|
||||
aria-label={i18n._(t`edit`)}
|
||||
component={Link}
|
||||
to={`/hosts/${id}/edit`}
|
||||
>
|
||||
{i18n._(t`Edit`)}
|
||||
</Button>
|
||||
)}
|
||||
{user_capabilities && user_capabilities.edit && (
|
||||
<Button
|
||||
aria-label={i18n._(t`edit`)}
|
||||
component={Link}
|
||||
to={
|
||||
pathname.startsWith('/inventories')
|
||||
? `/inventories/inventory/${inventoryId}/hosts/${inventoryHostId}/edit`
|
||||
: `/hosts/${id}/edit`
|
||||
}
|
||||
>
|
||||
{i18n._(t`Edit`)}
|
||||
</Button>
|
||||
)}
|
||||
{user_capabilities && user_capabilities.delete && (
|
||||
<DeleteButton
|
||||
onConfirm={() => handleHostDelete()}
|
||||
modalTitle={i18n._(t`Delete Host`)}
|
||||
name={host.name}
|
||||
/>
|
||||
)}
|
||||
</CardActionsRow>
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
@ -50,8 +50,7 @@ describe('<HostDetail />', () => {
|
||||
|
||||
test('should show edit button for users with edit permission', async () => {
|
||||
const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
|
||||
// VariablesDetail has two buttons
|
||||
const editButton = wrapper.find('Button').at(2);
|
||||
const editButton = wrapper.find('Button[aria-label="edit"]');
|
||||
expect(editButton.text()).toEqual('Edit');
|
||||
expect(editButton.prop('to')).toBe('/hosts/1/edit');
|
||||
});
|
||||
@ -61,7 +60,6 @@ describe('<HostDetail />', () => {
|
||||
readOnlyHost.summary_fields.user_capabilities.edit = false;
|
||||
const wrapper = mountWithContexts(<HostDetail host={readOnlyHost} />);
|
||||
await waitForElement(wrapper, 'HostDetail');
|
||||
// VariablesDetail has two buttons
|
||||
expect(wrapper.find('Button').length).toBe(2);
|
||||
expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
import { Card } from '@patternfly/react-core';
|
||||
|
||||
import { HostsAPI } from '@api';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
@ -180,76 +180,74 @@ class HostsList extends Component {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={hosts}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={this.handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created By (Username)`),
|
||||
key: 'created_by__username',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified By (Username)`),
|
||||
key: 'modified_by__username',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={this.handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={this.handleHostDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
/>,
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<HostListItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`${match.url}/${o.id}`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => this.handleSelect(o)}
|
||||
toggleHost={this.handleHostToggle}
|
||||
toggleLoading={toggleLoading === o.id}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={hosts}
|
||||
itemCount={itemCount}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={this.handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created By (Username)`),
|
||||
key: 'created_by__username',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified By (Username)`),
|
||||
key: 'modified_by__username',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={this.handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={this.handleHostDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
/>,
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<HostListItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`${match.url}/${o.id}/details`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => this.handleSelect(o)}
|
||||
onToggleHost={this.handleHostToggle}
|
||||
toggleLoading={toggleLoading === o.id}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
{toggleError && !toggleLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
|
||||
@ -34,7 +34,7 @@ class HostListItem extends React.Component {
|
||||
isSelected,
|
||||
onSelect,
|
||||
detailUrl,
|
||||
toggleHost,
|
||||
onToggleHost,
|
||||
toggleLoading,
|
||||
i18n,
|
||||
} = this.props;
|
||||
@ -93,7 +93,7 @@ class HostListItem extends React.Component {
|
||||
toggleLoading ||
|
||||
!host.summary_fields.user_capabilities.edit
|
||||
}
|
||||
onChange={() => toggleHost(host)}
|
||||
onChange={() => onToggleHost(host)}
|
||||
aria-label={i18n._(t`Toggle host`)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@ -4,7 +4,7 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
|
||||
|
||||
import HostsListItem from './HostListItem';
|
||||
|
||||
let toggleHost;
|
||||
let onToggleHost;
|
||||
|
||||
const mockHost = {
|
||||
id: 1,
|
||||
@ -24,7 +24,7 @@ const mockHost = {
|
||||
|
||||
describe('<HostsListItem />', () => {
|
||||
beforeEach(() => {
|
||||
toggleHost = jest.fn();
|
||||
onToggleHost = jest.fn();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
@ -38,7 +38,7 @@ describe('<HostsListItem />', () => {
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={mockHost}
|
||||
toggleHost={toggleHost}
|
||||
onToggleHost={onToggleHost}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
|
||||
@ -52,7 +52,7 @@ describe('<HostsListItem />', () => {
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={copyMockHost}
|
||||
toggleHost={toggleHost}
|
||||
onToggleHost={onToggleHost}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
@ -64,7 +64,7 @@ describe('<HostsListItem />', () => {
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={mockHost}
|
||||
toggleHost={toggleHost}
|
||||
onToggleHost={onToggleHost}
|
||||
/>
|
||||
);
|
||||
wrapper
|
||||
@ -72,7 +72,7 @@ describe('<HostsListItem />', () => {
|
||||
.first()
|
||||
.find('input')
|
||||
.simulate('change');
|
||||
expect(toggleHost).toHaveBeenCalledWith(mockHost);
|
||||
expect(onToggleHost).toHaveBeenCalledWith(mockHost);
|
||||
});
|
||||
|
||||
test('handles toggle click when host is disabled', () => {
|
||||
@ -82,7 +82,7 @@ describe('<HostsListItem />', () => {
|
||||
detailUrl="/host/1"
|
||||
onSelect={() => {}}
|
||||
host={mockHost}
|
||||
toggleHost={toggleHost}
|
||||
onToggleHost={onToggleHost}
|
||||
/>
|
||||
);
|
||||
wrapper
|
||||
@ -90,6 +90,6 @@ describe('<HostsListItem />', () => {
|
||||
.first()
|
||||
.find('input')
|
||||
.simulate('change');
|
||||
expect(toggleHost).toHaveBeenCalledWith(mockHost);
|
||||
expect(onToggleHost).toHaveBeenCalledWith(mockHost);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
|
||||
import { Route, withRouter, Switch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { PageSection } from '@patternfly/react-core';
|
||||
|
||||
import { Config } from '@contexts/Config';
|
||||
import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
|
||||
@ -46,31 +47,31 @@ class Hosts extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { match, history, location } = this.props;
|
||||
const { match } = this.props;
|
||||
const { breadcrumbConfig } = this.state;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
|
||||
<Switch>
|
||||
<Route path={`${match.path}/add`} render={() => <HostAdd />} />
|
||||
<Route
|
||||
path={`${match.path}/:id`}
|
||||
render={() => (
|
||||
<Config>
|
||||
{({ me }) => (
|
||||
<Host
|
||||
history={history}
|
||||
location={location}
|
||||
setBreadcrumb={this.setBreadcrumbConfig}
|
||||
me={me || {}}
|
||||
/>
|
||||
)}
|
||||
</Config>
|
||||
)}
|
||||
/>
|
||||
<Route path={`${match.path}`} render={() => <HostList />} />
|
||||
</Switch>
|
||||
<PageSection>
|
||||
<Switch>
|
||||
<Route path={`${match.path}/add`} render={() => <HostAdd />} />
|
||||
<Route
|
||||
path={`${match.path}/:id`}
|
||||
render={() => (
|
||||
<Config>
|
||||
{({ me }) => (
|
||||
<Host
|
||||
setBreadcrumb={this.setBreadcrumbConfig}
|
||||
me={me || {}}
|
||||
/>
|
||||
)}
|
||||
</Config>
|
||||
)}
|
||||
/>
|
||||
<Route path={`${match.path}`} render={() => <HostList />} />
|
||||
</Switch>
|
||||
</PageSection>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ class Inventories extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
setBreadCrumbConfig = (inventory, group) => {
|
||||
setBreadCrumbConfig = (inventory, nestedResource) => {
|
||||
const { i18n } = this.props;
|
||||
if (!inventory) {
|
||||
return;
|
||||
@ -39,33 +39,49 @@ class Inventories extends Component {
|
||||
'/inventories/inventory/add': i18n._(t`Create New Inventory`),
|
||||
'/inventories/smart_inventory/add': i18n._(t`Create New Smart Inventory`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}`]: `${inventory.name}`,
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/details`]: i18n._(
|
||||
t`Details`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/edit`]: i18n._(
|
||||
t`Edit Details`
|
||||
),
|
||||
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/access`]: i18n._(
|
||||
t`Access`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/completed_jobs`]: i18n._(
|
||||
t`Completed Jobs`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/details`]: i18n._(
|
||||
t`Details`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/edit`]: i18n._(
|
||||
t`Edit Details`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/groups`]: i18n._(
|
||||
t`Groups`
|
||||
),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/hosts`]: i18n._(t`Hosts`),
|
||||
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/sources`]: i18n._(
|
||||
t`Sources`
|
||||
),
|
||||
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/hosts/add`]: i18n._(
|
||||
t`Create New Host`
|
||||
),
|
||||
[`/inventories/inventory/${inventory.id}/sources`]: i18n._(t`Sources`),
|
||||
[`/inventories/inventory/${inventory.id}/groups`]: i18n._(t`Groups`),
|
||||
[`/inventories/inventory/${inventory.id}/groups/add`]: i18n._(
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
|
||||
nestedResource.id}/edit`]: i18n._(t`Edit Details`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
|
||||
nestedResource.id}/details`]: i18n._(t`Host Details`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/hosts/${nestedResource &&
|
||||
nestedResource.id}`]: i18n._(
|
||||
t`${nestedResource && nestedResource.name}`
|
||||
),
|
||||
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/groups/add`]: i18n._(
|
||||
t`Create New Group`
|
||||
),
|
||||
[`/inventories/inventory/${inventory.id}/groups/${group &&
|
||||
group.id}`]: `${group && group.name}`,
|
||||
[`/inventories/inventory/${inventory.id}/groups/${group &&
|
||||
group.id}/details`]: i18n._(t`Group Details`),
|
||||
[`/inventories/inventory/${inventory.id}/groups/${group &&
|
||||
group.id}/edit`]: i18n._(t`Edit Details`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
|
||||
nestedResource.id}/edit`]: i18n._(t`Edit Details`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
|
||||
nestedResource.id}/details`]: i18n._(t`Group Details`),
|
||||
[`/inventories/${inventoryKind}/${inventory.id}/groups/${nestedResource &&
|
||||
nestedResource.id}`]: `${nestedResource && nestedResource.name}`,
|
||||
};
|
||||
this.setState({ breadcrumbConfig });
|
||||
};
|
||||
|
||||
@ -8,14 +8,15 @@ import CardCloseButton from '@components/CardCloseButton';
|
||||
import ContentError from '@components/ContentError';
|
||||
import RoutedTabs from '@components/RoutedTabs';
|
||||
import { ResourceAccessList } from '@components/ResourceAccessList';
|
||||
import ContentLoading from '@components/ContentLoading';
|
||||
import InventoryDetail from './InventoryDetail';
|
||||
import InventoryHosts from './InventoryHosts';
|
||||
import InventoryHostAdd from './InventoryHostAdd';
|
||||
|
||||
import InventoryGroups from './InventoryGroups';
|
||||
import InventoryCompletedJobs from './InventoryCompletedJobs';
|
||||
import InventorySources from './InventorySources';
|
||||
import { InventoriesAPI } from '@api';
|
||||
import InventoryEdit from './InventoryEdit';
|
||||
import InventoryHosts from './InventoryHosts/InventoryHosts';
|
||||
|
||||
function Inventory({ history, i18n, location, match, setBreadcrumb }) {
|
||||
const [contentError, setContentError] = useState(null);
|
||||
@ -61,10 +62,14 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
|
||||
if (
|
||||
location.pathname.endsWith('edit') ||
|
||||
location.pathname.endsWith('add') ||
|
||||
location.pathname.includes('groups/')
|
||||
location.pathname.includes('groups/') ||
|
||||
location.pathname.includes('hosts/')
|
||||
) {
|
||||
cardHeader = null;
|
||||
}
|
||||
if (hasContentLoading) {
|
||||
return <ContentLoading />;
|
||||
}
|
||||
|
||||
if (!hasContentLoading && contentError) {
|
||||
return (
|
||||
@ -111,9 +116,16 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
|
||||
render={() => <InventoryEdit inventory={inventory} />}
|
||||
/>,
|
||||
<Route
|
||||
key="host-add"
|
||||
path="/inventories/inventory/:id/hosts/add"
|
||||
render={() => <InventoryHostAdd />}
|
||||
key="hosts"
|
||||
path="/inventories/inventory/:id/hosts"
|
||||
render={() => (
|
||||
<InventoryHosts
|
||||
match={match}
|
||||
setBreadcrumb={setBreadcrumb}
|
||||
i18n={i18n}
|
||||
inventory={inventory}
|
||||
/>
|
||||
)}
|
||||
/>,
|
||||
<Route
|
||||
key="access"
|
||||
@ -138,11 +150,6 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
|
||||
/>
|
||||
)}
|
||||
/>,
|
||||
<Route
|
||||
key="hosts"
|
||||
path="/inventories/inventory/:id/hosts"
|
||||
render={() => <InventoryHosts />}
|
||||
/>,
|
||||
<Route
|
||||
key="sources"
|
||||
path="/inventories/inventory/:id/sources"
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { withI18n } from '@lingui/react';
|
||||
|
||||
import { Switch, Route, withRouter, Link, Redirect } from 'react-router-dom';
|
||||
import { CaretLeftIcon } from '@patternfly/react-icons';
|
||||
|
||||
import { GroupsAPI } from '@api';
|
||||
import CardCloseButton from '@components/CardCloseButton';
|
||||
import RoutedTabs from '@components/RoutedTabs';
|
||||
@ -40,10 +41,14 @@ function InventoryGroups({ i18n, match, setBreadcrumb, inventory, history }) {
|
||||
|
||||
const tabsArray = [
|
||||
{
|
||||
name: i18n._(t`Return to Groups`),
|
||||
name: (
|
||||
<>
|
||||
<CaretLeftIcon />
|
||||
{i18n._(t`Back to Groups`)}
|
||||
</>
|
||||
),
|
||||
link: `/inventories/inventory/${inventory.id}/groups`,
|
||||
id: 99,
|
||||
isNestedTabs: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Details`),
|
||||
@ -65,9 +70,10 @@ function InventoryGroups({ i18n, match, setBreadcrumb, inventory, history }) {
|
||||
},
|
||||
];
|
||||
|
||||
// In cases where a user manipulates the url such that they try to navigate to a Inventory Group
|
||||
// that is not associated with the Inventory Id in the Url this Content Error is thrown.
|
||||
// Inventory Groups have a 1: 1 relationship to Inventories thus their Ids must corrolate.
|
||||
// In cases where a user manipulates the url such that they try to navigate to a
|
||||
// Inventory Group that is not associated with the Inventory Id in the Url this
|
||||
// Content Error is thrown. Inventory Groups have a 1:1 relationship to Inventories
|
||||
// thus their Ids must corrolate.
|
||||
|
||||
if (contentLoading) {
|
||||
return <ContentLoading />;
|
||||
|
||||
@ -62,10 +62,10 @@ describe('<InventoryGroup />', () => {
|
||||
test('renders successfully', async () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
});
|
||||
test('expect all tabs to exist, including Return to Groups', async () => {
|
||||
expect(wrapper.find('button[aria-label="Return to Groups"]').length).toBe(
|
||||
1
|
||||
);
|
||||
test('expect all tabs to exist, including Back to Groups', async () => {
|
||||
expect(
|
||||
wrapper.find('button[link="/inventories/inventory/1/groups"]').length
|
||||
).toBe(1);
|
||||
expect(wrapper.find('button[aria-label="Details"]').length).toBe(1);
|
||||
expect(wrapper.find('button[aria-label="Related Groups"]').length).toBe(1);
|
||||
expect(wrapper.find('button[aria-label="Hosts"]').length).toBe(1);
|
||||
|
||||
@ -0,0 +1,226 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { getQSConfig, parseQueryString } from '@util/qs';
|
||||
import { InventoriesAPI, HostsAPI } from '@api';
|
||||
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DataListToolbar from '@components/DataListToolbar';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
import PaginatedDataList, {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '@components/PaginatedDataList';
|
||||
import InventoryHostItem from './InventoryHostItem';
|
||||
|
||||
const QS_CONFIG = getQSConfig('host', {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
function InventoryHostList({ i18n, location, match }) {
|
||||
const [actions, setActions] = useState(null);
|
||||
const [contentError, setContentError] = useState(null);
|
||||
const [deletionError, setDeletionError] = useState(null);
|
||||
const [hostCount, setHostCount] = useState(0);
|
||||
const [hosts, setHosts] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [toggleError, setToggleError] = useState(null);
|
||||
const [toggleLoading, setToggleLoading] = useState(null);
|
||||
|
||||
const fetchHosts = (id, queryString) => {
|
||||
const params = parseQueryString(QS_CONFIG, queryString);
|
||||
return InventoriesAPI.readHosts(id, params);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [
|
||||
{
|
||||
data: { count, results },
|
||||
},
|
||||
{
|
||||
data: { actions: optionActions },
|
||||
},
|
||||
] = await Promise.all([
|
||||
fetchHosts(match.params.id, location.search),
|
||||
InventoriesAPI.readOptions(),
|
||||
]);
|
||||
|
||||
setHosts(results);
|
||||
setHostCount(count);
|
||||
setActions(optionActions);
|
||||
} catch (error) {
|
||||
setContentError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [match.params.id, location]);
|
||||
|
||||
const handleSelectAll = isSelected => {
|
||||
setSelected(isSelected ? [...hosts] : []);
|
||||
};
|
||||
|
||||
const handleSelect = row => {
|
||||
if (selected.some(s => s.id === row.id)) {
|
||||
setSelected(selected.filter(s => s.id !== row.id));
|
||||
} else {
|
||||
setSelected(selected.concat(row));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
|
||||
} catch (error) {
|
||||
setDeletionError(error);
|
||||
} finally {
|
||||
setSelected([]);
|
||||
try {
|
||||
const {
|
||||
data: { count, results },
|
||||
} = await fetchHosts(match.params.id, location.search);
|
||||
|
||||
setHosts(results);
|
||||
setHostCount(count);
|
||||
} catch (error) {
|
||||
setContentError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggle = async hostToToggle => {
|
||||
setToggleLoading(hostToToggle.id);
|
||||
|
||||
try {
|
||||
const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
|
||||
enabled: !hostToToggle.enabled,
|
||||
});
|
||||
|
||||
setHosts(
|
||||
hosts.map(host => (host.id === updatedHost.id ? updatedHost : host))
|
||||
);
|
||||
} catch (error) {
|
||||
setToggleError(error);
|
||||
} finally {
|
||||
setToggleLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected = selected.length > 0 && selected.length === hosts.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading}
|
||||
items={hosts}
|
||||
itemCount={hostCount}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
toolbarColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isSortable: true,
|
||||
isSearchable: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified`),
|
||||
key: 'modified',
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created`),
|
||||
key: 'created',
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
]}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={handleDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
/>,
|
||||
canAdd && (
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
|
||||
/>
|
||||
),
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<InventoryHostItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
|
||||
editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => handleSelect(o)}
|
||||
toggleHost={handleToggle}
|
||||
toggleLoading={toggleLoading === o.id}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd && (
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`/inventories/inventory/${match.params.id}/add`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
{toggleError && !toggleLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={() => setToggleError(false)}
|
||||
>
|
||||
{i18n._(t`Failed to toggle host.`)}
|
||||
<ErrorDetail error={toggleError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more hosts.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(withRouter(InventoryHostList));
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { InventoriesAPI, HostsAPI } from '@api';
|
||||
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
|
||||
import InventoryHosts from './InventoryHosts';
|
||||
import InventoryHostList from './InventoryHostList';
|
||||
import mockInventory from '../shared/data.inventory.json';
|
||||
|
||||
jest.mock('@api');
|
||||
@ -62,7 +62,7 @@ const mockHosts = [
|
||||
},
|
||||
];
|
||||
|
||||
describe('<InventoryHosts />', () => {
|
||||
describe('<InventoryHostList />', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
@ -81,7 +81,7 @@ describe('<InventoryHosts />', () => {
|
||||
},
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryHosts />);
|
||||
wrapper = mountWithContexts(<InventoryHostList />);
|
||||
});
|
||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||
});
|
||||
@ -91,7 +91,7 @@ describe('<InventoryHosts />', () => {
|
||||
});
|
||||
|
||||
test('initially renders successfully', () => {
|
||||
expect(wrapper.find('InventoryHosts').length).toBe(1);
|
||||
expect(wrapper.find('InventoryHostList').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should fetch hosts from api and render them in the list', async () => {
|
||||
@ -261,7 +261,9 @@ describe('<InventoryHosts />', () => {
|
||||
},
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryHosts inventory={mockInventory} />);
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostList inventory={mockInventory} />
|
||||
);
|
||||
});
|
||||
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
@ -272,7 +274,9 @@ describe('<InventoryHosts />', () => {
|
||||
Promise.reject(new Error())
|
||||
);
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<InventoryHosts inventory={mockInventory} />);
|
||||
wrapper = mountWithContexts(
|
||||
<InventoryHostList inventory={mockInventory} />
|
||||
);
|
||||
});
|
||||
await waitForElement(wrapper, 'ContentError', el => el.length === 1);
|
||||
});
|
||||
@ -1,228 +1,46 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { getQSConfig, parseQueryString } from '@util/qs';
|
||||
import { InventoriesAPI, HostsAPI } from '@api';
|
||||
import React from 'react';
|
||||
import { Switch, Route, withRouter } from 'react-router-dom';
|
||||
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import DataListToolbar from '@components/DataListToolbar';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
import PaginatedDataList, {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '@components/PaginatedDataList';
|
||||
import InventoryHostItem from './InventoryHostItem';
|
||||
|
||||
const QS_CONFIG = getQSConfig('host', {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
function InventoryHosts({ i18n, location, match }) {
|
||||
const [actions, setActions] = useState(null);
|
||||
const [contentError, setContentError] = useState(null);
|
||||
const [deletionError, setDeletionError] = useState(null);
|
||||
const [hostCount, setHostCount] = useState(0);
|
||||
const [hosts, setHosts] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [toggleError, setToggleError] = useState(null);
|
||||
const [toggleLoading, setToggleLoading] = useState(null);
|
||||
|
||||
const fetchHosts = (id, queryString) => {
|
||||
const params = parseQueryString(QS_CONFIG, queryString);
|
||||
return InventoriesAPI.readHosts(id, params);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [
|
||||
{
|
||||
data: { count, results },
|
||||
},
|
||||
{
|
||||
data: { actions: optionActions },
|
||||
},
|
||||
] = await Promise.all([
|
||||
fetchHosts(match.params.id, location.search),
|
||||
InventoriesAPI.readOptions(),
|
||||
]);
|
||||
|
||||
setHosts(results);
|
||||
setHostCount(count);
|
||||
setActions(optionActions);
|
||||
} catch (error) {
|
||||
setContentError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [match.params.id, location]);
|
||||
|
||||
const handleSelectAll = isSelected => {
|
||||
setSelected(isSelected ? [...hosts] : []);
|
||||
};
|
||||
|
||||
const handleSelect = row => {
|
||||
if (selected.some(s => s.id === row.id)) {
|
||||
setSelected(selected.filter(s => s.id !== row.id));
|
||||
} else {
|
||||
setSelected(selected.concat(row));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
|
||||
} catch (error) {
|
||||
setDeletionError(error);
|
||||
} finally {
|
||||
setSelected([]);
|
||||
try {
|
||||
const {
|
||||
data: { count, results },
|
||||
} = await fetchHosts(match.params.id, location.search);
|
||||
|
||||
setHosts(results);
|
||||
setHostCount(count);
|
||||
} catch (error) {
|
||||
setContentError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggle = async hostToToggle => {
|
||||
setToggleLoading(hostToToggle.id);
|
||||
|
||||
try {
|
||||
const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
|
||||
enabled: !hostToToggle.enabled,
|
||||
});
|
||||
|
||||
setHosts(
|
||||
hosts.map(host => (host.id === updatedHost.id ? updatedHost : host))
|
||||
);
|
||||
} catch (error) {
|
||||
setToggleError(error);
|
||||
} finally {
|
||||
setToggleLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected = selected.length > 0 && selected.length === hosts.length;
|
||||
import Host from '../../Host/Host';
|
||||
import InventoryHostList from './InventoryHostList';
|
||||
import InventoryHostAdd from '../InventoryHostAdd';
|
||||
|
||||
function InventoryHosts({ match, setBreadcrumb, i18n, inventory }) {
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading}
|
||||
items={hosts}
|
||||
itemCount={hostCount}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
toolbarSearchColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Created By (Username)`),
|
||||
key: 'created_by__username',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Modified By (Username)`),
|
||||
key: 'modified_by__username',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
},
|
||||
]}
|
||||
renderToolbar={props => (
|
||||
<DataListToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={handleSelectAll}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={handleDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
/>,
|
||||
canAdd && (
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
|
||||
/>
|
||||
),
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<InventoryHostItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/details`}
|
||||
editUrl={`/inventories/inventory/${match.params.id}/hosts/${o.id}/edit`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => handleSelect(o)}
|
||||
toggleHost={handleToggle}
|
||||
toggleLoading={toggleLoading === o.id}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd && (
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`/inventories/inventory/${match.params.id}/add`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<Switch>
|
||||
<Route
|
||||
key="host-add"
|
||||
path="/inventories/inventory/:id/hosts/add"
|
||||
render={() => <InventoryHostAdd match={match} />}
|
||||
/>
|
||||
|
||||
{toggleError && !toggleLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={() => setToggleError(false)}
|
||||
>
|
||||
{i18n._(t`Failed to toggle host.`)}
|
||||
<ErrorDetail error={toggleError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more hosts.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
</>
|
||||
,
|
||||
<Route
|
||||
key="host"
|
||||
path="/inventories/inventory/:id/hosts/:hostId"
|
||||
render={() => (
|
||||
<Host
|
||||
setBreadcrumb={setBreadcrumb}
|
||||
match={match}
|
||||
i18n={i18n}
|
||||
inventory={inventory}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
,
|
||||
<Route
|
||||
key="host-list"
|
||||
path="/inventories/inventory/:id/hosts/"
|
||||
render={() => (
|
||||
<InventoryHostList
|
||||
match={match}
|
||||
setBreadcrumb={setBreadcrumb}
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
,
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(withRouter(InventoryHosts));
|
||||
export default withRouter(InventoryHosts);
|
||||
|
||||
@ -1 +1 @@
|
||||
export { default } from './InventoryHosts';
|
||||
export { default } from './InventoryHostList';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user