unleash-server
Version:
Unleash is an enterprise ready feature flag service. It provides different strategies for handling feature flags.
3 lines (2 loc) • 6.67 kB
JavaScript
import{bs as E,k$ as M,db as F,aO as k,r as p,j as r,B as w,l0 as D,br as A,s as g,b as y,T as P,l1 as j,bp as I,G as B,dr as O,ds as T,dt as L,l2 as N,l3 as R,l4 as $,l5 as H}from"./index-Cikp5fMR.js";import{f as V,a as W}from"./formatTickValue-BxmGFWwJ.js";import{F as U,c as _,u as G,b as Y}from"./aggregateFeatureMetrics-CAg4DbsF.js";import{F as z,M as J}from"./MarkCompletedDialogue-C86IfCH-.js";const q=(e,t)=>{const a={label:"Exposed",hoverBackgroundColor:e.palette.charts.flagMetrics.exposed,backgroundColor:e.palette.charts.flagMetrics.exposed,data:S(t,s=>s.yes)},n={label:"Not exposed",hoverBackgroundColor:e.palette.charts.flagMetrics.notExposed,backgroundColor:e.palette.charts.flagMetrics.notExposed,data:S(t,s=>s.no)};return{datasets:[a,n]}},S=(e,t)=>e.map(a=>({x:a.timestamp,y:t(a),variants:a.variants||{}})),K=(e,t)=>{if(t===0)return"";const[a,n]=e,s=Math.floor(Number(n)/t*100);return`${n} (${s}%) - ${a}`},C=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}}),Q=(e,t,a)=>{var m;const{responsive:n,elements:s,interaction:c,scales:o,maintainAspectRatio:l}=C(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:i=>`${i.formattedValue} - ${i.dataset.label}`,afterLabel:i=>{const d=i.dataset.data[i.dataIndex];if(i.dataset.label!=="Exposed"||d.variants===void 0)return"";const{disabled:f,...u}=d.variants;return Object.entries(u).map(b=>K(b,d.y)).join(`
`)},title:i=>`Time: ${t>48?F(i[0].label,a.locale,"UTC"):M(i[0].label,a.locale)}`}}},responsive:n,maintainAspectRatio:l,scales:{x:{...o?o.x:{},ticks:{color:e.palette.text.secondary,callback(i){const d=this.getLabelForValue(Number(i));return t>48?E(d,a.locale,"UTC"):M(d,a.locale)}}},y:{...(o==null?void 0:o.y)??{},ticks:{...((m=o==null?void 0:o.y)==null?void 0:m.ticks)??{},color:e.palette.text.secondary,callback:V,display:!0}}},elements:s,interaction:c}},X=({project:e,flagName:t,onArchive:a,className:n})=>{var f;const{feature:s,refetchFeature:c}=k(e,t),o=(f=s.environments)==null?void 0:f.map(u=>({name:u.name,lastSeenAt:u.lastSeenAt,enabled:u.enabled,yes:u.yes,no:u.no})),[l,m]=p.useState(!1),[i,d]=p.useState(!1);return r.jsxs(w,{sx:{display:"flex"},className:n,children:[r.jsx(D,{sx:{pt:0,pb:0},featureLastSeen:s.lastSeenAt,environments:o}),r.jsx(A,{feature:s,onArchive:()=>m(!0),onComplete:()=>d(!0),onUncomplete:c}),s.children.length>0?r.jsx(U,{features:s.children,project:e,isOpen:l,onClose:()=>m(!1)}):r.jsx(z,{isOpen:l,onConfirm:a,onClose:()=>m(!1),projectId:e,featureIds:[t]}),s.project?r.jsx(J,{isOpen:i,setIsOpen:d,projectId:s.project,featureId:s.name,onComplete:c}):null]})},Z=[0,14,28,21,33,31,31,22,26,37,31,14,21,14,0],ee=e=>({labels:Array.from({length:15},(t,a)=>a+1),datasets:[{data:Z,backgroundColor:e.palette.divider,hoverBackgroundColor:e.palette.divider,label:""}]}),v=g("div")({width:"100%",flexGrow:1}),x=({label:e})=>{const t=y(),a=p.useMemo(()=>C(t),[t]),n=p.useMemo(()=>ee(t),[t]),s="placeholder-chart-label";return r.jsxs(r.Fragment,{children:[r.jsx(P,{id:s,children:e}),r.jsx(v,{children:r.jsx(j,{data:n,options:a,"aria-describedby":s})})]})},te=()=>{const e=y(),t=p.useMemo(()=>C(e),[e]),a=p.useMemo(()=>({labels:[],datasets:[]}),[e]);return r.jsx(v,{children:r.jsx(j,{data:a,options:t,"aria-label":"A placeholder bar chart with a single feature flag exposure metrics"})})},ae=(e,t)=>{const[a,n]=p.useState(null),{feature:s}=k(e,t),c=((s==null?void 0:s.environments)??[]).map(l=>({name:l.name,type:l.type})),o=c.find(l=>l.type==="production");return p.useEffect(()=>{o?n(o.name):c.length>0&&n(c[0].name)},[t,JSON.stringify(c)]),{environment:a,setEnvironment:n,activeEnvironments:c}},re=(e,t,a)=>{const n=y(),{featureMetrics:s=[],loading:c,error:o}=G(e,a),l=p.useMemo(()=>[...s].sort((u,b)=>u.timestamp.localeCompare(b.timestamp)),[s]),m=p.useMemo(()=>Y(l==null?void 0:l.filter(u=>t===u.environment)).map(u=>({...u,appName:"all selected"})),[l,t]),i=p.useMemo(()=>q(n,m),[n,m]),{locationSettings:d}=I(),f=p.useMemo(()=>Q(n,a,d),[n,a,d]);return{data:i,options:f,loading:c,error:o}},se=({activeEnvironments:e,environment:t,setEnvironment:a})=>r.jsx(B,{name:"feature-environments",label:"Environment",id:"feature-environments",options:e.map(n=>({key:n.name,label:n.name})),value:String(t),onChange:a}),ne=g(w)(({theme:e})=>({display:"flex",justifyContent:"flex-start",flexFlow:"row wrap",gap:e.spacing(2)})),h=g("div")(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(3),alignItems:"center",height:"100%",justifyContent:"space-between"})),oe=g(X)({alignItems:"center",justifySelf:"start"}),le=g("div")(({theme:e})=>({display:"flex",justifyContent:"space-between",flexFlow:"row wrap",width:"100%",gap:e.spacing(4)})),me=e=>r.jsx(h,{children:r.jsx(x,{...e})}),ie=({flag:e,onArchive:t})=>{const[a,n]=p.useState(48),{environment:s,setEnvironment:c,activeEnvironments:o}=ae(e.project,e.name),{data:l,options:m,loading:i,error:d}=re(e.name,s,a);if(d)return r.jsx(h,{children:r.jsx(x,{label:"Couldn't fetch metrics for the current flag right now. Please try again. Report this if it doesn't resolve itself."})});const f=l.datasets[0].data.length===0;return r.jsxs(h,{children:[r.jsxs(le,{children:[r.jsx(oe,{project:e.project,flagName:e.name,onArchive:t}),r.jsxs(ne,{children:[s?r.jsx(se,{environment:s,setEnvironment:c,activeEnvironments:o}):null,r.jsx(_,{hoursBack:a,setHoursBack:n})]})]}),i?r.jsx(te,{}):f?r.jsx(x,{label:"No metrics for this feature flag in the selected environment and time period"}):r.jsx(v,{children:r.jsx(j,{data:l,options:m,"aria-label":"A bar chart with a single feature flag exposure metrics"})})]})},fe=e=>[".",".."].includes(e.flag.name)?r.jsx(h,{children:r.jsx(x,{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.`})}):r.jsx(ie,{...e});O.register(W,T,L,N,R,$,H);export{fe as FlagMetricsChart,me as PlaceholderFlagMetricsChartWithWrapper};