topic Re: Issue with css, html, js Formatting Search Output in Dashboards & Visualizations

Issue with css, html, js Formatting Search Output

genesiusj — Wed, 30 Sep 2020 04:31:52 GMT

Hello,
I'm starting this post with a shoutout to @niketn because I used one of his post as the basis for my dashboard. However, input from any/all Splunkers out there is appreciated.

Here is my code, modified from niketnilay's post. How to show table result in one page/ table modification

   <row>
    <panel>
      <title>Show Table Results in One Page</title>
      <table>
        <search>
          <query> index=oit_printer_monitoring AND type=Printer 
    | eval timeConvDate=strftime(_time,"%a %m-%d-%Y") 
    | eval timeConvTime=strftime(_time,"%H:%M:%S") 
    | eval statusNum=case(status="printing,deleting,error",4,status="error,toner low",4,status="printing,error",4,status="paper jam",4,status="no toner",4,status="error,offline",4,status="error",4,
        status="door open,error",3,status="spooling,paused",3,status="paused",3,status="out of paper",3,status="error,out of paper",3,status="offline",3,status="door open",3,
        status="toner low",2,status="restarted",2,
        status="printing,deleting",1,status="printed,deleting",1,status="printing,printed,deleting",1,status="error,warming up",1,status="spooling,printing",1,status="warming up",1,status="spooling",1,status="printing",1,status="normal",1) 
    | sort - statusNum, status 
    | fields printer, status, statusNum, timeConvDate, timeConvTime 
    | dedup printer 
    | eval printer="#".printer 
    | eval component=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"..."),"..."),"...") 
    | stats values(component) as component 
    | nomv component 
    | eval component="<div>".replace(component,"#","</div><div>")."</div>" 
    | makemv delim="..." component 
    | table component</query>......

Explanation.
Create two new fields for time and date. | eval timeConvDate=strftime(_time,"%a %m-%d-%Y") | eval timeConvTime=strftime(_time,"%H:%M:%S")
Create a new field to represent the status as a number that can be sorted later. | eval statusNum=case(status="printing,deleting,error",4,status="error,toner low",4,....
Append a "#" in front of my first field, printer, to establish the beginning of a new field component. | eval printer="#".printer
The field **component* will be concatenation of several other fields: printer, status, and the timeConvDate and timeConvTime fields as one. | eval component=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"..."),"..."),"...") I used "..." instead of "|" between each of the concatenated fields.
The next two lines are from niketnilay's code unchanged. | stats values(component) as component | nomv component ' Modified niketnilay's eval/replace code as follows:| eval component="<div>".replace(component,"#","</div><div>")."</div>"By using the "..." all 4 fields stay associated to each other, and the "#" indicates of the start of the field **component**. Replaced the "..." within the field component with a carriage return/newline.| makemv delim="..." component `

Before continuing, I have a question about the field named *component. When I substituted ***component* with my field name, printerResult, it did not work. I had substituted in the js code as well. Therefore, I used component instead. My question is, in the js code, the word Components is used (plural and upper case C). Is this a special variable name for js and that is why it was used?*

I am using display_token_with_html_content.js as written.

 require([
     "jquery",
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function (
     $,
     mvc
 ) {
         var defaultTokenModel = mvc.Components.get("default");
         defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
             if (tokResultsInHTML !== undefined) {
                 $("#htmlTokenContainer").html(tokResultsInHTML);
             }
         });
     });

I used niketnilay's css in a panel

<panel>
  <title>Applying HTML Style</title>
  <html>
     <style>
       #htmlTokenContainer{
         display:flex;
         flex-wrap:wrap;
       }
       #htmlTokenContainer div{
         width: 260px;
       }
     </style>
     $tokResultsInHTML$
   </html>....

Lastly, I created another panel with just the token value assigned earlier per the niketnilay example.

<panel>
  <title>Format Data as desired output and show as html</title>
  <html>       
       <div id="htmlTokenContainer">      
       </div>
     </html>....

Here is a screenshot of my results.

What I am trying to accomplish is placing each value of component into individual cells. The formatting would be all centered. As the final requirement click the printer name in any one of the cells would set a token, which displays another panel (depends="token" ) and populates the panel with data specific to the printer clicked.

Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

niketn — Mon, 09 Mar 2020 18:05:44 GMT

[UPDATED ANSWER] as per mock screenshots provided. Please refer to updated screenshot and code below. You can play with CSS and SPL as per your actual needs.

