@patternfly/react-core#Label JavaScript Examples
The following examples show how to use
@patternfly/react-core#Label.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Status.js From edge-frontend with Apache License 2.0 | 6 votes |
|
Status = ({
type,
isLabel = false,
toolTipContent = '',
className = '',
}) => {
const { text, Icon, color, labelColor } =
Object.prototype.hasOwnProperty.call(statusMapper, type)
? statusMapper[type]
: statusMapper['default'];
return (
<>
{isLabel ? (
<Label color={labelColor} icon={<Icon />} className={className}>
{text}
</Label>
) : (
<Split style={{ color }} className={className}>
<SplitItem className="pf-u-mr-sm">
{toolTipContent ? (
<Tooltip content="blargh">
<Icon />
</Tooltip>
) : (
<Icon />
)}
</SplitItem>
<SplitItem>
<p>{text}</p>
</SplitItem>
</Split>
)}
</>
);
}
Example #2
| Source File: StatusLabel.js From malware-detection-frontend with Apache License 2.0 | 6 votes |
|
StatusLabel = ({ isDisabled, hasMatch, displayMatch = false }) => {
const intl = useIntl();
return displayMatch ? <div>
{hasMatch && <Label color='red'>{intl.formatMessage(messages.matched)}</Label>}
{!hasMatch && <Label color='blue'>{intl.formatMessage(messages.notMatched)}</Label>}
</div> : <div>
{isDisabled && <Label>{intl.formatMessage(messages.disabled)}</Label>}
{!isDisabled && <Label color='blue'>{intl.formatMessage(messages.enabled)}</Label>}
</div>;
}
Example #3
| Source File: CategoryLabel.js From ocp-advisor-frontend with Apache License 2.0 | 6 votes |
|
CategoryLabel = ({ tags }) => {
const intl = useIntl();
return (
<LabelGroup numLabels={1} isCompact>
{extractCategories(tags).map((tag, key) => (
<Label
key={key}
icon={CATEGORY_ICONS[tag]}
variant="outline"
color="blue"
isCompact
>
{intl.formatMessage(messages[camelCase(tag)])}
</Label>
))}
</LabelGroup>
);
}
Example #4
| Source File: RuleLabels.js From ocp-advisor-frontend with Apache License 2.0 | 6 votes |
|
RuleLabels = ({ rule }) => {
const intl = useIntl();
return (
<React.Fragment>
{rule.disabled && (
<Tooltip
content={intl.formatMessage(messages.ruleIsDisabledTooltip)}
position={TooltipPosition.right}
>
<Label color="gray" isCompact>
{intl.formatMessage(messages.disabled)}
</Label>
</Tooltip>
)}
</React.Fragment>
);
}
Example #5
| Source File: user-list.js From ibutsu-server with MIT License | 5 votes |
|
function userToRow(user, onDeleteClick) {
let userName = user.name;
if (user.is_superadmin) {
userName = [
user.name,
" ",
<Label key="admin" className="super-admin-label" variant="filled" color="blue" isCompact>Administrator</Label>
];
}
return {
"cells": [
{title: userName},
{title: user.email},
{title: user.projects ? user.projects.map(project => project.title).join(', ') : ''},
{title: user.is_active ? 'Active' : 'Inactive'},
{
title: (
<div style={{textAlign: "right"}}>
<Button
variant="primary"
ouiaId={`admin-users-edit-${user.id}`}
component={(props: any) => <Link {...props} to={`/admin/users/${user.id}`} />}
isSmall
>
<PencilAltIcon />
</Button>
<Button
variant="danger"
ouiaId={`admin-users-delete-${user.id}`}
onClick={() => onDeleteClick(user.id)}
isSmall
>
<TrashIcon />
</Button>
</div>
)
}
]
}
}
Example #6
| Source File: getActions.js From access-requests-frontend with Apache License 2.0 | 4 votes |
|
// https://marvelapp.com/prototype/257je526/screen/74764732
export function StatusLabel({ requestId, status: statusProp, hideActions }) {
const [status, setStatus] = React.useState(statusProp);
const [isEditing, setIsEditing] = React.useState(false);
const [isLoading, setIsLoading] = React.useState(false);
const dispatch = useDispatch();
function onClick(newStatus) {
setIsLoading(true);
apiInstance
.patch(
`${API_BASE}/cross-account-requests/${requestId}/`,
{ status: newStatus },
{
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
}
)
.then((res) => {
if (res.errors && res.errors.length > 0) {
throw Error(res.errors.map((e) => e.detail).join('\n'));
}
dispatch(
addNotification({
variant: 'success',
title: `Request ${newStatus} successfully`,
})
);
setStatus(newStatus);
setIsEditing(false);
setIsLoading(false);
})
.catch((err) => {
dispatch(
addNotification({
variant: 'danger',
title: `There was an error ${
newStatus === 'approved' ? 'approving' : 'denying'
} your request`,
description: err.message,
})
);
setIsLoading(false);
});
}
const label = <Label {...getLabelProps(status)}>{capitalize(status)}</Label>;
// For internal view
if (hideActions) {
return label;
}
return (
<React.Fragment>
{isEditing || status === 'pending' ? (
<React.Fragment>
<Button
className="pf-u-mr-md"
isDisabled={isLoading || status === 'approved'}
variant="primary"
onClick={() => onClick('approved')}
>
Approve
</Button>
<Button
className="pf-u-mr-md"
isDisabled={isLoading || status === 'denied'}
variant="danger"
onClick={() => onClick('denied')}
>
Deny
</Button>
</React.Fragment>
) : (
label
)}
{['approved', 'denied'].includes(status) && (
<Button
variant="plain"
aria-label="Edit status"
onClick={() => setIsEditing(!isEditing)}
>
<EditAltIcon />
</Button>
)}
</React.Fragment>
);
}
Example #7
| Source File: AccessRequestDetailsPage.js From access-requests-frontend with Apache License 2.0 | 4 votes |
|
BaseAccessRequestDetailsPage = ({ isInternal }) => {
const [request, setRequest] = React.useState();
const { requestId } = useParams();
const dispatch = useDispatch();
React.useEffect(() => {
apiInstance
.get(
`${API_BASE}/cross-account-requests/${requestId}/${
isInternal ? '?query_by=user_id' : '?query_by=target_account'
}`,
{ headers: { Accept: 'application/json' } }
)
.then((res) => {
if (res.errors) {
throw Error(res.errors.map((e) => e.detail).join('\n'));
}
setRequest(res);
})
.catch((err) => {
dispatch(
addNotification({
variant: 'danger',
title: 'Could not load access request',
description: err.message,
})
);
});
}, []);
// Modal actions
const [openModal, setOpenModal] = React.useState({ type: null });
const onModalClose = () => setOpenModal({ type: null });
const actions = getInternalActions(
request && request.status,
requestId,
setOpenModal
);
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
const requestDisplayProps = [
...(isInternal
? ['request_id', 'target_account']
: ['first_name', 'last_name']),
'start_date',
'end_date',
'created',
];
return (
<React.Fragment>
<PageSection variant="light">
<Breadcrumb>
<BreadcrumbItem
render={() => (
<Link to={isInternal ? '/' : '/access-requests'}>
{!isInternal && 'Red Hat '}Access Requests
</Link>
)}
/>
<BreadcrumbItem>{requestId}</BreadcrumbItem>
</Breadcrumb>
<Flex direction={{ default: 'column', md: 'row' }}>
<FlexItem grow={{ default: 'grow' }}>
<Title headingLevel="h1" size="2xl" className="pf-u-pt-md">
{requestId}
</Title>
</FlexItem>
{isInternal && actions.items.length > 0 && (
<FlexItem alignSelf={{ default: 'alignRight' }}>
<Dropdown
position="right"
toggle={
<KebabToggle
onToggle={() => setIsDropdownOpen(!isDropdownOpen)}
id="actions-toggle"
/>
}
isOpen={isDropdownOpen}
isPlain
dropdownItems={actions.items.map(({ title, onClick }) => (
<DropdownItem
key={title}
component="button"
onClick={onClick}
>
{title}
</DropdownItem>
))}
isDisabled={actions.disable}
/>
</FlexItem>
)}
</Flex>
</PageSection>
<PageSection>
<Flex
spaceItems={{ xl: 'spaceItemsLg' }}
direction={{ default: 'column', lg: 'row' }}
>
<FlexItem
flex={{ default: 'flex_1' }}
alignSelf={{ default: 'alignSelfStretch' }}
>
<Card ouiaId="request-details" style={{ height: '100%' }}>
<CardTitle>
<Title headingLevel="h2" size="xl">
Request details
</Title>
</CardTitle>
<CardBody>
{!request ? (
<Spinner size="xl" />
) : (
<React.Fragment>
<div className="pf-u-pb-md">
{isInternal ? (
<div>
<label>
<b>Request status</b>
</label>
<br />
<Label
className="pf-u-mt-sm"
{...getLabelProps(request.status)}
>
{capitalize(request.status)}
</Label>
</div>
) : (
<React.Fragment>
<label>
<b>Request decision</b>
</label>
<br />
<StatusLabel
requestId={requestId}
status={request.status}
/>
</React.Fragment>
)}
</div>
{requestDisplayProps.map((prop, key) => (
<div className="pf-u-pb-md" key={key}>
<label>
<b>
{capitalize(
prop.replace(/_/g, ' ').replace('id', 'ID')
)}
</b>
</label>
<br />
<div>{request[prop]}</div>
</div>
))}
</React.Fragment>
)}
</CardBody>
</Card>
</FlexItem>
<FlexItem
flex={{ default: 'flex_3' }}
grow={{ default: 'grow' }}
alignSelf={{ default: 'alignSelfStretch' }}
>
<Card ouiaId="request-roles" style={{ height: '100%' }}>
<CardTitle>
<Title headingLevel="h2" size="xl">
Roles requested
</Title>
</CardTitle>
<CardBody>
{!request ? (
<Spinner size="xl" />
) : (
<MUARolesTable roles={request.roles} />
)}
</CardBody>
</Card>
</FlexItem>
</Flex>
</PageSection>
{openModal.type === 'cancel' && (
<CancelRequestModal requestId={requestId} onClose={onModalClose} />
)}
{openModal.type === 'edit' && (
<EditRequestModal
variant="edit"
requestId={requestId}
onClose={onModalClose}
/>
)}
</React.Fragment>
);
}
Example #8
| Source File: Details.js From content-preview with Apache License 2.0 | 4 votes |
|
Details = ({
match,
fetchContentDetails,
details,
fetchContentDetailsHits,
contentDetailsHits
}) => {
const [selectedListItem, setSelectedListItem] = useState(0);
const capitalize = (string) => string[0].toUpperCase() + string.substring(1);
const [expanded, setExpanded] = useState(true);
const pyFilter = (data) => {
const keysToInclude = Object.keys(data).filter(
(key) => !key.includes('__')
);
const arrayObj = keysToInclude.map((key) => ({ [key]: data[key] }));
return Object.assign({}, ...arrayObj);
};
const selectedPyData =
selectedListItem >= 1 && pyFilter(contentDetailsHits[selectedListItem - 1]);
const detailHref = `https://access.redhat.com/node/${details.node_id}`;
const [freeStyle, setFreeStyle] = useState('');
const [freeStyleValidated, setFreeStyleValidated] = useState('default');
const [validFreeStyle, setValidFreeStyle] = useState('');
const [helperText, setHelperText] = useState('Please enter valid JSON');
const [kbaDetailsData, setLbaDetailsData] = useState({});
const [kbaLoading, setKbaLoading] = useState(true);
const freeStyleChange = (input) => {
let isValid;
const parser = (input) => {
try {
return JSON.parse(input);
} catch (error) {
return false;
}
};
if (input.length > 0) {
const validInput = parser(input);
if (validInput) {
isValid = 'success';
setValidFreeStyle(validInput);
setHelperText('Valid JSON! ?');
} else {
isValid = 'error';
setValidFreeStyle('');
}
} else {
isValid = 'default';
setValidFreeStyle('');
setHelperText('Please enter valid JSON');
}
setFreeStyleValidated(isValid);
setFreeStyle(input);
};
const severityLabelColor = (severity) =>
severity === 'ERROR'
? 'red'
: severity === 'WARN'
? 'orange'
: severity === 'INFO'
? 'purple'
: 'blue';
const fetchKbaDetails = async (kbaId) => {
try {
const kbaDetailsFetch = (
await API.get(
`https://access.redhat.com/hydra/rest/search/kcs?q=id:(${kbaId})&fl=view_uri,id,publishedTitle&rows=1&redhat_client=$ADVISOR`,
{},
{ credentials: 'include' }
)
).data.response.docs;
setLbaDetailsData(kbaDetailsFetch[0]);
setKbaLoading(false);
} catch (error) {
console.error(error, 'KBA fetch failed.');
}
};
const ruleDescription = (data, isGeneric) =>
typeof data === 'string' &&
Boolean(data) && (
<span className={isGeneric && 'genericOverride'}>
<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{data}</Markdown>
</span>
);
useEffect(() => {
const detailName = { name: match.params.recDetail };
fetchContentDetails(detailName);
fetchContentDetailsHits(detailName);
fetchKbaDetails(details.node_id);
}, [
fetchContentDetails,
match.params.recDetail,
fetchContentDetailsHits,
details.node_id
]);
return (
<Page
breadcrumb={
<Breadcrumb>
<BreadcrumbItem>
<Link to="/preview">Content Preview</Link>
</BreadcrumbItem>
<BreadcrumbHeading to="#">{`${match.params.recDetail}`}</BreadcrumbHeading>
</Breadcrumb>
}
>
<PageHeader>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<PageHeaderTitle
title={
<>
{details.rule_id || 'loading...'}{' '}
{details.status !== undefined && (
<Label color={details.status === 'active' ? 'green' : 'red'}>
{capitalize(details.status)}
</Label>
)}{' '}
</>
}
/>
<Toolbar>
<HostSelector />
</Toolbar>
</Flex>
</PageHeader>
<PageSection>
<Grid hasGutter>
<GridItem span={6}>
<Stack hasGutter>
<Card>
<CardBody>
<ExpandableSection
toggleText={details.description}
onToggle={() => setExpanded(!expanded)}
isExpanded={expanded}
>
<Stack hasGutter>
<StackItem>
<p>
{`Publish Date: ${details.publish_date} | `}
{details.node_id ? (
<a href={detailHref}>{detailHref}</a>
) : (
<Label variant="outline" color="gray">
No node_id present
</Label>
)}
</p>
{(details.reboot_required ||
details.category ||
details.severity) && (
<LabelGroup>
{details.reboot_required && (
<Label variant="outline" color="gray">
Reboot required
</Label>
)}
{details.category && (
<Label variant="outline" color="gray">
{details.category}
</Label>
)}
{details.severity && (
<Label
variant="outline"
color={severityLabelColor(details.severity)}
>
{details.severity}
</Label>
)}
</LabelGroup>
)}
</StackItem>
<StackItem>
<Stack hasGutter>
<StackItem>
<strong>Name:</strong>
{ruleDescription(details.name)}
</StackItem>
<StackItem>
<strong>Summary:</strong>
{ruleDescription(details.summary)}
</StackItem>
<StackItem>
<strong>Generic:</strong>
{ruleDescription(details.generic, true)}
</StackItem>
</Stack>
</StackItem>
<StackItem>
<Form>
<FormGroup
label="Free Style JSON input:"
type="string"
helperText={helperText}
helperTextInvalid="Not valid JSON"
fieldId="selection"
validated={freeStyleValidated}
>
<TextArea
value={freeStyle}
onChange={freeStyleChange}
isRequired
validated={freeStyleValidated}
aria-label="free style JSON input"
/>
</FormGroup>
</Form>
</StackItem>
</Stack>
</ExpandableSection>
</CardBody>
</Card>
<DataList
className="pyDataList"
aria-label="selectable data list example"
selectedDataListItemId={selectedListItem}
onSelectDataListItem={(id) =>
id !== selectedListItem
? setSelectedListItem(id)
: setSelectedListItem(0)
}
>
{contentDetailsHits.map((item, key) => (
<DataListItem
aria-labelledby="selectable-action-item1"
key={key + 1}
id={key + 1}
>
<DataListItemRow className="overFlow">
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<Split hasGutter>
<SplitItem>
<b>{item.__name}</b>
</SplitItem>
<SplitItem>
<Label color="blue">{item.__source}</Label>
</SplitItem>
</Split>
<h5>{item.__date}</h5>
<pre>{JSON.stringify(pyFilter(item), null, 2)}</pre>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
</Stack>
</GridItem>
<GridItem span={6}>
<ReportDetails
report={{
...details,
rule: details,
...(selectedPyData && { details: selectedPyData }),
...(validFreeStyle && { details: validFreeStyle }),
resolution: details.resolution
}}
kbaDetail={kbaDetailsData}
kbaLoading={kbaLoading}
/>
</GridItem>
</Grid>
</PageSection>
</Page>
);
}
Example #9
| Source File: Recommendation.js From ocp-advisor-frontend with Apache License 2.0 | 4 votes |
|
Recommendation = ({ rule, ack, clusters, match }) => {
const intl = useIntl();
const dispatch = useDispatch();
const notify = (data) => dispatch(addNotification(data));
const recId = match.params.recommendationId;
const [disableRuleModalOpen, setDisableRuleModalOpen] = useState(false);
const [actionsDropdownOpen, setActionsDropdownOpen] = useState(false);
const [viewSystemsModalOpen, setViewSystemsModalOpen] = useState(false);
// rule's info
const {
isError,
isUninitialized,
isLoading,
isFetching,
isSuccess,
data,
refetch,
} = rule;
// justification note, last time acknowledged, etc.
const { data: ackData, isFetching: ackIsFetching, refetch: refetchAck } = ack;
const ruleDate = new Date(ackData?.updated_at || ackData?.created_at);
// affected and acked clusters lists
const {
data: clustersData,
isFetching: clustersIsFetching,
refetch: refetchClusters,
} = clusters;
const content =
isSuccess && data ? adjustOCPRule(data.content, recId) : undefined;
const ackedClusters =
!clustersIsFetching && clustersData ? clustersData.disabled : undefined;
const afterDisableFn = async () => {
refetch();
refetchAck();
refetchClusters();
};
const handleModalToggle = (disableRuleModalOpen) => {
setDisableRuleModalOpen(disableRuleModalOpen);
};
const enableRecForHosts = async ({ uuids }) => {
try {
const requests = uuids.map((uuid) =>
enableRuleForCluster({ uuid, recId })
);
await Promise.all(requests);
refetch();
refetchAck();
refetchClusters();
notify({
variant: 'success',
timeout: true,
dismissable: true,
title: intl.formatMessage(messages.recSuccessfullyEnabledForCluster),
});
} catch (error) {
notify({
variant: 'danger',
dismissable: true,
title: intl.formatMessage(messages.error),
description: `${error}`,
});
}
};
const enableRule = async (rule) => {
try {
await Delete(`${BASE_URL}/v2/ack/${rule.data.content.rule_id}/`);
notify({
variant: 'success',
timeout: true,
dismissable: true,
title: intl.formatMessage(messages.recSuccessfullyEnabled),
});
refetch();
} catch (error) {
handleModalToggle(false);
notify({
variant: 'danger',
dismissable: true,
title: intl.formatMessage(messages.error),
description: `${error}`,
});
}
};
const messagesValues = useMemo(
() => (content ? mapContentToValues(intl, content) : {}),
[intl, content]
);
return (
<React.Fragment>
{viewSystemsModalOpen && (
<ViewHostAcks
handleModalToggle={(toggleModal) =>
setViewSystemsModalOpen(toggleModal)
}
isModalOpen={viewSystemsModalOpen}
clusters={clusters}
afterFn={() => refetchClusters()}
recId={recId}
/>
)}
{disableRuleModalOpen && (
<DisableRule
handleModalToggle={handleModalToggle}
isModalOpen={disableRuleModalOpen}
rule={content}
afterFn={afterDisableFn}
/>
)}
<PageHeader className="pageHeaderOverride">
<Breadcrumbs current={content?.description || recId} />
</PageHeader>
{(isUninitialized || isLoading || isFetching) && (
<Main>
<Loading />
</Main>
)}
{isError && (
<Main>
<ErrorState />
</Main>
)}
{!(isUninitialized || isLoading || isFetching) && isSuccess && (
<React.Fragment>
<Main className="pf-m-light pf-u-pt-sm">
<RuleDetails
messages={formatMessages(
intl,
RuleDetailsMessagesKeys,
messagesValues
)}
product={AdvisorProduct.ocp}
rule={content}
isDetailsPage
header={
<React.Fragment>
<PageHeaderTitle
title={
<React.Fragment>
{content.description} <RuleLabels rule={content} />
</React.Fragment>
}
/>
<p>
{intl.formatMessage(messages.rulesDetailsPubishdate, {
date: (
<DateFormat
date={new Date(content.publish_date)}
type="onlyDate"
/>
),
})}
{content.tags &&
(Array.isArray(content.tags) ? (
<LabelGroup
className="categoryLabels"
numLabels={1}
isCompact
>
{content.tags.reduce((labels, tag) => {
if (RULE_CATEGORIES[tag]) {
labels.push(
<Label
key={`label-${tag}`}
color="blue"
isCompact
>
{
FILTER_CATEGORIES.category.values[
RULE_CATEGORIES[tag] - 1
].label
}
</Label>
);
}
return labels;
}, [])}
</LabelGroup>
) : (
<Label isCompact>{content.tags}</Label>
))}
</p>
</React.Fragment>
}
onVoteClick={async (rule, rating) =>
await Post(`${BASE_URL}/v2/rating`, {}, { rule, rating })
}
>
<Flex>
<FlexItem align={{ default: 'alignRight' }}>
<Dropdown
className="ins-c-rec-details__actions_dropdown"
onSelect={() =>
setActionsDropdownOpen(!actionsDropdownOpen)
}
position="right"
ouiaId="actions"
toggle={
<DropdownToggle
onToggle={(actionsDropdownOpen) =>
setActionsDropdownOpen(actionsDropdownOpen)
}
toggleIndicator={CaretDownIcon}
>
{intl.formatMessage(messages.actions)}
</DropdownToggle>
}
isOpen={actionsDropdownOpen}
dropdownItems={
content?.disabled
? [
<DropdownItem
key="link"
ouiaId="enable"
onClick={() => {
enableRule(rule);
}}
>
{intl.formatMessage(messages.enableRule)}
</DropdownItem>,
]
: [
<DropdownItem
key="link"
ouiaId="disable"
onClick={() => {
handleModalToggle(true);
}}
>
{intl.formatMessage(messages.disableRule)}
</DropdownItem>,
]
}
/>
</FlexItem>
</Flex>
</RuleDetails>
</Main>
<Main>
<React.Fragment>
{(content?.hosts_acked_count ||
ackedClusters?.length > 0 ||
content?.disabled) && (
<Card className="cardOverride" ouiaId="hosts-acked">
<CardHeader>
<Title headingLevel="h4" size="xl">
<BellSlashIcon size="sm" />
{intl.formatMessage(
(content?.hosts_acked_count ||
ackedClusters?.length > 0) &&
!content?.disabled
? messages.ruleIsDisabledForClusters
: messages.ruleIsDisabled
)}
</Title>
</CardHeader>
<CardBody>
{(content?.hosts_acked_count ||
ackedClusters?.length > 0) &&
!content?.disabled ? (
<React.Fragment>
{intl.formatMessage(
messages.ruleIsDisabledForClustersBody,
{
clusters: ackedClusters?.length,
}
)}
{!clustersIsFetching && ackedClusters?.length > 0 ? (
<React.Fragment>
<Button
isInline
variant="link"
onClick={() => setViewSystemsModalOpen(true)}
ouiaId="view-clusters"
>
{intl.formatMessage(messages.viewClusters)}
</Button>
</React.Fragment>
) : (
<OneLineLoader />
)}
</React.Fragment>
) : (
!ackIsFetching &&
ackData && (
<React.Fragment>
{ackData?.justification
? intl.formatMessage(
messages.ruleIsDisabledWithJustificaiton,
{
date: (
<span>
<DateFormat
date={ruleDate}
type="onlyDate"
/>
</span>
),
reason: ackData.justification,
}
)
: intl.formatMessage(
messages.ruleIsDisabledWithoutJustificaiton,
{
date: (
<span>
<DateFormat
date={ruleDate}
type="onlyDate"
/>
</span>
),
}
)}
</React.Fragment>
)
)}
</CardBody>
<CardFooter>
{(content?.hosts_acked_count ||
ackedClusters?.length > 0) &&
!content?.disabled ? (
!clustersIsFetching && ackedClusters ? (
<Button
isInline
variant="link"
onClick={() =>
enableRecForHosts({
uuids: ackedClusters.map((c) => c.cluster_id),
})
}
ouiaId="enable"
>
{intl.formatMessage(messages.enableRuleForClusters)}
</Button>
) : (
<OneLineLoader />
)
) : (
<Button
isInline
variant="link"
onClick={() => enableRule(rule)}
ouiaId="enable"
>
{intl.formatMessage(messages.enableRule)}
</Button>
)}
</CardFooter>
</Card>
)}
{!content?.disabled && (
<React.Fragment>
<Title className="titleOverride" headingLevel="h3" size="2xl">
{intl.formatMessage(messages.affectedClusters)}
</Title>
<AffectedClustersTable
query={clusters}
rule={content}
afterDisableFn={afterDisableFn}
/>
</React.Fragment>
)}
{content?.disabled && (
<MessageState
icon={BellSlashIcon}
title={intl.formatMessage(messages.ruleIsDisabled)}
text={intl.formatMessage(messages.ruleIsDisabledBody)}
/>
)}
</React.Fragment>
</Main>
</React.Fragment>
)}
</React.Fragment>
);
}
Example #10
| Source File: result.js From ibutsu-server with MIT License | 4 votes |
|
render() {
let { testResult, artifactTabs, activeTab, testHistoryTable } = this.state;
const jsonViewTheme = getTheme() === 'dark' ? 'tomorrow' : 'rjv-default';
if (activeTab === null) {
activeTab = this.getDefaultTab();
}
let resultIcon = getIconForResult('pending');
let startTime = new Date();
let parameters = <div/>;
let runLink = '';
if (testResult) {
resultIcon = getIconForResult(testResult.result);
startTime = new Date(testResult.start_time);
parameters = Object.keys(testResult.params).map((key) => <div key={key}>{key} = {testResult.params[key]}</div>);
runLink = <Link to={`/runs/${testResult.run_id}`}>{testResult.run_id}</Link>;
}
return (
<React.Fragment>
{this.state.testResult &&
<Tabs activeKey={activeTab} onSelect={this.onTabSelect} isBox>
{!this.props.hideSummary &&
<Tab eventKey="summary" title={<TabTitle icon={InfoCircleIcon} text="Summary" />}>
<Card>
<CardBody style={{padding: 0}}>
<DataList selectedDataListItemId={null} aria-label="Test Result" style={{borderBottom: "none", borderTop: "none"}}>
<DataListItem isExpanded={false} aria-labelledby="result-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="result-label" width={2}><strong>Result:</strong></DataListCell>,
<DataListCell key="result-data" width={4}><span className={testResult.result}>{resultIcon} {testResult.result}</span></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="run-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="run-label" width={2}><strong>Run:</strong></DataListCell>,
<DataListCell key="run-data" width={4}>{runLink}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
{testResult.component &&
<DataListItem aria-labelledby="component-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="component-label" width={2}><strong>Component:</strong></DataListCell>,
<DataListCell key="component-data" width={4}><Link to={`/results?component[eq]=${testResult.component}`}>{testResult.component}</Link></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata && testResult.metadata.code_link &&
<DataListItem aria-labelledby="code-link-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="code-link-label" width={2}><strong>Code Link:</strong></DataListCell>,
<DataListCell key="code-link-data" width={4}><Linkify componentDecorator={linkifyDecorator}>{testResult.metadata.code_link}</Linkify></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata && testResult.metadata.tags &&
<DataListItem aria-labelledby="tags-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="tags-label" width={2}><strong>Tags:</strong></DataListCell>,
<DataListCell key="tags-data" width={4}>
<Flex>
{testResult.metadata.tags.map((tag) => <FlexItem spacer={{ default: 'spacerXs' }} key={tag}><Label color="blue" variant="filled">{tag}</Label></FlexItem>)}
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.result === 'skipped' && testResult.metadata && testResult.metadata.skip_reason &&
<DataListItem aria-labelledby="skip-reason-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="skip-reason-label" width={2}><strong>Reason skipped:</strong></DataListCell>,
<DataListCell key="skip-reason-data" width={4}><Linkify componentDecorator={linkifyDecorator}>{testResult.metadata.skip_reason}</Linkify></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.result === 'xfailed' && testResult.metadata && testResult.metadata.xfail_reason &&
<DataListItem aria-labelledby="xfail-reason-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="xfail-reason-label" width={2}><strong>Reason xfailed:</strong></DataListCell>,
<DataListCell key="xfail-reason-data" width={4}><Linkify componentDecorator={linkifyDecorator}>{testResult.metadata.xfail_reason}</Linkify></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{(testResult.result === 'failed' || testResult.result === 'error' || testResult.result === 'skipped') &&
<DataListItem aria-labelledby="classification-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="classification-label" width={2}><strong>Classification:</strong></DataListCell>,
<DataListCell key="classification-data" width={4}>
<ClassificationDropdown testResult={testResult} />
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
<DataListItem aria-labelledby="duration">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="duration-label" width={2}><strong>Duration:</strong></DataListCell>,
<DataListCell key="duration-data" width={4} style={{paddingTop: 0, paddingBottom: 0, marginBottom: "-25px"}}>
<DataList selectedDataListItemId={null} aria-label="Durations" style={{borderTop: "none"}}>
{(testResult.start_time ? testResult.start_time : testResult.starttime) > 0 &&
<DataListItem className="pf-u-p-0" aria-labelledby="started-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="started-label" className="pf-u-p-sm">Started at:</DataListCell>,
<DataListCell key="started-data" className="pf-u-p-sm">{startTime.toLocaleString()}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
<DataListItem className="pf-u-p-0" aria-labelledby="total-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="total-label" className="pf-u-p-sm">Total:</DataListCell>,
<DataListCell key="total-data" className="pf-u-p-sm">{round(testResult.duration)}s</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
{testResult.metadata && testResult.metadata.durations &&
<React.Fragment>
{testResult.metadata.durations.setup &&
<DataListItem className="pf-u-p-0" aria-labelledby="setup-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="setup-label" className="pf-u-p-sm">Set up:</DataListCell>,
<DataListCell key="setup-data" className="pf-u-p-sm">{round(testResult.metadata.durations.setup)}s</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata.durations.call &&
<DataListItem className="pf-u-p-0" aria-labelledby="call-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="call-label" className="pf-u-p-sm">Call:</DataListCell>,
<DataListCell key="call-data" className="pf-u-p-sm">{round(testResult.metadata.durations.call)}s</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata.durations.teardown &&
<DataListItem className="pf-u-p-0" aria-labelledby="teardown-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="teardown-label" className="pf-u-p-sm">Tear down:</DataListCell>,
<DataListCell key="teardown-data" className="pf-u-p-sm">{round(testResult.metadata.durations.teardown)}s</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
</React.Fragment>
}
</DataList>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
{testResult.metadata && testResult.metadata.statuses &&
<DataListItem aria-labelledby="stages-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="stages-label" width={2}><strong>Stages:</strong></DataListCell>,
<DataListCell key="stages-data" width={4} style={{paddingBottom: 0, paddingTop: 0, marginBottom: "-25px"}}>
<DataList selectedDataListItemId={null} aria-label="Stages" style={{borderTop: "none"}}>
{testResult.metadata.statuses.setup &&
<DataListItem className="pf-u-p-0" aria-labelledby="setup-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="setup-label" className="pf-u-p-sm">Set up:</DataListCell>,
<DataListCell key="setup-data" className="pf-u-p-sm">{testResult.metadata.statuses.setup[0]} {testResult.metadata.statuses.setup[1] && "(xfail)"}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata.statuses.call &&
<DataListItem className="pf-u-p-0" aria-labelledby="call-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="call-label" className="pf-u-p-sm">Call:</DataListCell>,
<DataListCell key="call-data" className="pf-u-p-sm">{testResult.metadata.statuses.call[0]} {testResult.metadata.statuses.call[1] && "(xfail)"}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata.statuses.teardown &&
<DataListItem className="pf-u-p-0" aria-labelledby="teardown-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="teardown-label" className="pf-u-p-sm">Tear down:</DataListCell>,
<DataListCell key="teardown-data" className="pf-u-p-sm">{testResult.metadata.statuses.teardown[0]} {testResult.metadata.statuses.teardown[1] && "(xfail)"}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
</DataList>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
<DataListItem aria-labelledby="source-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="source-label" width={2}><strong>Source:</strong></DataListCell>,
<DataListCell key="source-data" width={4}><Link to={`/results?source[eq]=${testResult.source}`}>{testResult.source}</Link></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
{parameters.length > 0 &&
<DataListItem aria-labelledby="params-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="params-label" width={2}><strong>Parameters:</strong></DataListCell>,
<DataListCell key="params-data" width={4}>{parameters}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{testResult.metadata && Object.prototype.hasOwnProperty.call(testResult, 'short_tb') &&
<DataListItem aria-labelledby="traceback-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="traceback-label" width={2}><strong>Traceback:</strong></DataListCell>,
<DataListCell key="traceback-data" width={4}><div style={{overflow: "scroll", width: "100%"}}><pre><code>{testResult.metadata.short_tb}</code></pre></div></DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
</DataList>
</CardBody>
</Card>
</Tab>
}
{artifactTabs}
{!this.props.hideTestHistory &&
<Tab eventKey="test-history" title={<TabTitle icon={SearchIcon} text="Test History"/>}>
{testHistoryTable}
</Tab>
}
{!this.props.hideTestObject &&
<Tab eventKey="test-object" title={<TabTitle icon={CodeIcon} text="Test Object" />}>
<Card>
<CardBody>
<ReactJson src={testResult} name={null} iconStyle={"triangle"} collapseStringsAfterLength={120} enableClipboard={false} displayDataTypes={false} theme={jsonViewTheme} />
</CardBody>
</Card>
</Tab>
}
</Tabs>
}
</React.Fragment>
);
}
Example #11
| Source File: user-edit.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const { user, projects, userProjects } = this.state;
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Title headingLevel="h1" size='2xl' className="pf-c-title">
Users / {user && user.name} {' '}
{user && user.is_superadmin &&
<Label className="super-admin-label" variant="outline" color="blue">Administrator</Label>
}
</Title>
</PageSection>
<PageSection>
{!user && <Alert variant="info" title="Loading..." />}
{user &&
<Card>
<CardBody>
<Form>
<FormGroup label="Name" isRequired fieldId="userName" helperText="The user's name">
<TextInput
isRequired
type="text"
id="userName"
name="userName"
aria-describedby="The user's name"
value={user.name}
onChange={this.onUserNameChanged}
/>
</FormGroup>
<FormGroup label="E-mail" isRequired fieldId="userEmail" helperText="The user's e-mail address">
<TextInput
isRequired
type="email"
id="userEmail"
name="userEmail"
aria-describedby="The user's e-mail address"
value={user.email}
onChange={this.onUserEmailChanged}
/>
</FormGroup>
<FormGroup fieldId="userStatus" label="User status">
<Checkbox
label="Is active"
id="userIsActive"
name="userIsActive"
aria-label="User is active"
isChecked={user.is_active}
onChange={this.onIsActiveToggle}
/>
<Checkbox
label="Is administrator"
id="userIsAdmin"
name="userIsAdmin"
aria-label="User is administrator"
isChecked={user.is_superadmin}
onChange={this.onIsAdminToggle}
/>
</FormGroup>
<FormGroup fieldId="userProjects" label="Projects" helperText="The projects to which a user has access">
<Select
variant={SelectVariant.typeaheadMulti}
typeAheadAriaLabel="Select one or more projects"
onToggle={this.onProjectsToggle}
onSelect={this.onProjectsSelect}
onClear={this.onProjectsClear}
selections={userProjects}
isOpen={this.state.isProjectsOpen}
aria-labelledby="userProjects"
placeholderText="Select one or more projects"
>
{projects.map(project => (
<SelectOption key={project.id} value={projectToOption(project)} description={project.name} />
))}
</Select>
</FormGroup>
<ActionGroup>
<Button variant="primary" onClick={this.onSubmitClick}>Submit</Button>
<Button variant="secondary" onClick={this.props.history.goBack}>Cancel</Button>
</ActionGroup>
</Form>
</CardBody>
</Card>
}
</PageSection>
</React.Fragment>
);
}
Example #12
| Source File: user.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const { user, projects } = this.state;
let projectInfo = [];
// create the project rows
if (projects && user) {
projectInfo.push(projects.map((project) => (
<DataListCell key={project.name} className="pf-u-p-sm">
<span> {project.title} </span>
{project.owner_id === user.id &&
<Label className="project-owner-label" variant="filled" color="green" isCompact>Owner</Label>
}
</DataListCell>
)))
}
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Title headingLevel="h1" size='2xl' className="pf-c-title">
<React.Fragment>
<span> Profile </span>
{user && user.is_superadmin &&
<Label className="super-admin-label" variant="filled" color="blue">Administrator</Label>
}
</React.Fragment>
</Title>
</PageSection>
<PageSection>
{!user && <Alert variant="danger" title="Error fetching user details" />}
{user &&
<DataList selectedDataListItemId={null} aria-label="User profile">
<DataListItem aria-labelledby="Name">
<DataListItemRow>
{!this.state.isEditing &&
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Name:</strong></DataListCell>,
<DataListCell key={2} width={4}>{user.name} <Button variant="link" icon={<PencilAltIcon />} onClick={this.onEditButtonClicked} isInline isSmall ouiaId="edit-profile-button">Edit</Button></DataListCell>
]}
/>
}
{this.state.isEditing &&
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Name:</strong></DataListCell>,
<DataListCell key={2} width={4}>
<InputGroup>
<TextInput value={this.state.tempName} type="text" onChange={value => this.setState({tempName: value})} aria-label="User name" />
<Button variant="control" icon={<CheckIcon />} onClick={this.onSaveButtonClicked} ouiaId="edit-save-button">Save</Button>
<Button variant="control" icon={<TimesIcon />} onClick={this.onCancelButtonClicked} ouiaId="edit-cancel-button">Cancel</Button>
</InputGroup>
</DataListCell>
]}
/>
}
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="E-mail">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>E-mail:</strong></DataListCell>,
<DataListCell key={2} width={4}>{user.email}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Projects">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>My Projects:</strong></DataListCell>,
<DataListCell key={2} width={4} style={{paddingTop: 0, paddingBottom: 0}}>
<DataList aria-lable="projects" style={{borderTop: "none"}}>
{projects &&
projectInfo
}
</DataList>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
}
</PageSection>
</React.Fragment>
);
}
Example #13
| Source File: run.js From ibutsu-server with MIT License | 4 votes |
|
render() {
let passed = 0, failed = 0, errors = 0, xfailed = 0, xpassed = 0, skipped = 0, not_run = 0;
let created = 0;
let calculatePasses = true;
const { run, columns, rows, classificationTable, artifactTabs } = this.state;
const jsonViewTheme = getTheme() === 'dark' ? 'tomorrow' : 'rjv-default';
if (run.start_time) {
created = new Date(run.start_time);
}
else {
created = new Date(run.created);
}
if (run.summary) {
if (run.summary.passes) {
passed = run.summary.passes;
calculatePasses = false;
}
if (run.summary.tests && calculatePasses) {
passed = run.summary.tests;
}
if (run.summary.failures) {
passed -= calculatePasses ? run.summary.failures : 0;
failed = run.summary.failures;
}
if (run.summary.errors) {
passed -= calculatePasses ? run.summary.errors : 0;
errors = run.summary.errors;
}
if (run.summary.xfailures) {
passed -= calculatePasses ? run.summary.xfailures : 0;
xfailed = run.summary.xfailures;
}
if (run.summary.xpasses) {
passed -= calculatePasses ? run.summary.xpasses : 0;
xpassed = run.summary.xpasses;
}
if (run.summary.skips) {
passed -= calculatePasses ? run.summary.skips : 0;
skipped = run.summary.skips;
}
if (run.summary.not_run) {
not_run = run.summary.not_run;
}
else if (run.summary.collected) {
not_run = run.summary.collected - run.summary.tests;
}
}
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
}
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1" className="pf-c-title">Run {run.id}</Text>
</TextContent>
</PageSection>
<PageSection>
{!this.state.isRunValid &&
<EmptyObject headingText="Run not found" returnLink="/runs" returnLinkText="Return to runs list" />
}
{this.state.isRunValid &&
<Tabs activeKey={this.state.activeTab} onSelect={this.onTabSelect} isBox>
<Tab eventKey={'summary'} title={<TabTitle icon={InfoCircleIcon} text="Summary" />}>
<Card>
<CardBody style={{padding: 0}} id="run-detail">
<Grid style={{backgroundColor: '#fff'}}>
<GridItem span={6}>
<DataList selectedDataListItemId={null} aria-label="Run properties" style={{borderBottom: 'none', borderTop: 'none'}}>
<DataListItem aria-labelledby="Duration">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Duration:</strong></DataListCell>,
<DataListCell key={2} width={4}>{round(run.duration)}s</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Started">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Started:</strong></DataListCell>,
<DataListCell key={2} width={4}>{created.toLocaleString()}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
{run.metadata && run.metadata.component &&
<DataListItem aria-labelledby="Component">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Component:</strong></DataListCell>,
<DataListCell key={2} width={4}>{run.metadata.component}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{run.metadata && run.metadata.env &&
<DataListItem aria-labelledby="Environment">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Environment:</strong></DataListCell>,
<DataListCell key={2} width={4}>{run.metadata.env}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{run.metadata && run.metadata.tags &&
<DataListItem aria-labelledby="tags-label">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="tags-label" width={2}><strong>Tags:</strong></DataListCell>,
<DataListCell key="tags-data" width={4}>
<Flex>
{run.metadata.tags.map((tag) => <FlexItem spacer={{ default: 'spacerXs' }} key={tag}><Label color="blue" variant="filled">{tag}</Label></FlexItem>)}
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{run.metadata && run.metadata.jenkins && run.metadata.jenkins.job_name &&
<DataListItem aria-labelledby="Jenkins Job Name">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Jenkins Job Name:</strong></DataListCell>,
<DataListCell key={2} width={4}>{run.metadata.jenkins.job_name}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
{run.source &&
<DataListItem aria-labelledby="Source">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1} width={2}><strong>Source:</strong></DataListCell>,
<DataListCell key={2} width={4}>{run.source}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
}
</DataList>
</GridItem>
<GridItem span={6}>
<DataList selectedDataListItemId={null} aria-label="Summary properties" style={{borderBottom: 0, borderTop: 0}}>
<DataListItem aria-labelledby="Summary">
<DataListItemRow>
<DataListItemCells
style={{paddingBottom: 0}}
dataListCells={[
<DataListCell key={1} width={2}><strong>Summary:</strong></DataListCell>,
<DataListCell key={2} width={4} style={{paddingTop: 0}}>
<DataList selectedDataListItemId={null} aria-label="Summary" style={{borderBottom: 0, borderTop: 0}}>
<DataListItem aria-labelledby="Total">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Total:</DataListCell>,
<DataListCell key={2}>{run.summary.collected ? run.summary.collected : run.summary.tests}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Passed">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Passed:</DataListCell>,
<DataListCell key={2}>{passed}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Failed">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Failed:</DataListCell>,
<DataListCell key={2}>{failed}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Error">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Error:</DataListCell>,
<DataListCell key={2}>{errors}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Xfailed">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Xfailed:</DataListCell>,
<DataListCell key={2}>{xfailed}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Xpassed">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Xpassed:</DataListCell>,
<DataListCell key={2}>{xpassed}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Skipped">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Skipped:</DataListCell>,
<DataListCell key={2}>{skipped}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Not Run">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key={1}>Not Run:</DataListCell>,
<DataListCell key={2}>{not_run}</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
</GridItem>
</Grid>
</CardBody>
</Card>
</Tab>
<Tab eventKey={'results-list'} title={<TabTitle icon={CatalogIcon} text="Results List" />}>
<Card className="pf-u-mt-lg">
<CardHeader>
<Flex style={{ width: '100%' }}>
<FlexItem grow={{ default: 'grow' }}>
<TextContent>
<Text component="h2" className="pf-c-title pf-m-xl">Test Results</Text>
</TextContent>
</FlexItem>
<FlexItem>
<Button variant="secondary" onClick={this.refreshResults}>Refresh results</Button>
</FlexItem>
<FlexItem>
<Link to={`/results?run_id[eq]=${run.id}`} className="pf-c-button pf-m-primary" style={{marginLeft: '2px'}}>See all results <ChevronRightIcon /></Link>
</FlexItem>
</Flex>
</CardHeader>
<CardBody>
<FilterTable
columns={columns}
rows={rows}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onSetPage={this.setPage}
onSetPageSize={this.pageSizeSelect}
/>
</CardBody>
</Card>
</Tab>
<Tab eventKey={'results-tree'} title={<TabTitle icon={RepositoryIcon} text="Results Tree" />}>
<Card className="pf-u-mt-lg">
<CardBody>
<Grid gutter="sm">
{false && <GridItem span={12}>
<div style={{paddingTop: "1em"}}>
<TextInput value={this.state.treeSearch} type="text" onChange={this.onSearch} placeholder="Search tree..." aria-label="Filter tree" />
</div>
</GridItem>
}
{this.state.resultsTree.core.data.length === 0 &&
<GridItem span={12}>
<Bullseye><center><Spinner size="xl"/></center></Bullseye>
</GridItem>
}
{this.state.resultsTree.core.data !== 0 &&
<React.Fragment>
<GridItem span={5}>
<TreeView treeData={this.state.resultsTree} onChange={(e, data) => this.handleJSTreeChange(e, data)}/>
</GridItem>
<GridItem span={7}>
{this.state.testResult &&
<Card className={this.state.testResult.result}>
<CardHeader>
{this.state.testResult.test_id}
{this.state.testResult.metadata.markers &&
<div style={{float: 'right'}}>
{this.state.testResult.metadata.markers.map((marker) => {
return <Badge isRead key={marker.name}>{marker.name}</Badge>;
})}
</div>
}
</CardHeader>
<CardBody style={{backgroundColor: "var(--pf-c-page__main-section--BackgroundColor)", paddingTop: "1.2em"}}>
<ResultView testResult={this.state.testResult}/>
</CardBody>
</Card>
}
</GridItem>
</React.Fragment>
}
</Grid>
</CardBody>
</Card>
</Tab>
<Tab eventKey={'classify-failures'} title={<TabTitle icon={MessagesIcon} text="Classify Failures" />}>
{classificationTable}
</Tab>
{artifactTabs}
<Tab eventKey={'run-object'} title={<TabTitle icon={CodeIcon} text="Run Object" />}>
<Card>
<CardBody>
<ReactJson src={run} name={null} iconStyle={"triangle"} collapseStringsAfterLength={120} enableClipboard={false} displayDataTypes={false} theme={jsonViewTheme} />
</CardBody>
</Card>
</Tab>
</Tabs>
}
</PageSection>
</React.Fragment>
);
}
