External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-22 06:58:06 -03: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
Show Stats 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 { ChipGroup, Chip } from '@components/Chip';
import { VariablesDetail } from '@components/CodeMirrorInput';
import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading';
import { InventoriesAPI } from '@api';
import { Inventory } from '../../../types';
function InventoryDetail({ inventory, i18n }) {
const [instanceGroups, setInstanceGroups] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [hasContentLoading, setHasContentLoading] = useState(false);
const [contentError, setContentError] = useState(null);
useEffect(() => {
(async () => {
setIsLoading(true);
const { data } = await InventoriesAPI.readInstanceGroups(inventory.id);
setInstanceGroups(data.results);
setIsLoading(false);
setHasContentLoading(true);
try {
const { data } = await InventoriesAPI.readInstanceGroups(inventory.id);
setInstanceGroups(data.results);
} catch (err) {
setContentError(err);
} finally {
setHasContentLoading(false);
}
})();
}, [inventory.id]);
const { organization } = inventory.summary_fields;
if (hasContentLoading) {
return <ContentLoading />;
}
if (contentError) {
return <ContentError error={contentError} />;
}
return (
<CardBody>
<DetailList>
@ -43,17 +59,13 @@ function InventoryDetail({ inventory, i18n }) {
fullWidth
label={i18n._(t`Instance Groups`)}
value={
isLoading ? (
'loading...'
) : (
<ChipGroup numChips={5}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}
</Chip>
))}
</ChipGroup>
)
<ChipGroup numChips={5}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}
</Chip>
))}
</ChipGroup>
}
/>
{inventory.variables && (