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;
}

25
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' }}
isBreadcrumbGrouped
breadcrumb={
<Breadcrumb className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#' onClick={goBack}>
{_("Session Recording")} {_("Session Recording")}
</Button> </BreadcrumbItem>
<BreadcrumbItem isActive>
{_("Settings")}
</BreadcrumbItem>
</Breadcrumb>
}>
<PageSection>
<GeneralConfig /> <GeneralConfig />
<SssdConfig /> <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>

28
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,10 +395,20 @@ class Recording extends React.Component {
); );
} else { } else {
return ( return (
<> <Page
<Button variant="link" icon={<AngleLeftIcon />} onClick={this.goBackToList}> groupProps={{ sticky: 'top' }}
isBreadcrumbGrouped
breadcrumb={
<Breadcrumb className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#' onClick={this.goBackToList}>
{_("Session Recording")} {_("Session Recording")}
</Button> </BreadcrumbItem>
<BreadcrumbItem isActive>
{_("Current recording")}
</BreadcrumbItem>
</Breadcrumb>
}>
<PageSection>
<Player.Player <Player.Player
ref="player" ref="player"
matchList={this.props.recording.matchList} matchList={this.props.recording.matchList}
@ -417,7 +428,8 @@ class Recording extends React.Component {
curTs={this.state.curTs} curTs={this.state.curTs}
jumpToTs={this.handleLogTsChange} /> jumpToTs={this.handleLogTsChange} />
</ExpandableSection> </ExpandableSection>
</> </PageSection>
</Page>
); );
} }
} }
@ -890,7 +902,8 @@ export default class View extends React.Component {
); );
return ( return (
<> <Page>
<PageSection variant={PageSectionVariants.light}>
<Toolbar>{toolbar}</Toolbar> <Toolbar>{toolbar}</Toolbar>
<RecordingList <RecordingList
date_since={this.state.date_since} date_since={this.state.date_since}
@ -899,7 +912,8 @@ export default class View extends React.Component {
hostname={this.state.hostname} hostname={this.state.hostname}
list={this.state.recordingList} list={this.state.recordingList}
diff_hosts={this.state.diff_hosts} /> diff_hosts={this.state.diff_hosts} />
</> </PageSection>
</Page>
); );
} else { } else {
return ( return (