"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[1579],{91579:(be,G,c)=>{c.d(G,{D:()=>bt});var l=c(9892),t=c(66111),j=c(52666),Z=c(75849),M=c(206),T=c(68183),E=c(86647),y=c(37932),D=c(19426),m=c(31403),Y=c(52081),x=c(68226),A=c(35029),B=c(7804),J=c(59679),W=c(2631),H=c(54899),we=c(61744);function Ie({pluginId:e}){const{value:a,loading:n,error:s}=(0,J.Z)(async()=>(0,H.i)().get(`/api/plugins/${e}/markdown/query_help`),[]),r=(0,W.a)(a);return n?t.createElement(we.u,{text:"Loading help..."}):s?t.createElement("h3",null,"An error occurred when loading help."):a===""?t.createElement("h3",null,"No query help could be found."):t.createElement("div",{className:"markdown-html",dangerouslySetInnerHTML:{__html:r}})}var O=c(47694),Ne=c(29930),V=c(99822),Te=c(82897),C=c(41818),Oe=c(35645),I=c(72648),N=c(46967),X=c(39904),re=c(30784),oe=c(32817),Ae=c(81095),Re=c(23934);const Pe="grafana.features.datasources.components.picker.DataSourceDropDown.history";function ke(){const[e=[],a]=(0,Re.Z)(Pe,[]),n=(0,t.useCallback)(s=>{s.meta.builtIn||(e.includes(s.uid)?(e.splice(e.findIndex(r=>s.uid===r),1),a([...e,s.uid])):a([...e,s.uid].slice(1,6)))},[e,a]);return[e,n]}function ie(e){return(0,E.F)().getList(e)}function q(e){const a=(0,E.F)();return a.getInstanceSettings(e)}function Me(e){const{keyboardEvents:a,containerRef:n}=e,s=(0,t.useRef)(0),r="data-role",i="keyboardSelectableItem",o={[r]:i},u=`[${r}="${i}"`,g="data-selectedItem",d=`[${g}="true"]`,p=(0,t.useCallback)(v=>{const f=n?.current?.querySelectorAll(u),b=f?.item(v%f?.length);f?.forEach(h=>h.setAttribute(g,"false")),b&&(b.scrollIntoView({block:"center"}),b.setAttribute(g,"true"))},[n,u]),S=(0,t.useCallback)(()=>{n?.current?.querySelector(d)?.querySelector("button")?.click()},[n,d]);return(0,t.useEffect)(()=>{if(!a)return;const v=a.subscribe({next:f=>{switch(f?.code){case"ArrowDown":{p(++s.current),f.preventDefault();break}case"ArrowUp":s.current=s.current>0?s.current-1:s.current,p(s.current),f.preventDefault();break;case"Enter":S();break}}});return()=>v.unsubscribe()},[a,p,S]),(0,t.useEffect)(()=>{const v=new MutationObserver(f=>{f.some(h=>h.addedNodes&&h.addedNodes.length>0||h.removedNodes&&h.removedNodes.length>0)&&p(0)});return n.current&&v.observe(n.current,{childList:!0}),()=>{v.disconnect()}},[n,u,p]),[o,d]}var $e=c(77582),Le=c(86475),Qe=c(3597),Fe=c(27876);function ce({variant:e,onClick:a}){const n=$e.Vt.hasPermission(Fe.AccessControlAction.DataSourcesCreate),s=O.vc.featureToggles.dataConnectionsConsole?Le.Z.DataSourcesNew:Qe.n.New;return t.createElement(m.Qj,{variant:e||"primary",href:s,disabled:!n,tooltip:n?void 0:"You do not have permission to configure new data sources",onClick:a,target:"_blank"},"Configure a new data source")}var _=c(72948),Be=c(34807);function le({ds:e,onClick:a,selected:n,description:s,...r}){const i=(0,I.wW)(We);return t.createElement(_.Z,{key:e.uid,onClick:a,className:(0,l.cx)(i.card,n?i.selected:void 0),...r},t.createElement(_.Z.Heading,{className:i.heading},t.createElement("div",{className:i.headingContent},t.createElement("span",{className:i.name},e.name," ",e.isDefault?t.createElement(Be.P,{tags:["default"]}):null),t.createElement("small",{className:i.type},s||e.meta.name))),t.createElement(_.Z.Figure,{className:i.logo},t.createElement("img",{src:e.meta.info.logos.small,alt:`${e.meta.name} Logo`})))}function We(e){return{card:l.css`
      cursor: pointer;
      background-color: ${e.colors.background.primary};
      border-bottom: 1px solid ${e.colors.border.weak};
      // Move to list component
      margin-bottom: 0;
      border-radius: 0;
      padding: ${e.spacing(1)};
    `,heading:l.css`
      width: 100%;
      overflow: hidden;
      // This is needed to enable ellipsis when text overlfows
      > button {
        width: 100%;
      }
    `,headingContent:l.css`
      color: ${e.colors.text.secondary};
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      justify-content: space-between;
    `,logo:l.css`
      width: 32px;
      height: 32px;
      padding: ${e.spacing(0,1)};
      display: flex;
      align-items: center;

      > img {
        max-height: 100%;
        min-width: 24px;
      }
    `,name:l.css`
      color: ${e.colors.text.primary};
      display: flex;
      gap: ${e.spacing(2)};
    `,type:l.css`
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    `,separator:l.css`
      margin: 0 ${e.spacing(1)};
      color: ${e.colors.border.weak};
    `,selected:l.css`
      background-color: ${e.colors.background.secondary};
    `,meta:l.css`
      display: block;
      overflow-wrap: unset;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    `}}function U(e,a){return!e||!a?!1:typeof a=="string"?e.uid===a:e.uid===a.uid}function He(e){return e?typeof e=="string"?`${e} - not found`:"name"in e?e.name:e.uid?`${e.uid} - not found`:"Select a data source":"Select a data source"}function Ve(e,a,n){return(r,i)=>{if(e&&U(r,e))return-1;if(e&&U(i,e))return 1;const o=a.indexOf(r.uid),u=a.indexOf(i.uid);if(o>-1&&o>u)return-1;if(u>-1&&u>o)return 1;const g=n.includes(r.uid),d=n.includes(i.uid);return g&&!d?-1:d&&!g?1:d&&g?r.name<i.name?-1:1:r.meta.builtIn&&!i.meta.builtIn?1:i.meta.builtIn&&!r.meta.builtIn?-1:(r.meta.builtIn&&i.meta.builtIn,r.name<i.name?-1:1)}}function ue(e,a=""){return e.name.toLowerCase().includes(a.toLowerCase())}const Ue={grafana:"Discover visualizations using mock data","-- Mixed --":"Use multiple data sources","-- Dashboard --":"Reuse query results from other visualizations"};function de({className:e,current:a,onChange:n,dashboard:s,mixed:r}){const i=ie({mixed:r,dashboard:s,filter:o=>!!o.meta.builtIn});return t.createElement("div",{className:e,"data-testid":"built-in-data-sources-list"},i.map(o=>t.createElement(le,{key:o.uid,ds:o,description:Ue[o.uid],selected:U(o,a),onClick:()=>n(o)})))}var ze=c(20308);function me(e){const a=(0,t.useRef)(null),[n,s]=Me({keyboardEvents:e.keyboardEvents,containerRef:a}),r=(0,I.l4)(),i=Ze(r,s),{className:o,current:u,onChange:g,enableKeyboardNavigation:d,onClickEmptyStateCTA:p}=e,S=ie({alerting:e.alerting,annotations:e.annotations,dashboard:e.dashboard,logs:e.logs,metrics:e.metrics,mixed:e.mixed,pluginId:e.pluginId,tracing:e.tracing,type:e.type,variables:e.variables}),[v,f]=ke(),b=e.filter?S.filter(e.filter):S;return t.createElement("div",{ref:a,className:(0,l.cx)(o,i.container),"data-testid":"data-sources-list"},b.length===0&&t.createElement(Ke,{className:i.emptyState,onClickCTA:p}),b.sort(Ve(u,v,je())).map(h=>t.createElement(le,{"data-testid":"data-source-card",key:h.uid,ds:h,onClick:()=>{f(h),g(h)},selected:U(h,u),...d?n:{}})))}function Ke({className:e,onClickCTA:a}){const n=(0,I.wW)(Ge);return t.createElement("div",{className:(0,l.cx)(e,n.container)},t.createElement("p",{className:n.message},"No data sources found"),t.createElement(ce,{onClick:a}))}function Ge(e){return{container:l.css`
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    `,message:l.css`
      margin-bottom: ${e.spacing(3)};
    `}}function je(){return(0,ze.J)().getVariables().filter(a=>a.type==="datasource").map(a=>`\${${a.id}}`)}function Ze(e,a){return{container:l.css`
      display: flex;
      flex-direction: column;
      ${a} {
        background-color: ${e.colors.background.secondary};
      }
    `,emptyState:l.css`
      height: 100%;
      flex: 1;
    `}}const R="dashboards_dspickermodal_clicked",$={SELECT_DS:"select_ds",UPLOAD_FILE:"upload_file",CONFIG_NEW_DS:"config_new_ds",CONFIG_NEW_DS_EMPTY_STATE:"config_new_ds_empty_state",SEARCH:"search",DISMISS:"dismiss"};function he({dashboard:e,mixed:a,onChange:n,current:s,onDismiss:r,reportedInteractionFrom:i}){const o=(0,I.wW)(Ye),[u,g]=(0,t.useState)(""),d=i||"modal",p=()=>{r(),(0,C.ff)(R,{item:$.DISMISS,src:d})},S=h=>{n(h),(0,C.ff)(R,{item:$.SELECT_DS,ds_type:h.type,src:d})},v=t.useMemo(()=>(0,Te.once)(()=>{(0,C.ff)(R,{item:"search",src:d})}),[d]),f=q("-- Grafana --"),b=(0,Ae.k)((h,te)=>{f&&(n(f,[h]),(0,C.ff)(R,{item:$.UPLOAD_FILE,src:d}),te.length<1&&r())});return t.createElement(A.u,{title:"Select data source",closeOnEscape:!0,closeOnBackdropClick:!0,isOpen:!0,className:o.modal,contentClassName:o.modalContent,onClickBackdrop:p,onDismiss:p},t.createElement("div",{className:o.leftColumn},t.createElement(N.I,{type:"search",autoFocus:!0,className:o.searchInput,value:u,prefix:t.createElement(X.J,{name:"search"}),placeholder:"Search data source",onChange:h=>{g(h.currentTarget.value),v()}}),t.createElement(x.$,null,t.createElement(me,{dashboard:!1,mixed:!1,variables:!0,filter:h=>ue(h,u)&&!h.meta.builtIn,onChange:S,current:s,onClickEmptyStateCTA:()=>(0,C.ff)(R,{item:$.CONFIG_NEW_DS_EMPTY_STATE,src:d})}),t.createElement(de,{dashboard:e,mixed:a,className:o.appendBuiltInDataSourcesList,onChange:S,current:s}))),t.createElement("div",{className:o.rightColumn},t.createElement("div",{className:o.builtInDataSources},t.createElement(x.$,{className:o.builtInDataSourcesList},t.createElement(de,{onChange:S,current:s,dashboard:e,mixed:a})),Oe.v.featureToggles.editPanelCSVDragAndDrop&&t.createElement(re.Yo,{readAs:"readAsArrayBuffer",fileListRenderer:()=>{},options:{maxSize:oe.dg,multiple:!1,accept:oe.DK,onDrop:b}},t.createElement(re.A_,null))),t.createElement("div",{className:o.newDSSection},t.createElement("span",{className:o.newDSDescription},"Open a new tab and configure a data source"),t.createElement(ce,{variant:"secondary",onClick:()=>{(0,C.ff)(R,{item:$.CONFIG_NEW_DS,src:d}),r()}}))))}function Ye(e){return{modal:l.css`
      width: 80%;
      height: 80%;
      max-width: 1200px;
      max-height: 900px;

      ${e.breakpoints.down("md")} {
        width: 100%;
      }
    `,modalContent:l.css`
      display: flex;
      flex-direction: row;
      height: 100%;

      ${e.breakpoints.down("md")} {
        flex-direction: column;
      }
    `,leftColumn:l.css`
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      padding-right: ${e.spacing(4)};
      border-right: 1px solid ${e.colors.border.weak};

      ${e.breakpoints.down("md")} {
        width: 100%;
        border-right: 0;
        padding-right: 0;
        flex: 1;
        overflow-y: auto;
      }
    `,rightColumn:l.css`
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 100%;
      justify-items: space-evenly;
      align-items: stretch;
      padding-left: ${e.spacing(4)};

      ${e.breakpoints.down("md")} {
        width: 100%;
        padding-left: 0;
        flex: 0;
      }
    `,builtInDataSources:l.css`
      flex: 1 1;
      margin-bottom: ${e.spacing(4)};

      ${e.breakpoints.down("md")} {
        flex: 0;
      }
    `,builtInDataSourcesList:l.css`
      ${e.breakpoints.down("md")} {
        display: none;
        margin-bottom: 0;
      }

      margin-bottom: ${e.spacing(4)};
    `,appendBuiltInDataSourcesList:l.css`
      ${e.breakpoints.up("md")} {
        display: none;
      }
    `,newDSSection:l.css`
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    `,newDSDescription:l.css`
      flex: 1 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: ${e.colors.text.secondary};
    `,searchInput:l.css`
      width: 100%;
      min-height: 32px;
      margin-bottom: ${e.spacing(1)};
    `}}var Je=c(53117),Xe=c(29952),qe=c(86922),_e=c(10092),et=c(85511),tt=c(5191),at=c(54350),nt=c(7832);function st(e){const{dataSource:a}=e,n=(0,I.wW)(fe);return a?t.createElement("img",{className:n.pickerDSLogo,alt:`${a.meta.name} logo`,src:a.meta.info.logos.small}):pe()}function pe(){const e=(0,I.wW)(fe);return t.createElement("div",{className:e.pickerDSLogo})}function fe(e){return{pickerDSLogo:l.css`
      height: 20px;
      width: 20px;
    `}}var rt=c(85057);const ot=20,it=200,ct={name:"maxSize",enabled:!0,phase:"main",requires:["offset","preventOverflow","flip"],fn({state:e,name:a,options:n}){const s=(0,rt.Z)(e,n),{x:r,y:i}=e.modifiersData.preventOverflow||{x:0,y:0},{width:o,height:u}=e.rects.popper,[g]=e.placement.split("-"),d=g==="left"?"left":"right",p=g==="top"?"top":"bottom";e.modifiersData[a]={width:o-s[d]-r,height:u-s[p]-i}}},lt={name:"applyMaxSize",enabled:!0,phase:"beforeWrite",requires:["maxSize"],fn({state:e}){const{height:a,width:n}=e.modifiersData.maxSize;e.styles.popper.maxHeight||(e.styles.popper.maxHeight=`${a-ot}px`),e.styles.popper.minHeight||(e.styles.popper.minHeight=`${it}px`),e.styles.popper.maxWidth||(e.styles.popper.maxWidth=n)}},L="dashboards_dspicker_clicked",Q={OPEN_DROPDOWN:"open_dspicker",SELECT_DS:"select_ds",ADD_FILE:"add_file",OPEN_ADVANCED_DS_PICKER:"open_advanced_ds_picker",CONFIG_NEW_DS_EMPTY_STATE:"config_new_ds_empty_state"};function ut(e){const{current:a,onChange:n,hideTextValue:s=!1,width:r,inputId:i,noDefault:o=!1,disabled:u=!1,...g}=e,[d,p]=(0,t.useState)(!1),[S,v]=(0,t.useState)(!1),[f,b]=(0,t.useState)(),[h,te]=(0,t.useState)(),[ae,ye]=(0,t.useState)(""),F=()=>{(0,C.ff)(L,{item:Q.OPEN_DROPDOWN}),p(!0),f?.focus()},It=q(a),K=Boolean(!a&&o)?void 0:It,Nt=ae&&d?t.createElement(pe,null):t.createElement(st,{dataSource:K}),{onKeyDown:Tt,keyboardEvents:De}=(0,at.A)();(0,t.useEffect)(()=>{const w=De.subscribe({next:k=>{switch(k?.code){case"ArrowDown":{F(),k.preventDefault();break}case"ArrowUp":F(),k.preventDefault();break;case"Escape":P(),f?.focus(),k.preventDefault()}}});return()=>w.unsubscribe()});const xe=q("-- Grafana --"),Ot=()=>{xe&&n(xe,[nt.ip])},Ce=(0,_e.D)(f,h,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},ct,lt]}),P=(0,t.useCallback)(()=>{ye(""),p(!1)},[p]),ne=(0,t.useRef)(null),{overlayProps:At,underlayProps:Rt}=(0,qe.Ir)({onClose:P,isDismissable:!0,isOpen:d,shouldCloseOnInteractOutside:w=>f?!f.isSameNode(w):!1},ne),{dialogProps:Pt}=(0,Xe.R)({},ne),se=(0,I.wW)(w=>dt(w,e));return t.createElement("div",{className:se.container,"data-testid":T.wl.components.DataSourcePicker.container},t.createElement("div",{className:se.trigger,onClick:F},t.createElement(N.I,{id:i||"data-source-picker",className:S?void 0:se.input,"data-testid":T.wl.components.DataSourcePicker.inputV2,prefix:K?Nt:void 0,suffix:t.createElement(X.J,{name:d?"search":"angle-down"}),placeholder:s?"":He(K),onClick:F,onFocus:()=>{v(!0)},onBlur:()=>{v(!1),P()},onKeyDown:Tt,value:ae,onChange:w=>{F(),ye(w.currentTarget.value)},ref:b,disabled:u})),d?t.createElement(et.h_,null,t.createElement("div",{...Rt}),t.createElement("div",{ref:ne,...At,...Pt,onMouseDown:w=>{w.preventDefault()}},t.createElement(ge,{keyboardEvents:De,filterTerm:ae,onChange:(w,k)=>{P(),n(w,k)},onClose:P,current:K,style:Ce.styles.popper,ref:te,onClickAddCSV:Ot,...g,onDismiss:P,...Ce.attributes.popper}))):null)}function dt(e,a){return{container:l.css`
      position: relative;
      cursor: ${a.disabled?"not-allowed":"pointer"};
      width: ${e.spacing(a.width||"auto")};
    `,trigger:l.css`
      cursor: pointer;
      ${a.disabled&&"pointer-events: none;"}
    `,input:l.css`
      input::placeholder {
        color: ${a.disabled?e.colors.action.disabledText:e.colors.text.primary};
      }
    `}}const ge=t.forwardRef((e,a)=>{const{filterTerm:n,onChange:s,onClose:r,onClickAddCSV:i,current:o}=e,u=(0,t.useCallback)(p=>{s(p),(0,C.ff)(L,{item:Q.SELECT_DS,ds_type:p.type})},[s]),g=(0,t.useCallback)(()=>{i?.(),r(),(0,C.ff)(L,{item:Q.ADD_FILE})},[i,r]),d=(0,I.wW)(mt);return t.createElement("div",{style:e.style,ref:a,className:d.container},t.createElement(x.$,null,t.createElement(me,{...e,enableKeyboardNavigation:!0,className:d.dataSourceList,current:o,onChange:u,filter:p=>ue(p,n),onClickEmptyStateCTA:()=>(0,C.ff)(L,{item:Q.CONFIG_NEW_DS_EMPTY_STATE})})),t.createElement("div",{className:d.footer},t.createElement(tt.JY,null,({showModal:p,hideModal:S})=>t.createElement(m.zx,{size:"sm",variant:"secondary",fill:"text",onClick:()=>{r(),p(he,{reportedInteractionFrom:"ds_picker",dashboard:e.dashboard,mixed:e.mixed,current:o,onDismiss:S,onChange:(v,f)=>{s(v,f),S()}}),(0,C.ff)(L,{item:Q.OPEN_ADVANCED_DS_PICKER})}},"Open advanced data source picker",t.createElement(X.J,{name:"arrow-right"}))),i&&O.ZP.featureToggles.editPanelCSVDragAndDrop&&t.createElement(m.zx,{variant:"secondary",size:"sm",onClick:g},"Add csv or spreadsheet")))});ge.displayName="PickerContent";function mt(e){return{container:l.css`
      display: flex;
      flex-direction: column;
      max-width: 480px;
      background: ${e.colors.background.primary};
      box-shadow: ${e.shadows.z3};
    `,picker:l.css`
      background: ${e.colors.background.secondary};
    `,dataSourceList:l.css`
      flex: 1;
    `,footer:l.css`
      flex: 0;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      padding: ${e.spacing(1.5)};
      border-top: 1px solid ${e.colors.border.weak};
      background-color: ${e.colors.background.secondary};
    `}}function ve(e){return O.vc.featureToggles.advancedDataSourcePicker?t.createElement(ut,{...e}):t.createElement(Je.q,{...e})}var ht=c(47471),ee=c(79543),Se=c(89749),pt=c(22069);async function ft(e,a,n,s){let r=n;const i={type:e.type,uid:a},o={...e?.getDefaultQuery?.(M.zj.PanelEditor),datasource:i,refId:"A"};if(s?.meta.id!==e.meta.id){if(e.meta.mixed)return n;if((0,Se.p)(s)&&(0,Se.CZ)(e)){const u=await s.exportToAbstractQueries(n);r=await e.importFromAbstractQueries(u)}else if(s&&e.importQueries)r=await e.importQueries(n,s);else return[o]}return r.length===0?[o]:r.map(u=>(!(0,pt.Pr)(u.datasource)&&!e.meta.mixed&&(u.datasource=i),u))}var gt=c(9386),vt=c(84457),St=c(47891),Et=c(81764),yt=c(8944),Dt=c(67254);class xt extends t.PureComponent{constructor(a){super(a),this.onRelativeTimeChange=s=>{this.setState({timeRangeFrom:s.target.value})},this.onTimeShiftChange=s=>{this.setState({timeRangeShift:s.target.value})},this.onOverrideTime=s=>{const{options:r,onChange:i}=this.props,o=z(s.target.value),u=Ee(o);u&&r.timeRange?.from!==o&&i({...r,timeRange:{...r.timeRange??{},from:o}}),this.setState({relativeTimeIsValid:u})},this.onTimeShift=s=>{const{options:r,onChange:i}=this.props,o=z(s.target.value),u=Ee(o);u&&r.timeRange?.shift!==o&&i({...r,timeRange:{...r.timeRange??{},shift:o}}),this.setState({timeShiftIsValid:u})},this.onToggleTimeOverride=()=>{const{onChange:s,options:r}=this.props;this.setState({timeRangeHide:!this.state.timeRangeHide},()=>{s({...r,timeRange:{...r.timeRange??{},hide:this.state.timeRangeHide}})})},this.onCacheTimeoutBlur=s=>{const{options:r,onChange:i}=this.props;i({...r,cacheTimeout:z(s.target.value)})},this.onQueryCachingTTLBlur=s=>{const{options:r,onChange:i}=this.props;let o=parseInt(s.target.value,10);(isNaN(o)||o===0)&&(o=null),i({...r,queryCachingTTL:o})},this.onMaxDataPointsBlur=s=>{const{options:r,onChange:i}=this.props;let o=parseInt(s.target.value,10);(isNaN(o)||o===0)&&(o=null),o!==r.maxDataPoints&&i({...r,maxDataPoints:o})},this.onMinIntervalBlur=s=>{const{options:r,onChange:i}=this.props,o=z(s.target.value);o!==r.minInterval&&i({...r,minInterval:o})},this.onOpenOptions=()=>{this.setState({isOpen:!0})},this.onCloseOptions=()=>{this.setState({isOpen:!1})};const{options:n}=a;this.state={timeRangeFrom:n.timeRange?.from||"",timeRangeShift:n.timeRange?.shift||"",timeRangeHide:n.timeRange?.hide??!1,isOpen:!1,relativeTimeIsValid:!0,timeShiftIsValid:!0}}renderCacheTimeoutOption(){const{dataSource:a,options:n}=this.props,s=`If your time series store has a query cache this option can override the default cache timeout. Specify a
    numeric value in seconds.`;return a.meta.queryOptions?.cacheTimeout?t.createElement("div",{className:"gf-form-inline"},t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9,tooltip:s},"Cache timeout"),t.createElement(N.I,{type:"text",className:"width-6",placeholder:"60",spellCheck:!1,onBlur:this.onCacheTimeoutBlur,defaultValue:n.cacheTimeout??""}))):null}renderQueryCachingTTLOption(){const{dataSource:a,options:n}=this.props,s="Cache time-to-live: How long results from this queries in this panel will be cached, in milliseconds. Defaults to the TTL in the caching configuration for this datasource.";return a.cachingConfig?.enabled?t.createElement("div",{className:"gf-form-inline"},t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9,tooltip:s},"Cache TTL"),t.createElement(N.I,{type:"number",className:"width-6",placeholder:`${a.cachingConfig.TTLMs}`,spellCheck:!1,onBlur:this.onQueryCachingTTLBlur,defaultValue:n.queryCachingTTL??void 0}))):null}renderMaxDataPointsOption(){const{data:a,options:n}=this.props,s=a.request?.maxDataPoints,r=n.maxDataPoints??"",i=r==="";return t.createElement("div",{className:"gf-form-inline"},t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9,tooltip:t.createElement(t.Fragment,null,"The maximum data points per series. Used directly by some data sources and used in calculation of auto interval. With streaming data this value is used for the rolling buffer.")},"Max data points"),t.createElement(N.I,{type:"number",className:"width-6",placeholder:`${s}`,spellCheck:!1,onBlur:this.onMaxDataPointsBlur,defaultValue:r}),i&&t.createElement(t.Fragment,null,t.createElement("div",{className:"gf-form-label query-segment-operator"},"="),t.createElement("div",{className:"gf-form-label"},"Width of panel"))))}renderIntervalOption(){const{data:a,dataSource:n,options:s}=this.props,r=a.request?.interval,i=n.interval??"No limit";return t.createElement(t.Fragment,null,t.createElement("div",{className:"gf-form-inline"},t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9,tooltip:t.createElement(t.Fragment,null,"A lower limit for the interval. Recommended to be set to write frequency, for example ",t.createElement("code",null,"1m")," ","if your data is written every minute. Default value can be set in data source settings for most data sources.")},"Min interval"),t.createElement(N.I,{type:"text",className:"width-6",placeholder:`${i}`,spellCheck:!1,onBlur:this.onMinIntervalBlur,defaultValue:s.minInterval??""}))),t.createElement("div",{className:"gf-form-inline"},t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9,tooltip:t.createElement(t.Fragment,null,"The evaluated interval that is sent to data source and is used in ",t.createElement("code",null,"$__interval")," and"," ",t.createElement("code",null,"$__interval_ms"))},"Interval"),t.createElement(D.c,{width:6},r),t.createElement("div",{className:"gf-form-label query-segment-operator"},"="),t.createElement("div",{className:"gf-form-label"},"Time range / max data points"))))}renderCollapsedText(a){const{data:n,options:s}=this.props,{isOpen:r}=this.state;if(r)return;let i=s.maxDataPoints??"";i===""&&n.request&&(i=`auto = ${n.request.maxDataPoints}`);let o=s.minInterval;return n.request&&(o=`${n.request.interval}`),t.createElement(t.Fragment,null,t.createElement("div",{className:a.collapsedText},"MD = ",i),t.createElement("div",{className:a.collapsedText},"Interval = ",o))}render(){const{timeRangeHide:a,relativeTimeIsValid:n,timeShiftIsValid:s}=this.state,{timeRangeFrom:r,timeRangeShift:i,isOpen:o}=this.state,u=Ct();return t.createElement(Dt.t,{id:"Query options",index:0,title:"Query options",headerElement:this.renderCollapsedText(u),isOpen:o,onOpen:this.onOpenOptions,onClose:this.onCloseOptions},this.renderMaxDataPointsOption(),this.renderIntervalOption(),this.renderCacheTimeoutOption(),this.renderQueryCachingTTLOption(),t.createElement("div",{className:"gf-form"},t.createElement(D.c,{width:9},"Relative time"),t.createElement(N.I,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onRelativeTimeChange,onBlur:this.onOverrideTime,invalid:!n,value:r})),t.createElement("div",{className:"gf-form"},t.createElement("span",{className:"gf-form-label width-9"},"Time shift"),t.createElement(N.I,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onTimeShiftChange,onBlur:this.onTimeShift,invalid:!s,value:i})),(i||r)&&t.createElement("div",{className:"gf-form-inline"},t.createElement(Et._,{label:"Hide time info",labelWidth:18},t.createElement(yt.r,{value:a,onChange:this.onToggleTimeOverride}))))}}const Ee=e=>e?St.isValidTimeSpan(e):!0,z=e=>e===""?null:e,Ct=(0,B.B)(()=>{const{theme:e}=O.vc;return{collapsedText:l.css`
      margin-left: ${e.spacing.md};
      font-size: ${e.typography.size.sm};
      color: ${e.colors.textWeak};
    `}});class bt extends t.PureComponent{constructor(){super(...arguments),this.backendSrv=Ne.ae,this.dataSourceSrv=(0,E.F)(),this.querySubscription=null,this.state={isDataSourceModalOpen:!!y.E1.getSearchObject().firstPanel,isLoadingHelp:!1,helpContent:null,isPickerOpen:!1,isAddingMixed:!1,isHelpOpen:!1,queries:[],data:{state:j.Gu.NotStarted,series:[],timeRange:(0,Z.JK)()}},this.onChangeDataSource=async(a,n)=>{const{dsSettings:s}=this.state,r=s?await(0,E.F)().get(s.uid):void 0,i=await(0,E.F)().get(a.uid),o=n||await ft(i,a.uid,this.state.queries,r),u=await this.dataSourceSrv.get(a.name);this.onChange({queries:o,dataSource:{name:a.name,uid:a.uid,type:a.meta.id,default:a.isDefault}}),this.setState({queries:o,dataSource:u,dsSettings:a}),n&&this.props.onRunQueries()},this.onAddQueryClick=()=>{const{queries:a}=this.state;this.onQueriesChange((0,V.DI)(a,this.newQuery())),this.onScrollBottom()},this.onAddExpressionClick=()=>{this.onQueriesChange((0,V.DI)(this.state.queries,ht.mV.newQuery())),this.onScrollBottom()},this.onScrollBottom=()=>{setTimeout(()=>{this.state.scrollElement&&this.state.scrollElement.scrollTo({top:1e4})},20)},this.onUpdateAndRun=a=>{this.props.onOptionsChange(a),this.props.onRunQueries()},this.onOpenHelp=()=>{this.setState({isHelpOpen:!0})},this.onCloseHelp=()=>{this.setState({isHelpOpen:!1})},this.onCloseDataSourceModal=()=>{this.setState({isDataSourceModalOpen:!1})},this.renderMixedPicker=()=>t.createElement(ve,{mixed:!1,onChange:this.onAddMixedQuery,current:null,autoFocus:!0,variables:!0,onBlur:this.onMixedPickerBlur,openMenuOnFocus:!0}),this.renderDataSourcePickerWithPrompt=()=>{const{isDataSourceModalOpen:a}=this.state,n={current:this.props.options.dataSource,onChange:async(s,r)=>{await this.onChangeDataSource(s,r),this.onCloseDataSourceModal()}};return t.createElement(t.Fragment,null,a&&O.ZP.featureToggles.advancedDataSourcePicker&&t.createElement(he,{...n,onDismiss:this.onCloseDataSourceModal}),t.createElement(ve,{...n,metrics:!0,mixed:!0,dashboard:!0,variables:!0}))},this.onAddMixedQuery=a=>{this.onAddQuery({datasource:a.name}),this.setState({isAddingMixed:!1})},this.onMixedPickerBlur=()=>{this.setState({isAddingMixed:!1})},this.onAddQuery=a=>{const{dsSettings:n,queries:s}=this.state;this.onQueriesChange((0,V.DI)(s,a,{type:n?.type,uid:n?.uid})),this.onScrollBottom()},this.onQueriesChange=a=>{this.onChange({queries:a}),this.setState({queries:a})},this.setScrollRef=a=>{this.setState({scrollElement:a})}}async componentDidMount(){const{options:a,queryRunner:n}=this.props;this.querySubscription=n.getData({withTransforms:!1,withFieldConfig:!1}).subscribe({next:s=>this.onPanelDataUpdate(s)}),this.setNewQueriesAndDatasource(a),y.E1.getSearchObject().firstPanel&&y.E1.partial({firstPanel:null},!0)}componentWillUnmount(){this.querySubscription&&(this.querySubscription.unsubscribe(),this.querySubscription=null)}async componentDidUpdate(){const{options:a}=this.props,n=await(0,E.F)().get(a.dataSource);this.state.dataSource&&n.uid!==this.state.dataSource?.uid&&this.setNewQueriesAndDatasource(a)}async setNewQueriesAndDatasource(a){try{const n=await this.dataSourceSrv.get(a.dataSource),s=this.dataSourceSrv.getInstanceSettings(a.dataSource),r=await this.dataSourceSrv.get(),i=n.getRef(),o=a.queries.map(u=>({...(0,V.vH)(u)&&n?.getDefaultQuery?.(M.zj.PanelEditor),datasource:i,...u}));this.setState({queries:o,dataSource:n,dsSettings:s,defaultDataSource:r})}catch(n){console.log("failed to load data source",n)}}onPanelDataUpdate(a){this.setState({data:a})}newQuery(){const{dsSettings:a,defaultDataSource:n}=this.state,s=a?.meta.mixed?n:a;return{...this.state.dataSource?.getDefaultQuery?.(M.zj.PanelEditor),datasource:{uid:s?.uid,type:s?.type}}}onChange(a){this.props.onOptionsChange({...this.props.options,...a})}renderTopSection(a){const{onOpenQueryInspector:n,options:s}=this.props,{dataSource:r,data:i}=this.state;return t.createElement("div",null,t.createElement("div",{className:a.dataSourceRow},t.createElement(D.c,{htmlFor:"data-source-picker",width:"auto"},"Data source"),t.createElement("div",{className:a.dataSourceRowItem},this.renderDataSourcePickerWithPrompt()),r&&t.createElement(t.Fragment,null,t.createElement("div",{className:a.dataSourceRowItem},t.createElement(m.zx,{variant:"secondary",icon:"question-circle",title:"Open data source help",onClick:this.onOpenHelp,"data-testid":"query-tab-help-button"})),t.createElement("div",{className:a.dataSourceRowItemOptions},t.createElement(xt,{options:s,dataSource:r,data:i,onChange:this.onUpdateAndRun})),n&&t.createElement("div",{className:a.dataSourceRowItem},t.createElement(m.zx,{variant:"secondary",onClick:n,"aria-label":T.wl.components.QueryTab.queryInspectorButton},"Query inspector")))))}renderQueries(a){const{onRunQueries:n}=this.props,{data:s,queries:r}=this.state;return(0,ee.yl)(a.name)?t.createElement(ee.hD,{queries:r,panelData:s,onChange:this.onQueriesChange,onRunQueries:n}):t.createElement("div",{"aria-label":T.wl.components.QueryTab.content},t.createElement(vt.l,{queries:r,dsSettings:a,onQueriesChange:this.onQueriesChange,onAddQuery:this.onAddQuery,onRunQueries:n,data:s}))}isExpressionsSupported(a){return(a.meta.alerting||a.meta.mixed)===!0}renderExtraActions(){return gt.S.getAllExtraRenderAction().map((a,n)=>a({onAddQuery:this.onAddQuery,onChangeDataSource:this.onChangeDataSource,key:n})).filter(Boolean)}renderAddQueryRow(a,n){const{isAddingMixed:s}=this.state,r=!(s||(0,ee.yl)(a.name));return t.createElement(Y.Lh,{spacing:"md",align:"flex-start"},r&&t.createElement(m.zx,{icon:"plus",onClick:this.onAddQueryClick,variant:"secondary","aria-label":T.wl.components.QueryTab.addQuery,"data-testid":"query-tab-add-query"},"Query"),O.ZP.expressionsEnabled&&this.isExpressionsSupported(a)&&t.createElement(m.zx,{icon:"plus",onClick:this.onAddExpressionClick,variant:"secondary",className:n.expressionButton,"data-testid":"query-tab-add-expression"},t.createElement("span",null,"Expression\xA0")),this.renderExtraActions())}render(){const{isHelpOpen:a,dsSettings:n}=this.state,s=wt();return t.createElement(x.$,{autoHeightMin:"100%",scrollRefCallback:this.setScrollRef},t.createElement("div",{className:s.innerWrapper},this.renderTopSection(s),n&&t.createElement(t.Fragment,null,t.createElement("div",{className:s.queriesWrapper},this.renderQueries(n)),this.renderAddQueryRow(n,s),a&&t.createElement(A.u,{title:"Data source help",isOpen:!0,onDismiss:this.onCloseHelp},t.createElement(Ie,{pluginId:n.meta.id})))))}}const wt=(0,B.B)(()=>{const{theme:e}=O.ZP;return{innerWrapper:l.css`
      display: flex;
      flex-direction: column;
      padding: ${e.spacing.md};
    `,dataSourceRow:l.css`
      display: flex;
      margin-bottom: ${e.spacing.md};
    `,dataSourceRowItem:l.css`
      margin-right: ${e.spacing.inlineFormMargin};
    `,dataSourceRowItemOptions:l.css`
      flex-grow: 1;
      margin-right: ${e.spacing.inlineFormMargin};
    `,queriesWrapper:l.css`
      padding-bottom: 16px;
    `,expressionWrapper:l.css``,expressionButton:l.css`
      margin-right: ${e.spacing.sm};
    `}})},54350:(be,G,c)=>{c.d(G,{A:()=>M,v:()=>T});var l=c(66111),t=c(91017),j=c(72196),Z=c(37932);function M(){const E=(0,l.useRef)(new t.x);return{keyboardEvents:E.current,onKeyDown:y=>{switch(y.code){case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":case"Enter":E.current.next(y);default:}}}}function T(E,y,D){const m=(0,l.useRef)({x:0,y:-1}),[Y,x]=(0,l.useState)({x:0,y:-1}),A=(0,l.useRef)();return(0,l.useEffect)(()=>{A.current=D.view.fields.url,m.current.x=0,m.current.y=-1,x({...m.current})},[D]),(0,l.useEffect)(()=>{const B=E.subscribe({next:J=>{switch(J?.code){case"ArrowDown":{m.current.y++,x({...m.current});break}case"ArrowUp":m.current.y=Math.max(0,m.current.y-1),x({...m.current});break;case"ArrowRight":{y>0&&(m.current.x=Math.min(y,m.current.x+1),x({...m.current}));break}case"ArrowLeft":{y>0&&(m.current.x=Math.max(0,m.current.x-1),x({...m.current}));break}case"Enter":if(!A.current)break;const W=m.current.x*y+m.current.y;if(W<0){m.current.x=0,m.current.y=0,x({...m.current});break}const H=A.current.values?.[W];H&&Z.E1.push(j.u.stripBaseFromUrl(H))}}});return()=>B.unsubscribe()},[E,y]),Y}}}]);

//# sourceMappingURL=1579.147a2499b8cdefc9bb4d.js.map