@patternfly/react-core#Tab JavaScript Examples
The following examples show how to use
@patternfly/react-core#Tab.
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: DeviceDetailTabs.js From edge-frontend with Apache License 2.0 | 6 votes |
|
DeviceDetailTabs = ({
systemProfile,
imageId,
setUpdateModal,
setReload,
}) => {
const [activeTabKey, setActiveTabkey] = useState(0);
const handleTabClick = (_event, tabIndex) => setActiveTabkey(tabIndex);
return (
<div className="edge-c-device--detail add-100vh">
<Tabs
className="pf-u-ml-md"
activeKey={activeTabKey}
onSelect={handleTabClick}
>
<Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>}>
<AppInfo showTags fallback="" />
</Tab>
<Tab eventKey={1} title={<TabTitleText>Vulnerability</TabTitleText>}>
<VulnerabilityTab
deviceData={systemProfile}
setUpdateModal={setUpdateModal}
imageId={imageId}
setReload={setReload}
/>
</Tab>
</Tabs>
</div>
);
}
Example #2
| Source File: index.js From sed-frontend with Apache License 2.0 | 6 votes |
|
NavTabs = ({ tabItems, TabsProps: { className, ...TabsProps } }) => {
const { push } = useHistory();
const { pathname, search } = useLocation();
const activeTab = tabItems.find(({ pathname: tabPathname }) =>
pathname.includes(tabPathname)
);
const handleTabClick = (_event, tabIndex) =>
push({ pathname: tabItems[tabIndex].pathname, search });
return (
<Tabs
{...TabsProps}
className={classnames('ins-c-navtabs', className)}
activeKey={activeTab ? activeTab.eventKey : 0}
onSelect={handleTabClick}
>
{tabItems.map((item) => (
<Tab key={item.eventKey} {...item} />
))}
</Tabs>
);
}
Example #3
| Source File: TasksTabs.js From tasks-frontend with Apache License 2.0 | 6 votes |
|
TasksTabs = ({ className, tabIndex, tabsList, updateTab }) => {
return (
<Tabs className={className} activeKey={tabIndex} onSelect={updateTab}>
{tabsList.map((tabName, index) => (
<Tab
id={`tabs-page-${index}`}
key={`tabs-page-${index}`}
eventKey={index}
title={<TabTitleText>{tabName}</TabTitleText>}
/>
))}
</Tabs>
);
}
Example #4
| Source File: index.js From sed-frontend with Apache License 2.0 | 5 votes |
|
ConnectLog = () => {
const [activeTabKey, setActiveTabKey] = useState(0);
const dispatch = useDispatch();
const { push, location } = useHistory();
useEffect(() => {
dispatch(clearNotifications());
const searchParams = new URLSearchParams(location.search);
const activeTab = tabMapper.findIndex(
(item) => item === searchParams.get('active_tab')
);
if (activeTab !== -1) {
setActiveTabKey(activeTab);
} else {
push({
pathname: location.pathname,
search: new URLSearchParams({
active_tab: tabMapper[0],
}).toString(),
});
}
}, []);
return (
<Modal
title="Red Hat connect log"
variant="medium"
isOpen={true}
onClose={() => push(paths.connector)}
>
<Tabs
activeKey={activeTabKey}
onSelect={(_e, tabKey) => {
push({
pathname: location.pathname,
search: new URLSearchParams({
active_tab: tabMapper[tabKey],
}).toString(),
});
setActiveTabKey(tabKey);
}}
>
<Tab eventKey={0} title={<TabTitleText>Runs</TabTitleText>}>
<LogsTable />
</Tab>
<Tab eventKey={1} title={<TabTitleText>Systems</TabTitleText>}>
<SystemsTable />
</Tab>
</Tabs>
</Modal>
);
}
Example #5
| 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 #6
| 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 #7
| Source File: app.jsx From cockpit-wicked with GNU General Public License v2.0 | 5 votes |
|
Application = () => {
const [checkingService, setCheckingService] = useState(true);
const [serviceReady, setServiceReady] = useState(false);
const [activeTabKey, setActiveTabKey] = useState(0);
const handleTabClick = (event, tabIndex) => {
setActiveTabKey(tabIndex);
};
const renderTabs = () => {
return (
<Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
<Tab eventKey={0} title={<TabTitleText>{_("Interfaces")}</TabTitleText>}>
<InterfacesTab />
</Tab>
<Tab eventKey={1} title={<TabTitleText>{_("Routing")}</TabTitleText>}>
<RoutingTab />
</Tab>
<Tab eventKey={2} title={<TabTitleText>{_("DNS")}</TabTitleText>}>
<DnsTab />
</Tab>
</Tabs>
);
};
const renderContent = () => {
if (checkingService) return null;
if (serviceReady) return renderTabs();
return <InactiveServicePage />;
};
useEffect(() => {
serviceIsActive()
.then(result => {
setCheckingService(false);
setServiceReady(result);
});
}, []);
return (
<NetworkProvider>
<Page className="network">
{ checkingService && <StatusBar showSpinner>{_("Checking if service is active...")}</StatusBar> }
<PageSection>
{ renderContent() }
</PageSection>
</Page>
</NetworkProvider>
);
}
Example #8
| Source File: ImageDetailTabs.js From edge-frontend with Apache License 2.0 | 4 votes |
|
ImageDetailTabs = ({
imageData,
openUpdateWizard,
imageVersion,
isLoading,
}) => {
const location = useLocation();
const history = useHistory();
const [activeTabKey, setActiveTabkey] = useState(tabs.details);
const activeTab = imageVersion ? 'imageTab' : 'imageSetTab';
const keys = [
'baseURL',
'imageSetVersion',
'imageSetTab',
'imageVersion',
'imageTab',
'packagesToggle',
];
const imageUrlMapper = mapUrlToObj(location.pathname, keys);
const handleTabClick = (_event, tabIndex) => {
const selectedTab =
tabIndex === 0 ? 'details' : imageVersion ? 'packages' : 'versions';
imageUrlMapper[activeTab] = selectedTab;
history.push(imageUrlMapper.buildUrl());
setActiveTabkey(tabIndex);
};
useEffect(() => {
imageUrlMapper['imageTab']
? setActiveTabkey(tabs[imageUrlMapper['imageTab']])
: setActiveTabkey(tabs[imageUrlMapper['imageSetTab']]);
}, [location.pathname]);
return (
<>
{!imageData.isLoading && imageData.hasError ? (
<EmptyState
icon="question"
title="Image not found"
body="Please check you have the correct link with the correct image Id."
primaryAction={{
text: 'Back to Manage Images',
href: paths['manage-images'],
}}
secondaryActions={[]}
/>
) : (
<div className="edge-c-device--detail add-100vh">
<Tabs
className="pf-u-ml-md"
activeKey={activeTabKey}
onSelect={handleTabClick}
>
<Tab
eventKey={tabs.details}
title={<TabTitleText>Details</TabTitleText>}
>
<ImageDetailTab
imageData={imageData}
imageVersion={imageVersion}
/>
</Tab>
{isLoading ? (
<Tab
title={
<TabTitleText>
<Skeleton width="75px" />
</TabTitleText>
}
></Tab>
) : imageVersion ? (
<Tab
eventKey={tabs.packages}
title={<TabTitleText>Packages</TabTitleText>}
>
<ImagePackagesTab imageVersion={imageVersion} />
</Tab>
) : (
<Tab
eventKey={tabs.versions}
title={<TabTitleText>Versions</TabTitleText>}
>
<ImageVersionTab
imageData={imageData}
openUpdateWizard={openUpdateWizard}
/>
</Tab>
)}
</Tabs>
</div>
)}
</>
);
}
Example #9
| 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 #10
| 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 #11
| Source File: jenkinsjobanalysis.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const {
activeTab,
isAreaChart,
isLoading,
barchartParams,
barWidth,
heatmapParams,
linechartParams
} = this.state;
return (
<React.Fragment>
<div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'right', marginBottom: '-2em', padding: '0.2em 1em', width: '20em'}}>
{this.getBuildsDropdown()}
</div>
{activeTab === 'heatmap' &&
<div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.2em 1em', width: '30em'}}>
<ParamDropdown
dropdownItems={['Yes', 'No']}
defaultValue={this.state.countSkips}
direction={DropdownDirection.down}
handleSelect={this.onSkipSelect}
tooltip="Count skips as failure:"
/>
</div>
}
{activeTab === 'overall-health' &&
<div style={{backgroundColor: 'var(--pf-global--BackgroundColor--100)', float: 'right', clear: 'none', marginBottom: '-2em', padding: '0.5em 1em', width: '15em'}}>
{this.getSwitch()}
</div>
}
<Tabs activeKey={this.state.activeTab} onSelect={this.onTabSelect} isBox>
<Tab eventKey='heatmap' title={'Heatmap'}>
{!isLoading && activeTab === "heatmap" &&
<JenkinsHeatmapWidget title={heatmapParams.job_name} params={heatmapParams} hideDropdown={true} labelWidth={400}/>
}
</Tab>
<Tab eventKey='overall-health' title={'Overall Health'}>
{!isLoading && !isAreaChart && activeTab === "overall-health" &&
<GenericBarWidget
title={"Test counts for " + barchartParams.job_name}
params={barchartParams}
hideDropdown={true}
widgetEndpoint={'jenkins-bar-chart'}
barWidth={barWidth}
horizontal={false}
xLabelTooltip="Build"
height={180}
yLabel="Test counts"
xLabel="Build number"
padding={{
bottom: 50,
left: 50,
right: 20,
top: 20
}}
fontSize={9}
sortOrder="ascending"
/>
}
{!isLoading && isAreaChart && activeTab === "overall-health" &&
<GenericAreaWidget
title={"Test counts for " + barchartParams.job_name}
params={barchartParams}
hideDropdown={true}
getColors={this.getColors}
widgetEndpoint={'jenkins-bar-chart'}
height={180}
yLabel="Test counts"
xLabel="Build number"
sortOrder="ascending"
showTooltip={false}
colorScale={[
'var(--pf-global--warning-color--100)',
'var(--pf-global--danger-color--100)',
'var(--pf-global--success-color--100)',
'var(--pf-global--info-color--100)',
]}
padding={{
bottom: 50,
left: 50,
right: 20,
top: 20
}}
fontSize={9}
/>
}
</Tab>
<Tab eventKey='build-durations' title={'Build Duration'}>
{!isLoading && activeTab === 'build-durations' &&
<GenericAreaWidget
title={"Durations for " + linechartParams.job_name}
params={linechartParams}
hideDropdown={true}
height={180}
padding={{
bottom: 50,
left: 50,
right: 20,
top: 20
}}
fontSize={9}
showTooltip={true}
sortOrder="ascending"
xLabel="Build number"
yLabel="Time [hrs]"
varExplanation={
"* Note: since for some jobs, the plugin tests execute in parallel, 'Duration' is the real time for which the build ran. 'Total Execution Time' is the sum of durations for each plugin run."
}
/>
}
</Tab>
</Tabs>
</React.Fragment>
);
}
