mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Convert HostList to hooks
use useRequest and useDeleteItems add HostToggle component
This commit is contained in:
Keith Grant
parent
7e4634c81f
commit
6065eb0e65
@ -1,5 +1,5 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import React, { Fragment, useState, useEffect, useCallback } from 'react';
|
||||
import { useLocation, useParams } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card } from '@patternfly/react-core';
|
||||
@ -12,6 +12,7 @@ import PaginatedDataList, {
|
||||
ToolbarAddButton,
|
||||
ToolbarDeleteButton,
|
||||
} from '@components/PaginatedDataList';
|
||||
import useRequest, { useDeleteItems } from '@util/useRequest';
|
||||
import { getQSConfig, parseQueryString } from '@util/qs';
|
||||
|
||||
import HostListItem from './HostListItem';
|
||||
@ -22,263 +23,158 @@ const QS_CONFIG = getQSConfig('host', {
|
||||
order_by: 'name',
|
||||
});
|
||||
|
||||
class HostsList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
function HostList({ i18n }) {
|
||||
const location = useLocation();
|
||||
const match = useParams();
|
||||
const [selected, setSelected] = useState([]);
|
||||
|
||||
this.state = {
|
||||
hasContentLoading: true,
|
||||
contentError: null,
|
||||
deletionError: null,
|
||||
const {
|
||||
result: { hosts, count, actions },
|
||||
error: contentError,
|
||||
isLoading,
|
||||
request: fetchHosts,
|
||||
} = useRequest(
|
||||
useCallback(async () => {
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
const results = await Promise.all([
|
||||
HostsAPI.read(params),
|
||||
HostsAPI.readOptions(),
|
||||
]);
|
||||
return {
|
||||
hosts: results[0].data.results,
|
||||
count: results[0].data.count,
|
||||
actions: results[1].data.actions,
|
||||
};
|
||||
}, [location]),
|
||||
{
|
||||
hosts: [],
|
||||
selected: [],
|
||||
itemCount: 0,
|
||||
actions: null,
|
||||
toggleError: null,
|
||||
toggleLoading: null,
|
||||
};
|
||||
|
||||
this.handleSelectAll = this.handleSelectAll.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
this.handleHostDelete = this.handleHostDelete.bind(this);
|
||||
this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
|
||||
this.loadActions = this.loadActions.bind(this);
|
||||
this.loadHosts = this.loadHosts.bind(this);
|
||||
this.handleHostToggle = this.handleHostToggle.bind(this);
|
||||
this.handleHostToggleErrorClose = this.handleHostToggleErrorClose.bind(
|
||||
this
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadHosts();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { location } = this.props;
|
||||
if (location !== prevProps.location) {
|
||||
this.loadHosts();
|
||||
count: 0,
|
||||
actions: {},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
handleSelectAll(isSelected) {
|
||||
const { hosts } = this.state;
|
||||
useEffect(() => {
|
||||
fetchHosts();
|
||||
}, [fetchHosts]);
|
||||
|
||||
const selected = isSelected ? [...hosts] : [];
|
||||
this.setState({ selected });
|
||||
}
|
||||
const isAllSelected = selected.length === hosts.length && selected.length > 0;
|
||||
const {
|
||||
isLoading: isDeleteLoading,
|
||||
deleteItems: deleteHosts,
|
||||
deletionError,
|
||||
clearDeletionError,
|
||||
} = useDeleteItems(
|
||||
useCallback(async () => {
|
||||
return Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
|
||||
}, [selected]),
|
||||
{
|
||||
qsConfig: QS_CONFIG,
|
||||
allItemsSelected: isAllSelected,
|
||||
fetchItems: fetchHosts,
|
||||
}
|
||||
);
|
||||
|
||||
handleSelect(row) {
|
||||
const { selected } = this.state;
|
||||
const handleHostDelete = async () => {
|
||||
await deleteHosts();
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
if (selected.some(s => s.id === row.id)) {
|
||||
this.setState({ selected: selected.filter(s => s.id !== row.id) });
|
||||
const handleSelectAll = isSelected => {
|
||||
setSelected(isSelected ? [...hosts] : []);
|
||||
};
|
||||
|
||||
const handleSelect = host => {
|
||||
if (selected.some(h => h.id === host.id)) {
|
||||
setSelected(selected.filter(h => h.id !== host.id));
|
||||
} else {
|
||||
this.setState({ selected: selected.concat(row) });
|
||||
setSelected(selected.concat(host));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleDeleteErrorClose() {
|
||||
this.setState({ deletionError: null });
|
||||
}
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
|
||||
handleHostToggleErrorClose() {
|
||||
this.setState({ toggleError: null });
|
||||
}
|
||||
|
||||
async handleHostDelete() {
|
||||
const { selected } = this.state;
|
||||
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: err });
|
||||
} finally {
|
||||
await this.loadHosts();
|
||||
}
|
||||
}
|
||||
|
||||
async handleHostToggle(hostToToggle) {
|
||||
const { hosts } = this.state;
|
||||
this.setState({ toggleLoading: hostToToggle.id });
|
||||
try {
|
||||
const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
|
||||
enabled: !hostToToggle.enabled,
|
||||
});
|
||||
this.setState({
|
||||
hosts: hosts.map(host =>
|
||||
host.id === updatedHost.id ? updatedHost : host
|
||||
),
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ toggleError: err });
|
||||
} finally {
|
||||
this.setState({ toggleLoading: null });
|
||||
}
|
||||
}
|
||||
|
||||
async loadActions() {
|
||||
const { actions: cachedActions } = this.state;
|
||||
let optionsPromise;
|
||||
if (cachedActions) {
|
||||
optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
|
||||
} else {
|
||||
optionsPromise = HostsAPI.readOptions();
|
||||
}
|
||||
|
||||
return optionsPromise;
|
||||
}
|
||||
|
||||
async loadHosts() {
|
||||
const { location } = this.props;
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
|
||||
const promises = Promise.all([HostsAPI.read(params), this.loadActions()]);
|
||||
|
||||
this.setState({ contentError: null, hasContentLoading: true });
|
||||
try {
|
||||
const [
|
||||
{
|
||||
data: { count, results },
|
||||
},
|
||||
{
|
||||
data: { actions },
|
||||
},
|
||||
] = await promises;
|
||||
this.setState({
|
||||
actions,
|
||||
itemCount: count,
|
||||
hosts: results,
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ contentError: err });
|
||||
} finally {
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
actions,
|
||||
itemCount,
|
||||
contentError,
|
||||
hasContentLoading,
|
||||
deletionError,
|
||||
selected,
|
||||
hosts,
|
||||
toggleLoading,
|
||||
toggleError,
|
||||
} = this.state;
|
||||
const { match, i18n } = this.props;
|
||||
|
||||
const canAdd =
|
||||
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
|
||||
const isAllSelected =
|
||||
selected.length > 0 && selected.length === hosts.length;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<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`}
|
||||
/>,
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
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="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={this.handleHostToggleErrorClose}
|
||||
>
|
||||
{i18n._(t`Failed to toggle host.`)}
|
||||
<ErrorDetail error={toggleError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more hosts.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Fragment>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading || isDeleteLoading}
|
||||
items={hosts}
|
||||
itemCount={count}
|
||||
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={handleHostDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Hosts`)}
|
||||
/>,
|
||||
...(canAdd ? [(
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
|
||||
) : [],
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={o => (
|
||||
<HostListItem
|
||||
key={o.id}
|
||||
host={o}
|
||||
detailUrl={`${match.url}/${o.id}/details`}
|
||||
isSelected={selected.some(row => row.id === o.id)}
|
||||
onSelect={() => handleSelect(o)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd ? (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more hosts.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export { HostsList as _HostsList };
|
||||
export default withI18n()(withRouter(HostsList));
|
||||
export default withI18n()(HostList);
|
||||
|
||||
@ -10,7 +10,6 @@ import {
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
Switch,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Link } from 'react-router-dom';
|
||||
@ -18,6 +17,7 @@ import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
|
||||
import Sparkline from '@components/Sparkline';
|
||||
import { Host } from '@types';
|
||||
import HostToggle from './HostToggle';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DataListAction = styled(_DataListAction)`
|
||||
@ -36,15 +36,7 @@ class HostListItem extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
host,
|
||||
isSelected,
|
||||
onSelect,
|
||||
detailUrl,
|
||||
onToggleHost,
|
||||
toggleLoading,
|
||||
i18n,
|
||||
} = this.props;
|
||||
const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
|
||||
|
||||
const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
|
||||
...job,
|
||||
@ -87,6 +79,22 @@ class HostListItem extends React.Component {
|
||||
</Fragment>
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell key="enable" alignRight isFilled={false}>
|
||||
<HostToggle host={host} />
|
||||
</DataListCell>,
|
||||
<DataListCell key="edit" alignRight isFilled={false}>
|
||||
{host.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={i18n._(t`Edit Host`)} position="top">
|
||||
<Button
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`/hosts/${host.id}/edit`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
@ -94,25 +102,7 @@ class HostListItem extends React.Component {
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
>
|
||||
<Tooltip
|
||||
content={i18n._(
|
||||
t`Indicates if a host is available and should be included in running jobs. For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
|
||||
)}
|
||||
position="top"
|
||||
>
|
||||
<Switch
|
||||
css="display: inline-flex;"
|
||||
id={`host-${host.id}-toggle`}
|
||||
label={i18n._(t`On`)}
|
||||
labelOff={i18n._(t`Off`)}
|
||||
isChecked={host.enabled}
|
||||
isDisabled={
|
||||
toggleLoading || !host.summary_fields.user_capabilities.edit
|
||||
}
|
||||
onChange={() => onToggleHost(host)}
|
||||
aria-label={i18n._(t`Toggle host`)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<HostToggle host={host} />
|
||||
{host.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={i18n._(t`Edit Host`)} position="top">
|
||||
<Button
|
||||
|
||||
72
awx/ui_next/src/screens/Host/HostList/HostToggle.jsx
Normal file
72
awx/ui_next/src/screens/Host/HostList/HostToggle.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React, { Fragment, useState, useEffect, useCallback } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Switch, Tooltip } from '@patternfly/react-core';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
import useRequest from '@util/useRequest';
|
||||
import { HostsAPI } from '@api';
|
||||
|
||||
function HostToggle({ host, i18n }) {
|
||||
const [isEnabled, setIsEnabled] = useState(host.enabled);
|
||||
const [showError, setShowError] = useState(false);
|
||||
|
||||
const { result, isLoading, error, request: toggleHost } = useRequest(
|
||||
useCallback(async () => {
|
||||
await HostsAPI.update(host.id, {
|
||||
enabled: !isEnabled,
|
||||
});
|
||||
return !isEnabled;
|
||||
}, [host, isEnabled]),
|
||||
host.enabled
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (result !== isEnabled) {
|
||||
setIsEnabled(result);
|
||||
}
|
||||
}, [result, isEnabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
setShowError(true);
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Tooltip
|
||||
content={i18n._(
|
||||
t`Indicates if a host is available and should be included in running
|
||||
jobs. For hosts that are part of an external inventory, this may be
|
||||
reset by the inventory sync process.`
|
||||
)}
|
||||
position="top"
|
||||
>
|
||||
<Switch
|
||||
css="display: inline-flex;"
|
||||
id={`host-${host.id}-toggle`}
|
||||
label={i18n._(t`On`)}
|
||||
labelOff={i18n._(t`Off`)}
|
||||
isChecked={isEnabled}
|
||||
isDisabled={isLoading || !host.summary_fields.user_capabilities.edit}
|
||||
onChange={toggleHost}
|
||||
aria-label={i18n._(t`Toggle host`)}
|
||||
/>
|
||||
</Tooltip>
|
||||
{showError && error && !isLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={error && !isLoading}
|
||||
onClose={() => setShowError(false)}
|
||||
>
|
||||
{i18n._(t`Failed to toggle host.`)}
|
||||
<ErrorDetail error={error} />
|
||||
</AlertModal>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(HostToggle);
|
||||
Loading…
x
Reference in New Issue
Block a user