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

Fix Config forms

Browse source
This commit is contained in:
Kyrylo Gliebov 2018-09-25 17:57:57 +02:00
parent 2aa3270d97
commit b59140d328
1 changed files with 160 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

233
src/config.jsx
View file

@ -32,36 +32,72 @@
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
this.setConfig = this.setConfig.bind(this); this.setConfig = this.setConfig.bind(this);
this.prepareConfig = this.prepareConfig.bind(this);
this.fileReadFailed = this.fileReadFailed.bind(this); this.fileReadFailed = this.fileReadFailed.bind(this);
this.readConfig = this.readConfig.bind(this);
this.file = null; this.file = null;
this.config = null;
this.state = { this.state = {
config: null, config_loaded: false,
file_error: null, file_error: false,
submitting: "none", submitting: "none",
shell: "",
notice: "",
latency: "",
payload: "",
log_input: false,
log_output: true,
log_window: true,
limit_rate: "",
limit_burst: "",
limit_action: "",
file_path: "",
syslog_facility: "",
syslog_priority: "",
journal_augment: "",
journal_priority: "",
writer: "",
}; };
} }
handleInputChange(e) { handleInputChange(e) {
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value; const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
const name = e.target.name; const name = e.target.name;
const config = this.state.config; const state = {};
config[name] = value; state[name] = value;
this.setState(state);
this.forceUpdate();
}
prepareConfig() {
this.state.config.latency = parseInt(this.state.config.latency);
if (this.state.config.input === true) {
// log.input
}
} }
handleSubmit(event) { handleSubmit(event) {
this.setState({submitting:"block"}); this.setState({submitting:"block"});
this.prepareConfig(); let config = {
this.file.replace(this.state.config).done(() => { shell: this.state.shell,
notice: this.state.notice,
latency: parseInt(this.state.latency),
payload: parseInt(this.state.payload),
log: {
input: this.state.log_input,
output: this.state.log_output,
window: this.state.log_window,
},
limit: {
rate: parseInt(this.state.limit_rate),
burst: parseInt(this.state.limit_burst),
action: this.state.limit_action,
},
file: {
path: this.state.file_path,
},
syslog: {
facility: this.state.syslog_facility,
priority: this.state.syslog_priority,
},
journal: {
priority: this.state.journal_priority,
augment: this.state.journal_augment
},
writer: this.state.writer
};
this.file.replace(config).done(() => {
this.setState({submitting:"none"}); this.setState({submitting:"none"});
}) })
.fail((error) => { .fail((error) => {
@ -71,15 +107,47 @@
} }
setConfig(data) { setConfig(data) {
this.setState({config: data}); delete data.configuration;
delete data.args;
var flattenObject = function(ob) {
var toReturn = {};
for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if ((typeof ob[i]) == 'object') {
var flatObject = flattenObject(ob[i]);
for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
toReturn[i + '_' + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
return toReturn;
};
let state = flattenObject(data);
state.config_loaded = true;
this.setState(state);
} }
fileReadFailed(reason) { getConfig() {
console.log(reason); let proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
this.setState({file_error: reason});
proc.stream((data) => {
this.setConfig(json.parse(data, null, true));
proc.close();
});
proc.fail((fail) => {
console.log(fail);
this.readConfig();
});
} }
componentDidMount() { readConfig() {
let parseFunc = function(data) { let parseFunc = function(data) {
return json.parse(data, null, true); return json.parse(data, null, true);
}; };
@ -95,27 +163,37 @@
this.file = cockpit.file("/etc/tlog/tlog-rec-session.conf", { this.file = cockpit.file("/etc/tlog/tlog-rec-session.conf", {
syntax: syntax_object, syntax: syntax_object,
// binary: boolean,
// max_read_size: int,
superuser: true, superuser: true,
// host: string
}); });
/*
let promise = this.file.read(); let promise = this.file.read();
promise.done((data) => { promise.done((data) => {
if (data === null) { if (data === null) {
this.fileReadFailed(); this.fileReadFailed();
return;
} }
this.setConfig(data);
}).fail((data) => { }).fail((data) => {
this.fileReadFailed(data); this.fileReadFailed(data);
}); });
*/
}
fileReadFailed(reason) {
console.log(reason);
this.setState({file_error: reason});
}
componentWillMount() {
this.getConfig();
this.readConfig();
} }
render() { render() {
if (this.state.config != null && this.state.file_error === null) { 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 ( return (
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<table className="form-table-ct col-sm-3"> <table className="form-table-ct col-sm-3">
@ -123,71 +201,68 @@
<tr> <tr>
<td className="top"><label htmlFor="shell" className="control-label">Shell</label></td> <td className="top"><label htmlFor="shell" className="control-label">Shell</label></td>
<td> <td>
<input type="text" id="shell" name="shell" value={this.state.config.shell} <input type="text" id="shell" name="shell" value={this.state.shell}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="notice" className="control-label">Notice</label></td> <td className="top"><label htmlFor="notice" className="control-label">Notice</label></td>
<td> <td>
<input type="text" id="notice" name="notice" value={this.state.config.notice} <input type="text" id="notice" name="notice" value={this.state.notice}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="latency" className="control-label">Latency</label></td> <td className="top"><label htmlFor="latency" className="control-label">Latency</label></td>
<td> <td>
<input type="text" id="latency" name="latency" value={this.state.config.latency} <input type="number" step="1" id="latency" name="latency" value={this.state.latency}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></td> <td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></td>
<td> <td>
<input type="text" id="payload" name="payload" value={this.state.config.payload} <input type="number" step="1" id="payload" name="payload" value={this.state.payload}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="input" className="control-label">Log User's Input</label></td> <td className="top"><label htmlFor="log_input" className="control-label">Log User's Input</label></td>
<td> <td>
<input type="checkbox" id="input" name="input" defaultChecked={this.state.config.log.input} <input type="checkbox" id="log_input" name="log_input" defaultChecked={this.state.log_input} onChange={this.handleInputChange} />
onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="output" className="control-label">Log User's Output</label></td> <td className="top"><label htmlFor="log_output" className="control-label">Log User's Output</label></td>
<td> <td>
<input type="checkbox" id="output" name="output" defaultChecked={this.state.config.log.output} <input type="checkbox" id="log_output" name="log_output" defaultChecked={this.state.log_output} onChange={this.handleInputChange} />
onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="window" className="control-label">Log Window Resize</label></td> <td className="top"><label htmlFor="log_window" className="control-label">Log Window Resize</label></td>
<td> <td>
<input type="checkbox" id="window" name="window" defaultChecked={this.state.config.log.window} <input type="checkbox" id="log_window" name="log_window" defaultChecked={this.state.log_window} onChange={this.handleInputChange} />
onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="rate" className="control-label">Limit Rate, bytes/sec</label></td> <td className="top"><label htmlFor="limit_rate" className="control-label">Limit Rate, bytes/sec</label></td>
<td> <td>
<input type="text" id="rate" name="rate" value={this.state.config.limit.rate} <input type="number" step="1" id="limit_rate" name="limit_rate" value={this.state.limit_rate}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="burst" className="control-label">Burst, bytes</label></td> <td className="top"><label htmlFor="limit_burst" className="control-label">Burst, bytes</label></td>
<td> <td>
<input type="text" id="burst" name="burst" value={this.state.config.limit.burst} <input type="number" step="1" id="limit_burst" name="limit_burst" value={this.state.limit_burst}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="action" className="control-label">Logging Limit Action</label></td> <td className="top"><label htmlFor="limit_action" className="control-label">Logging Limit Action</label></td>
<td> <td>
<select name="action" id="action" onChange={this.handleInputChange} value={this.state.config.limit.action}> <select name="limit_action" id="limit_action" onChange={this.handleInputChange} value={this.state.limit_action} className="form-control">
<option value="" /> <option value="" />
<option value="pass">Pass</option> <option value="pass">Pass</option>
<option value="delay">Delay</option> <option value="delay">Delay</option>
@ -196,59 +271,62 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="path" className="control-label">File Path</label></td> <td className="top"><label htmlFor="file_path" className="control-label">File Path</label></td>
<td> <td>
<input type="text" id="path" name="path" defaultChecked={this.state.config.file.path} <input type="text" id="file_path" name="file_path" defaultChecked={this.state.file_path}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="facility" className="control-label">Syslog Facility</label></td> <td className="top"><label htmlFor="syslog_facility" className="control-label">Syslog Facility</label></td>
<td> <td>
<input type="text" id="facility" name="facility" value={this.state.config.syslog.facility} <input type="text" id="syslog_facility" name="syslog_facility" value={this.state.syslog_facility}
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="syslog_priority" className="control-label">Syslog Priority</label></td> <td className="top"><label htmlFor="syslog_priority" className="control-label">Syslog Priority</label></td>
<td> <td>
<input type="text" id="syslog_priority" name="syslog_priority" value={this.state.config.syslog.priority} <select name="syslog_priority" id="syslog_priority" onChange={this.handleInputChange} value={this.state.syslog_priority} className="form-control">
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="path" className="control-label">Journal Priority</label></td>
<td>
<select name="journal_priority" id="journal_priority" onChange={this.handleInputChange} value={this.state.config.journal.priority}>
<option value="" /> <option value="" />
<option value="info">Info</option> <option value="info">Info</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="path" className="control-label">Journal Augment</label></td> <td className="top"><label htmlFor="journal_priority" className="control-label">Journal Priority</label></td>
<td> <td>
<input type="checkbox" id="augment" name="augment" defaultChecked={this.state.config.journal.augment} <select name="journal_priority" id="journal_priority" onChange={this.handleInputChange} value={this.state.journal_priority} className="form-control">
onChange={this.handleInputChange} /> <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> </td>
</tr> </tr>
<tr> <tr>
<td className="top"><label htmlFor="path" className="control-label">Writer</label></td> <td className="top"><label htmlFor="writer" className="control-label">Writer</label></td>
<td> <td>
<select name="writer" id="writer" onChange={this.handleInputChange} value={this.state.config.writer}> <select name="writer" id="writer" onChange={this.handleInputChange} value={this.state.writer} className="form-control">
<option value="" /> <option value="" />
<option value="journal">Journal</option> <option value="journal">Journal</option>
<option value="syslog">Syslog</option> <option value="syslog">Syslog</option>
<option value="file">File</option> <option value="file">File</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="top" /> <td className="top">
<td>
<button className="btn btn-default" type="submit">Save</button> <button className="btn btn-default" type="submit">Save</button>
<div className="spinner spinner-sm" style={{display: this.state.submitting}} /> </td>
<td>
<span style={{display: this.state.submitting}}>Saving...</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -292,11 +370,12 @@
} }
setConfig(data) { setConfig(data) {
console.log(data);
const config = {...data['session_recording']}; const config = {...data['session_recording']};
this.setState(config); this.setState(config);
} }
componentDidMount() { componentWillMount() {
let syntax_object = { let syntax_object = {
parse: ini.parse, parse: ini.parse,
stringify: ini.stringify stringify: ini.stringify
@ -319,10 +398,11 @@
handleSubmit(e) { handleSubmit(e) {
this.setState({submitting:"block"}); this.setState({submitting:"block"});
const obj = {}; const obj = {};
obj.users = this.state.users; obj.session_recording = {};
obj.groups = this.state.groups; obj.session_recording.scope = this.state.scope;
obj.scope = this.state.scope; obj.session_recording.users = this.state.users;
obj['session_recording'] = this.state; obj.session_recording.groups = this.state.groups;
let _this = this; let _this = this;
this.file.replace(obj).done(function() { this.file.replace(obj).done(function() {
_this.setState({submitting:"none"}); _this.setState({submitting:"none"});
@ -350,6 +430,7 @@
</select> </select>
</td> </td>
</tr> </tr>
{this.state.scope === "some" &&
<tr> <tr>
<td><label htmlFor="users">Users</label></td> <td><label htmlFor="users">Users</label></td>
<td> <td>
@ -358,6 +439,8 @@
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
}
{this.state.scope === "some" &&
<tr> <tr>
<td><label htmlFor="groups">Groups</label></td> <td><label htmlFor="groups">Groups</label></td>
<td> <td>
@ -366,11 +449,11 @@
className="form-control" onChange={this.handleInputChange} /> className="form-control" onChange={this.handleInputChange} />
</td> </td>
</tr> </tr>
}
<tr> <tr>
<td /> <td><button className="btn btn-default" type="submit">Save</button></td>
<td> <td>
<button className="btn btn-default" type="submit">Save</button> <span style={{display: this.state.submitting}}>Saving...</span>
<span className="spinner spinner-sm" style={{display: this.state.submitting}} />
</td> </td>
</tr> </tr>
</tbody> </tbody>