1#@!#!123s

: / usr / share / grafana / public / build /
Filename : 1863.dad1afc1743ccbc4ec18.js
back
"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[1863],{64626:(V,T,s)=>{s.d(T,{Y:()=>R});var u=s(27702),e=s(9232),D=s(86312),x=s(63439);function v(p,h){let m;switch(p){case e.zV.app:m="app plugin";break;case e.zV.panel:m="panel plugin";break;case e.zV.datasource:m="data source plugin";break;default:m="plugin"}let d=`This ${m} uses a deprecated, legacy platform based on AngularJS and `;return h===void 0?d+" may be incompatible depending on your Grafana configuration.":h?d+" will stop working in future releases of Grafana.":d+" is incompatible with your current Grafana configuration."}function R(p){const{className:h,angularSupportEnabled:m,pluginId:d,pluginType:g,showPluginDetailsLink:O}=p,[Q,I]=(0,u.useState)(!1);return Q?null:u.createElement(x.b,{severity:"warning",title:"Angular plugin",className:h,onRemove:()=>I(!0)},u.createElement("p",null,v(g,m)),u.createElement("div",{className:"markdown-html"},u.createElement("ul",null,u.createElement("li",null,u.createElement("a",{href:"https://grafana.com/docs/grafana/latest/developers/angular_deprecation/",className:"external-link",target:"_blank",rel:"noreferrer",onClick:()=>{(0,D.ff)("angular_deprecation_docs_clicked",{pluginId:d})}},"Read our deprecation notice and migration advice.")),O&&d?u.createElement("li",null,u.createElement("a",{href:`plugins/${encodeURIComponent(d)}`,className:"external-link",target:"_blank",rel:"noreferrer"},"View plugin details")):null)))}},61863:(V,T,s)=>{s.d(T,{D:()=>le});var u=s(42844),e=s(27702),D=s(53933),x=s(8508),v=s(62247),R=s(9232),p=s(74639),h=s(10864),m=s(26129),d=s(60644),g=s(66670),O=s(64022),Q=s(29372),I=s(13741),w=s(80402),$=s(25111),W=s(18112),U=s(73289),z=s(52419);function k({pluginId:o}){const{value:t,loading:a,error:n}=(0,$.Z)(async()=>(0,U.i)().get(`/api/plugins/${o}/markdown/query_help`),[]),i=(0,W.a)(t);return a?e.createElement(z.u,{text:"Loading help..."}):n?e.createElement("h3",null,"An error occurred when loading help."):t===""?e.createElement("h3",null,"No query help could be found."):e.createElement("div",{className:"markdown-html",dangerouslySetInnerHTML:{__html:i}})}var E=s(12308),G=s(45937),y=s(76897),j=s(56250),K=s(53229),J=s(11122),Y=s(64626),N=s(36617),Z=s(34667);function X(o){return Object.entries(Z.config.datasources).some(([t,a])=>a.uid===o&&a.angularDetected)}var M=s(69376),q=s(39317),_=s(42751);async function ee(o,t,a,n){let i=a;const l={type:o.type,uid:t},r={...o?.getDefaultQuery?.(v.zj.PanelEditor),datasource:l,refId:"A"};if(n?.meta.id!==o.meta.id){if(o.meta.mixed)return a;if((0,M.p)(n)&&(0,M.CZ)(o)){const c=await n.exportToAbstractQueries(a);i=await o.importFromAbstractQueries(c)}else if(n&&o.importQueries)i=await o.importQueries(a,n);else{if(n){const c=(0,q.J)(),ue=[];let B=o.uid;const F=c.containsTemplate(t);F&&(B=c.replace(o.uid));const L=a.reduce((P,S)=>{if(S.datasource){let A=S.datasource.uid;const H=c.containsTemplate(A);if(H&&(A=c.replace(S.datasource.uid)),A===B&&H===F)return S.refId=(0,y.Hs)(P),P.concat([S])}return P},ue);if(L.length>0)return L}return[r]}}return i.length===0?[r]:i.map(c=>(!(0,_.Pr)(c.datasource)&&!o.meta.mixed&&(c.datasource=l),c))}var te=s(31058),ae=s(8726),ne=s(76305),f=s(1128),ie=s(42074),se=s(10186);class re extends e.PureComponent{constructor(t){super(t),this.onRelativeTimeChange=n=>{this.setState({timeRangeFrom:n.target.value})},this.onTimeShiftChange=n=>{this.setState({timeRangeShift:n.target.value})},this.onOverrideTime=n=>{const{options:i,onChange:l}=this.props,r=C(n.target.value),c=b(r);c&&i.timeRange?.from!==r&&l({...i,timeRange:{...i.timeRange??{},from:r}}),this.setState({relativeTimeIsValid:c})},this.onTimeShift=n=>{const{options:i,onChange:l}=this.props,r=C(n.target.value),c=b(r);c&&i.timeRange?.shift!==r&&l({...i,timeRange:{...i.timeRange??{},shift:r}}),this.setState({timeShiftIsValid:c})},this.onToggleTimeOverride=()=>{const{onChange:n,options:i}=this.props;this.setState({timeRangeHide:!this.state.timeRangeHide},()=>{n({...i,timeRange:{...i.timeRange??{},hide:this.state.timeRangeHide}})})},this.onCacheTimeoutBlur=n=>{const{options:i,onChange:l}=this.props;l({...i,cacheTimeout:C(n.target.value)})},this.onQueryCachingTTLBlur=n=>{const{options:i,onChange:l}=this.props;let r=parseInt(n.target.value,10);(isNaN(r)||r===0)&&(r=null),l({...i,queryCachingTTL:r})},this.onMaxDataPointsBlur=n=>{const{options:i,onChange:l}=this.props;let r=parseInt(n.target.value,10);(isNaN(r)||r===0)&&(r=null),r!==i.maxDataPoints&&l({...i,maxDataPoints:r})},this.onMinIntervalBlur=n=>{const{options:i,onChange:l}=this.props,r=C(n.target.value);r!==i.minInterval&&l({...i,minInterval:r})},this.onOpenOptions=()=>{this.setState({isOpen:!0})},this.onCloseOptions=()=>{this.setState({isOpen:!1})};const{options:a}=t;this.state={timeRangeFrom:a.timeRange?.from||"",timeRangeShift:a.timeRange?.shift||"",timeRangeHide:a.timeRange?.hide??!1,isOpen:!1,relativeTimeIsValid:!0,timeShiftIsValid:!0}}renderCacheTimeoutOption(){const{dataSource:t,options:a}=this.props,n=`If your time series store has a query cache this option can override the default cache timeout. Specify a
    numeric value in seconds.`;return t.meta.queryOptions?.cacheTimeout?e.createElement("div",{className:"gf-form-inline"},e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:n},"Cache timeout"),e.createElement(f.I,{type:"text",className:"width-6",placeholder:"60",spellCheck:!1,onBlur:this.onCacheTimeoutBlur,defaultValue:a.cacheTimeout??""}))):null}renderQueryCachingTTLOption(){const{dataSource:t,options:a}=this.props,n="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 t.cachingConfig?.enabled?e.createElement("div",{className:"gf-form-inline"},e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:n},"Cache TTL"),e.createElement(f.I,{type:"number",className:"width-6",placeholder:`${t.cachingConfig.TTLMs}`,spellCheck:!1,onBlur:this.onQueryCachingTTLBlur,defaultValue:a.queryCachingTTL??void 0}))):null}renderMaxDataPointsOption(){const{data:t,options:a}=this.props,n=t.request?.maxDataPoints,i=a.maxDataPoints??"",l=i==="";return e.createElement("div",{className:"gf-form-inline"},e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:e.createElement(e.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"),e.createElement(f.I,{type:"number",className:"width-6",placeholder:`${n}`,spellCheck:!1,onBlur:this.onMaxDataPointsBlur,defaultValue:i}),l&&e.createElement(e.Fragment,null,e.createElement("div",{className:"gf-form-label query-segment-operator"},"="),e.createElement("div",{className:"gf-form-label"},"Width of panel"))))}renderIntervalOption(){const{data:t,dataSource:a,options:n}=this.props,i=t.request?.interval,l=a.interval??"No limit";return e.createElement(e.Fragment,null,e.createElement("div",{className:"gf-form-inline"},e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:e.createElement(e.Fragment,null,"A lower limit for the interval. Recommended to be set to write frequency, for example ",e.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"),e.createElement(f.I,{type:"text",className:"width-6",placeholder:`${l}`,spellCheck:!1,onBlur:this.onMinIntervalBlur,defaultValue:n.minInterval??""}))),e.createElement("div",{className:"gf-form-inline"},e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:e.createElement(e.Fragment,null,"The evaluated interval that is sent to data source and is used in ",e.createElement("code",null,"$__interval")," and"," ",e.createElement("code",null,"$__interval_ms"),". This value is not exactly equal to"," ",e.createElement("code",null,"Time range / max data points"),", it will approximate a series of magic number.")},"Interval"),e.createElement(d.c,{width:6},i),e.createElement("div",{className:"gf-form-label query-segment-operator"},"="),e.createElement("div",{className:"gf-form-label"},"Time range / max data points"))))}renderCollapsedText(t){const{data:a,options:n}=this.props,{isOpen:i}=this.state;if(i)return;let l=n.maxDataPoints??"";l===""&&a.request&&(l=`auto = ${a.request.maxDataPoints}`);let r=n.minInterval;return a.request&&(r=`${a.request.interval}`),e.createElement(e.Fragment,null,e.createElement("div",{className:t.collapsedText},"MD = ",l),e.createElement("div",{className:t.collapsedText},"Interval = ",r))}render(){const{timeRangeHide:t,relativeTimeIsValid:a,timeShiftIsValid:n}=this.state,{timeRangeFrom:i,timeRangeShift:l,isOpen:r}=this.state,c=oe();return e.createElement(se.t,{id:"Query options",index:0,title:"Query options",headerElement:this.renderCollapsedText(c),isOpen:r,onOpen:this.onOpenOptions,onClose:this.onCloseOptions},this.renderMaxDataPointsOption(),this.renderIntervalOption(),this.renderCacheTimeoutOption(),this.renderQueryCachingTTLOption(),e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:e.createElement(e.Fragment,null,"Overrides the relative time range for individual panels, which causes them to be different than what is selected in the dashboard time picker in the top-right corner of the dashboard. For example to configure the Last 5 minutes the Relative time should be ",e.createElement("code",null,"now-5m")," and ",e.createElement("code",null,"5m"),", or variables like ",e.createElement("code",null,"$_relativeTime"),".")},"Relative time"),e.createElement(f.I,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onRelativeTimeChange,onBlur:this.onOverrideTime,invalid:!a,value:i})),e.createElement("div",{className:"gf-form"},e.createElement(d.c,{width:9,tooltip:e.createElement(e.Fragment,null,"Overrides the time range for individual panels by shifting its start and end relative to the time picker. For example to configure the Last 1h the Time shift should be ",e.createElement("code",null,"now-1h")," and"," ",e.createElement("code",null,"1h"),", or variables like ",e.createElement("code",null,"$_timeShift"),".")},"Time shift"),e.createElement(f.I,{type:"text",className:"width-6",placeholder:"1h",onChange:this.onTimeShiftChange,onBlur:this.onTimeShift,invalid:!n,value:l})),(l||i)&&e.createElement("div",{className:"gf-form-inline align-items-center"},e.createElement(d.c,{width:9},"Hide time info"),e.createElement(ie.r,{value:t,onChange:this.onToggleTimeOverride})))}}const b=o=>o?ne.isValidTimeSpan(o):!0,C=o=>o===""?null:o,oe=(0,w.B)(()=>{const{theme:o}=E.config;return{collapsedText:(0,u.css)`
      margin-left: ${o.spacing.md};
      font-size: ${o.typography.size.sm};
      color: ${o.colors.textWeak};
    `}});class le extends e.PureComponent{constructor(){super(...arguments),this.backendSrv=G.ae,this.dataSourceSrv=(0,h.F)(),this.querySubscription=null,this.state={isDataSourceModalOpen:!!m.E1.getSearchObject().firstPanel,isLoadingHelp:!1,helpContent:null,isPickerOpen:!1,isHelpOpen:!1,queries:[],data:{state:D.Gu.NotStarted,series:[],timeRange:(0,x.JK)()}},this.onChangeDataSource=async(t,a)=>{const{dsSettings:n}=this.state,i=n?await(0,h.F)().get(n.uid):void 0,l=await(0,h.F)().get(t.uid),r=a||await ee(l,t.uid,this.state.queries,i),c=await this.dataSourceSrv.get(t.name);this.onChange({queries:r,dataSource:{name:t.name,uid:t.uid,type:t.meta.id,default:t.isDefault}}),this.setState({queries:r,dataSource:c,dsSettings:t}),a&&this.props.onRunQueries()},this.onAddQueryClick=()=>{const{queries:t}=this.state;this.onQueriesChange((0,y.DI)(t,this.newQuery())),this.onScrollBottom()},this.onAddExpressionClick=()=>{this.onQueriesChange((0,y.DI)(this.state.queries,J.mV.newQuery())),this.onScrollBottom()},this.onScrollBottom=()=>{setTimeout(()=>{this.state.scrollElement&&this.state.scrollElement.scrollTo({top:1e4})},20)},this.onUpdateAndRun=t=>{this.props.onOptionsChange(t),this.props.onRunQueries()},this.onOpenHelp=()=>{this.setState({isHelpOpen:!0})},this.onCloseHelp=()=>{this.setState({isHelpOpen:!1})},this.onCloseDataSourceModal=()=>{this.setState({isDataSourceModalOpen:!1})},this.renderDataSourcePickerWithPrompt=()=>{const{isDataSourceModalOpen:t}=this.state,a={metrics:!0,mixed:!0,dashboard:!0,variables:!0,current:this.props.options.dataSource,uploadFile:!0,onChange:async(n,i)=>{await this.onChangeDataSource(n,i),this.onCloseDataSourceModal()}};return e.createElement(e.Fragment,null,t&&E.default.featureToggles.advancedDataSourcePicker&&e.createElement(j.a,{...a,onDismiss:this.onCloseDataSourceModal}),e.createElement(K.q,{...a}))},this.onAddQuery=t=>{const{dsSettings:a,queries:n}=this.state;this.onQueriesChange((0,y.DI)(n,t,{type:a?.type,uid:a?.uid})),this.onScrollBottom()},this.onQueriesChange=t=>{this.onChange({queries:t}),this.setState({queries:t})},this.setScrollRef=t=>{this.setState({scrollElement:t})}}async componentDidMount(){const{options:t,queryRunner:a}=this.props;this.querySubscription=a.getData({withTransforms:!1,withFieldConfig:!1}).subscribe({next:n=>this.onPanelDataUpdate(n)}),this.setNewQueriesAndDatasource(t),m.E1.getSearchObject().firstPanel&&m.E1.partial({firstPanel:null},!0)}componentWillUnmount(){this.querySubscription&&(this.querySubscription.unsubscribe(),this.querySubscription=null)}async componentDidUpdate(){const{options:t}=this.props,a=await(0,h.F)().get(t.dataSource);this.state.dataSource&&a.uid!==this.state.dataSource?.uid&&this.setNewQueriesAndDatasource(t)}async setNewQueriesAndDatasource(t){try{const a=await this.dataSourceSrv.get(t.dataSource),n=this.dataSourceSrv.getInstanceSettings(t.dataSource),i=await this.dataSourceSrv.get(),l=a.getRef(),r=t.queries.map(c=>({...(0,y.vH)(c)&&a?.getDefaultQuery?.(v.zj.PanelEditor),datasource:l,...c}));this.setState({queries:r,dataSource:a,dsSettings:n,defaultDataSource:i})}catch(a){console.log("failed to load data source",a)}}onPanelDataUpdate(t){this.setState({data:t})}newQuery(){const{dsSettings:t,defaultDataSource:a}=this.state,n=t?.meta.mixed?a:t;return{...this.state.dataSource?.getDefaultQuery?.(v.zj.PanelEditor),datasource:{uid:n?.uid,type:n?.type}}}onChange(t){this.props.onOptionsChange({...this.props.options,...t})}renderTopSection(t){const{onOpenQueryInspector:a,options:n}=this.props,{dataSource:i,data:l}=this.state;return e.createElement("div",null,e.createElement("div",{className:t.dataSourceRow},e.createElement(d.c,{htmlFor:"data-source-picker",width:"auto"},"Data source"),e.createElement("div",{className:t.dataSourceRowItem},this.renderDataSourcePickerWithPrompt()),i&&e.createElement(e.Fragment,null,e.createElement("div",{className:t.dataSourceRowItem},e.createElement(g.zx,{variant:"secondary",icon:"question-circle",title:"Open data source help",onClick:this.onOpenHelp,"data-testid":"query-tab-help-button"})),e.createElement("div",{className:t.dataSourceRowItemOptions},e.createElement(re,{options:n,dataSource:i,data:l,onChange:this.onUpdateAndRun})),a&&e.createElement("div",{className:t.dataSourceRowItem},e.createElement(g.zx,{variant:"secondary",onClick:a,"aria-label":p.wl.components.QueryTab.queryInspectorButton},"Query inspector")))),i&&X(i.uid)&&e.createElement(Y.Y,{pluginId:i.type,pluginType:R.zV.datasource,angularSupportEnabled:E.default?.angularSupportEnabled,showPluginDetailsLink:!0}))}renderQueries(t){const{onRunQueries:a}=this.props,{data:n,queries:i}=this.state;return(0,N.yl)(t.name)?e.createElement(N.hD,{queries:i,panelData:n,onChange:this.onQueriesChange,onRunQueries:a}):e.createElement("div",{"aria-label":p.wl.components.QueryTab.content},e.createElement(ae.l,{queries:i,dsSettings:t,onQueriesChange:this.onQueriesChange,onAddQuery:this.onAddQuery,onRunQueries:a,data:n}))}isExpressionsSupported(t){return(t.meta.alerting||t.meta.mixed)===!0}renderExtraActions(){return te.S.getAllExtraRenderAction().map((t,a)=>t({onAddQuery:this.onAddQuery,onChangeDataSource:this.onChangeDataSource,key:a})).filter(Boolean)}renderAddQueryRow(t,a){const n=!(0,N.yl)(t.name);return e.createElement(O.Lh,{spacing:"md",align:"flex-start"},n&&e.createElement(g.zx,{icon:"plus",onClick:this.onAddQueryClick,variant:"secondary","aria-label":p.wl.components.QueryTab.addQuery,"data-testid":"query-tab-add-query"},"Query"),E.default.expressionsEnabled&&this.isExpressionsSupported(t)&&e.createElement(g.zx,{icon:"plus",onClick:this.onAddExpressionClick,variant:"secondary",className:a.expressionButton,"data-testid":"query-tab-add-expression"},e.createElement("span",null,"Expression\xA0")),this.renderExtraActions())}render(){const{isHelpOpen:t,dsSettings:a}=this.state,n=ce();return e.createElement(Q.$,{autoHeightMin:"100%",scrollRefCallback:this.setScrollRef},e.createElement("div",{className:n.innerWrapper},this.renderTopSection(n),a&&e.createElement(e.Fragment,null,e.createElement("div",{className:n.queriesWrapper},this.renderQueries(a)),this.renderAddQueryRow(a,n),t&&e.createElement(I.u,{title:"Data source help",isOpen:!0,onDismiss:this.onCloseHelp},e.createElement(k,{pluginId:a.meta.id})))))}}const ce=(0,w.B)(()=>{const{theme:o}=E.default;return{innerWrapper:(0,u.css)`
      display: flex;
      flex-direction: column;
      padding: ${o.spacing.md};
    `,dataSourceRow:(0,u.css)`
      display: flex;
      margin-bottom: ${o.spacing.md};
    `,dataSourceRowItem:(0,u.css)`
      margin-right: ${o.spacing.inlineFormMargin};
    `,dataSourceRowItemOptions:(0,u.css)`
      flex-grow: 1;
      margin-right: ${o.spacing.inlineFormMargin};
    `,queriesWrapper:(0,u.css)`
      padding-bottom: 16px;
    `,expressionWrapper:(0,u.css)``,expressionButton:(0,u.css)`
      margin-right: ${o.spacing.sm};
    `}})}}]);

//# sourceMappingURL=1863.dad1afc1743ccbc4ec18.js.map