# [SOP] 从 Grafana Dashboard 导入监控快照

## Key Words

grafana, dump, export, 导出监控, 导出

## 导出面板

支持 Chrome,Edge and Firefox 浏览器和 Grafana v6.0+ 版本

### 1. 复制下面的脚本

```html
/* 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)}
```

### 2. 打开一个 Grafana dashboard 后，按 F12 启动开发人员工具，然后将脚本粘贴到 “控制台” 选项卡中

![grafana-export-sop](/images/Monitor/grafana-export-sop.png)

### 3. 按 “Enter” 执行脚本，一个对话框现在应该出现在网页上，按照它的指示继续

![grafana-export-sop1](/images/Monitor/grafana-export-sop1.png)