PS: No changes to JS. So only SPL query, CSS <Style> and <html> panel has been changed.
1. SPL has been changed to bring data for specific printer in one cell and all the Printers in one row.
2. As per your need nested <div> sections were required for responsive table design where data is in single row but wraps to the subsequent row if width of the view is reduced. Previous example was built using <table> hence it was not responsive.

@genesiusj, is there a reason why you want table kind of view but not Splunk table?
I have converted my answer to build a table for five fields printer, status, statusNum, timeConvDate, timeConvTime as per your question. In order to pass the data from Search results to JS the token tokResultsInHTML has been set in <done> search event handler and the field name from search SPL i.e. htmlData is passed using predefined search token $result. htmlData$ .

As compared to the previous example with <div> section (where request was for single field to be displayed in four columns), I have created <table> with row <tr> and cell .

PS: CSS Style override has been changed as per table structure (each element has id # and class . added for specific customization). I have overridden few as example kindly change as needed. Central text alignment has been applied for each table cell.

Please try out and confirm!

Following is the run anywhere example Simple XML code:

<dashboard script="display_token_with_html_content.js">
  <label>Table with HTML data</label>
  <search>
    <query>| makeresults 
| eval status="printing,deleting,error;printing,error;door open,error;restarted;printed,deleting;error,offline;error,offline;spooling,paused" 
| makemv status delim=";" 
| mvexpand status 
| eval delta=500 
| streamstats count as sno 
| eval printer="printer".sno 
| eval delta=delta*sno 
| eval _time=_time-delta 
| fields - delta sno 
| eval timeConvDate=strftime(_time,"%a %m-%d-%Y") 
| eval timeConvTime=strftime(_time,"%H:%M:%S") 
| eval statusClass=case(status="printing,deleting,error","status_fatal",status="error,toner low","status_fatal",status="printing,error","status_fatal",status="paper jam","status_fatal",status="no toner","status_fatal",status="error,offline","status_fatal",status="error","status_fatal",
    status="door open,error","status_critical",status="spooling,paused","status_critical",status="paused","status_critical",status="out of paper","status_critical",status="error,out of paper","status_critical",status="offline","status_critical",status="door open","status_critical",
    status="toner low","status_low",status="restarted","status_low",
    status="printing,deleting","status_info",status="printed,deleting","status_info",status="printing,printed,deleting","status_info",status="error,warming up","status_info",status="spooling,printing","status_info",status="error,offline","status_info",status="spooling","status_info",status="printing","status_info",status="normal","status_info")
| sort - statusClass, status
| table printer, status, statusClass, timeConvDate, timeConvTime
| eval htmlData="&lt;div class=\"html_table_column ".statusClass."\"&gt;&lt;div class=\"html_column_printer html_div_center\"&gt;".printer."&lt;/div&gt;&lt;div id=\"column_status\" class=\"html_div_center\"&gt;".status."&lt;/div&gt;"."&lt;div id=\"column_timeConvDate\" class=\"html_div_center\"&gt;".timeConvDate."&lt;/div&gt;"."&lt;div id=\"column_timeConvTime\" class=\"html_div_center\"&gt;".timeConvTime."&lt;/div&gt;&lt;/div&gt;"
| stats list(htmlData) as htmlData
| eval htmlData="&lt;div class=\"html_table_row\"&gt;".mvjoin(htmlData," ")."&lt;/div&gt;"</query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
    <done>
      <set token="tokResultsInHTML">$result.htmlData$</set>
    </done>
  </search>
  <row>
    <panel>
      <html>
         <style>
          div#html_table div.html_table_row{
            display: flex;
            flex-wrap: wrap;
          }
          div#html_table div.html_table_row div.html_table_column{
            width:15%;
            text-align:center;
            text-align: center;
            color: white;
            margin-right: 10px;
            margin-bottom: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
          }
          div#html_table div.html_table_row div.status_fatal{
            background:red;
          }
          div#html_table div.html_table_row div.status_critical{
            background:orange;
          }
          div#html_table div.html_table_row div.status_low{
            background:blue;
          }
          div#html_table div.html_table_row div.status_info{
            background:green;
          }
          div#html_table div.html_table_row div.html_column_printer{
            font-weight:bold;
            font-size:120%;
          }
         </style>
         $tokResultsInHTML$
       </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Format Data as desired output and show as html</title>
      <html>
           <div id="html_table">
           </div>
      </html>
    </panel>
  </row>
</dashboard>

