Dashboards & Visualizations

Is there a way to add text to dashboard panel from a HTML text box?

kdimaria
Communicator

I have a Splunk dashboard and the panels are created using HTML and JavaScript. I was wondering if there's a way to use a textbox or field created in HTML to save text to the panel. The HTML field would have a submit button on the text box, which would submit the text to the specific panel.

Any help would be great!

0 Karma
1 Solution

kdimaria
Communicator

I actually figured this out. I used JavaScript prompt to prompt the user to enter the note to be added to the row of the table panel. Then, I saved that data as a variable and started a new search, making results and saving it to a new source using collect. Then, in the main search for the table panel I joined the two sources so that the note from the user would then be added to the row/column that they clicked on.

View solution in original post

0 Karma

kdimaria
Communicator

I actually figured this out. I used JavaScript prompt to prompt the user to enter the note to be added to the row of the table panel. Then, I saved that data as a variable and started a new search, making results and saving it to a new source using collect. Then, in the main search for the table panel I joined the two sources so that the note from the user would then be added to the row/column that they clicked on.

0 Karma

lianlim
Engager

@kdimaria I am actually trying to do something very similar to you

enter note
to be added to a new table
use outputlookup to update csv

I was wondering if you could share your JavaScript as an example?

Help much appreciated!

0 Karma

kdimaria
Communicator

@lianlim

So what I was trying to do was have a table with an "Alert" column so that people could add alerts to a specific part in the table. Each row was an application that was being monitored then we wanted people to be able to add alerts to applications if needed. So I used a Jquery Dialog to create the prompt to get information to add to the alert column but a Javascript prompt also works:

element1.on("click", function(e) {
             e.preventDefault();
            if(e.field == "Alert"){
                e.preventDefault();
                var appname = e.data["row.App"];
                var type = "User";
                var dialog = $('<p>Enter an alert note for <b>' + appname + '</b> or clear the previous alert note. </p>').dialog({
                position: myPos,
                buttons: {
                "Enter Alert Note": function(){
                    var note = prompt("Enter alert note for '" + appname + "'","");
                    var username = prompt("Enter Your Name: ", "");
                    if(note && username){
                        notesearch.settings.attributes.search = "| makeresults | eval Notes=\"" + note + "\" | eval application=\"" + appname + "\" | eval type=\"" + type + "\" | eval name=\"" + username + "\" | collect index=splunk-test source=app_alerts";
                        notesearch.startSearch();
                        setTimeout(function(){search1.startSearch();},2000);
                        $(this).dialog("close");
                    }
                    $(this).dialog("close");
                },
                "Clear Previous Note": function(){
                    notesearch.settings.attributes.search = "| makeresults | eval application=\"" + appname + "\" | eval type=\"" + type + "\" | collect index=splunk-test source=app_alerts";
                    notesearch.startSearch();
                    setTimeout(function(){search1.startSearch();},2000);
                    $(this).dialog("close");
                }
                },
                width:350
                }).css("font-size", "15px");

            }

So I added a click event for the table and when the user clicked on the "Alert" field they would be prompted to enter an alert note for the application (row) that they clicked on. I used makeresults to set all the values I needed from the variables gathered from the dialog and the collect command to save my alerts in a certain index and source so that when the search for the table runs again it will pick up the alert. I just created a blank searchelement called notesearch and changed it to run the search i needed. So my main table search does a join on application and retrieves the latest alert from the app_alerts source so that it is displayed on the table after refreshing. Hope this helps.

0 Karma

niketn
Legend

The functionality that you have mentioned is actually an ideal use case for KV Store in Splunk.
Please refer to following example using HTML Dashboard in Splunk which utilizes KV Store: http://dev.splunk.com/view/webframework-tutorials/SP-CAAAEZT.

You should also read comparison between KV Store and Lookup file to understand which would be better in your case. http://dev.splunk.com/view/SP-CAAAEY7#kvsvscsv

If you want to stick to lookup file. You can use Splunk's text input and on click on Submit button you can push to your lookup file using a combination of inputlookup and outputlookup to enable append. Refer to documentation: http://docs.splunk.com/Documentation/Splunk/latest/SearchReference/Outputlookup#Examples

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kdimaria
Communicator

@niketnilay Will the KV Store work when I am trying to modify a CSV file that is already created. The CSV has a "notes" column and I wanted to have a text box that would allow people to add "notes" to that notes column. Is the KV store the way to do it?

0 Karma

niketn
Legend

Better option would be for you to migrate your CSV file content to KV Store. There is a documentation on that as well. So that everything is controlled via a form in Splunk.

If KV Store implementation seems to be handful, you can try your original idea of posting the value of text box to CSV file. Let me know if you need assistance with either one.

I am converting my answer to comment so that it remains flagged as unanswered and allows other Splunkers to pitch in as well.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kdimaria
Communicator

@niketnilay The KV Store implementation makes sense..but am I able to modify things already in the KV store to change or add info to a specific column but keep everything else the same?

0 Karma

niketn
Legend

If you keep both CSV and KV Store, you will have one extra correlation in your search and a duplicate key. If you are fine with it, you can use it.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kdimaria
Communicator

@niketnilay I am very new to Splunk so all of this is still pretty confusing to me.. Is there a way to store the value of a textbox in HTML and put it into a CSV file then combine the two automatically through splunk searches so that the info being displayed on the dashboard will be updated with the new information in the columns?

0 Karma

niketn
Legend

Can you add an example of what data you have in text box and what do you imply by putting in HTML?

If you are able to use Splunk search to display tabular information, you can use outputlookup to push the resulting table to CSV file.

Refer to documentation: http://docs.splunk.com/Documentation/Splunk/latest/SearchReference/Outputlookup

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
Legend

@kdimaria, were you able to get to your solution based on the details provided. I will convert to answer so that you can accept the same. Please let us know further questions otherwise.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kdimaria
Communicator

@niketnilay I tried to implement the KV Store example in the link you gave me but I couldn't get it to work so I don't know if that answer will work..

Basically I have a dashboard set up for users to see performance data of applications in HTML and JS. I'm now working on making it so that the user can click on the Notes column and then using JS, prompt the user to add a note to then be displayed in that notes column. I'm thinking about when they add the note, the note gets saved in a variable then I place that variable in the Splunk's search string and eval the notes column to have a new note. Then I was going to input that data into a summary index or new sourcetype so that they can be merged together that all users can view the new added note on the dashboard page.

0 Karma

niketn
Legend

@kdimaria, do you want to display the text from HTML Text Box into a Panel or Do you want to use the text in Splunk Search?

Also what is the reason for HTML Text box rather than Splunk input text box?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kdimaria
Communicator

@niketnilay I guess I want to grab the text from the text box and have that added to a csv file then update the current csv, using splunk's collect command to something, to have the text from the text field instead of doing it manually.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...