स्प्लंक में उन्नत डैशबोर्डिंग के लिए 10 ट्रिक्स। भाग 1

शुभ दोपहर

आज हम आपके साथ वार्षिक बड़े पैमाने पर होने वाली घटना स्प्लंक .conf18 के एक अंदरूनी सूत्र को साझा करना चाहते हैं, जो अक्टूबर की शुरुआत में हुआ था। Splunk .conf वह स्थान है जहां Splunk विशेषज्ञ और डेवलपर अपने अनुभव, विभिन्न टुकड़े और काम करने के लिए उपयोगी उपकरण साझा करते हैं।

दो लेखों में, हम डैशबोर्ड डेवलपर्स के लिए 10 जीवन हैक के बारे में बात करेंगे जो सम्मेलन में पेश किए गए थे। हम इस बारे में क्यों बात कर रहे हैं? क्योंकि आवेदन जितना बेहतर दिखता है, उतनी ही बेहतर जानकारी इसमें दी जाती है। वास्तव में अच्छा डैशबोर्ड बनाने के लिए, पहले से ही कई अंतर्निहित या आसानी से पूर्णांक उपकरण हैं, हालांकि हर कोई नहीं जानता कि उन्हें कहां और कैसे खोजना है। उनके बारे में अधिक पढ़ें और उनका उपयोग कैसे करें, कटौती के तहत देखें।

स्प्लंक में उन्नत डैशबोर्ड विकसित करने के लिए, कम से कम निम्नलिखित बातों से परिचित होना उचित है:

• सरल xml
• जावास्क्रिप्ट
• सीएसएस
• jQuery

लेकिन यहां तक ​​कि अगर आप परिचित नहीं हैं, तो बहुत जटिल चीजों के लिए नहीं (लेकिन अभी भी बुनियादी स्वचालित दृश्य के दायरे से परे) आप उदाहरण, रिक्त स्थान प्राप्त कर सकते हैं या जल्दी से यह पता लगा सकते हैं।

0. स्प्लंक डैशबोर्ड उदाहरण

विशिष्ट चिप्स पर आगे बढ़ने से पहले, यह ध्यान दिया जाना चाहिए कि अलग-अलग जटिलता के डैशबोर्ड के उदाहरणों के साथ एक विशेष अनुप्रयोग है, साथ ही स्क्रिप्ट जो इन डैशबोर्ड के पीछे हैं। इस एप्लिकेशन के माध्यम से देखने के बाद, आप विचार प्राप्त कर सकते हैं, यह देख सकते हैं कि किसी विशेष चार्ट को कैसे लागू किया जाता है, सामान्य रूप से एक उपयोगी चीज सीएसएस और जेएस स्क्रिप्ट टेम्पलेट ढूंढें।



आप लिंक डाउनलोड कर सकते हैं।

1. विकास मोड

डैशबोर्ड के विकास के दौरान कई बगों से बचने के लिए, विशेषकर सीएसएस और जेएस का परीक्षण करते समय, कैशिंग और अद्यतन प्रक्रिया में बदलाव करने की सिफारिश की जाती है।

Web.conf

आपको निम्नलिखित फ़ाइल को जोड़कर कॉन्फ़िगरेशन फ़ाइल /etc/system/local/web.conf बनाने (या संशोधित) करने की आवश्यकता है:

[settings]
minify_js = False
minify_css = False
js_no_cache = True
cacheEntriesLimit = 0
cacheBytesLimit = 0
enableWebDebug = True

ब्राउज़र

ब्राउज़र में कैशिंग अक्षम करें।

उदाहरण के लिए, Google Chrome के लिए, यह "पेज कोड" अनुभाग में किया जा सकता है:

चयनात्मक अद्यतन

यह ध्यान दिया जाना चाहिए कि आप स्प्लंक को न केवल कमांड लाइन या वेब इंटरफेस के माध्यम से, बल्कि URL के माध्यम से भी पुनः आरंभ कर सकते हैं:

http://localhost:8000/en-US/debug/refresh

नतीजतन, आपको एक रिपोर्ट मिलेगी कि लगभग 100 आइटम अपडेट किए गए हैं (कभी-कभी इसमें लंबा समय लगता है)


