All Apps and Add-ons
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Adding simple JavaScript, CSS, HTML in Splunk dashboard

kannu
Communicator
‎09-13-2017 03:59 AM

Dear Splunkers,

Please check this https://codepen.io/tieppt/pen/vKJNaE .

Question is: Can I have that sonar animation in Splunk dashboard using Splunk JS or any other method?

Thanks in advance .

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎09-13-2017 04:37 AM

@kannu, there are several ways to do it in Splunk.

1) Simple XML Dashboard with HTML Panel and inline <style>
2) Simple XML Dashboard with HTML Panel and CSS style applied through CSS file
3) Simple XML Dashboard with html file reference with inline <style> or CSS file
4) Splunk HTML Dashboard with inline <style> or CSS file

For simplicity sake I am attaching the example for the first approach. For remaining you can refer to Splunk 6.x Dashboard Examples app on Splunkbase and also dev.splunk.com for Splunk Webframework reference.

Following is the code in Splunk based on your sample CSS:

alt text

<dashboard>
  <label>Sonar Effect using CSS</label>
  <row>
    <panel>
      <html>
        <!-- Following style element should be moved to css file and referred in view root node as style="your_css_file_name.css"-->
        <!-- CSS Files are saved under appserver\static folder i.e. $SPLUNK_HOME\etc\apps\<YourSplunkApp>\appserver\static\<YourCSSFileName>.css -->
        <style>
          .dashboard-row .dashboard-panel{
            background: #6EE6A9;
          }

          .wrapper {
            width: 50%;
            margin: 5em auto;
            position: relative;
          }
          .wrapper p {
            color: #fff;
            margin-top: 50px;
          }

          .btn-sonar {
            background: #FF594C;
            border: 0;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            display: inline-block;
            color: #fff;
            outline: none;
            position: relative;
          }
          .btn-sonar::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            top: 0;
            left: 0;
          }
          .btn-sonar:hover::before {
            -webkit-animation: sonar-effect 1s ease-in-out .1s infinite;
                    animation: sonar-effect 1s ease-in-out .1s infinite;
          }

          .down {
            position: relative;
            display: inline-block;
            -webkit-animation: fade-down 2s infinite;
                    animation: fade-down 2s infinite;
          }

          @-webkit-keyframes sonar-effect {
            0% {
              opacity: 0.3;
            }
            40% {
              opacity: 0.5;
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
            }
            100% {
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
              opacity: 0;
            }
          }

          @keyframes sonar-effect {
            0% {
              opacity: 0.3;
            }
            40% {
              opacity: 0.5;
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
            }
            100% {
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
              opacity: 0;
            }
          }
          @-webkit-keyframes fade-down {
            0% {
              opacity: 1;
              -webkit-transform: translateY(-20px);
                      transform: translateY(-20px);
            }
            50% {
              opacity: 0.8;
              -webkit-transform: translateY(15px);
                      transform: translateY(15px);
            }
            100% {
              opacity: 0;
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
            }
          }
          @keyframes fade-down {
            0% {
              opacity: 1;
              -webkit-transform: translateY(-20px);
                      transform: translateY(-20px);
            }
            50% {
              opacity: 0.8;
              -webkit-transform: translateY(15px);
                      transform: translateY(15px);
            }
            100% {
              opacity: 0;
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
            }
          }
        </style>
        <div class="wrapper">
          <button class="btn-sonar"><span class="down">V</span></button>
        <p>hover button to see more effect</p>
        </div>        
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
1 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎09-13-2017 04:37 AM

@kannu, there are several ways to do it in Splunk.

1) Simple XML Dashboard with HTML Panel and inline <style>
2) Simple XML Dashboard with HTML Panel and CSS style applied through CSS file
3) Simple XML Dashboard with html file reference with inline <style> or CSS file
4) Splunk HTML Dashboard with inline <style> or CSS file

For simplicity sake I am attaching the example for the first approach. For remaining you can refer to Splunk 6.x Dashboard Examples app on Splunkbase and also dev.splunk.com for Splunk Webframework reference.

Following is the code in Splunk based on your sample CSS:

alt text

<dashboard>
  <label>Sonar Effect using CSS</label>
  <row>
    <panel>
      <html>
        <!-- Following style element should be moved to css file and referred in view root node as style="your_css_file_name.css"-->
        <!-- CSS Files are saved under appserver\static folder i.e. $SPLUNK_HOME\etc\apps\<YourSplunkApp>\appserver\static\<YourCSSFileName>.css -->
        <style>
          .dashboard-row .dashboard-panel{
            background: #6EE6A9;
          }

          .wrapper {
            width: 50%;
            margin: 5em auto;
            position: relative;
          }
          .wrapper p {
            color: #fff;
            margin-top: 50px;
          }

          .btn-sonar {
            background: #FF594C;
            border: 0;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            display: inline-block;
            color: #fff;
            outline: none;
            position: relative;
          }
          .btn-sonar::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            top: 0;
            left: 0;
          }
          .btn-sonar:hover::before {
            -webkit-animation: sonar-effect 1s ease-in-out .1s infinite;
                    animation: sonar-effect 1s ease-in-out .1s infinite;
          }

          .down {
            position: relative;
            display: inline-block;
            -webkit-animation: fade-down 2s infinite;
                    animation: fade-down 2s infinite;
          }

          @-webkit-keyframes sonar-effect {
            0% {
              opacity: 0.3;
            }
            40% {
              opacity: 0.5;
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
            }
            100% {
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
              opacity: 0;
            }
          }

          @keyframes sonar-effect {
            0% {
              opacity: 0.3;
            }
            40% {
              opacity: 0.5;
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
            }
            100% {
              box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
              -webkit-transform: scale(1.5);
                      transform: scale(1.5);
              opacity: 0;
            }
          }
          @-webkit-keyframes fade-down {
            0% {
              opacity: 1;
              -webkit-transform: translateY(-20px);
                      transform: translateY(-20px);
            }
            50% {
              opacity: 0.8;
              -webkit-transform: translateY(15px);
                      transform: translateY(15px);
            }
            100% {
              opacity: 0;
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
            }
          }
          @keyframes fade-down {
            0% {
              opacity: 1;
              -webkit-transform: translateY(-20px);
                      transform: translateY(-20px);
            }
            50% {
              opacity: 0.8;
              -webkit-transform: translateY(15px);
                      transform: translateY(15px);
            }
            100% {
              opacity: 0;
              -webkit-transform: translateY(20px);
                      transform: translateY(20px);
            }
          }
        </style>
        <div class="wrapper">
          <button class="btn-sonar"><span class="down">V</span></button>
        <p>hover button to see more effect</p>
        </div>        
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
1 KB
Reply
Get Updates on the Splunk Community!

Splunk Cloud | Empowering Splunk Administrators with Admin Config Service (ACS)

Greetings, Splunk Cloud Admins and Splunk enthusiasts! The Admin Configuration Service (ACS) team is excited ...

Tech Talk | One Log to Rule Them All

One log to rule them all: how you can centralize your troubleshooting with Splunk logs We know how important ...

Splunk Security Content for Threat Detection & Response, Q1 Roundup

Join Principal Threat Researcher, Michael Haag, as he walks through:An introduction to the Splunk Threat ...