Export Snapshot from Grafana Dashboard UI 在 Grafana 界面上导出 從 Grafana 介面上匯出

Supported on Chrome, Edge and Firefox browsers, requires Grafana v6.0+

适用于 Chrome / Edge / Firefox 浏览器，要求 Grafana v6.0 或以上

適用於 Chrome / Edge / Firefox 瀏覽器，要求 Grafana v6.0 或以上

1. Copy the script below 复制以下脚本 複製以下指令碼 Copied! 已复制！ 已複製！

   /* Copyright 2020 PingCAP, Inc. Licensed under MIT. */ "use strict" var t={t:"Script failed to run. Please ensure it is running on the Grafana v6.x.x dashboard page.", i:"Going to export snapshot of the current dashboard: ",s:"Note: Only metrics from visible panels can be exported", o:"Number of panels",l:"Loading panels",h:"Expand all rows",p:"Export",u:"Export immediately",cancel:"Cancel"} try{ var e=angular.element,i=document.styleSheets[0],n=[".__dexport_hint{z-index:2222;position:fixed;background:#fff;color:#000;padding:1em;font-size:18px;border-left:3px solid #faad14;right:0;top:5em;opacity:.8;min-width:30em}",".__dexport_hint:hover{opacity:1}",".__dexport_hint button{margin:0 1em}",".__dexport_hint button[disabled]{opacity:.5}",".__dexport_hint progress{margin-right:1em;vertical-align:middle;width:18em}"] new(function(){function s(){var s=this,a=e(document).injector() this.m=a.get("timeSrv") var o=this.m.dashboard n.forEach(t=>i.insertRule(t,0)),this.v=e("<span>"),this.g=e('<progress value="0">'), this._=e('<button style="font-weight:bold">').text(t.p).one("click",()=>s.k()), this.P=e("<button>").text(t.h).on("click",()=>o.expandRows()) var r=/^(Mac|iP)/.test(navigator.platform)?"flex-direction:row-reverse":"justify-content:center" this.S=e('<div class="__dexport_hint">').append(e("<p>").text(t.i).append(e("<strong>").text(o.title)),e("<p>").text(t.s).append(this.P),e('<p style="font-size:.8em">').append(this.g,this.v),e('<p style="display:flex;'+r+'">').append(this._,e("<button>").text(t.cancel).on("click",()=>s.j()))), this.I=0,e(document.body).append(this.S),this.L=setInterval(()=>s.N(),500)}return s.prototype.N=function(){ var i=this,n=e(".panel-container"),s=n.length if(0===this.I)this.v.text(t.o+": "+s),this._.prop("disabled",0===s) else{var a=s-n.find(".panel-loading:visible").length,o=(100*a/s||0).toFixed(1) this.v.text(t.l+": "+o+"% ("+a+"/"+s+")"),this.g.prop({value:a,max:s}),s>a?2!==this.I&&(this.I=2, this._.prop("disabled",!1).text(t.u).one("click",()=>i.O())):this.O()}},s.prototype.k=function(){var t=this.m.dashboard this.I=1,this._.prop("disabled",!0),this.T=t.refresh,this.m.setAutoRefresh(),e(".panel-loading").removeClass("ng-hide"), t.snapshot={timestamp:new Date},t.startRefresh()},s.prototype.O=function(){ var t=this.m.dashboard,i=t.snapshot.timestamp.toISOString(),n=t.getSaveModelClone(),s=n.title n.time=this.m.timeRange(),n.id=null,n.uid=null,n.title=s+" (exported at "+i+")" var a={meta:{isSnapshot:!0,type:"snapshot",expires:"9999-12-31T23:59:59Z",created:i},dashboard:n,overwrite:!0} this.j() var o=new Blob([JSON.stringify(a)],{type:"application/json"}),r=URL.createObjectURL(o),l=e("<a>") l.prop({href:r,download:s+"_"+i+".json"}),e(document.body).append(l),l[0].click(),setTimeout(()=>{ URL.revokeObjectURL(r),l.remove()},0)},s.prototype.j=function(){var t=this.m.dashboard delete t.snapshot,t.forEachPanel(t=>delete t.snapshotData),t.annotations.list.forEach(t=>delete t.snapshotData), this.T&&this.m.setAutoRefresh(this.T),clearInterval(this.L),this.S.remove(),n.forEach(()=>i.deleteRule(0))},s}()) }catch(e){console.error(e),alert(t.t)} /* Copyright 2020 PingCAP, Inc. Licensed under MIT. */ "use strict" var t={t:"执行失败。请确保是在 Grafana v6.x.x 的监控网页上执行脚本。",i:"将导出当前的监控页面：",s:"注意：只有已展开面板内的监控会被导出",o:"面板数量",h:"加载面板中",l:"展开所有面板", p:"导出",u:"立刻导出",cancel:"取消"} try{ var i=angular.element,e=document.styleSheets[0],s=[".__dexport_hint{z-index:2222;position:fixed;background:#fff;color:#000;padding:1em;font-size:18px;border-left:3px solid #faad14;right:0;top:5em;opacity:.8;min-width:30em}",".__dexport_hint:hover{opacity:1}",".__dexport_hint button{margin:0 1em}",".__dexport_hint button[disabled]{opacity:.5}",".__dexport_hint progress{margin-right:1em;vertical-align:middle;width:18em}"] new(function(){function n(){var n=this,a=i(document).injector() this.v=a.get("timeSrv") var o=this.v.dashboard s.forEach(t=>e.insertRule(t,0)),this.m=i("<span>"),this._=i('<progress value="0">'), this.g=i('<button style="font-weight:bold">').text(t.p).one("click",()=>n.k()), this.P=i("<button>").text(t.l).on("click",()=>o.expandRows()) var r=/^(Mac|iP)/.test(navigator.platform)?"flex-direction:row-reverse":"justify-content:center" this.S=i('<div class="__dexport_hint">').append(i("<p>").text(t.i).append(i("<strong>").text(o.title)),i("<p>").text(t.s).append(this.P),i('<p style="font-size:.8em">').append(this._,this.m),i('<p style="display:flex;'+r+'">').append(this.g,i("<button>").text(t.cancel).on("click",()=>n.j()))), this.I=0,i(document.body).append(this.S),this.T=setInterval(()=>n.L(),500)}return n.prototype.L=function(){ var e=this,s=i(".panel-container"),n=s.length if(0===this.I)this.m.text(t.o+": "+n),this.g.prop("disabled",0===n) else{var a=n-s.find(".panel-loading:visible").length,o=(100*a/n||0).toFixed(1) this.m.text(t.h+": "+o+"% ("+a+"/"+n+")"),this._.prop({value:a,max:n}),n>a?2!==this.I&&(this.I=2, this.g.prop("disabled",!1).text(t.u).one("click",()=>e.O())):this.O()}},n.prototype.k=function(){var t=this.v.dashboard this.I=1,this.g.prop("disabled",!0),this.R=t.refresh,this.v.setAutoRefresh(),i(".panel-loading").removeClass("ng-hide"), t.snapshot={timestamp:new Date},t.startRefresh()},n.prototype.O=function(){ var t=this.v.dashboard,e=t.snapshot.timestamp.toISOString(),s=t.getSaveModelClone(),n=s.title s.time=this.v.timeRange(),s.id=null,s.uid=null,s.title=n+" (exported at "+e+")" var a={meta:{isSnapshot:!0,type:"snapshot",expires:"9999-12-31T23:59:59Z",created:e},dashboard:s,overwrite:!0} this.j() var o=new Blob([JSON.stringify(a)],{type:"application/json"}),r=URL.createObjectURL(o),h=i("<a>") h.prop({href:r,download:n+"_"+e+".json"}),i(document.body).append(h),h[0].click(),setTimeout(()=>{ URL.revokeObjectURL(r),h.remove()},0)},n.prototype.j=function(){var t=this.v.dashboard delete t.snapshot,t.forEachPanel(t=>delete t.snapshotData),t.annotations.list.forEach(t=>delete t.snapshotData), this.R&&this.v.setAutoRefresh(this.R),clearInterval(this.T),this.S.remove(),s.forEach(()=>e.deleteRule(0))},n}()) }catch(i){console.error(i),alert(t.t)} /* Copyright 2020 PingCAP, Inc. Licensed under MIT. */ "use strict" var t={t:"執行失敗。請確保是在 Grafana v6.x.x 的儀表板上執行劇本。",i:"即將匯出當前儀表板：",s:"注意：只能匯出已展開的面板內的資料",o:"面板數量",h:"載入面板中",l:"展開所有面板", p:"匯出",u:"立即匯出",cancel:"取消"} try{ var i=angular.element,e=document.styleSheets[0],s=[".__dexport_hint{z-index:2222;position:fixed;background:#fff;color:#000;padding:1em;font-size:18px;border-left:3px solid #faad14;right:0;top:5em;opacity:.8;min-width:30em}",".__dexport_hint:hover{opacity:1}",".__dexport_hint button{margin:0 1em}",".__dexport_hint button[disabled]{opacity:.5}",".__dexport_hint progress{margin-right:1em;vertical-align:middle;width:18em}"] new(function(){function n(){var n=this,a=i(document).injector() this.v=a.get("timeSrv") var o=this.v.dashboard s.forEach(t=>e.insertRule(t,0)),this.m=i("<span>"),this._=i('<progress value="0">'), this.g=i('<button style="font-weight:bold">').text(t.p).one("click",()=>n.k()), this.P=i("<button>").text(t.l).on("click",()=>o.expandRows()) var r=/^(Mac|iP)/.test(navigator.platform)?"flex-direction:row-reverse":"justify-content:center" this.S=i('<div class="__dexport_hint">').append(i("<p>").text(t.i).append(i("<strong>").text(o.title)),i("<p>").text(t.s).append(this.P),i('<p style="font-size:.8em">').append(this._,this.m),i('<p style="display:flex;'+r+'">').append(this.g,i("<button>").text(t.cancel).on("click",()=>n.j()))), this.I=0,i(document.body).append(this.S),this.T=setInterval(()=>n.L(),500)}return n.prototype.L=function(){ var e=this,s=i(".panel-container"),n=s.length if(0===this.I)this.m.text(t.o+": "+n),this.g.prop("disabled",0===n) else{var a=n-s.find(".panel-loading:visible").length,o=(100*a/n||0).toFixed(1) this.m.text(t.h+": "+o+"% ("+a+"/"+n+")"),this._.prop({value:a,max:n}),n>a?2!==this.I&&(this.I=2, this.g.prop("disabled",!1).text(t.u).one("click",()=>e.O())):this.O()}},n.prototype.k=function(){var t=this.v.dashboard this.I=1,this.g.prop("disabled",!0),this.R=t.refresh,this.v.setAutoRefresh(),i(".panel-loading").removeClass("ng-hide"), t.snapshot={timestamp:new Date},t.startRefresh()},n.prototype.O=function(){ var t=this.v.dashboard,e=t.snapshot.timestamp.toISOString(),s=t.getSaveModelClone(),n=s.title s.time=this.v.timeRange(),s.id=null,s.uid=null,s.title=n+" (exported at "+e+")" var a={meta:{isSnapshot:!0,type:"snapshot",expires:"9999-12-31T23:59:59Z",created:e},dashboard:s,overwrite:!0} this.j() var o=new Blob([JSON.stringify(a)],{type:"application/json"}),r=URL.createObjectURL(o),h=i("<a>") h.prop({href:r,download:n+"_"+e+".json"}),i(document.body).append(h),h[0].click(),setTimeout(()=>{ URL.revokeObjectURL(r),h.remove()},0)},n.prototype.j=function(){var t=this.v.dashboard delete t.snapshot,t.forEachPanel(t=>delete t.snapshotData),t.annotations.list.forEach(t=>delete t.snapshotData), this.R&&this.v.setAutoRefresh(this.R),clearInterval(this.T),this.S.remove(),s.forEach(()=>e.deleteRule(0))},n}()) }catch(i){console.error(i),alert(t.t)}