Following is the required JS display_token_with_html_content .js

 require([
     "jquery",
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function (
     $,
     mvc
 ) {
         var defaultTokenModel = mvc.Components.get("default");
         defaultTokenModel.on("change:tokResultsInHTML", function (model, tokResultsInHTML, options) {
             if (tokResultsInHTML !== undefined) {
                 $("#html_table").html(tokResultsInHTML);
             }
         });
     });

The mvc.Components is predefined Splunk JS object/class notation so kindly don't confuse with the component column which was used in the previous example. I have changed the example SPL, you can replace commands from | makeresults till | fields - delta sno with your index query and use the remaining pipes as is.

Re: Issue with css, html, js Formatting Search Output

genesiusj — Mon, 09 Mar 2020 19:38:42 GMT

@niketnilay
I'm going to test your suggested code and will let you know the results.

Meanwhile, let me answer your first question. > is there a reason why you want table kind of view but not Splunk table?

We prefer a Splunk table. However, briefly checking your last response, I think I wasn't clear on the required format.

Each cell should one printer with its associated fields under it.

printer
status
date
time

The data in each cell would be centered; and when the printer name is clicked on a new panel opens at the top of the dashboard containing printer, status, date, time, plus several additional fields: contact and location information, etc. The new panel is driven by a token. depends="tok_printerDetails"

We tested our search using the transpose command. However, while each cell contained one printer, the table was only a single row. Therefore we had to scroll (horizontal scrolling) to view all of the printers. When I found your post, I decided to see if this could resolve our issue. Another issue with the transpose command is losing the required formatting. The background of each cell is color-coded based on its status. There are over 20 values for status. This is why we created the statusNum field to summarize the various status into 4 general status.

We tested without using the transpose command, and were able to produce a single cell for each printer, and our formatting remained. However, the table was a single column, which required vertical scrolling.

@woodcock replied on a different post with code that might resolve the transpose issue. But we are continuing to test a variety of different solutions and formats.

I hope to answer his post next.

Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

genesiusj — Mon, 09 Mar 2020 20:56:42 GMT

@niketnilay
We are unable to run the above dashboard. Receive Unquoted attribute error on line 22.
| eval htmlData="<tr class=\"html_table_row\">"."<td class=\"html_table_column\" id=\"column_printer\">".printer."</td>"."<td class=\"html_table_column\" id=\"column_status\">".status."</td>"."<td class=\"html_table_column\" id=\"column_statusNum\">".statusNum."</td>"."<td class=\"html_table_column\" id=\"column_timeConvDate\">".timeConvDate."</td>"."<td class=\"html_table_column\" id=\"column_timeConvTime\">".timeConvTime."</td>"."<tr>"

We counted the quotes, and they're an even number, and appear to be in the proper positions.

As compared to the previous example with section (where request was for single field to be displayed in four columns), I have created with row and cell .

But IS what we are looking for. The only difference is a newline separating the four fields - printer, status, date, time - but in the same cell.

We'll be continuing to investigate further. Please let me know if our requirements are unclear.

Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

niketn — Tue, 10 Mar 2020 05:58:17 GMT

@genesiusj less than and greater than sign needs to be escaped in Dashboard code. On answers it resolves to the actual character hence you are not seeing & lt ; or & gt ; (purposely added space so that they do not get replaced on Answer).

Refer to w3schools link for using Espace sequence for the less than and greater than characters and replace the same in your dashboard code... https://www.w3schools.com/html/html_entities.asp

Re: Issue with css, html, js Formatting Search Output

genesiusj — Tue, 10 Mar 2020 13:25:03 GMT

Thanks @niketnilay
DOH! Silly mistake, that I am usually good at catching.
I will correct and test.
God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

genesiusj — Tue, 10 Mar 2020 14:04:25 GMT

@niketnilay
Making the <> change worked.

As compared to the previous example with section (where request was for single field to be displayed in four columns), I have created with row and cell.

Not sure if I need a combination of div and table?

What I need is to now format these 4 fields (printer, status, timeConvDate, and timeConvTime) into a single field (printerResults) with a newline after the printer, status, and timeConvDate values. The statusNum field is using strictly for sorting purposes and will not be displayed.
Next, I need to color the entire cell based on the statusNum.
Lastly, a drill-down (opening a new panel at the top of this dashboard) when the cell is clicked (or just the printer if the code will be too difficult) that will display these four fields, plus additional fields for contact and location information, as well as additional drill-down links.

BTW, I am searching for CSS/HTML/JS for dummies type of sites so I can learn. I worked with CSS and HTML a very long time ago, but never with JS.

Thank you again for all your help and insights.

God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

niketn — Tue, 10 Mar 2020 14:13:27 GMT

Can you whiteboard your output? Even pen and paper output with some example is fine.

Re: Issue with css, html, js Formatting Search Output

genesiusj — Tue, 10 Mar 2020 14:29:16 GMT

@niketnilay
Will do.

Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

genesiusj — Tue, 10 Mar 2020 16:37:46 GMT

@niketnilay
For whatever reason, the links to the screenshots keeps failing.
Examples: https://imgur.com/lDMRScj
Required Display: https://imgur.com/23pRnKq

The first image is a screenshot of the output I am receiving. The code will follow each example.
The second image is a mockup (used Excel) of our requirements.

When a printer is clicked, drill-down panels #4 & #5 should be displayed. Panel #4 contains the info as the previous clicked panel; plus other fields (not shown here) for contact and location information. Panel #5 contains a jpg of the printer. Clicking on the jpg will result in a new browser window opening. This window is the web interface for the printer.

THIS IS THE BASE SEARCH CODE

index=oit_printer_monitoring AND type=Printer
  | eval timeConvDate=strftime(_time,"%a %m-%d-%Y")
  | eval timeConvTime=strftime(_time,"%H:%M:%S")
  | eval statusNum=case(status IN ("printing,deleting,error","error,toner low","printing,error","paper jam","no toner","error,offline","error"),4,
       status IN ("door open,error","spooling,paused","paused","out of paper","error,out of paper","offline","door open"),3,
       status IN ("toner low","restarted"),2,
       status IN ("printing,deleting","printed,deleting","printing,printed,deleting","error,warming up","spooling,printing","warming up","spooling","printing","normal"),1) 
  | sort - statusNum, status 
  | fields  printer, status, statusNum, timeConvDate, timeConvTime

Panel #1: the data is displayed in a similar fashion to that from the code you provided. All the fields are clickable, and the drill-down will open panels #4 & #5. However, the data for a single printer is displayed across 4 columns; and formatting based on the statusNum field effects only the status field.

  <row>
    <panel>
      <title>Regular Table - Formatting Works - Click Any Field</title>
      <html depends="$alwaysHideCSSStyle$"/>
      <table>
        <search base="baseSearch">
          <query>
| eval printerResult=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"  "),"  "),"  ")
| makemv delim="  " printerResult
| dedup printer
| table printer, status, statusNum, timeConvDate, timeConvTime</query>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <option name="showPager">true</option>
        <format type="color" field="status">
          <colorPalette type="expression">if(like(value,"%out of paper%"),"#ee0000",if(like(value,"%toner low%"),"#ff9b0","#27db17"))</colorPalette>
        </format>
        <drilldown>
          <set token="tok_printerInfo">$click.value$</set>
        </drilldown>
      </table>
    </panel>

Panel #2: the data displayed is a single cell per printer (status, date, and time), and the background color has been formatted according to the statusNum field. However, only the printer field is clickable (drill-down will open panels #4 & #5); and the data is displayed in a single column.

    <panel>
      <title>Multivalue 1 Row - Formatting Works - Click Printer Name Only</title>
      <html depends="$alwaysHideCSSStyle$"/>
      <table>
        <search base="baseSearch">
          <query>
| eval printerResult=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"  "),"  "),"  ")
| makemv delim="  " printerResult
| dedup printer
| table printerResult, printer, status, statusNum, timeConvDate, timeConvTime
| fields - column, - printer, - status, - statusNum, - timeConvDate, - timeConvTime</query>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <option name="showPager">true</option>
        <format type="color" field="printerResult">
          <colorPalette type="expression">if(like(value,"%out of paper%"),"#ee0000",if(like(value,"%toner low%"),"#ff9b0","#27db17"))</colorPalette>
        </format>
        <drilldown>
          <set token="tok_printerInfo">$click.value2$</set>
        </drilldown>
      </table>
    </panel>

Panel #3: the data is displayed in a single cell per printer (status, date, and time), and is displayed horizontally. However, only the printer field is clickable (drill-down will open panels #4 & #5); no color formatting is run based on the statusNum field, and the data is displayed in a single row.

    <panel>
      <title>Transpose 1 Row - Not Formatting - Click Printer Name Only</title>
      <html depends="$alwaysHideCSSStyle$"/>
      <table>
        <search base="baseSearch">
          <query>
