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

Updated UI to use patternfly

Browse source 
* Removed unused css files
* Converted all UI elements to patternfly 4
* Implemented config page under same app
* Replaced slider with patternfly `Progress` component
This commit is contained in:
Benjamin Graham 2020-07-23 22:08:12 -04:00 • committed by Justin Stephenson
parent 46ad9834b3
commit aa63c3871c
21 changed files with 1612 additions and 2381 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app.jsx
View file

@ -20,28 +20,24 @@
import cockpit from 'cockpit'; import cockpit from 'cockpit';
import React from 'react'; import React from 'react';
import './app.scss'; import './app.scss';
import View from "./recordings.jsx";
const _ = cockpit.gettext; const _ = cockpit.gettext;
export class Application extends React.Component { export class Application extends React.Component {
constructor() { constructor() {
super(); super();
this.state = { 'hostname': _("Unknown") }; this.state = { hostname: _("Unknown") };
cockpit.file('/etc/hostname').read() cockpit.file('/etc/hostname').read()
.done((content) => { .done((content) => {
this.setState({ 'hostname': content.trim() }); this.setState({ hostname: content.trim() });
}); });
} }
render() { render() {
return ( return (
<div className="container-fluid"> <View />
<h2>Starter Kit</h2>
<p>
{ cockpit.format(_("Running on $0"), this.state.hostname) }
</p>
</div>
); );
} }
} }

3
src/app.scss Normal file
View file

@ -0,0 +1,3 @@
p {
font-weight: bold;
}

37
src/config.html
View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
<!--
This file is part of Cockpit.
Copyright (C) 2017 Red Hat, Inc.
Cockpit is free software; you can redistribute it and/or modify it
under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation; either version 2.1 of the License, or
(at your option) any later version.
Cockpit is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<title translate>Journal</title>
<meta charset="utf-8">
<link href="../base1/patternfly.css" rel="stylesheet">
<link href="table.css" rel="stylesheet">
<link href="recordings.css" rel="stylesheet">
<script type="text/javascript" src="../base1/cockpit.js"></script>
<script src="../*/po.js"></script>
</head>
<body>
<div id="view"></div>
<script type="text/javascript" src="config.js"></script>
</body>
</html>

605
src/config.jsx
View file