2. After opening a Grafana Dashboard, press F12 the launch the Developer Tool, and then paste the script in the “Console” tab.

   在 Grafana 监控面板中按下 F12 启动开发者工具，在 “Console” 面板下粘贴脚本。

   在 Grafana 儀表板中按下 F12 啟動開發者工具，在「Console」頁下貼上指令碼。

   

3. Press Enter to execute the script. A dialog should now appear on the web page. Follow its instruction to continue.

   按下 回车 (Enter) 执行脚本。此时 Grafana 网页中会出现操作提示框，请遵循其指示进行后续操作。

   按下 輸入 (Enter) 運行指令碼。此時 Grafana 網面中會出現操作提示框，請遵循其指示繼續操作。

   

↑ Return 返回 返回   //   ↓ Extract Local Snapshot 手动取出本地快照 手動取出本地快照

Extract Local Snapshot 手动取出本地快照 手動取出本地快照

Suitable when the browser or Grafana version is too old

浏览器或 Grafana 版本太低时适用

瀏覽器或 Grafana 版本太低時適用

1. After opening a Grafana Dashboard, expand rows which need to exported, or press d then Shift+E to expand all rows (only visible panels are exported).

   在 Grafana 监控中展开需要汇出的面板，或按 d 然后 Shift+E 展开所有面板（只有显示的面板才会被保存）。

   在 Grafana 儀表板中展開需要匯出的面板，或按 d 然後 Shift+E 展開所有面板（只有顯示的面板才會被儲存）。