लेकिन यह हमेशा सब कुछ अपडेट करने के लिए आवश्यक नहीं है, इसलिए / डिबग / रिफ्रेश के माध्यम से अपडेट करने के मामले में , आप उन विशिष्ट तत्वों को निर्दिष्ट कर सकते हैं जिन्हें पुनः लोड करने की आवश्यकता है।

एक उदाहरण URL जो आपको केवल नेविगेशन फ़ाइलों और डैशबोर्डों को स्वयं लोड करने की अनुमति देता है:

http://localhost:8000/en-US/debug/refresh?entity=data/ui/views&entity=data/ui/nav

रिपोर्ट:

Entity refresh control page
===========================
'''
Forces a refresh on splunkd resources

This method calls a splunkd refresh on all registered EAI handlers that
advertise a reload function. Alternate entities can be specified by appending
them via URI parameters. For example,

http://localhost:8000/debug/refresh?entity=admin/conf-times&entity=data/ui/manager

will request a refresh on only 'admin/conf-times' and 'data/ui/manager'.

1) not all splunkd endpoints support refreshing.
2) auth-services is excluded from the default set, as refreshing that system will
logout the current user; use the 'entity' param to force it
'''

Refreshing data/ui/views OK
Refreshing data/ui/nav OK
DONE

2. गतिशील सामग्री

अक्सर डेटा विषम होता है, अब तक सभी ग्राफ़ लगातार मोड में प्रासंगिक होते हैं। कैसे सुनिश्चित करें कि देखने के लिए नहीं, उदाहरण के लिए, एक खाली कार्ड पर? (या कोई अन्य आरेख जिसके लिए किसी बिंदु पर पर्याप्त जानकारी नहीं है)



यह उदाहरण iplocation कमांड पर आधारित है, जो IP पते द्वारा अक्षांश और देशांतर देता है, जो तब मैप किए जाते हैं। लेकिन अगर अचानक हमारी खोज "ग्रे" आईपी पते पर आधारित है, उदाहरण के लिए, 127.0.0.1, तो टीम हमें परिणाम नहीं देगी और नक्शे पर कुछ भी नहीं होगा।

खाली कार्ड को न देखने के लिए, टोकन बचाव में आएंगे।

हम यह शर्त लगाते हैं कि यदि अव्यक्त क्षेत्र (अक्षांश) का मान खाली है, तो कोई टोकन नहीं होगा, और यदि मान मौजूद है, तो हम टोकन को कुछ मूल्य पर सेट करेंगे।

  <search id="map_search"> <query> | makeresults | eval ipaddr="$ipaddr$" | iplocation ipaddr </query> <progress> <condition match='$result.lat$!=""'> <set token="show_map">true</set> </condition> <condition> <unset token="show_map"></unset> </condition> </progress> </search> 

और फिर हम इस टोकन पर कार्ड के साथ पैनल की निर्भरता स्थापित करते हैं।

  <panel depends="$show_map$"> <map> <title>The map shows up if geostats can determine lat and lon</title> <search base="map_search"> <query>geostats count by ipaddr</query> </search> </map> </panel> 

यहाँ क्या हुआ:





डायनामिक डैशबोर्ड बनाने के लिए टोकन एक बहुत शक्तिशाली उपकरण है। आप यहां उनके बारे में अधिक पढ़ सकते हैं ।

3. बूटस्ट्रैप

बूटस्ट्रैप वेबसाइटों और वेब एप्लिकेशन बनाने के लिए उपकरणों का एक नि: शुल्क सेट है। टाइपोग्राफी, वेब फॉर्म, बटन, टैग, नेविगेशन ब्लॉक और जावास्क्रिप्ट एक्सटेंशन सहित अन्य वेब इंटरफेस घटकों के लिए HTML और सीएसएस डिजाइन टेम्पलेट शामिल हैं।

इसके साथ, आप बॉक्स के बाहर अपने डैशबोर्ड के लिए बस बहुत सी शांत फिच प्राप्त कर सकते हैं। इसके अलावा, बूटस्ट्रैप को स्प्लंक द्वारा अपने डैशबोर्ड के साथ काम करने के लिए एक उपकरण के रूप में मान्यता प्राप्त है।

उदाहरण के लिए, टेम्पलेट का उपयोग करके, हमारे डैशबोर्ड पर एक संवाद बॉक्स जोड़ें।