@ -18,16 +18,38 @@
*/ */
"use strict"; "use strict";
let cockpit = require("cockpit"); import React from "react";
let React = require("react"); import {
let ReactDOM = require("react-dom"); Button,
let json = require('comment-json'); Form,
let ini = require('ini'); FormGroup,
FormSelect,
FormSelectOption,
TextInput,
ActionGroup,
Spinner,
Card,
CardTitle,
CardBody,
Checkbox,
Bullseye,
EmptyState,
EmptyStateIcon,
Title,
EmptyStateBody,
EmptyStateVariant
} from "@patternfly/react-core";
import { AngleLeftIcon, ExclamationCircleIcon } from "@patternfly/react-icons";
import { global_danger_color_200 } from "@patternfly/react-tokens";
class Config extends React.Component { const json = require('comment-json');
const ini = require('ini');
const cockpit = require('cockpit');
const _ = cockpit.gettext;
class GeneralConfig extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.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);
@ -37,7 +59,7 @@ class Config extends React.Component {
this.state = { this.state = {
config_loaded: false, config_loaded: false,
file_error: false, file_error: false,
submitting: "none", submitting: false,
shell: "", shell: "",
notice: "", notice: "",
latency: "", latency: "",
@ -57,17 +79,9 @@ class Config extends React.Component {
}; };
} }
handleInputChange(e) {
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
const name = e.target.name;
const state = {};
state[name] = value;
this.setState(state);
}
handleSubmit(event) { handleSubmit(event) {
this.setState({submitting:"block"}); this.setState({ submitting: true });
let config = { const config = {
shell: this.state.shell, shell: this.state.shell,
notice: this.state.notice, notice: this.state.notice,
latency: parseInt(this.state.latency), latency: parseInt(this.state.latency),
@ -96,7 +110,7 @@ class Config extends React.Component {
writer: this.state.writer writer: this.state.writer
}; };
this.file.replace(config).done(() => { this.file.replace(config).done(() => {
this.setState({submitting:"none"}); this.setState({ submitting: false });
}) })
.fail((error) => { .fail((error) => {
console.log(error); console.log(error);
@ -111,12 +125,12 @@ class Config extends React.Component {
var toReturn = {}; var toReturn = {};
for (var i in ob) { for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue; if (!Object.prototype.hasOwnProperty.call(ob, i)) continue;
if ((typeof ob[i]) == 'object') { if ((typeof ob[i]) == 'object') {
var flatObject = flattenObject(ob[i]); var flatObject = flattenObject(ob[i]);
for (var x in flatObject) { for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue; if (!Object.prototype.hasOwnProperty.call(flatObject, x)) continue;
toReturn[i + '_' + x] = flatObject[x]; toReturn[i + '_' + x] = flatObject[x];
} }
@ -126,13 +140,13 @@ class Config extends React.Component {
} }
return toReturn; return toReturn;
}; };
let state = flattenObject(data); const state = flattenObject(data);
state.config_loaded = true; state.config_loaded = true;
this.setState(state); this.setState(state);
} }
getConfig() { getConfig() {
let proc = cockpit.spawn(["tlog-rec-session", "--configuration"]); const proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
proc.stream((data) => { proc.stream((data) => {
this.setConfig(json.parse(data, null, true)); this.setConfig(json.parse(data, null, true));
@ -146,15 +160,15 @@ class Config extends React.Component {
} }
readConfig() { readConfig() {
let parseFunc = function(data) { const parseFunc = function(data) {
return json.parse(data, null, true); return json.parse(data, null, true);
}; };
let stringifyFunc = function(data) { const stringifyFunc = function(data) {
return json.stringify(data, null, true); return json.stringify(data, null, true);
}; };
// needed for cockpit.file usage // needed for cockpit.file usage
let syntax_object = { const syntax_object = {
parse: parseFunc, parse: parseFunc,
stringify: stringifyFunc, stringify: stringifyFunc,
}; };
@ -163,22 +177,11 @@ class Config extends React.Component {
syntax: syntax_object, syntax: syntax_object,
superuser: true, superuser: true,
}); });
/*
let promise = this.file.read();
promise.done((data) => {
if (data === null) {
this.fileReadFailed();
}
}).fail((data) => {
this.fileReadFailed(data);
});
*/
} }
fileReadFailed(reason) { fileReadFailed(reason) {
console.log(reason); console.log(reason);
this.setState({file_error: reason}); this.setState({ file_error: reason });
} }
componentDidMount() { componentDidMount() {
@ -187,160 +190,201 @@ class Config extends React.Component {
} }
render() { render() {
if (this.state.config_loaded === false && this.state.file_error === false) { const form =
return ( (this.state.config_loaded === false && this.state.file_error === false)
<div>Loading</div> ? <Spinner />
); : (this.state.config_loaded === true && this.state.file_error === false)
} else if (this.state.config_loaded === true && this.state.file_error === false) { ? (
return ( <Form isHorizontal>
<form onSubmit={this.handleSubmit}> <FormGroup label={_("Shell")}>
<table className="form-table-ct col-sm-3"> <TextInput
<tbody> id="shell"
<tr> value={this.state.shell}
<td className="top"><label htmlFor="shell" className="control-label">Shell</label></td> onChange={shell => this.setState({ shell })} />
<td> </FormGroup>
<input type="text" id="shell" name="shell" value={this.state.shell} <FormGroup label={_("Notice")}>
className="form-control" onChange={this.handleInputChange} /> <TextInput
</td> id="notice"
</tr> value={this.state.notice}
<tr> onChange={notice => this.setState({ notice })} />
<td className="top"><label htmlFor="notice" className="control-label">Notice</label></td> </FormGroup>
<td> <FormGroup label={_("Latency")}>
<input type="text" id="notice" name="notice" value={this.state.notice} <TextInput
className="form-control" onChange={this.handleInputChange} /> id="latency"
</td> type="number"
</tr> step="1"
<tr> value={this.state.latency}
<td className="top"><label htmlFor="latency" className="control-label">Latency</label></td> onChange={latency => this.setState({ latency })} />
<td> </FormGroup>
<input type="number" step="1" id="latency" name="latency" value={this.state.latency} <FormGroup label={_("Payload Size, bytes")}>
className="form-control" onChange={this.handleInputChange} /> <TextInput
</td> id="payload"
</tr> type="number"
<tr> step="1"
<td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></td> value={this.state.payload}
<td> onChange={payload => this.setState({ payload })} />
<input type="number" step="1" id="payload" name="payload" value={this.state.payload} </FormGroup>
className="form-control" onChange={this.handleInputChange} /> <FormGroup label={_("Logging")}>
</td> <Checkbox
</tr> id="log_input"
<tr> isChecked={this.state.log_input}
<td className="top"><label htmlFor="log_input" className="control-label">Log User's Input</label></td> onChange={log_input => this.setState({ log_input })}
<td> label={_("User's Input")} />
<input type="checkbox" id="log_input" name="log_input" defaultChecked={this.state.log_input} onChange={this.handleInputChange} /> <Checkbox
</td> id="log_output"
</tr> isChecked={this.state.log_output}
<tr> onChange={log_output => this.setState({ log_output })}
<td className="top"><label htmlFor="log_output" className="control-label">Log User's Output</label></td> label={_("User's Output")} />
<td> <Checkbox
<input type="checkbox" id="log_output" name="log_output" defaultChecked={this.state.log_output} onChange={this.handleInputChange} /> id="log_window"
</td> isChecked={this.state.log_window}
</tr> onChange={log_window => this.setState({ log_window })}
<tr> label={_("Window Resize")} />
<td className="top"><label htmlFor="log_window" className="control-label">Log Window Resize</label></td> </FormGroup>
<td> <FormGroup label={_("Limit Rate, bytes/sec")}>
<input type="checkbox" id="log_window" name="log_window" defaultChecked={this.state.log_window} onChange={this.handleInputChange} /> <TextInput
</td> id="limit_rate"
</tr> type="number"
step="1"
value={this.state.limit_rate}
onChange={limit_rate => this.setState({ limit_rate })} />
</FormGroup>
<FormGroup label={_("Burst, bytes")}>
<TextInput
id="limit_burst"
type="number"
step="1"
value={this.state.limit_burst}
onChange={limit_burst => this.setState({ limit_burst })} />
</FormGroup>
<FormGroup label={_("Logging Limit Action")}>
<FormSelect
id="limit_action"
value={this.state.limit_action}
onChange={limit_action => this.setState({ limit_action })}>
{[
{ value: "", label: "" },
{ value: "pass", label: _("Pass") },
{ value: "delay", label: _("Delay") },
{ value: "drop", label: _("Drop") }
].map((option, index) =>
<FormSelectOption
key={index}
value={option.value}
label={option.label} />
)}
</FormSelect>
</FormGroup>
<FormGroup label={_("File Path")}>
<TextInput
id="file_path"
value={this.state.file_path}
onChange={file_path => this.setState({ file_path })} />
</FormGroup>
<FormGroup label={_("Syslog Facility")}>
<TextInput
id="syslog_facility"
value={this.state.syslog_facility}
onChange={syslog_facility =>
this.setState({ syslog_facility })} />
</FormGroup>
<FormGroup label={_("Syslog Priority")}>
<FormSelect
id="syslog_priority"
value={this.state.syslog_priority}
onChange={syslog_priority =>
this.setState({ syslog_priority })}>
{[
{ value: "", label: "" },
{ value: "info", label: _("Info") },
].map((option, index) =>
<FormSelectOption
key={index}
value={option.value}
label={option.label} />
)}
</FormSelect>
</FormGroup>
<FormGroup label={_("Journal Priority")}>
<FormSelect
id="journal_priority"
value={this.state.journal_priority}
onChange={journal_priority =>
this.setState({ journal_priority })}>
{[
{ value: "", label: "" },
{ value: "info", label: _("Info") },
].map((option, index) =>
<FormSelectOption
key={index}
value={option.value}
label={option.label} />
)}
</FormSelect>
</FormGroup>
<FormGroup>
<Checkbox
id="journal_augment"
isChecked={this.state.journal_augment}
onChange={journal_augment =>
this.setState({ journal_augment })}
label={_("Augment")} />
</FormGroup>
<FormGroup label={_("Writer")}>
<FormSelect
id="writer"
value={this.state.writer}
onChange={writer =>
this.setState({ writer })}>
{[
{ value: "", label: "" },
{ value: "journal", label: _("Journal") },
{ value: "syslog", label: _("Syslog") },
{ value: "file", label: _("File") },
].map((option, index) =>
<FormSelectOption
key={index}
value={option.value}
label={option.label} />
)}
</FormSelect>
</FormGroup>
<ActionGroup>
<Button
id="btn-save-tlog-conf"
variant="primary"
onClick={this.handleSubmit}>
{_("Save")}
</Button>
{this.state.submitting === true && <Spinner size="lg" />}
</ActionGroup>
</Form>
)
: (
<Bullseye>
<EmptyState variant={EmptyStateVariant.small}>
<EmptyStateIcon
icon={ExclamationCircleIcon}
color={global_danger_color_200.value} />
<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>
<EmptyStateBody>
{this.state.file_error}
</EmptyStateBody>
</EmptyState>
</Bullseye>
);
<tr> return (
<td className="top"><label htmlFor="limit_rate" className="control-label">Limit Rate, bytes/sec</label></td> <Card>
<td> <CardTitle>General Config</CardTitle>
<input type="number" step="1" id="limit_rate" name="limit_rate" value={this.state.limit_rate} <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
className="form-control" onChange={this.handleInputChange} /> </Card>
</td> );
</tr>
<tr>
<td className="top"><label htmlFor="limit_burst" className="control-label">Burst, bytes</label></td>
<td>
<input type="number" step="1" id="limit_burst" name="limit_burst" value={this.state.limit_burst}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="limit_action" className="control-label">Logging Limit Action</label></td>
<td>
<select name="limit_action" id="limit_action" onChange={this.handleInputChange} value={this.state.limit_action} className="form-control">
<option value="" />
<option value="pass">Pass</option>
<option value="delay">Delay</option>
<option value="drop">Drop</option>
</select>
</td>
</tr>
<tr>
<td className="top"><label htmlFor="file_path" className="control-label">File Path</label></td>
<td>
<input type="text" id="file_path" name="file_path" defaultChecked={this.state.file_path}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="syslog_facility" className="control-label">Syslog Facility</label></td>
<td>
<input type="text" id="syslog_facility" name="syslog_facility" value={this.state.syslog_facility}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="syslog_priority" className="control-label">Syslog Priority</label></td>
<td>
<select name="syslog_priority" id="syslog_priority" onChange={this.handleInputChange} value={this.state.syslog_priority} className="form-control">
<option value="" />
<option value="info">Info</option>
</select>
</td>
</tr>
<tr>
<td className="top"><label htmlFor="journal_priority" className="control-label">Journal Priority</label></td>
<td>
<select name="journal_priority" id="journal_priority" onChange={this.handleInputChange} value={this.state.journal_priority} className="form-control">
<option value="" />
<option value="info">Info</option>
</select>
</td>
</tr>
<tr>
<td className="top"><label htmlFor="journal_augment" className="control-label">Journal Augment</label></td>
<td>
<input type="checkbox" id="journal_augment" name="journal_augment" defaultChecked={this.state.journal_augment} onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="writer" className="control-label">Writer</label></td>
<td>
<select name="writer" id="writer" onChange={this.handleInputChange} value={this.state.writer} className="form-control">
<option value="" />
<option value="journal">Journal</option>
<option value="syslog">Syslog</option>
<option value="file">File</option>
</select>
</td>
</tr>
<tr>
<td className="top">
<button id="btn-save-tlog-conf" className="btn btn-default" type="submit">Save</button>
</td>
<td>
<span style={{display: this.state.submitting}}>Saving...</span>
</td>
</tr>
</tbody>
</table>
</form>
);
} else {
return (
<div className="alert alert-danger">
<span className="pficon pficon-error-circle-o" />
<p><strong>There is no configuration file of tlog present in your system.</strong></p>
<p>Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.</p>
<p><strong>{this.state.file_error}</strong></p>
</div>
);
}
} }
} }
@ -348,7 +392,6 @@ 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.setConfig = this.setConfig.bind(this); this.setConfig = this.setConfig.bind(this);
this.confSave = this.confSave.bind(this); this.confSave = this.confSave.bind(this);
this.file = null; this.file = null;
@ -356,16 +399,20 @@ class SssdConfig extends React.Component {
scope: "", scope: "",
users: "", users: "",
groups: "", groups: "",
submitting: "none", submitting: false,
}; };
} }
confSave(obj) { confSave(obj) {
this.setState({submitting:"block"}); this.setState({ submitting: true });
this.file.replace(obj).done(() => { this.file.replace(obj).done(() => {
cockpit.spawn(["chmod", "600", "/etc/sssd/conf.d/sssd-session-recording.conf"], { "superuser": "require" }).done(() => { cockpit.spawn(
cockpit.spawn(["systemctl", "restart", "sssd"], { "superuser": "require" }).done(() => { ["chmod", "600", "/etc/sssd/conf.d/sssd-session-recording.conf"],
this.setState({submitting:"none"}); { superuser: "require" }).done(() => {
cockpit.spawn(
["systemctl", "restart", "sssd"],
{ superuser: "require" }).done(() => {
this.setState({ submitting: false });
}) })
.fail((data) => console.log(data)); .fail((data) => console.log(data));
}) })
@ -373,14 +420,6 @@ class SssdConfig extends React.Component {
}); });
} }
handleInputChange(e) {
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
const name = e.target.name;
const state = {};
state[name] = value;
this.setState(state);
}
setConfig(data) { setConfig(data) {
if (data === null) { if (data === null) {
const obj = {}; const obj = {};
@ -388,13 +427,13 @@ class SssdConfig extends React.Component {
obj.session_recording.scope = "none"; obj.session_recording.scope = "none";
this.confSave(obj); this.confSave(obj);
} else { } else {
const config = {...data['session_recording']}; const config = { ...data.session_recording };
this.setState(config); this.setState(config);
} }
} }
componentDidMount() { componentDidMount() {
let syntax_object = { const syntax_object = {
parse: ini.parse, parse: ini.parse,
stringify: ini.stringify stringify: ini.stringify
}; };
@ -404,7 +443,7 @@ class SssdConfig extends React.Component {
superuser: true, superuser: true,
}); });
let promise = this.file.read(); const promise = this.file.read();
promise.done(() => this.file.watch(this.setConfig)); promise.done(() => this.file.watch(this.setConfig));
@ -424,95 +463,75 @@ class SssdConfig extends React.Component {
} }
render() { render() {
const form = (
<Form isHorizontal>
<FormGroup label="Scope">
<FormSelect
id="scope"
value={this.state.scope}
onChange={scope => this.setState({ scope })}>
{[
{ value: "none", label: _("None") },
{ value: "some", label: _("Some") },
{ value: "all", label: _("All") }
].map((option, index) =>
<FormSelectOption
key={index}
value={option.value}
label={option.label} />
)}
</FormSelect>
</FormGroup>
{this.state.scope === "some" &&
<>
<FormGroup label={_("Users")}>
<TextInput
id="users"
value={this.state.users}
onChange={users => this.setState({ users })}
/>
</FormGroup>
<FormGroup label={_("Groups")}>
<TextInput
id="groups"
value={this.state.groups}
onChange={groups => this.setState({ groups })}
/>
</FormGroup>
</>}
<ActionGroup>
<Button
id="btn-save-sssd-conf"
variant="primary"
onClick={this.handleSubmit}>
{_("Save")}
</Button>
{this.state.submitting === true && <Spinner size="lg" />}
</ActionGroup>
</Form>
);
return ( return (
<form onSubmit={this.handleSubmit}> <Card>
<table className="info-table-ct col-md-12"> <CardTitle>SSSD Config</CardTitle>
<tbody> <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
<tr> </Card>
<td><label htmlFor="scope">Scope</label></td>
<td>
<select name="scope" id="scope" className="form-control"
value={this.state.scope}
onChange={this.handleInputChange} >
<option value="none">None</option>
<option value="some">Some</option>
<option value="all">All</option>
</select>
</td>
</tr>
{this.state.scope === "some" &&
<tr>
<td><label htmlFor="users">Users</label></td>
<td>
<input type="text" id="users" name="users"
value={this.state.users}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
}
{this.state.scope === "some" &&
<tr>
<td><label htmlFor="groups">Groups</label></td>
<td>
<input type="text" id="groups" name="groups"
value={this.state.groups}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
}
<tr>
<td><button id="btn-save-sssd-conf" className="btn btn-default" type="submit">Save</button></td>
<td>
<span style={{display: this.state.submitting}}>Saving...</span>
</td>
</tr>
</tbody>
</table>
</form>
); );
} }
} }
class ConfigView extends React.Component { export function Config () {
render() { const goBack = () => {
const goBack = () => { cockpit.location.go("/");
cockpit.jump(['session-recording']); };
};
return ( return (
<div className="container-fluid"> <>
<div className="row"> <Button variant="link" icon={<AngleLeftIcon />} onClick={goBack}>
<div className="col-md-12"> {_("Session Recording")}
<ol className="breadcrumb"> </Button>
<li><a onClick={goBack}>Session <GeneralConfig />
Recording</a></li> <SssdConfig />
<li className="active">Configuration</li> </>
</ol> );
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="panel panel-default">
<div className="panel-heading"><span>General Configuration</span></div>
<div className="panel-body" id="sr_config">
<Config />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4">
<div className="panel panel-default">
<div className="panel-heading"><span>SSSD Configuration</span></div>
<div className="panel-body" id="sssd_config">
<SssdConfig />
</div>
</div>
</div>
</div>
</div>
);
}
} }
ReactDOM.render(<ConfigView />, document.getElementById('view'));

22
src/index.html
View file

@ -20,18 +20,20 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
<html> <html>
<head> <head>
<title translate>Journal</title> <title translateable="yes">Session Recording</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="../base1/patternfly.css" rel="stylesheet"> <meta name="description" content="">
<link href="recordings.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../base1/jquery.js"></script>
<script type="text/javascript" src="../base1/cockpit.js"></script> <link rel="stylesheet" href="index.css">
<script src="../*/po.js"></script>
<script type="text/javascript" src="../base1/cockpit.js"></script>
<script type="text/javascript" src="../*/po.js"></script>
<script type="text/javascript" src="index.js"></script>
</head> </head>
<body> <body class="pf-m-redhat-form">
<div id="view"></div> <div id="app"></div>
<script type="text/javascript" src="recordings.js"></script>
</body> </body>
</html> </html>

12
src/index.es6 → src/index.js
View file

@ -17,9 +17,21 @@
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>. * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/ */
import "./lib/patternfly-4-cockpit.scss";
import "core-js/stable";
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Application } from './app.jsx'; import { Application } from './app.jsx';
/*
* PF4 overrides need to come after the JSX components imports because
* these are importing CSS stylesheets that we are overriding
* Having the overrides here will ensure that when mini-css-extract-plugin will extract the CSS
* out of the dist/index.js and since it will maintain the order of the imported CSS,
* the overrides will be correctly in the end of our stylesheet.
*/
import "./lib/patternfly-4-overrides.scss";
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
ReactDOM.render(React.createElement(Application, {}), document.getElementById('app')); ReactDOM.render(React.createElement(Application, {}), document.getElementById('app'));