2. Click the “Share dashboard” button in the toolbar, then “Snapshot”, and finally “Local snapshot”.

   点击工具列中的 “Share dashboard” 按钮，然后选 “Snapshot”，最后点 “Local snapshot” 按钮。

   點一下工具欄中的「Share dashboard」按鈕，然後選「Snapshot」，最後點一下「Local snapshot」按鈕。

   

3. Paste the snapshot link here: 完成后把刚出现的快取连接贴到这里： 完成後把剛出現的快取連結貼到這裡：
4. Right click and save this link: 右键保存这个连接： 右鍵儲存這個連結： 💡 Paste the snapshot link to above first 请先把快取连接贴到上面 請先把快取連結貼到上面

↑ Return 返回 返回

Import Grafana Snapshot File with cURL or Wget 使用 cURL 或 Wget 导入 Grafana 快照文件 使用 cURL 或 Wget 匯入 Grafana 快照檔案

Suitable when there is an existing Grafana instance, cURL or Wget is accessible, but third-party software cannot be used.

适用于已有现成的 Grafana 实例，可执行 cURL 或 Wget，但不方便下载第三方软件。

適用於已有現成的 Grafana 實例，可運行 cURL 或 Wget，但不方便下載第三方軟體。

1. Prepare the Dashboard Snapshort JSON file, and note down the Grafana URL, login name and password.

   准备好要导入的监控快照 JSON 文件，以及 Grafana 的地址和登入用户密码。

   準備好要匯入的儀表板快照 JSON 檔案，以及 Grafana 的位址和登入用戶密碼。

