External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-15 21:37:42 -02:30
Code Issues Packages Projects Releases Wiki Activity

InventoryDetail: handle content loading state & errors better

Browse Source
This commit is contained in:
Keith Grant
2019-12-18 09:47:04 -08:00
parent df47186c43
commit 3d510c5064
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
View File

@@ -6,24 +6,40 @@ import { CardBody } from '@patternfly/react-core';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { ChipGroup, Chip } from '@components/Chip'; import { ChipGroup, Chip } from '@components/Chip';
import { VariablesDetail } from '@components/CodeMirrorInput'; import { VariablesDetail } from '@components/CodeMirrorInput';
import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading';
import { InventoriesAPI } from '@api'; import { InventoriesAPI } from '@api';
import { Inventory } from '../../../types'; import { Inventory } from '../../../types';
function InventoryDetail({ inventory, i18n }) { function InventoryDetail({ inventory, i18n }) {
const [instanceGroups, setInstanceGroups] = useState([]); const [instanceGroups, setInstanceGroups] = useState([]);
const [isLoading, setIsLoading] = useState(false); const [hasContentLoading, setHasContentLoading] = useState(false);
const [contentError, setContentError] = useState(null);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
setIsLoading(true); setHasContentLoading(true);
const { data } = await InventoriesAPI.readInstanceGroups(inventory.id); try {
setInstanceGroups(data.results); const { data } = await InventoriesAPI.readInstanceGroups(inventory.id);
setIsLoading(false); setInstanceGroups(data.results);
} catch (err) {
setContentError(err);
} finally {
setHasContentLoading(false);
}
})(); })();
}, [inventory.id]); }, [inventory.id]);
const { organization } = inventory.summary_fields; const { organization } = inventory.summary_fields;
if (hasContentLoading) {
return <ContentLoading />;
}
if (contentError) {
return <ContentError error={contentError} />;
}
return ( return (
<CardBody> <CardBody>
<DetailList> <DetailList>
@@ -43,17 +59,13 @@ function InventoryDetail({ inventory, i18n }) {
fullWidth fullWidth
label={i18n._(t`Instance Groups`)} label={i18n._(t`Instance Groups`)}
value={ value={
isLoading ? ( <ChipGroup numChips={5}>
'loading...' {instanceGroups.map(ig => (
) : ( <Chip key={ig.id} isReadOnly>
<ChipGroup numChips={5}> {ig.name}
{instanceGroups.map(ig => ( </Chip>
<Chip key={ig.id} isReadOnly> ))}
{ig.name} </ChipGroup>
</Chip>
))}
</ChipGroup>
)
} }
/> />
{inventory.variables && ( {inventory.variables && (