@patternfly/react-core#CardBody JavaScript Examples
The following examples show how to use
@patternfly/react-core#CardBody.
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: RoutingTab.js From cockpit-wicked with GNU General Public License v2.0 | 6 votes |
|
RoutingTab = () => {
const dispatch = useNetworkDispatch();
const { routes } = useNetworkState();
useEffect(() => { fetchRoutes(dispatch) }, [dispatch]);
const routesList = routes ? Object.values(routes) : [];
const routesNotFound = () => (
<EmptyState>
<EmptyStateIcon icon={InfoCircleIcon} />
<Title headingLevel="h4" size="lg">
{_('No user-defined routes were found.')}
</Title>
<AddRoute />
</EmptyState>
);
if (routesList.length === 0) {
return routesNotFound();
}
return (
<Card>
<CardHeader>
<CardActions>
<AddRoute />
</CardActions>
<CardTitle>
<Text component={TextVariants.h2}>{_("User-defined Routes")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<RoutesList routes={routesList} />
</CardBody>
</Card>
);
}
Example #2
| Source File: AvailableImagesTile.js From edge-frontend with Apache License 2.0 | 6 votes |
|
AvailableImageTile = ({ onNewImageClick }) => {
const { isLoading, hasError, data } = useSelector(
({ imagesReducer }) => ({
isLoading:
imagesReducer?.isLoading !== undefined
? imagesReducer?.isLoading
: true,
hasError: imagesReducer?.hasError || false,
data: imagesReducer?.data || null,
}),
shallowEqual
);
return (
<AvailableImageTileBase>
<CardBody>
{isLoading ? (
<Bullseye>
<Spinner />
</Bullseye>
) : hasError ? (
data
) : (
<Button variant="link" style={{ paddingLeft: 0 }}>
{data.meta.count} images
</Button>
)}
</CardBody>
<CardFooter>
<Button variant="primary" onClick={() => onNewImageClick()}>
Create new image
</Button>
</CardFooter>
</AvailableImageTileBase>
);
}
Example #3
| Source File: CardBuilder.js From tasks-frontend with Apache License 2.0 | 6 votes |
|
CardBuilder = ({ children, cardClass }) => {
if (!Array.isArray(children)) {
children = [children];
}
return (
<Card className={cardClass}>
<CardTitle className={findChild(children, 'title').props.className}>
{findChild(children, 'title')}
</CardTitle>
<CardBody className={findChild(children, 'body').props.className}>
{findChild(children, 'body')}
</CardBody>
<CardFooter className={findChild(children, 'footer').props.className}>
{findChild(children, 'footer')}
</CardFooter>
</Card>
);
}
Example #4
| Source File: DnsTab.js From cockpit-wicked with GNU General Public License v2.0 | 6 votes |
|
DnsTab = () => {
const { dns } = useNetworkState();
const dispatch = useNetworkDispatch();
useEffect(() => {
fetchDnsSettings(dispatch);
}, [dispatch]);
return (
<>
<Card>
<CardBody>
<DnsSettings dns={dns} />
</CardBody>
</Card>
</>
);
}
Example #5
| Source File: run.js From ibutsu-server with MIT License | 5 votes |
|
getRunArtifacts() {
HttpClient.get([Settings.serverUrl, 'artifact'], {runId: this.state.id})
.then(response => HttpClient.handleResponse(response))
.then(data => {
let artifactTabs = [];
data.artifacts.forEach((artifact) => {
HttpClient.get([Settings.serverUrl, 'artifact', artifact.id, 'view'])
.then(response => {
let contentType = response.headers.get('Content-Type');
if (contentType.includes('text')) {
response.text().then(text => {
artifactTabs.push(
<Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileAltIcon} text={artifact.filename} />}>
<Card>
<CardBody>
<Editor fontFamily="Hack, monospace" theme="dark" value={text} height="40rem" options={{readOnly: true}} />
</CardBody>
<CardFooter>
<Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
</CardFooter>
</Card>
</Tab>
);
this.setState({artifactTabs});
});
}
else if (contentType.includes('image')) {
response.blob().then(blob => {
let imageUrl = URL.createObjectURL(blob);
artifactTabs.push(
<Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileImageIcon} text={artifact.filename} />}>
<Card>
<CardBody>
<img src={imageUrl} alt={artifact.filename}/>
</CardBody>
<CardFooter>
<Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
</CardFooter>
</Card>
</Tab>
);
this.setState({artifactTabs});
});
}
});
});
});
}
Example #6
| Source File: genericarea.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const legendData = this.getLegendData();
return (
<Card>
<WidgetHeader title={this.title} getDataFunc={this.getData} onDeleteClick={this.props.onDeleteClick}/>
<CardBody data-id="generic-area">
{this.state.areaChartError &&
<p>Error fetching data</p>
}
{(!this.state.runAggregatorError && this.state.isLoading) &&
<Text component="h2">Loading ...</Text>
}
{(!this.state.runAggregatorError && !this.state.isLoading) &&
<Chart
padding={ this.props.padding || {
bottom: 30,
left: 150,
right: 15,
top: 20
}}
domainPadding={{y: 10}}
height={this.props.height || 200}
themeColor={ChartThemeColor.multiUnordered}
containerComponent={this.getTooltip()}
>
<ChartStack>
{this.state.areaCharts}
</ChartStack>
<ChartAxis
label={this.props.xLabel || "x"}
fixLabelOverlap
style={{
tickLabels: {fontSize: this.props.fontSize-2 || 14},
axisLabel: {fontSize: this.props.fontSize || 14}
}}
/>
<ChartAxis
label={this.props.yLabel || "y"}
dependentAxis
style={{
tickLabels: {fontSize: this.props.fontSize-2 || 14},
axisLabel: {fontSize: this.props.fontSize || 14}
}}
/>
</Chart>
}
</CardBody>
<CardFooter>
<ChartLegend
height={30}
data={legendData}
style={{
labels: {fontFamily: 'RedHatText', fontSize: this.props.fontSize-2 || 14},
title: {fontFamily: 'RedHatText'}
}}
colorScale={this.props.colorScale}
themeColor={ChartThemeColor.multiUnordered}
/>
{this.props.varExplanation &&
<Text component="h3">{this.props.varExplanation}</Text>
}
</CardFooter>
</Card>
)
}
Example #7
| Source File: report-builder.js From ibutsu-server with MIT License | 5 votes |
|
render() {
document.title = 'Report Builder | Ibutsu';
const { columns, rows, actions } = this.state;
const reportTypes = this.state.reportTypes.map((reportType) => <FormSelectOption key={reportType.type} value={reportType.type} label={reportType.name} />);
const pagination = {
page: this.state.page,
pageSize: this.state.pageSize,
totalItems: this.state.totalItems
};
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Report Builder</Text>
</TextContent>
</PageSection>
<PageSection>
<Card>
<CardBody>
<Form isHorizontal>
<FormGroup isRequired label="Report Type" helperText="The type of report" fieldId="report-type">
<FormSelect id="report-type" value={this.state.reportType} onChange={this.onReportTypeChange}>
{reportTypes}
</FormSelect>
</FormGroup>
<FormGroup label="Filter" fieldId="report-filter">
<TextInput type="text" id="report-filter" value={this.state.reportFilter} onChange={this.onReportFilterChange} />
<ExpandableSection toggleText="Filter Help" onToggle={this.onHelpToggle} isExpanded={this.state.isHelpExpanded}>
<TextContent>
<p>The filter parameter takes a comma-separated list of filters to apply. <Linkify componentDecorator={linkifyDecorator}>https://docs.ibutsu-project.org/en/latest/user-guide/filter-help.html</Linkify></p>
</TextContent>
</ExpandableSection>
</FormGroup>
<FormGroup label="Source" helperText="The source of report" fieldId="report-source">
<TextInput type="text" id="report-source" value={this.state.reportSource} onChange={this.onReportSourceChange} />
</FormGroup>
<ActionGroup>
<Button variant="primary" onClick={this.onRunReportClick}>Run Report</Button>
</ActionGroup>
</Form>
</CardBody>
<CardFooter>
<Text className="disclaimer" component="h4">
* Note: reports can only show a maximum of 100,000 results.
</Text>
</CardFooter>
</Card>
</PageSection>
<PageSection>
<Card>
<CardBody>
<FilterTable
columns={columns}
rows={rows}
actions={actions}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
/>
</CardBody>
</Card>
</PageSection>
</React.Fragment>
);
}
Example #8
| Source File: tokens.js From ibutsu-server with MIT License | 5 votes |
|
render() {
document.title = 'User Tokens | Ibutsu';
const { columns, rows } = this.state;
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
};
return (
<React.Fragment>
<PageSection id="page" variant={PageSectionVariants.light}>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<FlexItem spacer={{ default: 'spacerLg' }}>
<TextContent>
<Text className="title" component="h1">Tokens</Text>
</TextContent>
</FlexItem>
<FlexItem>
<Button
aria-label="Add token"
variant="secondary"
title="Add token"
onClick={this.onAddTokenClick}
>
<PlusCircleIcon /> Add Token
</Button>
</FlexItem>
</Flex>
</PageSection>
<PageSection>
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
/>
</CardBody>
</Card>
</PageSection>
<AddTokenModal
isOpen={this.state.isAddTokenOpen}
onSave={this.onAddTokenSave}
onClose={this.onAddTokenClose}
/>
<DeleteModal
title="Delete token"
body="Would you like to delete the selected token?"
isOpen={this.state.isDeleteTokenOpen}
onDelete={this.onDeleteToken}
onClose={this.onDeleteTokenClose}
/>
</React.Fragment>
);
}
Example #9
| Source File: user-list.js From ibutsu-server with MIT License | 5 votes |
|
render() {
document.title = 'Users - Administration | Ibutsu';
const { columns, rows, textFilter } = this.state;
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
};
const filters = [
<TextInput type="text" id="filter" placeholder="Search for user..." value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}} key="textFilter"/>
];
return (
<React.Fragment>
<PageSection id="page" variant={PageSectionVariants.light}>
<TextContent>
<Text className="title" component="h1" ouiaId="users">Users</Text>
</TextContent>
</PageSection>
<PageSection className="pf-u-pb-0">
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
/>
</CardBody>
</Card>
</PageSection>
<Modal
title="Confirm Delete"
variant="small"
isOpen={this.state.isDeleteModalOpen}
onClose={this.onDeleteModalClose}
actions={[
<Button key="delete" variant="danger" isLoading={this.state.isDeleting} isDisabled={this.state.isDeleting} onClick={this.onModalDeleteClick}>
{this.state.isDeleting ? 'Deleting...' : 'Delete'}
</Button>,
<Button key="cancel" variant="secondary" isDisabled={this.state.isDeleting} onClick={this.onDeleteModalClose}>
Cancel
</Button>
]}
>
Are you sure you want to delete “{this.state.selectedUser && this.state.selectedUser.name}”? This cannot be undone!
</Modal>
</React.Fragment>
);
}
Example #10
| Source File: genericbar.js From ibutsu-server with MIT License | 5 votes |
|
render() {
return (
<Card>
<WidgetHeader title={this.title} getDataFunc={this.getData} onDeleteClick={this.props.onDeleteClick}/>
<CardBody data-id="recent-runs">
{this.state.genericBarError &&
<p>Error fetching data</p>
}
{(!this.state.genericBarError && this.state.isLoading) &&
<Text component="h2">Loading ...</Text>
}
{(!this.state.genericBarError && !this.state.isLoading) &&
<Chart
domainPadding={ this.props.horizontal ? { x: 20 } : { y: 20} }
padding={ this.props.padding || {
bottom: 30,
left: 150,
right: 15,
top: 20
}}
height={this.props.height || this.getChartHeight(Object.keys(this.state.data["passed"]).length)}
>
<ChartAxis
label={this.props.xLabel || ""}
fixLabelOverlap={!this.props.horizontal}
style={{
tickLabels: {fontSize: this.props.fontSize-2 || 14},
axisLabel: {fontSize: this.props.fontSize || 14}
}}
/>
<ChartAxis
label={this.props.yLabel || ""}
dependentAxis
style={{
tickLabels: {fontSize: this.props.fontSize-2 || 14},
axisLabel: {fontSize: this.props.fontSize || 14}
}}
/>
<ChartStack>
{this.state.barCharts}
</ChartStack>
</Chart>
}
</CardBody>
<CardFooter>
<ChartLegend
height={30}
data={[
{name: "Passed"},
{name: "Failed"},
{name: "Skipped"},
{name: "Error"},
{name: "Xfailed"},
{name: "Xpassed"}
]}
colorScale={[
'var(--pf-global--success-color--100)',
'var(--pf-global--danger-color--100)',
'var(--pf-global--info-color--100)',
'var(--pf-global--warning-color--100)',
'var(--pf-global--palette--purple-400)',
'var(--pf-global--palette--purple-700)',
]}
style={{
labels: {fontFamily: 'RedHatText', fontSize: this.props.fontSize-2 || 14},
title: {fontFamily: 'RedHatText'}
}}
/>
{this.getDropdowns()}
</CardFooter>
</Card>
)
}
Example #11
| Source File: jenkinsheatmap.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const xLabels = [<ChartLineIcon key={0} />];
const yLabels = [];
const data = [];
let labels = [];
for (const key of Object.keys(this.state.data.heatmap)) {
const newLabels = [];
const values = this.state.data.heatmap[key];
yLabels.push(<div key={key} title={key} className="ellipsis">{key}</div>);
data.push(values);
values.forEach((item) => {
if (!!item && (item.length > 2) && !!item[3]) {
newLabels.push(<Link to={`/results?metadata.jenkins.build_number[eq]=${item[3]}&metadata.jenkins.job_name[eq]=` + this.params['job_name']} key={item[3]}>{item[3]}</Link>);
}
});
if (newLabels.length > labels.length) {
labels = newLabels;
}
}
labels.forEach((item) => xLabels.push(item));
const actions = this.getJenkinsAnalysisLink() || {};
return (
<Card>
<WidgetHeader title={this.title} actions={actions} getDataFunc={this.getHeatmap} onDeleteClick={this.props.onDeleteClick}/>
<CardBody data-id="heatmap" style={{paddingTop: '0.5rem'}}>
{(!this.state.heatmapError && this.state.isLoading) &&
<Text component="h2">Loading ...</Text>
}
{(!this.state.heatmapError && !this.state.isLoading) &&
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
yLabelWidth={this.labelWidth}
yLabelTextAlign={"left"}
data={data}
squares
cellStyle={this.getCellStyle}
cellRender={this.renderCell}
title={(value) => value ? `${value[0]}` : ''}
/>
}
{this.state.heatmapError &&
<p>Error fetching data</p>
}
</CardBody>
{!this.props.hideDropdown &&
<CardFooter>
<ParamDropdown
dropdownItems={this.props.dropdownItems || [3, 5, 6, 7]}
handleSelect={this.onBuildSelect}
defaultValue={this.params.builds}
tooltip={"Set no. of builds to:"}
/>
<ParamDropdown
dropdownItems={['Yes', 'No']}
handleSelect={this.onSkipSelect}
defaultValue={this.state.countSkips}
tooltip="Count skips as failure:"
/>
</CardFooter>
}
</Card>
);
}
Example #12
| Source File: project-edit.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const { project, users, owner } = this.state;
return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<Title headingLevel="h1" size='2xl' className="pf-c-title">
Projects / {project && project.title}
</Title>
</PageSection>
<PageSection>
{!project && <Alert variant="info" title="Loading..." />}
{project &&
<Card>
<CardBody>
<Form>
<FormGroup label="Title" isRequired fieldId="projectTitle" helperText="The project's friendly name">
<TextInput
isRequired
type="text"
id="projectTitle"
name="projectTitle"
aria-describedby="The project's friendly name"
value={project.title}
onChange={this.onProjectTitleChanged}
/>
</FormGroup>
<FormGroup label="Name" isRequired fieldId="projectName" helperText="The project's machine name">
<TextInput
isRequired
type="text"
id="projectName"
name="projectName"
aria-describedby="The project's machine name"
value={project.name}
onChange={this.onProjectNameChanged}
/>
</FormGroup>
<FormGroup fieldId="owner" label="Owner" helperText="The user who owns the project">
<Select
variant={SelectVariant.typeahead}
typeAheadAriaLabel="Select user"
onToggle={this.onOwnerToggle}
onSelect={this.onOwnerSelect}
onClear={this.onOwnerClear}
onTypeaheadInputChanged={this.onOwnerChanged}
selections={owner}
isOpen={this.state.isOwnerOpen}
aria-labelledby="owner"
placeholderText="Select user"
>
{users.map(user => (
<SelectOption key={user.id} value={userToOption(user)} description={user.email} />
))}
</Select>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
ouiaId="admin-project-edit-save"
onClick={this.onSubmitClick}
>
Submit
</Button>
<Button
variant="secondary"
ouiaId="admin-project-edit-cancel"
component={(props: any) => <Link {...props} to="/admin/projects" />}
>
Cancel
</Button>
</ActionGroup>
</Form>
</CardBody>
</Card>
}
</PageSection>
</React.Fragment>
);
}
Example #13
| Source File: resultsummary.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const themeColors = [
'var(--pf-global--success-color--100)',
'var(--pf-global--danger-color--100)',
'var(--pf-global--info-color--100)',
'var(--pf-global--warning-color--100)',
'var(--pf-global--palette--purple-400)',
'var(--pf-global--palette--purple-700)',
'var(--pf-global--primary-color--100)'
];
return (
<Card>
<WidgetHeader title={this.title} getDataFunc={this.getResultSummary} onDeleteClick={this.props.onDeleteClick}/>
<CardBody>
<div>
{!this.state.isLoading &&
<ChartDonut
constrainToVisibleArea={true}
data={[
{ x: 'Passed', y: this.state.summary.passed },
{ x: 'Failed', y: this.state.summary.failed },
{ x: 'Skipped', y: this.state.summary.skipped },
{ x: 'Error', y: this.state.summary.error },
{ x: 'Xfailed', y: this.state.summary.xfailed },
{ x: 'Xpassed', y: this.state.summary.xpassed }
]}
labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
height={200}
title={this.state.summary.total}
subTitle="total results"
style={{
labels: {fontFamily: 'RedHatText'}
}}
colorScale={themeColors}
/>
}
{this.state.isLoading &&
<Text component="h2">Loading ...</Text>
}
</div>
{!this.state.isLoading &&
<p className="pf-u-pt-sm">Total number of tests: {this.state.summary.total}</p>
}
</CardBody>
<CardFooter>
{!this.state.isLoading &&
<ChartLegend
data={[
{name: 'Passed (' + this.state.summary.passed + ')'},
{name: 'Failed (' + this.state.summary.failed + ')'},
{name: 'Skipped (' + this.state.summary.skipped + ')'},
{name: 'Error (' + this.state.summary.error + ')'},
{name: 'Xfailed (' + this.state.summary.xfailed + ')'},
{name: 'Xpassed (' + this.state.summary.xpassed + ')'}
]}
height={120}
orientation="horizontal"
responsive={false}
itemsPerRow={2}
colorScale={themeColors}
style={{
labels: {fontFamily: 'RedHatText'},
title: {fontFamily: 'RedHatText'}
}}
/>
}
</CardFooter>
</Card>
);
}
Example #14
| Source File: result.js From ibutsu-server with MIT License | 5 votes |
|
getTestArtifacts(resultId) {
HttpClient.get([Settings.serverUrl, 'artifact'], {resultId: resultId})
.then(response => HttpClient.handleResponse(response))
.then(data => {
let artifactTabs = [];
data.artifacts.forEach((artifact) => {
console.log(artifact);
HttpClient.get([Settings.serverUrl, 'artifact', artifact.id, 'view'])
.then(response => {
let contentType = response.headers.get('Content-Type');
if (contentType.includes('text')) {
response.text().then(text => {
artifactTabs.push(
<Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileAltIcon} text={artifact.filename} />}>
<Card>
<CardBody>
<Editor fontFamily="Hack, monospace" theme="vs-dark" value={text} height="40rem" options={{readOnly: true}} />
</CardBody>
<CardFooter>
<Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
</CardFooter>
</Card>
</Tab>
);
this.setState({artifactTabs});
});
}
else if (contentType.includes('image')) {
response.blob().then(blob => {
let imageUrl = URL.createObjectURL(blob);
artifactTabs.push(
<Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileImageIcon} text={artifact.filename} />}>
<Card>
<CardBody>
<img src={imageUrl} alt={artifact.filename}/>
</CardBody>
<CardFooter>
<Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
</CardFooter>
</Card>
</Tab>
);
this.setState({artifactTabs});
});
}
});
});
});
}
Example #15
| Source File: classify-failures.js From ibutsu-server with MIT License | 5 votes |
|
render() {
const {
columns,
rows,
selectedResults,
includeSkipped,
filters
} = this.state;
const { run_id } = this.props
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
}
// filters for the metadata
const resultFilters = [
<MetaFilter
key="metafilter"
// user_properties fields shouldn't be injected here
fieldOptions={FILTERABLE_RESULT_FIELDS}
runId={run_id}
setFilter={this.setFilter}
customFilters={{'result': filters['result']}}
/>,
]
return (
<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 Failures</Text>
</TextContent>
</FlexItem>
<FlexItem>
<TextContent>
<Checkbox id="include-skips" label="Include skips, xfails" isChecked={includeSkipped} aria-label="include-skips-checkbox" onChange={this.onSkipCheck}/>
</TextContent>
</FlexItem>
<FlexItem>
<MultiClassificationDropdown selectedResults={selectedResults} refreshFunc={this.refreshResults}/>
</FlexItem>
<FlexItem>
<Button variant="secondary" onClick={this.refreshResults}>Refresh results</Button>
</FlexItem>
</Flex>
</CardHeader>
<CardBody>
<FilterTable
columns={columns}
rows={rows}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onCollapse={this.onCollapse}
onSetPage={this.setPage}
onSetPageSize={this.pageSizeSelect}
canSelectAll={true}
onRowSelect={this.onTableRowSelect}
variant={TableVariant.compact}
activeFilters={this.state.filters}
filters={resultFilters}
onRemoveFilter={this.removeFilter}
hideFilters={["run_id", "project_id"]}
/>
</CardBody>
</Card>
);
}
Example #16
| 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 #17
| Source File: InterfacesTab.js From cockpit-wicked with GNU General Public License v2.0 | 5 votes |
|
InterfacesTab = () => {
const dispatch = useNetworkDispatch();
const { interfaces, connections } = useNetworkState();
useEffect(() => {
fetchConnections(dispatch);
fetchInterfaces(dispatch);
listenToInterfacesChanges(dispatch);
}, [dispatch]);
const managedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => i.managed || !i.virtual) : [];
const unmanagedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => !managedInterfacesList.includes(i)) : [];
const connectionsList = connections ? Object.values(connections) : [];
const renderUnmanagedInterfaces = () => {
if (unmanagedInterfacesList.length === 0) return;
return (
<Card>
<CardHeader>
<CardActions />
<CardTitle>
<Text component={TextVariants.h2}>{_("Unmanaged Interfaces")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<UnmanagedInterfacesList interfaces={unmanagedInterfacesList} />
</CardBody>
</Card>
);
};
return (
<>
<Card>
<CardHeader>
<CardActions>
<AddConnectionMenu />
</CardActions>
<CardTitle>
<Text component={TextVariants.h2}>{_("Interfaces")}</Text>
</CardTitle>
</CardHeader>
<CardBody>
<InterfacesList interfaces={managedInterfacesList} connections={connectionsList} />
</CardBody>
</Card>
{ renderUnmanagedInterfaces() }
</>
);
}
Example #18
| Source File: Loading.js From ocp-advisor-frontend with Apache License 2.0 | 5 votes |
|
Loading = () => (
<Card ouiaId="loading-skeleton">
<CardBody>
<List />
</CardBody>
</Card>
)
Example #19
| Source File: DeviceSummaryTile.js From edge-frontend with Apache License 2.0 | 5 votes |
|
DeviceSummaryTile = () => {
const { isLoading, hasError, data } = useSelector(
({ deviceSummaryReducer }) => ({
isLoading:
deviceSummaryReducer?.isLoading !== undefined
? deviceSummaryReducer?.isLoading
: true,
hasError: deviceSummaryReducer?.hasError || false,
data: deviceSummaryReducer?.data || null,
}),
shallowEqual
);
if (isLoading) {
return (
<Card className="tiles-card">
<CardTitle>Device summary information</CardTitle>
<CardBody>
<Bullseye>
<Spinner />
</Bullseye>
</CardBody>
</Card>
);
}
if (hasError) {
return (
<Card className="tiles-card">
<CardTitle>Device summary information</CardTitle>
<CardBody>{data}</CardBody>
</Card>
);
}
return (
<DeviceSummaryTileBase
orphaned={data['orphaned']}
active={data['active']}
noReports={data['noReports']}
neverReported={data['neverReported']}
/>
);
}
Example #20
| Source File: DeviceSummaryTile.js From edge-frontend with Apache License 2.0 | 5 votes |
|
DeviceSummaryTileBase = ({
orphaned,
active,
noReports,
neverReported,
}) => (
<Card className="tiles-card">
<CardTitle>Device summary</CardTitle>
<CardBody>
<Grid>
<GridItem span={6}>
<Stack hasGutter>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{active}
</Button>{' '}
Active
</StackItem>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{orphaned}
</Button>{' '}
Orphaned
</StackItem>
</Stack>
</GridItem>
<GridItem span={6}>
<Stack hasGutter>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{noReports}
</Button>
Stale
</StackItem>
<StackItem>
<Button isDisabled isInline className="pf-u-pr-md" variant="link">
{neverReported}
</Button>
Registered but never reported
</StackItem>
</Stack>
</GridItem>
</Grid>
</CardBody>
</Card>
)
Example #21
| Source File: resultaggregator.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const themeColors = [
'var(--pf-global--success-color--100)',
'var(--pf-global--danger-color--100)',
'var(--pf-global--warning-color--100)',
'var(--pf-global--info-color--100)',
'var(--pf-global--primary-color--100)'
];
return (
<Card>
<WidgetHeader title={this.title} getDataFunc={this.getResultData} onDeleteClick={this.props.onDeleteClick}/>
<CardBody data-id="recent-result-data">
{this.state.resultAggregatorError &&
<p>Error fetching data</p>
}
{(this.state.total === 0 && !this.state.isLoading) &&
<p>No data returned, try changing the days.</p>
}
{(!this.state.resultAggregatorError && this.state.isLoading) &&
<Text component="h2">Loading ...</Text>
}
{(!this.state.resultAggregatorError && !this.state.isLoading && this.params.chart_type === "pie" && this.state.total !== 0) &&
<ChartPie
constrainToVisibleArea={true}
data={this.state.chartData}
legendData={this.state.legendData}
labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
labelComponent={
<ChartTooltip
constrainToVisibleArea
dx={-10}
style={{ fill: "white" }}
/>
}
width={350}
padding={{
bottom: 20,
left: 20,
right: 20,
top: 20
}}
themeColor={ChartThemeColor.multi}
/>
}
{(!this.state.resultAggregatorError && !this.state.isLoading && this.params.chart_type === "donut" && this.state.total !== 0) &&
<ChartDonut
constrainToVisibleArea
data={this.state.chartData}
legendData={this.state.legendData}
labels={({datum}) => `${toTitleCase(datum.x || '')}: ${datum.y}`}
height={200}
title={this.state.total}
subTitle="total results"
style={{
labels: {fontFamily: 'RedHatText'}
}}
colorScale={themeColors}
/>
}
</CardBody>
<CardFooter>
{!this.state.isLoading && this.state.total !== 0 &&
<ChartLegend
data={this.state.legendData}
height={120}
orientation="horizontal"
responsive={false}
itemsPerRow={2}
colorScale={themeColors}
style={{
labels: {fontFamily: 'RedHatText'},
title: {fontFamily: 'RedHatText'}
}}
/>
}
<ParamDropdown
dropdownItems={this.props.dropdownItems || ["result", "metadata.exception_name", "component", "metadata.classification"]}
defaultValue={this.params.group_field}
handleSelect={this.onGroupFieldSelect}
tooltip={"Group data by:"}
/>
<ParamDropdown
dropdownItems={[0.1, 0.5, 1, 3, 5]}
handleSelect={this.onDaySelect}
defaultValue={this.params.days}
tooltip={"Set days to:"}
/>
</CardFooter>
</Card>
)
}
Example #22
| Source File: jenkinsjob.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const {
columns,
rows,
boolSelection,
fieldSelection,
isFieldOpen,
fieldOptions,
isBoolOpen,
isEmpty,
isError,
isOperationOpen,
operationSelection,
pagination,
textFilter,
} = this.state;
const filterMode = getFilterMode(fieldSelection);
const operationMode = getOperationMode(operationSelection);
const operations = getOperationsFromField(fieldSelection);
const filters = [
<Select
aria-label="Select a field"
placeholderText="Select a field"
selections={fieldSelection}
isOpen={isFieldOpen}
isCreatable={true}
variant={SelectVariant.typeahead}
maxHeight={"1140%"}
onToggle={this.onFieldToggle}
onSelect={this.onFieldSelect}
onCreateOption={this.onFieldCreate}
onClear={this.onFieldClear}
key="field"
>
{fieldOptions.map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>,
<Select
variant={SelectVariant.single}
onToggle={this.onOperationToggle}
onSelect={this.onOperationSelect}
isOpen={isOperationOpen}
selections={operationSelection}
key="operation"
>
{Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
</Select>,
<React.Fragment key="value">
{(operationMode === 'bool') &&
<Select
aria-label="Select True/False"
placeholderText="Select True/False"
variant={SelectVariant.single}
isOpen={isBoolOpen}
selections={boolSelection}
onToggle={this.onBoolToggle}
onSelect={this.onBoolSelect}
onClear={this.onBoolClear}
>
{["True", "False"].map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>
}
{(filterMode === 'text' && operationMode === 'single') &&
<TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
}
{(operationMode === 'multi') &&
<MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
}
</React.Fragment>
];
return (
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
pagination={pagination}
isEmpty={isEmpty}
isError={isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
onApplyFilter={this.applyFilter}
onRemoveFilter={this.removeFilter}
onClearFilters={this.clearFilters}
activeFilters={this.state.filters}
/>
</CardBody>
</Card>
);
}
Example #23
| 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 #24
| 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 #25
| Source File: run-list.js From ibutsu-server with MIT License | 4 votes |
|
render() {
document.title = 'Test Runs | Ibutsu';
const {
columns,
rows,
fieldSelection,
isFieldOpen,
fieldOptions,
isOperationOpen,
operationSelection,
textFilter,
boolSelection,
isBoolOpen,
} = this.state;
const filterMode = getFilterMode(fieldSelection);
const operationMode = getOperationMode(operationSelection);
const operations = getOperationsFromField(fieldSelection);
const filters = [
<Select
aria-label="Select a field"
placeholderText="Select a field"
selections={fieldSelection}
isOpen={isFieldOpen}
isCreatable={true}
variant={SelectVariant.typeahead}
maxHeight={"1140%"}
onToggle={this.onFieldToggle}
onSelect={this.onFieldSelect}
onCreateOption={this.onFieldCreate}
onClear={this.onFieldClear}
key="field"
>
{fieldOptions.map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>,
<Select
variant={SelectVariant.single}
onToggle={this.onOperationToggle}
onSelect={this.onOperationSelect}
isOpen={isOperationOpen}
selections={operationSelection}
key="operation"
>
{Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
</Select>,
<React.Fragment key="value">
{(operationMode === 'bool') &&
<Select
aria-label="Select True/False"
placeholderText="Select True/False"
variant={SelectVariant.single}
isOpen={isBoolOpen}
selections={boolSelection}
onToggle={this.onBoolToggle}
onSelect={this.onBoolSelect}
onClear={this.onBoolClear}
>
{["True", "False"].map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>
}
{(filterMode === 'text' && operationMode === 'single') &&
<TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
}
{(operationMode === 'multi') &&
<MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
}
</React.Fragment>
];
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
};
return (
<React.Fragment>
<PageSection id="page" variant={PageSectionVariants.light}>
<TextContent>
<Text className="title" component="h1">Test runs</Text>
</TextContent>
</PageSection>
<PageSection>
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
activeFilters={this.state.filters}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onApplyFilter={this.applyFilter}
onRemoveFilter={this.removeFilter}
onClearFilters={this.clearFilters}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
hideFilters={["project_id"]}
/>
</CardBody>
<CardFooter>
<Text className="disclaimer" component="h4">
* Note: for performance reasons, the total number of items is an approximation.
Use the API with ‘estimate=false’ if you need an accurate count.
</Text>
</CardFooter>
</Card>
</PageSection>
</React.Fragment>
);
}
Example #26
| Source File: result-list.js From ibutsu-server with MIT License | 4 votes |
|
render() {
document.title = 'Test Results | Ibutsu';
const {
columns,
rows,
filteredRuns,
fieldSelection,
isFieldOpen,
fieldOptions,
operationSelection,
isOperationOpen,
textFilter,
runSelection,
isRunOpen,
resultSelection,
isResultOpen,
boolSelection,
isBoolOpen,
} = this.state;
const filterMode = getFilterMode(fieldSelection);
const operationMode = getOperationMode(operationSelection);
const operations = getOperationsFromField(fieldSelection);
const filters = [
<Select
aria-label="Select a field"
placeholderText="Select a field"
selections={fieldSelection}
isOpen={isFieldOpen}
isCreatable={true}
variant={SelectVariant.typeahead}
maxHeight={"1140%"}
onToggle={this.onFieldToggle}
onSelect={this.onFieldSelect}
onCreateOption={this.onFieldCreate}
onClear={this.onFieldClear}
key="field"
>
{fieldOptions.map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>,
<Select
variant={SelectVariant.single}
onToggle={this.onOperationToggle}
onSelect={this.onOperationSelect}
isOpen={isOperationOpen}
selections={operationSelection}
key="operation"
>
{Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
</Select>,
<React.Fragment key="value">
{(operationMode === 'bool') &&
<Select
aria-label="Select True/False"
placeholderText="Select True/False"
variant={SelectVariant.single}
isOpen={isBoolOpen}
selections={boolSelection}
onToggle={this.onBoolToggle}
onSelect={this.onBoolSelect}
onClear={this.onBoolClear}
>
{["True", "False"].map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>
}
{(filterMode === 'text' && operationMode === 'single') &&
<TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
}
{(filterMode === 'text' && operationMode === 'multi') &&
<MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
}
{(filterMode === 'run' && operationMode !== 'bool') &&
<Select
aria-label="Select a run"
placeholderText="Select a run"
variant={operationMode === 'multi' ? SelectVariant.typeaheadMulti : SelectVariant.typeahead}
isOpen={isRunOpen}
selections={runSelection}
maxHeight={"1140%"}
onToggle={this.onRunToggle}
onSelect={this.onRunSelect}
onClear={this.onRunClear}
onFilter={this.onRunFilter}
>
{filteredRuns.map((option, index) => (
<SelectOption key={index} value={option} isDisabled={option === DEFAULT_RUNS[0]} />
))}
</Select>
}
{(filterMode === 'result' && operationMode !== 'bool') &&
<Select
aria-label="Select a result"
placeholderText="Select a result"
variant={operationMode === 'multi' ? SelectVariant.typeaheadMulti : SelectVariant.single}
isOpen={isResultOpen}
selections={resultSelection}
onToggle={this.onResultToggle}
onSelect={this.onResultSelect}
>
{["passed", "xpassed", "failed", "xfailed", "skipped", "error"].map((option, index) => (
<SelectOption key={index} value={option} />
))}
</Select>
}
</React.Fragment>
];
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
};
return (
<React.Fragment>
<PageSection id="page" variant={PageSectionVariants.light}>
<TextContent>
<Text className="title" component="h1">Test results</Text>
</TextContent>
</PageSection>
<PageSection className="pf-u-pb-0">
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
activeFilters={this.state.filters}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onApplyFilter={this.applyFilter}
onRemoveFilter={this.removeFilter}
onClearFilters={this.clearFilters}
onApplyReport={this.applyReport}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
hideFilters={["project_id"]}
/>
</CardBody>
<CardFooter>
<Text className="disclaimer" component="h4">
* Note: for performance reasons, the total number of items is an approximation.
Use the API with ‘estimate=false’ if you need an accurate count.
</Text>
</CardFooter>
</Card>
</PageSection>
</React.Fragment>
);
}
Example #27
| 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 #28
| Source File: project-list.js From ibutsu-server with MIT License | 4 votes |
|
render() {
document.title = 'Projects - Administration | Ibutsu';
const { columns, rows, textFilter } = this.state;
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
};
const filters = [
<TextInput type="text" id="filter" placeholder="Search for project..." value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}} key="textFilter"/>
];
return (
<React.Fragment>
<PageSection id="page" variant={PageSectionVariants.light}>
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
<Flex>
<FlexItem spacer={{ default: 'spacerLg' }}>
<TextContent>
<Text className="title" component="h1" ouiaId="admin-projects">Projects</Text>
</TextContent>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<Button
aria-label="Add project"
variant="secondary"
title="Add project"
ouiaId="admin-projects-add"
component={(props: any) => <Link {...props} to="/admin/projects/new" />}
>
<PlusCircleIcon /> Add Project
</Button>
</FlexItem>
</Flex>
</Flex>
</PageSection>
<PageSection className="pf-u-pb-0">
<Card>
<CardBody className="pf-u-p-0">
<FilterTable
columns={columns}
rows={rows}
filters={filters}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onSetPage={this.setPage}
onSetPageSize={this.setPageSize}
/>
</CardBody>
</Card>
</PageSection>
<Modal
title="Confirm Delete"
variant="small"
isOpen={this.state.isDeleteModalOpen}
onClose={this.onDeleteModalClose}
actions={[
<Button
key="delete"
variant="danger"
ouiaId="admin-projects-modal-delete"
isLoading={this.state.isDeleting}
isDisabled={this.state.isDeleting}
onClick={this.onModalDeleteClick}
>
{this.state.isDeleting ? 'Deleting...' : 'Delete'}
</Button>,
<Button
key="cancel"
variant="secondary"
ouiaId="admin-projects-modal-cancel"
isDisabled={this.state.isDeleting}
onClick={this.onDeleteModalClose}
>
Cancel
</Button>
]}
>
Are you sure you want to delete “{this.state.selectedProject && this.state.selectedProject.title}”? This cannot be undone!
</Modal>
</React.Fragment>
);
}
Example #29
| Source File: test-history.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const {
columns,
rows,
onlyFailures,
historySummary,
dropdownSelection
} = this.state;
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
}
const dropdownValues = Object.assign({
"1 Week": 0.25,
"2 Weeks": 0.5,
"1 Month": 1.0,
"2 Months": 2.0,
"3 Months": 3.0,
"5 Months": 5.0
})
let dropdownItems = [];
Object.keys(dropdownValues).forEach(key => {
dropdownItems.push(
<DropdownItem key={key} value={dropdownValues[key]} autoFocus={key === dropdownSelection}>
{key}
</DropdownItem>
)
});
return (
<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 History
</Text>
</TextContent>
</FlexItem>
<FlexItem>
<TextContent>
<Checkbox id="only-failures" label="Only show failures/errors" isChecked={onlyFailures} aria-label="only-failures-checkbox" onChange={this.onFailuresCheck}/>
</TextContent>
</FlexItem>
<FlexItem>
<Dropdown
toggle={<DropdownToggle isDisabled={false} onToggle={this.onDropdownToggle}>Time range</DropdownToggle>}
onSelect={this.onDropdownSelect}
isOpen={this.state.isDropdownOpen}
dropdownItems={dropdownItems}
/>
</FlexItem>
<FlexItem>
<Button variant="secondary" onClick={this.refreshResults}>Refresh results</Button>
</FlexItem>
</Flex>
</CardHeader>
<CardBody>
<FilterTable
columns={columns}
rows={rows}
pagination={pagination}
isEmpty={this.state.isEmpty}
isError={this.state.isError}
onCollapse={this.onCollapse}
onSetPage={this.setPage}
onSetPageSize={this.pageSizeSelect}
canSelectAll={false}
variant={TableVariant.compact}
activeFilters={this.state.filters}
filters={[
<Text key="summary" component="h4">
Summary:
{historySummary &&
<RunSummary summary={historySummary}/>
}
</Text>,
<Text key="last-passed" component="h4">Last passed: {this.state.lastPassedDate}</Text>,
]}
onRemoveFilter={this.removeFilter}
hideFilters={["project_id", "result", "test_id"]}
/>
</CardBody>
</Card>
);
}