2. curl wget

   Execute import command:

   执行导入：

   運行匯入指令：

   curl -H 'Content-Type: application/json' 'http://admin:admin@localhost:3000/api/dashboards/import' --data-binary @/root/snap1.json

   wget -qO- --header 'Content-Type: application/json' 'http://admin:admin@localhost:3000/api/dashboards/import' --post-file /root/snap1.json

   in which: 其中参数是： 其中參數是：

   http://admin:admin@localhost:3000

   Login name, password, host and port of Grafana server Grafana 服务器的登入用户名、密码、地址和端口 Grafana 伺服器的登入用戶名稱、密碼、位址和通訊埠

   /root/snap1.json

   Path of the imported JSON file 要导入的 JSON 文件路径 要匯入的 JSON 檔案路徑

3. Output like this is shown after finishing. Open the marked URL to view the imported snapshot.

   完成后会打印类似这样的反馈，打开标示出的 URL 即可检视快照。

   完成後會輸出類似這樣的結果，開啟標示出的 URL 即可檢視快照。

   {"pluginId":"",
    "title":"New Dashboard (exported at 2020-01-01T12:00:00.000Z)","imported":true,
    "importedUri":"db/new-dashboard-exported-at-2020-01-01t12-00-00-000z",
    "importedUrl":"/d/Q6RuHYIWk/new-dashboard-exported-at-2020-01-01t12-00-00-000z",
    "slug":"new-dashboard-exported-at-2020-01-01t12-00-00-000z",
    …}

