Creating a summary of fields by multi-selected val...

uveys · ‎04-09-2020

Hey everybody!
I have this following multi-select construction with checkboxes and submit button. This gives me the selected value on the first panel and allows me to pass that onto the secondary panel. However the value on panel2 therefore loses its connection to other field attributes in the search and is being represented as just a passed-on-text-value. What i want to have is to have the same construction, with the difference of being able to keep the connection of the value that is being passed on to the other field attributes of the search, so that i can construct a summary of certain fields by this transferred value . Here are the . .js and xml:

require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc, TableView) {
    // Access the "default" token model
    var tokens = mvc.Components.get("default");
    var selected_values_array = [];
    var submittedTokens = mvc.Components.get('submitted');
    // Custom renderer for applying checkbox.
    var CustomRenderer = TableView.BaseCellRenderer.extend({
            canRender: function (cell) {
                return _(['Select Value']).contains(cell.field);
            },
            render: function ($td, cell) {
                var a = $('<div>').attr({
                        "id": "chk-sourcetype" + cell.value,
                        "value": cell.value
                    }).addClass('checkbox').click(function () {
                        if ($(this).attr('class') === "checkbox") {
                            selected_values_array.push($(this).attr('value'));
                            $(this).removeClass();
                            $(this).addClass("checkbox checked");
                        } else {
                            $(this).removeClass();
                            $(this).addClass("checkbox");
                            var i = selected_values_array.indexOf($(this).attr('value'));
                            if (i != -1) {
                                selected_values_array.splice(i, 1);
                            }
                        }
                        console.log(selected_values_array);
                    }).appendTo($td);
            }
        });

    //List of table ID
    var sh = mvc.Components.get("myTable");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function (tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRenderer());
            tableView.table.render();
        });
    }

    // Disabling button while search is running
    var mysearch = mvc.Components.get('mysearch');
    mysearch.on('search:start', function (properties) {
        $("#mybutton").attr('disabled', true);
    });

    mysearch.on('search:done', function (properties) {
        $("#mybutton").attr('disabled', false);
    });

    $(document).ready(function () {

        //setting up tokens with selected value.
        $("#mybutton").on("click", function (e) {
            e.preventDefault();
            tokens.set("mytoken", selected_values_array.join());
            submittedTokens.set(tokens.toJSON());
            $("#mybutton").attr('disabled', true);
        });
    });
});

And the xml:

<form script="multiselect_table.js" stylesheet="multiselect_table.css">
  <label>Summary by ID</label>
  <row>
    <panel>
      <table id="myTable">
        <title>Panel A</title>
        <search>
          <query>Res!=220 | stats count by MId, a, b, c, d 
               | eval "Select Sourcetype"= MId
               | table "Select Sourcetype" Mid, a, b, c, d count</query>
          <earliest>-5d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
      <html>
       <div>
         <input type="button" id="mybutton" value="Submit"/>
       </div>
     </html>
    </panel>
    <panel>
      <table>
        <title>Panel B</title>
        <search id="mysearch">
          <query>| makeresults | eval SelectedRowValue="$mytoken$" | makemv delim="," SelectedRowValue
                 | stats sum(c) as totalc, sum(d) as totald by SelectedRowValue 
                 | table SelectedRowValue, a, b, c, d</query>
          <earliest>-5d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">cell</option>
      </table>
    </panel>
  </row>
</form>

What i wanna have is a summary of the fields a, b, c, d on panel 2, by SelectedRowValue. I'd also like to do that without a submit button, as in the data gets passed on right after i click on checkbox, without having to submit it by the button. Thanks in advance!

Creating a summary of fields by multi-selected values

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!