190 lines
41 KiB
JavaScript
190 lines
41 KiB
JavaScript
"use strict";(self.webpackChunkgrafana_pyroscope_app=self.webpackChunkgrafana_pyroscope_app||[]).push([[580],{5694:(e,t,n)=>{n.r(t),n.d(t,{App:()=>it});var a=n(6089),r=n(7781),o=n(8531),l=n(2007),i=n(4164),c=n(8132),s=n(3715),m=n(5959),u=n.n(m),d=n(5656),p=n(7616);function g(e,t,n,a,r,o,l){try{var i=e[o](l),c=i.value}catch(e){return void n(e)}i.done?t(c):Promise.resolve(c).then(a,r)}class f extends d.O{get(){var e,t=this;return(e=function*(){const e=yield t.fetch("/querier.v1.QuerierService/GetProfileStats",{method:"POST",body:JSON.stringify({})}),n=yield e.json();return{hasIngestedData:n.dataIngested,oldestProfileTime:Number(n.oldestProfileTime),newestProfileTime:Number(n.newestProfileTime)}},function(){var t=this,n=arguments;return new Promise((function(a,r){var o=e.apply(t,n);function l(e){g(o,a,r,l,i,"next",e)}function i(e){g(o,a,r,l,i,"throw",e)}l(void 0)}))})()}}const b=new f;function y(){const[e,t]=(0,m.useState)(!1),n=d.O.getPyroscopeDataSources().length,{isFetching:a,error:r,stats:o}=function({enabled:e}){const{isFetching:t,error:n,data:a,refetch:r}=(0,p.I)({enabled:e,placeholderData:()=>({hasIngestedData:!0,oldestProfileTime:0,newestProfileTime:0}),queryKey:["tenant-stats"],queryFn:()=>(b.abort(),b.get())});return{isFetching:t,error:b.isAbortError(n)?null:n,stats:a,refetch:r}}({enabled:n>0}),l=!a&&!(null==o?void 0:o.hasIngestedData);return{data:{shouldShowLoadingPage:!r&&a,shouldShowOnboardingPage:(r||!n||l)&&!e,shouldShowNoDataSourceBanner:!n},actions:{closeModal(){t(!0)}}}}const h=e=>({row:(0,a.css)({display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start"}),headerColumn:(0,a.css)({display:"flex",flexDirection:"column",minWidth:"120px",alignItems:"start"}),column:(0,a.css)({display:"flex",flexDirection:"column",minWidth:"120px",alignItems:"end"}),tooltip:(0,a.css)({display:"flex",color:e.colors.text.secondary,fontSize:e.typography.bodySmall.fontSize}),contentWithIcon:(0,a.css)({display:"none",[`@media ${l.styleMixins.mediaUp(e.v1.breakpoints.sm)}`]:{display:"block"}})}),E=e=>(0,r.formattedValueToString)((0,r.getValueFormat)("decbytes")(e)),v=e=>(0,r.formattedValueToString)((0,r.getValueFormat)("short")(e));function P(e){const t=(0,l.useStyles2)(h),{data:n}=e,a=E(n.queryImpact.totalBytesInTimeRange),r=(0,m.useMemo)((()=>u().createElement("div",{"data-testid":"queryAnalysis-popup"},u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Data in time range"),u().createElement("div",{className:t.column},a),u().createElement("div",{className:t.column}," ")),void 0!==n.queryImpact.totalQueriedSeries&&u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Series in query"),u().createElement("div",{className:t.column},v(n.queryImpact.totalQueriedSeries)),u().createElement("div",{className:t.column}," ")),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Deduplication"),u().createElement("div",{className:t.column},n.queryImpact.deduplicationNeeded?"yes":"no"),u().createElement("div",{className:t.column}," ")),u().createElement(l.Divider,null),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn}," "),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},u().createElement("strong",null,e.componentType))))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Replicas"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},e.componentCount||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Blocks"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},v(e.blockCount)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Series"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},v(e.seriesCount)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Profiles"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},v(e.profileCount)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Samples"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},v(e.sampleCount)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn}," "),u().createElement("div",{className:t.column}," "),u().createElement("div",{className:t.column}," ")),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Index Store"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},E(e.indexBytes)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Profiles Store"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},E(e.profileBytes)||"/")))),u().createElement("div",{className:t.row},u().createElement("div",{className:t.headerColumn},"Symbols Store"),n.queryScopes.map(((e,n)=>u().createElement("div",{key:n,className:t.column},E(e.symbolBytes)||"/")))))),[n,t,a]);return u().createElement(u().Fragment,null,void 0!==n.queryImpact.totalBytesInTimeRange?u().createElement(l.Toggletip,{content:r,fitContent:!0},u().createElement("div",{className:t.tooltip,"data-testid":"queryAnalysis-tooltip"},u().createElement("span",{className:t.contentWithIcon},"Stored data in time range: ",a)," ",u().createElement(l.IconButton,{name:"database","aria-label":"Query info"}))):null)}var w=n(9814),N=n(2932),S=n(9660);function O({title:e,queryAnalysis:t}){const n=(0,l.useStyles2)(x),a="string"==typeof e?`${e} | Pyroscope`:"Pyroscope";return u().createElement(u().Fragment,null,u().createElement(w.m,null,u().createElement("title",null,a)),u().createElement("div",{className:n.titleContainer},u().createElement(l.Stack,{justifyContent:"space-between"},u().createElement("div",null,u().createElement(S.S,{size:"large"}),u().createElement("h1",{className:n.title,"data-testid":"page-title"},e)),u().createElement("div",{className:n.infoArea},u().createElement(N.U,null),t?u().createElement(P,{data:t}):null))))}const x=e=>({titleContainer:a.css`
|
||
height: ${e.spacing(5)};
|
||
line-height: ${e.spacing(5)};
|
||
margin-bottom: ${e.spacing(3)};
|
||
`,title:a.css`
|
||
font-size: ${e.typography.h2.fontSize};
|
||
display: inline-block;
|
||
margin: 0;
|
||
position: relative;
|
||
top: 10px;
|
||
left: ${e.spacing(1)};
|
||
`,infoArea:a.css`
|
||
align-self: end;
|
||
margin-bottom: 0;
|
||
line-height: 20px;
|
||
text-align: right;
|
||
`}),C=(0,m.memo)(O);function T(){return u().createElement(o.PluginPage,{layout:r.PageLayoutType.Canvas},u().createElement(C,{title:u().createElement("span",null,"Loading... ",u().createElement(l.Icon,{name:"fa fa-spinner"}))}))}const j=e=>({link:a.css`
|
||
color: ${e.colors.text.link};
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
`});function F({href:e,children:t}){const n=(0,l.useStyles2)(j);return u().createElement("a",{className:n.link,href:e,target:"_blank",rel:"noreferrer"},t," ",u().createElement(l.Icon,{name:"external-link-alt"}))}function D(){return u().createElement(o.PluginPage,{layout:r.PageLayoutType.Canvas},u().createElement(C,{title:"Grafana Profiles Drilldown"}),u().createElement(l.Alert,{severity:"error",title:"Missing Pyroscope data source!"},"This plugin requires a Pyroscope data source. Please"," ",u().createElement(F,{href:"/connections/datasources/new"},"add and configure a Pyroscope data source")," to your Grafana instance."))}const k="public/plugins/grafana-pyroscope-app/img/61b4cf746a6f58780f27.png",I="public/plugins/grafana-pyroscope-app/img/58f0b0e1cfa063e4b662.png",$="public/plugins/grafana-pyroscope-app/img/9c9cdd5175734d579007.png",R="public/plugins/grafana-pyroscope-app/img/bafee50693eb02088442.png";var _=n(4137);function G(){const[e,t]=(0,m.useState)("https://grafana.com/auth/sign-in/"),n=/\.grafana(-dev|-ops)?\.net$/.test(window.location.host),{instances:a}=function(e=!0){const{isFetching:t,error:n,data:a}=(0,p.I)({enabled:e,queryKey:["instances"],queryFn:()=>fetch(`${_.$0}/grafanacom-api/instances`).then((e=>e.json()))});return{isFetching:t,error:n,instances:a}}(n);if(a&&a.orgSlug&&a.hpInstanceId){const n=`https://grafana.com/orgs/${a.orgSlug}/hosted-profiles/${a.hpInstanceId}`;e!==n&&t(n)}return{data:{settingsUrl:e,isCloud:n},actions:{}}}const L=e=>({onboardingRow:a.css`
|
||
background: ${e.colors.background.secondary};
|
||
display: flex;
|
||
margin-top: 16px;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
margin-bottom: 2.5rem;
|
||
`,onboardingParagraph:a.css`
|
||
padding: 20px 64px;
|
||
text-align: center;
|
||
line-height: 2;
|
||
flex: 1;
|
||
margin: 0;
|
||
`,onboardingPanel:a.css`
|
||
flex: 1;
|
||
display: flex;
|
||
flex-flow: column wrap;
|
||
-webkit-box-align: center;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
text-align: center;
|
||
`,onboardingPanelHeader:a.css`
|
||
line-height: 1.5;
|
||
margin-bottom: 1em;
|
||
`,onboardingPanelImage:a.css`
|
||
width: 5rem;
|
||
margin-bottom: 1em;
|
||
`,hero:a.css`
|
||
display: flex;
|
||
flex-direction: row;
|
||
`,heroTitles:a.css`
|
||
flex: 1;
|
||
`,heroImage:a.css`
|
||
width: 40%;
|
||
margin-left: 16px;
|
||
margin-top: 16px;
|
||
margin-bottom: 16px;
|
||
border-radius: 3px;
|
||
`,onboardingPanelNumber:a.css`
|
||
color: rgb(236, 109, 19);
|
||
text-align: center;
|
||
display: grid;
|
||
place-items: center;
|
||
background-image: linear-gradient(135deg, currentcolor, 75%, rgb(204, 204, 220));
|
||
border-radius: 100%;
|
||
font-size: 2.5rem;
|
||
line-height: 5rem;
|
||
height: 5rem;
|
||
width: 5rem;
|
||
margin-bottom: 1em;
|
||
`,color2:a.css`
|
||
color: rgb(190, 85, 190);
|
||
`,color3:a.css`
|
||
color: rgb(126, 108, 218);
|
||
`,onboardingPanelNumberSpan:a.css`
|
||
color: rgb(220, 220, 220);
|
||
`,onboardingPanelDescription:a.css`
|
||
text-align: justify;
|
||
text-align: center;
|
||
line-height: 1.66;
|
||
margin-top: 0;
|
||
`,title:a.css`
|
||
margin-bottom: 0.5em;
|
||
line-height: 1.5;
|
||
`,subtitle:a.css`
|
||
margin-bottom: 1em;
|
||
line-height: 1.5;
|
||
font-size: 1.25rem;
|
||
`});function A(){const e=(0,l.useStyles2)(L),{data:t}=G();return u().createElement("div",{"data-testid":"onboarding-modal"},u().createElement("div",{className:e.hero,"data-testid":"hero"},u().createElement("div",{className:e.heroTitles},u().createElement("h1",{className:e.title},"Welcome to Grafana Profiles Drilldown"),u().createElement("h2",{className:e.subtitle},"Optimize infrastructure spend, simplify debugging, and enhance application performance")),u().createElement("img",{src:I,className:e.heroImage})),u().createElement("div",{"data-testid":"what-you-can-do"},u().createElement("h3",null,"What You Can Do"),u().createElement("div",{className:e.onboardingRow},u().createElement("div",{className:e.onboardingPanel},u().createElement("img",{className:e.onboardingPanelImage,src:$}),u().createElement("h3",{className:e.onboardingPanelHeader},"Reduce Costs"),u().createElement("p",{className:e.onboardingPanelDescription},"Spot CPU spikes, memory leaks, and other inefficiencies with code-level visibility into resource usage. Teams can then optimize their code and lower infrastructure costs.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("img",{className:e.onboardingPanelImage,src:k}),u().createElement("h3",{className:e.onboardingPanelHeader},"Decrease Latency"),u().createElement("p",{className:e.onboardingPanelDescription},"Maintain high speed and efficiency and improve application performance. In a competitive digital world, decreasing latency translates to increasing revenue.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("img",{className:e.onboardingPanelImage,src:R}),u().createElement("h3",{className:e.onboardingPanelHeader},"Resolve Incidents Faster"),u().createElement("p",{className:e.onboardingPanelDescription},"Cut down the mean time to resolution (MTTR) by correlating continuous profiling data with metrics, logs, and traces to quickly identify the root cause of any issue.")))),u().createElement("div",{"data-testid":"how-to-get-started"},u().createElement("h3",null,"How to Get Started"),u().createElement("div",{className:e.onboardingRow},t.isCloud?u().createElement(u().Fragment,null,u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:e.onboardingPanelNumber},u().createElement("span",{className:e.onboardingPanelNumberSpan},"1")),u().createElement("h3",{className:e.onboardingPanelHeader},"Add Profiling to Your Application"),u().createElement("p",{className:e.onboardingPanelDescription},"Use"," ",u().createElement(F,{href:"https://grafana.com/docs/pyroscope/latest/configure-client/grafana-alloy/"},"Grafana Alloy")," ","or"," ",u().createElement(F,{href:"https://grafana.com/docs/pyroscope/next/configure-client/language-sdks/"},"Pyroscope SDKs")," ","to push profiles from your applications to Grafana Cloud.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:(0,a.cx)(e.onboardingPanelNumber,e.color2)},u().createElement("span",{className:e.onboardingPanelNumberSpan},"2")),u().createElement("h3",{className:e.onboardingPanelHeader},"Configure Your Applications"),u().createElement("p",{className:e.onboardingPanelDescription},"Go to ",u().createElement(F,{href:t.settingsUrl},"Grafana Cloud Stack settings")," to find your Grafana Cloud Credentials.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:(0,a.cx)(e.onboardingPanelNumber,e.color3)},u().createElement("span",{className:e.onboardingPanelNumberSpan},"3")),u().createElement("h3",{className:e.onboardingPanelHeader},"Start Getting Performance Insights"),u().createElement("p",{className:e.onboardingPanelDescription},"Once you're done with initial setup, refresh this page to see your profiling data."))):u().createElement(u().Fragment,null,u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:e.onboardingPanelNumber},u().createElement("span",{className:e.onboardingPanelNumberSpan},"1")),u().createElement("h3",{className:e.onboardingPanelHeader},"Set Up Your Pyroscope Server"),u().createElement("p",{className:e.onboardingPanelDescription},"Install ",u().createElement(F,{href:"https://grafana.com/docs/pyroscope/latest/"},"Pyroscope Server")," on your infrastructure. Or if you want to use a hosted service, go to"," ",u().createElement(F,{href:t.settingsUrl},"Grafana Cloud Stack settings")," to find your Grafana Cloud Credentials.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:(0,a.cx)(e.onboardingPanelNumber,e.color2)},u().createElement("span",{className:e.onboardingPanelNumberSpan},"2")),u().createElement("h3",{className:e.onboardingPanelHeader},"Configure Grafana"),u().createElement("p",{className:e.onboardingPanelDescription},"Add a new ",u().createElement(F,{href:"/connections/datasources/new"},"Pyroscope datasource"),". Use your Pyroscope server URL and appropriate security credentials if you use Grafana Cloud Profiles.")),u().createElement("div",{className:e.onboardingPanel},u().createElement("div",{className:(0,a.cx)(e.onboardingPanelNumber,e.color3)},u().createElement("span",{className:e.onboardingPanelNumberSpan},"3")),u().createElement("h3",{className:e.onboardingPanelHeader},"Add Profiling to Your Application"),u().createElement("p",{className:e.onboardingPanelDescription},"Use"," ",u().createElement(F,{href:"https://grafana.com/docs/pyroscope/latest/configure-client/grafana-alloy/"},"Grafana Alloy")," ","or"," ",u().createElement(F,{href:"https://grafana.com/docs/pyroscope/next/configure-client/language-sdks/"},"Pyroscope SDKs")," ","to push profiles from your applications to Grafana Cloud."))))),t.isCloud&&u().createElement("div",{"data-testid":"how-billing-works"},u().createElement("h3",null,"How Billing Works"),u().createElement("div",{className:e.onboardingRow},u().createElement("p",{className:e.onboardingParagraph},"Usage of Grafana Cloud Profiles is subject to"," ",u().createElement(F,{href:"https://grafana.com/pricing/"},"Grafana Cloud Pricing")," for Profiles.",u().createElement("br",null),"For additional information, read the announcement ",u().createElement(F,{href:"https://grafana.com/blog/2023/08/09/grafana-cloud-profiles-for-continuous-profiling/"},"blog post"),"."))))}const B=e=>({onboardingPage:a.css`
|
||
padding: 16px;
|
||
margin: 64px;
|
||
position: relative;
|
||
background-color: ${e.colors.background.primary};
|
||
`,closeButton:a.css`
|
||
position: absolute;
|
||
top: -30px;
|
||
opacity: 0.8;
|
||
right: -32px;
|
||
border: none;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
display: block;
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 22px;
|
||
`}),q={text:"Onboarding"};function M({onCloseModal:e}){const t=(0,l.useStyles2)(B);return u().createElement(o.PluginPage,{pageNav:q,layout:r.PageLayoutType.Custom},u().createElement("div",{className:t.onboardingPage},u().createElement("button",{className:t.closeButton,onClick:e,title:"Close","data-testid":"close-onboarding-modal"},"×"),u().createElement(A,null)))}function z({children:e}){const{data:t,actions:n}=y();return t.shouldShowLoadingPage?u().createElement(T,null):t.shouldShowOnboardingPage?u().createElement(M,{onCloseModal:n.closeModal}):t.shouldShowNoDataSourceBanner?u().createElement(D,null):u().createElement(u().Fragment,null,e)}var H=n(1159);function U({onClick:e}){const t=e||(()=>history.back());return u().createElement(l.Button,{variant:"secondary",onClick:t,"aria-label":"Back to Profiles Drilldown"},"Back to Profiles Drilldown")}var W=n(7907);function Y(e){const[t,n]=(0,m.useState)(!1);(0,m.useEffect)((()=>{t||(n(!0),(0,W.r)("g_pyroscope_app_page_initialized",{page:e}))}),[e,t])}const J=e=>({container:a.css`
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: ${e.spacing(1)};
|
||
width: 100%;
|
||
`,column:a.css`
|
||
width: 50%;
|
||
`});function K({left:e,right:t}){const n=(0,l.useStyles2)(J);return u().createElement("div",{className:n.container},u().createElement("div",{className:n.column},e),u().createElement("div",{className:n.column},t))}var Q=n(2673);function V(e,t,n,a,r,o,l){try{var i=e[o](l),c=i.value}catch(e){return void n(e)}i.done?t(c):Promise.resolve(c).then(a,r)}function X(e){return function(){var t=this,n=arguments;return new Promise((function(a,r){var o=e.apply(t,n);function l(e){V(o,a,r,l,i,"next",e)}function i(e){V(o,a,r,l,i,"throw",e)}l(void 0)}))}}class Z extends d.O{get(e,t){var n=this;return X((function*(){const a=yield n.fetch("/adhocprofiles.v1.AdHocProfileService/Get",{method:"POST",body:JSON.stringify({id:e,profile_type:t})}),r=yield a.json();return{id:r.id,name:r.name,profileTypes:r.profileTypes,profile:JSON.parse(r.flamebearerProfile)}}))()}uploadSingle(e){var t=this;return X((function*(){const n=yield t._readProfileFile(e),a=yield t.fetch("/adhocprofiles.v1.AdHocProfileService/Upload",{method:"POST",body:JSON.stringify({name:e.name,profile:n})}),r=yield a.json();return{id:r.id,name:e.name,profileTypes:r.profileTypes,profile:JSON.parse(r.flamebearerProfile)}}))()}uploadDiff(){return X((function*(){return{id:"?",name:"??",profileTypes:[],profile:null}}))()}_readProfileFile(e){return X((function*(){return new Promise(((t,n)=>{const a=new FileReader;a.addEventListener("load",(()=>{try{t(function(e){const[,t]=e.split(";base64,");if(!t)throw new Error("No content after stripping the base64 prefix.");if(e===t)throw new Error("No base64 prefix?!");return t}(a.result))}catch(e){n(e)}})),a.addEventListener("error",(()=>{n(new Error(`Error while reading file "${e.name}"!`))})),a.readAsDataURL(e)}))}))()}}const ee=new Z;function te(e,t,n,a,r,o,l){try{var i=e[o](l),c=i.value}catch(e){return void n(e)}i.done?t(c):Promise.resolve(c).then(a,r)}function ne(e){return function(){var t=this,n=arguments;return new Promise((function(a,r){var o=e.apply(t,n);function l(e){te(o,a,r,l,i,"next",e)}function i(e){te(o,a,r,l,i,"throw",e)}l(void 0)}))}}function ae(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function re(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(t){ae(e,t,n[t])}))}return e}function oe(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const le={id:"",name:"",profileTypes:[],profile:null};function ie(){const[e,t]=(0,m.useState)(!1),[n,a]=(0,m.useState)(le);(0,m.useEffect)((()=>()=>{ee.abort()}),[]);const r=(0,m.useCallback)((()=>{ee.abort(),t(!1),a(le)}),[]),o=(0,m.useCallback)(function(){var e=ne((function*(e){r();try{t(!0);const n=yield ee.uploadSingle(e);a(n)}catch(e){a(le),ee.isAbortError(e)||(0,Q.jx)(e,["Error while uploading profile!",e.message])}t(!1)}));return function(t){return e.apply(this,arguments)}}(),[r]),l=(0,m.useCallback)(function(){var e=ne((function*(e){const r=e.value;if(r&&n.id&&n.profileTypes.includes(r)){ee.abort(),t(!1),a((e=>oe(re({},e),{profile:null}))),t(!0);try{const e=yield ee.get(n.id,r);a((t=>oe(re({},t),{profile:e.profile})))}catch(e){ee.isAbortError(e)||(0,Q.jx)(e,["Error while fetching profile!",e.message])}t(!1)}}));return function(t){return e.apply(this,arguments)}}(),[n.id,n.profileTypes]);return{processFile:o,profileTypes:n.profileTypes,selectProfileType:l,profile:n.profile,removeFile:r,isLoading:e}}function ce(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function se(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(t){ce(e,t,n[t])}))}return e}function me(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const ue={accept:{"application/gzip":[".gz"],"application/json":[".json"],"application/proto":[".pb",".pprof"]},multiple:!1,onError(e){(0,Q.jx)(e,["Error while uploading file!",e.toString()])}};function de({onFileDropped:e,onFileRemove:t}){const n=(0,m.useCallback)((function(t){e(t[0])}),[e]);return u().createElement(l.FileDropzone,{options:me(se({},ue),{onDropAccepted:n}),onFileRemove:t})}var pe=n(8629);const ge=e=>({flamegraph:a.css`
|
||
margin-top: ${e.spacing(2)};
|
||
`});function fe({profile:e,diff:t}){const n=(0,l.useStyles2)(ge);return u().createElement("div",{className:n.flamegraph,"data-testid":"flamegraph"},u().createElement(pe.C,{profile:e,diff:t}))}const be=e=>({selectorContainer:a.css`
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: ${e.spacing(2)};
|
||
`});function ye({profileTypes:e,onChange:t}){const n=(0,l.useStyles2)(be),a=(0,m.useMemo)((()=>e.map((e=>({value:e,label:e})))),[e]),[r,o]=(0,m.useState)(),i=(0,m.useCallback)((e=>{o(e),t(e)}),[t]);return(0,m.useEffect)((()=>{o(a[0])}),[a]),u().createElement("div",{className:n.selectorContainer},u().createElement(l.InlineFieldRow,null,u().createElement(l.InlineField,{label:"Profile",disabled:!a.length,"data-testid":"profile-types-dropdown"},u().createElement(l.Select,{key:null==r?void 0:r.value,value:r,options:a,onChange:i,width:16}))))}const he=e=>({spinner:a.css`
|
||
text-align: center;
|
||
margin-top: ${e.spacing(2)};
|
||
`});function Ee(){const e=(0,l.useStyles2)(he);return u().createElement("div",{className:e.spinner},u().createElement(l.Spinner,{size:36}))}function ve(){const{processFile:e,profileTypes:t,selectProfileType:n,profile:a,removeFile:r,isLoading:o}=ie();return u().createElement("div",null,u().createElement(ye,{profileTypes:t,onChange:e=>{(0,W.r)("g_pyroscope_app_ad_hoc_profile_metric_selected"),n(e)}}),u().createElement(de,{onFileDropped:t=>{(0,W.r)("g_pyroscope_app_ad_hoc_file_dropped",{fileType:t.type}),e(t)},onFileRemove:()=>{(0,W.r)("g_pyroscope_app_ad_hoc_file_removed"),r()}}),o&&!a?u().createElement(Ee,null):null,a&&u().createElement(fe,{profile:a}))}const Pe=(0,m.memo)(ve);function we(){return u().createElement(K,{left:u().createElement(Pe,null),right:u().createElement(Pe,null)})}const Ne=e=>({tabContent:a.css`
|
||
padding: ${e.spacing(2)};
|
||
margin: ${e.spacing(2)};
|
||
`});function Se(){const e=(0,l.useStyles2)(Ne),[t,n]=(0,m.useState)(0);return u().createElement("div",null,u().createElement(l.TabsBar,null,u().createElement(l.Tab,{label:" Single view",active:0===t,onChangeTab:()=>n(0)}),u().createElement(l.Tab,{label:" Comparison view",active:1===t,onChangeTab:()=>n(1)})),u().createElement(l.TabContent,{className:e.tabContent},0===t&&u().createElement(Pe,null),1===t&&u().createElement(we,null)))}function Oe(){return Y("ad_hoc"),u().createElement(u().Fragment,null,u().createElement(C,{title:"Ad hoc view"}),u().createElement(Se,null),u().createElement(U,null))}const xe=e=>({loadingIcon:a.css`
|
||
color: ${e.colors.primary.main};
|
||
font-size: 48px;
|
||
margin-bottom: ${e.spacing(2)};
|
||
display: flex;
|
||
justify-content: center;
|
||
`,loadingMessage:a.css`
|
||
text-align: center;
|
||
font-size: ${e.typography.h4.fontSize};
|
||
margin-bottom: ${e.spacing(2)};
|
||
`,fullScreenModal:a.css`
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
max-width: none !important;
|
||
max-height: none !important;
|
||
margin: 0 !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
bottom: 0 !important;
|
||
`});function Ce(){const e=(0,l.useStyles2)(xe),[t,n]=(0,m.useState)(!0);return u().createElement(l.Modal,{title:"GitHub Login",isOpen:t,onDismiss:()=>{n(!1),window.close()},closeOnEscape:!0,closeOnBackdropClick:!0,className:e.fullScreenModal},u().createElement("div",{className:e.loadingMessage},u().createElement("div",{className:e.loadingIcon},u().createElement(l.Spinner,{size:"xl"})),u().createElement("p",null,"Logging in to GitHub...")))}var Te=n(9869),je=n(9838);function Fe(){const e=(0,m.useMemo)((()=>new je.a({})),[]);return Y("explore"),u().createElement(Te.$L,{scene:e,updateUrlOnInit:!1,createBrowserHistorySteps:!0},u().createElement(e.Component,{model:e}))}var De=n(6415),ke=n(4386);function Ie({rule:e,confirm:t}){const[n,a]=u().useState(!1);return u().createElement(u().Fragment,null,u().createElement(l.IconButton,{name:"trash-alt",onClick:()=>a(!0),variant:"destructive","aria-label":"Delete recording rule"}),u().createElement(l.ConfirmModal,{isOpen:n,title:"Delete recording rule",body:`Are you sure you want to delete ${e.metricName} recording rule?`,confirmText:"Yes",onConfirm:()=>{t(),a(!1)},onDismiss:()=>a(!1)}))}var $e=n(4002);function Re(e,t,n,a,r,o,l){try{var i=e[o](l),c=i.value}catch(e){return void n(e)}i.done?t(c):Promise.resolve(c).then(a,r)}function _e(){const{recordingRules:e,error:t,remove:n,isFetching:a}=(0,$e.e)();return{data:{recordingRules:e,fetchError:t,isFetching:a},actions:{removeRecordingRule(e){return(t=function*(){try{yield n(e),(0,Q.qq)([`Recording rule ${e.metricName} deleted!`])}catch(t){(0,Q.jx)(t,[`Failed to delete recording rule ${e.metricName}.`])}},function(){var e=this,n=arguments;return new Promise((function(a,r){var o=t.apply(e,n);function l(e){Re(o,a,r,l,i,"next",e)}function i(e){Re(o,a,r,l,i,"throw",e)}l(void 0)}))})();var t}}}}function Ge(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Le(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const Ae=e=>{const{matchers:t,readonly:n}=e;let r=[];t.forEach((e=>{const t=(0,De.m)(e);r=[...r,...t.labels.filter((e=>!e.trim().match(/^__profile_type__/)))]}));let o=u().createElement("span",null,"No labels");return 0!==r.length&&(o=u().createElement("span",{className:(0,a.css)({fontFamily:"monospace"})},r.join(", "))),u().createElement("div",null,u().createElement("dl",null,u().createElement("dt",null,"Filters"),u().createElement("dd",null,o),u().createElement("dt",null,"Read only"),u().createElement("dd",null,n?"Yes":"No")))};function Be(){const e=(0,l.useStyles2)(qe),{data:t,actions:n}=_e(),{recordingRules:r}=t;if(t.isFetching)return u().createElement(T,null);const o=[{id:"metricName",header:"Name",sortType:"alphanumeric"},{id:"serviceName",header:"Service Name",sortType:"alphanumeric",cell:e=>e.row.original.serviceName||u().createElement(l.Text,{element:"span",color:"secondary"},"All services")},{id:"profileType",header:"Profile Type",sortType:"alphanumeric"},{id:"functionName",header:"Function Name",sortType:"alphanumeric",cell:e=>e.row.original.functionName||u().createElement(l.Text,{element:"span",color:"secondary"},"Total (all functions)")},{id:"groupBy",header:"Labels",cell:t=>{var n;const a=null===(n=t.row.original.groupBy)||void 0===n?void 0:n.filter((e=>!e.match(/^__\S+__$/)));return a&&0!==a.length?u().createElement(l.TagList,{className:e.tagList,displayMax:4,tags:a}):u().createElement(l.Text,{element:"span",color:"secondary"},"None")}},{id:"actions",header:"Actions",disableGrow:!0,cell:e=>{const t=e.row.original;return t.readonly?u().createElement(l.Tooltip,{content:"This rule is provisioned with tenant settings and cannot be deleted."},u().createElement(l.Icon,{name:"info-circle"})):u().createElement(Ie,{rule:t,confirm:()=>n.removeRecordingRule(t)})}}],i=(r||[]).map((e=>{const t=(0,ke.y)(e.profileType);return Le(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(t){Ge(e,t,n[t])}))}return e}({},e),{profileType:`${t.group}/${t.type}`})})),c=!i||0===i.length;let s=null;return s=t.fetchError?u().createElement(Me,{error:t.fetchError}):c?u().createElement(l.EmptyState,{message:"No recording rules",variant:"not-found",button:u().createElement(U,null)},'Open a flame graph, click on the "total" block at the top and select "Create recording rule" from the context menu to define a new rule.'):u().createElement("div",null,u().createElement(l.InteractiveTable,{className:(0,a.css)({marginBottom:"32px"}),columns:o,pageSize:10,data:i||[],getRowId:e=>e.id,renderExpandedRow:Ae}),u().createElement(U,null)),u().createElement(u().Fragment,null,u().createElement(C,{title:"Recording rules"}),s)}const qe=()=>({tagList:a.css`
|
||
flex-direction: row;
|
||
justify-content: start;
|
||
`});function Me({error:e}){var t;let n="Error while retrieving recording rules";return 404===(null===(t=e.response)||void 0===t?void 0:t.status)?n="This feature requires Pyroscope with recording_rules flag enabled.":e.message&&(n=e.message),u().createElement(l.EmptyState,{message:"Error while retrieving recording rules",variant:"not-found",button:u().createElement(U,null)},n)}var ze=n(1835),He=n(9993),Ue=n(9326),We=n(8873);function Ye(e,t,n,a,r,o,l){try{var i=e[o](l),c=i.value}catch(e){return void n(e)}i.done?t(c):Promise.resolve(c).then(a,r)}function Je(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ke(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(t){Je(e,t,n[t])}))}return e}function Qe(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function Ve(){const{settings:e,error:t,mutate:n}=(0,We._)(),a=(0,He.I)()[1],[r,o]=(0,m.useState)(null!=e?e:Ue.a);return(0,m.useEffect)((()=>{e&&o(e)}),[e]),{data:Qe(Ke({},r),{fetchError:t}),actions:{toggleCollapsedFlamegraphs(){o((e=>Qe(Ke({},e),{collapsedFlamegraphs:!e.collapsedFlamegraphs})))},updateMaxNodes(e){o((t=>Qe(Ke({},t),{maxNodes:Number(e.target.value)})))},toggleEnableFlameGraphDotComExport(){o((e=>Qe(Ke({},e),{enableFlameGraphDotComExport:!e.enableFlameGraphDotComExport})))},toggleEnableFunctionDetails(){o((e=>Qe(Ke({},e),{enableFunctionDetails:!e.enableFunctionDetails})))},toggleEnableMetricsFromProfiles(){o((e=>Qe(Ke({},e),{enableMetricsFromProfiles:!e.enableMetricsFromProfiles})))},saveSettings(){return(e=function*(){a(r.maxNodes);try{yield n(r),(0,Q.qq)(["Plugin settings successfully saved!"])}catch(e){(0,Q.jx)(e,["Error while saving the plugin settings!","Please try again later, sorry for the inconvenience."])}},function(){var t=this,n=arguments;return new Promise((function(a,r){var o=e.apply(t,n);function l(e){Ye(o,a,r,l,i,"next",e)}function i(e){Ye(o,a,r,l,i,"throw",e)}l(void 0)}))})();var e}}}}function Xe({children:e}){const t=(0,l.useStyles2)(Ze),{data:n,actions:r}=Ve();return n.fetchError&&(0,Q.jx)(n.fetchError,["Error while retrieving the plugin settings!","Please try to reload the page, sorry for the inconvenience."]),u().createElement("form",{className:t.settingsForm,onSubmit:function(e){e.preventDefault(),r.saveSettings()}},u().createElement(l.FieldSet,{label:"Flame graph","data-testid":"flamegraph-settings"},u().createElement(l.InlineFieldRow,null,u().createElement(l.InlineField,{label:"Collapsed flame graphs",labelWidth:24},u().createElement(l.InlineSwitch,{label:"Toggle collapsed flame graphs",name:"collapsed-flamegraphs",value:n.collapsedFlamegraphs,onChange:r.toggleCollapsedFlamegraphs}))),u().createElement(l.InlineFieldRow,null,u().createElement(l.InlineField,{label:"Maximum number of nodes",tooltip:"",labelWidth:24},u().createElement(l.Input,{name:"max-nodes",type:"number",min:"1",value:n.maxNodes,onChange:r.updateMaxNodes})))),u().createElement(l.FieldSet,{label:"Function details","data-testid":"function-details-settings"},u().createElement(l.InlineFieldRow,null,u().createElement(l.InlineField,{label:"Enable function details",labelWidth:24,tooltip:u().createElement("div",{className:t.tooltip},u().createElement("p",null,"The function details feature enables mapping of resource usage to lines of source code. If the GitHub integration is configured, then the source code will be downloaded from GitHub."),u().createElement("p",null,u().createElement("a",{href:"https://grafana.com/docs/grafana-cloud/monitor-applications/profiles/pyroscope-github-integration/",target:"_blank",rel:"noreferrer noopener"},"Learn more"))),interactive:!0},u().createElement(l.InlineSwitch,{label:"Toggle function details",name:"function-details-feature",value:n.enableFunctionDetails,onChange:r.toggleEnableFunctionDetails})))),ze.g.metricsFromProfiles&&u().createElement(l.FieldSet,{label:"Metrics from profiles","data-testid":"metrics-from-profiles"},u().createElement(l.Alert,{severity:"info",title:"",className:(0,a.css)({maxWidth:"1000px"})},n.enableMetricsFromProfiles?u().createElement(u().Fragment,null,u().createElement("p",null,"Disabling this feature only hides it from the UI. No existing recording rules are removed. These rules will remain active and continue to export metrics, which will still impact your bill."),u().createElement("p",null,"To stop exporting data, delete all related recording rules before disabling this feature.")):u().createElement("p",null,"Enabling this feature lets you define recording rules from Profiles Drilldown. Any recording rules you create will send new metrics to your Grafana Cloud instance, increasing your data usage in Grafana Mimir and potentially affecting your bill.")),u().createElement(l.InlineFieldRow,null,u().createElement(l.InlineField,{label:"Enable metrics from profiles",tooltip:"Allows creating recording rules from profiles",labelWidth:30},u().createElement(l.InlineSwitch,{label:"Enable metrics from profiles",name:"metrics-from-profiles",value:n.enableMetricsFromProfiles,onChange:r.toggleEnableMetricsFromProfiles})))),e)}const Ze=e=>({settingsForm:a.css`
|
||
& > fieldset {
|
||
border: 0 none;
|
||
border-bottom: 1px solid ${e.colors.border.weak};
|
||
padding-left: 0;
|
||
}
|
||
|
||
& > fieldset > legend {
|
||
font-size: ${e.typography.h4.fontSize};
|
||
}
|
||
`,buttons:a.css`
|
||
display: flex;
|
||
gap: ${e.spacing(1)};
|
||
margin-top: ${e.spacing(3)};
|
||
`,tooltip:a.css`
|
||
p {
|
||
margin: ${e.spacing(1)};
|
||
}
|
||
|
||
a {
|
||
color: ${e.colors.text.link};
|
||
}
|
||
|
||
em {
|
||
font-style: normal;
|
||
font-weight: ${e.typography.fontWeightBold};
|
||
}
|
||
`}),et="grafana-pyroscope-app/settings/v1";function tt(){var e;const[t]=(0,He.I)(),[n,a]=(0,m.useState)(0),r=(0,H.useNavigate)(),l=(0,H.useLocation)(),i=(0,m.useRef)(null===(e=l.state)||void 0===e?void 0:e.referrer),{components:c,isLoading:s}=(0,o.usePluginComponents)({extensionPointId:et});return{data:{activeTab:n,components:c,isLoading:s},actions:{setActiveTab(e){a(e)},goBack(){if(!i.current)return void r(`${_.Gy}${_.bw.EXPLORE}`);const e=new URL(i.current);t&&e.searchParams.set("maxNodes",String(t)),r(`${e.pathname}${e.search}`)}}}}function nt(){const e=(0,l.useStyles2)(at),{data:t,actions:n}=tt();if(Y("settings"),t.isLoading)return u().createElement("div",null,"Loading...");const a=[{title:"UI Settings",content:u().createElement(Xe,null,u().createElement("div",{className:e.buttons},u().createElement(l.Button,{variant:"primary",type:"submit"},"Save settings"),u().createElement(U,{onClick:n.goBack})))}],r={datasourceUid:d.O.selectDefaultDataSource().uid,backButton:u().createElement("div",{className:e.buttons},u().createElement(U,{onClick:n.goBack}))},o=[...a,...t.components.map((e=>{var t;return{title:(null===(t=e.meta)||void 0===t?void 0:t.title)||"Unknown Extension",content:u().createElement(e,r)}}))];return u().createElement(u().Fragment,null,u().createElement(C,{title:"Profiles settings (tenant)"}),o.length>1&&u().createElement(u().Fragment,null,u().createElement(l.TabsBar,null,o.map(((e,a)=>u().createElement(l.Tab,{key:`settings-tab-${a}`,label:e.title,active:t.activeTab===a,onChangeTab:()=>n.setActiveTab(a)})))),u().createElement(l.Space,{v:2})),o[t.activeTab].content)}const at=e=>({buttons:a.css`
|
||
display: flex;
|
||
gap: ${e.spacing(1)};
|
||
margin-top: ${e.spacing(3)};
|
||
`});function rt(){return u().createElement(H.Routes,null,u().createElement(H.Route,{path:_.bw.EXPLORE,element:u().createElement(Fe,null)}),u().createElement(H.Route,{path:_.bw.ADHOC,element:u().createElement(Oe,null)}),u().createElement(H.Route,{path:_.bw.SETTINGS,element:u().createElement(nt,null)}),u().createElement(H.Route,{path:_.bw.RECORDING_RULES,element:u().createElement(Be,null)}),u().createElement(H.Route,{path:_.bw.GITHUB_CALLBACK,element:u().createElement(Ce,null)}),u().createElement(H.Route,{path:"/*",element:u().createElement(H.Navigate,{to:`${_.Gy}${_.bw.EXPLORE}`,replace:!0})}))}var ot=n(8536);function lt({error:e}){return u().createElement(o.PluginPage,{layout:r.PageLayoutType.Canvas},u().createElement("div",{className:"pyroscope-app"},u().createElement(C,{title:"Grafana Profiles Drilldown"}),u().createElement(ot._,{severity:"error",title:"Fatal error!",message:"Please try reloading the page or, if the problem persists, contact your organization admin. Sorry for the inconvenience.",error:e,errorContext:{handheldBy:"React error boundary"}})))}function it(){const e=(0,l.useStyles2)(ct),[t,n]=(0,m.useState)();return t?u().createElement(lt,{error:t}):u().createElement(l.ErrorBoundary,{onError:n},(()=>u().createElement(s.Ht,{client:i.q},u().createElement(z,null,u().createElement("div",{className:e.pageContainer},u().createElement(o.PluginPage,{layout:r.PageLayoutType.Custom},u().createElement("div",{className:"pyroscope-app"},u().createElement(rt,null))))))))}(0,c.Js)();const ct=e=>({pageContainer:a.css`
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: ${e.spacing(1)} ${e.spacing(2)} ${e.spacing(2)} ${e.spacing(2)};
|
||
flex-basis: 100%;
|
||
flex-grow: 1;
|
||
`})}}]);
|
||
//# sourceMappingURL=580.js.map?_cache=ddddfc2cf4ae953aae6c
|