↑ Return 返回 返回

Import Grafana Snapshot File with “grafsnap” 使用 grafsnap 命令行工具导入 Grafana 快照文件 使用 grafsnap 命令列程式匯入 Grafana 快照檔案

Suitable when there is an existing Grafana instance, and third-party software can be downloaded and run.

适用于已有现成的 Grafana 实例，并且能下载及执行外部命令行工具。

適用於已有現成的 Grafana 實例，並且能下載及運行第三方命令列程式。

Grafana is bundled with tiup playground, so you can quickly start a fresh instance with it if needed. 如果没有现成的 Grafana 实例，可以使用 tiup playground 快速起一个。 如果沒有現成的 Grafana 實例，可以使用 tiup playground 快速啟動一個。

1. Download 下载 下載 grafsnap 0.1.0 and extract it into the current folder. 压缩包并解压到当前目录。 壓縮檔並解壓縮到當前目錄。

   wget https://github.com/kennytm/grafana-export/releases/download/v0.1.0/grafsnap-0.1.0-linux-x86_64.tar.gz
   tar xfv grafsnap-0.1.0-linux-x86_64.tar.gz

2. Prepare the Dashboard Snapshort JSON file.

   准备好要导入的监控快照 JSON 文件。

   準備好要匯入的儀表板快照 JSON 檔案。

3. Execute import command:

   执行导入：

   運行匯入指令：

   ./grafsnap import -b 'http://localhost:3000/' -k 'admin:admin' ~/snap1.json ~/snap2.json

   in which: 其中参数是： 其中參數是：

   -b 'http://localhost:3000/'

   Host and port of Grafana server Grafana 服务器的地址和端口 Grafana 伺服器的位址和通訊埠

   -k 'admin:admin'

   Login name and password; you can also use an API Key 登入用户名和密码；亦可以使用 API Key 登入用戶名稱和密碼；亦可以使用 API Key

   ~/snap1.json ~/snap2.json

   Paths of the (multiple) imported JSON files 要导入的 JSON 文件路径，可一次导入多个 要匯入的 JSON 檔案路徑，可一次匯入多個

4. Output like this is shown after finishing. Open each URL to view the corresponding snapshot.

   完成后会打印类似这样的反馈，打开列出的 URL 即可检视对应的快照。

   完成後會輸出類似這樣的結果，開啟列出的 URL 即可檢視對應的快照。

   [
       {
           "file": "snap1.json",
           "url": "http://localhost:3000/dashboard/snapshot/94prEd89WqqawEJkujYit5aHHkqbkKWs"
       },
       {
           "file": "snap2.json",
           "url": "http://localhost:3000/dashboard/snapshot/b4wJAg4OQ9t6yTddpawF6cImiG2MVpt2"
       }
   ]

↑ Return 返回 返回