"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[3833],{73833:(e,t,i)=>{i.d(t,{D:()=>H});var s,n,a=i(36636),r=i(68404),o=i(43215),l=i(16695),d=i(90923),c=i(69783),u=i(45916);function h(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}class p extends r.PureComponent{constructor(){super(...arguments),h(this,"state",{isError:!1,isLoading:!1,help:""}),h(this,"loadHelp",(()=>{const{plugin:e,type:t}=this.props;this.setState({isLoading:!0}),(0,d.getBackendSrv)().get(`/api/plugins/${e.id}/markdown/${t}`).then((e=>{const i=(0,o.renderMarkdown)(e);""===e&&"help"===t?this.setState({isError:!1,isLoading:!1,help:this.constructPlaceholderInfo()}):this.setState({isError:!1,isLoading:!1,help:i})})).catch((()=>{this.setState({isError:!0,isLoading:!1})}))}))}componentDidMount(){this.loadHelp()}constructPlaceholderInfo(){return"No plugin help or readme markdown file was found"}render(){const{type:e}=this.props,{isError:t,isLoading:i,help:a}=this.state;return i?s||(s=(0,u.jsx)("h2",{children:"Loading help..."})):t?n||(n=(0,u.jsx)("h3",{children:"'Error occurred when loading help'"})):(0,u.jsx)("div",{className:"markdown-html",dangerouslySetInnerHTML:{__html:a}})}}var m=i(78837),g=i(28659),v=i(65184),x=i(24036),f=i(1808),S=i(20467);var j,y,b,C,w,O,R,I,Q,T=i(42463),D=i(56303),N=i(71623);function q(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}class k extends r.PureComponent{constructor(e){var t,i,s,n;super(e),q(this,"onRelativeTimeChange",(e=>{this.setState({timeRangeFrom:e.target.value})})),q(this,"onTimeShiftChange",(e=>{this.setState({timeRangeShift:e.target.value})})),q(this,"onOverrideTime",(e=>{var t;const{options:i,onChange:s}=this.props,n=P(e.target.value),a=A(n);var r;a&&(null===(t=i.timeRange)||void 0===t?void 0:t.from)!==n&&s(Object.assign({},i,{timeRange:Object.assign({},null!==(r=i.timeRange)&&void 0!==r?r:{},{from:n})}));this.setState({relativeTimeIsValid:a})})),q(this,"onTimeShift",(e=>{var t;const{options:i,onChange:s}=this.props,n=P(e.target.value),a=A(n);var r;a&&(null===(t=i.timeRange)||void 0===t?void 0:t.shift)!==n&&s(Object.assign({},i,{timeRange:Object.assign({},null!==(r=i.timeRange)&&void 0!==r?r:{},{shift:n})}));this.setState({timeShiftIsValid:a})})),q(this,"onToggleTimeOverride",(()=>{const{onChange:e,options:t}=this.props;this.setState({timeRangeHide:!this.state.timeRangeHide},(()=>{var i;e(Object.assign({},t,{timeRange:Object.assign({},null!==(i=t.timeRange)&&void 0!==i?i:{},{hide:this.state.timeRangeHide})}))}))})),q(this,"onCacheTimeoutBlur",(e=>{const{options:t,onChange:i}=this.props;i(Object.assign({},t,{cacheTimeout:P(e.target.value)}))})),q(this,"onMaxDataPointsBlur",(e=>{const{options:t,onChange:i}=this.props;let s=parseInt(e.target.value,10);(isNaN(s)||0===s)&&(s=null),s!==t.maxDataPoints&&i(Object.assign({},t,{maxDataPoints:s}))})),q(this,"onMinIntervalBlur",(e=>{const{options:t,onChange:i}=this.props,s=P(e.target.value);s!==t.minInterval&&i(Object.assign({},t,{minInterval:s}))})),q(this,"onOpenOptions",(()=>{this.setState({isOpen:!0})})),q(this,"onCloseOptions",(()=>{this.setState({isOpen:!1})}));const{options:a}=e;this.state={timeRangeFrom:(null===(t=a.timeRange)||void 0===t?void 0:t.from)||"",timeRangeShift:(null===(i=a.timeRange)||void 0===i?void 0:i.shift)||"",timeRangeHide:null!==(s=null===(n=a.timeRange)||void 0===n?void 0:n.hide)&&void 0!==s&&s,isOpen:!1,relativeTimeIsValid:!0,timeShiftIsValid:!0}}renderCacheTimeoutOption(){var e,t;const{dataSource:i,options:s}=this.props;return null!==(e=i.meta.queryOptions)&&void 0!==e&&e.cacheTimeout?(0,u.jsx)("div",{className:"gf-form-inline",children:(0,u.jsxs)("div",{className:"gf-form",children:[(0,u.jsx)(c.InlineFormLabel,{width:9,tooltip:"If your time series store has a query cache this option can override the default cache timeout. Specify a\n    numeric value in seconds.",children:"Cache timeout"}),(0,u.jsx)(c.Input,{type:"text",className:"width-6",placeholder:"60",spellCheck:!1,onBlur:this.onCacheTimeoutBlur,defaultValue:null!==(t=s.cacheTimeout)&&void 0!==t?t:""})]})}):null}renderMaxDataPointsOption(){var e,t;const{data:i,options:s}=this.props,n=null===(e=i.request)||void 0===e?void 0:e.maxDataPoints,a=null!==(t=s.maxDataPoints)&&void 0!==t?t:"",r=""===a;return(0,u.jsx)("div",{className:"gf-form-inline",children:(0,u.jsxs)("div",{className:"gf-form",children:[j||(j=(0,u.jsx)(c.InlineFormLabel,{width:9,tooltip:(0,u.jsx)(u.Fragment,{children:"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."}),children:"Max data points"})),(0,u.jsx)(c.Input,{type:"number",className:"width-6",placeholder:`${n}`,spellCheck:!1,onBlur:this.onMaxDataPointsBlur,defaultValue:a}),r&&(0,u.jsxs)(u.Fragment,{children:[y||(y=(0,u.jsx)("div",{className:"gf-form-label query-segment-operator",children:"="})),b||(b=(0,u.jsx)("div",{className:"gf-form-label",children:"Width of panel"}))]})]})})}renderIntervalOption(){var e,t,i;const{data:s,dataSource:n,options:a}=this.props,r=null===(e=s.request)||void 0===e?void 0:e.interval,o=null!==(t=n.interval)&&void 0!==t?t:"No limit";return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)("div",{className:"gf-form-inline",children:(0,u.jsxs)("div",{className:"gf-form",children:[C||(C=(0,u.jsx)(c.InlineFormLabel,{width:9,tooltip:(0,u.jsxs)(u.Fragment,{children:["A lower limit for the interval. Recommended to be set to write frequency, for example ",(0,u.jsx)("code",{children:"1m"})," ","if your data is written every minute. Default value can be set in data source settings for most data sources."]}),children:"Min interval"})),(0,u.jsx)(c.Input,{type:"text",className:"width-6",placeholder:`${o}`,spellCheck:!1,onBlur:this.onMinIntervalBlur,defaultValue:null!==(i=a.minInterval)&&void 0!==i?i:""})]})}),(0,u.jsx)("div",{className:"gf-form-inline",children:(0,u.jsxs)("div",{className:"gf-form",children:[w||(w=(0,u.jsx)(c.InlineFormLabel,{width:9,tooltip:(0,u.jsxs)(u.Fragment,{children:["The evaluated interval that is sent to data source and is used in ",(0,u.jsx)("code",{children:"$__interval"})," and"," ",(0,u.jsx)("code",{children:"$__interval_ms"})]}),children:"Interval"})),(0,u.jsx)(c.InlineFormLabel,{width:6,children:r}),O||(O=(0,u.jsx)("div",{className:"gf-form-label query-segment-operator",children:"="})),R||(R=(0,u.jsx)("div",{className:"gf-form-label",children:"Time range / max data points"}))]})})]})}renderCollapsedText(e){var t;const{data:i,options:s}=this.props,{isOpen:n}=this.state;if(n)return;let a=null!==(t=s.maxDataPoints)&&void 0!==t?t:"";""===a&&i.request&&(a=`auto = ${i.request.maxDataPoints}`);let r=s.minInterval;return i.request&&(r=`${i.request.interval}`),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)("div",{className:e.collapsedText,children:["MD = ",a]}),(0,u.jsxs)("div",{className:e.collapsedText,children:["Interval = ",r]})]})}render(){const{timeRangeHide:e,relativeTimeIsValid:t,timeShiftIsValid:i}=this.state,{timeRangeFrom:s,timeRangeShift:n,isOpen:a}=this.state,r=F();return(0,u.jsxs)(N.t,{id:"Query options",index:0,title:"Query options",headerElement:this.renderCollapsedText(r),isOpen:a,onOpen:this.onOpenOptions,onClose:this.onCloseOptions,children:[this.renderMaxDataPointsOption(),this.renderIntervalOption(),this.renderCacheTimeoutOption(),(0,u.jsxs)("div",{className:"gf-form",children:[I||(I=(0,u.jsx)(c.InlineFormLabel,{width:9,children:"Relative time"})),(0,u.jsx)(c.Input,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onRelativeTimeChange,onBlur:this.onOverrideTime,invalid:!t,value:s})]}),(0,u.jsxs)("div",{className:"gf-form",children:[Q||(Q=(0,u.jsx)("span",{className:"gf-form-label width-9",children:"Time shift"})),(0,u.jsx)(c.Input,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onTimeShiftChange,onBlur:this.onTimeShift,invalid:!i,value:n})]}),(n||s)&&(0,u.jsx)("div",{className:"gf-form-inline",children:(0,u.jsx)(c.InlineField,{label:"Hide time info",labelWidth:18,children:(0,u.jsx)(c.Switch,{value:e,onChange:this.onToggleTimeOverride})})})]})}}const A=e=>!e||o.rangeUtil.isValidTimeSpan(e),P=e=>""===e?null:e,F=(0,c.stylesFactory)((()=>{const{theme:e}=m.vc;return{collapsedText:a.css`
      margin-left: ${e.spacing.md};
      font-size: ${e.typography.size.sm};
      color: ${e.colors.textWeak};
    `}}));var B,M;function E(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}class H extends r.PureComponent{constructor(){super(...arguments),E(this,"backendSrv",g.ae),E(this,"dataSourceSrv",(0,d.getDataSourceSrv)()),E(this,"querySubscription",null),E(this,"state",{isLoadingHelp:!1,helpContent:null,isPickerOpen:!1,isAddingMixed:!1,isHelpOpen:!1,queries:[],data:{state:o.LoadingState.NotStarted,series:[],timeRange:(0,o.getDefaultTimeRange)()}}),E(this,"onChangeDataSource",(async e=>{const{dsSettings:t}=this.state,i=t?await(0,d.getDataSourceSrv)().get(t.uid):void 0,s=await(0,d.getDataSourceSrv)().get(e.uid),n=await async function(e,t,i,s){let n=i;const a={type:e.type,uid:t};if((null==s?void 0:s.meta.id)!==e.meta.id){if(e.meta.mixed)return i;if((0,o.hasQueryExportSupport)(s)&&(0,o.hasQueryImportSupport)(e)){const t=await s.exportToAbstractQueries(i);n=await e.importFromAbstractQueries(t)}else{if(!s||!e.importQueries)return[{refId:"A",datasource:a}];n=await e.importQueries(i,s)}}return 0===n.length?[{refId:"A",datasource:a}]:n.map((t=>((0,S.Pr)(t.datasource)||e.meta.mixed||(t.datasource=a),t)))}(s,e.uid,this.state.queries,i),a=await this.dataSourceSrv.get(e.name);this.onChange({queries:n,dataSource:{name:e.name,uid:e.uid,type:e.meta.id,default:e.isDefault}}),this.setState({queries:n,dataSource:a,dsSettings:e})})),E(this,"onAddQueryClick",(()=>{const{queries:e}=this.state;this.onQueriesChange((0,v.DI)(e,this.newQuery())),this.onScrollBottom()})),E(this,"onAddExpressionClick",(()=>{this.onQueriesChange((0,v.DI)(this.state.queries,x.mV.newQuery())),this.onScrollBottom()})),E(this,"onScrollBottom",(()=>{setTimeout((()=>{this.state.scrollElement&&this.state.scrollElement.scrollTo({top:1e4})}),20)})),E(this,"onUpdateAndRun",(e=>{this.props.onOptionsChange(e),this.props.onRunQueries()})),E(this,"onOpenHelp",(()=>{this.setState({isHelpOpen:!0})})),E(this,"onCloseHelp",(()=>{this.setState({isHelpOpen:!1})})),E(this,"renderMixedPicker",(()=>(0,u.jsx)(d.DataSourcePicker,{mixed:!1,onChange:this.onAddMixedQuery,current:null,autoFocus:!0,variables:!0,onBlur:this.onMixedPickerBlur,openMenuOnFocus:!0}))),E(this,"onAddMixedQuery",(e=>{this.onAddQuery({datasource:e.name}),this.setState({isAddingMixed:!1})})),E(this,"onMixedPickerBlur",(()=>{this.setState({isAddingMixed:!1})})),E(this,"onAddQuery",(e=>{const{dsSettings:t,queries:i}=this.state;this.onQueriesChange((0,v.DI)(i,e,{type:null==t?void 0:t.type,uid:null==t?void 0:t.uid})),this.onScrollBottom()})),E(this,"onQueriesChange",(e=>{this.onChange({queries:e}),this.setState({queries:e})})),E(this,"setScrollRef",(e=>{this.setState({scrollElement:e})}))}async componentDidMount(){const{queryRunner:e,options:t}=this.props;this.querySubscription=e.getData({withTransforms:!1,withFieldConfig:!1}).subscribe({next:e=>this.onPanelDataUpdate(e)});try{const e=await this.dataSourceSrv.get(t.dataSource),i=this.dataSourceSrv.getInstanceSettings(t.dataSource),s=await this.dataSourceSrv.get(),n=e.getRef(),a=t.queries.map((e=>e.datasource?e:Object.assign({},e,{datasource:n})));this.setState({queries:a,dataSource:e,dsSettings:i,defaultDataSource:s})}catch(e){console.log("failed to load data source",e)}}componentWillUnmount(){this.querySubscription&&(this.querySubscription.unsubscribe(),this.querySubscription=null)}onPanelDataUpdate(e){this.setState({data:e})}newQuery(){const{dsSettings:e,defaultDataSource:t}=this.state,i=null!=e&&e.meta.mixed?t:e;return{datasource:{uid:null==i?void 0:i.uid,type:null==i?void 0:i.type}}}onChange(e){this.props.onOptionsChange(Object.assign({},this.props.options,e))}renderTopSection(e){const{onOpenQueryInspector:t,options:i}=this.props,{dataSource:s,data:n}=this.state;return(0,u.jsx)("div",{children:(0,u.jsxs)("div",{className:e.dataSourceRow,children:[B||(B=(0,u.jsx)(c.InlineFormLabel,{htmlFor:"data-source-picker",width:"auto",children:"Data source"})),(0,u.jsx)("div",{className:e.dataSourceRowItem,children:(0,u.jsx)(d.DataSourcePicker,{onChange:this.onChangeDataSource,current:i.dataSource,metrics:!0,mixed:!0,dashboard:!0,variables:!0})}),s&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)("div",{className:e.dataSourceRowItem,children:(0,u.jsx)(c.Button,{variant:"secondary",icon:"question-circle",title:"Open data source help",onClick:this.onOpenHelp})}),(0,u.jsx)("div",{className:e.dataSourceRowItemOptions,children:(0,u.jsx)(k,{options:i,dataSource:s,data:n,onChange:this.onUpdateAndRun})}),t&&(0,u.jsx)("div",{className:e.dataSourceRowItem,children:(0,u.jsx)(c.Button,{variant:"secondary",onClick:t,"aria-label":l.wl.components.QueryTab.queryInspectorButton,children:"Query inspector"})})]})]})})}renderQueries(e){const{onRunQueries:t}=this.props,{data:i,queries:s}=this.state;return(0,f.yl)(e.name)?(0,u.jsx)(f.hD,{queries:s,panelData:i,onChange:this.onQueriesChange,onRunQueries:t}):(0,u.jsx)("div",{"aria-label":l.wl.components.QueryTab.content,children:(0,u.jsx)(D.l,{queries:s,dsSettings:e,onQueriesChange:this.onQueriesChange,onAddQuery:this.onAddQuery,onRunQueries:t,data:i})})}isExpressionsSupported(e){return!0===(e.meta.alerting||e.meta.mixed)}renderExtraActions(){return T.S.getAllExtraRenderAction().map(((e,t)=>e({onAddQuery:this.onAddQuery,onChangeDataSource:this.onChangeDataSource,key:t}))).filter(Boolean)}renderAddQueryRow(e,t){const{isAddingMixed:i}=this.state,s=!(i||(0,f.yl)(e.name));return(0,u.jsxs)(c.HorizontalGroup,{spacing:"md",align:"flex-start",children:[s&&(0,u.jsx)(c.Button,{icon:"plus",onClick:this.onAddQueryClick,variant:"secondary","aria-label":l.wl.components.QueryTab.addQuery,children:"Query"}),m.ZP.expressionsEnabled&&this.isExpressionsSupported(e)&&(0,u.jsx)(c.Button,{icon:"plus",onClick:this.onAddExpressionClick,variant:"secondary",className:t.expressionButton,children:M||(M=(0,u.jsx)("span",{children:"Expression "}))}),this.renderExtraActions()]})}render(){const{isHelpOpen:e,dsSettings:t}=this.state,i=L();return(0,u.jsx)(c.CustomScrollbar,{autoHeightMin:"100%",scrollRefCallback:this.setScrollRef,children:(0,u.jsxs)("div",{className:i.innerWrapper,children:[this.renderTopSection(i),t&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)("div",{className:i.queriesWrapper,children:this.renderQueries(t)}),this.renderAddQueryRow(t,i),e&&(0,u.jsx)(c.Modal,{title:"Data source help",isOpen:!0,onDismiss:this.onCloseHelp,children:(0,u.jsx)(p,{plugin:t.meta,type:"query_help"})})]})]})})}}const L=(0,c.stylesFactory)((()=>{const{theme:e}=m.ZP;return{innerWrapper:a.css`
      display: flex;
      flex-direction: column;
      padding: ${e.spacing.md};
    `,dataSourceRow:a.css`
      display: flex;
      margin-bottom: ${e.spacing.md};
    `,dataSourceRowItem:a.css`
      margin-right: ${e.spacing.inlineFormMargin};
    `,dataSourceRowItemOptions:a.css`
      flex-grow: 1;
      margin-right: ${e.spacing.inlineFormMargin};
    `,queriesWrapper:a.css`
      padding-bottom: 16px;
    `,expressionWrapper:a.css``,expressionButton:a.css`
      margin-right: ${e.spacing.sm};
    `}}))}}]);
//# sourceMappingURL=3833.5a9567f878ccf1d29313.js.map