134
src/journal.css
View file

@ -1,134 +0,0 @@
/*
* This file is part of Cockpit.
*
* Copyright (C) 2015 Red Hat, Inc.
*
* Cockpit is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation; either version 2.1 of the License, or
* (at your option) any later version.
*
* Cockpit is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/
.cockpit-log-panel {
border: 0;
}
.cockpit-log-panel .panel-heading {
background-color: #333;
border-color: #333;
color: #fff;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
height: auto;
}
.cockpit-log-panel .panel-body {
padding: 0;
border-bottom: 1px #ddd solid;
}
.cockpit-log-panel .panel-body .panel-heading {
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
border-top: 0;
border-bottom: 1px #ddd solid;
background-color: #f5f5f5;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
width: auto;
color: #333;
}
.cockpit-log-panel > .panel-heading {
margin-top: 15px;
}
.cockpit-log-panel .cockpit-logline {
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
background-color: #f5f5f5;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
}
.cockpit-logline {
font-family: monospace;
min-width: 310px;
border-bottom: 1px solid #DDD;
border-top: none;
}
.cockpit-logline > .row > div:first-child {
padding-left: 20px;
}
.cockpit-log-panel .cockpit-logline:hover {
background-color: #d4edfa;
}
.cockpit-log-panel > .cockpit-logline:hover {
cursor: pointer;
}
.cockpit-logmsg-reboot {
font-style: italic;
}
.cockpit-log-warning {
display: inline-block;
width: 20px;
vertical-align: middle;
}
.cockpit-log-warning > i {
color: black;
}
.cockpit-log-time {
display: inline-block;
width: 40px;
vertical-align: middle;
}
.cockpit-log-service {
width: 200px;
margin-left: 10px;
}
.cockpit-log-service-container {
display: inline-block;
width: 200px;
margin-left: 10px;
}
.cockpit-log-service-reduced {
width: -moz-calc(100% - 70px);
width: -webkit-calc(100% - 70px);
width: calc(100% - 70px);
}
.cockpit-log-message {
width: -moz-calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: calc(100% - 300px);
}
.cockpit-log-message, .cockpit-log-service, .cockpit-log-service-reduced {
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
}

36
src/lib/_fonts.scss Normal file
View file

@ -0,0 +1,36 @@
/*
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/_fonts.scss
*/
@mixin printRedHatFont(
$weightValue: 400,
$weightName: "Regular",
$familyName: "RedHatText",
$style: "normal",
$relative: true
) {
$filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
@font-face {
font-family: $familyName;
src: url('#{$filePath}.woff2') format('woff2');
font-style: #{$style};
font-weight: $weightValue;
text-rendering: optimizeLegibility;
}
}
@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay");
@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay");
@include printRedHatFont(300, "Black", $familyName: "RedHatDisplay");
@include printRedHatFont(300, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay");
@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay");
@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay");
@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay");
@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay");
@include printRedHatFont(300, "Bold");
@include printRedHatFont(300, "BoldItalic", $style: "italic");
@include printRedHatFont(300, "Italic");
@include printRedHatFont(700, "Medium");
@include printRedHatFont(700, "MediumItalic", $style: "italic");
@include printRedHatFont(400, "Regular");

14
src/lib/patternfly-4-cockpit.scss Normal file
View file

@ -0,0 +1,14 @@
/*
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-4-cockpit.scss
*/
/* Set fake font and icon path variables - we are going to indentify these through
* string replacement and remove the relevant font-face declarations
*/
$pf-global--font-path: 'patternfly-fonts-fake-path';
$pf-global--fonticon-path: 'patternfly-icons-fake-path';
$pf-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free
@import '@patternfly/patternfly/patternfly-base.scss';
/* Import our own fonts since the PF4 font-face rules are filtered out with patternfly.sed */
@import "./fonts";

43
src/lib/patternfly-4-overrides.scss Normal file
View file

@ -0,0 +1,43 @@
/*
* Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/pkg/lib/patternfly-4-overrides.scss
*/
/*** PF4 overrides ***/
/* WORKAROUND: Override word-break bug */
/* See: https://github.com/patternfly/patternfly-next/issues/2325 */
.pf-c-table td {
word-break: normal;
overflow-wrap: break-word;
}
/* WORKAROUND: Dropdown (PF4): Caret is not properly aligned bug */
/* See: https://github.com/patternfly/patternfly/issues/2715 */
/* Align the icons inside of all dropdown toggles. */
/* Part 1 of 2 */
.pf-c-dropdown__toggle-button {
display: flex;
align-items: center;
}
/* Make split button dropdowns the same height as their sibling. */
/* Part 2 of 2 */
.pf-m-split-button {
align-items: stretch;
}
/* WORKAROUND: Navigation problems with Tertiary Nav widget on mobile */
/* See: https://github.com/patternfly/patternfly-design/issues/840 */
/* Helper mod to wrap pf-c-nav__tertiary */
.ct-m-nav__tertiary-wrap {
flex-wrap: wrap;
.pf-c-nav__scroll-button {
display: none;
}
}
/* Helper mod to center pf-c-nav__tertiary when it wraps */
.ct-m-nav__tertiary-center {
justify-content: center;
}

235
src/page.css
View file

@ -1,235 +0,0 @@
a {
cursor: pointer;
}
.disabled {
pointer-events: auto;
}
.btn {
min-height: 26px;
min-width: 26px;
}
.btn.disabled {
pointer-events: auto;
}
.btn.disabled:hover {
z-index: auto;
}
a.disabled {
cursor: not-allowed !important;
text-decoration: none;
pointer-events: none;
color: #8b8d8f;
}
a.disabled:hover {
text-decoration: none;
}
.dropdown-menu > li > a.disabled,
.dropdown-menu > li > a.disabled:hover,
.dropdown-menu > li > a.disabled:focus {
color: #999999;
}
.dropdown-menu > li > a.disabled:hover,
.dropdown-menu > li > a.disabled:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
border-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: default;
}
/* Limit dropdown menus to 90% of the viewport size */
.dropdown-menu {
height: auto;
overflow-x: hidden;
max-height: 90vh;
}
/* Align these buttons more nicely */
.btn.fa-minus,
.btn.fa-plus {
padding-top: 4px;
}
/* HACK: Workaround for https://github.com/patternfly/patternfly/issues/174*/
.page-ct {
margin-top: 20px;
}
.highlight-ct {
background-color: #d4edfa;
}
/* Well and Blankslate */
.curtains-ct {
top: 0px;
height: 100%;
width: 100%;
position: fixed;
}
.panel .well {
margin-bottom: 0px;
border: none;
border-radius: 0px;
background-color: #FAFAFA;
}
.well.blank-slate-pf {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05) inset;
padding-top: 40px;
}
.blank-slate-pf .spinner-lg {
height: 58px;
width: 58px;
}
/*
* Control buttons such as play and stop
* Used with .btn .btn-default
*/
.btn-control-ct,
.btn-control-ct:hover {
background-position: center center;
background-size: 16px 16px;
background-repeat: no-repeat;
background-image: none;
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
height: 28px;
width: 28px;
box-shadow: none;
}
.btn-control-ct {
background-color: #eeeeee;
}
.btn-control-ct:hover {
background-color: #e0e0e0;
}
/* On/off switch */
.btn-onoff-ct {
margin: 1px 0px;
text-transform: uppercase;
}
.btn-onoff-ct .btn {
color: transparent;
border-color: #B7B7B7;
padding: 2px 6px 1px 6px;
background-color: white;
background-image: linear-gradient(to bottom, rgb(250, 250, 250) 0px, rgb(237, 237, 237) 100%);
-webkit-box-shadow: none;
box-shadow: none;
width: 37px;
}
.btn-onoff-ct .btn:first-child {
border-right: #00435F;
}
.btn-onoff-ct .btn:last-child {
border-left: #00435F;
padding-left: 5px;
}
.btn-onoff-ct .btn.active {
background-image: none;
width: 36px;
}
.btn-onoff-ct .btn.active:first-child {
background-color: #0086CF;
color: white;
border-right: 1px solid #0071b0;
}
.btn-onoff-ct .btn.active:last-child {
color: #000;
border-left: 1px solid #d6d6d6;
}
.btn-onoff-ct .btn.disabled {
pointer-events: none;
color: transparent !important;
}
.btn-onoff-ct .btn.active.disabled {
background-color: #888 !important;
color: white !important;
}
/* Small list inside a dialog */
/* Alert fixups */
/* HACK: word-wrap workaround for long alerts https://github.com/patternfly/patternfly/issues/491 */
.modal-content .alert {
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
word-wrap: break-word;
}
.modal-content .alert .fa {
position: absolute;
left: 10px;
top: 6px;
font-size: 20px;
}
.modal-content .alert .pficon {
top: 5px;
}
.alert.alert-danger .fa {
color: #af151a;
}
/* Dialog patterns */
.dialog-wait-ct {
margin-top: 3px;
}
.dialog-wait-ct .spinner {
display: inline-block;
}
.dialog-wait-ct span {
vertical-align: 4px;
padding-left: 10px;
}
.dialog-list-ct {
max-height: 230px;
overflow-x: auto;
border: 1px solid #CCC;
margin-bottom: 0px;
}
/* HACK: https://github.com/patternfly/patternfly/issues/255 */
input[type=number] {
padding: 0 0 0 5px;
}
/* Make a dialog visible */
.dialog-ct-visible {
display: block;
}

