Upgrade to PatternFly 5 Alpha
This commit is contained in:
Justin Stephenson
parent
4b0bfc7648
commit
12ab19bb67
4 changed files with 75 additions and 75 deletions
|
|
@ -47,7 +47,8 @@
|
|||
"@patternfly/react-core": "5.0.0-alpha.72",
|
||||
"@patternfly/react-styles": "5.0.0-alpha.7",
|
||||
"@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",
|
||||
"comment-json": "^4.2.3",
|
||||
"date-fns": "^2.29.3",
|
||||
|
|
|
|||
|
|
@ -36,10 +36,9 @@ import {
|
|||
Bullseye,
|
||||
EmptyState,
|
||||
EmptyStateIcon,
|
||||
Title,
|
||||
EmptyStateBody,
|
||||
EmptyStateVariant,
|
||||
Page, PageSection,
|
||||
Page, PageSection, EmptyStateHeader,
|
||||
} from "@patternfly/react-core";
|
||||
import { ExclamationCircleIcon } from "@patternfly/react-icons";
|
||||
import { global_danger_color_200 } from "@patternfly/react-tokens";
|
||||
|
|
@ -53,6 +52,7 @@ class GeneralConfig extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.setConfig = this.setConfig.bind(this);
|
||||
this.fileReadFailed = this.fileReadFailed.bind(this);
|
||||
this.readConfig = this.readConfig.bind(this);
|
||||
|
|
@ -191,6 +191,12 @@ class GeneralConfig extends React.Component {
|
|||
this.readConfig();
|
||||
}
|
||||
|
||||
handleInputChange(name, value) {
|
||||
const state = {};
|
||||
state[name] = value;
|
||||
this.setState(state);
|
||||
}
|
||||
|
||||
render() {
|
||||
const form =
|
||||
(this.state.config_loaded === false && this.state.file_error === false)
|
||||
|
|
@ -202,14 +208,14 @@ class GeneralConfig extends React.Component {
|
|||
<TextInput
|
||||
id="shell"
|
||||
value={this.state.shell}
|
||||
onChange={shell => this.setState({ shell })}
|
||||
onChange={(_event, value) => this.handleInputChange("shell", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Notice")}>
|
||||
<TextInput
|
||||
id="notice"
|
||||
value={this.state.notice}
|
||||
onChange={notice => this.setState({ notice })}
|
||||
onChange={(_event, value) => this.handleInputChange("notice", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Latency")}>
|
||||
|
|
@ -218,7 +224,7 @@ class GeneralConfig extends React.Component {
|
|||
type="number"
|
||||
step="1"
|
||||
value={this.state.latency}
|
||||
onChange={latency => this.setState({ latency })}
|
||||
onChange={(_event, value) => this.handleInputChange("latency", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Payload Size, bytes")}>
|
||||
|
|
@ -227,26 +233,26 @@ class GeneralConfig extends React.Component {
|
|||
type="number"
|
||||
step="1"
|
||||
value={this.state.payload}
|
||||
onChange={payload => this.setState({ payload })}
|
||||
onChange={(_event, value) => this.handleInputChange("payload", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Logging")}>
|
||||
<Checkbox
|
||||
id="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")}
|
||||
/>
|
||||
<Checkbox
|
||||
id="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")}
|
||||
/>
|
||||
<Checkbox
|
||||
id="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")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
@ -256,7 +262,7 @@ class GeneralConfig extends React.Component {
|
|||
type="number"
|
||||
step="1"
|
||||
value={this.state.limit_rate}
|
||||
onChange={limit_rate => this.setState({ limit_rate })}
|
||||
onChange={(_event, value) => this.handleInputChange("limit_rate", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Burst, bytes")}>
|
||||
|
|
@ -265,14 +271,14 @@ class GeneralConfig extends React.Component {
|
|||
type="number"
|
||||
step="1"
|
||||
value={this.state.limit_burst}
|
||||
onChange={limit_burst => this.setState({ limit_burst })}
|
||||
onChange={(_event, value) => this.handleInputChange("limit_burst", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Logging Limit Action")}>
|
||||
<FormSelect
|
||||
id="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: "" },
|
||||
|
|
@ -292,23 +298,22 @@ class GeneralConfig extends React.Component {
|
|||
<TextInput
|
||||
id="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 label={_("Syslog Facility")}>
|
||||
<TextInput
|
||||
id="syslog_facility"
|
||||
value={this.state.syslog_facility}
|
||||
onChange={syslog_facility =>
|
||||
this.setState({ syslog_facility })}
|
||||
onChange={(_event, value) => this.handleInputChange("syslog_facility", _event, value)}
|
||||
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Syslog Priority")}>
|
||||
<FormSelect
|
||||
id="syslog_priority"
|
||||
value={this.state.syslog_priority}
|
||||
onChange={syslog_priority =>
|
||||
this.setState({ syslog_priority })}
|
||||
onChange={(_event, value) => this.handleInputChange("syslog_priority", _event, value)}
|
||||
>
|
||||
{[
|
||||
{ value: "", label: "" },
|
||||
|
|
@ -326,8 +331,8 @@ class GeneralConfig extends React.Component {
|
|||
<FormSelect
|
||||
id="journal_priority"
|
||||
value={this.state.journal_priority}
|
||||
onChange={journal_priority =>
|
||||
this.setState({ journal_priority })}
|
||||
onChange={(_event, value) => this.handleInputChange("journal_priority", _event, value)}
|
||||
|
||||
>
|
||||
{[
|
||||
{ value: "", label: "" },
|
||||
|
|
@ -345,8 +350,7 @@ class GeneralConfig extends React.Component {
|
|||
<Checkbox
|
||||
id="journal_augment"
|
||||
isChecked={this.state.journal_augment}
|
||||
onChange={journal_augment =>
|
||||
this.setState({ journal_augment })}
|
||||
onChange={(_event, journal_augment) => this.setState({ journal_augment })}
|
||||
label={_("Augment")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
@ -354,8 +358,7 @@ class GeneralConfig extends React.Component {
|
|||
<FormSelect
|
||||
id="writer"
|
||||
value={this.state.writer}
|
||||
onChange={writer =>
|
||||
this.setState({ writer })}
|
||||
onChange={(_event, value) => this.handleInputChange("writer", _event, value)}
|
||||
>
|
||||
{[
|
||||
{ value: "", label: "" },
|
||||
|
|
@ -385,17 +388,17 @@ class GeneralConfig extends React.Component {
|
|||
)
|
||||
: (
|
||||
<Bullseye>
|
||||
<EmptyState variant={EmptyStateVariant.small}>
|
||||
<EmptyStateIcon
|
||||
<EmptyState variant={EmptyStateVariant.sm}>
|
||||
<EmptyStateHeader
|
||||
titleText={<>{_("There is no configuration file of tlog present in your system.")}</>}
|
||||
icon={
|
||||
<EmptyStateIcon
|
||||
icon={ExclamationCircleIcon}
|
||||
color={global_danger_color_200.value}
|
||||
/>
|
||||
} headingLevel="h4"
|
||||
/>
|
||||
<Title headingLevel="h4" size="lg">
|
||||
{_("There is no configuration file of tlog present in your system.")}
|
||||
</Title>
|
||||
<Title headingLevel="h4" size="lg">
|
||||
{_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}
|
||||
</Title>
|
||||
<EmptyStateHeader titleText={<>{_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}</>} headingLevel="h4" />
|
||||
<EmptyStateBody>
|
||||
{this.state.file_error}
|
||||
</EmptyStateBody>
|
||||
|
|
@ -416,6 +419,7 @@ class SssdConfig extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.confSave = this.confSave.bind(this);
|
||||
this.restartSSSD = this.restartSSSD.bind(this);
|
||||
this.file = null;
|
||||
|
|
@ -543,6 +547,12 @@ class SssdConfig extends React.Component {
|
|||
e.preventDefault();
|
||||
}
|
||||
|
||||
handleInputChange(name, value) {
|
||||
const state = {};
|
||||
state[name] = value;
|
||||
this.setState(state);
|
||||
}
|
||||
|
||||
render() {
|
||||
const form = (
|
||||
<Form isHorizontal>
|
||||
|
|
@ -550,7 +560,7 @@ class SssdConfig extends React.Component {
|
|||
<FormSelect
|
||||
id="scope"
|
||||
value={this.state.scope}
|
||||
onChange={scope => this.setState({ scope })}
|
||||
onChange={(_event, value) => this.handleInputChange("scope", _event, value)}
|
||||
>
|
||||
{[
|
||||
{ value: "none", label: _("None") },
|
||||
|
|
@ -571,14 +581,14 @@ class SssdConfig extends React.Component {
|
|||
<TextInput
|
||||
id="users"
|
||||
value={this.state.users}
|
||||
onChange={users => this.setState({ users })}
|
||||
onChange={(_event, value) => this.handleInputChange("users", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup label={_("Groups")}>
|
||||
<TextInput
|
||||
id="groups"
|
||||
value={this.state.groups}
|
||||
onChange={groups => this.setState({ groups })}
|
||||
onChange={(_event, value) => this.handleInputChange("groups", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</>}
|
||||
|
|
@ -588,14 +598,14 @@ class SssdConfig extends React.Component {
|
|||
<TextInput
|
||||
id="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 label={_("Exclude Groups")}>
|
||||
<TextInput
|
||||
id="exclude_groups"
|
||||
value={this.state.exclude_groups}
|
||||
onChange={exclude_groups => this.setState({ exclude_groups })}
|
||||
onChange={(_event, value) => this.handleInputChange("exclude_groups", _event, value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</>}
|
||||
|
|
|
|||
|
|
@ -692,7 +692,7 @@ class Search extends React.Component {
|
|||
id="search_rec"
|
||||
type="search"
|
||||
value={this.state.search}
|
||||
onChange={value => this.handleInputChange("search", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("search", value)}
|
||||
/>
|
||||
<Button
|
||||
variant="control"
|
||||
|
|
@ -1357,7 +1357,7 @@ export class Player extends React.Component {
|
|||
);
|
||||
|
||||
const visualControls = (
|
||||
<ToolbarGroup variant="icon-button-group" alignment={{ default: 'alignRight' }}>
|
||||
<ToolbarGroup variant="icon-button-group" align={{ default: 'alignRight' }}>
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
variant="plain"
|
||||
|
|
|
|||
|
|
@ -35,20 +35,14 @@ import {
|
|||
ExpandableSection,
|
||||
Page, PageSection, PageSectionVariants,
|
||||
Spinner,
|
||||
Title,
|
||||
TextInput,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarItem,
|
||||
ToolbarGroup,
|
||||
ToolbarGroup, EmptyStateHeader,
|
||||
} from "@patternfly/react-core";
|
||||
import {
|
||||
sortable,
|
||||
SortByDirection,
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody
|
||||
} from "@patternfly/react-table";
|
||||
import { sortable, SortByDirection } from '@patternfly/react-table';
|
||||
import { TableHeader, TableBody, Table as TableDeprecated } from '@patternfly/react-table/deprecated';
|
||||
import {
|
||||
CogIcon,
|
||||
ExclamationCircleIcon,
|
||||
|
|
@ -321,11 +315,9 @@ class Logs extends React.Component {
|
|||
if (r == null) {
|
||||
return (
|
||||
<Bullseye>
|
||||
<EmptyState variant={EmptyStateVariant.small}>
|
||||
<EmptyState variant={EmptyStateVariant.sm}>
|
||||
<Spinner />
|
||||
<Title headingLevel="h2" size="lg">
|
||||
{_("Loading...")}
|
||||
</Title>
|
||||
<EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
|
||||
</EmptyState>
|
||||
</Bullseye>
|
||||
);
|
||||
|
|
@ -410,11 +402,9 @@ class Recording extends React.Component {
|
|||
if (r == null) {
|
||||
return (
|
||||
<Bullseye>
|
||||
<EmptyState variant={EmptyStateVariant.small}>
|
||||
<EmptyState variant={EmptyStateVariant.sm}>
|
||||
<Spinner />
|
||||
<Title headingLevel="h2" size="lg">
|
||||
{_("Loading...")}
|
||||
</Title>
|
||||
<EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
|
||||
</EmptyState>
|
||||
</Bullseye>
|
||||
);
|
||||
|
|
@ -527,7 +517,7 @@ class RecordingList extends React.Component {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
<TableDeprecated
|
||||
aria-label={_("Recordings")}
|
||||
cells={columnTitles}
|
||||
rows={rows}
|
||||
|
|
@ -536,13 +526,10 @@ class RecordingList extends React.Component {
|
|||
>
|
||||
<TableHeader />
|
||||
<TableBody onRowClick={this.handleRowClick} />
|
||||
</Table>
|
||||
</TableDeprecated>
|
||||
{!rows.length &&
|
||||
<EmptyState variant={EmptyStateVariant.small}>
|
||||
<EmptyStateIcon icon={SearchIcon} />
|
||||
<Title headingLevel="h2" size="lg">
|
||||
{_("No recordings found")}
|
||||
</Title>
|
||||
<EmptyState variant={EmptyStateVariant.sm}>
|
||||
<EmptyStateHeader titleText={<>{_("No recordings found")}</>} icon={<EmptyStateIcon icon={SearchIcon} />} headingLevel="h2" />
|
||||
<EmptyStateBody>
|
||||
{_("No recordings matched the filter criteria.")}
|
||||
</EmptyStateBody>
|
||||
|
|
@ -847,14 +834,16 @@ export default class View extends React.Component {
|
|||
} else if (this.state.error_tlog_user === true) {
|
||||
return (
|
||||
<Bullseye>
|
||||
<EmptyState variant={EmptyStateVariant.small}>
|
||||
<EmptyStateIcon
|
||||
icon={ExclamationCircleIcon}
|
||||
color={global_danger_color_200.value}
|
||||
<EmptyState variant={EmptyStateVariant.sm}>
|
||||
<EmptyStateHeader
|
||||
titleText={<>{_("Error")}</>}
|
||||
icon={
|
||||
<EmptyStateIcon
|
||||
icon={ExclamationCircleIcon}
|
||||
color={global_danger_color_200.value}
|
||||
/>
|
||||
} headingLevel="h2"
|
||||
/>
|
||||
<Title headingLevel="h2" size="lg">
|
||||
{_("Error")}
|
||||
</Title>
|
||||
<EmptyStateBody>
|
||||
{_("Unable to retrieve tlog user from system.")}
|
||||
</EmptyStateBody>
|
||||
|
|
@ -872,7 +861,7 @@ export default class View extends React.Component {
|
|||
placeholder={_("Filter since")}
|
||||
value={this.state.date_since}
|
||||
type="search"
|
||||
onChange={value => this.handleInputChange("date_since", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("date_since", _event, value)}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
|
|
@ -884,7 +873,7 @@ export default class View extends React.Component {
|
|||
placeholder={_("Filter until")}
|
||||
value={this.state.date_until}
|
||||
type="search"
|
||||
onChange={value => this.handleInputChange("date_until", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("date_until", _event, value)}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
|
|
@ -896,7 +885,7 @@ export default class View extends React.Component {
|
|||
placeholder={_("Filter by content")}
|
||||
value={this.state.search}
|
||||
type="search"
|
||||
onChange={value => this.handleInputChange("search", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("search", _event, value)}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
|
|
@ -908,7 +897,7 @@ export default class View extends React.Component {
|
|||
placeholder={_("Filter by username")}
|
||||
value={this.state.username}
|
||||
type="search"
|
||||
onChange={value => this.handleInputChange("username", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("username", _event, value)}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
|
|
@ -921,7 +910,7 @@ export default class View extends React.Component {
|
|||
placeholder={_("Filter by hostname")}
|
||||
value={this.state.hostname}
|
||||
type="search"
|
||||
onChange={value => this.handleInputChange("hostname", value)}
|
||||
onChange={(_event, value) => this.handleInputChange("hostname", _event, value)}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue