/
app.js
64 lines (53 loc) · 1.88 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/**
* This is an example using pure react, with no JSX
* If you would like to use JSX, you will need to use Babel to transpile your code
* from JSK to JS. You will also need to use a task runner/module bundler to
* help build your app before it can be used in the browser.
* Some task runners/module bundlers are : gulp, grunt, webpack, and Parcel
*/
import * as Setup from "./setup_page.js";
define(["react", "splunkjs/splunk"], function(react, splunk_js_sdk){
const e = react.createElement;
class SetupPage extends react.Component {
constructor(props) {
super(props);
this.state = {
stanza: '',
args: '',
definition: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ ...this.state, [event.target.name]: event.target.value})
}
async handleSubmit(event) {
event.preventDefault();
await Setup.perform(splunk_js_sdk, this.state)
}
render() {
return e("div", null, [
e("h2", null, "Macro Setup Page"),
e("div", null, [
e("form", { onSubmit: this.handleSubmit }, [
e("label", null, [
"Macro Stanza",
e("input", { type: "text", name: "stanza", value: this.state.stanza, onChange: this.handleChange })
]),
e("label", null, [
"Macro Args",
e("input", { type: "text", name: "args", value: this.state.args, onChange: this.handleChange })
]),
e("label", null, [
"Macro Definition",
e("input", { type: "text", name: "definition", value: this.state.definition, onChange: this.handleChange })
]),
e("input", { type: "submit", value: "Submit" })
])
])
]);
}
}
return e(SetupPage);
});