Dashboards & Visualizations
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

facing issue colorPalette implementation

sush
Engager
‎06-21-2020 11:10 PM

I implemented the <colorpalete> tag giving condition for success and failed scenario but its not getting impacting the code .

visual-

sush_0-1592805964880.png

   <format type="color" field="Stream">
      <colorPalette type="expression">case(value="P2O","#51cfc8",value="O2A","#EAD1DC",value="U2C","#93C47D")</colorPalette>
   </format>
   <format type="color">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>

source code-

<dashboard theme="dark">
   <label>Dummy123</label>
   <init>
      <unset token="tok_details" />
      <unset token="tok_json" />
   </init>
   <search id="API_Base_Search">
      <query><![CDATA[index=devops-insights sourcetype="http:davinci_api_metrics"
| rex mode=sed "s/\"//g"
| rex "name[\:\s]+(?<API_Name>.*?)\s+\((?<Applications>.*?)\)"
| rex "steps[\:\s]+\[\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIServiceCall>.*?)\s+\}\,\s+line[\:\s]+\w+\,\s+name[\:\s]+(?<Step1>.*?)\,"
| rex "keyword[\:\s]+Given\s+\}\,\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIRequest>.*?)\s+\}\,\s+line[\:\s]+\w+\,\s+name[\:\s]+(?<Step2>.*?)\,"
| rex "keyword[\:\s]+When\s+\}\,\s+\{\s+result[\:\s]+\{\s+duration[\:\s]+\w+\,\s+status[\:\s]+(?<APIResponse>.*?)\s+\}\,"
| rex "API URL is[\:\s]+(?<API_URL>.*?)\,"
| rex "API response header should have status code as\s\\\(?<Code>.*?)\\\\,"
| rex "correlationId\\\\:\\\(?<CorrelationId>.*?)\\\\,"
| table API_Name, Applications, ,API_URL, APIServiceCall,Step1, APIRequest, Step2, APIResponse, Code, CorrelationId, _time]]></query>
      <earliest>@d</earliest>
      <latest>now</latest>
   </search>
   <row>
      <panel>
         <html>
            <p />
            <style>#user_input th[data-sort-key=IR_Number] {
width: 12% !important;
}

#test th[data-sort-key=Category] {
width: 8.3% !important;
min-width: 180px;
}
#test th[data-sort-key=Environment] {
width: 8.3% !important;
}
#test th[data-sort-key=IRNumber] {
width: 8.3% !important;
}
#test th[data-sort-key="6AM to 10AM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments6AMto10AM] {
width: 8.3% !important;
}

#test th[data-sort-key="10AM to 2PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments10AMto2PM] {
width: 8.3% !important;
}
#test th[data-sort-key="2PM to 6PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments2PMto6PM] {
width: 8.3% !important;
}
#test th[data-sort-key="6PM to 10PM"] {
width: 8.3% !important;
}
#test th[data-sort-key=Comments6PMto10PM] {
width: 8.3% !important;
}
#test th[data-sort-key=Shakeout_Date] {
width: 8.3% !important;
}

#customWidth th[data-sort-key=count] {
width: 20% !important;
}
#test tbody tr td[data-cell-index="0"]{

border-radius: 0px !important;

text-align:left !important;

}

#test tbody tr td[data-cell-index=n]{

border-radius: 0px !important;

text-align:left !important;

}

#test tbody tr td{

border-radius: 8px !important;

text-align:left !important;

border: 2px solid black;

}

#test thead tr th{

border-radius: 8px 8px 0px 0px !important;

background-color: mediumvioletred !important;

text-align:center !important;

}

#test table {

margin:4px !important;

border:2px;

border-radius:5px 5px 0px 0px;

min-width:99% !important

}</style>
         </html>
         <table id="test">
            <title>API Calls Summary</title>
            <search base="API_Base_Search">
               <query>| eval Stream=case(like(API_Name,"Logistics Booking API"),"P2O",like(API_Name,"Tramas Feasbility Check API"),"P2O")
