All Apps and Add-ons
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
19 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
19 KB
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Quantify Your Splunk Investment Impact: Introducing Savings Metrics to Value Insights

Building on the foundation established in our initial Value Insights releases, we are introducing the Savings ...

Event Series: Telemetry Pipeline Management

Balancing Scale and Spend: Gaining Control Over High-Volume Metrics in Splunk Observability Cloud As ...

Kick the Tires Before You Commit: A Hands-On Tour of the Splunk Observability Cloud ...

Evaluating an enterprise observability platform usually goes like this: fill out a form, get a free trial with ...