如何將Grafana的數據集合到自己前端項目的數據駕駛艙中

　　Grafana是可以提供API Keys給你可以讓你直接使用從Grafana獲取來的數據來搭配其他圖形工具來實現數據監控圖的。雖然它本身也可以顯示數據，但是有時候數據很全面且分散在不同頁面，而有些運維同學只需要某些重要的數據，不能一下子直觀看清，所以某些重要常用的數據可以單獨摘選出來，不常用的可以在打Grafana查看。

 　　先在Grafana中打開設置->API Keys->填寫Key name，角色權限根據需求，圖中設置爲admin，過期時間根據需求，圖中設置不填默認無過期時間，然後就會彈出一個彈窗，先別急着關掉！！！

　　 彈窗裏會給你一段curl，這段話的意思就是向http地址發了一個頭部帶有Authorization（token）的請求。先把這段話保存下來，關閉彈窗之後沒地方查看。這裏面有兩個有用的信息，一是http地址，二是token。http地址你可以設置爲前端代理轉發的後端地址，而token是你發起向Grafana後端發起請求的時候所需要的頭部憑證，否則會授權失敗，獲取不到數據。

　　之後你就可以模擬Grafana前端的查詢數據，向Grafana後端發起請求。需要注意的是Grafana基本搭配的是Elasticsearch數據源，請求體中攜帶的語句是查詢語句，對Elasticsearch語句有點了解是最好的，不清楚也可以f12打開控制檯network，然後點一個數據發請求看它原本的請求體裏的Elasticsearch語句是怎麼寫的。這裏還需要注意以下幾點：

　　　　1.查詢語句中有包含“\”等符號需要考慮是否能夠會被轉義的問題，因爲字符串中的“\”本身就代表轉義，對於有意義的“\n”會解釋爲換行符，對於“\uXXXX”會解釋爲Unicode對應的字符，對於沒有意義的“\0101”則會省略“\”解釋爲0101。所以爲了解決這個問題，得用“\\”來替代“\”，這樣原本字符串就會消耗掉一層“\”，變成正常的查詢語句。

　　　　2.批量請求查詢語句如果非常長，建議先用一個數組分段保存起來，然後用換行符（\n）拼接起來，否則一長串直接敲擊回車鍵換行vscode會報錯。

let bulkRequestBodyArray=[
  "語句1",
  "語句2",
  "語句3",
  "語句4",
];
let params=bulkRequestBodyArray.join("\n");
params=params+'\n';  // 批量請求查詢語句必須以“\n”終止

//下面這種方法也行
let bulkRequestBodyArray=[
  "語句1\n",
  "語句2\n",
  "語句3\n",
  "語句4\n",
];
let params=bulkRequestBodyArray.join("");

Elasticsearch官網對批量請求語句寫法的要求

　　　　3.查詢語句中有攜帶grafana的時間戳的，可以拼接自己所需要的時間。

　　　　4.每個請求都需要攜帶token請求頭，建議將之前獲取的token配置爲默認的請求頭參數，此處以axios爲例：axios.defaults.headers.common['Authorization'] ='Bearer XXXXXXXXXXXXX';

　　獲取到數據，就可以搭配vcharts或Echarts來構建自己需要的監控圖了。