"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[413],{895:(se,F,n)=>{n.r(F),n.d(F,{default:()=>Ae});var u=n(60234),z=n(89949),e=n(65237),D=n(28704),T=n(55041),N=n(25134),b=n(6741),h=n(48389),d=n(16693),E=n(88347),A=n(51215),C=n(93048),R=n(66434),O=n(38992),B=n(63969),Q=n(2570),K=n(3315),y=n(73079),p=n(94156),f=n(89822);const Z=(0,e.createContext)(void 0);function le(t){const[r,a]=(0,e.useState)(0),{pages:s,onSubmit:o,children:l}=t;return e.createElement(Z.Provider,{value:{currentPage:r,CurrentPageComponent:s[r],isLastPage:r===s.length-1,nextPage:()=>a(r+1),prevPage:()=>a(r-1),onSubmit:o}},l)}const J=()=>{const t=(0,e.useContext)(Z);if(!t)throw new Error("useWizardContext must be used within a WizardContextProvider");return t};function ie(t){const{navigation:r}=t,{handleSubmit:a}=(0,f.Gc)(),{CurrentPageComponent:s,isLastPage:o,nextPage:l,onSubmit:i}=J(),c=r;return e.createElement("form",{onSubmit:a(v=>{o?i(v):l()})},e.createElement(s,null),e.createElement(c,null))}function Y(t){const{defaultValues:r,pages:a,onSubmit:s,navigation:o}=t,l=(0,f.cI)({defaultValues:r});return e.createElement(f.RV,{...l},e.createElement(le,{pages:a,onSubmit:s},e.createElement(ie,{navigation:o})))}var V=n(95757),w=n(37885),S=n(5263),H=n(96682),ce=n(15446);const X=(0,e.createContext)({loading:!1,correlation:void 0,readOnly:!1}),k=t=>{const{data:r,children:a}=t;return e.createElement(X.Provider,{value:r},a)},L=()=>(0,e.useContext)(X),G=(t,r)=>r?`${t}_${r.sourceUID}-${r.uid}`:t,de=t=>({label:u.css`
    max-width: ${t.spacing(80)};
  `,description:u.css`
    max-width: ${t.spacing(80)};
  `}),q=()=>{const{register:t,formState:r}=(0,f.Gc)(),a=(0,C.wW)(de),{correlation:s,readOnly:o}=L();return e.createElement(e.Fragment,null,e.createElement(w.C,{label:"Define correlation name (1/3)"},e.createElement("p",null,"The name of the correlation is used as the label of the link."),e.createElement("input",{type:"hidden",...t("config.type")}),e.createElement(S.g,{label:"Label",description:"This name is be used as the label of the link button",className:a.label,invalid:!!r.errors.label,error:r.errors.label?.message},e.createElement(H.I,{id:G("label",s),...t("label",{required:{value:!0,message:"This field is required."}}),readOnly:o,placeholder:"e.g. Tempo traces"})),e.createElement(S.g,{label:"Description",description:"Optional description with more information about the link",className:(0,u.cx)(a.description)},e.createElement(ce.K,{id:G("description",s),...t("description"),readOnly:o}))))};var _=n(58526),ue=n(12469);const me=t=>({label:u.css`
    max-width: ${t.spacing(80)};
  `}),ee=()=>{const{control:t,formState:r,register:a}=(0,f.Gc)(),s=(0,C.wW)(me),o=c=>v=>c(v.uid),{correlation:l,readOnly:i}=L();return e.createElement(e.Fragment,null,e.createElement(w.C,{label:"Configure source data source (3/3)"},e.createElement("p",null,"Links are displayed with results of the selected origin source data. They shown along with the value of the provided ",e.createElement("em",null,"results field"),"."),e.createElement(f.Qr,{control:t,name:"sourceUID",rules:{required:{value:!0,message:"This field is required."},validate:{writable:c=>!(0,ue.ak)().getInstanceSettings(c)?.readOnly||"Source can't be a read-only data source."}},render:({field:{onChange:c,value:v}})=>e.createElement(S.g,{label:"Source",description:"Results from selected source data source have links displayed in the panel",htmlFor:"source",invalid:!!r.errors.sourceUID,error:r.errors.sourceUID?.message},e.createElement(_.q,{onChange:o(c),noDefault:!0,current:v,inputId:"source",width:32,disabled:l!==void 0}))}),e.createElement(S.g,{label:"Results field",description:"The link will be shown next to the value of this field",className:s.label,invalid:!!r.errors?.config?.field,error:r.errors?.config?.field?.message},e.createElement(H.I,{id:G("field",l),...a("config.field",{required:"This field is required."}),readOnly:i}))))};var ge=n(15804),te=n(71534),fe=n(73463),ve=n(51031),Ee=n(6335),he=n(90486),Ce=n(86447),ye=n(51967);function pe(t){return{valid:u.css`
      color: ${t.colors.success.text};
    `}}const xe=({dsUid:t,invalid:r,error:a,name:s})=>{const[o,l]=(0,e.useState)(void 0),i=(0,C.wW)(pe),{value:c,loading:v,error:W}=(0,ge.Z)(async()=>{if(t)return(0,ve.F)().get(t)},[t]),P=c?.components?.QueryEditor,U=g=>{const x="1s",M=(0,Ce.HI)(),$=[{...g,refId:"A"}],Ue={queries:$,request:{app:te.zj.Correlations,timezone:"utc",startTime:Date.now(),interval:x,intervalMs:1e3,targets:$,range:(0,fe.JK)(),requestId:"correlations_"+M,scopedVars:{__interval:{text:x,value:x},__interval_ms:{text:1e3,value:1e3}}},id:M,done:!1};c&&(0,ye.v7)(c,Ue.request).subscribe(I=>{!I||I.state==="Error"||I.state==="Done"&&I.series.length===0?l(!1):I.state==="Done"&&I.series.length>0&&Boolean(I.series.find(Me=>Me.length>0))?l(!0):l(void 0)})};return e.createElement(S.g,{label:"Query",description:e.createElement("span",null,"Define the query that is run when the link is clicked. You can use"," ",e.createElement("a",{href:"https://grafana.com/docs/grafana/latest/panels-visualizations/configure-data-links/",target:"_blank",rel:"noreferrer"},"variables")," ","to access specific field values."),invalid:r,error:a},e.createElement(f.Qr,{name:s,rules:{validate:{hasQueryEditor:()=>P!==void 0||"The selected target data source must export a query editor."}},render:({field:{value:g,onChange:x}})=>v?e.createElement(d.u,{text:"Loading query editor..."}):W?e.createElement(E.b,{title:"Error loading data source"},"The selected data source could not be loaded."):c?P?e.createElement(e.Fragment,null,e.createElement(P,{app:te.zj.Correlations,onRunQuery:()=>U(g),onChange:m=>{l(void 0),x(m)},datasource:c,query:g}),e.createElement(b.Lh,{justify:"flex-end"},o?e.createElement("div",{className:i.valid},e.createElement(Ee.J,{name:"check"})," This query is valid."):o===!1?e.createElement(he.S,null,"This query is not valid."):null,e.createElement(h.zx,{variant:"secondary",icon:"check",type:"button",onClick:()=>U(g)},"Validate query"))):e.createElement(E.b,{title:"Data source does not export a query editor."}):e.createElement(E.b,{title:"No data source selected",severity:"info"},"Please select a target data source first.")}))},re=()=>{const{control:t,formState:r}=(0,f.Gc)(),a=l=>i=>l(i.uid),{correlation:s}=L(),o=(0,f.qo)({name:"targetUID"})||s?.targetUID;return e.createElement(e.Fragment,null,e.createElement(w.C,{label:"Setup target query (2/3)"},e.createElement("p",null,"Clicking on a link runs a provided target query."),e.createElement(f.Qr,{control:t,name:"targetUID",rules:{required:{value:!0,message:"This field is required."}},render:({field:{onChange:l,value:i}})=>e.createElement(S.g,{label:"Target",description:"Specify which data source is queried when the link is clicked",htmlFor:"target",invalid:!!r.errors.targetUID,error:r.errors.targetUID?.message},e.createElement(_.q,{onChange:a(l),noDefault:!0,current:i,inputId:"target",width:32,disabled:s!==void 0}))}),e.createElement(xe,{name:"config.target",dsUid:o,invalid:!!r.errors?.config?.target,error:r.errors?.config?.target?.message})))},ne=()=>{const{currentPage:t,prevPage:r,isLastPage:a}=J(),{readOnly:s,loading:o,correlation:l}=L(),i=!s&&e.createElement(h.zx,{variant:"primary",icon:o?"fa fa-spinner":"save",type:"submit",disabled:o},l===void 0?"Add":"Save"),c=e.createElement(h.zx,{variant:"secondary",type:"submit"},"Next");return e.createElement(b.Lh,{justify:"flex-end"},t>0?e.createElement(h.zx,{variant:"secondary",onClick:r},"Back"):void 0,a?i:c)},Ie=t=>({panelContainer:u.css`
    position: relative;
    padding: ${t.spacing(1)};
    margin-bottom: ${t.spacing(2)};
  `,infoBox:u.css`
    margin-top: 20px; // give space for close button
  `}),De=({onClose:t,onCreated:r})=>{const a=(0,C.wW)(Ie),{create:{execute:s,loading:o,error:l,value:i}}=(0,V.K)();(0,e.useEffect)(()=>{!l&&!o&&i&&r()},[l,o,i,r]);const c={config:{type:"query",target:{},field:""}};return e.createElement(y.l,{className:a.panelContainer},e.createElement(p.P,{onClick:t}),e.createElement(k,{data:{loading:o,readOnly:!1,correlation:void 0}},e.createElement(Y,{defaultValues:c,pages:[q,re,ee],navigation:ne,onSubmit:s})))},Se=({onUpdated:t,correlation:r,readOnly:a=!1})=>{const{update:{execute:s,loading:o,error:l,value:i}}=(0,V.K)(),c=v=>s({...v,sourceUID:r.sourceUID,uid:r.uid});return(0,e.useEffect)(()=>{!l&&!o&&i&&t()},[l,o,i,t]),e.createElement(k,{data:{loading:o,readOnly:a,correlation:r}},e.createElement(Y,{defaultValues:r,pages:[q,re,ee],onSubmit:a?v=>()=>{}:c,navigation:ne}))};var Pe=n(76044);const Te=({onClick:t})=>e.createElement(Pe.Z,{title:"You haven't defined any correlation yet.",buttonIcon:"gf-glue",onClick:t,buttonTitle:"Add correlation",proTip:"you can also define correlations via datasource provisioning"}),ae=(t,r,a)=>t.values[a].name.localeCompare(r.values[a].name),j=({source:t})=>t.readOnly,be=u.css`
  display: flex;
  justify-content: center;
`;function Ae(){const t=(0,Q.q)("correlations"),[r,a]=(0,e.useState)(!1),{remove:s,get:{execute:o,...l}}=(0,V.K)();(0,e.useEffect)(()=>{o()},[]);const i=B.Vt.hasPermission(K.AccessControlAction.DataSourcesWrite),c=(0,e.useCallback)(()=>{(0,D.ff)("grafana_correlations_added"),o(),a(!1)},[o]),v=(0,e.useCallback)(()=>{(0,D.ff)("grafana_correlations_edited"),o()},[o]),W=(0,e.useCallback)(m=>{s.execute(m)},[s]);(0,e.useEffect)(()=>{s.value&&(0,D.ff)("grafana_correlations_deleted")},[s.value]),(0,e.useEffect)(()=>{!s.error&&!s.loading&&s.value&&o()},[s.error,s.loading,s.value,o]);const P=(0,e.useCallback)(({row:{original:{source:{uid:m,readOnly:M},uid:$}}})=>!M&&e.createElement(N.m,{"aria-label":"delete correlation",onConfirm:()=>W({sourceUID:m,uid:$}),closeOnConfirm:!0}),[W]),U=(0,e.useMemo)(()=>[{id:"info",cell:We,disableGrow:!0,visible:m=>m.some(j)},{id:"source",header:"Source",cell:oe,sortType:ae},{id:"target",header:"Target",cell:oe,sortType:ae},{id:"label",header:"Label",sortType:"alphanumeric"},{id:"actions",cell:P,disableGrow:!0,visible:m=>i&&m.some((0,z.negate)(j))}],[P,i]),g=(0,e.useMemo)(()=>l.value,[l.value]),x=g?.length===0&&!r&&!l.error;return e.createElement(O.T,{navModel:t},e.createElement(O.T.Contents,null,e.createElement("div",null,e.createElement(b.Lh,{justify:"space-between"},e.createElement("div",null,e.createElement("p",null,"Define how data living in different data sources relates to each other.")),i&&g?.length!==0&&g!==void 0&&!r&&e.createElement(h.zx,{icon:"plus",onClick:()=>a(!0)},"Add new"))),e.createElement("div",null,!g&&l.loading&&e.createElement("div",{className:be},e.createElement(d.u,{text:"loading..."})),x&&e.createElement(Te,{onClick:()=>a(!0)}),l.error&&e.createElement(E.b,{severity:"error",title:"Error fetching correlation data",topSpacing:2},(0,T.kW)(l.error)&&l.error.data?.message||"An unknown error occurred while fetching correlation data. Please try again."),r&&e.createElement(De,{onClose:()=>a(!1),onCreated:c}),g&&g.length>=1&&e.createElement(A.e,{renderExpandedRow:m=>e.createElement(Fe,{correlation:m,onUpdated:v,readOnly:j({source:m.source})||!i}),columns:U,data:g,getRowId:m=>`${m.source.uid}-${m.uid}`}))))}function Fe({correlation:{source:t,target:r,...a},readOnly:s,onUpdated:o}){return(0,e.useEffect)(()=>(0,D.ff)("grafana_correlations_details_expanded"),[]),e.createElement(Se,{correlation:{...a,sourceUID:t.uid,targetUID:r.uid},onUpdated:o,readOnly:s})}const Oe=t=>({root:u.css`
    display: flex;
    align-items: center;
  `,dsLogo:u.css`
    margin-right: ${t.spacing()};
    height: 16px;
    width: 16px;
  `}),oe=(0,e.memo)(function({cell:{value:r}}){const a=(0,C.wW)(Oe);return e.createElement("span",{className:a.root},e.createElement("img",{src:r.meta.info.logos.small,alt:"",className:a.dsLogo}),r.name)},({cell:{value:t}},{cell:{value:r}})=>t.type===r.type&&t.name===r.name),Le=u.css`
  white-space: nowrap;
`,We=(0,e.memo)(function({...r}){return r.row.original.source.readOnly?e.createElement(R.C,{text:"Read only",color:"purple",className:Le}):null},(t,r)=>t.row.original.source.readOnly===r.row.original.source.readOnly)},95757:(se,F,n)=>{n.d(F,{K:()=>h});var u=n(98866),z=n(78209),e=n(51031),D=n(15002);const T=({sourceUID:d,targetUID:E,...A})=>({...A,source:(0,e.F)().getInstanceSettings(d),target:(0,e.F)().getInstanceSettings(E)}),N=d=>d.map(T);function b(d){return d.data}const h=()=>{const{backend:d}=(0,D.p)(),[E,A]=(0,u.Z)(()=>(0,z.n)(d.fetch({url:"/api/datasources/correlations",method:"GET",showErrorAlert:!1})).then(b).then(N),[d]),[C,R]=(0,u.Z)(({sourceUID:y,...p})=>d.post(`/api/datasources/uid/${y}/correlations`,p).then(T),[d]),[O,B]=(0,u.Z)(({sourceUID:y,uid:p})=>d.delete(`/api/datasources/uid/${y}/correlations/${p}`),[d]),[Q,K]=(0,u.Z)(({sourceUID:y,uid:p,...f})=>d.patch(`/api/datasources/uid/${y}/correlations/${p}`,f).then(T),[d]);return{create:{execute:R,...C},update:{execute:K,...Q},get:{execute:A,...E},remove:{execute:B,...O}}}}}]);

//# sourceMappingURL=CorrelationsPage.aa9380c940540d997b06.js.map