diff --git a/frontend/src/pages/command.js b/frontend/src/pages/command.js
index 508b887..aba5e50 100644
--- a/frontend/src/pages/command.js
+++ b/frontend/src/pages/command.js
@@ -1,141 +1,83 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
-import Nav from '../blocks/nav.js';
-import Output from '../blocks/output.js';
-import { api, httpPOST } from '../http.js';
-import './command.css';
+import Nav from '../blocks/nav.js'
+import Output from '../blocks/output.js'
+import { api, httpPOST } from '../http.js'
+import './command.css'
export default class Command extends Component {
constructor(props) {
- super(props);
-
+ super(props)
this.state = {
form: this.defaultForm(props.commands[props.cmd]),
jobID: null,
error: null,
- };
+ }
}
componentWillReceiveProps(props) {
- this.setState({form: this.defaultForm(props.commands[props.cmd])});
+ let form = this.defaultForm(props.commands[props.cmd])
+ this.setState({form: form})
}
defaultForm(cmd) {
if (!cmd || Object.keys(cmd).length === 0) {
- return {};
+ return {}
}
- var form = {
+ return {
command: cmd.name,
args: "",
- flags: {}
+ flags: cmd.flags.reduce((list = {}, flag) => {
+ list[flag.name] = flag.default
+ return list
+ })
}
- cmd.flags.forEach((flag) => {
- form.flags[flag.name] = flag.default;
- });
- return form;
}
render() {
- let cmd = this.props.commands[this.props.cmd];
- if (!cmd) {
- return null;
- }
-
return (
-
+ {this.renderForm()}
{this.renderError()}
-
+
- );
+ )
}
- renderError() {
- if (this.state.error === null) {
- return null;
+ renderForm() {
+ let cmd = this.props.commands[this.props.cmd]
+ if (!cmd) {
+ return null
}
+
return (
- {this.state.error}
- );
+
+ )
}
- submitHandler(event) {
- event.preventDefault();
-
- let f = this.state.form;
- var args = [];
- args.push(["command", f.command]);
- args.push(["args", f.args]);
- for (let name of Object.keys(f.flags)) {
- args.push(["flags[" + name + "]", f.flags[name]]);
- }
- let formQuery = args.map((pair) => {
- return pair[0] + "=" + encodeURIComponent(pair[1]);
- }).join("&");
-
- httpPOST(api("/exec"), formQuery,
- (response) => {
- let details = JSON.parse(response);
- this.setState({jobID: details.id, error: null});
- },
- (error) => {
- this.setState({jobID: null, error: error});
- },
- );
- }
-
- changeHandler(event) {
- if (event.target.id.indexOf("flag-") === 0) {
- var val = event.target.value;
- if (event.target.type === "checkbox") {
- val = JSON.stringify(event.target.checked);
- }
-
- var flags = this.state.form.flags;
- let name = event.target.id.substring(5);
- flags[name] = val;
-
- this.setState({
- form: {
- command: this.state.form.command,
- args: this.state.form.args,
- flags: flags
- }
- });
- } else if (event.target.name === "args") {
- this.setState({
- form: {
- command: this.state.form.command,
- args: event.target.value,
- flags: this.state.form.flags
- }
- });
- }
- }
-
- input(flag) {
+ renderFlag(flag) {
let flagName = (name) => "flags[" + name + "]"
if (flag.type === "bool") {
return (
@@ -148,17 +90,17 @@ export default class Command extends Component {
)
} else {
- var inputType = "string";
+ var inputType = "string"
let numericTypes = [
"int", "int8", "int16", "int32", "int64",
"uint", "uint8", "uint16", "uint32", "uint64"
- ];
+ ]
if (numericTypes.includes(flag.type)) {
- inputType = "number";
+ inputType = "number"
}
return (
-
+
{flag.description}
{this.state.error}
+ )
+ }
+
+ submitHandler(event) {
+ event.preventDefault()
+ httpPOST(api("/exec"), formQuery(this.state.form),
+ (response) => {
+ let details = JSON.parse(response)
+ this.setState({jobID: details.id, error: null})
+ },
+ (error) => {
+ this.setState({jobID: null, error: error})
+ },
+ )
+ }
+
+ changeHandler(event) {
+ let field = event.target
+ let form = this.state.form
+ if (field.id.indexOf("flag-") === 0) {
+ var val = field.value
+ if (field.type === "checkbox") {
+ val = JSON.stringify(field.checked)
+ }
+
+ let name = field.id.substring(5)
+ form.flags[name] = val
+
+ this.setState({
+ form: {
+ command: form.command,
+ args: form.args,
+ flags: form.flags
+ }
+ })
+ } else if (field.name === "args") {
+ this.setState({
+ form: {
+ command: form.command,
+ args: field.value,
+ flags: form.flags
+ }
+ })
+ }
+ }
+}
+
+function formQuery(form) {
+ var args = Object.keys(form.flags).map((name) => ["flags[" + name + "]", form.flags[name]])
+ args.push(["command", form.command])
+ args.push(["args", form.args])
+ return args.map((pair) => pair[0] + "=" + encodeURIComponent(pair[1]))
}