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 {
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 {
Breadcrumb, BreadcrumbItem,
Button,
Form,
FormGroup,
@ -37,9 +38,10 @@ import {
EmptyStateIcon,
Title,
EmptyStateBody,
EmptyStateVariant
EmptyStateVariant,
Page, PageSection,
} 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";
const json = require('comment-json');
@ -557,12 +559,23 @@ export function Config () {
};
return (
<>
<Button variant="link" icon={<AngleLeftIcon />} onClick={goBack}>
{_("Session Recording")}
</Button>
<GeneralConfig />
<SssdConfig />
</>
<Page
groupProps={{ sticky: 'top' }}
isBreadcrumbGrouped
breadcrumb={
<Breadcrumb className='machines-listing-breadcrumb'>
<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>
<body class="pf-m-redhat-form">
<div id="app"></div>
<div class="ct-page-fill" id="app"></div>
</body>
</html>

84
src/recordings.jsx
View file

@ -20,6 +20,7 @@
import React from "react";
import {
Breadcrumb, BreadcrumbItem,
Bullseye,
Button,
Card,
@ -34,6 +35,7 @@ import {
EmptyStateIcon,
EmptyStateVariant,
ExpandableSection,
Page, PageSection, PageSectionVariants,
Spinner,
Title,
TextInput,
@ -50,7 +52,6 @@ import {
TableBody
} from "@patternfly/react-table";
import {
AngleLeftIcon,
CogIcon,
ExclamationCircleIcon,
ExclamationTriangleIcon,
@ -394,30 +395,41 @@ class Recording extends React.Component {
);
} else {
return (
<>
<Button variant="link" icon={<AngleLeftIcon />} onClick={this.goBackToList}>
{_("Session Recording")}
</Button>
<Player.Player
ref="player"
matchList={this.props.recording.matchList}
logsTs={this.logsTs}
search={this.props.search}
onTsChange={this.handleTsChange}
recording={r}
logsEnabled={this.state.logsEnabled}
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>
</>
<Page
groupProps={{ sticky: 'top' }}
isBreadcrumbGrouped
breadcrumb={
<Breadcrumb className='machines-listing-breadcrumb'>
<BreadcrumbItem to='#' onClick={this.goBackToList}>
{_("Session Recording")}
</BreadcrumbItem>
<BreadcrumbItem isActive>
{_("Current recording")}
</BreadcrumbItem>
</Breadcrumb>
}>
<PageSection>
<Player.Player
ref="player"
matchList={this.props.recording.matchList}
logsTs={this.logsTs}
search={this.props.search}
onTsChange={this.handleTsChange}
recording={r}
logsEnabled={this.state.logsEnabled}
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 (
<>
<Toolbar>{toolbar}</Toolbar>
<RecordingList
date_since={this.state.date_since}
date_until={this.state.date_until}
username={this.state.username}
hostname={this.state.hostname}
list={this.state.recordingList}
diff_hosts={this.state.diff_hosts} />
</>
<Page>
<PageSection variant={PageSectionVariants.light}>
<Toolbar>{toolbar}</Toolbar>
<RecordingList
date_since={this.state.date_since}
date_until={this.state.date_until}
username={this.state.username}
hostname={this.state.hostname}
list={this.state.recordingList}
diff_hosts={this.state.diff_hosts} />
</PageSection>
</Page>
);
} else {
return (