| eval printerResult=mvzip(printer,mvzip(status,mvzip(timeConvDate,timeConvTime,"  "),"  "),"  ")
| makemv delim="  " printerResult
| dedup printer
| table printerResult
| transpose 0
| fields - column</query>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <option name="showPager">false</option>
        <format type="color" field="printerResult">
          <colorPalette type="expression">if(like(value,"%out of paper%"),"#ee0000",if(like(value,"%toner low%"),"#ff9b0","#27db17"))</colorPalette>
        </format>
        <drilldown>
          <set token="tok_printerInfo">$click.value2$</set>
        </drilldown>
      </table>
    </panel>

All panels use this table formatting (color formatting is in the panel code).

  <row>
    <panel depends="$alwaysHideCSS$">
      <html>
        <style>
          thead{
            font-size: 13pt !important;
            display: none !important;
            text-align: center !important;
          }
            table, tbody, tr, td{
              font-size: 10pt !important;
              font-color: 0xffffff !important;
              text-align: center !important;
              border: 3px solid white;
          }
            .dashboard-row .dashboard-panel .panel-element-row {
              overflow: auto;
              max-height: 300px;
          }
        </style>
      </html>
    </panel>
  </row>

This is the code for panels #4 & #5.

  <row depends="$tok_printerInfo$">
    <panel>
      <title>Drill-down Panel 1</title>
      <table>
        <search base="baseSearch">
          <query>
| where printer="$tok_printerInfo$"
| table printer, status, timeConvDate, timeConvTime
| dedup printer
| transpose 0 
<!--| transpose 0 header_field=printer-->
| fields - column</query>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    <panel>
      <title>Drill-down Panel 2</title>
      <html>
    <center>
      <a href="http://$tok_printerInfo$.web.us" target="_blank">        <img src="/static/app/search/images/$tok_printerInfo$.jpg" height="auto" width="150px"/>      </a>
      </center>
  </html>
    </panel>
  </row>

Here are our requirements.
1. Single cell per printer (printer, status, date, and time fields).
2. The formatting of the cell is based on the value of the statusNum field.
3. Entire cell clickable, not just the printer field. Not a deal-breaker.
4. Table format (see screenshot below): left to right, across row (this would be based on other search/sort criteria not mentioned here for simplicity). When reaching the end of the visible page, a new row is displayed (this is why I was using your post on How to show table result in one page/ table modification). This continues until all printers are displayed. It is OK to have a vertical scroll bar, but not a horizontal one.

Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

niketn — Wed, 11 Mar 2020 18:05:00 GMT

@genesiusj I have updated my answer. Refer to screenshot and new code. Please try out and confirm. You may have to change SPL and CSS as per your needs.

Re: Issue with css, html, js Formatting Search Output

genesiusj — Wed, 11 Mar 2020 19:14:02 GMT

@niketnilay
THANK YOU SO MUCH!
I copied the XML as is, and I have the same results as your screenshot.
I'm going to modify your code using my data sources and get back to you.
Thanks and God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

vinothn — Thu, 12 Mar 2020 08:39:27 GMT

@niketnilay is there a way to drilldown to each tile..

Re: Issue with css, html, js Formatting Search Output

niketn — Thu, 12 Mar 2020 08:49:39 GMT

drilldown to a tile or drilldown from tile to something else?

Re: Issue with css, html, js Formatting Search Output

vinothn — Thu, 12 Mar 2020 09:22:48 GMT

@niketnilay drilldown to new dashboard.(Need to use Link)

Re: Issue with css, html, js Formatting Search Output

vinothn — Thu, 12 Mar 2020 09:30:51 GMT

@niketnilay if i click on tile (in the pic: if i click any one of the printer) it should open a new dashboard.

Re: Issue with css, html, js Formatting Search Output

niketn — Thu, 12 Mar 2020 11:20:08 GMT

@vinothn since the html panels have their unique ids, you can code custom drilldown from html panel using jQuery. Refer to an older answer of mine on similar lines: https://answers.splunk.com/answers/741114/how-to-drill-down-from-custom-result-value-1.html

Please try out and confirm. Do upvote the answers and comments that helped.

Re: Issue with css, html, js Formatting Search Output

niketn — Thu, 12 Mar 2020 12:51:31 GMT

@genesiusj @vinothn

Turns out this is purely Simple XML problem (with CSS override if required). No <html> table and JS Extension required.

I used the following approach:

