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

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";
let cockpit = require("cockpit");
let React = require("react");
let ReactDOM = require("react-dom");
let json = require('comment-json');
let ini = require('ini');
import React from "react";
import {
Button,
Form,
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) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.setConfig = this.setConfig.bind(this);
this.fileReadFailed = this.fileReadFailed.bind(this);
@ -37,7 +59,7 @@ class Config extends React.Component {
this.state = {
config_loaded: false,
file_error: false,
submitting: "none",
submitting: false,
shell: "",
notice: "",
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) {
this.setState({submitting:"block"});
let config = {
this.setState({ submitting: true });
const config = {
shell: this.state.shell,
notice: this.state.notice,
latency: parseInt(this.state.latency),
@ -96,7 +110,7 @@ class Config extends React.Component {
writer: this.state.writer
};
this.file.replace(config).done(() => {
this.setState({submitting:"none"});
this.setState({ submitting: false });
})
.fail((error) => {
console.log(error);
@ -111,12 +125,12 @@ class Config extends React.Component {
var toReturn = {};
for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if (!Object.prototype.hasOwnProperty.call(ob, i)) continue;
if ((typeof ob[i]) == 'object') {
var flatObject = flattenObject(ob[i]);
for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
if (!Object.prototype.hasOwnProperty.call(flatObject, x)) continue;
toReturn[i + '_' + x] = flatObject[x];
}
@ -126,13 +140,13 @@ class Config extends React.Component {
}
return toReturn;
};
let state = flattenObject(data);
const state = flattenObject(data);
state.config_loaded = true;
this.setState(state);
}
getConfig() {
let proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
const proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
proc.stream((data) => {
this.setConfig(json.parse(data, null, true));
@ -146,15 +160,15 @@ class Config extends React.Component {
}
readConfig() {
let parseFunc = function(data) {
const parseFunc = function(data) {
return json.parse(data, null, true);
};
let stringifyFunc = function(data) {
const stringifyFunc = function(data) {
return json.stringify(data, null, true);
};
// needed for cockpit.file usage
let syntax_object = {
const syntax_object = {
parse: parseFunc,
stringify: stringifyFunc,
};
@ -163,22 +177,11 @@ class Config extends React.Component {
syntax: syntax_object,
superuser: true,
});
/*
let promise = this.file.read();
promise.done((data) => {
if (data === null) {
this.fileReadFailed();
}
}).fail((data) => {
this.fileReadFailed(data);
});
*/
}
fileReadFailed(reason) {
console.log(reason);
this.setState({file_error: reason});
this.setState({ file_error: reason });
}
componentDidMount() {
@ -187,160 +190,201 @@ class Config extends React.Component {
}
render() {
if (this.state.config_loaded === false && this.state.file_error === false) {
return (
<div>Loading</div>
);
} else if (this.state.config_loaded === true && this.state.file_error === false) {
return (
<form onSubmit={this.handleSubmit}>
<table className="form-table-ct col-sm-3">
<tbody>
<tr>
<td className="top"><label htmlFor="shell" className="control-label">Shell</label></td>
<td>
<input type="text" id="shell" name="shell" value={this.state.shell}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="notice" className="control-label">Notice</label></td>
<td>
<input type="text" id="notice" name="notice" value={this.state.notice}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="latency" className="control-label">Latency</label></td>
<td>
<input type="number" step="1" id="latency" name="latency" value={this.state.latency}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></td>
<td>
<input type="number" step="1" id="payload" name="payload" value={this.state.payload}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="log_input" className="control-label">Log User's Input</label></td>
<td>
<input type="checkbox" id="log_input" name="log_input" defaultChecked={this.state.log_input} onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="log_output" className="control-label">Log User's Output</label></td>
<td>
<input type="checkbox" id="log_output" name="log_output" defaultChecked={this.state.log_output} onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="log_window" className="control-label">Log Window Resize</label></td>
<td>
<input type="checkbox" id="log_window" name="log_window" defaultChecked={this.state.log_window} onChange={this.handleInputChange} />
</td>
</tr>
const form =
(this.state.config_loaded === false && this.state.file_error === false)
? <Spinner />
: (this.state.config_loaded === true && this.state.file_error === false)
? (
<Form isHorizontal>
<FormGroup label={_("Shell")}>
<TextInput
id="shell"
value={this.state.shell}
onChange={shell => this.setState({ shell })} />
</FormGroup>
<FormGroup label={_("Notice")}>
<TextInput
id="notice"
value={this.state.notice}
onChange={notice => this.setState({ notice })} />
</FormGroup>
<FormGroup label={_("Latency")}>
<TextInput
id="latency"
type="number"
step="1"
value={this.state.latency}
onChange={latency => this.setState({ latency })} />
</FormGroup>
<FormGroup label={_("Payload Size, bytes")}>
<TextInput
id="payload"
type="number"
step="1"
value={this.state.payload}
onChange={payload => this.setState({ payload })} />
</FormGroup>
<FormGroup label={_("Logging")}>
<Checkbox
id="log_input"
isChecked={this.state.log_input}
onChange={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 })}
label={_("User's Output")} />
<Checkbox
id="log_window"
isChecked={this.state.log_window}
onChange={log_window => this.setState({ log_window })}
label={_("Window Resize")} />
</FormGroup>
<FormGroup label={_("Limit Rate, bytes/sec")}>
<TextInput
id="limit_rate"
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>
<td className="top"><label htmlFor="limit_rate" className="control-label">Limit Rate, bytes/sec</label></td>
<td>
<input type="number" step="1" id="limit_rate" name="limit_rate" value={this.state.limit_rate}
className="form-control" onChange={this.handleInputChange} />
</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>
);
}
return (
<Card>
<CardTitle>General Config</CardTitle>
<CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
</Card>
);
}
}
@ -348,7 +392,6 @@ class SssdConfig 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.confSave = this.confSave.bind(this);
this.file = null;
@ -356,16 +399,20 @@ class SssdConfig extends React.Component {
scope: "",
users: "",
groups: "",
submitting: "none",
submitting: false,
};
}
confSave(obj) {
this.setState({submitting:"block"});
this.setState({ submitting: true });
this.file.replace(obj).done(() => {
cockpit.spawn(["chmod", "600", "/etc/sssd/conf.d/sssd-session-recording.conf"], { "superuser": "require" }).done(() => {
cockpit.spawn(["systemctl", "restart", "sssd"], { "superuser": "require" }).done(() => {
this.setState({submitting:"none"});
cockpit.spawn(
["chmod", "600", "/etc/sssd/conf.d/sssd-session-recording.conf"],
{ superuser: "require" }).done(() => {
cockpit.spawn(
["systemctl", "restart", "sssd"],
{ superuser: "require" }).done(() => {
this.setState({ submitting: false });
})
.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) {
if (data === null) {
const obj = {};
@ -388,13 +427,13 @@ class SssdConfig extends React.Component {
obj.session_recording.scope = "none";
this.confSave(obj);
} else {
const config = {...data['session_recording']};
const config = { ...data.session_recording };
this.setState(config);
}
}
componentDidMount() {
let syntax_object = {
const syntax_object = {
parse: ini.parse,
stringify: ini.stringify
};
@ -404,7 +443,7 @@ class SssdConfig extends React.Component {
superuser: true,
});
let promise = this.file.read();
const promise = this.file.read();
promise.done(() => this.file.watch(this.setConfig));
@ -424,95 +463,75 @@ class SssdConfig extends React.Component {
}
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 (
<form onSubmit={this.handleSubmit}>
<table className="info-table-ct col-md-12">
<tbody>
<tr>
<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>
<Card>
<CardTitle>SSSD Config</CardTitle>
<CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
</Card>
);
}
}
class ConfigView extends React.Component {
render() {
const goBack = () => {
cockpit.jump(['session-recording']);
};
export function Config () {
const goBack = () => {
cockpit.location.go("/");
};
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<ol className="breadcrumb">
<li><a onClick={goBack}>Session
Recording</a></li>
<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>
);
}
return (
<>
<Button variant="link" icon={<AngleLeftIcon />} onClick={goBack}>
{_("Session Recording")}
</Button>
<GeneralConfig />
<SssdConfig />
</>
);
}
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>
<head>
<title translate>Journal</title>
<meta charset="utf-8">
<link href="../base1/patternfly.css" rel="stylesheet">
<link href="recordings.css" rel="stylesheet">
<script type="text/javascript" src="../base1/jquery.js"></script>
<script type="text/javascript" src="../base1/cockpit.js"></script>
<script src="../*/po.js"></script>
<title translateable="yes">Session Recording</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<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>
<body>
<div id="view"></div>
<script type="text/javascript" src="recordings.js"></script>
<body class="pf-m-redhat-form">
<div id="app"></div>
</body>
</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/>.
*/
import "./lib/patternfly-4-cockpit.scss";
import "core-js/stable";
import React from 'react';
import ReactDOM from 'react-dom';
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 () {
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 React from 'react';
import './listing.less';
/* 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>
@ -73,10 +72,10 @@ export class ListingRow extends React.Component {
if (!e || e.button !== 0)
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 });
let loadedTabs = {};
const loadedTabs = {};
// unload all tabs if not expanded
if (willBeExpanded) {
// see if we should preload some tabs
@ -108,7 +107,7 @@ export class ListingRow extends React.Component {
if (!e || e.button !== 0)
return;
let selected = !this.state.selected;
const selected = !this.state.selected;
this.setState({ selected: selected });
if (this.props.selectChanged)
@ -122,9 +121,9 @@ export class ListingRow extends React.Component {
// only consider primary mouse button
if (!e || e.button !== 0)
return;
let prevTab = this.state.activeTab;
const prevTab = this.state.activeTab;
let prevTabPresence = 'default';
let loadedTabs = this.state.loadedTabs;
const loadedTabs = this.state.loadedTabs;
if (prevTab !== tabIdx) {
// see if we need to unload the previous tab
if ('presence' in this.props.tabRenderers[prevTab])
@ -142,11 +141,11 @@ export class ListingRow extends React.Component {
}
render() {
let self = this;
const self = this;
// 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))
return (<td key={index}>{itm}</td>);
else if ('header' in itm && itm.header)
@ -157,23 +156,21 @@ export class ListingRow extends React.Component {
return (<td key={index}>{itm.name}</td>);
});
let allowExpand = (this.props.tabRenderers.length > 0);
const allowExpand = (this.props.tabRenderers.length > 0);
let expandToggle;
if (allowExpand) {
expandToggle = <td key="expandToggle" className="listing-ct-toggle" onClick={ allowNavigate ? this.handleExpandClick : undefined }>
<i className="fa fa-fw" />
</td>;
expandToggle = <td key="expandToggle" className="listing-ct-toggle" onClick={ allowNavigate ? this.handleExpandClick : undefined }><i className="fa fa-fw" /></td>;
} else {
expandToggle = <td key="expandToggle-empty" className="listing-ct-toggle" />;
}
let listingItemClasses = ["listing-ct-item"];
const listingItemClasses = ["listing-ct-item"];
if (!allowNavigate)
listingItemClasses.push("listing-ct-nonavigate");
if (!allowExpand)
listingItemClasses.push("listing-ct-noexpand");
let allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined);
const allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined);
let clickHandler;
if (allowSelect) {
clickHandler = this.handleSelectClick;
@ -186,24 +183,26 @@ export class ListingRow extends React.Component {
clickHandler = this.handleExpandClick;
}
let listingItem = (
<tr data-row-id={ this.props.rowId }
const listingItem = (
<tr
data-row-id={ this.props.rowId }
className={ listingItemClasses.join(' ') }
onClick={clickHandler}>
onClick={clickHandler}
>
{expandToggle}
{headerEntries}
</tr>
);
if (this.state.expanded) {
let links = this.props.tabRenderers.map((itm, idx) => {
const links = this.props.tabRenderers.map((itm, idx) => {
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>
</li>
);
});
let tabs = [];
const tabs = [];
let tabIdx;
let Renderer;
let rendererData;
@ -289,7 +288,7 @@ ListingRow.propTypes = {
* - actions: additional listing-wide actions (displayed next to the list's title)
*/
export const Listing = (props) => {
let bodyClasses = ["listing", "listing-ct"];
const bodyClasses = ["listing", "listing-ct"];
if (props.fullWidth)
bodyClasses.push("listing-ct-wide");
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/>.
*/
(function() {
(function () {
"use strict";
var cockpit = require("cockpit");
var Mustache = require("mustache");
var day_header_template = require('raw-loader!journal_day_header.mustache');
var line_template = require('raw-loader!journal_line.mustache');
var reboot_template = require('raw-loader!journal_reboot.mustache');
var day_header_template = require("raw-loader!journal_day_header.mustache");
var line_template = require("raw-loader!journal_line.mustache");
var reboot_template = require("raw-loader!journal_reboot.mustache");
var _ = cockpit.gettext;
var C_ = cockpit.gettext;
var journal = { };
var journal = {};
/**
* journalctl([match, ...], [options])
* @match: any number of journal match strings
* @options: an object containing further options
*
* Load and (by default) stream journal entries as
* json objects. This function returns a jQuery deferred
* object which delivers the various journal entries.
*
* The various @match strings are journalctl matches.
* Zero, one or more can be specified. They must be in
* string format, or arrays of strings.
*
* The optional @options object can contain the following:
* * "host": the host to load journal from
* * "count": number of entries to load and/or pre-stream.
* Default is 10
* * "follow": if set to false just load entries and don't
* stream further journal data. Default is true.
* * "directory": optional directory to load journal files
* * "boot": when set only list entries from this specific
* boot id, or if null then the current boot.
* * "since": if specified list entries since the date/time
* * "until": if specified list entries until the date/time
* * "cursor": a cursor to start listing entries from
* * "after": a cursor to start listing entries after
*
* Returns a jQuery deferred promise. You can call these
* functions on the deferred to handle the responses. Note that
* there are additional non-jQuery methods.
*
* .done(function(entries) { }): Called when done, @entries is
* an array of all journal entries loaded. If .stream()
* has been invoked then @entries will be empty.
* .fail(funciton(ex) { }): called if the operation fails
* .stream(function(entries) { }): called when we receive entries
* entries. Called once per batch of journal @entries,
* whether following or not.
* .stop(): stop following or retrieving entries.
*/
* journalctl([match, ...], [options])
* @match: any number of journal match strings
* @options: an object containing further options
*
* Load and (by default) stream journal entries as
* json objects. This function returns a jQuery deferred
* object which delivers the various journal entries.
*
* The various @match strings are journalctl matches.
* Zero, one or more can be specified. They must be in
* string format, or arrays of strings.
*
* The optional @options object can contain the following:
* * "host": the host to load journal from
* * "count": number of entries to load and/or pre-stream.
* Default is 10
* * "follow": if set to false just load entries and don't
* stream further journal data. Default is true.
* * "directory": optional directory to load journal files
* * "boot": when set only list entries from this specific
* boot id, or if null then the current boot.
* * "since": if specified list entries since the date/time
* * "until": if specified list entries until the date/time
* * "cursor": a cursor to start listing entries from
* * "after": a cursor to start listing entries after
*
* Returns a jQuery deferred promise. You can call these
* functions on the deferred to handle the responses. Note that
* there are additional non-jQuery methods.
*
* .done(function(entries) { }): Called when done, @entries is
* an array of all journal entries loaded. If .stream()
* has been invoked then @entries will be empty.
* .fail(funciton(ex) { }): called if the operation fails
* .stream(function(entries) { }): called when we receive entries
* entries. Called once per batch of journal @entries,
* whether following or not.
* .stop(): stop following or retrieving entries.
*/
journal.journalctl = function journalctl(/* ... */) {
var matches = [];
var i, arg, options = { follow: true };
var i;
var arg;
var options = { follow: true };
for (i = 0; i < arguments.length; i++) {
arg = arguments[i];
if (typeof arg == "string") {
@ -92,41 +94,26 @@
}
if (options.count === undefined) {
if (options.follow)
options.count = 10;
else
options.count = null;
if (options.follow) options.count = 10;
else options.count = null;
}
var cmd = [ "journalctl", "--all", "-q", "--output=json" ];
if (!options.count)
cmd.push("--no-tail");
else
cmd.push("--lines=" + options.count);
if (options.directory)
cmd.push("--directory=" + options.directory);
if (options.boot)
cmd.push("--boot=" + options.boot);
else if (options.boot !== undefined)
cmd.push("--boot");
if (options.since)
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);
var cmd = ["journalctl", "--all", "-q", "--output=json"];
if (!options.count) cmd.push("--no-tail");
else cmd.push("--lines=" + options.count);
if (options.directory) cmd.push("--directory=" + options.directory);
if (options.boot) cmd.push("--boot=" + options.boot);
else if (options.boot !== undefined) cmd.push("--boot");
if (options.since) 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 */
if (options.reverse)
cmd.push("--reverse");
else if (options.follow)
cmd.push("--follow");
if (options.reverse) cmd.push("--reverse");
else if (options.follow) cmd.push("--follow");
cmd.push("--");
cmd.push.apply(cmd, matches);
@ -151,48 +138,51 @@
}
}
var proc = cockpit.spawn(cmd, { host: options.host, batch: 8192, latency: 300, superuser: "try" }).
stream(function(data) {
var proc = cockpit
.spawn(cmd, {
host: options.host,
batch: 8192,
latency: 300,
superuser: "try",
})
.stream(function (data) {
if (buffer) data = buffer + data;
buffer = "";
if (buffer)
data = buffer + data;
buffer = "";
var lines = data.split("\n");
var last = lines.length - 1;
lines.forEach(function(line, i) {
if (i == last) {
buffer = line;
} else if (line && line.indexOf("-- ") !== 0) {
try {
entries.push(JSON.parse(line));
} catch (e) {
console.warn(e, line);
var lines = data.split("\n");
var last = lines.length - 1;
lines.forEach(function (line, i) {
if (i == last) {
buffer = line;
} else if (line && line.indexOf("-- ") !== 0) {
try {
entries.push(JSON.parse(line));
} catch (e) {
console.warn(e, line);
}
}
}
});
});
if (streamers.length && interval === null)
interval = window.setInterval(fire_streamers, 300);
}).
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) {
if (streamers.length && interval === null)
interval = window.setInterval(fire_streamers, 300);
})
.done(function () {
fire_streamers();
dfd.resolve(entries);
} else {
dfd.reject(ex);
}
}).
always(function() {
window.clearInterval(interval);
});
})
.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();
dfd.resolve(entries);
} else {
dfd.reject(ex);
}
})
.always(function () {
window.clearInterval(interval);
});
promise = dfd.promise();
promise.stream = function stream(callback) {
@ -206,20 +196,16 @@
};
journal.printable = function printable(value) {
if (value === undefined || value === null)
return _("[no data]");
else if (typeof(value) == "string")
return value;
if (value === undefined || value === null) return _("[no data]");
else if (typeof value == "string") return value;
else if (value.length !== undefined)
return cockpit.format(_("[$0 bytes of binary data]"), value.length);
else
return _("[binary data]");
else return _("[binary data]");
};
function output_funcs_for_box(box) {
/* Dereference any jQuery object here */
if (box.jquery)
box = box[0];
/* Dereference any jQuery object here */
if (box.jquery) box = box[0];
Mustache.parse(day_header_template);
Mustache.parse(line_template);
@ -227,31 +213,28 @@
function render_line(ident, prio, message, count, time, entry) {
var parts = {
'cursor': entry["__CURSOR"],
'time': time,
'message': message,
'service': ident
};
if (count > 1)
parts['count'] = count;
if (ident === 'abrt-notification') {
parts['problem'] = true;
parts['service'] = entry['PROBLEM_BINARY'];
}
else if (prio < 4)
parts['warning'] = true;
cursor: entry.__CURSOR,
time: time,
message: message,
service: ident,
};
if (count > 1) parts.count = count;
if (ident === "abrt-notification") {
parts.problem = true;
parts.service = entry.PROBLEM_BINARY;
} else if (prio < 4) parts.warning = true;
return Mustache.render(line_template, parts);
}
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() {
return reboot_line;
}
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) {
@ -265,43 +248,37 @@
render_day_header: render_day_header,
render_reboot_separator: render_reboot_separator,
append: function(elt) {
if (typeof (elt) == "string")
elt = parse_html(elt);
append: function (elt) {
if (typeof elt == "string") elt = parse_html(elt);
box.appendChild(elt);
},
prepend: function(elt) {
if (typeof (elt) == "string")
elt = parse_html(elt);
if (box.firstChild)
box.insertBefore(elt, box.firstChild);
else
box.appendChild(elt);
prepend: function (elt) {
if (typeof elt == "string") elt = parse_html(elt);
if (box.firstChild) box.insertBefore(elt, box.firstChild);
else box.appendChild(elt);
},
remove_last: function() {
if (box.lastChild)
box.removeChild(box.lastChild);
remove_last: function () {
if (box.lastChild) box.removeChild(box.lastChild);
},
remove_first: function() {
if (box.firstChild)
box.removeChild(box.firstChild);
remove_first: function () {
if (box.firstChild) box.removeChild(box.firstChild);
},
};
}
var month_names = [
C_("month-name", 'January'),
C_("month-name", 'February'),
C_("month-name", 'March'),
C_("month-name", 'April'),
C_("month-name", 'May'),
C_("month-name", 'June'),
C_("month-name", 'July'),
C_("month-name", 'August'),
C_("month-name", 'September'),
C_("month-name", 'October'),
C_("month-name", 'November'),
C_("month-name", 'December')
C_("month-name", "January"),
C_("month-name", "February"),
C_("month-name", "March"),
C_("month-name", "April"),
C_("month-name", "May"),
C_("month-name", "June"),
C_("month-name", "July"),
C_("month-name", "August"),
C_("month-name", "September"),
C_("month-name", "October"),
C_("month-name", "November"),
C_("month-name", "December"),
];
/* Render the journal entries by passing suitable HTML strings back to
@ -369,13 +346,13 @@
journal.renderer = function renderer(funcs_or_box) {
var output_funcs;
if (funcs_or_box.render_line)
output_funcs = funcs_or_box;
else
output_funcs = output_funcs_for_box(funcs_or_box);
if (funcs_or_box.render_line) output_funcs = funcs_or_box;
else output_funcs = output_funcs_for_box(funcs_or_box);
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.
@ -385,31 +362,38 @@
function format_entry(journal_entry) {
function pad(n) {
var str = n.toFixed();
if(str.length == 1)
str = '0' + str;
if (str.length == 1) str = "0" + str;
return str;
}
var d = new Date(journal_entry["__REALTIME_TIMESTAMP"] / 1000);
var d = new Date(journal_entry.__REALTIME_TIMESTAMP / 1000);
return {
cursor: journal_entry["__CURSOR"],
cursor: journal_entry.__CURSOR,
full: journal_entry,
day: month_names[d.getMonth()] + ' ' + d.getDate().toFixed() + ', ' + 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"])
day:
month_names[d.getMonth()] +
" " +
d.getDate().toFixed() +
", " +
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) {
return (a && b &&
a.day == b.day &&
a.bootid == b.bootid &&
a.ident == b.ident &&
a.prio == b.prio &&
a.message == b.message);
return (
a &&
b &&
a.day == b.day &&
a.bootid == b.bootid &&
a.ident == b.ident &&
a.prio == b.prio &&
a.message == b.message
);
}
// A state object describes a line that should be eventually
@ -428,12 +412,14 @@
// output, followed by the line.
function render_state_line(state) {
return output_funcs.render_line(state.entry.ident,
state.entry.prio,
state.entry.message,
state.count,
state.last_time,
state.entry.full);
return output_funcs.render_line(
state.entry.ident,
state.entry.prio,
state.entry.message,
state.count,
state.last_time,
state.entry.full
);
}
// We keep the state of the first and last journal lines,
@ -446,7 +432,7 @@
var top_state, bottom_state;
top_state = bottom_state = { };
top_state = bottom_state = {};
function start_new_line() {
// If we now have two lines, split the state
@ -483,7 +469,9 @@
if (entry.bootid != top_state.entry.bootid)
output_funcs.prepend(output_funcs.render_reboot_separator());
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();
@ -497,7 +485,9 @@
function prepend_flush() {
top_output();
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;
}
}
@ -541,48 +531,46 @@
bottom_output();
}
return { prepend: prepend,
prepend_flush: prepend_flush,
append: append,
append_flush: append_flush
};
return {
prepend: prepend,
prepend_flush: prepend_flush,
append: append,
append_flush: append_flush,
};
};
journal.logbox = function logbox(match, max_entries) {
var entries = [ ];
var entries = [];
var box = document.createElement("div");
function render() {
var renderer = journal.renderer(box);
while(box.firstChild)
box.removeChild(box.firstChild);
while (box.firstChild) box.removeChild(box.firstChild);
for (var i = 0; i < entries.length; i++) {
renderer.prepend(entries[i]);
}
renderer.prepend_flush();
if (entries.length > 0)
box.removeAttribute("hidden");
else
box.setAttribute("hidden", "hidden");
if (entries.length > 0) box.removeAttribute("hidden");
else box.setAttribute("hidden", "hidden");
}
render();
var promise = journal.journalctl(match, { count: max_entries }).
stream(function(tail) {
entries = entries.concat(tail);
if (entries.length > max_entries)
entries = entries.slice(-max_entries);
render();
}).
fail(function(error) {
box.appendChild(document.createTextNode(error.message));
box.removeAttribute("hidden");
});
var promise = journal
.journalctl(match, { count: max_entries })
.stream(function (tail) {
entries = entries.concat(tail);
if (entries.length > max_entries) entries = entries.slice(-max_entries);
render();
})
.fail(function (error) {
box.appendChild(document.createTextNode(error.message));
box.removeAttribute("hidden");
});
/* Both a DOM element and a promise */
return promise.promise(box);
};
module.exports = journal;
}());
})();

14
src/player.css
View file

@ -37,7 +37,7 @@
#input-textarea {
width: 100%;
heigth: 100%;
height: 100%;
font-family: monospace;
resize: none;
}
@ -74,3 +74,15 @@
.session_time {
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")
b = self.browser
m = self.machine
b.wait_present(".content-header-extra")
b.wait_present("#user")
b.wait_present("#app")
return b, m
def _sel_rec(self, cond=":first()"):
self.browser.click(f".listing-ct-item{cond}")
def _sel_rec(self, index=0):
page = (
"0f25700a28c44b599869745e5fda8b0c-7106-121e79"
if not index
else "0f25700a28c44b599869745e5fda8b0c-7623-135541"
)
self.browser.go(f"/session-recording#/{page}")
def _term_line(self, 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")
def testFastforwardControls(self):
slider = ".slider > .min-slider-handle"
progress = ".pf-c-progress__indicator"
b, _ = self._login()
self._sel_rec()
# fast forward
b.click("#player-fast-forward")
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
b.click("#player-restart")
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):
b, _ = self._login()
@ -54,7 +58,6 @@ class TestApplication(MachineCase):
# increase speed
b.wait_present("#player-speed-up")
b.click("#player-speed-up")
b.wait_present("#player-speed")
b.wait_text("#player-speed", "x2")
b.click("#player-speed-up")
b.wait_text("#player-speed", "x4")
@ -70,7 +73,6 @@ class TestApplication(MachineCase):
b.click("#player-speed-down")
b.wait_text("#player-speed", "x2")
b.click("#player-speed-down")
b.wait_present("#player-speed")
b.click("#player-speed-down")
b.wait_text("#player-speed", "/2")
b.click("#player-speed-down")
@ -80,8 +82,7 @@ class TestApplication(MachineCase):
b.click("#player-speed-down")
b.wait_text("#player-speed", "/16")
# restore speed
b.click("#player-speed-reset")
b.wait_present("#player-speed")
b.click(".pf-c-chip .pf-c-button")
b.click("#player-speed-down")
b.wait_text("#player-speed", "/2")
@ -142,9 +143,7 @@ class TestApplication(MachineCase):
import time, json, configparser
b, m = self._login()
# Ensure that the button leads to the config page
b.click("#btn-config")
b.enter_page("/session-recording/config")
# TLOG config
conf_file_path = "/etc/tlog/"
@ -179,19 +178,22 @@ class TestApplication(MachineCase):
m.upload([save_file], conf_file_path)
# Check that the config reflects the changes
conf = json.load(open(test_file, "r"))
assert json.dumps(conf) == json.dumps(
{
"shell": "/test/path/shell",
"notice": "Test Notice",
"latency": 1,
"payload": 2,
"log": {"input": True, "output": False, "window": False},
"limit": {"rate": 3, "burst": 4, "action": "drop"},
"file": {"path": "/test/path/file"},
"syslog": {"facility": "testfac", "priority": "info"},
"journal": {"priority": "info", "augment": False},
"writer": "file",
}
self.assertEqual(
json.dumps(conf),
json.dumps(
{
"shell": "/test/path/shell",
"notice": "Test Notice",
"latency": 1,
"payload": 2,
"log": {"input": True, "output": False, "window": False},
"limit": {"rate": 3, "burst": 4, "action": "drop"},
"file": {"path": "/test/path/file"},
"syslog": {"facility": "testfac", "priority": "info"},
"journal": {"priority": "info", "augment": False},
"writer": "file",
}
),
)
# SSSD config
@ -228,13 +230,13 @@ class TestApplication(MachineCase):
# Check that the configs reflected the changes
conf = configparser.ConfigParser()
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"))
assert conf["session_recording"]["scope"] == "some"
assert conf["session_recording"]["users"] == "test users"
assert conf["session_recording"]["groups"] == "test groups"
self.assertEqual(conf["session_recording"]["scope"], "some")
self.assertEqual(conf["session_recording"]["users"], "test users")
self.assertEqual(conf["session_recording"]["groups"], "test groups")
conf.read_file(open(test_all_file, "r"))
assert conf["session_recording"]["scope"] == "all"
self.assertEqual(conf["session_recording"]["scope"], "all")
def testDisplayDrag(self):
b, _ = self._login()
@ -248,23 +250,22 @@ class TestApplication(MachineCase):
b.click("#player-zoom-in")
# select and ensure drag'n'pan mode
b.click("#player-drag-pan")
b.wait_present(".fa-hand-rock-o")
# scroll and check for screen movement
b.mouse(".dragnpan", "mousedown", 200, 200)
b.mouse(".dragnpan", "mousemove", 10, 10)
assert b.attr(".dragnpan", "scrollTop") != 0
assert b.attr(".dragnpan", "scrollLeft") != 0
self.assertNotEqual(b.attr(".dragnpan", "scrollTop"), 0)
self.assertNotEqual(b.attr(".dragnpan", "scrollLeft"), 0)
def testLogCorrelation(self):
b, _ = self._login()
# select the recording with the extra logs
self._sel_rec(":contains('01:07')")
self._sel_rec(1)
b.click("#btn-logs-view")
# fast forward until the end
while "exit" not in b.text(self._term_line(22)):
b.click("#player-skip-frame")
# 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):
default_scale_sel = '.console-ct[style^="transform: scale(1)"]'
@ -290,17 +291,20 @@ class TestApplication(MachineCase):
def _filter(self, inp, occ_dict):
import time
# allow temporary timestamp failures
self.allow_journal_messages(".*timestamp.*")
# login and test inputs
b, _ = self._login()
for occ in occ_dict:
for term in occ_dict[occ]:
# enter the search term and wait for the results to return
b.set_input_text(inp, term)
time.sleep(0.5)
assert b.text(".listing-ct").count("contractor") == occ
time.sleep(2)
self.assertEqual(b.text(".pf-c-table").count("contractor"), occ)
def testSearch(self):
self._filter(
"#recording-search",
"#filter-search",
{
0: {
"this should return nothing",
@ -327,7 +331,7 @@ class TestApplication(MachineCase):
def testFilterUsername(self):
self._filter(
"#username-search",
"#filter-username",
{
0: {"test", "contact", "contractor", "contractor11", "contractor4"},
2: {"contractor1"},
@ -336,7 +340,7 @@ class TestApplication(MachineCase):
def testFilterSince(self):
self._filter(
"#since-search .bootstrap-datepicker",
"#filter-since",
{
0: {"2020-06-02", "2020-06-01 12:31:00"},
1: {"2020-06-01 12:17:01", "2020-06-01 12:30:50"},
@ -346,10 +350,10 @@ class TestApplication(MachineCase):
def testFilterUntil(self):
self._filter(
"#until-search .bootstrap-datepicker",
"#filter-until",
{
0: {"2020-06-01", "2020-06-01 12:16:00"},
1: {"2020-06-01 12:17:00", "2020-06-01 12:29:42"},
0: {"2020-06-01", "2020-06-01 12:16"},
1: {"2020-06-01 12:17", "2020-06-01 12:29"},
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 copy = require("copy-webpack-plugin");
const extract = require("extract-text-webpack-plugin");
const extract = require("mini-css-extract-plugin");
const fs = require("fs");
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
var externals = {
"cockpit": "cockpit",
cockpit: "cockpit",
};
/* These can be overridden, typically from the Makefile.am */
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 section = process.env.ONLYDIR || null;
const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib");
const nodedir = path.resolve((process.env.SRCDIR || __dirname), "node_modules");
const libdir = path.resolve(srcdir, "pkg" + path.sep + "lib")
const nodedir = path.resolve(process.env.SRCDIR || __dirname, "node_modules");
/* A standard nodejs and webpack pattern */
var production = process.env.NODE_ENV === 'production';
var production = process.env.NODE_ENV === "production";
var info = {
entries: {
"recordings": [
"./recordings.jsx",
"./recordings.css",
"./pkg/lib/listing.less",
index: [
"./index.js",
],
"config": [
"./config.jsx",
"./recordings.css",
"./table.css",
]
},
files: [
"index.html",
"config.html",
"player.jsx",
"player.css",
"recordings.jsx",
"recordings.css",
"table.css",
"manifest.json",
"timer.css",
"./pkg/lib/listing.less",
"manifest.json"
],
};
@ -64,108 +49,150 @@ var output = {
function vpath(/* ... */) {
var filename = Array.prototype.join.call(arguments, path.sep);
var expanded = builddir + path.sep + filename;
if (fs.existsSync(expanded))
return expanded;
if (fs.existsSync(expanded)) return expanded;
expanded = srcdir + path.sep + filename;
return expanded;
}
/* 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) {
delete info.entries[key];
return;
}
info.entries[key] = info.entries[key].map(function(value) {
if (value.indexOf("/") === -1)
return value;
else
return vpath(value);
info.entries[key] = info.entries[key].map(function (value) {
if (value.indexOf("/") === -1) return value;
else return vpath(value);
});
});
/* Qualify all the paths in files listed */
var files = [];
info.files.forEach(function(value) {
info.files.forEach(function (value) {
if (!section || value.indexOf(section) === 0)
files.push({ from: vpath("src", value), to: value });
});
info.files = files;
var plugins = [
new copy(info.files),
new extract("[name].css")
];
var plugins = [new copy(info.files), new extract({ filename: "[name].css" })];
/* Only minimize when in production mode */
if (production) {
/* Rename output files when minimizing */
output.filename = "[name].min.js";
plugins.unshift(new CompressionPlugin({
asset: "[path].gz[query]",
test: /\.(js|html)$/,
minRatio: 0.9,
deleteOriginalAssets: true
}));
plugins.unshift(
new CompressionPlugin({
asset: "[path].gz[query]",
test: /\.(js|html)$/,
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 = {
mode: production ? 'production' : 'development',
mode: production ? "production" : "development",
resolve: {
modules: [libdir, nodedir],
},
entry: info.entries,
externals: externals,
output: output,
devtool: "source-map",
resolve: {
alias: {
"fs": path.resolve(nodedir, "fs-extra"),
},
modules: [libdir, nodedir],
},
module: {
rules: [
{
enforce: 'pre',
enforce: "pre",
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.jsx$/
},
{
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
test: /\.es6$/
loader: "eslint-loader",
test: /\.(js|jsx)$/,
},
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.js$/
use: babel_loader,
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/,
loader: 'babel-loader',
test: /\.jsx$/
test: /\.s?css$/,
exclude: /patternfly-4-cockpit.scss/,
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,
};