43
src/pkg/lib/cockpit-components-listing.jsx
View file

@ -19,7 +19,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import './listing.less';
/* entry for an alert in the listing, can be expanded (with details) or standard /* entry for an alert in the listing, can be expanded (with details) or standard
* rowId optional: an identifier for the row which will be set as "data-row-id" attribute on the <tr> * rowId optional: an identifier for the row which will be set as "data-row-id" attribute on the <tr>
@ -73,10 +72,10 @@ export class ListingRow extends React.Component {
if (!e || e.button !== 0) if (!e || e.button !== 0)
return; return;
let willBeExpanded = !this.state.expanded && this.props.tabRenderers.length > 0; const willBeExpanded = !this.state.expanded && this.props.tabRenderers.length > 0;
this.setState({ expanded: willBeExpanded }); this.setState({ expanded: willBeExpanded });
let loadedTabs = {}; const loadedTabs = {};
// unload all tabs if not expanded // unload all tabs if not expanded
if (willBeExpanded) { if (willBeExpanded) {
// see if we should preload some tabs // see if we should preload some tabs
@ -108,7 +107,7 @@ export class ListingRow extends React.Component {
if (!e || e.button !== 0) if (!e || e.button !== 0)
return; return;
let selected = !this.state.selected; const selected = !this.state.selected;
this.setState({ selected: selected }); this.setState({ selected: selected });
if (this.props.selectChanged) if (this.props.selectChanged)
@ -122,9 +121,9 @@ export class ListingRow extends React.Component {
// only consider primary mouse button // only consider primary mouse button
if (!e || e.button !== 0) if (!e || e.button !== 0)
return; return;
let prevTab = this.state.activeTab; const prevTab = this.state.activeTab;
let prevTabPresence = 'default'; let prevTabPresence = 'default';
let loadedTabs = this.state.loadedTabs; const loadedTabs = this.state.loadedTabs;
if (prevTab !== tabIdx) { if (prevTab !== tabIdx) {
// see if we need to unload the previous tab // see if we need to unload the previous tab
if ('presence' in this.props.tabRenderers[prevTab]) if ('presence' in this.props.tabRenderers[prevTab])
@ -142,11 +141,11 @@ export class ListingRow extends React.Component {
} }
render() { render() {
let self = this; const self = this;
// only enable navigation if a function is provided and the row isn't expanded (prevent accidental navigation) // only enable navigation if a function is provided and the row isn't expanded (prevent accidental navigation)
let allowNavigate = !!this.props.navigateToItem && !this.state.expanded; const allowNavigate = !!this.props.navigateToItem && !this.state.expanded;
let headerEntries = this.props.columns.map((itm, index) => { const headerEntries = this.props.columns.map((itm, index) => {
if (typeof itm === 'string' || typeof itm === 'number' || itm === null || itm === undefined || itm instanceof String || React.isValidElement(itm)) if (typeof itm === 'string' || typeof itm === 'number' || itm === null || itm === undefined || itm instanceof String || React.isValidElement(itm))
return (<td key={index}>{itm}</td>); return (<td key={index}>{itm}</td>);
else if ('header' in itm && itm.header) else if ('header' in itm && itm.header)
@ -157,23 +156,21 @@ export class ListingRow extends React.Component {
return (<td key={index}>{itm.name}</td>); return (<td key={index}>{itm.name}</td>);
}); });
let allowExpand = (this.props.tabRenderers.length > 0); const allowExpand = (this.props.tabRenderers.length > 0);
let expandToggle; let expandToggle;
if (allowExpand) { if (allowExpand) {
expandToggle = <td key="expandToggle" className="listing-ct-toggle" onClick={ allowNavigate ? this.handleExpandClick : undefined }> expandToggle = <td key="expandToggle" className="listing-ct-toggle" onClick={ allowNavigate ? this.handleExpandClick : undefined }><i className="fa fa-fw" /></td>;
<i className="fa fa-fw" />
</td>;
} else { } else {
expandToggle = <td key="expandToggle-empty" className="listing-ct-toggle" />; expandToggle = <td key="expandToggle-empty" className="listing-ct-toggle" />;
} }
let listingItemClasses = ["listing-ct-item"]; const listingItemClasses = ["listing-ct-item"];
if (!allowNavigate) if (!allowNavigate)
listingItemClasses.push("listing-ct-nonavigate"); listingItemClasses.push("listing-ct-nonavigate");
if (!allowExpand) if (!allowExpand)
listingItemClasses.push("listing-ct-noexpand"); listingItemClasses.push("listing-ct-noexpand");
let allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined); const allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined);
let clickHandler; let clickHandler;
if (allowSelect) { if (allowSelect) {
clickHandler = this.handleSelectClick; clickHandler = this.handleSelectClick;
@ -186,24 +183,26 @@ export class ListingRow extends React.Component {
clickHandler = this.handleExpandClick; clickHandler = this.handleExpandClick;
} }
let listingItem = ( const listingItem = (
<tr data-row-id={ this.props.rowId } <tr
data-row-id={ this.props.rowId }
className={ listingItemClasses.join(' ') } className={ listingItemClasses.join(' ') }
onClick={clickHandler}> onClick={clickHandler}
>
{expandToggle} {expandToggle}
{headerEntries} {headerEntries}
</tr> </tr>
); );
if (this.state.expanded) { if (this.state.expanded) {
let links = this.props.tabRenderers.map((itm, idx) => { const links = this.props.tabRenderers.map((itm, idx) => {
return ( return (
<li key={idx} className={ (idx === self.state.activeTab) ? "active" : ""} > <li key={idx} className={ (idx === self.state.activeTab) ? "active" : ""}>
<a href="#" tabIndex="0" onClick={ self.handleTabClick.bind(self, idx) }>{itm.name}</a> <a href="#" tabIndex="0" onClick={ self.handleTabClick.bind(self, idx) }>{itm.name}</a>
</li> </li>
); );
}); });
let tabs = []; const tabs = [];
let tabIdx; let tabIdx;
let Renderer; let Renderer;
let rendererData; let rendererData;
@ -289,7 +288,7 @@ ListingRow.propTypes = {
* - actions: additional listing-wide actions (displayed next to the list's title) * - actions: additional listing-wide actions (displayed next to the list's title)
*/ */
export const Listing = (props) => { export const Listing = (props) => {
let bodyClasses = ["listing", "listing-ct"]; const bodyClasses = ["listing", "listing-ct"];
if (props.fullWidth) if (props.fullWidth)
bodyClasses.push("listing-ct-wide"); bodyClasses.push("listing-ct-wide");
let headerClasses; let headerClasses;

426
src/pkg/lib/journal.js
View file

@ -17,64 +17,66 @@
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>. * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/ */
(function() { (function () {
"use strict"; "use strict";
var cockpit = require("cockpit"); var cockpit = require("cockpit");
var Mustache = require("mustache"); var Mustache = require("mustache");
var day_header_template = require('raw-loader!journal_day_header.mustache'); var day_header_template = require("raw-loader!journal_day_header.mustache");
var line_template = require('raw-loader!journal_line.mustache'); var line_template = require("raw-loader!journal_line.mustache");
var reboot_template = require('raw-loader!journal_reboot.mustache'); var reboot_template = require("raw-loader!journal_reboot.mustache");
var _ = cockpit.gettext; var _ = cockpit.gettext;
var C_ = cockpit.gettext; var C_ = cockpit.gettext;
var journal = { }; var journal = {};
/** /**
* journalctl([match, ...], [options]) * journalctl([match, ...], [options])
* @match: any number of journal match strings * @match: any number of journal match strings
* @options: an object containing further options * @options: an object containing further options
* *
* Load and (by default) stream journal entries as * Load and (by default) stream journal entries as
* json objects. This function returns a jQuery deferred * json objects. This function returns a jQuery deferred
* object which delivers the various journal entries. * object which delivers the various journal entries.
* *
* The various @match strings are journalctl matches. * The various @match strings are journalctl matches.
* Zero, one or more can be specified. They must be in * Zero, one or more can be specified. They must be in
* string format, or arrays of strings. * string format, or arrays of strings.
* *
* The optional @options object can contain the following: * The optional @options object can contain the following:
* * "host": the host to load journal from * * "host": the host to load journal from
* * "count": number of entries to load and/or pre-stream. * * "count": number of entries to load and/or pre-stream.
* Default is 10 * Default is 10
* * "follow": if set to false just load entries and don't * * "follow": if set to false just load entries and don't
* stream further journal data. Default is true. * stream further journal data. Default is true.
* * "directory": optional directory to load journal files * * "directory": optional directory to load journal files
* * "boot": when set only list entries from this specific * * "boot": when set only list entries from this specific
* boot id, or if null then the current boot. * boot id, or if null then the current boot.
* * "since": if specified list entries since the date/time * * "since": if specified list entries since the date/time
* * "until": if specified list entries until the date/time * * "until": if specified list entries until the date/time
* * "cursor": a cursor to start listing entries from * * "cursor": a cursor to start listing entries from
* * "after": a cursor to start listing entries after * * "after": a cursor to start listing entries after
* *
* Returns a jQuery deferred promise. You can call these * Returns a jQuery deferred promise. You can call these
* functions on the deferred to handle the responses. Note that * functions on the deferred to handle the responses. Note that
* there are additional non-jQuery methods. * there are additional non-jQuery methods.
* *
* .done(function(entries) { }): Called when done, @entries is * .done(function(entries) { }): Called when done, @entries is
* an array of all journal entries loaded. If .stream() * an array of all journal entries loaded. If .stream()
* has been invoked then @entries will be empty. * has been invoked then @entries will be empty.
* .fail(funciton(ex) { }): called if the operation fails * .fail(funciton(ex) { }): called if the operation fails
* .stream(function(entries) { }): called when we receive entries * .stream(function(entries) { }): called when we receive entries
* entries. Called once per batch of journal @entries, * entries. Called once per batch of journal @entries,
* whether following or not. * whether following or not.
* .stop(): stop following or retrieving entries. * .stop(): stop following or retrieving entries.
*/ */
journal.journalctl = function journalctl(/* ... */) { journal.journalctl = function journalctl(/* ... */) {
var matches = []; var matches = [];
var i, arg, options = { follow: true }; var i;
var arg;
var options = { follow: true };
for (i = 0; i < arguments.length; i++) { for (i = 0; i < arguments.length; i++) {
arg = arguments[i]; arg = arguments[i];
if (typeof arg == "string") { if (typeof arg == "string") {
@ -92,41 +94,26 @@
} }
if (options.count === undefined) { if (options.count === undefined) {
if (options.follow) if (options.follow) options.count = 10;
options.count = 10; else options.count = null;
else
options.count = null;
} }
var cmd = [ "journalctl", "--all", "-q", "--output=json" ]; var cmd = ["journalctl", "--all", "-q", "--output=json"];
if (!options.count) if (!options.count) cmd.push("--no-tail");
cmd.push("--no-tail"); else cmd.push("--lines=" + options.count);
else if (options.directory) cmd.push("--directory=" + options.directory);
cmd.push("--lines=" + options.count); if (options.boot) cmd.push("--boot=" + options.boot);
if (options.directory) else if (options.boot !== undefined) cmd.push("--boot");
cmd.push("--directory=" + options.directory); if (options.since) cmd.push("--since=" + options.since);
if (options.boot) if (options.until) cmd.push("--until=" + options.until);
cmd.push("--boot=" + options.boot); if (options.cursor) cmd.push("--cursor=" + options.cursor);
else if (options.boot !== undefined) if (options.after) cmd.push("--after=" + options.after);
cmd.push("--boot"); if (options.merge) cmd.push("-m");
if (options.since) if (options.grep) cmd.push("--grep=" + options.grep);
cmd.push("--since=" + options.since);
if (options.until)
cmd.push("--until=" + options.until);
if (options.cursor)
cmd.push("--cursor=" + options.cursor);
if (options.after)
cmd.push("--after=" + options.after);
if (options.merge)
cmd.push("-m");
if (options.grep)
cmd.push("--grep=" + options.grep);
/* journalctl doesn't allow reverse and follow together */ /* journalctl doesn't allow reverse and follow together */
if (options.reverse) if (options.reverse) cmd.push("--reverse");
cmd.push("--reverse"); else if (options.follow) cmd.push("--follow");
else if (options.follow)
cmd.push("--follow");
cmd.push("--"); cmd.push("--");
cmd.push.apply(cmd, matches); cmd.push.apply(cmd, matches);
@ -151,48 +138,51 @@
} }
} }
var proc = cockpit.spawn(cmd, { host: options.host, batch: 8192, latency: 300, superuser: "try" }). var proc = cockpit
stream(function(data) { .spawn(cmd, {
host: options.host,
batch: 8192,
latency: 300,
superuser: "try",
})
.stream(function (data) {
if (buffer) data = buffer + data;
buffer = "";
if (buffer) var lines = data.split("\n");
data = buffer + data; var last = lines.length - 1;
buffer = ""; lines.forEach(function (line, i) {
if (i == last) {
var lines = data.split("\n"); buffer = line;
var last = lines.length - 1; } else if (line && line.indexOf("-- ") !== 0) {
lines.forEach(function(line, i) { try {
if (i == last) { entries.push(JSON.parse(line));
buffer = line; } catch (e) {
} else if (line && line.indexOf("-- ") !== 0) { console.warn(e, line);
try { }
entries.push(JSON.parse(line));
} catch (e) {
console.warn(e, line);
} }
} });
});
if (streamers.length && interval === null) if (streamers.length && interval === null)
interval = window.setInterval(fire_streamers, 300); interval = window.setInterval(fire_streamers, 300);
}). })
done(function() { .done(function () {
fire_streamers();
dfd.resolve(entries);
}).
fail(function(ex) {
/* The journalctl command fails when no entries are matched
* so we just ignore this status code */
if (ex.problem == "cancelled" ||
ex.exit_status === 1) {
fire_streamers(); fire_streamers();
dfd.resolve(entries); dfd.resolve(entries);
} else { })
dfd.reject(ex); .fail(function (ex) {
} /* The journalctl command fails when no entries are matched
}). * so we just ignore this status code */
always(function() { if (ex.problem == "cancelled" || ex.exit_status === 1) {
window.clearInterval(interval); fire_streamers();
}); dfd.resolve(entries);
} else {
dfd.reject(ex);
}
})
.always(function () {
window.clearInterval(interval);
});
promise = dfd.promise(); promise = dfd.promise();
promise.stream = function stream(callback) { promise.stream = function stream(callback) {
@ -206,20 +196,16 @@
}; };
journal.printable = function printable(value) { journal.printable = function printable(value) {
if (value === undefined || value === null) if (value === undefined || value === null) return _("[no data]");
return _("[no data]"); else if (typeof value == "string") return value;
else if (typeof(value) == "string")
return value;
else if (value.length !== undefined) else if (value.length !== undefined)
return cockpit.format(_("[$0 bytes of binary data]"), value.length); return cockpit.format(_("[$0 bytes of binary data]"), value.length);
else else return _("[binary data]");
return _("[binary data]");
}; };
function output_funcs_for_box(box) { function output_funcs_for_box(box) {
/* Dereference any jQuery object here */ /* Dereference any jQuery object here */
if (box.jquery) if (box.jquery) box = box[0];
box = box[0];
Mustache.parse(day_header_template); Mustache.parse(day_header_template);
Mustache.parse(line_template); Mustache.parse(line_template);
@ -227,31 +213,28 @@
function render_line(ident, prio, message, count, time, entry) { function render_line(ident, prio, message, count, time, entry) {
var parts = { var parts = {
'cursor': entry["__CURSOR"], cursor: entry.__CURSOR,
'time': time, time: time,
'message': message, message: message,
'service': ident service: ident,
}; };
if (count > 1) if (count > 1) parts.count = count;
parts['count'] = count; if (ident === "abrt-notification") {
if (ident === 'abrt-notification') { parts.problem = true;
parts['problem'] = true; parts.service = entry.PROBLEM_BINARY;
parts['service'] = entry['PROBLEM_BINARY']; } else if (prio < 4) parts.warning = true;
}
else if (prio < 4)
parts['warning'] = true;
return Mustache.render(line_template, parts); return Mustache.render(line_template, parts);
} }
var reboot = _("Reboot"); var reboot = _("Reboot");
var reboot_line = Mustache.render(reboot_template, {'message': reboot} ); var reboot_line = Mustache.render(reboot_template, { message: reboot });
function render_reboot_separator() { function render_reboot_separator() {
return reboot_line; return reboot_line;
} }
function render_day_header(day) { function render_day_header(day) {
return Mustache.render(day_header_template, {'day': day} ); return Mustache.render(day_header_template, { day: day });
} }
function parse_html(string) { function parse_html(string) {
@ -265,43 +248,37 @@
render_day_header: render_day_header, render_day_header: render_day_header,
render_reboot_separator: render_reboot_separator, render_reboot_separator: render_reboot_separator,
append: function(elt) { append: function (elt) {
if (typeof (elt) == "string") if (typeof elt == "string") elt = parse_html(elt);
elt = parse_html(elt);
box.appendChild(elt); box.appendChild(elt);
}, },
prepend: function(elt) { prepend: function (elt) {
if (typeof (elt) == "string") if (typeof elt == "string") elt = parse_html(elt);
elt = parse_html(elt); if (box.firstChild) box.insertBefore(elt, box.firstChild);
if (box.firstChild) else box.appendChild(elt);
box.insertBefore(elt, box.firstChild);
else
box.appendChild(elt);
}, },
remove_last: function() { remove_last: function () {
if (box.lastChild) if (box.lastChild) box.removeChild(box.lastChild);
box.removeChild(box.lastChild);
}, },
remove_first: function() { remove_first: function () {
if (box.firstChild) if (box.firstChild) box.removeChild(box.firstChild);
box.removeChild(box.firstChild);
}, },
}; };
} }
var month_names = [ var month_names = [
C_("month-name", 'January'), C_("month-name", "January"),
C_("month-name", 'February'), C_("month-name", "February"),
C_("month-name", 'March'), C_("month-name", "March"),
C_("month-name", 'April'), C_("month-name", "April"),
C_("month-name", 'May'), C_("month-name", "May"),
C_("month-name", 'June'), C_("month-name", "June"),
C_("month-name", 'July'), C_("month-name", "July"),
C_("month-name", 'August'), C_("month-name", "August"),
C_("month-name", 'September'), C_("month-name", "September"),
C_("month-name", 'October'), C_("month-name", "October"),
C_("month-name", 'November'), C_("month-name", "November"),
C_("month-name", 'December') C_("month-name", "December"),
]; ];
/* Render the journal entries by passing suitable HTML strings back to /* Render the journal entries by passing suitable HTML strings back to
@ -369,13 +346,13 @@
journal.renderer = function renderer(funcs_or_box) { journal.renderer = function renderer(funcs_or_box) {
var output_funcs; var output_funcs;
if (funcs_or_box.render_line) if (funcs_or_box.render_line) output_funcs = funcs_or_box;
output_funcs = funcs_or_box; else output_funcs = output_funcs_for_box(funcs_or_box);
else
output_funcs = output_funcs_for_box(funcs_or_box);
function copy_object(o) { function copy_object(o) {
var c = { }; for(var p in o) c[p] = o[p]; return c; var c = {};
for (var p in o) c[p] = o[p];
return c;
} }
// A 'entry' object describes a journal entry in formatted form. // A 'entry' object describes a journal entry in formatted form.
@ -385,31 +362,38 @@
function format_entry(journal_entry) { function format_entry(journal_entry) {
function pad(n) { function pad(n) {
var str = n.toFixed(); var str = n.toFixed();
if(str.length == 1) if (str.length == 1) str = "0" + str;
str = '0' + str;
return str; return str;
} }
var d = new Date(journal_entry["__REALTIME_TIMESTAMP"] / 1000); var d = new Date(journal_entry.__REALTIME_TIMESTAMP / 1000);
return { return {
cursor: journal_entry["__CURSOR"], cursor: journal_entry.__CURSOR,
full: journal_entry, full: journal_entry,
day: month_names[d.getMonth()] + ' ' + d.getDate().toFixed() + ', ' + d.getFullYear().toFixed(), day:
time: pad(d.getHours()) + ':' + pad(d.getMinutes()), month_names[d.getMonth()] +
bootid: journal_entry["_BOOT_ID"], " " +
ident: journal_entry["SYSLOG_IDENTIFIER"] || journal_entry["_COMM"], d.getDate().toFixed() +
prio: journal_entry["PRIORITY"], ", " +
message: journal.printable(journal_entry["MESSAGE"]) d.getFullYear().toFixed(),
time: pad(d.getHours()) + ":" + pad(d.getMinutes()),
bootid: journal_entry._BOOT_ID,
ident: journal_entry.SYSLOG_IDENTIFIER || journal_entry._COMM,
prio: journal_entry.PRIORITY,
message: journal.printable(journal_entry.MESSAGE),
}; };
} }
function entry_is_equal(a, b) { function entry_is_equal(a, b) {
return (a && b && return (
a.day == b.day && a &&
a.bootid == b.bootid && b &&
a.ident == b.ident && a.day == b.day &&
a.prio == b.prio && a.bootid == b.bootid &&
a.message == b.message); a.ident == b.ident &&
a.prio == b.prio &&
a.message == b.message
);
} }
// A state object describes a line that should be eventually // A state object describes a line that should be eventually
@ -428,12 +412,14 @@
// output, followed by the line. // output, followed by the line.
function render_state_line(state) { function render_state_line(state) {
return output_funcs.render_line(state.entry.ident, return output_funcs.render_line(
state.entry.prio, state.entry.ident,
state.entry.message, state.entry.prio,
state.count, state.entry.message,
state.last_time, state.count,
state.entry.full); state.last_time,
state.entry.full
);
} }
// We keep the state of the first and last journal lines, // We keep the state of the first and last journal lines,
@ -446,7 +432,7 @@
var top_state, bottom_state; var top_state, bottom_state;
top_state = bottom_state = { }; top_state = bottom_state = {};
function start_new_line() { function start_new_line() {
// If we now have two lines, split the state // If we now have two lines, split the state
@ -483,7 +469,9 @@
if (entry.bootid != top_state.entry.bootid) if (entry.bootid != top_state.entry.bootid)
output_funcs.prepend(output_funcs.render_reboot_separator()); output_funcs.prepend(output_funcs.render_reboot_separator());
if (entry.day != top_state.entry.day) if (entry.day != top_state.entry.day)
output_funcs.prepend(output_funcs.render_day_header(top_state.entry.day)); output_funcs.prepend(
output_funcs.render_day_header(top_state.entry.day)
);
} }
start_new_line(); start_new_line();
@ -497,7 +485,9 @@
function prepend_flush() { function prepend_flush() {
top_output(); top_output();
if (top_state.entry) { if (top_state.entry) {
output_funcs.prepend(output_funcs.render_day_header(top_state.entry.day)); output_funcs.prepend(
output_funcs.render_day_header(top_state.entry.day)
);
top_state.header_present = true; top_state.header_present = true;
} }
} }
@ -541,48 +531,46 @@
bottom_output(); bottom_output();
} }
return { prepend: prepend, return {
prepend_flush: prepend_flush, prepend: prepend,
append: append, prepend_flush: prepend_flush,
append_flush: append_flush append: append,
}; append_flush: append_flush,
};
}; };
journal.logbox = function logbox(match, max_entries) { journal.logbox = function logbox(match, max_entries) {
var entries = [ ]; var entries = [];
var box = document.createElement("div"); var box = document.createElement("div");
function render() { function render() {
var renderer = journal.renderer(box); var renderer = journal.renderer(box);
while(box.firstChild) while (box.firstChild) box.removeChild(box.firstChild);
box.removeChild(box.firstChild);
for (var i = 0; i < entries.length; i++) { for (var i = 0; i < entries.length; i++) {
renderer.prepend(entries[i]); renderer.prepend(entries[i]);
} }
renderer.prepend_flush(); renderer.prepend_flush();
if (entries.length > 0) if (entries.length > 0) box.removeAttribute("hidden");
box.removeAttribute("hidden"); else box.setAttribute("hidden", "hidden");
else
box.setAttribute("hidden", "hidden");
} }
render(); render();
var promise = journal.journalctl(match, { count: max_entries }). var promise = journal
stream(function(tail) { .journalctl(match, { count: max_entries })
entries = entries.concat(tail); .stream(function (tail) {
if (entries.length > max_entries) entries = entries.concat(tail);
entries = entries.slice(-max_entries); if (entries.length > max_entries) entries = entries.slice(-max_entries);
render(); render();
}). })
fail(function(error) { .fail(function (error) {
box.appendChild(document.createTextNode(error.message)); box.appendChild(document.createTextNode(error.message));
box.removeAttribute("hidden"); box.removeAttribute("hidden");
}); });
/* Both a DOM element and a promise */ /* Both a DOM element and a promise */
return promise.promise(box); return promise.promise(box);
}; };
module.exports = journal; module.exports = journal;
}()); })();

14
src/player.css
View file

@ -37,7 +37,7 @@
#input-textarea { #input-textarea {
width: 100%; width: 100%;
heigth: 100%; height: 100%;
font-family: monospace; font-family: monospace;
resize: none; resize: none;
} }
@ -74,3 +74,15 @@
.session_time { .session_time {
margin-right:5px; margin-right:5px;
} }
.pf-c-progress__indicator:after {
content: "";
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: var(--pf-c-progress__indicator--BackgroundColor);
top: -2px;
left: 10px;
float: right;
}

