Config page refactoring

This commit is contained in:
Kyrylo Gliebov 2018-10-02 19:05:29 +02:00
parent 460b044720
commit f69b9c1887
4 changed files with 458 additions and 443 deletions

View file

@ -30,34 +30,8 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</head> </head>
<body> <body>
<div> <div id="view"></div>
<div class="container-fluid"> <script type="text/javascript" src="config.js"></script>
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="/cockpit/@localhost/session-recording/index.html">Session Recording</a></li>
<li class="active">Configuration</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><span>General Configuration</span></div>
<div class="panel-body" id="sr_config"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><span>SSSD Configuration</span></div>
<div class="panel-body" id="sssd_config"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="config.js"></script>
</body> </body>
</html> </html>

View file

@ -16,17 +16,15 @@
* You should have received a copy of the GNU Lesser General Public License * You should have received a copy of the GNU Lesser General Public License
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>. * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/ */
"use strict";
(function() { let cockpit = require("cockpit");
"use strict"; let React = require("react");
let ReactDOM = require("react-dom");
let json = require('comment-json');
let ini = require('ini');
let cockpit = require("cockpit"); class Config extends React.Component {
let React = require("react");
let ReactDOM = require("react-dom");
let json = require('comment-json');
let ini = require('ini');
class Config extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
@ -344,9 +342,9 @@
); );
} }
} }
} }
class SssdConfig extends React.Component { class SssdConfig extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
@ -370,7 +368,6 @@
} }
setConfig(data) { setConfig(data) {
console.log(data);
const config = {...data['session_recording']}; const config = {...data['session_recording']};
this.setState(config); this.setState(config);
} }
@ -461,8 +458,48 @@
</form> </form>
); );
} }
} }
ReactDOM.render(<Config />, document.getElementById('sr_config')); class ConfigView extends React.Component {
ReactDOM.render(<SssdConfig />, document.getElementById('sssd_config')); render() {
}()); const goBack = () => {
cockpit.jump(['session-recording']);
};
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-3">
<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-3">
<div className="panel panel-default">
<div className="panel-heading"><span>SSSD Configuration</span></div>
<div className="panel-body" id="sssd_config">
<SssdConfig />
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<ConfigView />, document.getElementById('view'));

View file

@ -30,7 +30,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</head> </head>
<body> <body>
<div id="view"/> <div id="view"></div>
<script type="text/javascript" src="recordings.js"></script> <script type="text/javascript" src="recordings.js"></script>
</body> </body>

View file

@ -605,6 +605,7 @@ class View extends React.Component {
this.handleTsChange = this.handleTsChange.bind(this); this.handleTsChange = this.handleTsChange.bind(this);
this.handleLogTsChange = this.handleLogTsChange.bind(this); this.handleLogTsChange = this.handleLogTsChange.bind(this);
this.handleDateSinceChange = this.handleDateSinceChange.bind(this); this.handleDateSinceChange = this.handleDateSinceChange.bind(this);
this.openConfig = this.openConfig.bind(this);
/* Journalctl instance */ /* Journalctl instance */
this.journalctl = null; this.journalctl = null;
/* Recording ID journalctl instance is invoked with */ /* Recording ID journalctl instance is invoked with */
@ -831,6 +832,10 @@ class View extends React.Component {
this.setState({logsTs: ts}); this.setState({logsTs: ts});
} }
openConfig() {
cockpit.jump(['session-recording/config']);
}
componentDidMount() { componentDidMount() {
let proc = cockpit.spawn(["getent", "passwd", "tlog"]); let proc = cockpit.spawn(["getent", "passwd", "tlog"]);
@ -929,8 +934,7 @@ class View extends React.Component {
<label className="control-label" htmlFor="config">Configuration</label> <label className="control-label" htmlFor="config">Configuration</label>
</td> </td>
<td className="top"> <td className="top">
<a href="/cockpit/@localhost/session-recording/config.html" className="btn btn-default" data-toggle="modal"> <button className="btn btn-default" onClick={this.openConfig}><i className="fa fa-cog" aria-hidden="true" /></button>
<i className="fa fa-cog" aria-hidden="true" /></a>
</td> </td>
</tr> </tr>
</thead> </thead>