1#@!#!123s

: / usr / share / grafana / public / build /
Filename : 7965.b820011a140233474276.js
back
"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[7965],{60871:(Ne,K,n)=>{n.d(K,{Z:()=>w});var a=n(42844),U=n(11109),e=n(27702),N=n(46089),V=n(73195),B=n(23852),I=n(66310),_=n(1128),W=n(60105),J=n(22209),A=n(66670),me=n(16881);const ee=me.C.injectEndpoints({endpoints:t=>({search:t.query({query:({query:l})=>{const u=new URLSearchParams({type:"dash-db",limit:"1000",page:"1",sort:"name_sort"});return l&&u.set("query",l),{url:`/api/search?${u.toString()}`}}}),dashboard:t.query({query:({uid:l})=>({url:`/api/dashboards/uid/${l}`})})})});var m=n(33555),pe=n(16310);const ge=({field:t})=>{const l=(0,I.wW)(ve);return e.createElement("div",null,e.createElement("span",{className:l.annotationTitle},"Custom annotation name and content"),e.createElement(_.I,{placeholder:"Enter custom annotation name...",width:18,...t,className:l.customAnnotationInput}))},ve=t=>({annotationTitle:(0,a.css)`
    color: ${t.colors.text.primary};
    margin-bottom: 3px;
  `,customAnnotationInput:(0,a.css)`
    margin-top: 5px;
    width: 100%;
  `}),fe=ge,he=({annotationField:t,annotations:l,annotation:u,index:b})=>{const S=(0,I.wW)(ye),{control:r}=(0,N.Gc)();return e.createElement("div",null,e.createElement("label",{className:S.annotationContainer},e.createElement(pe.g,{name:`annotations.${b}.key`,defaultValue:t.key,render:({field:{ref:d,...$}})=>{switch(t.key){case m.q6.dashboardUID:return e.createElement("div",null,"Dashboard and panel");case m.q6.panelID:return e.createElement("span",null);default:return e.createElement("div",null,m.vY[u]&&e.createElement("span",{className:S.annotationTitle,"data-testid":`annotation-key-${b}`},m.vY[u]," (optional)"),!m.vY[u]&&e.createElement(fe,{field:$}))}},control:r,rules:{required:{value:!!l[b]?.value,message:"Required."}}})),e.createElement("div",{className:S.annotationDescription},m._y[u]))},ye=t=>({annotationTitle:(0,a.css)`
    color: ${t.colors.text.primary};
    margin-bottom: 3px;
  `,annotationContainer:(0,a.css)`
    margin-top: 5px;
  `,annotationDescription:(0,a.css)`
    color: ${t.colors.text.secondary};
  `}),be=he;var R=n(73453),Ee=n(39036);const te=({dashboard:t,panel:l,dashboardUid:u,panelId:b,onEditClick:S,onDeleteClick:r})=>{const d=(0,I.wW)(xe),$=(0,Ee.RQ)(t?.uid||u),h=(0,Ee.yM)(t?.uid||u,l?.id.toString()||b);return e.createElement("div",{className:d.container},t&&e.createElement("a",{href:$,className:d.link,target:"_blank",rel:"noreferrer","data-testid":"dashboard-annotation"},t.title," ",e.createElement(R.J,{name:"external-link-alt"})),!t&&e.createElement("span",{className:d.noLink},"Dashboard ",u," "),l&&e.createElement("a",{href:h,className:d.link,target:"_blank",rel:"noreferrer","data-testid":"panel-annotation"},l.title||"<No title>"," ",e.createElement(R.J,{name:"external-link-alt"})),!l&&e.createElement("span",{className:d.noLink}," - Panel ",b),(t||l)&&e.createElement(e.Fragment,null,e.createElement(R.J,{name:"pen",onClick:S,className:d.icon}),e.createElement(R.J,{name:"trash-alt",onClick:r,className:d.icon})))},xe=t=>({container:(0,a.css)`
    margin-top: 5px;
  `,noLink:(0,a.css)`
    color: ${t.colors.text.secondary};
  `,link:(0,a.css)`
    color: ${t.colors.text.link};
    margin-right: ${t.spacing(1.5)};
  `,icon:(0,a.css)`
    margin-right: ${t.spacing(1)};
    cursor: pointer;
  `}),ae=te;var ne=n(29956),Z=n(55925),le=n(25472),Se=n(80011),oe=n(13741),Q=n(63439),se=n(33716),o=n(52419);function s(t,l){return t.title&&l.title?t.title.localeCompare(l.title):t.title&&!l.title?1:!t.title&&l.title?-1:0}const g=({dashboardUid:t,panelId:l,isOpen:u,onChange:b,onDismiss:S})=>{const r=(0,I.wW)(D),[d,$]=(0,e.useState)(t),[h,E]=(0,e.useState)(l),[p,F]=(0,e.useState)(""),[O,z]=(0,e.useState)(""),[Y,re]=(0,e.useState)(""),{useSearchQuery:De,useDashboardQuery:ce}=ee,{currentData:H=[],isFetching:G}=De({query:O}),{currentData:P,isFetching:X}=ce({uid:d??""},{skip:!d}),Ce=(0,e.useCallback)(i=>{$(i),E(void 0)},[]),ie=P?.dashboard?.panels?.filter(i=>typeof i.id=="number"&&typeof i.type=="string")?.filter(i=>i.title?.toLowerCase().includes(Y.toLowerCase())).sort(s)??[],q=P?.dashboard?.panels?.find(i=>i.id.toString()===h),c=(0,e.useMemo)(()=>H.map(i=>i.uid).indexOf(d??""),[H,d]),v=t&&t===d,j=c>=0,T=(0,e.useCallback)(i=>{const L=c>=0;v&&L&&i?.scrollToItem(c,"smart")},[v,c]);(0,ne.Z)(()=>{z(p)},500,[p]);const M=({index:i,style:L})=>{const k=H[i],ue=d===k.uid;return e.createElement("button",{type:"button",title:k.title,style:L,className:(0,a.cx)(r.rowButton,{[r.rowOdd]:i%2===1,[r.rowSelected]:ue}),onClick:()=>Ce(k.uid)},e.createElement("div",{className:(0,a.cx)(r.dashboardTitle,r.rowButtonTitle)},k.title),e.createElement("div",{className:r.dashboardFolder},e.createElement(R.J,{name:"folder"})," ",k.folderTitle??"General"))},de=({index:i,style:L})=>{const k=ie[i],ue=k.title||"<No title>",$e=h===k.id.toString(),ke=k.type==="graph"||k.type==="timeseries";return e.createElement("button",{type:"button",style:L,className:(0,a.cx)(r.rowButton,r.panelButton,{[r.rowOdd]:i%2===1,[r.rowSelected]:$e}),onClick:()=>E(k.id.toString())},e.createElement("div",{className:r.rowButtonTitle,title:ue},ue),!ke&&e.createElement(Se.u,{content:"Alert tab will be disabled for this panel. It is only supported on graph and timeseries panels"},e.createElement(R.J,{name:"exclamation-triangle",className:r.warnIcon,"data-testid":"warning-icon"})))};return e.createElement(oe.u,{title:"Select dashboard and panel",closeOnEscape:!0,isOpen:u,onDismiss:S,className:r.modal,contentClassName:r.modalContent},!j&&t&&e.createElement(Q.b,{title:"Current selection",severity:"info",topSpacing:0,bottomSpacing:1,className:r.modalAlert},e.createElement("div",null,"Dashboard: ",P?.dashboard.title," (",P?.dashboard.uid,") in folder"," ",P?.meta.folderTitle??"General"),!!q&&e.createElement("div",null,"Panel: ",q.title," (",q.id,")")),e.createElement("div",{className:r.container},e.createElement(se.H,{value:p,onChange:F,title:"Search dashboard",placeholder:"Search dashboard",autoFocus:!0}),e.createElement(se.H,{value:Y,onChange:re,title:"Search panel",placeholder:"Search panel"}),e.createElement("div",{className:r.column},G&&e.createElement(o.u,{text:"Loading dashboards...",className:r.loadingPlaceholder}),!G&&e.createElement(Z.Z,null,({height:i,width:L})=>e.createElement(le.t7,{ref:T,itemSize:50,height:i,width:L,itemCount:H.length},M))),e.createElement("div",{className:r.column},!d&&!X&&e.createElement("div",{className:r.selectDashboardPlaceholder},e.createElement("div",null,"Select a dashboard to get a list of available panels")),X&&e.createElement(o.u,{text:"Loading dashboard...",className:r.loadingPlaceholder}),d&&!X&&e.createElement(Z.Z,null,({width:i,height:L})=>e.createElement(le.t7,{itemSize:32,height:L,width:i,itemCount:ie.length},de)))),e.createElement(oe.u.ButtonRow,null,e.createElement(A.zx,{type:"button",variant:"secondary",onClick:S,fill:"text"},"Cancel"),e.createElement(A.zx,{type:"button",variant:"primary",disabled:!(d&&h),onClick:()=>{d&&h&&b(d,h)}},"Confirm")))},D=t=>{const l=(0,A.gN)(t);return{container:(0,a.css)`
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: min-content auto;
      gap: ${t.spacing(2)};
      flex: 1;
    `,column:(0,a.css)`
      flex: 1 1 auto;
    `,dashboardTitle:(0,a.css)`
      height: 22px;
      font-weight: ${t.typography.fontWeightBold};
    `,dashboardFolder:(0,a.css)`
      height: 20px;
      font-size: ${t.typography.bodySmall.fontSize};
      color: ${t.colors.text.secondary};
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      column-gap: ${t.spacing(1)};
      align-items: center;
    `,rowButton:(0,a.css)`
      ${l};
      padding: ${t.spacing(.5)};
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      border: 2px solid transparent;

      &:disabled {
        cursor: not-allowed;
        color: ${t.colors.text.disabled};
      }
    `,rowButtonTitle:(0,a.css)`
      text-overflow: ellipsis;
      overflow: hidden;
    `,rowSelected:(0,a.css)`
      border-color: ${t.colors.primary.border};
    `,rowOdd:(0,a.css)`
      background-color: ${t.colors.background.secondary};
    `,panelButton:(0,a.css)`
      display: flex;
      gap: ${t.spacing(1)};
      justify-content: space-between;
      align-items: center;
    `,loadingPlaceholder:(0,a.css)`
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    `,selectDashboardPlaceholder:(0,a.css)`
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      font-weight: ${t.typography.fontWeightBold};
    `,modal:(0,a.css)`
      height: 100%;
    `,modalContent:(0,a.css)`
      flex: 1;
      display: flex;
      flex-direction: column;
    `,modalAlert:(0,a.css)`
      flex-grow: 0;
    `,warnIcon:(0,a.css)`
      fill: ${t.colors.warning.main};
    `}};var f=n(51317),y=n(82669);const C=()=>{const t=(0,I.wW)(x),[l,u]=(0,V.Z)(!1),{control:b,register:S,watch:r,formState:{errors:d},setValue:$}=(0,N.Gc)(),h=r("annotations"),{fields:E,append:p,remove:F}=(0,N.Dq)({control:b,name:"annotations"}),O=h.find(c=>c.key===m.q6.dashboardUID)?.value,z=h.find(c=>c.key===m.q6.panelID)?.value,[Y,re]=(0,e.useState)(void 0),[De,ce]=(0,e.useState)(void 0),{useDashboardQuery:H}=ee,{currentData:G,isFetching:P}=H({uid:O??""},{skip:!O});(0,e.useEffect)(()=>{if(P)return;re(G?.dashboard);const c=G?.dashboard?.panels?.find(v=>v.id.toString()===z);ce(c)},[z,G,P]);const X=(c,v)=>{const j=(0,U.Uy)(h,T=>{const M=T.find(i=>i.key===m.q6.dashboardUID),de=T.find(i=>i.key===m.q6.panelID);M?M.value=c:T.push({key:m.q6.dashboardUID,value:c}),de?de.value=v:T.push({key:m.q6.panelID,value:v})});$("annotations",j),u(!1)},Ce=()=>{const c=h.filter(v=>v.key!==m.q6.dashboardUID&&v.key!==m.q6.panelID);$("annotations",c),re(void 0),ce(void 0)},ie=()=>{u(!0)};function q(){const c="https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/variables-label-annotation";return e.createElement(B.K,{gap:.5},"Add annotations to provide more context in your alert notifications.",e.createElement(f.h,{contentText:`Annotations add metadata to provide more information on the alert in your alert notifications. 
          For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.
          Annotations can contain a combination of text and template code.`,externalLink:c,linkText:"Read about annotations",title:"Annotations"}))}return e.createElement(y.z,{stepNo:4,title:"Add annotations",description:q()},e.createElement("div",{className:t.flexColumn},E.map((c,v)=>{const j=h[v]?.key?.toLocaleLowerCase().endsWith("url"),T=j?_.I:W.K,M=c.key;return e.createElement("div",{key:c.id,className:t.flexRow},e.createElement("div",null,e.createElement(be,{annotationField:c,annotations:h,annotation:M,index:v}),O&&z&&c.key===m.q6.dashboardUID&&e.createElement(ae,{dashboard:Y,panel:De,dashboardUid:O.toString(),panelId:z.toString(),onEditClick:ie,onDeleteClick:Ce}),e.createElement("div",{className:t.annotationValueContainer},e.createElement(J.g,{hidden:c.key===m.q6.dashboardUID||c.key===m.q6.panelID,className:(0,a.cx)(t.flexRowItemMargin,t.field),invalid:!!d.annotations?.[v]?.value?.message,error:d.annotations?.[v]?.value?.message},e.createElement(T,{"data-testid":`annotation-value-${v}`,className:(0,a.cx)(t.annotationValueInput,{[t.textarea]:!j}),...S(`annotations.${v}.value`),placeholder:j?"https://":c.key&&`Enter a ${c.key}...`||"Enter custom annotation content...",defaultValue:c.value})),!m.vY[M]&&e.createElement(A.zx,{type:"button",className:t.deleteAnnotationButton,"aria-label":"delete annotation",icon:"trash-alt",variant:"secondary",onClick:()=>F(v)}))))}),e.createElement(B.K,{direction:"row",gap:1},e.createElement("div",{className:t.addAnnotationsButtonContainer},e.createElement(A.zx,{icon:"plus",type:"button",variant:"secondary",onClick:()=>{p({key:"",value:""})}},"Add custom annotation"),!Y&&e.createElement(A.zx,{type:"button",variant:"secondary",icon:"dashboard",onClick:()=>u(!0)},"Link dashboard and panel"))),l&&e.createElement(g,{isOpen:!0,dashboardUid:O,panelId:z,onChange:X,onDismiss:()=>u(!1)})))},x=t=>({annotationValueInput:(0,a.css)`
    width: 394px;
  `,textarea:(0,a.css)`
    height: 76px;
  `,addAnnotationsButtonContainer:(0,a.css)`
    margin-top: ${t.spacing(1)};
    gap: ${t.spacing(1)};
    display: flex;
  `,flexColumn:(0,a.css)`
    display: flex;
    flex-direction: column;
    margin-top: ${t.spacing(2)};
  `,field:(0,a.css)`
    margin-bottom: ${t.spacing(.5)};
  `,flexRow:(0,a.css)`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  `,flexRowItemMargin:(0,a.css)`
    margin-top: ${t.spacing(1)};
  `,deleteAnnotationButton:(0,a.css)`
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
  `,annotationTitle:(0,a.css)`
    color: ${t.colors.text.primary};
    margin-bottom: 3px;
  `,annotationContainer:(0,a.css)`
    margin-top: 5px;
  `,annotationDescription:(0,a.css)`
    color: ${t.colors.text.secondary};
  `,annotationValueContainer:(0,a.css)`
    display: flex;
  `}),w=C},50115:(Ne,K,n)=>{n.d(K,{Z:()=>se});var a=n(42844),U=n(89949),e=n(27702),N=n(46089),V=n(23852),B=n(66670),I=n(66310),_=n(52419),W=n(22209),J=n(53901),A=n(1128),me=n(79978),ee=n(80011),m=n(73453),pe=n(18771),ge=n(10027),ve=n(47702),fe=n(65890),he=n(28580);const ye=(0,fe.c)({ignoreCase:!1});function be(o,s){return ye({label:o.label??"",value:o.value??"",data:{}},s)}const R=(o,s,g)=>{const D=g.some(y=>y.label===o),f=o.trim().length;return!D&&!!f},te=e.forwardRef(function({onChange:s,options:g,defaultValue:D,type:f,onOpenMenu:y=()=>{}},C){return e.createElement("div",{ref:C},e.createElement(W.g,{disabled:!1,"data-testid":`alertlabel-${f}-picker`},e.createElement(he.Ph,{placeholder:`Choose ${f}`,width:29,className:"ds-picker select-container",backspaceRemovesValue:!1,onChange:s,onOpenMenu:y,filterOption:be,isValidNewOption:R,options:g,maxMenuHeight:500,noOptionsMessage:"No labels found",defaultValue:D,allowCustomValue:!0})))}),xe=o=>{const s=(0,pe.useDispatch)();(0,e.useEffect)(()=>{s((0,ve.IA)(o))},[s,o]);const D=(0,ge._)(x=>x.rulerRules)[o],f=D?.result||{},y=(0,U.compact)((0,U.flattenDeep)(Object.keys(f).map(x=>f[x].map(w=>w.rules.map(t=>t.labels))))),C={};return y.forEach(x=>{Object.entries(x).forEach(([w,t])=>{C[w]=[...new Set([...C[w]||[],t])]})}),{loading:D?.loading,labelsByKey:C}};function ae(o=[]){return o.map(s=>({label:s,value:s}))}const ne=({remove:o,className:s,index:g})=>e.createElement(B.zx,{className:s,"aria-label":"delete label",icon:"trash-alt","data-testid":`delete-label-${g}`,variant:"secondary",onClick:()=>{o(g)}}),Z=({append:o,className:s})=>e.createElement(B.zx,{className:s,icon:"plus-circle",type:"button",variant:"secondary",onClick:()=>{o({key:"",value:""})}},"Add label"),le=({dataSourceName:o})=>{const s=(0,I.wW)(Q),{register:g,control:D,watch:f,formState:{errors:y},setValue:C}=(0,N.Gc)(),x=f("labels"),{fields:w,remove:t,append:l}=(0,N.Dq)({control:D,name:"labels"}),{loading:u,labelsByKey:b}=xe(o),[S,r]=(0,e.useState)(""),d=(0,e.useMemo)(()=>ae(Object.keys(b)),[b]),$=(0,e.useCallback)(E=>ae(b[E]),[b]),h=(0,e.useMemo)(()=>$(S),[S,$]);return e.createElement(e.Fragment,null,u&&e.createElement(_.u,{text:"Loading"}),!u&&e.createElement(e.Fragment,null,w.map((E,p)=>e.createElement("div",{key:E.id},e.createElement("div",{className:(0,a.cx)(s.flexRow,s.centerAlignRow)},e.createElement(W.g,{className:s.labelInput,invalid:!!y.labels?.[p]?.key?.message,error:y.labels?.[p]?.key?.message,"data-testid":`label-key-${p}`},e.createElement(te,{...g(`labels.${p}.key`,{required:{value:!!x[p]?.value,message:"Required."}}),defaultValue:E.key?{label:E.key,value:E.key}:void 0,options:d,onChange:F=>{C(`labels.${p}.key`,F.value),r(F.value)},type:"key"})),e.createElement(J.W,{className:s.equalSign},"="),e.createElement(W.g,{className:s.labelInput,invalid:!!y.labels?.[p]?.value?.message,error:y.labels?.[p]?.value?.message,"data-testid":`label-value-${p}`},e.createElement(te,{...g(`labels.${p}.value`,{required:{value:!!x[p]?.key,message:"Required."}}),defaultValue:E.value?{label:E.value,value:E.value}:void 0,options:h,onChange:F=>{C(`labels.${p}.value`,F.value)},onOpenMenu:()=>{r(x[p].key)},type:"value"})),e.createElement(ne,{className:s.deleteLabelButton,index:p,remove:t})))),e.createElement(Z,{className:s.addLabelButton,append:l})))},Se=()=>{const o=(0,I.wW)(Q),{register:s,control:g,watch:D,formState:{errors:f}}=(0,N.Gc)(),y=D("labels"),{fields:C,remove:x,append:w}=(0,N.Dq)({control:g,name:"labels"});return e.createElement(e.Fragment,null,C.map((t,l)=>e.createElement("div",{key:t.id},e.createElement("div",{className:(0,a.cx)(o.flexRow,o.centerAlignRow),"data-testid":"alertlabel-input-wrapper"},e.createElement(W.g,{className:o.labelInput,invalid:!!f.labels?.[l]?.key?.message,error:f.labels?.[l]?.key?.message},e.createElement(A.I,{...s(`labels.${l}.key`,{required:{value:!!y[l]?.value,message:"Required."}}),placeholder:"key","data-testid":`label-key-${l}`,defaultValue:t.key})),e.createElement(J.W,{className:o.equalSign},"="),e.createElement(W.g,{className:o.labelInput,invalid:!!f.labels?.[l]?.value?.message,error:f.labels?.[l]?.value?.message},e.createElement(A.I,{...s(`labels.${l}.value`,{required:{value:!!y[l]?.key,message:"Required."}}),placeholder:"value","data-testid":`label-value-${l}`,defaultValue:t.value})),e.createElement(ne,{className:o.deleteLabelButton,index:l,remove:x})))),e.createElement(Z,{className:o.addLabelButton,append:w}))},oe=({className:o,dataSourceName:s})=>{const g=(0,I.wW)(Q);return e.createElement("div",{className:(0,a.cx)(o,g.wrapper)},e.createElement(me._,null,e.createElement(V.K,{gap:.5},e.createElement("span",null,"Custom Labels"),e.createElement(ee.u,{content:e.createElement("div",null,"The dropdown only displays labels that you have previously used for alerts. Select a label from the dropdown or type in a new one.")},e.createElement(m.J,{className:g.icon,name:"info-circle",size:"sm"})))),e.createElement(e.Fragment,null,e.createElement("div",{className:g.flexRow},e.createElement(J.W,{width:18},"Labels"),e.createElement("div",{className:g.flexColumn},s&&e.createElement(le,{dataSourceName:s}),!s&&e.createElement(Se,null)))))},Q=o=>({icon:(0,a.css)`
      margin-right: ${o.spacing(.5)};
    `,wrapper:(0,a.css)`
      margin-bottom: ${o.spacing(4)};
    `,flexColumn:(0,a.css)`
      display: flex;
      flex-direction: column;
    `,flexRow:(0,a.css)`
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      & + button {
        margin-left: ${o.spacing(.5)};
      }
    `,deleteLabelButton:(0,a.css)`
      margin-left: ${o.spacing(.5)};
      align-self: flex-start;
    `,addLabelButton:(0,a.css)`
      flex-grow: 0;
      align-self: flex-start;
    `,centerAlignRow:(0,a.css)`
      align-items: baseline;
    `,equalSign:(0,a.css)`
      align-self: flex-start;
      width: 28px;
      justify-content: center;
      margin-left: ${o.spacing(.5)};
    `,labelInput:(0,a.css)`
      width: 175px;
      margin-bottom: ${o.spacing(1)};
      & + & {
        margin-left: ${o.spacing(1)};
      }
    `}),se=oe},42481:(Ne,K,n)=>{n.d(K,{G:()=>a});function a(U,e){const N=U.replace(/\(copy( [0-9]+)?\)$/,"").trim();let V=`${N} (copy)`;for(let B=2;e.includes(V);B++)V=`${N} (copy ${B})`;return V}}}]);

//# sourceMappingURL=7965.b820011a140233474276.js.map