Solved: Right top align "last updated time" token, within ...

pgadhari · ‎11-09-2019

I am trying to top-right align my "last updated time" token (as a separate div) in the Timepicker panel , but I am getting issues. How do I resolve this issue ? I want to show the time in the top-right corner of the panel, as shown in the image. Please help ?

Below is the XML for the same. At present, it is showing in bottom right of the div.

 <row>
    <panel>
     <title>Tools Analytics</title>
      <input type="dropdown" token="mon" searchWhenChanged="true">
        <label>Select Month</label>
        <fieldForLabel>Month</fieldForLabel>
        <fieldForValue>Month</fieldForValue>
        <search>
          <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <default>July-2019</default>
        <initialValue>July-2019</initialValue>
      </input>
      <html>
        <style>
          .updatetime {
            color: blue;
            font-size: 17px;
            text-align: right;
            margin-right: 20px;
          }
        </style>
        <div class="updatetime">
          Last Update : $update_time$
        </div>
     </html>
    </panel>
  </row>

niketn · ‎11-10-2019

@pgadhari please try the following panels with ids and corresponding CSS override as per your need. Please try out and confirm!

PS: Dashboard (Beta) app currently does not support CSS or JS Extension as it is just subset of Splunk Developer Cloud (React UI based) which allows you to build Dashboard based on New Dashboard Framework through UI and JSON code but nothing more.

<dashboard>
  <label>Last Update Time Alignment</label>
  <row>
     <panel id="panel_header_inputs">
      <title>Tools Analytics</title>
       <input type="dropdown" token="mon" searchWhenChanged="true">
         <label>Select Month</label>
         <fieldForLabel>Month</fieldForLabel>
         <fieldForValue>Month</fieldForValue>
         <search>
           <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
           <earliest>0</earliest>
           <latest></latest>
         </search>
         <default>July-2019</default>
         <initialValue>July-2019</initialValue>
       </input>
     </panel>
     <panel id="panel_header_message">
       <html>
         <style>
           #panel_header_input .dashboard-panel{
            margin-right: 0px !important;
           }
           .updatetime {
             color: blue;
             font-size: 17px;
             text-align: right;
             margin-right: 20px;
             padding-top: 70px !important;
           }
         </style>
         <div class="updatetime">
           Last Update : $update_time$
         </div>
      </html>
     </panel>
   </row>
</dashboard>

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn · ‎11-10-2019

@pgadhari please try the following panels with ids and corresponding CSS override as per your need. Please try out and confirm!

PS: Dashboard (Beta) app currently does not support CSS or JS Extension as it is just subset of Splunk Developer Cloud (React UI based) which allows you to build Dashboard based on New Dashboard Framework through UI and JSON code but nothing more.

<dashboard>
  <label>Last Update Time Alignment</label>
  <row>
     <panel id="panel_header_inputs">
      <title>Tools Analytics</title>
       <input type="dropdown" token="mon" searchWhenChanged="true">
         <label>Select Month</label>
         <fieldForLabel>Month</fieldForLabel>
         <fieldForValue>Month</fieldForValue>
         <search>
           <query>index=com sourcetype=subs|table _time|eval Month=strftime(_time,"%B-%Y")|table Month|dedup Month</query>
           <earliest>0</earliest>
           <latest></latest>
         </search>
         <default>July-2019</default>
         <initialValue>July-2019</initialValue>
       </input>
     </panel>
     <panel id="panel_header_message">
       <html>
         <style>
           #panel_header_input .dashboard-panel{
            margin-right: 0px !important;
           }
           .updatetime {
             color: blue;
             font-size: 17px;
             text-align: right;
             margin-right: 20px;
             padding-top: 70px !important;
           }
         </style>
         <div class="updatetime">
           Last Update : $update_time$
         </div>
      </html>
     </panel>
   </row>
</dashboard>

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari · ‎11-10-2019

Sure. I will try this out and get back to you. Thanks.

pgadhari · ‎11-10-2019

Yes, this works. Thanks.

woodcock · ‎11-09-2019

You might try the new Dashboards (Beta) app on Splunk. I have heard that it is a complete update of the dashboarding framework and has many more options.

pgadhari · ‎11-09-2019

Yes, i saw that app, looks really interesting. But my current Splunk version is 6.6.3 and I have plan to upgrade it in next couple of weeks. That Beta app is not support on Splunk version 6.6.3, hence is there any alternate solution that you can provide for my issue ? Please advise ?

Right top align "last updated time" token, within Time picker fieldset panel using separate div ?

Join Us for Splunk University and Get Your Bootcamp Game On!

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

Announcing Scheduled Export GA for Dashboard Studio