topic Re: How to use glowing/flashing button using CSS/HTML in Dashboards & Visualizations

How to use glowing/flashing button using CSS/HTML

hrs2019 — Mon, 08 Jun 2020 00:02:48 GMT

Hi Everyone,

How to use glowing/flashing button to show the status as connect or disconnect
if connect its show in green and if its disconnects are shown in red.

i am using CSV file (raj100) for staus info.
i want to show this glowing/flashing button in the status field like the 1st screenshot.

i am using below XML code.
    <dashboard script="panel_tooltip.js" theme="dark">
      <label>test</label>
      <row>

        <html>
    <a class="button" href="#">Connected</a>

    <style>
    <body>
     {
      background: black;
    }
    .button {
      background-color: #004A7F;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      border: none;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-block;
      font-family: Arial;
      font-size: 20px;
      padding: 5px 10px;
      text-align: center;
      text-decoration: none;
      -webkit-animation: glowing 1500ms infinite;
      -moz-animation: glowing 1500ms infinite;
      -o-animation: glowing 1500ms infinite;
      animation: glowing 1500ms infinite;
    }
    @-webkit-keyframes glowing {
      0% { background-color: #63f707; -webkit-box-shadow: 0 0 3px #B20000; }
      50% { background-color: #469416; -webkit-box-shadow: 0 0 40px #FF0000; }
      100% { background-color: #63f707; -webkit-box-shadow: 0 0 3px #B20000; }
    }
    </style>
    </body>
    </html>

        <panel>
    <title>Status</title>
          <table>
            <search>
              <query>| inputlookup raj100|table ApName "Area CP Name" CLevel Date 
    | eval CLevel=if(like(ApName,"%CCP%"), "Connected", "disconnected")
    |table ApName "Area CP Name" CLevel</query>
              <earliest>-24h@h</earliest>
              <latest>now</latest>
            </search>
            <option name="drilldown">none</option>
          </table>
        </panel>
      </row>
    </dashboard>
CodePen Home

Re: How to use glowing/flashing button using CSS/HTML

niketn — Mon, 11 May 2020 09:45:08 GMT

@hrs2019 if you want purely CSS based approach you can try the following, where colorPalette map is used to assign Green or Red Color based on Connected or Disconnected

     <format type="color" field="CLevel">
       <colorPalette type="map">{"Disconnected":#DC4E41,"Connected":#53A051}</colorPalette>
     </format>

and Glow animation is always shades of Grey (static).

        @-webkit-keyframes glowing {
          0%   {opacity: 0.5; -webkit-box-shadow: 0 0 3px #F7F8FA;}
          50%  {opacity: 0.7; -webkit-box-shadow: 0 0 40px #E1E6EB;}
          100% {opacity: 1; -webkit-box-shadow: 0 0 3px #F7F8FA;}
        }

If you want both rendering and glow to be as per CLevel field value, you will have to use Simple XML JS Extension to apply appropriate classes to each cell and have glowing CSS override according to the class. You can refer to Splunk Dashboard Examples app or several answers on Splunk Answers Table Cell rendering to see how you can access Table Cell value in JS and assign Class as per the table cell. For example: https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

Following is the complete Simple XML Code:

<dashboard script="panel_tooltip.js" theme="dark">
  <label>Table with Flashing Buttons</label>
  <row>
    <panel depends="$alwaysHideCSSOverride$">
      <html>
          <style>
            #tableWithGlowingButtons table td:nth-child(3) {
               border-radius: 10px;
               border: none;
               cursor: pointer;
               display: inline-block;
               font-family: Arial;
               font-size: 12px;
               margin: 5px;
               padding: 5px 10px;
               text-align: center;
               text-decoration: none;
               -webkit-animation: glowing 1500ms infinite;
            }
            @-webkit-keyframes glowing {
              0%   {opacity: 0.5; -webkit-box-shadow: 0 0 3px #F7F8FA;}
              50%  {opacity: 0.7; -webkit-box-shadow: 0 0 40px #E1E6EB;}
              100% {opacity: 1; -webkit-box-shadow: 0 0 3px #F7F8FA;}
            }
          </style>
        </html>
    </panel>
    <panel>
      <title>Status</title>
      <table id="tableWithGlowingButtons">
        <search>
          <query>| makeresults
| eval ApName="CCP,SSD,FF,DDD,RT","Area CP Name"="test"
| makemv ApName delim=","
| mvexpand ApName
| eval CLevel=if(like(ApName,"%CCP%"), "Connected", "Disconnected") 
| table ApName "Area CP Name" CLevel</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="CLevel">
          <colorPalette type="map">{"Disconnected":#DC4E41,"Connected":#53A051}</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

Re: How to use glowing/flashing button using CSS/HTML

hrs2019 — Mon, 11 May 2020 18:03:03 GMT

@niketnilay Thank again your solution always easy to understand.

Re: How to use glowing/flashing button using CSS/HTML

hrs2019 — Thu, 14 May 2020 11:26:32 GMT

@niketnilay if i want to use gif instead of connected or disconnected how i can add in cleavel.
gif link is
https://github.com/hemraj26/test/blob/master/red.gif
https://github.com/hemraj26/test/blob/master/yellow.gif

Re: How to use glowing/flashing button using CSS/HTML

niketn — Thu, 14 May 2020 13:22:17 GMT

@hrs2019 If you want table with icon (built-in or custom), you should try Splunk Dashboard Examples app which has Table Icon Set (Rangemap) specifically for such use case. You can also try out the following blogs: https://www.splunk.com/en_us/blog/tips-and-tricks/custom-icons-in-splunk-6-tables.html

You can also add your own glow animation as per your question:

Following is a run anywhere example.

Simple XML Dashboard:

<dashboard script="table_glowing_icons.js" theme="dark">
  <label>Table with Glowing Icons</label>
  <row>
    <panel>
      <html>
        <style>
          td.icon {
              text-align: center;
          }
          td.icon i {
              font-size: 25px;
          }
          td.icon .severe {
              color: red;
          }
          td.icon .elevated {
              color: orangered;
          }
          td.icon .low {
              color: #006400;
          }
          td.icon i.severe::before,
          td.icon i.elevated::before{
            -webkit-animation: glowing 1500ms infinite;
          }
          @-webkit-keyframes glowing {
            0%   {opacity: 0.1;font-size:medium;text-shadow: 0 0 3px #DC4E41;}
            25%  {opacity: 0.7;font-size:large;text-shadow: 0 0 10px #DC4E41;}
            75%  {opacity: 1;font-size:x-large;text-shadow: 0 0 30px #DC4E41;}
            100% {opacity: 0.7;font-size:large;text-shadow: 0 0 10px #DC4E41;}
          }
          .icon-inline i {
              font-size: 18px;
              margin-left: 5px;
          }
          .icon-inline i.icon-alert-circle {
              color: #ef392c;
          }
          .icon-inline i.icon-alert {
              color: #ff9c1a;
          }
          .icon-inline i.icon-check {
              color: #5fff5e;
          }
        </style>
      </html>
      <table id="table1">
        <search>
          <query>| makeresults 
| eval ApName="CCP,SSD,FF,DDD,RT","Area CP Name"="test" 
| makemv ApName delim="," 
| mvexpand ApName 
| streamstats count as sno
| eval CLevel=case(sno%2==0, "low",sno%3==0, "severe",true(),"elevated") 
| table ApName "Area CP Name" CLevel</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">none</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>
      </table>
    </panel>
  </row>
</dashboard>

Required JS file: table_glowing_icons.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Only use the cell renderer for the CLevel field
            return cell.field === 'CLevel';
        },
        render: function($td, cell) {
            // Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<i class="icon-alert-circle <%- CLevel %>" title="<%- CLevel %>"></i>', {
                CLevel: cell.value,
            }));
        }
    });
    mvc.Components.get('table1').getVisualization(function(tableView){
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new RangeMapIconRenderer());
    });
});

PS: If you dont want JS and are fine without using Dark Theme, you can try out Unicode Icon in Table like
https://emojipedia.org/large-orange-circle/
https://emojipedia.org/large-red-circle/
https://emojipedia.org/large-green-circle/

Refer to answers:

https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html
https://answers.splunk.com/answers/755100/how-to-add-icons-for-the-multiple-fields-in-splunk.html

Re: How to use glowing/flashing button using CSS/HTML

hrs2019 — Sun, 17 May 2020 10:58:19 GMT

Thanks again @niketnilay it is working i have tested in my local splunk.
But i don't have admin access in my office splunk enterprise so i can't upload JS file there.
just want to know do we have any option using CSS? without uploading JS file.

Re: How to use glowing/flashing button using CSS/HTML

niketn — Sun, 17 May 2020 13:32:15 GMT

@hrs2019 Unicode is the only option as I have mentioned above. Dark Mode will not work. Please try out and confirm!

Re: How to use glowing/flashing button using CSS/HTML

hrs2019 — Wed, 20 May 2020 12:33:06 GMT

Thanks @niketnilay it is working