1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 15:21:13 +03:00

finish InventoryDetail

This commit is contained in:
Keith Grant 2019-12-13 16:10:37 -08:00
parent 0ab61fd3cb
commit 3d45f27502
4 changed files with 78 additions and 7 deletions

View File

@ -0,0 +1,31 @@
import React from 'react';
import { node, string } from 'prop-types';
import { Link } from 'react-router-dom';
import { formatDateString } from '@util/dates';
import Detail from './Detail';
import { SummaryFieldUser } from '../../types';
function UserDateDetail({ label, date, user }) {
return (
<Detail
label={label}
value={
<span>
{formatDateString(date)}
{user && ' by '}
{user && <Link to={`/users/${user.id}`}>{user.username}</Link>}
</span>
}
/>
);
}
UserDateDetail.propTypes = {
label: node.isRequired,
date: string.isRequired,
user: SummaryFieldUser,
};
UserDateDetail.defaultProps = {
user: null,
};
export default UserDateDetail;

View File

@ -1,2 +1,3 @@
export { default as DetailList } from './DetailList'; export { default as DetailList } from './DetailList';
export { default as Detail, DetailName, DetailValue } from './Detail'; export { default as Detail, DetailName, DetailValue } from './Detail';
export { default as UserDateDetail } from './UserDateDetail';

View File

@ -1,8 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { CardBody } from '@components/Card'; import { CardBody } from '@components/Card';
import { DetailList, Detail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { ChipGroup, Chip } from '@components/Chip';
import { VariablesDetail } from '@components/CodeMirrorInput'; import { VariablesDetail } from '@components/CodeMirrorInput';
import { InventoriesAPI } from '@api'; import { InventoriesAPI } from '@api';
import { Inventory } from '../../../types'; import { Inventory } from '../../../types';
@ -20,32 +22,61 @@ function InventoryDetail({ inventory, i18n }) {
})(); })();
}, [inventory.id]); }, [inventory.id]);
const { organization } = inventory.summary_fields;
return ( return (
<CardBody> <CardBody>
<DetailList> <DetailList>
<Detail label={i18n._(t`Name`)} value={inventory.name} /> <Detail label={i18n._(t`Name`)} value={inventory.name} />
<Detail label={i18n._(t`Activity`)} value="Coming soon" /> <Detail label={i18n._(t`Activity`)} value="Coming soon" />
<Detail label={i18n._(t`Description`)} value={inventory.description} /> <Detail label={i18n._(t`Description`)} value={inventory.description} />
<Detail label={i18n._(t`Type`)} value={inventory.kind} /> <Detail label={i18n._(t`Type`)} value={i18n._(t`Inventory`)} />
<Detail <Detail
label={i18n._(t`Organization`)} label={i18n._(t`Organization`)}
value={inventory.summary_fields.organization.name} value={
<Link to={`/organizations/${organization.id}/details`}>
{organization.name}
</Link>
}
/> />
<Detail <Detail
fullWidth fullWidth
label={i18n._(t`Instance Groups`)} label={i18n._(t`Instance Groups`)}
value={isLoading ? 'loading...' : instanceGroups.map(g => g.name)} value={
isLoading ? (
'loading...'
) : (
<ChipGroup numChips={5}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}
</Chip>
))}
</ChipGroup>
)
}
/> />
</DetailList> </DetailList>
{inventory.variables && ( {inventory.variables && (
<VariablesDetail <VariablesDetail
id="job-artifacts" id="job-artifacts"
label={i18n._(t`Variables`)}
value={inventory.variables} value={inventory.variables}
rows={4} rows={4}
label={i18n._(t`Variables`)}
/> />
)}{' '} )}
<Detail label={i18n._(t`Description`)} value={inventory.description} /> <DetailList>
<UserDateDetail
label={i18n._(t`Created`)}
date={inventory.created}
user={inventory.summary_fields.created_by}
/>
<UserDateDetail
label={i18n._(t`Last Modified`)}
date={inventory.modified}
user={inventory.summary_fields.modified_by}
/>
</DetailList>
</CardBody> </CardBody>
); );
} }

View File

@ -228,6 +228,14 @@ export const User = shape({
last_login: string, last_login: string,
}); });
// stripped-down User object found in summary_fields (e.g. modified_by)
export const SummaryFieldUser = shape({
id: number.isRequired,
username: string.isRequired,
first_name: string,
last_name: string,
});
export const Group = shape({ export const Group = shape({
id: number.isRequired, id: number.isRequired,
type: oneOf(['group']), type: oneOf(['group']),