714
src/player.jsx
View file

File diff suppressed because it is too large Load diff

40
src/plot.css
View file

@ -1,40 +0,0 @@
.plot-unit {
display: inline-block;
width: 28px;
font-size: smaller;
text-align: right;
color: #545454;
margin-right: 7px;
}
.plot-title {
color: black;
}
.flot-y-axis .flot-tick-label {
width: 28px;
margin-right: 7px;
}
.flot-x-axis .flot-tick-label {
margin-top: 3px;
}
.zoom-controls {
visibility: hidden;
}
.show-zoom-controls .zoom-controls {
visibility: visible;
}
.show-zoom-cursor .zoomable-plot {
cursor: ew-resize;
}
.standard-zoom-controls {
text-align: right; /* on the right */
margin-bottom: -15px; /* overlapping with the title */
z-index: 1; /* but on top of it */
position: relative;
}

373
src/recordings.css
View file

@ -1,373 +0,0 @@
@import "/page.css";
@import "./journal.css";
@import "./plot.css";
@import "./table.css";
@import "./timer.css";
a.disabled {
text-decoration: none;
pointer-events: none;
cursor: default;
color: #000;
}
.popover {
max-width: none;
white-space: nowrap;
}
.systime-inline form .pficon-close,
.systime-inline form .fa-plus {
height: 26px;
width: 26px;
padding: 4px;
float: right;
margin-left: 5px;
}
.systime-inline .form-inline {
background: #f4f4f4;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #bababa;
padding: 4px;
}
.systime-inline .form-inline:first-of-type {
border-top: 1px solid #bababa;
}
.systime-inline .form-control {
margin: 0 4px;
}
.systime-inline .form-group:first-of-type .form-control {
margin: 0 4px 0 0;
}
.systime-inline .form-group .form-control {
width: 214px;
}
/* Make sure error message don't overflow the dialog */
.realms-op-diagnostics {
max-width: 550px;
text-align: left;
max-height: 200px;
}
.realms-op-wait-message {
margin-left: 10px;
float: left;
margin-top: 3px;
}
.realms-op-address-spinner {
margin-left: -30px;
margin-top: 2px;
}
.realms-op-address-error {
margin-left: -30px;
margin-top: 2px;
color: red;
}
.realms-op-zero-width {
width: 0px;
}
.realms-op-error {
text-align: left;
font-weight: bold;
overflow: auto;
max-width: 550px;
max-height: 200px;
}
/* Other styles */
.fa-red {
color: red;
}
.small-messages {
font-size: smaller;
}
#server-graph-toolbar .dropdown {
display: inline-block;
}
#server-graph-toolbar .dropdown-toggle span {
width: 6em;
text-align: left;
padding-left: 5px;
display: inline-block;
}
.server-graph {
height: 120px;
}
.server-graph-legend {
list-style-type: none;
padding: 30px 40px;
float: right;
}
.server-graph-legend i {
padding-right: 3px;
font-size: 14px;
}
.server-graph-legend .cpu-io-wait i {
color: #e41a1c;
}
.server-graph-legend .cpu-kernel i {
color: #ff7f00;
}
.server-graph-legend .cpu-user i {
color: #377eb8;
}
.server-graph-legend .cpu-nice i {
color: #4daf4a;
}
.server-graph-legend .memory-swap i {
color: #e41a1c;
}
.server-graph-legend .memory-cached i {
color: #ff7f00;
}
.server-graph-legend .memory-used i {
color: #377eb8;
}
.server-graph-legend .memory-free i {
color: #4daf4a;
}
#cpu_status_graph,
#memory_status_graph {
height: 400px;
padding: 20px;
}
#sich-note-1,
#sich-note-2 {
margin: 0;
}
#shutdown-dialog td {
padding-right: 20px;
vertical-align: top;
}
#shutdown-dialog .opt {
padding: 1px 10px;
}
#shutdown-dialog .dropdown {
min-width: 150px;
}
#shutdown-group {
overflow: visible;
}
#shutdown-dialog textarea {
resize: none;
margin-bottom: 10px;
}
#shutdown-dialog input {
display: inline;
width: 10em;
}
#shutdown-dialog .shutdown-hours,
#shutdown-dialog .shutdown-minutes {
width: 3em;
}
#system_information_ssh_keys .list-group-item {
cursor: auto;
}
#system_information_hardware_text,
#system_information_os_text {
overflow: visible;
white-space: normal;
word-wrap: break-word;
}
@media (min-width: 500px) {
.cockpit-modal-md {
width: 400px;
}
}
/* Make sure to not break log message lines in order to preserve information */
#journal-entry .info-table-ct td {
white-space: normal;
word-break: break-all;
}
.service-unit-description {
font-weight: bold;
}
.service-unit-data {
text-align: right;
white-space: nowrap;
}
.service-unit-failed {
color: red;
}
.service-action-btn ul {
right: 0px;
left: auto;
min-width: 0;
text-align: left;
}
.service-panel td:first-child {
text-align: left;
}
.service-panel span {
font-weight: bold;
}
.service-panel td:last-child {
text-align: right;
}
.service-panel table {
width: 100%;
}
#services > .container-fluid {
margin-top: 5em;
}
.service-template input {
width: 50em;
}
#journal-current-day-menu dropdown-toggle {
padding-left: 10px;
}
#journal-box {
margin-top: 5em;
}
#journal-entry-message {
margin: 10px;
}
#journal-entry-fields {
margin-bottom: 10px;
}
/* Extra content header */
.content-header-extra {
background: #f5f5f5;
border-bottom: 1px solid #ddd;
padding: 10px 20px;
width: 100%;
z-index: 900;
top: 0;
}
.content-header-extra .btn-group:not(:first-child) {
padding-left: 20px;
}
/* Override cockpit */
.form-table-ct {
width: 80%;
}
.form-table-ct td.top {
color: #151515;
text-align: left;
}
/* Align table caption/title */
table.listing.listing-ct > caption {
padding: 5px 10px 10px !important;
font-weight: 300;
margin-top: 0;
}
#motd {
background-color: transparent;
border: none;
font-size: 14px;
padding: 0px;
margin: 0px;
white-space: pre-wrap;
}
.listing > tbody > tr {
cursor: pointer;
}
.margin-right-btn {
margin-right: 10px;
}
.play-btn {
min-width: 34px;
}
.sort {
cursor: pointer;
}
.sort span {
text-decoration: underline;
}
.sort-icon {
width:7px;
display:inline-block;
}
/* Align table title */
table.listing-ct -> caption {
padding-left: 10px !important;
}
table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
text-align: left !important;
}
.date {
width: 185px;
}
.invalid {
background-color: #ffdddd;
}
.valid {
background-color: #ffffff;
}
.highlighted {
background-color: #ededed !important;
}

