Added dialog to set case title and description

(more parameters and better styling will be done later)

thehive_button/package.json

 {
   "name": "thehive_button",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Visualisation plugin which creates a simple button to create a new case in The Hive.",
   "main": "index.js",
   "kibana": {
@@ -12,7 +12,8 @@
     "build": "plugin-helpers build"
   },
   "dependencies": {
-    "request": "^2.88.0"
+    "request": "^2.88.0",
+    "jquery-ui": "1"
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",

thehive_button/public/case_form.html

+<form>
+<label for="case-title">Title:</label><br>
+<input type="text" name="case-title" style="width: 100%" value="" required="true"><br>
+<br>
+<label for="case-title">Description:</label><br>
+<textarea name="case-descr" rows="10" style="width: 100%">
+
+--
+Created from Kibana
+</textarea>
+</form>
\ No newline at end of file

thehive_button/public/vis_controller.js

 import { Status } from 'ui/vis/update_status';
 import chrome from 'ui/chrome';
 import { toastNotifications } from 'ui/notify';
-//import vis_template from './vis_template.html';
+import case_form from './case_form.html';
 
 import React from 'react';
+
+import $ from 'jquery';
+import 'jquery-ui/themes/base/core.css';
+import 'jquery-ui/themes/base/theme.css';
+import 'jquery-ui/themes/base/resizable.css';
+import 'jquery-ui/themes/base/dialog.css';
+import 'jquery-ui/ui/core';
+import 'jquery-ui/ui/widgets/resizable';
+import 'jquery-ui/ui/widgets/dialog';
+
 import {
   EuiButton,
 //  EuiPanel,
@@ -11,6 +21,7 @@ import {
 
 
 function createTheHiveButton(vis) {
+  // Create the button
   var button = document.createElement('button');
   button.className = 'euiButton euiButton--danger euiButton--fill';
   button.innerHTML = '<span class="euiButton__content"><span class="euiButton__text" title="Create new Case in The Hive">Create new Case</span></span>';
@@ -18,22 +29,54 @@ function createTheHiveButton(vis) {
   button._vis = vis; // store reference to 'vis' to the element
 //  var button2 = <EuiButton fill iconType="alert" color="danger" onClick={(evt) => hiveButtonOnClick(evt, vis.params)}>Create new Case</EuiButton>;
 //  button2.setState({vis: vis});
+
+  // Create the dialog to specify Case parameters
+  var dialog = document.createElement("div");
+  dialog.innerHTML = case_form; // content imported from ext. file
+  $(dialog).dialog({
+    autoOpen: false,
+    title: "Create a new Case ...",
+    width: 600,
+    resizable: true,
+    buttons: [
+      {
+        text: "Cancel",
+        click: function() {
+          $( this ).dialog( "close" );
+        }
+      },
+      {
+        text: "Submit",
+        click: function(evt) {
+            hiveButtonSubmit(dialog, evt.currentTarget);
+        }
+      }
+    ]
+  });
+  // add reference to visualisation parameters to the dialog element
+  dialog._params = button._vis.params;
+  
+  // add reference to newly created dialog to the button element
+  button._dialog_elem = dialog;
   return button;
 }
 
 function hiveButtonOnClick(evt) {
+  // Button click -> just open the dialog
   var button = evt.currentTarget;
-  var params = button._vis.params;
-  //console.log("OnCLick", params);
+  $(button._dialog_elem).dialog("open");
+  return false;
+}  
+  
+function hiveButtonSubmit(dialog, submit_button) {
+  var params = dialog._params;
+  console.log("Submit", submit_button, params);
   
-  // Add "loading" icon and disable the button
-  var loading_span = document.createElement('span');
-  loading_span.className = "euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner";
-  button.firstChild.insertBefore(loading_span, button.firstChild.childNodes[0]);
-  button.setAttribute("disabled", true);
-
-  var title = "TODO: SET THE TITLE";
-  var descr = "(Created from Kibana)\n\n...";
+  // load data from the <form>
+  var form = $("form", dialog);
+  console.log(form);
+  var title = $('input[name="case-title"]', form).val();
+  var descr = $('textarea[name="case-descr"]', form).val();
   var severity = 2;
   var start_date = null;
   var owner = params.owner;
@@ -41,6 +84,17 @@ function hiveButtonOnClick(evt) {
   var tlp = 2;
   var tags = [];
 
+  // check validity
+  if (title == "") {
+    toastNotifications.addDanger("ERROR: Title cannot be empty");
+    return false;
+  }
+
+  // disable the button to prevent multiple submits
+  submit_button.innerHTML = "(working...)";
+  submit_button.setAttribute("disabled", true);
+
+  
   createHiveCase(params.url, params.apikey, title, descr, severity, start_date, owner, flag, tlp, tags)
     .then(function(value) {
        if ('error' in value) {
@@ -64,9 +118,13 @@ function hiveButtonOnClick(evt) {
          });
          window.open(case_url, '_blank');
        }
-       // remove "loading" icon and re-enable the button
-       button.firstChild.removeChild(loading_span);
-       button.removeAttribute("disabled");
+
+       // re-enable the button
+       submit_button.innerHTML = "Submit";
+       submit_button.removeAttribute("disabled");
+       
+       // close the dialog
+       $(dialog).dialog( "close" );
     });
   return false;
 }
@@ -147,12 +205,6 @@ class VisController {
   }
 
   async render(visData, status) {
-    //console.log('in promise!', this.vis)
-    //console.log(vis_template);
-    //var vis = this.vis;
-    //this.container.innerHTML = `${vis_template}`;
-    //this.container.innerHTML += '<p>Hello World from Promise! ' + JSON.stringify(status) + '</p>';
-    //console.log('Render: ' + JSON.stringify(status));
     return 'done rendering';
   }
 };