diff --git a/thehive_button/package.json b/thehive_button/package.json index 9c3124f4d84aa6913e0103900a134702a1fbde84..037318890a52bdc329a38e0dd83c18837bb633b9 100644 --- a/thehive_button/package.json +++ b/thehive_button/package.json @@ -1,6 +1,6 @@ { "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", diff --git a/thehive_button/public/case_form.html b/thehive_button/public/case_form.html new file mode 100644 index 0000000000000000000000000000000000000000..fe45cbc2227b4f6538de205469e6c6c13cf6dcc7 --- /dev/null +++ b/thehive_button/public/case_form.html @@ -0,0 +1,11 @@ +<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 diff --git a/thehive_button/public/vis_controller.js b/thehive_button/public/vis_controller.js index 87f00dd7e0941d87c6fc3ae035d839ac0ab79763..b0bd3415bbba926bf48ca3ee130ace3609c0ccc2 100644 --- a/thehive_button/public/vis_controller.js +++ b/thehive_button/public/vis_controller.js @@ -1,9 +1,19 @@ 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'; } };