792
src/recordings.jsx
View file

File diff suppressed because it is too large Load diff

149
src/table.css
View file

@ -1,149 +0,0 @@
/* Panels don't draw borders between them */
.panel > .table > tbody:first-child td {
border-top: 1px solid rgb(221, 221, 221);
}
/* Table headers should not generate a double border */
.panel .table thead tr th {
border-bottom: none;
}
.panel-heading {
background: #F5F5F5;
height: 44px;
}
/* Vertically center dropdown buttons in panel headers */
.panel-heading .btn {
margin-top: -3px;
}
/*
* Fix up table row hovering.
*
* When you hover over table rows it's because they're clickable.
* Make the table row hover color match the list-group-item.
*/
.table-hover > tbody > tr > td,
.table-hover > tbody > tr > th,
.dialog-list-ct .list-group-item {
cursor: pointer;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.dialog-list-ct .list-group-item:hover:not(.active) {
background-color: #d4edfa;
}
/* Override patternfly to fit buttons and such */
.table > thead > tr > th,
.table > tbody > tr > td {
padding: 8px;
}
/* Override the heavy patternfly headers */
.table > thead {
background-image: none;
background-color: #fff;
}
/* Make things line up */
.table tbody tr td:first-child,
.table thead tr th:first-child {
padding-left: 15px;
}
.table tbody tr td:last-child,
.table thead tr th:last-child {
padding-right: 15px;
}
.info-table-ct > tr > td,
.info-table-ct > tbody > tr > td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 0.75em;
padding-top: 0.25em;
vertical-align: top;
line-height: 26px;
}
/* Match the form-table-ct CSS equivalent */
.info-table-ct > tr > td:first-child,
.info-table-ct > tbody > tr > td:first-child {
text-align: left;
white-space: nowrap;
width: 5px;
color: #888888;
}
.info-table-ct > tr > td:not(:first-child),
.info-table-ct > tbody > tr > td:not(:first-child) {
color: black;
}
.info-table-ct > tr > td button,
.info-table-ct > tbody > tr > td button {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.form-table-ct {
width: 100%;
}
.form-table-ct td {
padding-left: 0.75em;
padding-top: 0.25em;
line-height: 26px;
}
.form-table-ct td.top {
vertical-align: top;
}
.form-table-ct td:first-child {
text-align: right;
white-space: nowrap;
color: #888888;
width: 5px; /* will be expanded by nowrap */
}
.form-table-ct td[colspan] {
text-align: inherit;
}
.form-table-ct td {
height: 26px;
}
.form-table-ct td.header {
font-weight: bold;
text-align: left;
color: #4D5258;
padding: 20px 0 10px 0;
}
.form-table-ct label input[type='radio'],
.form-table-ct label input[type='checkbox'] {
margin-right: 4px;
}
.form-table-ct label {
margin-bottom: 0px;
}
.form-table-ct label span {
vertical-align: super;
}
/* Break up sidebar in columns in smaller sizes*/
@media (min-width: 992px) {
.info-table-ct-container .info-table-ct {
table-layout: fixed;
width: 100%;
}
}

92
test/check-application
View file

@ -18,12 +18,16 @@ class TestApplication(MachineCase):
self.login_and_go("/session-recording") self.login_and_go("/session-recording")
b = self.browser b = self.browser
m = self.machine m = self.machine
b.wait_present(".content-header-extra") b.wait_present("#app")
b.wait_present("#user")
return b, m return b, m
def _sel_rec(self, cond=":first()"): def _sel_rec(self, index=0):
self.browser.click(f".listing-ct-item{cond}") page = (
"0f25700a28c44b599869745e5fda8b0c-7106-121e79"
if not index
else "0f25700a28c44b599869745e5fda8b0c-7623-135541"
)
self.browser.go(f"/session-recording#/{page}")
def _term_line(self, lineno): def _term_line(self, lineno):
return f".xterm-accessibility-tree div:nth-child({lineno})" return f".xterm-accessibility-tree div:nth-child({lineno})"
@ -35,18 +39,18 @@ class TestApplication(MachineCase):
b.wait_in_text(self._term_line(1), "localhost") b.wait_in_text(self._term_line(1), "localhost")
def testFastforwardControls(self): def testFastforwardControls(self):
slider = ".slider > .min-slider-handle" progress = ".pf-c-progress__indicator"
b, _ = self._login() b, _ = self._login()
self._sel_rec() self._sel_rec()
# fast forward # fast forward
b.click("#player-fast-forward") b.click("#player-fast-forward")
b.wait_in_text(self._term_line(12), "exit") b.wait_in_text(self._term_line(12), "exit")
b.wait_attr(slider, "style", "left: 100%;") b.wait_attr(progress, "style", "width: 100%;")
# test restart playback # test restart playback
b.click("#player-restart") b.click("#player-restart")
b.wait_text(self._term_line(1), "Blank line") b.wait_text(self._term_line(1), "Blank line")
b.wait_attr(slider, "style", "left: 100%;") b.wait_attr(progress, "style", "width: 100%;")
def testSpeedControls(self): def testSpeedControls(self):
b, _ = self._login() b, _ = self._login()
@ -54,7 +58,6 @@ class TestApplication(MachineCase):
# increase speed # increase speed
b.wait_present("#player-speed-up") b.wait_present("#player-speed-up")
b.click("#player-speed-up") b.click("#player-speed-up")
b.wait_present("#player-speed")
b.wait_text("#player-speed", "x2") b.wait_text("#player-speed", "x2")
b.click("#player-speed-up") b.click("#player-speed-up")
b.wait_text("#player-speed", "x4") b.wait_text("#player-speed", "x4")
@ -70,7 +73,6 @@ class TestApplication(MachineCase):
b.click("#player-speed-down") b.click("#player-speed-down")
b.wait_text("#player-speed", "x2") b.wait_text("#player-speed", "x2")
b.click("#player-speed-down") b.click("#player-speed-down")
b.wait_present("#player-speed")
b.click("#player-speed-down") b.click("#player-speed-down")
b.wait_text("#player-speed", "/2") b.wait_text("#player-speed", "/2")
b.click("#player-speed-down") b.click("#player-speed-down")
@ -80,8 +82,7 @@ class TestApplication(MachineCase):
b.click("#player-speed-down") b.click("#player-speed-down")
b.wait_text("#player-speed", "/16") b.wait_text("#player-speed", "/16")
# restore speed # restore speed
b.click("#player-speed-reset") b.click(".pf-c-chip .pf-c-button")
b.wait_present("#player-speed")
b.click("#player-speed-down") b.click("#player-speed-down")
b.wait_text("#player-speed", "/2") b.wait_text("#player-speed", "/2")
@ -142,9 +143,7 @@ class TestApplication(MachineCase):
import time, json, configparser import time, json, configparser
b, m = self._login() b, m = self._login()
# Ensure that the button leads to the config page
b.click("#btn-config") b.click("#btn-config")
b.enter_page("/session-recording/config")
# TLOG config # TLOG config
conf_file_path = "/etc/tlog/" conf_file_path = "/etc/tlog/"
@ -179,19 +178,22 @@ class TestApplication(MachineCase):
m.upload([save_file], conf_file_path) m.upload([save_file], conf_file_path)
# Check that the config reflects the changes # Check that the config reflects the changes
conf = json.load(open(test_file, "r")) conf = json.load(open(test_file, "r"))
assert json.dumps(conf) == json.dumps( self.assertEqual(
{ json.dumps(conf),
"shell": "/test/path/shell", json.dumps(
"notice": "Test Notice", {
"latency": 1, "shell": "/test/path/shell",
"payload": 2, "notice": "Test Notice",
"log": {"input": True, "output": False, "window": False}, "latency": 1,
"limit": {"rate": 3, "burst": 4, "action": "drop"}, "payload": 2,
"file": {"path": "/test/path/file"}, "log": {"input": True, "output": False, "window": False},
"syslog": {"facility": "testfac", "priority": "info"}, "limit": {"rate": 3, "burst": 4, "action": "drop"},
"journal": {"priority": "info", "augment": False}, "file": {"path": "/test/path/file"},
"writer": "file", "syslog": {"facility": "testfac", "priority": "info"},
} "journal": {"priority": "info", "augment": False},
"writer": "file",
}
),
) )
# SSSD config # SSSD config
@ -228,13 +230,13 @@ class TestApplication(MachineCase):
# Check that the configs reflected the changes # Check that the configs reflected the changes
conf = configparser.ConfigParser() conf = configparser.ConfigParser()
conf.read_file(open(test_none_file, "r")) conf.read_file(open(test_none_file, "r"))
assert conf["session_recording"]["scope"] == "none" self.assertEqual(conf["session_recording"]["scope"], "none")
conf.read_file(open(test_some_file, "r")) conf.read_file(open(test_some_file, "r"))
assert conf["session_recording"]["scope"] == "some" self.assertEqual(conf["session_recording"]["scope"], "some")
assert conf["session_recording"]["users"] == "test users" self.assertEqual(conf["session_recording"]["users"], "test users")
assert conf["session_recording"]["groups"] == "test groups" self.assertEqual(conf["session_recording"]["groups"], "test groups")
conf.read_file(open(test_all_file, "r")) conf.read_file(open(test_all_file, "r"))
assert conf["session_recording"]["scope"] == "all" self.assertEqual(conf["session_recording"]["scope"], "all")
def testDisplayDrag(self): def testDisplayDrag(self):
b, _ = self._login() b, _ = self._login()
@ -248,23 +250,22 @@ class TestApplication(MachineCase):
b.click("#player-zoom-in") b.click("#player-zoom-in")
# select and ensure drag'n'pan mode # select and ensure drag'n'pan mode
b.click("#player-drag-pan") b.click("#player-drag-pan")
b.wait_present(".fa-hand-rock-o")
# scroll and check for screen movement # scroll and check for screen movement
b.mouse(".dragnpan", "mousedown", 200, 200) b.mouse(".dragnpan", "mousedown", 200, 200)
b.mouse(".dragnpan", "mousemove", 10, 10) b.mouse(".dragnpan", "mousemove", 10, 10)
assert b.attr(".dragnpan", "scrollTop") != 0 self.assertNotEqual(b.attr(".dragnpan", "scrollTop"), 0)
assert b.attr(".dragnpan", "scrollLeft") != 0 self.assertNotEqual(b.attr(".dragnpan", "scrollLeft"), 0)
def testLogCorrelation(self): def testLogCorrelation(self):
b, _ = self._login() b, _ = self._login()
# select the recording with the extra logs # select the recording with the extra logs
self._sel_rec(":contains('01:07')") self._sel_rec(1)
b.click("#btn-logs-view") b.click("#btn-logs-view")
# fast forward until the end # fast forward until the end
while "exit" not in b.text(self._term_line(22)): while "exit" not in b.text(self._term_line(22)):
b.click("#player-skip-frame") b.click("#player-skip-frame")
# check for extra log entries # check for extra log entries
b.wait_present(".cockpit-log-message:contains('authentication failure')") b.wait_present(".pf-c-data-list:contains('authentication failure')")
def testZoomSpeedControls(self): def testZoomSpeedControls(self):
default_scale_sel = '.console-ct[style^="transform: scale(1)"]' default_scale_sel = '.console-ct[style^="transform: scale(1)"]'
@ -290,17 +291,20 @@ class TestApplication(MachineCase):
def _filter(self, inp, occ_dict): def _filter(self, inp, occ_dict):
import time import time
# allow temporary timestamp failures
self.allow_journal_messages(".*timestamp.*")
# login and test inputs
b, _ = self._login() b, _ = self._login()
for occ in occ_dict: for occ in occ_dict:
for term in occ_dict[occ]: for term in occ_dict[occ]:
# enter the search term and wait for the results to return # enter the search term and wait for the results to return
b.set_input_text(inp, term) b.set_input_text(inp, term)
time.sleep(0.5) time.sleep(2)
assert b.text(".listing-ct").count("contractor") == occ self.assertEqual(b.text(".pf-c-table").count("contractor"), occ)
def testSearch(self): def testSearch(self):
self._filter( self._filter(
"#recording-search", "#filter-search",
{ {
0: { 0: {
"this should return nothing", "this should return nothing",
@ -327,7 +331,7 @@ class TestApplication(MachineCase):
def testFilterUsername(self): def testFilterUsername(self):
self._filter( self._filter(
"#username-search", "#filter-username",
{ {
0: {"test", "contact", "contractor", "contractor11", "contractor4"}, 0: {"test", "contact", "contractor", "contractor11", "contractor4"},
2: {"contractor1"}, 2: {"contractor1"},
@ -336,7 +340,7 @@ class TestApplication(MachineCase):
def testFilterSince(self): def testFilterSince(self):
self._filter( self._filter(
"#since-search .bootstrap-datepicker", "#filter-since",
{ {
0: {"2020-06-02", "2020-06-01 12:31:00"}, 0: {"2020-06-02", "2020-06-01 12:31:00"},
1: {"2020-06-01 12:17:01", "2020-06-01 12:30:50"}, 1: {"2020-06-01 12:17:01", "2020-06-01 12:30:50"},
@ -346,10 +350,10 @@ class TestApplication(MachineCase):
def testFilterUntil(self): def testFilterUntil(self):
self._filter( self._filter(
"#until-search .bootstrap-datepicker", "#filter-until",
{ {
0: {"2020-06-01", "2020-06-01 12:16:00"}, 0: {"2020-06-01", "2020-06-01 12:16"},
1: {"2020-06-01 12:17:00", "2020-06-01 12:29:42"}, 1: {"2020-06-01 12:17", "2020-06-01 12:29"},
2: {"2020-06-02", "2020-06-01 12:31:00"}, 2: {"2020-06-02", "2020-06-01 12:31:00"},
}, },
) )

197
webpack.config.js
View file

@ -1,49 +1,34 @@
const path = require("path"); const path = require("path");
const copy = require("copy-webpack-plugin"); const copy = require("copy-webpack-plugin");
const extract = require("extract-text-webpack-plugin"); const extract = require("mini-css-extract-plugin");
const fs = require("fs"); const fs = require("fs");
const webpack = require("webpack"); const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin");
var externals = { var externals = {
"cockpit": "cockpit", cockpit: "cockpit",
}; };
/* These can be overridden, typically from the Makefile.am */ /* These can be overridden, typically from the Makefile.am */
const srcdir = (process.env.SRCDIR || __dirname) + path.sep + "src"; const srcdir = (process.env.SRCDIR || __dirname) + path.sep + "src";
const builddir = (process.env.SRCDIR || __dirname); const builddir = process.env.SRCDIR || __dirname;
const distdir = builddir + path.sep + "dist"; const distdir = builddir + path.sep + "dist";
const section = process.env.ONLYDIR || null; const section = process.env.ONLYDIR || null;
const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib"); const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib")
const nodedir = path.resolve((process.env.SRCDIR || __dirname), "node_modules"); const nodedir = path.resolve(process.env.SRCDIR || __dirname, "node_modules");
/* A standard nodejs and webpack pattern */ /* A standard nodejs and webpack pattern */
var production = process.env.NODE_ENV === 'production'; var production = process.env.NODE_ENV === "production";
var info = { var info = {
entries: { entries: {
"recordings": [ index: [
"./recordings.jsx", "./index.js",
"./recordings.css",
"./pkg/lib/listing.less",
], ],
"config": [
"./config.jsx",
"./recordings.css",
"./table.css",
]
}, },
files: [ files: [
"index.html", "index.html",
"config.html", "manifest.json"
"player.jsx",
"player.css",
"recordings.jsx",
"recordings.css",
"table.css",
"manifest.json",
"timer.css",
"./pkg/lib/listing.less",
], ],
}; };
@ -64,108 +49,150 @@ var output = {
function vpath(/* ... */) { function vpath(/* ... */) {
var filename = Array.prototype.join.call(arguments, path.sep); var filename = Array.prototype.join.call(arguments, path.sep);
var expanded = builddir + path.sep + filename; var expanded = builddir + path.sep + filename;
if (fs.existsSync(expanded)) if (fs.existsSync(expanded)) return expanded;
return expanded;
expanded = srcdir + path.sep + filename; expanded = srcdir + path.sep + filename;
return expanded; return expanded;
} }
/* Qualify all the paths in entries */ /* Qualify all the paths in entries */
Object.keys(info.entries).forEach(function(key) { Object.keys(info.entries).forEach(function (key) {
if (section && key.indexOf(section) !== 0) { if (section && key.indexOf(section) !== 0) {
delete info.entries[key]; delete info.entries[key];
return; return;
} }
info.entries[key] = info.entries[key].map(function(value) { info.entries[key] = info.entries[key].map(function (value) {
if (value.indexOf("/") === -1) if (value.indexOf("/") === -1) return value;
return value; else return vpath(value);
else
return vpath(value);
}); });
}); });
/* Qualify all the paths in files listed */ /* Qualify all the paths in files listed */
var files = []; var files = [];
info.files.forEach(function(value) { info.files.forEach(function (value) {
if (!section || value.indexOf(section) === 0) if (!section || value.indexOf(section) === 0)
files.push({ from: vpath("src", value), to: value }); files.push({ from: vpath("src", value), to: value });
}); });
info.files = files; info.files = files;
var plugins = [ var plugins = [new copy(info.files), new extract({ filename: "[name].css" })];
new copy(info.files),
new extract("[name].css")
];
/* Only minimize when in production mode */ /* Only minimize when in production mode */
if (production) { if (production) {
/* Rename output files when minimizing */ /* Rename output files when minimizing */
output.filename = "[name].min.js"; output.filename = "[name].min.js";
plugins.unshift(new CompressionPlugin({ plugins.unshift(
asset: "[path].gz[query]", new CompressionPlugin({
test: /\.(js|html)$/, asset: "[path].gz[query]",
minRatio: 0.9, test: /\.(js|html)$/,
deleteOriginalAssets: true minRatio: 0.9,
})); deleteOriginalAssets: true,
})
);
} }
var babel_loader = {
loader: "babel-loader",
options: {
presets: [
[
"@babel/env",
{
targets: {
chrome: "57",
firefox: "52",
safari: "10.3",
edge: "16",
opera: "44",
},
},
],
"@babel/preset-react",
],
},
};
module.exports = { module.exports = {
mode: production ? 'production' : 'development', mode: production ? "production" : "development",
resolve: {
modules: [libdir, nodedir],
},
entry: info.entries, entry: info.entries,
externals: externals, externals: externals,
output: output, output: output,
devtool: "source-map", devtool: "source-map",
resolve: {
alias: {
"fs": path.resolve(nodedir, "fs-extra"),
},
modules: [libdir, nodedir],
},
module: { module: {
rules: [ rules: [
{ {
enforce: 'pre', enforce: "pre",
exclude: /node_modules/, exclude: /node_modules/,
loader: 'eslint-loader', loader: "eslint-loader",
test: /\.jsx$/ test: /\.(js|jsx)$/,
},
{
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.es6$/
}, },
{ {
exclude: /node_modules/, exclude: /node_modules/,
loader: 'babel-loader', use: babel_loader,
test: /\.js$/ test: /\.(js|jsx)$/,
},
/* HACK: remove unwanted fonts from PatternFly's css */
{
test: /patternfly-4-cockpit.scss$/,
use: [
extract.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
url: false,
},
},
{
loader: "string-replace-loader",
options: {
multiple: [
{
search: /src:url\("patternfly-icons-fake-path\/pficon[^}]*/g,
replace: "src:url('fonts/patternfly.woff')format('woff');",
},
{
search: /@font-face[^}]*patternfly-fonts-fake-path[^}]*}/g,
replace: "",
},
],
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
outputStyle: "compressed",
},
},
],
}, },
{ {
exclude: /node_modules/, test: /\.s?css$/,
loader: 'babel-loader', exclude: /patternfly-4-cockpit.scss/,
test: /\.jsx$/ use: [
extract.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
url: false,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
outputStyle: "compressed",
},
},
],
}, },
{ ],
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.es6$/
},
{
test: /\.less$/,
loader: extract.extract("css-loader!less-loader")
},
{
exclude: /node_modules/,
loader: extract.extract('css-loader!sass-loader'),
test: /\.scss$/
},
{
loader: extract.extract("css-loader?minimize=&root=" + libdir),
test: /\.css$/,
}
]
}, },
plugins: plugins plugins: plugins,
} };