UNPKG

unleash-server

Version:

Unleash is an enterprise ready feature flag service. It provides different strategies for handling feature flags.

github.com/unleash/unleash

unleash/unleash

3 lines (2 loc) • 6.55 kB
1
2
3
import{dc as w,iX as F,bv as E,aR as S,r as p,j as r,B as k,iY as D,bu as A,s as g,iZ as P,i_ as I,i$ as T,j0 as B,j1 as R,j2 as L,j3 as N,b as y,T as O,j4 as j,bs as $,aT as H}from"./index-CBxzHo9v.js";import{f as V,a as W}from"./formatTickValue-UVMjaxYs.js";import{F as _,c as U,u as Y,b as G}from"./aggregateFeatureMetrics-B9YGjDrl.js";import{F as z,M as J}from"./MarkCompletedDialogue-BxpNwvZk.js";const X=e=>{const t={label:"Exposed",hoverBackgroundColor:"#A39EFF",backgroundColor:"#A39EFF",data:M(e,n=>n.yes)},a={label:"Not exposed",hoverBackgroundColor:"#D8D6FF",backgroundColor:"#D8D6FF",data:M(e,n=>n.no)};return{datasets:[t,a]}},M=(e,t)=>e.map(a=>({x:a.timestamp,y:t(a),variants:a.variants||{}})),Z=(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: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=>Z(b,d.y)).join(` `)},title:l=>`Time: ${t>48?w(l[0].label,a.locale,"UTC"):F(l[0].label,a.locale)}`}}},responsive:n,maintainAspectRatio:i,scales:{x:{...o?o.x:{},ticks:{color:e.palette.text.secondary,callback(l){const d=this.getLabelForValue(Number(l));return t>48?E(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:s,interaction:c}},K=({project:e,flagName:t,onArchive:a,className:n})=>{var f;const{feature:s,refetchFeature:c}=S(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})),[i,m]=p.useState(!1),[l,d]=p.useState(!1);return r.jsxs(k,{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(_,{features:s.children,project:e,isOpen:i,onClose:()=>m(!1)}):r.jsx(z,{isOpen:i,onConfirm:a,onClose:()=>m(!1),projectId:e,featureIds:[t]}),s.project?r.jsx(J,{isOpen:l,setIsOpen:d,projectId:s.project,featureId:s.name,onComplete:c}):null]})},Q=[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:Q,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(O,{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}=S(e,t),c=((s==null?void 0:s.environments)??[]).map(i=>({name:i.name,type:i.type})),o=c.find(i=>i.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{featureMetrics:n=[],loading:s,error:c}=Y(e,a),o=p.useMemo(()=>[...n].sort((u,b)=>u.timestamp.localeCompare(b.timestamp)),[n]),i=p.useMemo(()=>G(o==null?void 0:o.filter(u=>t===u.environment)).map(u=>({...u,appName:"all selected"})),[o,t]),m=p.useMemo(()=>X(i),[i]),l=y(),{locationSettings:d}=$(),f=p.useMemo(()=>q(l,a,d),[l,a,d]);return{data:m,options:f,loading:s,error:c}},se=({activeEnvironments:e,environment:t,setEnvironment:a})=>r.jsx(H,{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(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(K)({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:i,options:m,loading:l,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=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(ne,{children:[s?r.jsx(se,{environment:s,setEnvironment:c,activeEnvironments:o}):null,r.jsx(U,{hoursBack:a,setHoursBack:n})]})]}),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"})})]})},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});P.register(W,I,T,B,R,L,N);export{fe as FlagMetricsChart,me as PlaceholderFlagMetricsChartWithWrapper};