@patternfly/react-core#LabelGroup JavaScript Examples
The following examples show how to use
@patternfly/react-core#LabelGroup.
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: 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 #2
| 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 #3
| 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>
);
}
