(window.webpackJsonpunifiNetworkUi=window.webpackJsonpunifiNetworkUi||[]).push([[16],{2779:function(e,t,a){"use strict";a.r(t);var r=a(0),i=a.n(r),n=a(4),o=a(25),l=a(2869),c=a(5),m=a(227),s=a(256),d=a(434),b=a(907),h=a(253),u=a(1585),p=a(1203),O=a(9),E=a(1038),g=a(577),y=a(54),f=a(27),v=a(846);const C=(e,t)=>((e,t)=>{const a=[...e],r=[];for(;a.length;)r.push(a.splice(0,t));return r})(e,t).filter(Boolean).map((e,t,a)=>{var r;const{"tx_byte-r":i,"rx_byte-r":n}=e.reduce(({"tx_byte-r":e,"rx_byte-r":t},{"tx_byte-r":a,"rx_byte-r":r})=>({"tx_byte-r":e+a,"rx_byte-r":t+r}),{"tx_byte-r":0,"rx_byte-r":0});return{timestamp:null===(r=null==e?void 0:e[t+1!==a.length?0:e.length-1])||void 0===r?void 0:r.timestamp,"tx_byte-r":i/e.length,"rx_byte-r":n/e.length}});let T=null;const w=Object(y.b)((e,t)=>e.model.lastFetchTime===t.model.lastFetchTime&&e.queryParams.start===t.queryParams.start&&e.queryParams.end===t.queryParams.end)(Object(O.a)(e=>{return r=Object(d.f)(e),t={start:r.startDate.getTime(),end:r.endDate.getTime()},{model:(a=Object(g.b)(v.b,e.models,{queryParams:t},{idField:v.a}),!a.isLoading&&a.lastFetchTime?(T=Object.assign({},t),a):Object(g.b)(v.b,e.models,{queryParams:T},{idField:v.a})),queryParams:t};var t,a,r},e=>e),e=>e),j=Object(O.a)(w,({model:e})=>{var t;return(null===(t=Object(f.c)(e)[0])||void 0===t?void 0:t.trafficRate)||[]});var x=a(3);const N=Object(x.c)(c.a)`
  border: 1px solid ${({theme:{motifPalette:e}})=>e.neutral03};
`,M=Object(x.c)(c.a)`
  border-bottom: 1px solid ${({theme:{motifPalette:e}})=>e.neutral03};
`;var _=({header:e,children:t,childrenFlexProps:a={},...r})=>i.a.createElement(N,Object.assign({width:"100%",height:"100%",flexDirection:"column",boxSizing:"border-box",borderRadius:6,paddingBottom:24},r),i.a.createElement(M,{minHeight:40,padding:"0 16px",boxSizing:"border-box",alignItems:"center"},e),i.a.createElement(c.a,Object.assign({width:"100%",height:"100%",padding:"16px",flexDirection:"column"},a),t)),A=a(1),D=a(47),I=a(807),S=a(183),F=a(3042);var R={Bytes:Object(x.c)(D.a)`
    color: ${({theme:{motifPalette:{purple06:e}}})=>e};
  `,Icon:Object(x.c)(F.a)`
    color: ${({theme:{motifPalette:{purple06:e}}})=>e};
  `},P=a(3043);var B,L,W={Bytes:Object(x.c)(D.a)`
    color: ${({theme:{motifPalette:{uBlue06:e}}})=>e};
  `,Icon:Object(x.c)(P.a)`
    color: ${({theme:{motifPalette:{uBlue06:e}}})=>e};
  `};!function(e){e.DOWNLOAD="DOWNLOAD",e.UPLOAD="UPLOAD",e.ALL="ALL"}(B||(B={})),function(e){e.TX="TX",e.RX="RX"}(L||(L={}));const U=[{id:B.ALL,label:i.a.createElement(A.b,{id:"COMMON_ALL"})},{id:B.DOWNLOAD,label:i.a.createElement(A.b,{id:"COMMON_STATUS_DOWNLOAD"})},{id:B.UPLOAD,label:i.a.createElement(A.b,{id:"COMMON_STATUS_UPLOAD"})}];var z=({hasAnyTrafficRate:e,formattedTrafficOverviewSummary:{totalBytesTransmitted:t=0,totalBytesReceived:a=0,totalBytes:r=0},graphState:n,setGraphState:o})=>i.a.createElement(c.a,{justifyContent:"space-between",width:"100%"},i.a.createElement(c.a,{alignItems:"center"},i.a.createElement(D.a,{size:"body",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_TR_OW"}))),i.a.createElement(c.a,{alignItems:"center"},i.a.createElement(I.a,{variant:"tertiary",tabs:U,selectedTab:n,onSelectTab:({id:e})=>o(e)}),i.a.createElement(c.a,{marginLeft:40,alignItems:"center"},i.a.createElement(W.Icon,null),i.a.createElement(W.Bytes,{size:"caption",weight:"bold"},Object(S.a)(e?a:0))),i.a.createElement(c.a,{marginLeft:12,alignItems:"center"},i.a.createElement(R.Icon,null),i.a.createElement(R.Bytes,{size:"caption",weight:"bold"},Object(S.a)(e?t:0))),i.a.createElement(D.a,{style:{marginLeft:"12px"},size:"caption",weight:"bold",color:"secondary"},Object(S.a)(e?r:0)))),H=a(132),$=a(2601),X=a(626),k=a(308),G=a(49),Y=a(1200),q=a(2596);const K=e=>e+"GradientId",V=(e,t)=>t.motifPalette[e===L.RX?"uBlue06":"purple06"];var J=({trafficRate:e,getCoordinates:t,mouseData:a,maxY:n,tooltipContainer:o,theme:l,graphType:c,renderTooltip:m})=>i.a.createElement(q.a,{data:Object(r.useMemo)(()=>e.map(({timestamp:e,"rx_byte-r":t,"tx_byte-r":a})=>({x:e,y:c===L.RX?t:a})),[e,c]),maxY:n,mouseData:a,getCoordinates:t,lineColor:V(c,l),variant:"gradientArea",interpolation:"curved",allowCustomDots:!0,tooltipPortal:o?o.current:void 0,customGradientId:K(c),renderCustomGradient:Object(r.useCallback)(()=>i.a.createElement("defs",null,i.a.createElement("linearGradient",{id:K(c),x1:"0%",y1:"0%",x2:"0%",y2:"100%"},i.a.createElement("stop",{offset:"0%",stopColor:V(c,l),stopOpacity:.5}),i.a.createElement("stop",{offset:"100%",stopColor:V(c,l),stopOpacity:.1}))),[c,l]),renderTooltip:e=>m({...e,graphType:c,gradientColor:V(c,l)})}),Q=a(34);const Z=e=>e>=Q.a.XXL.TO?25:e>=Q.a.L.TO?13:e>=Q.a.M.TO?7:4,ee={[E.a.DAY]:{frequency:Z,label:({index:e,value:t,use24HourTime:a,documentWidth:r})=>e!==Z(r)-1?new Intl.DateTimeFormat("en-US",{hourCycle:a?"h23":"h12",hour:"numeric",minute:"numeric"}).format(t).toUpperCase():"Now"},[E.a.WEEK]:{frequency:()=>7,label:({value:e})=>new Intl.DateTimeFormat("en-US",{weekday:"short"}).format(e)},[E.a.MONTH]:{frequency:(e,t)=>Math.ceil(t/(e>=Q.a.XL.TO?1:e>=Q.a.M.TO?2:4)),label:({value:e})=>new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric"}).format(e)},[E.a.CUSTOM]:{frequency:()=>10,label:({value:e,use24HourTime:t})=>new Intl.DateTimeFormat("en-US",{hourCycle:t?"h23":"h12",month:"short",day:"numeric",hour:"numeric",minute:"numeric"}).format(e).replace(/\S+$/,e=>e.toUpperCase())}};var te=a(1035),ae=a(1164);const re=Object(x.c)(c.a)`
  border-bottom: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
`,ie=Object(x.c)(c.a)`
  g {
    transition: unset;
  }
`,ne=({value:e,graphState:t,highestBytePower:a})=>{const n=Object(r.useMemo)(()=>t===B.DOWNLOAD?W:R,[t]);return i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",color:"secondary"},i.a.createElement(A.b,{id:t===B.DOWNLOAD?"COMMON_STATUS_DOWNLOAD":"COMMON_STATUS_UPLOAD"})),i.a.createElement(c.a,null,i.a.createElement(n.Icon,null),i.a.createElement(n.Bytes,{size:"caption"},Object(H.c)(e,"bitrate","SI",a))))};var oe=({hidden:e,top:t,left:a,x:r,y:n,chartWidth:o,chartHeight:l,use24HourTime:m,graphState:s,graphType:d,gradientColor:b,txTooltipProps:h,highestBytePower:u,dayDifference:p})=>i.a.createElement(i.a.Fragment,null,(s!==B.ALL||d===L.RX)&&i.a.createElement(i.a.Fragment,null,i.a.createElement(te.a,{width:252,left:a+(a<Math.round(o/2)?8:-8),top:s===B.ALL?(t+h.top)/2:t-4,message:i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(re,{justifyContent:"flex-start",alignItems:"center",marginBottom:12,paddingBottom:12,paddingLeft:8},i.a.createElement(D.a,{color:"secondary",weight:"bold",size:"body"},i.a.createElement(A.b,{id:"TO_USAGE"}))),i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_DATE_TIME"})),i.a.createElement(D.a,{size:"caption",color:"secondary"},(()=>{const e=new Intl.DateTimeFormat("en-US",{day:"numeric",month:"short",year:"numeric",...p<=7&&{hour:"numeric",minute:"numeric",hourCycle:m?"h23":"h12"}}).format(r).split(" ");return[e[0],e[1]]=[e[1],e[0]],e.join(" ")})())),s===B.ALL?i.a.createElement(i.a.Fragment,null,i.a.createElement(ne,{value:h.value,graphState:B.UPLOAD,highestBytePower:u}),i.a.createElement(ne,{value:n,graphState:B.DOWNLOAD,highestBytePower:u})):i.a.createElement(ne,{value:n,graphState:s,highestBytePower:u}))),hidden:e,topMargin:4,tooltipProps:{position:a<Math.round(o/2)?"right":"left"}}),s===B.ALL&&!e&&h.left&&h.top&&i.a.createElement(c.a,{zIndex:1,width:1,borderLeft:"2px dashed white",top:Math.min(t,h.top),height:Math.max(t,h.top)-Math.min(t,h.top),left:(a+h.left)/2-1,position:"absolute"})),i.a.createElement(ie,{position:"absolute",top:0,left:0,zIndex:2},i.a.createElement("svg",{width:o,height:l},a&&t&&i.a.createElement(ae.a,{x:a,y:t,color:b}))));const le=Object(x.c)("line")`
  stroke: ${({theme:e})=>e.motifPalette.neutral03} !important;
`,ce=Object(x.c)(c.a,{shouldForwardProp:e=>"chartWidth"!==e&&"preset"!==e})`
  #x-labels > g:last-child {
    ${({preset:e,chartWidth:t})=>!e&&`transform: translateX(${t-45}px) !important;`}
  }
`;var me=({trafficRate:e,statisticsDateRange:{startDate:t,endDate:a,preset:o},graphState:m,trafficOverviewContainerHeight:s})=>{const d=Object(r.useRef)(null),b=Object(r.useRef)({value:void 0,left:void 0,top:void 0}),h=Object(k.a)(),{ref:u,width:p=0}=Object(l.a)(),O=Object(r.useMemo)(()=>Math.round(.75*Math.round(s/2)),[s]),g=Object(r.useMemo)(()=>Math.floor(Math.abs(new Date(a).getTime()-new Date(t).getTime())/864e5),[t,a]),y=O<400,f=Object(Y.a)({current:document.body}),{use24HourTime:v=!1}=Object(n.useSelector)(G.C),C=Object(r.useMemo)(()=>Object(H.d)(e.length?Math.max(0,...e.map(({"tx_byte-r":e=0,"rx_byte-r":t=0})=>{switch(m){case B.DOWNLOAD:return[t];case B.UPLOAD:return[e];case B.ALL:return[e,t];default:return[]}}).flat()):1136500,"bitrate","SI",e.length?void 0:2),[e,m]),T=Object(r.useCallback)(({hidden:e,left:t,top:a,x:r,y:n,graphType:o,gradientColor:l})=>(m===B.ALL&&o===L.TX&&(b.current={value:n,left:t,top:a}),i.a.createElement(oe,{hidden:e,left:t,top:a,txTooltipProps:b.current,x:r,y:n,chartHeight:O,chartWidth:p,use24HourTime:v,graphState:m,graphType:o,gradientColor:l,highestBytePower:C.power,dayDifference:g})),[O,p,m,b,v,C.power,g]);return i.a.createElement(ce,{width:"100%",position:"relative",preset:o,chartWidth:p},i.a.createElement(c.a,{width:"100%",position:"relative",innerRef:u},i.a.createElement($.a,{xAxis:Object(r.useMemo)(()=>{var r,i,n,l,c;return n=(null===(r=e[0])||void 0===r?void 0:r.timestamp)||t.getTime(),l=(null===(i=e[e.length-1])||void 0===i?void 0:i.timestamp)||a.getTime(),c=0===g?E.a.DAY:E.a.CUSTOM,((e,t)=>{const[a]=e,r=[a];for(let i=1;i<t-1;i+=1){const a=i*(e.length-1)/(t-1),n=Math.floor(a).toFixed();r[i]=Math.round(e[n]+(e[Math.ceil(a).toFixed()]-e[n])*(+a-+n))}return r[t-1]=e[e.length-1],r})([n,l],ee[o||c].frequency(f,g)).map((e,t)=>({label:ee[o||c].label({index:t,value:e,use24HourTime:v,documentWidth:f}),value:e}))},[e,v,t,a,o,f,g]),yAxis:Object(r.useMemo)(()=>{return e=C.bytes,Object(X.e)(Math.ceil(e+1/(y?5:10)*e),y?6:11);var e},[C.bytes,y]),width:p,height:O,renderYLabel:Object(r.useCallback)(({value:e},t)=>t!==(y?5:10)?`${Object(H.d)(+e,"bitrate","SI",C.power).value.toFixed(1)} ${C.unit}`:void 0,[C.power,C.unit,y]),renderXGridLine:Object(r.useCallback)((e,t,a,r,n)=>i.a.createElement(le,{x1:0,x2:0,y1:a,y2:r,className:n}),[]),renderYGridLine:Object(r.useCallback)((e,t,a,r,n)=>i.a.createElement(le,{x1:a,x2:r,y1:0,y2:0,className:n}),[]),renderChartElements:Object(r.useCallback)((t,a,r)=>i.a.createElement(i.a.Fragment,null,(m===B.ALL||m===B.DOWNLOAD)&&i.a.createElement(J,{trafficRate:e,getCoordinates:t,mouseData:a,maxY:r,tooltipContainer:d,theme:h,renderTooltip:T,graphType:L.RX}),(m===B.ALL||m===B.UPLOAD)&&i.a.createElement(J,{trafficRate:e,getCoordinates:t,mouseData:a,maxY:r,tooltipContainer:d,theme:h,renderTooltip:T,graphType:L.TX})),[m,e,T,h])})),i.a.createElement(c.a,{height:0,innerRef:d}))};var se=({formattedTrafficOverviewSummary:e,statisticsDateRange:t,trafficOverviewContainerHeight:a})=>{const[o,l]=Object(r.useState)(B.ALL),c=Object(r.useMemo)(()=>{return e=t.preset,Object(O.a)(j,t=>{switch(e){case E.a.DAY:case E.a.WEEK:case E.a.MONTH:return C(t,1);default:return t}});var e},[t.preset]),m=Object(n.useSelector)(c);return i.a.createElement(_,{marginBottom:16,height:"unset",header:i.a.createElement(z,{hasAnyTrafficRate:Boolean(m.length),formattedTrafficOverviewSummary:e,graphState:o,setGraphState:l}),childrenFlexProps:{padding:"16px 16px 0 28px"}},i.a.createElement(me,{trafficRate:m,statisticsDateRange:t,graphState:o,trafficOverviewContainerHeight:a}))},de=a(428),be=a(55),he=a(1037),ue=a(217);var pe=({items:e,itemTooltip:t})=>{const{motif:a}=Object(be.a)();return i.a.createElement(he.a,{style:{marginTop:"8px",borderRadius:"4px",height:"8px",backgroundColor:(a===ue.a.LIGHT)+" ? '#d6d9e2' : #333543"},items:e,itemTooltip:t})};const Oe=Object(x.c)(c.a)`
  border-bottom: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
`,Ee=Object(x.c)(c.a)`
  border: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
  @media ${Q.a.VIEWPORT_XXL_UP} {
    padding: 24px;
    margin-bottom: 16px;
  }
`;var ge,ye=({formattedTrafficOverviewSummary:{totalBytes:e=0,usage_by_app:t=[]}})=>i.a.createElement(Ee,{width:"100%",flexDirection:"column",marginBottom:8,boxSizing:"border-box",borderRadius:12,padding:"16px"},i.a.createElement(c.a,{justifyContent:"space-between",width:"100%",minHeight:24},i.a.createElement(D.a,{size:"body",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_IDENTIFIED_TRAFFIC"})),i.a.createElement(D.a,{size:"body",weight:"bold",color:"secondary"},Object(S.a)(e))),i.a.createElement(pe,{items:t,itemTooltip:({name:e,iconFileName:t,value:a=0,bytes_received:r=0,bytes_transmitted:n=0})=>{return{topMargin:4,tooltipProps:{position:"top"},message:i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(Oe,{justifyContent:"flex-start",alignItems:"center",marginBottom:12,paddingBottom:12,paddingLeft:8},i.a.createElement(de.a,{name:e,iconFileName:t}),i.a.createElement(D.a,{color:"secondary",weight:"bold",size:"body",truncate:!0},e||i.a.createElement(A.b,{id:"COMMON_HYPHEN"}))),i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_TRAFFIC"})),i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},(o=a,(Number.isNaN(o)?0:o).toFixed(1)),"%")),i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_WORD_DOWN"})),i.a.createElement(W.Bytes,{size:"caption",weight:"bold"},Object(S.a)(r||0))),i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_WORD_UP"})),i.a.createElement(R.Bytes,{size:"caption",weight:"bold"},Object(S.a)(n||0))))),width:252};var o}})),fe=a(1670),ve=a(42),Ce=a(82);!function(e){e.NAME="name",e.TRAFFIC_PERCENTAGE="value",e.TRAFFIC="total_bytes",e.DOWN="bytes_received",e.UP="bytes_transmitted",e.CLIENTS="client_count"}(ge||(ge={}));const Te={[ge.NAME]:"COMMON_NAME",[ge.TRAFFIC_PERCENTAGE]:"COMMON_TRAFFIC",[ge.TRAFFIC]:"COMMON_TRAFFIC",[ge.DOWN]:"COMMON_WORD_DOWN",[ge.UP]:"COMMON_WORD_UP",[ge.CLIENTS]:"COMMON_CLIENTS"};var we=a(474);var je=Object(x.c)(we.a,{shouldForwardProp:e=>"colorOverride"!==e})`
  margin-right: 8px;
  background-color: ${({colorOverride:e})=>e};
`;const xe=[{id:ge.NAME,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.NAME]})),minWidth:110,renderCell:e=>i.a.createElement(c.a,{alignItems:"center",width:"100%"},i.a.createElement(je,{colorOverride:e.color}),i.a.createElement(c.a,{alignItems:"center",justifyContent:"center",minWidth:25,minHeight:25,marginRight:12},i.a.createElement(de.a,{name:e.name,iconFileName:e.iconFileName})),i.a.createElement(Ce.b,{styleNumber:18,whiteSpace:"nowrap",truncate:!0},e.name||i.a.createElement(A.b,{id:"COMMON_HYPHEN"}))),compare:Object(ve.b)(({name:e="-"})=>e)},{id:ge.TRAFFIC_PERCENTAGE,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.TRAFFIC_PERCENTAGE]}),"%"),minWidth:110,renderCell:e=>{return t=(e.value||0).toFixed(1),i.a.createElement(Ce.b,{styleNumber:18},"0.0"===t?"<0.1":t,"%");var t},compare:Object(ve.b)(({value:e=0})=>e)},{id:ge.TRAFFIC,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.TRAFFIC]})),minWidth:110,renderCell:e=>i.a.createElement(Ce.b,{styleNumber:18},Object(S.a)(e.total_bytes||0)),compare:Object(ve.b)(({total_bytes:e=0})=>e)},{id:ge.DOWN,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.DOWN]})),minWidth:110,renderCell:e=>i.a.createElement(W.Bytes,null,i.a.createElement(Ce.b,{colorOverride:"inherit",styleNumber:18},Object(S.a)(e.bytes_received||0))),compare:Object(ve.b)(({bytes_received:e=0})=>e)},{id:ge.UP,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.UP]})),minWidth:110,renderCell:e=>i.a.createElement(R.Bytes,null,i.a.createElement(Ce.b,{styleNumber:18,colorOverride:"inherit"},Object(S.a)(e.bytes_transmitted||0))),compare:Object(ve.b)(({bytes_transmitted:e=0})=>e)},{id:ge.CLIENTS,sortable:!0,label:i.a.createElement(Ce.b,{styleNumber:34,colorOverride:"inherit"},i.a.createElement(A.b,{id:Te[ge.CLIENTS]})),minWidth:110,renderCell:e=>i.a.createElement(Ce.b,{styleNumber:18},e.client_count||0),compare:Object(ve.b)(({client_count:e=0})=>e)}];var Ne=Object(x.c)(c.a,{shouldForwardProp:e=>"useContainerMinHeight"!==e})`
  width: 100%;
  height: 90%;
  > div:first-child {
    ${({useContainerMinHeight:e=!0})=>e&&"min-height: 90%;"}
    > div:last-child {
      width: 100%;
      height: 90%;
      justify-content: center;
    }
  }
  th {
    svg {
      width: 16px;
      height: 16px;
    }
  }
`;var Me=Object(o.o)(({history:e,match:{path:t,params:a},formattedTrafficOverviewSummary:{usage_by_app:r=[]}})=>i.a.createElement(Ne,{flexDirection:"column",overflow:"auto",paddingBottom:24,useContainerMinHeight:!r.length},i.a.createElement(fe.a,{items:r,idField:"compoundId",columns:xe,disableColumnFilters:!0,initialSortBy:"total_bytes",rowHeight:32,initiallySortAscending:!1,onRowClick:({compoundId:r})=>e.push(Object(o.i)(t,{...a,section:E.b.trafficOverview,subSection:E.c.appDetails,appId:r})),renderPlaceholder:()=>i.a.createElement(D.a,{color:"secondary",size:"body"},i.a.createElement(A.b,{id:"TO_NO_TRAFFIC"}))}))),_e=a(10);var Ae=({formattedTrafficOverviewSummary:{totalServices:e=0,totalClients:t=0}})=>i.a.createElement(c.a,{justifyContent:"space-between",width:"100%"},i.a.createElement(D.a,{size:"body",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"TO_APP_USE"})),i.a.createElement(c.a,null,i.a.createElement(c.a,{alignItems:"center"},i.a.createElement(c.a,{marginRight:12,alignItems:"center"},i.a.createElement(_e.d,{style:{marginRight:"2px"}}),i.a.createElement(D.a,{weight:"bold",size:"label",color:"secondary"},e)),i.a.createElement(c.a,{alignItems:"center"},i.a.createElement(_e.v,{style:{marginRight:"2px"}}),i.a.createElement(D.a,{weight:"bold",size:"label",color:"secondary"},t)))));var De=({formattedTrafficOverviewSummary:e})=>i.a.createElement(_,{overflow:"hidden",header:i.a.createElement(Ae,{formattedTrafficOverviewSummary:e})},i.a.createElement(ye,{formattedTrafficOverviewSummary:e}),i.a.createElement(Me,{formattedTrafficOverviewSummary:e})),Ie=a(2769),Se=a(218);const Fe=Object(x.c)(c.a)`
  border-bottom: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
`,Re=Object(x.c)(Se.a,{shouldForwardProp:e=>"margin"!==e})`
  max-width: 50px;
  max-height: 50px;
  ${({margin:e})=>e?`margin: ${e} !important;`:""}
`;var Pe,Be=({formattedClientUsageByApp:e})=>i.a.createElement(c.a,{width:"100%",padding:"20px 0 10px 8px"},i.a.createElement(pe,{items:e,itemTooltip:e=>{return{topMargin:4,position:"left",message:i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(Fe,{justifyContent:"flex-start",alignItems:"center",marginBottom:12,paddingBottom:12,paddingLeft:8},i.a.createElement(Re,{client:e,margin:"0 12px 0 0",size:"2x"}),i.a.createElement(D.a,{color:"secondary",weight:"bold",size:"body",truncate:!0},e.name||i.a.createElement(A.b,{id:"COMMON_HYPHEN"}))),i.a.createElement(c.a,{flexDirection:"column"},i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_TRAFFIC"})),i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},(t=e.value,(Number.isNaN(t)?0:t).toFixed(1)),"%")),i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_WORD_DOWN"})),i.a.createElement(W.Bytes,{size:"caption",weight:"bold"},Object(S.a)(e.totalBytesReceived||0))),i.a.createElement(c.a,{justifyContent:"space-between",marginBottom:8},i.a.createElement(D.a,{size:"caption",weight:"bold",color:"secondary"},i.a.createElement(A.b,{id:"COMMON_WORD_UP"})),i.a.createElement(R.Bytes,{size:"caption",weight:"bold"},Object(S.a)(e.totalBytesTransmitted||0))))),width:252};var t}})),Le=a(2853),We=a(76),Ue=a(107),ze=a(92);!function(e){e.NAME="name",e.DOWN="totalBytesTransmitted",e.UP="totalBytesReceived",e.TRAFFIC="totalBytes"}(Pe||(Pe={}));const He={[Pe.NAME]:"COMMON_NAME",[Pe.DOWN]:"COMMON_WORD_DOWN",[Pe.UP]:"COMMON_WORD_UP",[Pe.TRAFFIC]:"COMMON_TRAFFIC"},$e=[{id:Pe.NAME,label:i.a.createElement(D.a,{size:"body",weight:"bold",color:"inherit"},i.a.createElement(A.b,{id:He[Pe.NAME]})),minWidth:110,sortable:!0,renderCell:e=>i.a.createElement(c.a,{alignItems:"center",width:"100%"},i.a.createElement(je,{colorOverride:e.color}),i.a.createElement(c.a,{height:25,minWidth:25,maxWidth:25,justifyContent:"center",alignItems:"center",marginRight:12},i.a.createElement(Se.a,{client:e})),i.a.createElement(D.a,{size:"body",color:"inherit",truncate:!0},e.name||i.a.createElement(A.b,{id:"COMMON_HYPHEN"}))),compare:Object(ve.b)(({name:e})=>e)},{id:Pe.TRAFFIC,label:i.a.createElement(D.a,{size:"body",weight:"bold",color:"inherit"},i.a.createElement(A.b,{id:He[Pe.TRAFFIC]})),minWidth:65,sortable:!0,renderCell:e=>i.a.createElement(D.a,{size:"body",color:"inherit"},Object(S.a)(e.totalBytes||0)),compare:Object(ve.b)(({totalBytes:e=0})=>e)},{id:Pe.DOWN,label:i.a.createElement(D.a,{size:"body",weight:"bold",color:"inherit"},i.a.createElement(A.b,{id:He[Pe.DOWN]})),minWidth:55,sortable:!0,renderCell:e=>i.a.createElement(W.Bytes,{size:"body"},Object(S.a)(e.totalBytesReceived||0)),compare:Object(ve.b)(({totalBytesReceived:e=0})=>e)},{id:Pe.UP,label:i.a.createElement(D.a,{size:"body",weight:"bold",color:"inherit"},i.a.createElement(A.b,{id:He[Pe.UP]})),minWidth:50,sortable:!0,renderCell:e=>i.a.createElement(R.Bytes,{size:"body"},Object(S.a)(e.totalBytesTransmitted||0)),compare:Object(ve.b)(({totalBytesTransmitted:e=0})=>e)}];var Xe=({history:e,match:{params:t},formattedClientUsageByApp:a,dispatch:r})=>i.a.createElement(Ne,null,i.a.createElement(fe.a,{items:a,idField:"mac",columns:$e,disableColumnFilters:!0,rowHeight:32,initialSortBy:"totalBytes",initiallySortAscending:!1,onRowClick:({mac:a,unifi_device_info:i})=>{e.push(Object(o.i)(Le.a,{...t,id:a,panel:Ue.a.OVERVIEW})),r(Object(We.g)({type:i?ze.c.UNIFI_DEVICE_CLIENT:ze.c.CLIENT,mac:a}))}}));var ke=({history:e,match:t,specificAppClientUsage:{formattedClientUsageByApp:a},dispatch:r})=>i.a.createElement(c.a,{flexDirection:"column",padding:"0 16px"},i.a.createElement(Be,{formattedClientUsageByApp:a}),i.a.createElement(Xe,{formattedClientUsageByApp:a,history:e,match:t,dispatch:r}));var Ge=({specificAppClientUsage:{name:e,iconFileName:t}})=>i.a.createElement(c.a,{width:"100%",alignItems:"center"},i.a.createElement(de.a,{name:e,iconFileName:t}),i.a.createElement(D.a,{size:"body",weight:"bold"},e));var Ye=({history:e,match:t,match:{path:a,params:l,params:{subSection:c,appId:m}},dispatch:s})=>{const[d,b]=Object(r.useState)(void 0),[h,u]=Object(r.useState)(c===E.c.appDetails);Object(r.useEffect)(()=>{u(c===E.c.appDetails)},[c]);const O=Object(n.useSelector)(Object(p.b)(m));return i.a.createElement(Ie.a,{in:h,header:i.a.createElement(Ge,{specificAppClientUsage:O}),style:{border:"none"},width:400,onExit:()=>b(!0),onExited:()=>b(!1),onClose:()=>{e.push(Object(o.i)(a,{...l,section:E.b.trafficOverview,subSection:void 0,appId:void 0}))}},(d||h)&&i.a.createElement(ke,{specificAppClientUsage:O,history:e,match:t,dispatch:s}))};t.default=Object(o.o)(({history:e,match:t})=>{const{ref:a,height:r}=Object(l.a)(),o=Object(n.useDispatch)(),O=Object(n.useSelector)(d.f),E=Object(n.useSelector)(p.a);return Object(m.a)(((...e)=>[Object(u.a)(...e),Object(b.a)(...e),Object(s.c)("trafficOverview")])({start:O.startDate.getTime(),end:O.endDate.getTime()},void 0,{crudCacheStrategy:{type:h.a.CACHE}}),i.a.createElement(i.a.Fragment,null,i.a.createElement(c.a,{overflow:"auto",height:"100%"},i.a.createElement(c.a,{width:"100%",minWidth:640,minHeight:760,height:"100%",padding:"32px",flex:"1",flexDirection:"column",innerRef:a},i.a.createElement(se,{formattedTrafficOverviewSummary:E,statisticsDateRange:O,trafficOverviewContainerHeight:r}),i.a.createElement(De,{formattedTrafficOverviewSummary:E}))),i.a.createElement(Ye,{history:e,match:t,dispatch:o})))})},2853:function(e,t,a){"use strict";a.d(t,"c",(function(){return l})),a.d(t,"a",(function(){return c})),a.d(t,"b",(function(){return m}));var r=a(0),i=a.n(r),n=a(1),o=a(1038);const l=[{id:o.b.trafficOverview,intlKey:"COMMON_TR_OW",label:i.a.createElement(n.b,{id:"COMMON_TR_OW"})},{id:o.b.wifiStatistics,intlKey:"STATISTICS_TAB_WIFI_STATS",label:i.a.createElement(n.b,{id:"STATISTICS_TAB_WIFI_STATS"})}],c=`/:site/statistics/${o.b.trafficOverview}/:subSection?/:appId?/properties/:id?/:panel?/:subPanel?/:subPanelId?`,m=`/:site/statistics/${o.b.wifiStatistics}/properties/:id?/:panel?/:subPanel?/:subPanelId?`}}]);