Created a two-step configuration wizard, modified navbar to change configuration

.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[lib/**.js]
+indent_style = space
+indent_size = 4
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -5,5 +5,6 @@ venv-tools
 flare_splunk_integration/local
 flare_splunk_integration/metadata/local.meta
 __pycache__/
+.vscode/
 
 flare_splunk_integration/bin/vendor/*

Makefile

@@ -25,6 +25,7 @@ clean:
 	@rm -rf venv
 	@rm -rf venv-tools
 	@rm -rf flare_splunk_integration/bin/vendor
+	@unlink "/Applications/Splunk/etc/apps/flare_splunk_integration" || true
 	@echo "Done."
 
 .PHONY: package
@@ -79,7 +80,7 @@ mypy: venv-tools
 	venv-tools/bin/mypy flare_splunk_integration
 
 .PHONY: splunk-local
-splunk-local:
+splunk-local: venv
 	@echo "Create symlink from app to Splunk Enterprise"
 	@if [ ! -d "/Applications/Splunk/etc/apps" ]; then \
 		echo "Splunk Enterprise isn't installed"; \

flare_splunk_integration/README

@@ -5,10 +5,26 @@ This application requires an **API key** and your **tenant ID** from https://app
 1. Log into your account at https://app.flare.io/#/login.
 2. Once logged in go to your Profile page, look for the "API Keys" section and create an API key.
 3. Copy your API key using the provided copy icon.
-4. Paste your API key in the Flare Splunk Integration configuration screen in the API Key field.
-5. Again, back on the Profile page of your account, you will see a Tenants section.
-6. Copy your tenant ID and paste it in the Tenant ID field on the configuration screen.
+4. Paste your API key in the Flare Splunk Integration configuration screen in the API Key field and press Next Step.
+5. In the next page, select the Tenant you want to ingest data from and press Submit.
 
 # Binary File Declaration
 bin/vendor/charset_normalizer/md__mypyc.cpython-39-x86_64-linux-gnu.so
-bin/vendor/charset_normalizer/md.cpython-39-x86_64-linux-gnu.so
+bin/vendor/charset_normalizer/md.cpython-39-x86_64-linux-gnu.so
+
+# Development
+
+If you have your own Splunk Enterprise installed locally, you can use
+
+```
+make splunk-local
+```
+
+To download the required dependencies, generate a symlink between the Splunk app and the Splunk Enterprise applications folder and disable the caching using a local stanza in web.conf.
+
+When you modify files, go on these pages to refresh the cache to see your changes:
+
+```
+http://localhost:8000/debug/refresh
+http://localhost:8000/_bump
+```

flare_splunk_integration/appserver/static/javascript/setupPage.js

@@ -15,6 +15,6 @@ require([
     "react",
     "ReactDOM",
     "app",
-], function(react, ReactDOM, app) {
+], function (react, ReactDOM, app) {
     ReactDOM.render(app, document.getElementById('app'));
 });

flare_splunk_integration/appserver/static/javascript/views/app.js

@@ -1,50 +1,113 @@
 import * as Setup from "./setupConfiguration.js";
 
-define(["react", "splunkjs/splunk"], function(react, splunkSdk){
-  const e = react.createElement;
+define(["react", "splunkjs/splunk"], function (react, splunkSdk) {
+    const e = react.createElement;
 
-  class SetupPage extends react.Component {
-    constructor(props) {
-      super(props);
+    class SetupPage extends react.Component {
+        constructor(props) {
+            super(props);
 
-      this.state = {
-        serverKey: '',
-        tenantId: '',
-      };
+            this.state = {
+                serverKey: '',
+                tenantId: '',
+                tenants: [],
+                errorMessage: '',
+                isLoading: false,
+            };
 
-      this.handleChange = this.handleChange.bind(this);
-      this.handleSubmit = this.handleSubmit.bind(this);
-    }
+            this.handleChangeServerKey = this.handleChangeServerKey.bind(this);
+            this.handleChangeTenantId = this.handleChangeTenantId.bind(this);
+            this.handleSubmitServerKey = this.handleSubmitServerKey.bind(this);
+            this.handleSubmitTenant = this.handleSubmitTenant.bind(this);
+        }
 
-    handleChange(event) {
-      this.setState({ ...this.state, [event.target.name]: event.target.value});
-    }
+        handleChangeServerKey(event) {
+            this.setState({ ...this.state, ["serverKey"]: event.target.value });
+        }
 
-    async handleSubmit(event) {
-      event.preventDefault();
+        handleChangeTenantId(event) {
+            this.setState({ ...this.state, ["tenantId"]: event.target.value });
+        }
+
+        async handleSubmitServerKey(event) {
+            event.preventDefault();
+            this.setState({ ...this.state, ["isLoading"]: true });
+            Setup.retrieveUserTenants(splunkSdk, this.state.serverKey, (user_tenants) => {
+                if (this.state.tenantId === '' && user_tenants.tenants.length > 0) {
+                    this.state.tenantId = user_tenants.tenants[0].id;
+                }
+                this.state.errorMessage = '';
+                this.setState({ ...this.state, ["tenants"]: user_tenants.tenants });
+                this.setState({ ...this.state, ["isLoading"]: false });
+            }, (error) => {
+                this.setState({ ...this.state, ["errorMessage"]: error });
+                this.setState({ ...this.state, ["isLoading"]: false });
+            });
+        }
+
+        async handleSubmitTenant(event) {
+            event.preventDefault();
+            this.setState({ ...this.state, ["isLoading"]: true });
+            await Setup.saveConfiguration(splunkSdk, this.state.serverKey, this.state.tenantId);
+        }
+
+        componentDidMount() {
+            this.setState({ ...this.state, ["isLoading"]: true });
+            Setup.retrieveServerKey(splunkSdk).then((serverKey) => {
+                this.setState({ ...this.state, ["serverKey"]: serverKey });
+                Setup.retrieveTenantId(splunkSdk).then((tenantId) => {
+                    this.setState({ ...this.state, ["tenantId"]: tenantId });
+                    this.setState({ ...this.state, ["isLoading"]: false });
+                });
+            });
+        }
+
+        render() {
+            if (this.state.isLoading) {
+                return e('div', null, 'Loading...');
+            }
+
+            if (this.state.tenants.length == 0 || this.state.serverKey == '') {
+                return e("div", null, [
+                    e("h2", null, "Enter your API Key"),
+                    e("p", null, "A new API Key can be generated by going on your profile page in Flare"),
+                    e("p", { class: "error" }, this.state.errorMessage),
+                    e("div", null, [
+                        e("form", { onSubmit: this.handleSubmitServerKey }, [
+                            e("label", null, [
+                                "Server API Key ",
+                                e("input", { type: "password", name: "serverKey", value: this.state.serverKey, onChange: this.handleChangeServerKey })
+                            ]),
+                            e("input", { type: "submit", value: "Next Step" })
+                        ])
+                    ])
+                ]);
+            } else {
+                const tenantOptions = [];
+                for (let i = 0; i < this.state.tenants.length; i++) {
+                    tenantOptions.push(
+                        e('option', { key: i, value: this.state.tenants[i].id }, this.state.tenants[i].name)
+                    );
+                }
+                return e("div", null, [
+                    e("h2", null, "Please select the Tenant you want to ingest events from"),
+                    e("p", { class: "error" }, this.state.errorMessage),
+                    e("div", null, [
+                        e("form", { onSubmit: this.handleSubmitTenant }, [
+                            e(
+                                'select',
+                                { name: 'tenantsDropdown', value: this.state.tenantId, onChange: this.handleChangeTenantId },
+                                ...tenantOptions
+                            ),
+                            e("br"),
+                            e("input", { type: "submit", value: "Submit" })
+                        ])
+                    ])
+                ]);
+            }
+        }
 
-      await Setup.saveConfiguration(splunkSdk, this.state.serverKey, this.state.tenantId);
-    }
-    render() {
-      return e("div", null, [
-        e("h2", null, "Add a server key and tenant ID to complete app setup."),
-        e("div", null, [
-          e("form", { onSubmit: this.handleSubmit }, [
-            e("label", null, [
-              "Server API Key ",
-              e("input", { type: "password", name: "serverKey", value: this.state.serverKey, onChange: this.handleChange })
-            ]),
-            e("label", null, [
-              "Tenant ID ",
-              e("input", { type: "number", name: "tenantId", value: this.state.tenantId, onChange: this.handleChange })
-            ]),
-            e("input", { type: "submit", value: "Submit" })
-          ])
-        ])
-      ]);
     }
-
-  }
 
-  return e(SetupPage);
+    return e(SetupPage);
 });