Skip to content
This repository has been archived by the owner on Mar 27, 2019. It is now read-only.

Graphical JSON editor for secrets and policies #38

Merged
merged 8 commits into from
Jan 13, 2017
Merged

Graphical JSON editor for secrets and policies #38

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c424410
Basic react wrapper component for josdejong/jsoneditor.
Jan 12, 2017
9d72a82
Small fix
Jan 13, 2017
4d1a9c1
Json editor intergation in policies page with schema valitation
Jan 13, 2017
279c01c
Cosmetic fixes
Jan 13, 2017
cf25662
Policiy names are always lowercase
Jan 13, 2017
11418b6
Remove debugger line
Jan 13, 2017
ec435d6
4 space indent
Jan 13, 2017
1740081
Deduplicate state change code
Jan 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 94 additions & 69 deletions app/components/Policies/Manage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import JsonEditor from '../shared/JsonEditor.jsx';
import hcltojson from 'hcl-to-json'
import jsonschema from './vault-policy-schema.json'

export default class Manage extends React.Component {
constructor(props) {
Expand All @@ -17,11 +20,13 @@ export default class Manage extends React.Component {
openEditModal: false,
openNewPolicyModal: false,
newPolicyErrorMessage: '',
newPolicyNameErrorMessage: '',
openDeleteModal: false,
editingPolicy: -1,
focusPolicy: -1,
deletingPolicy: '',
policies: [],
currentPolicy: '',
disableSubmit: false,
errorMessage: '',
forbidden: false,
buttonColor: 'lightgrey'
Expand All @@ -45,23 +50,27 @@ export default class Manage extends React.Component {
this.listPolicies();
}

updatePolicy() {
let policyName = this.state.editingPolicy;
updatePolicy(policyName, isNewPolicy) {

axios.put(`/policy?vaultaddr=${encodeURI(window.localStorage.getItem("vaultUrl"))}&policy=${encodeURI(policyName)}&token=${encodeURI(window.localStorage.getItem("vaultAccessToken"))}`, { "Policy": this.state.currentPolicy })
.then((resp) => {
// Custom future logic on success
this.setState({
errorMessage: ''
});
if (isNewPolicy) {
let policies = this.state.policies;
policies.push({ name: policyName });
this.setState({
policies: policies
});
}
})
.catch((err) => {
console.error(err.stack);
this.setState({
errorMessage: err.response.data
});
if(err.response.data.errors){
this.setState({
errorMessage: err.response.data.errors.join('<br />')
});
}
})

this.setState({ openNewPolicyModal: false });
this.setState({ openEditModal: false });
}

Expand Down Expand Up @@ -93,86 +102,79 @@ export default class Manage extends React.Component {
renderEditDialog() {
const actions = [
<FlatButton label="Cancel" primary={true} onTouchTap={() => this.setState({ openEditModal: false })} />,
<FlatButton label="Submit" primary={true} onTouchTap={() => this.updatePolicy()} />
<FlatButton label="Submit" disabled={this.state.disableSubmit} primary={true} onTouchTap={() => this.updatePolicy(this.state.focusPolicy, false)} />
];

let policyChanged = (e, v, ) => {
this.state.currentPolicy = e.target.value;
let policyChanged = (v, syntaxCheckOk, schemaCheckOk) => {
if (syntaxCheckOk && schemaCheckOk && v) {
this.setState({disableSubmit: false, currentPolicy: v});
} else {
this.setState({disableSubmit: true});
}
};

return (
<Dialog
title={`Editing ${this.state.editingPolicy}`}
title={`Editing ${this.state.focusPolicy}`}
modal={false}
actions={actions}
open={this.state.openEditModal}
onRequestClose={() => this.setState({ openEditModal: false })}
autoScrollBodyContent={true}
>
<TextField
style={{ height: '5000px' }}
onChange={(e, v) => policyChanged(e, v)}
name="editingText" multiLine={true}
autoFocus
defaultValue={this.state.currentPolicy}
fullWidth={true} />
<JsonEditor
rootName={this.state.focusPolicy}
value={this.state.currentPolicy}
mode={'code'}
schema={jsonschema}
onChange={policyChanged}
/>
</Dialog>
);
}

renderNewPolicyDialog() {
const MISSING_POLICY_ERROR = "Policy cannot be empty.";
const DUPLICATE_POLICY_ERROR = `Policy ${this.state.newPolicy.name} already exists.`;
const DUPLICATE_POLICY_ERROR = `Policy ${this.state.focusPolicy} already exists.`;

let validateAndSubmit = () => {
if (this.state.newPolicy.name === '') {
if (this.state.focusPolicy === '') {
this.setState({
newPolicyErrorMessage: MISSING_POLICY_ERROR
});
return;
}

if (_.filter(this.state.policies, x => x.name === this.state.newPolicy.name).length > 0) {
if (_.filter(this.state.policies, x => x.name === this.state.focusPolicy).length > 0) {
this.setState({
newPolicyErrorMessage: DUPLICATE_POLICY_ERROR
});
return;
}

axios.put(`/policy?vaultaddr=${encodeURI(window.localStorage.getItem("vaultUrl"))}&policy=${encodeURI(this.state.newPolicy.name)}&token=${encodeURI(window.localStorage.getItem("vaultAccessToken"))}`, { "Policy": this.state.currentPolicy })
.then((resp) => {
let policies = this.state.policies;
policies.push({ name: this.state.newPolicy.name });
this.setState({
policies: policies,
errorMessage: ''
});
})
.catch((err) => {
console.error(err.stack);
this.setState({
errorMessage: err.response.data
});
})

this.setState({ openNewPolicyModal: false });
this.updatePolicy(this.state.focusPolicy, true);
}

const actions = [
<FlatButton label="Cancel" primary={true} onTouchTap={() => this.setState({ openNewPolicyModal: false, newPolicyErrorMessage: '' })} />,
<FlatButton label="Submit" primary={true} onTouchTap={validateAndSubmit} />
<FlatButton label="Submit" disabled={this.state.disableSubmit} primary={true} onTouchTap={validateAndSubmit} />
];

let setNewPolicy = (e, v) => {
let currentPolicy = this.state.newPolicy;
if (e.target.name === "newName") {
currentPolicy.name = v;
} else if (e.target.name === "newRules") {
currentPolicy.rules = v;
let setNewPolicy = (v, syntaxCheckOk, schemaCheckOk) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like it should be its own function, since you are reusing the same logic on L108

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

if (syntaxCheckOk && schemaCheckOk && v) {
this.setState({disableSubmit: false, currentPolicy: v});
} else {
this.setState({disableSubmit: true});
}
}

let validatePolicyName = (event, v) => {
var pattern = /^[^\/&]+$/;
v = v.toLowerCase();
if (v.match(pattern)) {
this.setState({newPolicyNameErrorMessage: '', focusPolicy: v});
} else {
this.setState({newPolicyNameErrorMessage: 'Policy name contains illegal characters'});
}
this.setState({
newPolicy: currentPolicy
});
}


Expand All @@ -186,14 +188,21 @@ export default class Manage extends React.Component {
autoScrollBodyContent={true}
autoDetectWindowHeight={true}
>
<TextField name="newName" autoFocus fullWidth={true} hintText="Name" onChange={(e, v) => setNewPolicy(e, v)} />
<TextField
name="newRules"
multiLine={true}
style={{ height: '5000px' }}
name="newName"
autoFocus
fullWidth={true}
hintText="Rules"
onChange={(e, v) => setNewPolicy(e, v)} />
hintText="Name"
errorText={this.state.newPolicyNameErrorMessage}
onChange={validatePolicyName}
/>
<JsonEditor
rootName={this.state.focusPolicy || null}
value={this.state.currentPolicy}
mode={'code'}
schema={jsonschema}
onChange={setNewPolicy}
/>
<div className={styles.error}>{this.state.newPolicyErrorMessage}</div>
</Dialog>
);
Expand Down Expand Up @@ -224,18 +233,26 @@ export default class Manage extends React.Component {
axios.get(`/policy?vaultaddr=${encodeURI(window.localStorage.getItem("vaultUrl"))}&policy=${encodeURI(policyName)}&token=${encodeURI(window.localStorage.getItem("vaultAccessToken"))}`)
.then((resp) => {
let rules = resp.data.data.rules;
let rules_obj;
// Attempt to parse into JSON incase a stringified JSON was sent
try {
rules = JSON.parse(rules)
rules_obj = JSON.parse(rules);
} catch (e) { }

let val = typeof rules == 'object' ? JSON.stringify(rules, null, 4) : rules;
if (!rules_obj) {
// Previous parse failed, attempt HCL to JSON conversion
rules_obj = hcltojson(rules);
}

this.setState({
openEditModal: true,
editingPolicy: policyName,
currentPolicy: val
});
if(rules_obj) {
this.setState({
openEditModal: true,
focusPolicy: policyName,
currentPolicy: rules_obj,
disableSubmit: true,
errorMessage: '',
});
}
})
.catch((err) => {
console.error(err.stack);
Expand All @@ -252,10 +269,10 @@ export default class Manage extends React.Component {
});
} else {
let policies = this.state.policies;
let policyToDelete = _.find(policies, (policyToDelete) => { return policyToDelete.name === policyName }); å
let policyToDelete = _.find(policies, (policyToDelete) => { return policyToDelete.name === policyName });
policies = _.pull(policies, policyToDelete);
this.setState({
secrets: policies,
policies: policies,
errorMessage: ''
});
}
Expand Down Expand Up @@ -317,7 +334,15 @@ export default class Manage extends React.Component {
backgroundColor={this.state.buttonColor}
hoverColor={green400}
labelStyle={{ color: white }}
onTouchTap={() => this.setState({ openNewPolicyModal: true, newPolicy: { name: '', value: '' } })} />}
onTouchTap={() => this.setState({
openNewPolicyModal: true,
errorMessage: '',
newPolicyErrorMessage: '',
newPolicyNameErrorMessage: '',
disableSubmit: true,
focusPolicy: '',
currentPolicy: { path: { 'sample/path' : { capabilities: ['read'] }} }
})} />}
{this.state.errorMessage &&
<div className={styles.error}>
<FontIcon className="fa fa-exclamation-triangle" color={red500} style={{ marginRight: 10 }} />
Expand Down
50 changes: 50 additions & 0 deletions app/components/Policies/vault-policy-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"type": "object",
"required": [ "path" ],
"properties": {
"path": {
"type": "object",
"minProperties": 1,
"additionalProperties": false,
"patternProperties": {
"^[^\/].*$": {
"type": "object",
"additionalProperties": false,
"anyOf": [
{"required": ["capabilities"]},
{"required": ["policy"]}
],
"properties": {
"capabilities" : {
"type": "array",
"minItems": 1,
"uniqueItems": true,
"items": {
"type": "string",
"enum": [
"create",
"read",
"update",
"delete",
"list",
"sudo",
"deny"
]
}
},
"policy" : {
"type": "string",
"enum": [
"read",
"write",
"sudo",
"deny"
]
}
}

}
}
}
}
}
Loading