unleash-server
Version:
Unleash is an enterprise ready feature flag service. It provides different strategies for handling feature flags.
3 lines (2 loc) • 6.58 kB
JavaScript
import{dh as w,iP as F,bD as D,a_ as S,r as p,j as r,B as k,cP as E,bC as A,s as g,iQ as P,iR as B,iS as I,iT as T,iU as R,iV as L,iW as N,b as y,T as O,bz as $,b0 as H}from"./index-DEkgmbaI.js";import{f as V,a as W}from"./formatTickValue-rCxDfz30.js";import{B as j}from"./index-ZiL5S4gH.js";import{F as U,c as _,u as Y,b as z}from"./aggregateFeatureMetrics-v3jEzw5e.js";import{F as G,M as J}from"./MarkCompletedDialogue-3-FrccPG.js";const Q=e=>{const t={label:"Exposed",hoverBackgroundColor:"#A39EFF",backgroundColor:"#A39EFF",data:M(e,s=>s.yes)},a={label:"Not exposed",hoverBackgroundColor:"#D8D6FF",backgroundColor:"#D8D6FF",data:M(e,s=>s.no)};return{datasets:[t,a]}},M=(e,t)=>e.map(a=>({x:a.timestamp,y:t(a),variants:a.variants||{}})),q=(e,t)=>{if(t===0)return"";const[a,s]=e,n=Math.floor(Number(s)/t*100);return`${s} (${n}%) - ${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}}),K=(e,t,a)=>{var m;const{responsive:s,elements:n,interaction:c,scales:o,maintainAspectRatio:i}=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:l=>`${l.formattedValue} - ${l.dataset.label}`,afterLabel:l=>{const d=l.dataset.data[l.dataIndex];if(l.dataset.label!=="Exposed"||d.variants===void 0)return"";const{disabled:f,...u}=d.variants;return Object.entries(u).map(b=>q(b,d.y)).join(`
`)},title:l=>`Time: ${t>48?w(l[0].label,a.locale,"UTC"):F(l[0].label,a.locale)}`}}},responsive:s,maintainAspectRatio:i,scales:{x:{...o?o.x:{},ticks:{color:e.palette.text.secondary,callback(l){const d=this.getLabelForValue(Number(l));return t>48?D(d,a.locale,"UTC"):F(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:n,interaction:c}},X=({project:e,flagName:t,onArchive:a,className:s})=>{var f;const{feature:n,refetchFeature:c}=S(e,t),o=(f=n.environments)==null?void 0:f.map(u=>({name:u.name,lastSeenAt:u.lastSeenAt,enabled:u.enabled,yes:u.yes,no:u.no})),[i,m]=p.useState(!1),[l,d]=p.useState(!1);return r.jsxs(k,{sx:{display:"flex"},className:s,children:[r.jsx(E,{sx:{pt:0,pb:0},featureLastSeen:n.lastSeenAt,environments:o}),r.jsx(A,{feature:n,onArchive:()=>m(!0),onComplete:()=>d(!0),onUncomplete:c}),n.children.length>0?r.jsx(U,{features:n.children,project:e,isOpen:i,onClose:()=>m(!1)}):r.jsx(G,{isOpen:i,onConfirm:a,onClose:()=>m(!1),projectId:e,featureIds:[t]}),n.project?r.jsx(J,{isOpen:l,setIsOpen:d,projectId:n.project,featureId:n.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]),s=p.useMemo(()=>ee(t),[t]),n="placeholder-chart-label";return r.jsxs(r.Fragment,{children:[r.jsx(O,{id:n,children:e}),r.jsx(v,{children:r.jsx(j,{data:s,options:a,"aria-describedby":n})})]})},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,s]=p.useState(null),{feature:n}=S(e,t),c=((n==null?void 0:n.environments)??[]).map(i=>({name:i.name,type:i.type})),o=c.find(i=>i.type==="production");return p.useEffect(()=>{o?s(o.name):c.length>0&&s(c[0].name)},[t,JSON.stringify(c)]),{environment:a,setEnvironment:s,activeEnvironments:c}},re=(e,t,a)=>{const{featureMetrics:s=[],loading:n,error:c}=Y(e,a),o=p.useMemo(()=>[...s].sort((u,b)=>u.timestamp.localeCompare(b.timestamp)),[s]),i=p.useMemo(()=>z(o==null?void 0:o.filter(u=>t===u.environment)).map(u=>({...u,appName:"all selected"})),[o,t]),m=p.useMemo(()=>Q(i),[i]),l=y(),{locationSettings:d}=$(),f=p.useMemo(()=>K(l,a,d),[l,a,d]);return{data:m,options:f,loading:n,error:c}},ne=({activeEnvironments:e,environment:t,setEnvironment:a})=>r.jsx(H,{name:"feature-environments",label:"Environment",id:"feature-environments",options:e.map(s=>({key:s.name,label:s.name})),value:String(t),onChange:a}),se=g(k)(({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)})),fe=e=>r.jsx(h,{children:r.jsx(x,{...e})}),ie=({flag:e,onArchive:t})=>{const[a,s]=p.useState(48),{environment:n,setEnvironment:c,activeEnvironments:o}=ae(e.project,e.name),{data:i,options:m,loading:l,error:d}=re(e.name,n,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=i.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(se,{children:[n?r.jsx(ne,{environment:n,setEnvironment:c,activeEnvironments:o}):null,r.jsx(_,{hoursBack:a,setHoursBack:s})]})]}),l?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:i,options:m,"aria-label":"A bar chart with a single feature flag exposure metrics"})})]})},ge=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});P.register(W,B,I,T,R,L,N);export{ge as FlagMetricsChart,fe as PlaceholderFlagMetricsChartWithWrapper};