自產品問世之後,Splunk的使用介面一直都沒有太大的變化,有些人可能會覺得過於制式單調,如果想要更動預設的使用者介面,可以參考本文介紹的方法,修改登入畫面的預設圖示以及更換登入按鈕的顏色。
自從Splunk自推出之後,使用介面似乎都是固定的,筆者在客戶端提供服務時,有時候也會被客戶要求是否能夠製作其專屬的使用者介面。當時也只能跟客戶說回去後試試看,但在這個競爭激烈的市場,稍有遲疑,機會也許就會被其他的競爭者被捷足先登。
這裡將示範如何訂製專屬的Splunk使用介面。筆者使用Firefox作為Splunk介面的瀏覽器,因為Firefox是Splunk官方建議的使用者瀏覽器。另外,在Firefox安裝一個外掛元件「Firebug」,可以方便直接找到程式碼的位置,如果少了這樣東西,可能就要靠自己摸索。
安裝Firebug附加元件
首先,在Firefox瀏覽器中的【工具】功能表裡找到【附加元件】這個選項。
然後,找出「Firebug」並按下〔安裝〕按鈕。之後,Firefox就會自動完成安裝程序。
更換Splunk預設畫面
接著牛刀小試一下,先把登入的畫面左方的照片置換掉。
在Firefox的右上角可以找到一個蟲蟲的圖示,或者直接按下鍵盤上的〔F12〕按鍵,也具有同樣的效果。
然後,在畫面左下角找到一個滑鼠的游標圖示。加以點選之後,然後再將滑鼠移動到有Splunk圖案的地方點一下,下面的視窗就會有所變化。
接著,會找到一個名稱為「logo-mrsparkle.png」的檔案。之後找到「$SPLUNK_HOME\share\splunk\search_mrsparkle\exposed\img\skins\default」這個資料夾。在這個資料夾中,有一個「logo-mrsparkle.png」檔案,這就是登入畫面所使用的圖檔,如果不喜歡,可以使用其他的圖案來替代。
只要替代的檔案名稱也命名為logo-mrsparkle.png就可以使用。經過以上的操作之後,最終的結果如下圖所示。
替換登入按鈕顏色
Splunk不只可以更改預設畫面,也可以把登入按鈕的顏色置換成自己想要的顏色,不過還是要先知道這個登入按鈕的程式碼被寫在哪裡,所以要借用一下Firebug的強大功能,如此可以馬上得知程式碼是被寫在login.css的檔案內。
到「$SPLUNK_HOME\share\splunk\search_mrsparkle\exposed\css」目錄下找到logo.css之後,接著搜尋「input.splButton-primary」這個字串。
找到「input.splButton-primary」這個字串後,編輯「background-color:」後面的#73A550,改為#406。
然後,到Splunk登入畫面內按下〔重新整理〕,就可以得到想要的結果。
修改預設圖形
試作完畢,是不是覺得原來修改Splunk登入畫面是如此地簡單。
一般來說,在Splunk預設的圖形之中有長條圖、折線圖、圓餅圖等等的圖形,但事實上Splunk的表報畫面還可以透過修改css檔案和Jquery等方法改變預設的設計。其修改範例如下面兩張圖例所示:
在實務的應用上,還可以製作成機房的狀態管理,將目前機房內部資料庫主機的狀態,透過Splunk的介面呈現出目前各個資料庫主機的狀態。甚至當主機的狀態一旦出現紅燈,便立即透過Splunk提供的E-mail警示功能,提醒管理者立即針對發生故障的主機進行及時處理。
修改方式如下:首先先將Dashboard實作出來後,再將Search Command寫好,就可以呈現出以下的畫面。
接下來要處理的是加入css檔案,並放置於「$SPLUNK_HOME/etc/app/<你的app>/appserver/static」目錄下,同時利用Jquery技術掃描整個畫面,並從畫面上掃描到的每個字串抓取第一個字加以邏輯判斷。
以下的範例所設定的邏輯是,當畫面上出現L的字串,利用Jquery配合css,將其替換成所需的圖檔,在畫面上呈現出來的是一個打勾的符號。當出現M時,就將其替換成一個藍色的符號;而出現H時,畫面上就會被替換成一個紅色的警戒圖示。
結語
介紹過以上的方法之後,相信有很多人都會感興趣,本文介紹的方法只是Splunk其中的一個部分,歡迎大家一同研究與討論相關的技術與方法。
<本文作者為精誠資訊系統分析師,致力於Splunk應用,專長為系統整合>