Rebase and migration to full React instead of react-lite
This commit is contained in:
Kyrylo Gliebov
parent
4ca9b76b23
commit
1abe64fe0c
7 changed files with 2275 additions and 2246 deletions
21
package.json
21
package.json
|
|
@ -42,27 +42,26 @@
|
|||
"sass-loader": "^7.0.3",
|
||||
"sizzle": "^2.3.3",
|
||||
"stdio": "^0.2.7",
|
||||
"webpack": "^4.17.1",
|
||||
"webpack": "^4.19.0",
|
||||
"webpack-cli": "^3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
"node-sass": "^4.9.0",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
"bootstrap": "3.3.7",
|
||||
"patternfly": "3.35.1",
|
||||
"webpack": "^2.6.1",
|
||||
"jquery": "3.3.1",
|
||||
"moment": "2.22.2",
|
||||
"mustache": "2.3.0",
|
||||
"bootstrap-datetime-picker": "2.4.4",
|
||||
"comment-json": "^1.1.3",
|
||||
"term.js-cockpit": "0.0.10",
|
||||
"fs.extra": "^1.3.2",
|
||||
"fs.realpath": "^1.0.0",
|
||||
"ini": "^1.3.5",
|
||||
"jquery": "3.3.1",
|
||||
"moment": "2.22.2",
|
||||
"mustache": "2.3.0",
|
||||
"node-sass": "^4.9.0",
|
||||
"raw-loader": "^0.5.1"
|
||||
"patternfly": "3.35.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"term.js-cockpit": "0.0.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,11 @@
|
|||
|
||||
let cockpit = require("cockpit");
|
||||
let React = require("react");
|
||||
let ReactDOM = require("react-dom");
|
||||
let json = require('comment-json');
|
||||
let ini = require('ini');
|
||||
|
||||
let Config = class extends React.Component {
|
||||
class Config extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
config: null,
|
||||
file_error: null,
|
||||
submitting: "none",
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
handleInputChange(e) {
|
||||
|
|
@ -59,10 +60,8 @@
|
|||
|
||||
handleSubmit(event) {
|
||||
this.setState({submitting:"block"});
|
||||
console.log(event);
|
||||
this.prepareConfig();
|
||||
this.file.replace(this.state.config).done(() => {
|
||||
console.log('updated');
|
||||
this.setState({submitting:"none"});
|
||||
})
|
||||
.fail((error) => {
|
||||
|
|
@ -72,20 +71,16 @@
|
|||
}
|
||||
|
||||
setConfig(data) {
|
||||
console.log(data);
|
||||
this.setState({config: data});
|
||||
}
|
||||
|
||||
fileReadFailed(reason) {
|
||||
console.log(reason);
|
||||
this.setState({file_error: reason});
|
||||
console.log('failed to read file');
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let parseFunc = function(data) {
|
||||
console.log(data);
|
||||
// return data;
|
||||
return json.parse(data, null, true);
|
||||
};
|
||||
|
||||
|
|
@ -106,8 +101,6 @@
|
|||
// host: string
|
||||
});
|
||||
|
||||
console.log(this.file);
|
||||
|
||||
let promise = this.file.read();
|
||||
|
||||
promise.done((data) => {
|
||||
|
|
@ -253,10 +246,9 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td className="top" />
|
||||
<div className="spinner spinner-sm" style={{display: this.state.submitting}} />
|
||||
<td>
|
||||
<button className="btn btn-default" type="submit">Save</button>
|
||||
|
||||
<div className="spinner spinner-sm" style={{display: this.state.submitting}} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -274,9 +266,9 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let SssdConfig = class extends React.Component {
|
||||
class SssdConfig extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
|
|
@ -284,27 +276,24 @@
|
|||
this.setConfig = this.setConfig.bind(this);
|
||||
this.file = null;
|
||||
this.state = {
|
||||
config: {
|
||||
session_recording: {
|
||||
scope: null,
|
||||
users: null,
|
||||
groups: null,
|
||||
},
|
||||
},
|
||||
scope: "",
|
||||
users: "",
|
||||
groups: "",
|
||||
submitting: "none",
|
||||
};
|
||||
}
|
||||
|
||||
handleInputChange(e){
|
||||
handleInputChange(e) {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
|
||||
const name = e.target.name;
|
||||
const config = this.state.config;
|
||||
config.session_recording[name] = value;
|
||||
|
||||
this.forceUpdate();
|
||||
const state = {};
|
||||
state[name] = value;
|
||||
this.setState(state);
|
||||
}
|
||||
|
||||
setConfig(data) {
|
||||
this.setState({config: data});
|
||||
const config = {...data['session_recording']};
|
||||
this.setState(config);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -327,14 +316,21 @@
|
|||
});
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
this.file.replace(this.state.config).done( function() {
|
||||
console.log('updated');
|
||||
handleSubmit(e) {
|
||||
this.setState({submitting:"block"});
|
||||
const obj = {};
|
||||
obj.users = this.state.users;
|
||||
obj.groups = this.state.groups;
|
||||
obj.scope = this.state.scope;
|
||||
obj['session_recording'] = this.state;
|
||||
let _this = this;
|
||||
this.file.replace(obj).done(function() {
|
||||
_this.setState({submitting:"none"});
|
||||
})
|
||||
.fail( function(error) {
|
||||
.fail(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
event.preventDefault();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -346,7 +342,7 @@
|
|||
<td><label htmlFor="scope">Scope</label></td>
|
||||
<td>
|
||||
<select name="scope" id="scope" className="form-control"
|
||||
value={this.state.config.session_recording.scope}
|
||||
value={this.state.scope}
|
||||
onChange={this.handleInputChange} >
|
||||
<option value="none">None</option>
|
||||
<option value="some">Some</option>
|
||||
|
|
@ -358,24 +354,23 @@
|
|||
<td><label htmlFor="users">Users</label></td>
|
||||
<td>
|
||||
<input type="text" id="users" name="users"
|
||||
value={this.state.config.session_recording.users}
|
||||
className="form-control" />
|
||||
value={this.state.users}
|
||||
className="form-control" onChange={this.handleInputChange} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label htmlFor="groups">Groups</label></td>
|
||||
<td>
|
||||
<input type="text" id="groups" name="groups"
|
||||
value={this.state.config.session_recording.groups}
|
||||
value={this.state.groups}
|
||||
className="form-control" onChange={this.handleInputChange} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td />
|
||||
<td>
|
||||
<button className="btn btn-default" type="submit">Save</button>
|
||||
<span className="spinner spinner-sm" style={{display: this.state.submitting}} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -383,8 +378,8 @@
|
|||
</form>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
React.render(<Config />, document.getElementById('sr_config'));
|
||||
React.render(<SssdConfig />, document.getElementById('sssd_config'));
|
||||
ReactDOM.render(<Config />, document.getElementById('sr_config'));
|
||||
ReactDOM.render(<SssdConfig />, document.getElementById('sssd_config'));
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -17,11 +17,9 @@
|
|||
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
var React = require('react');
|
||||
|
||||
require('./listing.less');
|
||||
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>
|
||||
|
|
@ -47,55 +45,43 @@ require('./listing.less');
|
|||
* initiallyExpanded optional: the entry will be initially rendered as expanded, but then behaves normally
|
||||
* expandChanged optional: callback will be used if the row is either expanded or collapsed passing single `isExpanded` boolean argument
|
||||
*/
|
||||
var ListingRow = React.createClass({
|
||||
propTypes: {
|
||||
rowId: React.PropTypes.string,
|
||||
columns: React.PropTypes.array.isRequired,
|
||||
tabRenderers: React.PropTypes.array,
|
||||
navigateToItem: React.PropTypes.func,
|
||||
listingDetail: React.PropTypes.node,
|
||||
listingActions: React.PropTypes.arrayOf(React.PropTypes.node),
|
||||
selectChanged: React.PropTypes.func,
|
||||
selected: React.PropTypes.bool,
|
||||
initiallyExpanded: React.PropTypes.bool,
|
||||
expandChanged: React.PropTypes.func,
|
||||
initiallyActiveTab: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
tabRenderers: [],
|
||||
navigateToItem: null,
|
||||
};
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
export class ListingRow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expanded: this.props.initiallyExpanded, // show expanded view if true, otherwise one line compact
|
||||
activeTab: this.props.initiallyActiveTab ? this.props.initiallyActiveTab : 0, // currently active tab in expanded mode, defaults to first tab
|
||||
loadedTabs: {}, // which tabs were already loaded - this is important for 'loadOnDemand' setting
|
||||
// contains tab indices
|
||||
selected: this.props.selected, // whether the current row is selected
|
||||
};
|
||||
},
|
||||
handleNavigateClick: function(e) {
|
||||
this.handleNavigateClick = this.handleNavigateClick.bind(this);
|
||||
this.handleExpandClick = this.handleExpandClick.bind(this);
|
||||
this.handleSelectClick = this.handleSelectClick.bind(this);
|
||||
this.handleTabClick = this.handleTabClick.bind(this);
|
||||
}
|
||||
|
||||
handleNavigateClick(e) {
|
||||
// only consider primary mouse button
|
||||
if (!e || e.button !== 0)
|
||||
return;
|
||||
this.props.navigateToItem();
|
||||
},
|
||||
handleExpandClick: function(e) {
|
||||
}
|
||||
|
||||
handleExpandClick(e) {
|
||||
// only consider primary mouse button
|
||||
if (!e || e.button !== 0)
|
||||
return;
|
||||
|
||||
var willBeExpanded = !this.state.expanded && this.props.tabRenderers.length > 0;
|
||||
let willBeExpanded = !this.state.expanded && this.props.tabRenderers.length > 0;
|
||||
this.setState({ expanded: willBeExpanded });
|
||||
|
||||
var loadedTabs = {};
|
||||
let loadedTabs = {};
|
||||
// unload all tabs if not expanded
|
||||
if (willBeExpanded) {
|
||||
// see if we should preload some tabs
|
||||
var tabIdx;
|
||||
var tabPresence;
|
||||
let tabIdx;
|
||||
let tabPresence;
|
||||
for (tabIdx = 0; tabIdx < this.props.tabRenderers.length; tabIdx++) {
|
||||
if ('presence' in this.props.tabRenderers[tabIdx])
|
||||
tabPresence = this.props.tabRenderers[tabIdx].presence;
|
||||
|
|
@ -115,13 +101,14 @@ var ListingRow = React.createClass({
|
|||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
handleSelectClick: function(e) {
|
||||
}
|
||||
|
||||
handleSelectClick(e) {
|
||||
// only consider primary mouse button
|
||||
if (!e || e.button !== 0)
|
||||
return;
|
||||
|
||||
var selected = !this.state.selected;
|
||||
let selected = !this.state.selected;
|
||||
this.setState({ selected: selected });
|
||||
|
||||
if (this.props.selectChanged)
|
||||
|
|
@ -129,14 +116,15 @@ var ListingRow = React.createClass({
|
|||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
handleTabClick: function(tabIdx, e) {
|
||||
}
|
||||
|
||||
handleTabClick(tabIdx, e) {
|
||||
// only consider primary mouse button
|
||||
if (!e || e.button !== 0)
|
||||
return;
|
||||
var prevTab = this.state.activeTab;
|
||||
var prevTabPresence = 'default';
|
||||
var loadedTabs = this.state.loadedTabs;
|
||||
let prevTab = this.state.activeTab;
|
||||
let prevTabPresence = 'default';
|
||||
let loadedTabs = this.state.loadedTabs;
|
||||
if (prevTab !== tabIdx) {
|
||||
// see if we need to unload the previous tab
|
||||
if ('presence' in this.props.tabRenderers[prevTab])
|
||||
|
|
@ -151,41 +139,42 @@ var ListingRow = React.createClass({
|
|||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
},
|
||||
render: function() {
|
||||
var self = this;
|
||||
// only enable navigation if a function is provided and the row isn't expanded (prevent accidental navigation)
|
||||
var allowNavigate = !!this.props.navigateToItem && !this.state.expanded;
|
||||
}
|
||||
|
||||
var headerEntries = this.props.columns.map(function(itm) {
|
||||
render() {
|
||||
let 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;
|
||||
|
||||
let 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>{itm}</td>);
|
||||
return (<td key={index}>{itm}</td>);
|
||||
else if ('header' in itm && itm.header)
|
||||
return (<th>{itm.name}</th>);
|
||||
return (<th key={index}>{itm.name}</th>);
|
||||
else if ('tight' in itm && itm.tight)
|
||||
return (<td className="listing-ct-actions">{itm.name || itm.element}</td>);
|
||||
return (<td key={index} className="listing-ct-actions">{itm.name || itm.element}</td>);
|
||||
else
|
||||
return (<td>{itm.name}</td>);
|
||||
return (<td key={index}>{itm.name}</td>);
|
||||
});
|
||||
|
||||
var allowExpand = (this.props.tabRenderers.length > 0);
|
||||
var expandToggle;
|
||||
let allowExpand = (this.props.tabRenderers.length > 0);
|
||||
let expandToggle;
|
||||
if (allowExpand) {
|
||||
expandToggle = <td 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>;
|
||||
} else {
|
||||
expandToggle = <td className="listing-ct-toggle" />;
|
||||
expandToggle = <td key="expandToggle-empty" className="listing-ct-toggle" />;
|
||||
}
|
||||
|
||||
var listingItemClasses = ["listing-ct-item"];
|
||||
let listingItemClasses = ["listing-ct-item"];
|
||||
if (!allowNavigate)
|
||||
listingItemClasses.push("listing-ct-nonavigate");
|
||||
if (!allowExpand)
|
||||
listingItemClasses.push("listing-ct-noexpand");
|
||||
|
||||
var allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined);
|
||||
var clickHandler;
|
||||
let allowSelect = !(allowNavigate || allowExpand) && (this.state.selected !== undefined);
|
||||
let clickHandler;
|
||||
if (allowSelect) {
|
||||
clickHandler = this.handleSelectClick;
|
||||
if (this.state.selected)
|
||||
|
|
@ -197,7 +186,7 @@ var ListingRow = React.createClass({
|
|||
clickHandler = this.handleExpandClick;
|
||||
}
|
||||
|
||||
var listingItem = (
|
||||
let listingItem = (
|
||||
<tr data-row-id={ this.props.rowId }
|
||||
className={ listingItemClasses.join(' ') }
|
||||
onClick={clickHandler}>
|
||||
|
|
@ -207,18 +196,18 @@ var ListingRow = React.createClass({
|
|||
);
|
||||
|
||||
if (this.state.expanded) {
|
||||
var links = this.props.tabRenderers.map(function(itm, idx) {
|
||||
let links = this.props.tabRenderers.map((itm, idx) => {
|
||||
return (
|
||||
<li key={idx} className={ (idx === self.state.activeTab) ? "active" : ""} >
|
||||
<a href="#" tabIndex="0" onClick={ self.handleTabClick.bind(self, idx) }>{itm.name}</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
var tabs = [];
|
||||
var tabIdx;
|
||||
var Renderer;
|
||||
var rendererData;
|
||||
var row;
|
||||
let tabs = [];
|
||||
let tabIdx;
|
||||
let Renderer;
|
||||
let rendererData;
|
||||
let row;
|
||||
for (tabIdx = 0; tabIdx < this.props.tabRenderers.length; tabIdx++) {
|
||||
Renderer = this.props.tabRenderers[tabIdx].renderer;
|
||||
rendererData = this.props.tabRenderers[tabIdx].data;
|
||||
|
|
@ -231,7 +220,7 @@ var ListingRow = React.createClass({
|
|||
tabs.push(<div className="listing-ct-body" key={tabIdx} hidden>{row}</div>);
|
||||
}
|
||||
|
||||
var listingDetail;
|
||||
let listingDetail;
|
||||
if ('listingDetail' in this.props) {
|
||||
listingDetail = (
|
||||
<span className="listing-ct-caption">
|
||||
|
|
@ -268,8 +257,26 @@ var ListingRow = React.createClass({
|
|||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ListingRow.defaultProps = {
|
||||
tabRenderers: [],
|
||||
navigateToItem: null,
|
||||
};
|
||||
|
||||
ListingRow.propTypes = {
|
||||
rowId: PropTypes.string,
|
||||
columns: PropTypes.array.isRequired,
|
||||
tabRenderers: PropTypes.array,
|
||||
navigateToItem: PropTypes.func,
|
||||
listingDetail: PropTypes.node,
|
||||
listingActions: PropTypes.arrayOf(PropTypes.node),
|
||||
selectChanged: PropTypes.func,
|
||||
selected: PropTypes.bool,
|
||||
initiallyExpanded: PropTypes.bool,
|
||||
expandChanged: PropTypes.func,
|
||||
initiallyActiveTab: PropTypes.bool
|
||||
};
|
||||
/* Implements a PatternFly 'List View' pattern
|
||||
* https://www.patternfly.org/list-view/
|
||||
* Properties:
|
||||
|
|
@ -281,44 +288,27 @@ var ListingRow = React.createClass({
|
|||
* receives the column index as argument
|
||||
* - actions: additional listing-wide actions (displayed next to the list's title)
|
||||
*/
|
||||
var Listing = React.createClass({
|
||||
propTypes: {
|
||||
title: React.PropTypes.string.isRequired,
|
||||
fullWidth: React.PropTypes.bool,
|
||||
emptyCaption: React.PropTypes.string.isRequired,
|
||||
columnTitles: React.PropTypes.arrayOf(React.PropTypes.string),
|
||||
columnTitleClick: React.PropTypes.func,
|
||||
actions: React.PropTypes.arrayOf(React.PropTypes.node)
|
||||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
fullWidth: true,
|
||||
columnTitles: [],
|
||||
actions: []
|
||||
};
|
||||
},
|
||||
render: function() {
|
||||
var self = this;
|
||||
var bodyClasses = ["listing", "listing-ct"];
|
||||
if (this.props.fullWidth)
|
||||
export const Listing = (props) => {
|
||||
let bodyClasses = ["listing", "listing-ct"];
|
||||
if (props.fullWidth)
|
||||
bodyClasses.push("listing-ct-wide");
|
||||
var headerClasses;
|
||||
var headerRow;
|
||||
var selectableRows;
|
||||
if (!this.props.children || this.props.children.length === 0) {
|
||||
let headerClasses;
|
||||
let headerRow;
|
||||
let selectableRows;
|
||||
if (!props.children || props.children.length === 0) {
|
||||
headerClasses = "listing-ct-empty";
|
||||
headerRow = <tr><td>{this.props.emptyCaption}</td></tr>;
|
||||
} else if (this.props.columnTitles.length) {
|
||||
headerRow = <tr><td>{props.emptyCaption}</td></tr>;
|
||||
} else if (props.columnTitles.length) {
|
||||
// check if any of the children are selectable
|
||||
selectableRows = false;
|
||||
this.props.children.forEach(function(r) {
|
||||
props.children.forEach(function(r) {
|
||||
if (r.props.selected !== undefined)
|
||||
selectableRows = true;
|
||||
});
|
||||
|
||||
if (selectableRows) {
|
||||
// now make sure that if one is set, it's available on all items
|
||||
this.props.children.forEach(function(r) {
|
||||
props.children.forEach(function(r) {
|
||||
if (r.props.selected === undefined)
|
||||
r.props.selected = false;
|
||||
});
|
||||
|
|
@ -326,21 +316,21 @@ var Listing = React.createClass({
|
|||
|
||||
headerRow = (
|
||||
<tr>
|
||||
<th className="listing-ct-toggle" />
|
||||
{ this.props.columnTitles.map(function (title, index) {
|
||||
var clickHandler = null;
|
||||
if (self.props.columnTitleClick)
|
||||
clickHandler = function() { self.props.columnTitleClick(index) };
|
||||
return <th onClick={clickHandler}>{title}</th>;
|
||||
<th key="empty" className="listing-ct-toggle" />
|
||||
{ props.columnTitles.map((title, index) => {
|
||||
let clickHandler = null;
|
||||
if (props.columnTitleClick)
|
||||
clickHandler = function() { props.columnTitleClick(index) };
|
||||
return <th key={index} onClick={clickHandler}>{title}</th>;
|
||||
}) }
|
||||
</tr>
|
||||
);
|
||||
} else {
|
||||
headerRow = <tr />
|
||||
headerRow = <tr />;
|
||||
}
|
||||
var caption;
|
||||
if (this.props.title || (this.props.actions && this.props.actions.length > 0))
|
||||
caption = <caption className="cockpit-caption">{this.props.title}{this.props.actions}</caption>;
|
||||
let caption;
|
||||
if (props.title || (props.actions && props.actions.length > 0))
|
||||
caption = <caption className="cockpit-caption">{props.title}{props.actions}</caption>;
|
||||
|
||||
return (
|
||||
<table className={ bodyClasses.join(" ") }>
|
||||
|
|
@ -348,13 +338,27 @@ var Listing = React.createClass({
|
|||
<thead className={headerClasses}>
|
||||
{headerRow}
|
||||
</thead>
|
||||
{this.props.children}
|
||||
{props.children}
|
||||
</table>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
ListingRow: ListingRow,
|
||||
Listing: Listing,
|
||||
};
|
||||
|
||||
Listing.defaultProps = {
|
||||
title: '',
|
||||
fullWidth: true,
|
||||
columnTitles: [],
|
||||
actions: []
|
||||
};
|
||||
|
||||
Listing.propTypes = {
|
||||
title: PropTypes.string,
|
||||
fullWidth: PropTypes.bool,
|
||||
emptyCaption: PropTypes.string.isRequired,
|
||||
columnTitles: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element,
|
||||
])),
|
||||
columnTitleClick: PropTypes.func,
|
||||
actions: PropTypes.arrayOf(PropTypes.node)
|
||||
};
|
||||
|
|
|
|||
121
src/player.jsx
121
src/player.jsx
|
|
@ -1,38 +1,34 @@
|
|||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
* 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/>.
|
||||
*/
|
||||
"use strict";
|
||||
import React from 'react';
|
||||
let cockpit = require("cockpit");
|
||||
let _ = cockpit.gettext;
|
||||
let Term = require("term.js-cockpit");
|
||||
let Journal = require("journal");
|
||||
let $ = require("jquery");
|
||||
require("console.css");
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
let cockpit = require("cockpit");
|
||||
let _ = cockpit.gettext;
|
||||
let React = require("react");
|
||||
let Term = require("term.js-cockpit");
|
||||
let Journal = require("journal");
|
||||
let $ = require("jquery");
|
||||
|
||||
require("console.css");
|
||||
|
||||
/*
|
||||
/*
|
||||
* Get an object field, verifying its presence and type.
|
||||
*/
|
||||
let getValidField = function (object, field, type) {
|
||||
let getValidField = function (object, field, type) {
|
||||
let value;
|
||||
if (!(field in object)) {
|
||||
throw Error("\"" + field + "\" field is missing");
|
||||
|
|
@ -42,19 +38,19 @@
|
|||
throw Error("invalid \"" + field + "\" field type: " + typeof (value));
|
||||
}
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
let scrollToBottom = function(id) {
|
||||
let scrollToBottom = function(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
/*
|
||||
* An auto-loading buffer of recording's packets.
|
||||
*/
|
||||
let PacketBuffer = class {
|
||||
let PacketBuffer = class {
|
||||
/*
|
||||
* Initialize a buffer.
|
||||
*/
|
||||
|
|
@ -209,7 +205,7 @@
|
|||
addPacket(pkt) {
|
||||
/* TODO Validate the packet */
|
||||
/* Add the packet */
|
||||
this.pktList.push(pkt)
|
||||
this.pktList.push(pkt);
|
||||
/* Notify any matching listeners */
|
||||
while (this.idxDfdList.length > 0) {
|
||||
let idxDfd = this.idxDfdList[0];
|
||||
|
|
@ -459,9 +455,9 @@
|
|||
this.journalctl.stream(this.handleStream);
|
||||
/* NOTE: no "done" handler on purpose */
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
let ProgressBar = class extends React.Component {
|
||||
let ProgressBar = class extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.jumpTo = this.jumpTo.bind(this);
|
||||
|
|
@ -469,7 +465,7 @@
|
|||
|
||||
jumpTo(e) {
|
||||
if (this.props.fastForwardFunc) {
|
||||
let percent = parseInt((e.offsetX * 100) / e.currentTarget.clientWidth);
|
||||
let percent = parseInt((e.nativeEvent.offsetX * 100) / e.currentTarget.clientWidth);
|
||||
let ts = parseInt((this.props.length * percent) / 100);
|
||||
this.props.fastForwardFunc(ts);
|
||||
}
|
||||
|
|
@ -486,29 +482,24 @@
|
|||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
let InputPlayer = class extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
};
|
||||
|
||||
let InputPlayer = class extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
return (
|
||||
<div id="input-player" className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<span>Input</span>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<textarea name="input" id="input-textarea" cols="30" rows="10" readonly disabled>{this.props.input}</textarea>
|
||||
<textarea name="input" id="input-textarea" cols="30" rows="10" value={this.props.input} readOnly disabled />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
let Player = class extends React.Component {
|
||||
export class Player extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -558,7 +549,8 @@
|
|||
currentTsPost: 0,
|
||||
scale: 1,
|
||||
error: null,
|
||||
input: ""
|
||||
input: "",
|
||||
mark: 0,
|
||||
};
|
||||
|
||||
this.containerHeight = 290;
|
||||
|
|
@ -608,6 +600,7 @@
|
|||
|
||||
/* Move to beginning of recording */
|
||||
this.recTS = 0;
|
||||
this.setState({currentTsPost: parseInt(this.recTS)});
|
||||
/* Start the playback time */
|
||||
this.locTS = performance.now();
|
||||
|
||||
|
|
@ -782,6 +775,7 @@
|
|||
|
||||
/* Send packet ts to the top */
|
||||
this.props.onTsChange(this.pkt.pos);
|
||||
this.setState({currentTsPost: parseInt(this.pkt.pos)});
|
||||
|
||||
/* Output the packet */
|
||||
if (this.pkt.is_io && !this.pkt.is_output) {
|
||||
|
|
@ -823,7 +817,7 @@
|
|||
}
|
||||
|
||||
clearInputPlayer() {
|
||||
this.setState({input: null});
|
||||
this.setState({input: ""});
|
||||
}
|
||||
|
||||
rewindToStart() {
|
||||
|
|
@ -978,6 +972,9 @@
|
|||
if (this.state.input != prevState.input) {
|
||||
scrollToBottom("input-textarea");
|
||||
}
|
||||
if (prevProps.logsTs != this.props.logsTs) {
|
||||
this.fastForwardToTS(this.props.logsTs);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -995,7 +992,7 @@
|
|||
|
||||
const style = {
|
||||
"transform": "scale(" + this.state.scale + ") translate(" + this.state.term_translate + ")",
|
||||
"transform-origin": "top left",
|
||||
"transformOrigin": "top left",
|
||||
"display": "inline-block",
|
||||
"margin": "0 auto",
|
||||
"position": "absolute",
|
||||
|
|
@ -1004,9 +1001,9 @@
|
|||
};
|
||||
|
||||
const scrollwrap = {
|
||||
"min-width": "630px",
|
||||
"minWidth": "630px",
|
||||
"height": this.containerHeight + "px",
|
||||
"background-color": "#f5f5f5",
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"overflow": this.state.term_scroll,
|
||||
"position": "relative",
|
||||
};
|
||||
|
|
@ -1016,7 +1013,7 @@
|
|||
};
|
||||
|
||||
const progressbar_style = {
|
||||
'margin-top': '10px',
|
||||
'marginTop': '10px',
|
||||
};
|
||||
|
||||
const currentTsPost = function(currentTS, bufLength) {
|
||||
|
|
@ -1121,12 +1118,4 @@
|
|||
window.removeEventListener("keydown", this.handleKeyDown, false);
|
||||
this.state.term.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
Player.propTypes = {
|
||||
matchList: React.PropTypes.array,
|
||||
// onTitleChanged: React.PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = { Player: Player };
|
||||
}());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,27 +16,27 @@
|
|||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
let $ = require("jquery");
|
||||
let cockpit = require("cockpit");
|
||||
let _ = cockpit.gettext;
|
||||
let moment = require("moment");
|
||||
let Journal = require("journal");
|
||||
let React = require("react");
|
||||
let Listing = require("cockpit-components-listing.jsx");
|
||||
let Player = require("./player.jsx");
|
||||
let $ = require("jquery");
|
||||
let cockpit = require("cockpit");
|
||||
let _ = cockpit.gettext;
|
||||
let moment = require("moment");
|
||||
let Journal = require("journal");
|
||||
let Listing = require("cockpit-components-listing.jsx");
|
||||
let Player = require("./player.jsx");
|
||||
|
||||
require("bootstrap-datetime-picker/js/bootstrap-datetimepicker.js");
|
||||
require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.css");
|
||||
require("bootstrap-datetime-picker/js/bootstrap-datetimepicker.js");
|
||||
require("bootstrap-datetime-picker/css/bootstrap-datetimepicker.css");
|
||||
|
||||
/*
|
||||
/*
|
||||
* Convert a number to integer number string and pad with zeroes to
|
||||
* specified width.
|
||||
*/
|
||||
let padInt = function (n, w) {
|
||||
let padInt = function (n, w) {
|
||||
let i = Math.floor(n);
|
||||
let a = Math.abs(i);
|
||||
let s = a.toString();
|
||||
|
|
@ -44,12 +44,12 @@
|
|||
s = '0' + s;
|
||||
}
|
||||
return ((i < 0) ? '-' : '') + s;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
/*
|
||||
* Format date and time for a number of milliseconds since Epoch.
|
||||
*/
|
||||
let formatDateTime = function (ms) {
|
||||
let formatDateTime = function (ms) {
|
||||
let d = new Date(ms);
|
||||
return (
|
||||
padInt(d.getFullYear(), 4) + '-' +
|
||||
|
|
@ -59,12 +59,12 @@
|
|||
padInt(d.getMinutes(), 2) + ':' +
|
||||
padInt(d.getSeconds(), 2)
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
/*
|
||||
/*
|
||||
* Format a time interval from a number of milliseconds.
|
||||
*/
|
||||
let formatDuration = function (ms) {
|
||||
let formatDuration = function (ms) {
|
||||
let v = Math.floor(ms / 1000);
|
||||
let s = Math.floor(v % 60);
|
||||
v = Math.floor(v / 60);
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
str += padInt(m, 2) + ':' + padInt(s, 2);
|
||||
|
||||
return (ms < 0 ? '-' : '') + str;
|
||||
};
|
||||
};
|
||||
|
||||
let parseDate = function(date) {
|
||||
let parseDate = function(date) {
|
||||
let regex = new RegExp(/^\s*(\d\d\d\d-\d\d-\d\d)(\s+(\d\d:\d\d(:\d\d)?))?\s*$/);
|
||||
|
||||
let captures = regex.exec(date);
|
||||
|
|
@ -107,16 +107,16 @@
|
|||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
/*
|
||||
* A component representing a date & time picker based on bootstrap-datetime-picker.
|
||||
* Requires jQuery, bootstrap-datetime-picker, moment.js
|
||||
* Properties:
|
||||
* - onDateChange: function to call on date change event of datepicker.
|
||||
* - date: variable to pass which will be used as initial value.
|
||||
*/
|
||||
let Datetimepicker = class extends React.Component {
|
||||
class Datetimepicker extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleDateChange = this.handleDateChange.bind(this);
|
||||
|
|
@ -197,87 +197,114 @@
|
|||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* A component representing a username input text field.
|
||||
* TODO make as a select / drop-down with list of exisiting users.
|
||||
*/
|
||||
let UserPicker = class extends React.Component {
|
||||
*/
|
||||
class UserPicker extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
this.state = {
|
||||
username: cockpit.location.options.username || "",
|
||||
};
|
||||
}
|
||||
|
||||
handleUsernameChange(e) {
|
||||
this.props.onUsernameChange(e.target.value);
|
||||
const value = e.target.value;
|
||||
this.setState({username: value});
|
||||
this.props.onUsernameChange(value);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="input-group">
|
||||
<input type="text" className="form-control" value={this.props.username}
|
||||
<input type="text" className="form-control" value={this.state.username}
|
||||
onChange={this.handleUsernameChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let HostnamePicker = class extends React.Component {
|
||||
let HostnamePicker = class extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleHostnameChange = this.handleHostnameChange.bind(this);
|
||||
this.state = {
|
||||
hostname: cockpit.location.options.hostname || "",
|
||||
};
|
||||
}
|
||||
|
||||
handleHostnameChange(e) {
|
||||
this.props.onHostnameChange(e.target.value);
|
||||
const value = e.target.value;
|
||||
this.setState({hostname: value});
|
||||
this.props.onHostnameChange(value);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="input-group">
|
||||
<input type="text" className="form-control" value={this.props.hostname}
|
||||
<input type="text" className="form-control" value={this.state.hostname}
|
||||
onChange={this.handleHostnameChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function LogElement(props) {
|
||||
function LogElement(props) {
|
||||
const entry = props.entry;
|
||||
const start = props.start;
|
||||
const end = props.end;
|
||||
const entry_timestamp = entry.__REALTIME_TIMESTAMP / 1000;
|
||||
const cursor = entry.__CURSOR;
|
||||
const entry_timestamp = parseInt(entry.__REALTIME_TIMESTAMP / 1000);
|
||||
|
||||
const timeClick = function(e) {
|
||||
const ts = entry_timestamp - start;
|
||||
if (ts > 0) {
|
||||
props.jumpToTs(ts);
|
||||
} else {
|
||||
props.jumpToTs(0);
|
||||
}
|
||||
};
|
||||
const messageClick = () => {
|
||||
const url = '/system/logs#/' + cursor + '?parent_options={}';
|
||||
const win = window.open(url, '_blank');
|
||||
win.focus();
|
||||
};
|
||||
|
||||
let className = 'cockpit-logline';
|
||||
if (start < entry_timestamp && end > entry_timestamp) {
|
||||
className = 'cockpit-logline highlighted';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className} data-cursor={entry.__CURSOR}>
|
||||
<div className={className} data-cursor={cursor} key={cursor}>
|
||||
<div className="cockpit-log-warning">
|
||||
<i className="fa fa-exclamation-triangle" />
|
||||
</div>
|
||||
<div className="logs-view-log-time">{formatDateTime(parseInt(entry.__REALTIME_TIMESTAMP / 1000))}</div>
|
||||
<span className="cockpit-log-message">{entry.MESSAGE}</span>
|
||||
<div className="logs-view-log-time" onClick={timeClick}>{formatDateTime(entry_timestamp)}</div>
|
||||
<span className="cockpit-log-message" onClick={messageClick}>{entry.MESSAGE}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function LogsView(props) {
|
||||
function LogsView(props) {
|
||||
const entries = props.entries;
|
||||
const start = props.start;
|
||||
const end = props.end;
|
||||
const rows = entries.map((entry) =>
|
||||
<LogElement entry={entry} start={start} end={end} />
|
||||
<LogElement key={entry.__CURSOR} entry={entry} start={start} end={end} jumpToTs={props.jumpToTs} />
|
||||
);
|
||||
return (
|
||||
<div className="panel panel-default cockpit-log-panel" id="logs-view">
|
||||
{rows}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let Logs = class extends React.Component {
|
||||
class Logs extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.journalctlError = this.journalctlError.bind(this);
|
||||
|
|
@ -409,7 +436,7 @@
|
|||
<button className="btn btn-default" style={{"float":"right"}} onClick={this.loadEarlier}>Load earlier entries</button>
|
||||
</div>
|
||||
<LogsView entries={this.state.entries} start={this.props.recording.start}
|
||||
end={this.props.recording.end} />
|
||||
end={this.props.recording.end} jumpToTs={this.props.jumpToTs} />
|
||||
<div className="panel-heading">
|
||||
<button className="btn btn-default" onClick={this.loadLater}>Load later entries</button>
|
||||
</div>
|
||||
|
|
@ -419,15 +446,15 @@
|
|||
return (<div>Loading...</div>);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* A component representing a single recording view.
|
||||
* Properties:
|
||||
* - recording: either null for no recording data available yet, or a
|
||||
* recording object, as created by the View below.
|
||||
*/
|
||||
let Recording = class extends React.Component {
|
||||
class Recording extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.goBackToList = this.goBackToList.bind(this);
|
||||
|
|
@ -482,6 +509,7 @@
|
|||
(<Player.Player
|
||||
ref="player"
|
||||
matchList={this.props.recording.matchList}
|
||||
logsTs={this.props.logsTs}
|
||||
onTsChange={this.props.onTsChange} />);
|
||||
|
||||
return (
|
||||
|
|
@ -502,6 +530,7 @@
|
|||
</div>
|
||||
<div className="panel-body">
|
||||
<table className="form-table-ct">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{_("ID")}</td>
|
||||
<td>{r.id}</td>
|
||||
|
|
@ -535,6 +564,7 @@
|
|||
<td>{_("User")}</td>
|
||||
<td>{r.user}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -545,14 +575,14 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* A component representing a list of recordings.
|
||||
* Properties:
|
||||
* - list: an array with recording objects, as created by the View below
|
||||
*/
|
||||
let RecordingList = class extends React.Component {
|
||||
class RecordingList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleColumnClick = this.handleColumnClick.bind(this);
|
||||
|
|
@ -618,17 +648,17 @@
|
|||
getColumnTitles() {
|
||||
let columnTitles = [
|
||||
(<div id="user" className="sort" onClick={this.handleColumnClick}><span>{_("User")}</span> <div
|
||||
ref="user" className="sort-icon"></div></div>),
|
||||
ref="user" className="sort-icon" /></div>),
|
||||
(<div id="start" className="sort" onClick={this.handleColumnClick}><span>{_("Start")}</span> <div
|
||||
ref="start" className="sort-icon"></div></div>),
|
||||
ref="start" className="sort-icon" /></div>),
|
||||
(<div id="end" className="sort" onClick={this.handleColumnClick}><span>{_("End")}</span> <div
|
||||
ref="end" className="sort-icon"></div></div>),
|
||||
ref="end" className="sort-icon" /></div>),
|
||||
(<div id="duration" className="sort" onClick={this.handleColumnClick}><span>{_("Duration")}</span> <div
|
||||
ref="duration" className="sort-icon"></div></div>),
|
||||
ref="duration" className="sort-icon" /></div>),
|
||||
];
|
||||
if (this.props.diff_hosts === true) {
|
||||
columnTitles.push((<div id="hostname" className="sort" onClick={this.handleColumnClick}>
|
||||
<span>{_("Hostname")}</span> <div ref="hostname" className="sort-icon"></div></div>));
|
||||
<span>{_("Hostname")}</span> <div ref="hostname" className="sort-icon" /></div>));
|
||||
}
|
||||
return columnTitles;
|
||||
}
|
||||
|
|
@ -637,7 +667,7 @@
|
|||
let columns = [r.user,
|
||||
formatDateTime(r.start),
|
||||
formatDateTime(r.end),
|
||||
formatDuration(r.end - r.start)]
|
||||
formatDuration(r.end - r.start)];
|
||||
if (this.props.diff_hosts === true) {
|
||||
columns.push(r.hostname);
|
||||
}
|
||||
|
|
@ -653,6 +683,7 @@
|
|||
let r = list[i];
|
||||
let columns = this.getColumns(r);
|
||||
rows.push(<Listing.ListingRow
|
||||
key={r.id}
|
||||
rowId={r.id}
|
||||
columns={columns}
|
||||
navigateToItem={this.navigateToRecording.bind(this, r)} />);
|
||||
|
|
@ -661,7 +692,8 @@
|
|||
<div>
|
||||
<div className="content-header-extra">
|
||||
<table className="form-table-ct">
|
||||
<th>
|
||||
<thead>
|
||||
<tr>
|
||||
<td className="top">
|
||||
<label className="control-label" htmlFor="dateSince">Since</label>
|
||||
</td>
|
||||
|
|
@ -680,15 +712,14 @@
|
|||
<label className="control-label" htmlFor="username">Username</label>
|
||||
</td>
|
||||
<td>
|
||||
<UserPicker onUsernameChange={this.props.onUsernameChange}
|
||||
username={this.props.username} />
|
||||
<UserPicker onUsernameChange={this.props.onUsernameChange} />
|
||||
</td>
|
||||
<td className="top">
|
||||
<label className="control-label" htmlFor="hostname">Hostname</label>
|
||||
</td>
|
||||
<td>
|
||||
<HostnamePicker onHostnameChange={this.props.onHostnameChange}
|
||||
hostname={this.props.hostname}/>
|
||||
hostname={this.props.hostname} />
|
||||
</td>
|
||||
<td className="top">
|
||||
<label className="control-label" htmlFor="config">Configuration</label>
|
||||
|
|
@ -697,7 +728,8 @@
|
|||
<a href="/cockpit/@localhost/session-recording/config.html" className="btn btn-default" data-toggle="modal">
|
||||
<i className="fa fa-cog" aria-hidden="true" /></a>
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<Listing.Listing title={_("Sessions")}
|
||||
|
|
@ -709,14 +741,14 @@
|
|||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* A component representing the view upon a list of recordings, or a
|
||||
* single recording. Extracts the ID of the recording to display from
|
||||
* cockpit.location.path[0]. If it's zero, displays the list.
|
||||
*/
|
||||
let View = class extends React.Component {
|
||||
class View extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onLocationChanged = this.onLocationChanged.bind(this);
|
||||
|
|
@ -726,6 +758,7 @@
|
|||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
this.handleHostnameChange = this.handleHostnameChange.bind(this);
|
||||
this.handleTsChange = this.handleTsChange.bind(this);
|
||||
this.handleLogTsChange = this.handleLogTsChange.bind(this);
|
||||
/* Journalctl instance */
|
||||
this.journalctl = null;
|
||||
/* Recording ID journalctl instance is invoked with */
|
||||
|
|
@ -744,12 +777,13 @@
|
|||
dateUntil: cockpit.location.options.dateUntil || null,
|
||||
dateUntilLastValid: null,
|
||||
/* value to filter recordings by username */
|
||||
username: cockpit.location.options.username || null,
|
||||
hostname: cockpit.location.options.hostname || null,
|
||||
username: cockpit.location.options.username || "",
|
||||
hostname: cockpit.location.options.hostname || "",
|
||||
error_tlog_uid: false,
|
||||
diff_hosts: false,
|
||||
curTs: null,
|
||||
}
|
||||
logsTs: null,
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -949,6 +983,10 @@
|
|||
this.setState({curTs: ts});
|
||||
}
|
||||
|
||||
handleLogTsChange(ts) {
|
||||
this.setState({logsTs: ts});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let proc = cockpit.spawn(["getent", "passwd", "tlog"]);
|
||||
|
||||
|
|
@ -1026,11 +1064,12 @@
|
|||
} else {
|
||||
return (
|
||||
<div>
|
||||
<Recording recording={this.recordingMap[this.state.recordingID]} onTsChange={this.handleTsChange} />
|
||||
<Recording recording={this.recordingMap[this.state.recordingID]} onTsChange={this.handleTsChange} logsTs={this.state.logsTs} />
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<Logs recording={this.recordingMap[this.state.recordingID]} curTs={this.state.curTs} />
|
||||
<Logs recording={this.recordingMap[this.state.recordingID]} curTs={this.state.curTs}
|
||||
jumpToTs={this.handleLogTsChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1038,7 +1077,6 @@
|
|||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
React.render(<View />, document.getElementById('view'));
|
||||
}());
|
||||
ReactDOM.render(<View />, document.getElementById('view'));
|
||||
|
|
|
|||
|
|
@ -17,18 +17,20 @@
|
|||
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
import Player from "./player";
|
||||
|
||||
var React = require("react");
|
||||
var Term = require("term");
|
||||
let $ = require("jquery");
|
||||
|
||||
require("console.css");
|
||||
require("jquery-resizable");
|
||||
require("jquery-resizable/resizable.css");
|
||||
"use strict";
|
||||
|
||||
/*
|
||||
var React = require("react");
|
||||
var Term = require("term");
|
||||
let $ = require("jquery");
|
||||
|
||||
require("console.css");
|
||||
require("jquery-resizable");
|
||||
require("jquery-resizable/resizable.css");
|
||||
|
||||
/*
|
||||
* A terminal component that communicates over a cockpit channel.
|
||||
*
|
||||
* The only required property is 'channel', which must point to a cockpit
|
||||
|
|
@ -43,9 +45,9 @@
|
|||
*
|
||||
* Call focus() to set the input focus on the terminal.
|
||||
*/
|
||||
var Terminal = React.createClass({
|
||||
var Terminal = React.createClass({
|
||||
propTypes: {
|
||||
cols: React.PropTypes.number,
|
||||
// cols: React.PropTypes.number,
|
||||
rows: React.PropTypes.number,
|
||||
channel: React.PropTypes.object.isRequired,
|
||||
onTitleChanged: React.PropTypes.func
|
||||
|
|
@ -118,7 +120,7 @@
|
|||
let style = {
|
||||
'min-width': '300px',
|
||||
'min-height': '100px',
|
||||
}
|
||||
};
|
||||
// ensure react never reuses this div by keying it with the terminal widget
|
||||
return <div ref="terminal" style={style} className="console-ct" key={this.state.terminal} />;
|
||||
},
|
||||
|
|
@ -185,7 +187,7 @@
|
|||
send: function(value) {
|
||||
this.state.terminal.send(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = { Terminal: Terminal };
|
||||
}());
|
||||
// module.exports = { Terminal: Terminal };
|
||||
export class Terminal;
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ var info = {
|
|||
"config": [
|
||||
"./config.jsx",
|
||||
"./recordings.css",
|
||||
"./table.css",
|
||||
]
|
||||
},
|
||||
files: [
|
||||
|
|
@ -38,6 +39,7 @@ var info = {
|
|||
"player.jsx",
|
||||
"recordings.jsx",
|
||||
"recordings.css",
|
||||
"table.css",
|
||||
"terminal.jsx",
|
||||
"manifest.json",
|
||||
"timer.css",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue