"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[562],{98321:(De,G,n)=>{n.d(G,{Z:()=>D});var a=n(42844),j=n(11109),e=n(27702),$=n(46089),P=n(73195),T=n(23852),k=n(66310),X=n(1128),V=n(60105),H=n(22209),I=n(66670),de=n(16881);const q=de.C.injectEndpoints({endpoints:t=>({search:t.query({query:({query:s})=>{const c=new URLSearchParams({type:"dash-db",limit:"1000",page:"1",sort:"name_sort"});return s&&c.set("query",s),{url:`/api/search?${c.toString()}`}}}),dashboard:t.query({query:({uid:s})=>({url:`/api/dashboards/uid/${s}`})})})});var g=n(33555),ue=n(16310);const me=({field:t})=>{const s=(0,k.wW)(pe);return e.createElement("div",null,e.createElement("span",{className:s.annotationTitle},"Custom annotation name and content"),e.createElement(X.I,{placeholder:"Enter custom annotation name...",width:18,...t,className:s.customAnnotationInput}))},pe=t=>({annotationTitle:(0,a.css)`
    color: ${t.colors.text.primary};
    margin-bottom: 3px;
  `,customAnnotationInput:(0,a.css)`
    margin-top: 5px;
    width: 100%;
  `}),ge=me,ve=({annotationField:t,annotations:s,annotation:c,index:d})=>{const E=(0,k.wW)(fe),{control:o}=(0,$.Gc)();return e.createElement("div",null,e.createElement("label",{className:E.annotationContainer},e.createElement(ue.g,{name:`annotations.${d}.key`,defaultValue:t.key,render:({field:{ref:i,...N}})=>{switch(t.key){case g.q6.dashboardUID:return e.createElement("div",null,"Dashboard and panel");case g.q6.panelID:return e.createElement("span",null);default:return e.createElement("div",null,g.vY[c]&&e.createElement("span",{className:E.annotationTitle,"data-testid":`annotation-key-${d}`},g.vY[c]," (optional)"),!g.vY[c]&&e.createElement(ge,{field:N}))}},control:o,rules:{required:{value:!!s[d]?.value,message:"Required."}}})),e.createElement("div",{className:E.annotationDescription},g._y[c]))},fe=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};
  `}),ye=ve;var L=n(73453),he=n(39036);const _=({dashboard:t,panel:s,dashboardUid:c,panelId:d,onEditClick:E,onDeleteClick:o})=>{const i=(0,k.wW)(be),N=(0,he.RQ)(t?.uid||c),h=(0,he.yM)(t?.uid||c,s?.id.toString()||d);return e.createElement("div",{className:i.container},t&&e.createElement("a",{href:N,className:i.link,target:"_blank",rel:"noreferrer","data-testid":"dashboard-annotation"},t.title," ",e.createElement(L.J,{name:"external-link-alt"})),!t&&e.createElement("span",{className:i.noLink},"Dashboard ",c," "),s&&e.createElement("a",{href:h,className:i.link,target:"_blank",rel:"noreferrer","data-testid":"panel-annotation"},s.title||"<No title>"," ",e.createElement(L.J,{name:"external-link-alt"})),!s&&e.createElement("span",{className:i.noLink}," - Panel ",d),(t||s)&&e.createElement(e.Fragment,null,e.createElement(L.J,{name:"pen",onClick:E,className:i.icon}),e.createElement(L.J,{name:"trash-alt",onClick:o,className:i.icon})))},be=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;
  `}),ee=_;var te=n(29956),J=n(55925),ae=n(25472),Ee=n(80011),ne=n(13741),K=n(63439),le=n(33716),l=n(52419);function r(t,s){return t.title&&s.title?t.title.localeCompare(s.title):t.title&&!s.title?1:!t.title&&s.title?-1:0}const f=({dashboardUid:t,panelId:s,isOpen:c,onChange:d,onDismiss:E})=>{const o=(0,k.wW)(S),[i,N]=(0,e.useState)(t),[h,W]=(0,e.useState)(s),[O,x]=(0,e.useState)(""),[m,C]=(0,e.useState)(""),[Z,se]=(0,e.useState)(""),{useSearchQuery:xe,useDashboardQuery:oe}=q,{currentData:M=[],isFetching:U}=xe({query:m}),{currentData:B,isFetching:Q}=oe({uid:i??""},{skip:!i}),Se=(0,e.useCallback)(p=>{N(p),W(void 0)},[]),re=B?.dashboard?.panels?.filter(p=>typeof p.id=="number"&&typeof p.type=="string")?.filter(p=>p.title?.toLowerCase().includes(Z.toLowerCase())).sort(r)??[],u=B?.dashboard?.panels?.find(p=>p.id.toString()===h),v=(0,e.useMemo)(()=>M.map(p=>p.uid).indexOf(i??""),[M,i]),R=t&&t===i,F=v>=0,z=(0,e.useCallback)(p=>{const A=v>=0;R&&A&&p?.scrollToItem(v,"smart")},[R,v]);(0,te.Z)(()=>{C(O)},500,[O]);const ce=({index:p,style:A})=>{const w=M[p],ie=i===w.uid;return e.createElement("button",{type:"button",title:w.title,style:A,className:(0,a.cx)(o.rowButton,{[o.rowOdd]:p%2===1,[o.rowSelected]:ie}),onClick:()=>Se(w.uid)},e.createElement("div",{className:(0,a.cx)(o.dashboardTitle,o.rowButtonTitle)},w.title),e.createElement("div",{className:o.dashboardFolder},e.createElement(L.J,{name:"folder"})," ",w.folderTitle??"General"))},Y=({index:p,style:A})=>{const w=re[p],ie=w.title||"<No title>",Ce=h===w.id.toString(),$e=w.type==="graph"||w.type==="timeseries";return e.createElement("button",{type:"button",style:A,className:(0,a.cx)(o.rowButton,o.panelButton,{[o.rowOdd]:p%2===1,[o.rowSelected]:Ce}),onClick:()=>W(w.id.toString())},e.createElement("div",{className:o.rowButtonTitle,title:ie},ie),!$e&&e.createElement(Ee.u,{content:"Alert tab will be disabled for this panel. It is only supported on graph and timeseries panels"},e.createElement(L.J,{name:"exclamation-triangle",className:o.warnIcon,"data-testid":"warning-icon"})))};return e.createElement(ne.u,{title:"Select dashboard and panel",closeOnEscape:!0,isOpen:c,onDismiss:E,className:o.modal,contentClassName:o.modalContent},!F&&t&&e.createElement(K.b,{title:"Current selection",severity:"info",topSpacing:0,bottomSpacing:1,className:o.modalAlert},e.createElement("div",null,"Dashboard: ",B?.dashboard.title," (",B?.dashboard.uid,") in folder"," ",B?.meta.folderTitle??"General"),!!u&&e.createElement("div",null,"Panel: ",u.title," (",u.id,")")),e.createElement("div",{className:o.container},e.createElement(le.H,{value:O,onChange:x,title:"Search dashboard",placeholder:"Search dashboard",autoFocus:!0}),e.createElement(le.H,{value:Z,onChange:se,title:"Search panel",placeholder:"Search panel"}),e.createElement("div",{className:o.column},U&&e.createElement(l.u,{text:"Loading dashboards...",className:o.loadingPlaceholder}),!U&&e.createElement(J.Z,null,({height:p,width:A})=>e.createElement(ae.t7,{ref:z,itemSize:50,height:p,width:A,itemCount:M.length},ce))),e.createElement("div",{className:o.column},!i&&!Q&&e.createElement("div",{className:o.selectDashboardPlaceholder},e.createElement("div",null,"Select a dashboard to get a list of available panels")),Q&&e.createElement(l.u,{text:"Loading dashboard...",className:o.loadingPlaceholder}),i&&!Q&&e.createElement(J.Z,null,({width:p,height:A})=>e.createElement(ae.t7,{itemSize:32,height:A,width:p,itemCount:re.length},Y)))),e.createElement(ne.u.ButtonRow,null,e.createElement(I.zx,{type:"button",variant:"secondary",onClick:E,fill:"text"},"Cancel"),e.createElement(I.zx,{type:"button",variant:"primary",disabled:!(i&&h),onClick:()=>{i&&h&&d(i,h)}},"Confirm")))},S=t=>{const s=(0,I.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)`
      ${s};
      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};
    `}},y=()=>{const t=(0,k.wW)(b),[s,c]=(0,P.Z)(!1),{control:d,register:E,watch:o,formState:{errors:i},setValue:N}=(0,$.Gc)(),h=o("annotations"),{fields:W,append:O,remove:x}=(0,$.Dq)({control:d,name:"annotations"}),m=h.find(u=>u.key===g.q6.dashboardUID)?.value,C=h.find(u=>u.key===g.q6.panelID)?.value,[Z,se]=(0,e.useState)(void 0),[xe,oe]=(0,e.useState)(void 0),{useDashboardQuery:M}=q,{currentData:U,isFetching:B}=M({uid:m??""},{skip:!m});(0,e.useEffect)(()=>{if(B)return;se(U?.dashboard);const u=U?.dashboard?.panels?.find(v=>v.id.toString()===C);oe(u)},[C,U,B]);const Q=(u,v)=>{const R=(0,j.Uy)(h,F=>{const z=F.find(Y=>Y.key===g.q6.dashboardUID),ce=F.find(Y=>Y.key===g.q6.panelID);z?z.value=u:F.push({key:g.q6.dashboardUID,value:u}),ce?ce.value=v:F.push({key:g.q6.panelID,value:v})});N("annotations",R),c(!1)},Se=()=>{const u=h.filter(v=>v.key!==g.q6.dashboardUID&&v.key!==g.q6.panelID);N("annotations",u),se(void 0),oe(void 0)},re=()=>{c(!0)};return e.createElement(e.Fragment,null,e.createElement("div",{className:t.flexColumn},W.map((u,v)=>{const R=h[v]?.key?.toLocaleLowerCase().endsWith("url"),F=R?X.I:V.K,z=u.key;return e.createElement("div",{key:u.id,className:t.flexRow},e.createElement("div",null,e.createElement(ye,{annotationField:u,annotations:h,annotation:z,index:v}),m&&C&&u.key===g.q6.dashboardUID&&e.createElement(ee,{dashboard:Z,panel:xe,dashboardUid:m.toString(),panelId:C.toString(),onEditClick:re,onDeleteClick:Se}),e.createElement("div",{className:t.annotationValueContainer},e.createElement(H.g,{hidden:u.key===g.q6.dashboardUID||u.key===g.q6.panelID,className:(0,a.cx)(t.flexRowItemMargin,t.field),invalid:!!i.annotations?.[v]?.value?.message,error:i.annotations?.[v]?.value?.message},e.createElement(F,{"data-testid":`annotation-value-${v}`,className:(0,a.cx)(t.annotationValueInput,{[t.textarea]:!R}),...E(`annotations.${v}.value`),placeholder:R?"https://":u.key&&`Enter a ${u.key}...`||"Enter custom annotation content...",defaultValue:u.value})),!g.vY[z]&&e.createElement(I.zx,{type:"button",className:t.deleteAnnotationButton,"aria-label":"delete annotation",icon:"trash-alt",variant:"secondary",onClick:()=>x(v)}))))}),e.createElement(T.K,{direction:"row",gap:1},e.createElement("div",{className:t.addAnnotationsButtonContainer},e.createElement(I.zx,{icon:"plus",type:"button",variant:"secondary",onClick:()=>{O({key:"",value:""})}},"Add custom annotation"),!Z&&e.createElement(I.zx,{type:"button",variant:"secondary",icon:"dashboard",onClick:()=>c(!0)},"Link dashboard and panel"))),s&&e.createElement(f,{isOpen:!0,dashboardUid:m,panelId:C,onChange:Q,onDismiss:()=>c(!1)})))},b=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;
  `}),D=y},50115:(De,G,n)=>{n.d(G,{Z:()=>le});var a=n(42844),j=n(89949),e=n(27702),$=n(46089),P=n(23852),T=n(66670),k=n(66310),X=n(52419),V=n(22209),H=n(53901),I=n(1128),de=n(79978),q=n(80011),g=n(73453),ue=n(18771),me=n(10027),pe=n(47702),ge=n(65890),ve=n(28580);const fe=(0,ge.c)({ignoreCase:!1});function ye(l,r){return fe({label:l.label??"",value:l.value??"",data:{}},r)}const L=(l,r,f)=>{const S=f.some(b=>b.label===l),y=l.trim().length;return!S&&!!y},_=e.forwardRef(function({onChange:r,options:f,defaultValue:S,type:y,onOpenMenu:b=()=>{}},D){return e.createElement("div",{ref:D},e.createElement(V.g,{disabled:!1,"data-testid":`alertlabel-${y}-picker`},e.createElement(ve.Ph,{placeholder:`Choose ${y}`,width:29,className:"ds-picker select-container",backspaceRemovesValue:!1,onChange:r,onOpenMenu:b,filterOption:ye,isValidNewOption:L,options:f,maxMenuHeight:500,noOptionsMessage:"No labels found",defaultValue:S,allowCustomValue:!0})))}),be=l=>{const r=(0,ue.useDispatch)();(0,e.useEffect)(()=>{r((0,pe.IA)(l))},[r,l]);const S=(0,me._)(t=>t.rulerRules)[l],y=S?.result||{},b=(0,j.compact)((0,j.flattenDeep)(Object.keys(y).map(t=>y[t].map(s=>s.rules.map(c=>c.labels))))),D={};return b.forEach(t=>{Object.entries(t).forEach(([s,c])=>{D[s]=[...new Set([...D[s]||[],c])]})}),{loading:S?.loading,labelsByKey:D}};function ee(l=[]){return l.map(r=>({label:r,value:r}))}const te=({remove:l,className:r,index:f})=>e.createElement(T.zx,{className:r,"aria-label":"delete label",icon:"trash-alt","data-testid":`delete-label-${f}`,variant:"secondary",onClick:()=>{l(f)}}),J=({append:l,className:r})=>e.createElement(T.zx,{className:r,icon:"plus-circle",type:"button",variant:"secondary",onClick:()=>{l({key:"",value:""})}},"Add label"),ae=({dataSourceName:l})=>{const r=(0,k.wW)(K),{register:f,control:S,watch:y,formState:{errors:b},setValue:D}=(0,$.Gc)(),t=y("labels"),{fields:s,remove:c,append:d}=(0,$.Dq)({control:S,name:"labels"}),{loading:E,labelsByKey:o}=be(l),[i,N]=(0,e.useState)(""),h=(0,e.useMemo)(()=>ee(Object.keys(o)),[o]),W=(0,e.useCallback)(x=>ee(o[x]),[o]),O=(0,e.useMemo)(()=>W(i),[i,W]);return e.createElement(e.Fragment,null,E&&e.createElement(X.u,{text:"Loading"}),!E&&e.createElement(e.Fragment,null,s.map((x,m)=>e.createElement("div",{key:x.id},e.createElement("div",{className:(0,a.cx)(r.flexRow,r.centerAlignRow)},e.createElement(V.g,{className:r.labelInput,invalid:!!b.labels?.[m]?.key?.message,error:b.labels?.[m]?.key?.message,"data-testid":`label-key-${m}`},e.createElement(_,{...f(`labels.${m}.key`,{required:{value:!!t[m]?.value,message:"Required."}}),defaultValue:x.key?{label:x.key,value:x.key}:void 0,options:h,onChange:C=>{D(`labels.${m}.key`,C.value),N(C.value)},type:"key"})),e.createElement(H.W,{className:r.equalSign},"="),e.createElement(V.g,{className:r.labelInput,invalid:!!b.labels?.[m]?.value?.message,error:b.labels?.[m]?.value?.message,"data-testid":`label-value-${m}`},e.createElement(_,{...f(`labels.${m}.value`,{required:{value:!!t[m]?.key,message:"Required."}}),defaultValue:x.value?{label:x.value,value:x.value}:void 0,options:O,onChange:C=>{D(`labels.${m}.value`,C.value)},onOpenMenu:()=>{N(t[m].key)},type:"value"})),e.createElement(te,{className:r.deleteLabelButton,index:m,remove:c})))),e.createElement(J,{className:r.addLabelButton,append:d})))},Ee=()=>{const l=(0,k.wW)(K),{register:r,control:f,watch:S,formState:{errors:y}}=(0,$.Gc)(),b=S("labels"),{fields:D,remove:t,append:s}=(0,$.Dq)({control:f,name:"labels"});return e.createElement(e.Fragment,null,D.map((c,d)=>e.createElement("div",{key:c.id},e.createElement("div",{className:(0,a.cx)(l.flexRow,l.centerAlignRow),"data-testid":"alertlabel-input-wrapper"},e.createElement(V.g,{className:l.labelInput,invalid:!!y.labels?.[d]?.key?.message,error:y.labels?.[d]?.key?.message},e.createElement(I.I,{...r(`labels.${d}.key`,{required:{value:!!b[d]?.value,message:"Required."}}),placeholder:"key","data-testid":`label-key-${d}`,defaultValue:c.key})),e.createElement(H.W,{className:l.equalSign},"="),e.createElement(V.g,{className:l.labelInput,invalid:!!y.labels?.[d]?.value?.message,error:y.labels?.[d]?.value?.message},e.createElement(I.I,{...r(`labels.${d}.value`,{required:{value:!!b[d]?.key,message:"Required."}}),placeholder:"value","data-testid":`label-value-${d}`,defaultValue:c.value})),e.createElement(te,{className:l.deleteLabelButton,index:d,remove:t})))),e.createElement(J,{className:l.addLabelButton,append:s}))},ne=({className:l,dataSourceName:r})=>{const f=(0,k.wW)(K);return e.createElement("div",{className:(0,a.cx)(l,f.wrapper)},e.createElement(de._,null,e.createElement(P.K,{gap:.5},e.createElement("span",null,"Custom Labels"),e.createElement(q.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(g.J,{className:f.icon,name:"info-circle",size:"sm"})))),e.createElement(e.Fragment,null,e.createElement("div",{className:f.flexRow},e.createElement(H.W,{width:18},"Labels"),e.createElement("div",{className:f.flexColumn},r&&e.createElement(ae,{dataSourceName:r}),!r&&e.createElement(Ee,null)))))},K=l=>({icon:(0,a.css)`
      margin-right: ${l.spacing(.5)};
    `,wrapper:(0,a.css)`
      margin-bottom: ${l.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: ${l.spacing(.5)};
      }
    `,deleteLabelButton:(0,a.css)`
      margin-left: ${l.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: ${l.spacing(.5)};
    `,labelInput:(0,a.css)`
      width: 175px;
      margin-bottom: ${l.spacing(1)};
      & + & {
        margin-left: ${l.spacing(1)};
      }
    `}),le=ne},42481:(De,G,n)=>{n.d(G,{G:()=>a});function a(j,e){const $=j.replace(/\(copy( [0-9]+)?\)$/,"").trim();let P=`${$} (copy)`;for(let T=2;e.includes(P);T++)P=`${$} (copy ${T})`;return P}}}]);

//# sourceMappingURL=562.46490604d10eab275436.js.map