unleash-server
Version:
Unleash is an enterprise ready feature flag service. It provides different strategies for handling feature flags.
2 lines • 6.79 kB
JavaScript
import{n as e,s as t,t as n}from"./jsx-runtime-ButemYzH.js";import{_ as r,a as i,g as a,h as o,i as s,o as c,u as l}from"./chart-BMc0j_v5.js";import{Cd as u,Cs as d,Ua as f,Xs as p,Xu as m,bc as h,do as g,jt as _,rd as v,vs as y,xc as b,xd as x,yc as S}from"./index-B0RbDPtk.js";import{t as C}from"./chartjs-plugin-annotation.esm-CII-nIyK.js";import{t as w}from"./formatTickValue-DHdXPo89.js";import{i as T,t as E}from"./MarkCompletedDialogue-x4B5vgpn.js";import{i as D,n as O,r as k,t as A}from"./aggregateFeatureMetrics-B--WhUm6.js";var j=t(e()),M=(e,t)=>({datasets:[{label:`Enabled`,hoverBackgroundColor:e.palette.charts.flagMetrics.enabled,backgroundColor:e.palette.charts.flagMetrics.enabled,data:N(t,e=>e.yes)},{label:`Not enabled`,hoverBackgroundColor:e.palette.charts.flagMetrics.notEnabled,backgroundColor:e.palette.charts.flagMetrics.notEnabled,data:N(t,e=>e.no)}]}),N=(e,t)=>e.map(e=>({x:e.timestamp,y:t(e),variants:e.variants||{}})),P=(e,t)=>{if(t===0)return``;let[n,r]=e;return`${r} (${Math.floor(Number(r)/t*100)}%) - ${n}`},F=e=>({plugins:{legend:{position:`top`,labels:{color:e.palette.text.primary,usePointStyle:!0,pointStyle:`none`,boxHeight:0,padding:15,boxPadding:5}},tooltip:{enabled:!1}},responsive:!0,maintainAspectRatio:!1,scales:{x:{stacked:!0,ticks:{display:!1},grid:{display:!1}},y:{stacked:!0,ticks:{maxTicksLimit:5,display:!1},grid:{drawBorder:!1,color:e.palette.divider}}},elements:{bar:{borderRadius:5}},interaction:{mode:`index`,intersect:!1}}),I=(e,t,n)=>{let{responsive:r,elements:i,interaction:a,scales:o,maintainAspectRatio:s}=F(e);return{plugins:{legend:{position:`bottom`,labels:{color:e.palette.text.primary,pointStyle:`circle`,usePointStyle:!0,boxHeight:6,padding:15,boxPadding:5}},annotation:{clip:!1,annotations:{}},tooltip:{backgroundColor:e.palette.background.paper,titleColor:e.palette.text.primary,bodyColor:e.palette.text.primary,bodySpacing:6,padding:{top:20,bottom:20,left:30,right:30},borderColor:`rgba(0, 0, 0, 0.05)`,borderWidth:3,usePointStyle:!0,caretSize:0,boxPadding:10,callbacks:{label:e=>`${e.formattedValue} - ${e.dataset.label}`,afterLabel:e=>{let t=e.dataset.data[e.dataIndex];if(e.dataset.label!==`Enabled`||t.variants===void 0)return``;let{disabled:n,...r}=t.variants;return Object.entries(r).map(e=>P(e,t.y)).join(`
`)},title:e=>`Time: ${t>48?b(e[0].label,n.locale,`UTC`):S(e[0].label,n.locale)}`}}},responsive:r,maintainAspectRatio:s,scales:{x:{...o?o.x:{},ticks:{color:e.palette.text.secondary,callback(e){let r=this.getLabelForValue(Number(e));return t>48?h(r,n.locale,`UTC`):S(r,n.locale)}}},y:{...o?.y??{},ticks:{...o?.y?.ticks??{},color:e.palette.text.secondary,callback:w,display:!0}}},elements:i,interaction:a}},L=n(),R=({project:e,flagName:t,onArchive:n,className:r})=>{let{feature:i,refetchFeature:a}=f(e,t),o=i.environments?.map(e=>({name:e.name,lastSeenAt:e.lastSeenAt,enabled:e.enabled,yes:e.yes,no:e.no})),[s,c]=(0,j.useState)(!1),[l,u]=(0,j.useState)(!1);return(0,L.jsxs)(m,{sx:{display:`flex`},className:r,children:[(0,L.jsx)(y,{sx:{pt:0,pb:0},featureLastSeen:i.lastSeenAt,environments:o}),(0,L.jsx)(g,{feature:i,onArchive:()=>c(!0),onComplete:()=>u(!0),onUncomplete:a}),i.children.length>0?(0,L.jsx)(D,{features:i.children,project:e,isOpen:s,onClose:()=>c(!1)}):(0,L.jsx)(T,{isOpen:s,onConfirm:n,onClose:()=>c(!1),projectId:e,featureIds:[t]}),i.project?(0,L.jsx)(E,{isOpen:l,setIsOpen:u,projectId:i.project,featureId:i.name,onComplete:a}):null]})},z=[0,14,28,21,33,31,31,22,26,37,31,14,21,14,0],B=e=>({labels:Array.from({length:15},(e,t)=>t+1),datasets:[{data:z,backgroundColor:e.palette.divider,hoverBackgroundColor:e.palette.divider,label:``}]}),V=x(`div`)({width:`100%`,flexGrow:1}),H=({label:e})=>{let t=u(),n=(0,j.useMemo)(()=>F(t),[t]),r=(0,j.useMemo)(()=>B(t),[t]),i=`placeholder-chart-label`;return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(v,{id:i,children:e}),(0,L.jsx)(V,{children:(0,L.jsx)(_,{data:r,options:n,"aria-describedby":i})})]})},U=()=>{let e=u(),t=(0,j.useMemo)(()=>F(e),[e]);return(0,L.jsx)(V,{children:(0,L.jsx)(_,{data:(0,j.useMemo)(()=>({labels:[],datasets:[]}),[e]),options:t,"aria-label":`A placeholder bar chart with a single feature flag exposure metrics`})})},W=(e,t)=>{let[n,r]=(0,j.useState)(null),{feature:i}=f(e,t),a=(i?.environments??[]).map(e=>({name:e.name,type:e.type})),o=a.find(e=>e.type===`production`);return(0,j.useEffect)(()=>{o?r(o.name):a.length>0&&r(a[0].name)},[t,JSON.stringify(a)]),{environment:n,setEnvironment:r,activeEnvironments:a}},G=(e,t,n)=>{let r=u(),{featureMetrics:i=[],loading:a,error:o}=k(e,n),s=(0,j.useMemo)(()=>[...i].sort((e,t)=>e.timestamp.localeCompare(t.timestamp)),[i]),c=(0,j.useMemo)(()=>A(s?.filter(e=>t===e.environment)).map(e=>({...e,appName:`all selected`})),[s,t]),l=(0,j.useMemo)(()=>M(r,c),[r,c]),{locationSettings:d}=p();return{data:l,options:(0,j.useMemo)(()=>I(r,n,d),[r,n,d]),loading:a,error:o}},K=({activeEnvironments:e,environment:t,setEnvironment:n})=>(0,L.jsx)(d,{name:`feature-environments`,label:`Environment`,id:`feature-environments`,options:e.map(e=>({key:e.name,label:e.name})),value:String(t),onChange:n}),q=x(m)(({theme:e})=>({display:`flex`,justifyContent:`flex-start`,flexFlow:`row wrap`,gap:e.spacing(2)})),J=x(`div`)(({theme:e})=>({display:`flex`,flexDirection:`column`,gap:e.spacing(3),alignItems:`center`,height:`100%`,justifyContent:`space-between`})),Y=x(R)({alignItems:`center`,justifySelf:`start`}),X=x(`div`)(({theme:e})=>({display:`flex`,justifyContent:`space-between`,flexFlow:`row wrap`,width:`100%`,gap:e.spacing(4)})),Z=e=>(0,L.jsx)(J,{children:(0,L.jsx)(H,{...e})}),Q=({flag:e,onArchive:t})=>{let[n,r]=(0,j.useState)(48),{environment:i,setEnvironment:a,activeEnvironments:o}=W(e.project,e.name),{data:s,options:c,loading:l,error:u}=G(e.name,i,n);if(u)return(0,L.jsx)(J,{children:(0,L.jsx)(H,{label:`Couldn't fetch metrics for the current flag right now. Please try again. Report this if it doesn't resolve itself.`})});let d=s.datasets[0].data.length===0;return(0,L.jsxs)(J,{children:[(0,L.jsxs)(X,{children:[(0,L.jsx)(Y,{project:e.project,flagName:e.name,onArchive:t}),(0,L.jsxs)(q,{children:[i?(0,L.jsx)(K,{environment:i,setEnvironment:a,activeEnvironments:o}):null,(0,L.jsx)(O,{hoursBack:n,setHoursBack:r})]})]}),l?(0,L.jsx)(U,{}):d?(0,L.jsx)(H,{label:`No metrics for this feature flag in the selected environment and time period`}):(0,L.jsx)(V,{children:(0,L.jsx)(_,{data:s,options:c,"aria-label":`A bar chart with a single feature flag exposure metrics`})})]})},$=e=>[`.`,`..`].includes(e.flag.name)?(0,L.jsx)(J,{children:(0,L.jsx)(H,{label:`The current flag name ('${e.flag.name}') is known to cause issues due how it affects URLs. We cannot show you a chart for it.`})}):(0,L.jsx)(Q,{...e});c.register(C,i,l,s,a,r,o);export{$ as FlagMetricsChart,Z as PlaceholderFlagMetricsChartWithWrapper};