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

237
src/config.jsx
View file

@ -32,36 +32,72 @@
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.setConfig = this.setConfig.bind(this);
this.prepareConfig = this.prepareConfig.bind(this);
this.fileReadFailed = this.fileReadFailed.bind(this);
this.readConfig = this.readConfig.bind(this);
this.file = null;
this.config = null;
this.state = {
config: null,
file_error: null,
config_loaded: false,
file_error: false,
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) {
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
const name = e.target.name;
const config = this.state.config;
config[name] = value;
this.forceUpdate();
}
prepareConfig() {
this.state.config.latency = parseInt(this.state.config.latency);
if (this.state.config.input === true) {
// log.input
}
const state = {};
state[name] = value;
this.setState(state);
}
handleSubmit(event) {
this.setState({submitting:"block"});
this.prepareConfig();
this.file.replace(this.state.config).done(() => {
let config = {
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"});
})
.fail((error) => {
@ -71,15 +107,47 @@
}
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) {
console.log(reason);
this.setState({file_error: reason});
getConfig() {
let proc = cockpit.spawn(["tlog-rec-session", "--configuration"]);
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) {
return json.parse(data, null, true);
};
@ -95,27 +163,37 @@
this.file = cockpit.file("/etc/tlog/tlog-rec-session.conf", {
syntax: syntax_object,
// binary: boolean,
// max_read_size: int,
superuser: true,
// host: string
});
/*
let promise = this.file.read();
promise.done((data) => {
if (data === null) {
this.fileReadFailed();
return;
}
this.setConfig(data);
}).fail((data) => {
this.fileReadFailed(data);
});
*/
}
fileReadFailed(reason) {
console.log(reason);
this.setState({file_error: reason});
}
componentWillMount() {
this.getConfig();
this.readConfig();
}
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 (
<form onSubmit={this.handleSubmit}>
<table className="form-table-ct col-sm-3">
@ -123,71 +201,68 @@
<tr>
<td className="top"><label htmlFor="shell" className="control-label">Shell</label></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} />
</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.config.notice}
<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="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} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="latency" className="control-label">Payload Size, bytes</label></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} />
</td>
</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>
<input type="checkbox" id="input" name="input" defaultChecked={this.state.config.log.input}
onChange={this.handleInputChange} />
<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="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>
<input type="checkbox" id="output" name="output" defaultChecked={this.state.config.log.output}
onChange={this.handleInputChange} />
<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="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>
<input type="checkbox" id="window" name="window" defaultChecked={this.state.config.log.window}
onChange={this.handleInputChange} />
<input type="checkbox" id="log_window" name="log_window" defaultChecked={this.state.log_window} onChange={this.handleInputChange} />
</td>
</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>
<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} />
</td>
</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>
<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} />
</td>
</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>
<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="pass">Pass</option>
<option value="delay">Delay</option>
@ -196,59 +271,62 @@
</td>
</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>
<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} />
</td>
</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>
<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} />
</td>
</tr>
<tr>
<td className="top"><label htmlFor="syslog_priority" className="control-label">Syslog Priority</label></td>
<td>
<input type="text" id="syslog_priority" name="syslog_priority" value={this.state.config.syslog.priority}
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}>
<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="path" className="control-label">Journal Augment</label></td>
<td className="top"><label htmlFor="journal_priority" className="control-label">Journal Priority</label></td>
<td>
<input type="checkbox" id="augment" name="augment" defaultChecked={this.state.config.journal.augment}
onChange={this.handleInputChange} />
<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="path" className="control-label">Writer</label></td>
<td className="top"><label htmlFor="writer" className="control-label">Writer</label></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="journal">Journal</option>
<option value="syslog">Syslog</option>
<option value="file">File</option>
</select>
</td>
</tr>
<tr>
<td className="top" />
<td>
<td className="top">
<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>
</tr>
</tbody>
@ -292,11 +370,12 @@
}
setConfig(data) {
console.log(data);
const config = {...data['session_recording']};
this.setState(config);
}
componentDidMount() {
componentWillMount() {
let syntax_object = {
parse: ini.parse,
stringify: ini.stringify
@ -319,10 +398,11 @@
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;
obj.session_recording = {};
obj.session_recording.scope = this.state.scope;
obj.session_recording.users = this.state.users;
obj.session_recording.groups = this.state.groups;
let _this = this;
this.file.replace(obj).done(function() {
_this.setState({submitting:"none"});
@ -350,6 +430,7 @@
</select>
</td>
</tr>
{this.state.scope === "some" &&
<tr>
<td><label htmlFor="users">Users</label></td>
<td>
@ -358,19 +439,21 @@
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} />
value={this.state.groups}
className="form-control" onChange={this.handleInputChange} />
</td>
</tr>
}
<tr>
<td />
<td><button className="btn btn-default" type="submit">Save</button></td>
<td>
<button className="btn btn-default" type="submit">Save</button>
<span className="spinner spinner-sm" style={{display: this.state.submitting}} />
<span style={{display: this.state.submitting}}>Saving...</span>
</td>
</tr>
</tbody>