ऐसा करने के लिए, हम एक बटन जोड़ेंगे जो निम्नलिखित कोड का उपयोग करके एक संवाद बॉक्स लाता है:

 <panel> <html> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"/> </button> </div> <div class="modal-body"> 204.107.141.22 is a San Francisco IP address. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </html> </panel> 

आप इस कोड को getbootstrap.com पर लिंक के माध्यम से पा सकते हैं।

सावधान रहें कि कोड सही तरीके से काम करता है और तत्व डैशबोर्ड पर दिखाई देते हैं, कोड पैनल के अंदर होना चाहिए, और आपको यह भी इंगित करना होगा कि यह HTML है।

 <panel> <html>   … </html> </panel> 

संवाद पेटी के अलावा भी इसमें बहुत कुछ है। हम आपको सलाह देते हैं कि साइट getbootstrap.com का ध्यानपूर्वक अध्ययन करें और प्रस्तुत सभी उपकरण।

4. स्थैतिक स्रोत

स्थैतिक स्रोत क्या हैं? ये अलग-अलग चित्र, चिह्न, शैली, स्क्रिप्ट हैं जिन्हें आप डैशबोर्ड पर रख सकते हैं या लागू कर सकते हैं।

उन्हें फ़ाइल सिस्टम में संग्रहीत किया जाना चाहिए:
$SPLUNK_HOME/etc/apps/<your_app>/appserver/static/<your_resource>

URL के माध्यम से भी प्रवेश प्राप्त किया जा सकता है:
http://splunk_adress :splunk_port/static/app/<your_app>/<your_resource>

उदाहरण के लिए, तालिका शीर्ष लेख में एक आइकन जोड़ें।



ऐसा करने के लिए, आपको पैनल शीर्षक को HTML में बदलने और शीर्षक टैग का उपयोग करने और छवि टैग का उपयोग करके वहां एक आइकन जोड़ने की आवश्यकता है।

  <panel> <html> <h3 class="dashboard-element-title">IP Address Details <img src="/static/app/dashboard_tips/info.png"/> </h3> </html> <table> <search base="map_search"></search> </table> </panel> 

आप एक खाली पैनल में चित्र / आइकन, पाठ, कोड आदि भी जोड़ सकते हैं:

  <panel> <html> <p> <img src="/static/app/dashboard_tips/info.png"/> This image lives here on the file system: <code>$SPLUNK_HOME/etc/apps/APP_NAME/appserver/static</code> </p> </html> </panel> 

5. स्प्लंक स्टाइल गाइड

यह रंग, आइकन, फ़ॉन्ट आकार आदि के लिए एक मार्गदर्शिका है, जिसका उपयोग स्प्लंक डैशबोर्ड के लिए किया जा सकता है ताकि समग्र डिजाइन से बाहर न निकल सकें। तत्वों को एक वर्ग के रूप में संदर्भित किया जा सकता है और उनके डैशबोर्ड में उपयोग किया जा सकता है।

आप निम्नलिखित URL पर स्टाइल गाइड पा सकते हैं:
http:// splunk_adress:splunk_port /en-US/static/docs/style/style-guide.html





आइए स्टाइल गाइड से डैशबोर्ड में एक उपयोगकर्ता आइकन जोड़ें, इसके आकार और रंग को और बदलते हुए।



ऐसा करने के लिए, हम निम्नलिखित कोड का उपयोग करते हैं:

  <panel> <html> <p> Check it out: <br /> <i class="icon-user"></i> </p> <p> Change the font size: <br /><br /> <i class="icon-user" style="font-size:3em"></i> </p> <p> Change the color: <br /><br /> <i class="icon-user" style="font-size:3em; color: #5CC05C"></i> </p> </html> </panel> 

इस लेख में, हमने सरल उदाहरणों पर ध्यान दिया कि आप डैशबोर्ड पर डायनेमिक्स को कैसे कॉन्फ़िगर कर सकते हैं, वहां अलग-अलग तत्व डाल सकते हैं, विभिन्न टेम्पलेट्स कैसे खोजें और जोड़ सकते हैं। अगले लेख में, हम जावास्क्रिप्ट का उपयोग करके अधिक जटिल चीजों को लागू करने के लिए आगे बढ़ेंगे।

दिखाए गए उदाहरणों के साथ एक आवेदन GitHub पर पाया जा सकता है ।