Build a Splunk table with Multi-value cells (You can arrange as single Row or single column). For each Printer multiple values are Printer Name, Status, Status Type, Date and Time.
Apply color to table cell using expression color palette based on regex match for Status Type. Since case() is not available nested if() can be applied for setting more than two color ranges. Refer to answer. Refer to older answer: https://answers.splunk.com/answers/668588/how-to-add-custom-color-to-blank-cell.html
Enable table drilldown. $click.value$ gives all values in the multi-value cell clicked with each value separated by comma and $click.value2$ gives specific value in the multi-valued cell clicked.
Apply custom CSS to format Table cell look as a tile as per the requirement.

Following is the Simple XML code required.
PS: Supports drilldown and requires no JS. Also supports sorting by Printer Name by default table sorting property :)

 <dashboard>
  <label>Table with Color and Format</label>
  <row>
    <panel>
      <html>
        <style>
          #table_tile table tbody{
            display:flex;
            flex-wrap: wrap;
          }
          #table_tile table tbody tr{
            margin-right:10px;
            margin-bottom:10px;
          }
          #table_tile table tbody tr td{
            width: 180px;
            text-align: center;
          }
        </style>
        <div>
          <div>Clicked Value in Cell (click.value):$click.value$</div>
          <div>Clicked Cell Values (click.value2):$click.value2$</div>
        </div>
      </html>
      <table id="table_tile">
        <search>
          <query>| makeresults 
| eval status="printing,deleting,error;printing,error;door open,error;restarted;printed,deleting;error,offline;error,offline;spooling,paused" 
| makemv status delim=";" 
| mvexpand status 
| eval delta=500 
| streamstats count as sno 
| eval printer="printer".sno 
| eval delta=delta*sno 
| eval _time=_time-delta 
| fields - delta sno 
| eval timeConvDate=strftime(_time,"%a %m-%d-%Y") 
| eval timeConvTime=strftime(_time,"%H:%M:%S") 
| eval statusClass=case(status="printing,deleting,error","status_fatal",status="error,toner low","status_fatal",status="printing,error","status_fatal",status="paper jam","status_fatal",status="no toner","status_fatal",status="error,offline","status_fatal",status="error","status_fatal",
    status="door open,error","status_critical",status="spooling,paused","status_critical",status="paused","status_critical",status="out of paper","status_critical",status="error,out of paper","status_critical",status="offline","status_critical",status="door open","status_critical",
    status="toner low","status_low",status="restarted","status_low",
    status="printing,deleting","status_info",status="printed,deleting","status_info",status="printing,printed,deleting","status_info",status="error,warming up","status_info",status="spooling,printing","status_info",status="error,offline","status_info",status="spooling","status_info",status="printing","status_info",status="normal","status_info") 
| sort - statusClass, status 
| table printer, status, statusClass, timeConvDate, timeConvTime
| eval "Printer Info"=printer."###".status."###".statusClass."###".timeConvDate."###".timeConvTime
| fields "Printer Info"
| makemv "Printer Info" delim="###"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="color" field="Printer Info">
          <colorPalette type="expression">if (match(value,"status_fatal"), "#DC4E41", if(match(value,"^status_critical"),"#F8BE34", if(match(value,"status_low"),"#62B3B2","#B6C75A")))</colorPalette>
        </format>
        <drilldown>
          <set token="click.value">$click.value$</set>
          <set token="click.value2">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

Re: Issue with css, html, js Formatting Search Output

genesiusj — Thu, 12 Mar 2020 13:31:18 GMT

@niketnilay
Thank you.
In my original XML, I was able to color the cells without JS, that is why I kept pushing that.
This looks absolutely simple, and I am testing now with my data.
I'll get back shortly about that.

Meanwhile, can you recommend any good resources (online/books) for learning JS (no experience), CSS (limited, old experience), and HTML (better, old experience)? I have so many ideas for dashboards, and I know that not knowing these 3 skills is going to hamper my efforts. Plus, is there any documentation/site listing the JS, CSS, and HML properties, etc., not available within Splunk?

Thanks again for all your help and knowledge. Be back before end of day with the results with my data.
God bless,
Genesius

Re: Issue with css, html, js Formatting Search Output

niketn — Thu, 12 Mar 2020 13:59:29 GMT

Little bit tweak to the above code with Unicode characters and I dont need Status Indicator anymore.
Refer to one of my older answers with Unicode characters in the table: https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html

As per the previous code only unicode icons in SPL and colorPalette expression have been changed. Since Splunk Answers does not allow all Unicode characters to be posted posting screenshot of the code.