p15670423
/
monkey
1
0
Fork 5
Code Issues Pull Requests 3 Projects Releases Wiki Activity

Merge pull request #69 from guardicore/feature/add-config-import-export 

Feature/add config import export
This commit is contained in:
Daniel Goldberg 2017-11-02 19:56:09 +02:00 committed by GitHub
parent d6383f4267 2b55258e2e
commit 05ddc592ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
monkey_island/cc/ui/package.json
View File

@ -64,6 +64,7 @@
"bootstrap": "^3.3.7",
"core-js": "^2.5.1",
"fetch": "^1.1.0",
"js-file-download": "^0.4.1",
"normalize.css": "^4.0.0",
"prop-types": "^15.5.10",
"react": "^15.6.1",

85
monkey_island/cc/ui/src/components/pages/ConfigurePage.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import Form from 'react-jsonschema-form';
import {Col, Nav, NavItem} from 'react-bootstrap';
import fileDownload from 'js-file-download';
class ConfigurePageComponent extends React.Component {
constructor(props) {
@ -14,8 +15,7 @@ class ConfigurePageComponent extends React.Component {
this.state = {
schema: {},
configuration: {},
saved: false,
reset: false,
lastAction: 'none',
sections: [],
selectedSection: 'basic',
allMonkeysAreDead: true
@ -52,8 +52,7 @@ class ConfigurePageComponent extends React.Component {
.then(res => res.json())
.then(res => {
this.setState({
saved: true,
reset: false,
lastAction: 'saved',
schema: res.schema,
configuration: res.configuration
});
@ -92,8 +91,7 @@ class ConfigurePageComponent extends React.Component {
.then(res => res.json())
.then(res => {
this.setState({
reset: true,
saved: false,
lastAction: 'reset',
schema: res.schema,
configuration: res.configuration
});
@ -101,6 +99,32 @@ class ConfigurePageComponent extends React.Component {
});
};
onReadFile = (event) => {
try {
this.setState({
configuration: JSON.parse(event.target.result),
selectedSection: 'basic',
lastAction: 'import_success'
});
this.currentSection = 'basic';
this.currentFormData = {};
} catch(SyntaxError) {
this.setState({lastAction: 'import_failure'});
}
};
exportConfig = () => {
this.updateConfigSection();
fileDownload(JSON.stringify(this.state.configuration, null, 2), 'monkey.conf');
};
importConfig = (event) => {
let reader = new FileReader();
reader.onload = this.onReadFile;
reader.readAsText(event.target.files[0]);
event.target.value = null;
};
updateMonkeysRunning = () => {
fetch('/api')
.then(res => res.json())
@ -160,22 +184,45 @@ class ConfigurePageComponent extends React.Component {
Reset to defaults
</button>
</div>
{ this.state.reset ?
<div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Configuration reset successfully.
</div>
: ''}
{ this.state.saved ?
<div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Configuration saved successfully.
</div>
: ''}
</div>
</Form>
: ''}
<div className="text-center">
<button onClick={() => document.getElementById('uploadInputInternal').click()}
className="btn btn-info btn-lg" style={{margin: '5px'}}>
Import Config
</button>
<input id="uploadInputInternal" type="file" accept=".conf" onChange={this.importConfig} style={{display: 'none'}} />
<button type="button" onClick={this.exportConfig} className="btn btn-info btn-lg" style={{margin: '5px'}}>
Export config
</button>
</div>
<div>
{ this.state.lastAction === 'reset' ?
<div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Configuration reset successfully.
</div>
: ''}
{ this.state.lastAction === 'saved' ?
<div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Configuration saved successfully.
</div>
: ''}
{ this.state.lastAction === 'import_failure' ?
<div className="alert alert-danger">
<i className="glyphicon glyphicon-exclamation-sign" style={{'marginRight': '5px'}}/>
Failed importing configuration. Invalid config file.
</div>
: ''}
{ this.state.lastAction === 'import_success' ?
<div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Configuration imported successfully.
</div>
: ''}
</div>
</Col>
);