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

Upgrade to PatternFly 5 Alpha

Browse source
This commit is contained in:
Justin Stephenson 2023-05-17 08:37:39 -04:00
parent 4b0bfc7648
commit 12ab19bb67
4 changed files with 75 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -47,7 +47,8 @@
"@patternfly/react-core": "5.0.0-alpha.72", "@patternfly/react-core": "5.0.0-alpha.72",
"@patternfly/react-styles": "5.0.0-alpha.7", "@patternfly/react-styles": "5.0.0-alpha.7",
"@patternfly/react-icons": "5.0.0-alpha.10", "@patternfly/react-icons": "5.0.0-alpha.10",
"@patternfly/react-table": "^4.113.0", "@patternfly/react-tokens": "5.0.0-alpha.9",
"@patternfly/react-table": "5.0.0-alpha.74",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"comment-json": "^4.2.3", "comment-json": "^4.2.3",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",

80
src/config.jsx
View file

@ -36,10 +36,9 @@ import {
Bullseye, Bullseye,
EmptyState, EmptyState,
EmptyStateIcon, EmptyStateIcon,
Title,
EmptyStateBody, EmptyStateBody,
EmptyStateVariant, EmptyStateVariant,
Page, PageSection, Page, PageSection, EmptyStateHeader,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { 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";
@ -53,6 +52,7 @@ class GeneralConfig extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.setConfig = this.setConfig.bind(this); this.setConfig = this.setConfig.bind(this);
this.fileReadFailed = this.fileReadFailed.bind(this); this.fileReadFailed = this.fileReadFailed.bind(this);
this.readConfig = this.readConfig.bind(this); this.readConfig = this.readConfig.bind(this);
@ -191,6 +191,12 @@ class GeneralConfig extends React.Component {
this.readConfig(); this.readConfig();
} }
handleInputChange(name, value) {
const state = {};
state[name] = value;
this.setState(state);
}
render() { render() {
const form = const form =
(this.state.config_loaded === false && this.state.file_error === false) (this.state.config_loaded === false && this.state.file_error === false)
@ -202,14 +208,14 @@ class GeneralConfig extends React.Component {
<TextInput <TextInput
id="shell" id="shell"
value={this.state.shell} value={this.state.shell}
onChange={shell => this.setState({ shell })} onChange={(_event, value) => this.handleInputChange("shell", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Notice")}> <FormGroup label={_("Notice")}>
<TextInput <TextInput
id="notice" id="notice"
value={this.state.notice} value={this.state.notice}
onChange={notice => this.setState({ notice })} onChange={(_event, value) => this.handleInputChange("notice", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Latency")}> <FormGroup label={_("Latency")}>
@ -218,7 +224,7 @@ class GeneralConfig extends React.Component {
type="number" type="number"
step="1" step="1"
value={this.state.latency} value={this.state.latency}
onChange={latency => this.setState({ latency })} onChange={(_event, value) => this.handleInputChange("latency", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Payload Size, bytes")}> <FormGroup label={_("Payload Size, bytes")}>
@ -227,26 +233,26 @@ class GeneralConfig extends React.Component {
type="number" type="number"
step="1" step="1"
value={this.state.payload} value={this.state.payload}
onChange={payload => this.setState({ payload })} onChange={(_event, value) => this.handleInputChange("payload", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Logging")}> <FormGroup label={_("Logging")}>
<Checkbox <Checkbox
id="log_input" id="log_input"
isChecked={this.state.log_input} isChecked={this.state.log_input}
onChange={log_input => this.setState({ log_input })} onChange={(_event, log_input) => this.setState({ log_input })}
label={_("User's Input")} label={_("User's Input")}
/> />
<Checkbox <Checkbox
id="log_output" id="log_output"
isChecked={this.state.log_output} isChecked={this.state.log_output}
onChange={log_output => this.setState({ log_output })} onChange={(_event, log_output) => this.setState({ log_output })}
label={_("User's Output")} label={_("User's Output")}
/> />
<Checkbox <Checkbox
id="log_window" id="log_window"
isChecked={this.state.log_window} isChecked={this.state.log_window}
onChange={log_window => this.setState({ log_window })} onChange={(_event, log_window) => this.setState({ log_window })}
label={_("Window Resize")} label={_("Window Resize")}
/> />
</FormGroup> </FormGroup>
@ -256,7 +262,7 @@ class GeneralConfig extends React.Component {
type="number" type="number"
step="1" step="1"
value={this.state.limit_rate} value={this.state.limit_rate}
onChange={limit_rate => this.setState({ limit_rate })} onChange={(_event, value) => this.handleInputChange("limit_rate", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Burst, bytes")}> <FormGroup label={_("Burst, bytes")}>
@ -265,14 +271,14 @@ class GeneralConfig extends React.Component {
type="number" type="number"
step="1" step="1"
value={this.state.limit_burst} value={this.state.limit_burst}
onChange={limit_burst => this.setState({ limit_burst })} onChange={(_event, value) => this.handleInputChange("limit_burst", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Logging Limit Action")}> <FormGroup label={_("Logging Limit Action")}>
<FormSelect <FormSelect
id="limit_action" id="limit_action"
value={this.state.limit_action} value={this.state.limit_action}
onChange={limit_action => this.setState({ limit_action })} onChange={(_event, value) => this.handleInputChange("limit_action", _event, value)}
> >
{[ {[
{ value: "", label: "" }, { value: "", label: "" },
@ -292,23 +298,22 @@ class GeneralConfig extends React.Component {
<TextInput <TextInput
id="file_path" id="file_path"
value={this.state.file_path} value={this.state.file_path}
onChange={file_path => this.setState({ file_path })} onChange={(_event, value) => this.handleInputChange("file_path", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Syslog Facility")}> <FormGroup label={_("Syslog Facility")}>
<TextInput <TextInput
id="syslog_facility" id="syslog_facility"
value={this.state.syslog_facility} value={this.state.syslog_facility}
onChange={syslog_facility => onChange={(_event, value) => this.handleInputChange("syslog_facility", _event, value)}
this.setState({ syslog_facility })}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Syslog Priority")}> <FormGroup label={_("Syslog Priority")}>
<FormSelect <FormSelect
id="syslog_priority" id="syslog_priority"
value={this.state.syslog_priority} value={this.state.syslog_priority}
onChange={syslog_priority => onChange={(_event, value) => this.handleInputChange("syslog_priority", _event, value)}
this.setState({ syslog_priority })}
> >
{[ {[
{ value: "", label: "" }, { value: "", label: "" },
@ -326,8 +331,8 @@ class GeneralConfig extends React.Component {
<FormSelect <FormSelect
id="journal_priority" id="journal_priority"
value={this.state.journal_priority} value={this.state.journal_priority}
onChange={journal_priority => onChange={(_event, value) => this.handleInputChange("journal_priority", _event, value)}
this.setState({ journal_priority })}
> >
{[ {[
{ value: "", label: "" }, { value: "", label: "" },
@ -345,8 +350,7 @@ class GeneralConfig extends React.Component {
<Checkbox <Checkbox
id="journal_augment" id="journal_augment"
isChecked={this.state.journal_augment} isChecked={this.state.journal_augment}
onChange={journal_augment => onChange={(_event, journal_augment) => this.setState({ journal_augment })}
this.setState({ journal_augment })}
label={_("Augment")} label={_("Augment")}
/> />
</FormGroup> </FormGroup>
@ -354,8 +358,7 @@ class GeneralConfig extends React.Component {
<FormSelect <FormSelect
id="writer" id="writer"
value={this.state.writer} value={this.state.writer}
onChange={writer => onChange={(_event, value) => this.handleInputChange("writer", _event, value)}
this.setState({ writer })}
> >
{[ {[
{ value: "", label: "" }, { value: "", label: "" },
@ -385,17 +388,17 @@ class GeneralConfig extends React.Component {
) )
: ( : (
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.small}> <EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
titleText={<>{_("There is no configuration file of tlog present in your system.")}</>}
icon={
<EmptyStateIcon <EmptyStateIcon
icon={ExclamationCircleIcon} icon={ExclamationCircleIcon}
color={global_danger_color_200.value} color={global_danger_color_200.value}
/> />
<Title headingLevel="h4" size="lg"> } headingLevel="h4"
{_("There is no configuration file of tlog present in your system.")} />
</Title> <EmptyStateHeader titleText={<>{_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}</>} headingLevel="h4" />
<Title headingLevel="h4" size="lg">
{_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}
</Title>
<EmptyStateBody> <EmptyStateBody>
{this.state.file_error} {this.state.file_error}
</EmptyStateBody> </EmptyStateBody>
@ -416,6 +419,7 @@ class SssdConfig extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.confSave = this.confSave.bind(this); this.confSave = this.confSave.bind(this);
this.restartSSSD = this.restartSSSD.bind(this); this.restartSSSD = this.restartSSSD.bind(this);
this.file = null; this.file = null;
@ -543,6 +547,12 @@ class SssdConfig extends React.Component {
e.preventDefault(); e.preventDefault();
} }
handleInputChange(name, value) {
const state = {};
state[name] = value;
this.setState(state);
}
render() { render() {
const form = ( const form = (
<Form isHorizontal> <Form isHorizontal>
@ -550,7 +560,7 @@ class SssdConfig extends React.Component {
<FormSelect <FormSelect
id="scope" id="scope"
value={this.state.scope} value={this.state.scope}
onChange={scope => this.setState({ scope })} onChange={(_event, value) => this.handleInputChange("scope", _event, value)}
> >
{[ {[
{ value: "none", label: _("None") }, { value: "none", label: _("None") },
@ -571,14 +581,14 @@ class SssdConfig extends React.Component {
<TextInput <TextInput
id="users" id="users"
value={this.state.users} value={this.state.users}
onChange={users => this.setState({ users })} onChange={(_event, value) => this.handleInputChange("users", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Groups")}> <FormGroup label={_("Groups")}>
<TextInput <TextInput
id="groups" id="groups"
value={this.state.groups} value={this.state.groups}
onChange={groups => this.setState({ groups })} onChange={(_event, value) => this.handleInputChange("groups", _event, value)}
/> />
</FormGroup> </FormGroup>
</>} </>}
@ -588,14 +598,14 @@ class SssdConfig extends React.Component {
<TextInput <TextInput
id="exclude_users" id="exclude_users"
value={this.state.exclude_users} value={this.state.exclude_users}
onChange={exclude_users => this.setState({ exclude_users })} onChange={(_event, value) => this.handleInputChange("exclude_users", _event, value)}
/> />
</FormGroup> </FormGroup>
<FormGroup label={_("Exclude Groups")}> <FormGroup label={_("Exclude Groups")}>
<TextInput <TextInput
id="exclude_groups" id="exclude_groups"
value={this.state.exclude_groups} value={this.state.exclude_groups}
onChange={exclude_groups => this.setState({ exclude_groups })} onChange={(_event, value) => this.handleInputChange("exclude_groups", _event, value)}
/> />
</FormGroup> </FormGroup>
</>} </>}

4
src/player.jsx
View file

@ -692,7 +692,7 @@ class Search extends React.Component {
id="search_rec" id="search_rec"
type="search" type="search"
value={this.state.search} value={this.state.search}
onChange={value => this.handleInputChange("search", value)} onChange={(_event, value) => this.handleInputChange("search", value)}
/> />
<Button <Button
variant="control" variant="control"
@ -1357,7 +1357,7 @@ export class Player extends React.Component {
); );
const visualControls = ( const visualControls = (
<ToolbarGroup variant="icon-button-group" alignment={{ default: 'alignRight' }}> <ToolbarGroup variant="icon-button-group" align={{ default: 'alignRight' }}>
<ToolbarItem> <ToolbarItem>
<Button <Button
variant="plain" variant="plain"

55
src/recordings.jsx
View file

@ -35,20 +35,14 @@ import {
ExpandableSection, ExpandableSection,
Page, PageSection, PageSectionVariants, Page, PageSection, PageSectionVariants,
Spinner, Spinner,
Title,
TextInput, TextInput,
Toolbar, Toolbar,
ToolbarContent, ToolbarContent,
ToolbarItem, ToolbarItem,
ToolbarGroup, ToolbarGroup, EmptyStateHeader,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { import { sortable, SortByDirection } from '@patternfly/react-table';
sortable, import { TableHeader, TableBody, Table as TableDeprecated } from '@patternfly/react-table/deprecated';
SortByDirection,
Table,
TableHeader,
TableBody
} from "@patternfly/react-table";
import { import {
CogIcon, CogIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
@ -321,11 +315,9 @@ class Logs extends React.Component {
if (r == null) { if (r == null) {
return ( return (
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.small}> <EmptyState variant={EmptyStateVariant.sm}>
<Spinner /> <Spinner />
<Title headingLevel="h2" size="lg"> <EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
{_("Loading...")}
</Title>
</EmptyState> </EmptyState>
</Bullseye> </Bullseye>
); );
@ -410,11 +402,9 @@ class Recording extends React.Component {
if (r == null) { if (r == null) {
return ( return (
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.small}> <EmptyState variant={EmptyStateVariant.sm}>
<Spinner /> <Spinner />
<Title headingLevel="h2" size="lg"> <EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
{_("Loading...")}
</Title>
</EmptyState> </EmptyState>
</Bullseye> </Bullseye>
); );
@ -527,7 +517,7 @@ class RecordingList extends React.Component {
return ( return (
<> <>
<Table <TableDeprecated
aria-label={_("Recordings")} aria-label={_("Recordings")}
cells={columnTitles} cells={columnTitles}
rows={rows} rows={rows}
@ -536,13 +526,10 @@ class RecordingList extends React.Component {
> >
<TableHeader /> <TableHeader />
<TableBody onRowClick={this.handleRowClick} /> <TableBody onRowClick={this.handleRowClick} />
</Table> </TableDeprecated>
{!rows.length && {!rows.length &&
<EmptyState variant={EmptyStateVariant.small}> <EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateIcon icon={SearchIcon} /> <EmptyStateHeader titleText={<>{_("No recordings found")}</>} icon={<EmptyStateIcon icon={SearchIcon} />} headingLevel="h2" />
<Title headingLevel="h2" size="lg">
{_("No recordings found")}
</Title>
<EmptyStateBody> <EmptyStateBody>
{_("No recordings matched the filter criteria.")} {_("No recordings matched the filter criteria.")}
</EmptyStateBody> </EmptyStateBody>
@ -847,14 +834,16 @@ export default class View extends React.Component {
} else if (this.state.error_tlog_user === true) { } else if (this.state.error_tlog_user === true) {
return ( return (
<Bullseye> <Bullseye>
<EmptyState variant={EmptyStateVariant.small}> <EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
titleText={<>{_("Error")}</>}
icon={
<EmptyStateIcon <EmptyStateIcon
icon={ExclamationCircleIcon} icon={ExclamationCircleIcon}
color={global_danger_color_200.value} color={global_danger_color_200.value}
/> />
<Title headingLevel="h2" size="lg"> } headingLevel="h2"
{_("Error")} />
</Title>
<EmptyStateBody> <EmptyStateBody>
{_("Unable to retrieve tlog user from system.")} {_("Unable to retrieve tlog user from system.")}
</EmptyStateBody> </EmptyStateBody>
@ -872,7 +861,7 @@ export default class View extends React.Component {
placeholder={_("Filter since")} placeholder={_("Filter since")}
value={this.state.date_since} value={this.state.date_since}
type="search" type="search"
onChange={value => this.handleInputChange("date_since", value)} onChange={(_event, value) => this.handleInputChange("date_since", _event, value)}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> </ToolbarGroup>
@ -884,7 +873,7 @@ export default class View extends React.Component {
placeholder={_("Filter until")} placeholder={_("Filter until")}
value={this.state.date_until} value={this.state.date_until}
type="search" type="search"
onChange={value => this.handleInputChange("date_until", value)} onChange={(_event, value) => this.handleInputChange("date_until", _event, value)}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> </ToolbarGroup>
@ -896,7 +885,7 @@ export default class View extends React.Component {
placeholder={_("Filter by content")} placeholder={_("Filter by content")}
value={this.state.search} value={this.state.search}
type="search" type="search"
onChange={value => this.handleInputChange("search", value)} onChange={(_event, value) => this.handleInputChange("search", _event, value)}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> </ToolbarGroup>
@ -908,7 +897,7 @@ export default class View extends React.Component {
placeholder={_("Filter by username")} placeholder={_("Filter by username")}
value={this.state.username} value={this.state.username}
type="search" type="search"
onChange={value => this.handleInputChange("username", value)} onChange={(_event, value) => this.handleInputChange("username", _event, value)}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> </ToolbarGroup>
@ -921,7 +910,7 @@ export default class View extends React.Component {
placeholder={_("Filter by hostname")} placeholder={_("Filter by hostname")}
value={this.state.hostname} value={this.state.hostname}
type="search" type="search"
onChange={value => this.handleInputChange("hostname", value)} onChange={(_event, value) => this.handleInputChange("hostname", _event, value)}
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarGroup>} </ToolbarGroup>}