Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Page/PageSection/Breadcrumb patternfly components to make the app aligned with the PF design guidelines

Browse source
This commit is contained in:
Katerina Koukiou 2021-11-08 13:16:40 +01:00 • committed by Justin Stephenson
parent 3ebdcfa4fe
commit 3244a4c37d
4 changed files with 77 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app.scss
View file

@ -1,3 +1,8 @@
p { p {
font-weight: bold; font-weight: bold;
} }
// Ensure UI fills the entire page (and does not run over)
.ct-page-fill {
height: 100% !important;
}

31
src/config.jsx
View file

@ -20,6 +20,7 @@
import React from "react"; import React from "react";
import { import {
Breadcrumb, BreadcrumbItem,
Button, Button,
Form, Form,
FormGroup, FormGroup,
@ -37,9 +38,10 @@ import {
EmptyStateIcon, EmptyStateIcon,
Title, Title,
EmptyStateBody, EmptyStateBody,
EmptyStateVariant EmptyStateVariant,
Page, PageSection,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { AngleLeftIcon, ExclamationCircleIcon } from "@patternfly/react-icons"; import { ExclamationCircleIcon } from "@patternfly/react-icons";
import { global_danger_color_200 } from "@patternfly/react-tokens"; import { global_danger_color_200 } from "@patternfly/react-tokens";
const json = require('comment-json'); const json = require('comment-json');
@ -557,12 +559,23 @@ export function Config () {
}; };
return ( return (
<> <Page
<Button variant="link" icon={<AngleLeftIcon />} onClick={goBack}> groupProps={{ sticky: 'top' }}
{_("Session Recording")} isBreadcrumbGrouped
</Button> breadcrumb={
<GeneralConfig /> <Breadcrumb className='machines-listing-breadcrumb'>
<SssdConfig /> <BreadcrumbItem to='#' onClick={goBack}>
</> {_("Session Recording")}
</BreadcrumbItem>
<BreadcrumbItem isActive>
{_("Settings")}
</BreadcrumbItem>
</Breadcrumb>
}>
<PageSection>
<GeneralConfig />
<SssdConfig />
</PageSection>
</Page>
); );
} }

2
src/index.html
View file

@ -33,7 +33,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</head> </head>
<body class="pf-m-redhat-form"> <body class="pf-m-redhat-form">
<div id="app"></div> <div class="ct-page-fill" id="app"></div>
</body> </body>
</html> </html>

84
src/recordings.jsx
View file

@ -20,6 +20,7 @@
import React from "react"; import React from "react";
import { import {
Breadcrumb, BreadcrumbItem,
Bullseye, Bullseye,
Button, Button,
Card, Card,
@ -34,6 +35,7 @@ import {
EmptyStateIcon, EmptyStateIcon,
EmptyStateVariant, EmptyStateVariant,
ExpandableSection, ExpandableSection,
Page, PageSection, PageSectionVariants,
Spinner, Spinner,
Title, Title,
TextInput, TextInput,
@ -50,7 +52,6 @@ import {
TableBody TableBody
} from "@patternfly/react-table"; } from "@patternfly/react-table";
import { import {
AngleLeftIcon,
CogIcon, CogIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
ExclamationTriangleIcon, ExclamationTriangleIcon,
@ -394,30 +395,41 @@ class Recording extends React.Component {
); );
} else { } else {
return ( return (
<> <Page
<Button variant="link" icon={<AngleLeftIcon />} onClick={this.goBackToList}> groupProps={{ sticky: 'top' }}
{_("Session Recording")} isBreadcrumbGrouped
</Button> breadcrumb={
<Player.Player <Breadcrumb className='machines-listing-breadcrumb'>
ref="player" <BreadcrumbItem to='#' onClick={this.goBackToList}>
matchList={this.props.recording.matchList} {_("Session Recording")}
logsTs={this.logsTs} </BreadcrumbItem>
search={this.props.search} <BreadcrumbItem isActive>
onTsChange={this.handleTsChange} {_("Current recording")}
recording={r} </BreadcrumbItem>
logsEnabled={this.state.logsEnabled} </Breadcrumb>
onRewindStart={this.handleLogsReset} /> }>
<ExpandableSection <PageSection>
id="btn-logs-view" <Player.Player
toggleText={_("Logs View")} ref="player"
onToggle={this.handleLogsClick} matchList={this.props.recording.matchList}
isExpanded={this.state.logsEnabled === true}> logsTs={this.logsTs}
<Logs search={this.props.search}
recording={this.props.recording} onTsChange={this.handleTsChange}
curTs={this.state.curTs} recording={r}
jumpToTs={this.handleLogTsChange} /> logsEnabled={this.state.logsEnabled}
</ExpandableSection> onRewindStart={this.handleLogsReset} />
</> <ExpandableSection
id="btn-logs-view"
toggleText={_("Logs View")}
onToggle={this.handleLogsClick}
isExpanded={this.state.logsEnabled === true}>
<Logs
recording={this.props.recording}
curTs={this.state.curTs}
jumpToTs={this.handleLogTsChange} />
</ExpandableSection>
</PageSection>
</Page>
); );
} }
} }
@ -890,16 +902,18 @@ export default class View extends React.Component {
); );
return ( return (
<> <Page>
<Toolbar>{toolbar}</Toolbar> <PageSection variant={PageSectionVariants.light}>
<RecordingList <Toolbar>{toolbar}</Toolbar>
date_since={this.state.date_since} <RecordingList
date_until={this.state.date_until} date_since={this.state.date_since}
username={this.state.username} date_until={this.state.date_until}
hostname={this.state.hostname} username={this.state.username}
list={this.state.recordingList} hostname={this.state.hostname}
diff_hosts={this.state.diff_hosts} /> list={this.state.recordingList}
</> diff_hosts={this.state.diff_hosts} />
</PageSection>
</Page>
); );
} else { } else {
return ( return (