@patternfly/react-core#DataList JavaScript Examples
The following examples show how to use
@patternfly/react-core#DataList.
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: DataListLayout.js From user-preferences-frontend with Apache License 2.0 | 6 votes |
|
DataListLayout = (props) => {
const { sections, label, name } = useFieldApi(props);
const formOptions = useFormApi();
return (
<DataList aria-label={label || name} {...props}>
{sections.map(({ label, fields }, key) => {
const actualFields = Array.isArray(fields) ? fields : [fields];
return (
actualFields.length > 0 && (
<DataListItem name={name} key={key} aria-labelledby="simple-item1">
{actualFields.map(({ fields: fieldsToRender }, fieldsKey) => (
<DataListRow
key={`${key}-${fieldsKey}`}
fieldsKey={fieldsKey}
label={label}
fields={fieldsToRender}
formOptions={formOptions}
/>
))}
</DataListItem>
)
);
})}
</DataList>
);
}
Example #2
| Source File: YourInformation.js From user-preferences-frontend with Apache License 2.0 | 5 votes |
|
YourInformation = () => {
const env = insights.chrome.getEnvironment();
const prefix = insights.chrome.isProd ? '' : `${env === 'ci' ? 'qa' : env}.`;
const { isLoaded, currentUser } = useCurrentUser();
return (
<Card className="pref-email__info" ouiaId="user-pref-info-card">
<CardHeader>
<TextContent>
<Text component={TextVariants.h2}>Your information</Text>
</TextContent>
</CardHeader>
<CardBody>
<DataList>
<DataListItem>
<DataListItemRow>
<DataListItemCells
className="pref-u-condensed"
dataListCells={[
<DataListCell
isFilled={false}
className="pref-c-title pref-u-bold pref-u-condensed"
key="email-title"
>
Email address
</DataListCell>,
<DataListCell
isFilled
key="email-value"
className="pref-email__info-user-email pref-u-condensed"
>
{isLoaded ? (
<Fragment>
<span className="pf-u-mr-md">{currentUser.email}</span>
<a
rel="noopener noreferrer"
target="_blank"
href={`https://www.${prefix}redhat.com/wapps/ugc/protected/emailChange.html`}
>
Not correct?
</a>
</Fragment>
) : (
<Skeleton size="lg" />
)}
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
</CardBody>
</Card>
);
}
Example #3
| 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 #4
| 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 #5
| 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 #6
| 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>
);
}
Example #7
| Source File: AddressesDataList.js From cockpit-wicked with GNU General Public License v2.0 | 4 votes |
|
AddressesDataList = ({ addresses, updateAddresses, allowEmpty = true }) => {
const addAddress = () => {
const address = createAddressConfig();
const currentAddresses = [...addresses];
currentAddresses.push(address);
updateAddresses(currentAddresses);
};
const updateAddress = (id, field, value) => {
const nextAddresses = [...addresses];
const address = nextAddresses.find((addr) => addr.id == id);
address[field] = value;
// TODO: check if this do not generate not needed re-renders
updateAddresses(nextAddresses);
};
const deleteAddress = (id) => {
const nextAddresses = [...addresses];
const addressIdx = nextAddresses.findIndex((addr) => addr.id == id);
nextAddresses.splice(addressIdx, 1);
updateAddresses(nextAddresses);
};
const renderAddress = ({ id, local, label }) => {
const renderDeleteAction = () => {
if (!allowEmpty && addresses.length === 1) return null;
return (
<DataListAction>
<Button variant="secondory" className="btn-sm" onClick={() => deleteAddress(id)}>
<MinusIcon />
</Button>
</DataListAction>
);
};
const cells = [
<DataListCell key={`address-${id}-local`}>
<IPInput
defaultValue={local}
onChange={(value) => updateAddress(id, 'local', value)}
placeholder={_("Address")}
aria-label={_("Address")}
/>
</DataListCell>,
<DataListCell key={`address-${id}-label`}>
<TextInput
defaultValue={label}
onChange={(value) => updateAddress(id, 'label', value)}
placeholder={_("Label")}
aria-label={_("Label")}
/>
</DataListCell>
];
return (
<DataListItem key={`address-${id}`}>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
{ renderDeleteAction() }
</DataListItemRow>
</DataListItem>
);
};
return (
<Stack className="data-list-form" hasGutter>
<StackItem>
<Split hasGutter>
<SplitItem isFilled />
<SplitItem>
<Button variant="primary" className="btn-sm" onClick={() => addAddress() }>
<PlusIcon />
</Button>
</SplitItem>
</Split>
</StackItem>
<StackItem>
<DataList isCompact aria-label={_("Addresses data list")}>
{addresses.map((address) => renderAddress(address))}
</DataList>
</StackItem>
</Stack>
);
}