| eval Scenario=case(like(API_Name,"Logistics Booking API"),"Add New Mobile",like(API_Name,"Tramas Feasbility Check API"),"Service Migration")
| eval ReaponseAPI=case((like(APIServiceCall,"passed") AND like(APIRequest,"passed") AND like(APIResponse,"passed")),"Success",true(),"Failed")
| fields Stream,Scenario,CorrelationId, API_Name, , API_URL, ReaponseAPI, _time
| eval Hour=strftime(_time, "%H")
| eval 08:00=if(Hour==08,ReaponseAPI,"")
| eval 09:00=if(Hour==09,ReaponseAPI,"")
| eval 10:00=if(Hour==10,ReaponseAPI,"")
| eval 11:00=if(Hour==11,ReaponseAPI,"")
| eval 12:00=if(Hour==12,ReaponseAPI,"")
| eval 13:00=if(Hour==13,ReaponseAPI,"")
| eval 14:00=if(Hour==14,ReaponseAPI,"")
| eval 15:00=if(Hour==15,ReaponseAPI,"")
| eval 16:00=if(Hour==16,ReaponseAPI,"")
| eval 17:00=if(Hour==17,ReaponseAPI,"")
| eval 18:00=if(Hour==18,ReaponseAPI,"")
| eval 19:00=if(Hour==19,ReaponseAPI,"")
| eval 20:00=if(Hour==20,ReaponseAPI,"")
| eval 21:00=if(Hour==21,ReaponseAPI,"")
| stats values(Stream) as Stream, values(Scenario) as Scenario,
values(08:00) as 08:00, values(09:00) as 09:00, values(10:00) as 10:00, values(11:00) as 11:00, values(12:00) as 12:00, values(13:00) as 13:00,
values(14:00) as 14:00, values(15:00) as 15:00, values(16:00) as 16:00,
values(17:00) as 17:00,
values(18:00) as 18:00,
values(19:00) as 19:00,
values(20:00) as 20:00,
values(21:00) as 21:00,
values(22:00) as 22:00,
by API_Name
| fields Stream,Scenario, API_Name, 08:00,09:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00,17:00,18:00,19:00,20:00,21:00,22:00</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">false</option>
            <format type="color" field="Stream">
               <colorPalette type="expression">case(value="P2O","#51cfc8",value="O2A","#EAD1DC",value="U2C","#93C47D")</colorPalette>
            </format>
            <format type="color">
               <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
            </format>
            <drilldown>
               <set token="tok_API_Name">$row.API_Name$</set>
               <set token="tok_hour">$click.name2$</set>
               <set token="tok_details">true</set>
               <unset token="tok_json" />
            </drilldown>
         </table>
      </panel>
   </row>
   <row>
      <panel depends="$tok_details$">
         <table>
            <title>Details of the selected $tok_API_Name$ Call</title>
            <search base="API_Base_Search">
               <query>| search API_Name="$tok_API_Name$"
| eval currentwindow="$tok_hour$".":00"
| eval currenttime=now()
| eval currenttime=strftime(currenttime, "%d-%m-%Y")
| eval starttime_tok=currenttime+"T"+currentwindow
| eval starttime_tok=strptime(starttime_tok,"%d-%m-%YT%H:%M:%S")
| eval endtime_tok=starttime_tok+3600
| eval slot=if(_time&gt;starttime_tok AND _time&lt;endtime_tok,"Yes", "No")
| where slot="Yes"


| eval APIServiceCall=Step1." - ".APIServiceCall
| eval APIRequest=Step2." - ".APIRequest
| eval APIResponse=Code." - ".APIResponse
| eval API_Call_Summary=APIServiceCall."#".APIRequest."#".APIResponse
| eval API_Call_Summary=split(API_Call_Summary,"#")
| fields API_Name, CorrelationId, Applications, API_URL, API_Call_Summary, _time</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>
            <format type="color" field="API_URL">
               <colorPalette type="sharedList">["0xEAD1DC"]</colorPalette>
               <scale type="sharedCategory" />
            </format>
            <format type="color" field="API_Name">
               <colorPalette type="map" />
            </format>
            <drilldown>
               <set token="tok_json">true</set>
               <set token="tok_CorId">$row.CorrelationId$</set>
            </drilldown>
         </table>
      </panel>
   </row>
   <row>
      <panel depends="$tok_json$">
         <table>
            <title>Details of $tok_API_Name$ for CorrelationId $tok_CorId$</title>
            <search>
               <query>index=devops-insights sourcetype="http:davinci_api_metrics"
| search $tok_CorId$
| table _raw
| rename _raw as Event_Details</query>
               <earliest>$earliest$</earliest>
               <latest>$latest$</latest>
            </search>
            <option name="count">100</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>

 

Labels (2)
Labels
Tags (3)
0 Karma
Reply

niketn
Legend
‎06-22-2020 12:06 PM

@sush if you want to apply colorPalette to table cell/s, you need to supply the field name. Since you have static CSS for various hourly buckets, you would need to create something similar for colorPalette format as well. For example following should work for 08:00 and 09:00 table cell columns respectively.

   <format type="color" field="08:00">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>
   <format type="color" field="09:00">
      <colorPalette type="expression">case(value="Success","#428C43",value="Failed","#B72D0E",value="NA","#b5b8bd")</colorPalette>
   </format>

 PS: You are better off applying table cell color using JS if you want to write a generic code instead of creating 24 format section in Simple XML like above. Refer to one of my older answers to do this using JS: https://community.splunk.com/t5/Dashboards-Visualizations/How-can-I-get-the-Table-cell-colorization-...

On a different note, seems like your CSS style override lines of code can be reduced as same override is applied to multiple selectors. Also your SPL can be improved. You are also using Base search to pass events directly without using a transforming command which may lead to performance issues and silent dropping of data if event limit is reached for base search. ( However, all other tips later if needed 🙂 )

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Get Updates on the Splunk Community!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...