"use strict";(self.webpackChunkunifiNetworkUi=self.webpackChunkunifiNetworkUi||[]).push([[97750],{620627(e,r,o){o.d(r,{A:()=>h});var t=o(274934),n=o(938984),s=o(247816),i=o(309130),l=o(100978),d=o(535322);const a=(0,s.A)("div")`
  margin-right: ${i.kc};
`,c=(0,s.A)("div")`
  margin-left: ${i.kc};
`,h=({icon:e,closeIcon:r,nested:o,children:s,...i})=>(0,t.jsx)(d.A,{nested:o,...i,children:(0,t.jsxs)(l.A,{children:[(0,t.jsx)(a,{children:e}),(0,t.jsx)(n.A,{size:"medium",children:s}),r?(0,t.jsx)(c,{children:r}):null]})})},220608(e,r,o){o.d(r,{A:()=>a});var t=o(274934),n=o(814557),s=o(247816),i=o(100978),l=o(291508);const d=(0,s.A)(i.A,(0,l.A)("color","dimension"))`
  width: ${({dimension:e})=>e}px;
  height: ${({dimension:e})=>e}px;
  border-radius: 50%;
  background-color: ${({color:e})=>e};
  border: ${({theme:{themeName:e}})=>n.Ay[`desktop-border-divider-${e}`]};
`,a=({color:e,dimension:r=16})=>(0,t.jsx)(d,{color:e,dimension:r})},748094(e,r,o){o.d(r,{A:()=>_});var t=o(274934),n=o(814557),s=o(602086),i=o(599110),l=o(938984),d=o(853777),a=o(600191),c=o(847399),h=o(263705),m=o(613842),E=o(470070),u=o(620627),p=o(100978);const _=(0,s.memo)(({children:e,customIcon:r,link:o,nested:_,extra:x,variant:A="warning",...g})=>{const{themeName:b}=(0,h.u)(),f=(0,s.useMemo)(()=>{switch(A){case"warning":return(0,t.jsx)(a.A,{size:"original",color:n.Ay[`desktop-color-orange-06-${b}`],variant:"fill"});case"info":return(0,t.jsx)(d.A,{isActive:!0,size:"original",variant:"fill"});case"custom":return r;default:return(0,t.jsx)(c.A,{size:"medium",color:n.Ay[`desktop-color-red-06-${b}`],variant:"fill"})}},[A,b,r]),k=(0,s.useCallback)(()=>{m.A.open(o)},[o]);return(0,t.jsx)(u.A,{icon:f,nested:_,...g,children:(0,t.jsxs)(p.A,{flexDirection:"column",alignItems:"flex-start",children:[(0,t.jsx)(l.A,{children:e}),(0,t.jsx)(l.A,{children:o?(0,t.jsx)(i.A,{type:"button",variant:"inline",onClick:k,children:(0,t.jsx)(E.sA,{id:"COMMON_LEARN_MORE"})}):null}),x]})})})},14683(e,r,o){o.d(r,{L:()=>J,A:()=>ie});var t=o(274934),n=o(418398),s=o(977872),i=o(602086),l=o(843871),d=o(125799),a=o(938984),c=o(925845),h=o(762705),m=o(599110),E=o(853777),u=o(247816),p=o(419284),_=o(586566),x=o(833466),A=o(309130),g=o(304151),b=o(120197),f=o(100978),k=o(470070),v=o(857780);const j=()=>(0,t.jsxs)(f.A,{flexDirection:"column",children:[(0,t.jsxs)(f.A,{height:A.Er,alignItems:"center",gap:A.YC,children:[(0,t.jsx)(a.A,{color:"text-3",size:"small",children:(0,t.jsx)(k.sA,{id:"COMMON_MODE"})}),(0,t.jsx)(g.A,{description:(0,t.jsx)(k.sA,{id:"DEVICE_PROPERTIES_LABEL_COMBO_MODE_DESC"})})]}),(0,t.jsxs)(f.A,{height:x.b,alignItems:"center",gap:A.Ln,children:[(0,t.jsx)(b.A,{name:"led_mode",type:"radio",value:v.QV.ETHERLIGHTING,children:(0,t.jsx)(k.sA,{id:"COMMON_ETHERLIGHTING"})}),(0,t.jsx)(b.A,{name:"led_mode",type:"radio",value:v.QV.STANDARD,children:(0,t.jsx)(k.sA,{id:"COMMON_STANDARD"})})]})]});var S=o(748094),O=o(205521),C=o(873247),w=o(64222),D=o(576024),T=o(814557),M=o(95032),R=o(60927),L=o(383897),I=o(220608),N=o(291508);const y="ffffff",$="ff0505",P=(0,u.A)("div")`
  position: relative;
`,G=(0,u.A)(f.A,(0,N.A)("color"))`
  border: ${({theme:{themeName:e}})=>T.Ay[`desktop-border-divider-${e}`]};
  border-radius: ${T.Ay["desktop-radius-base"]};
  cursor: pointer;
`,H=({color:e,label:r})=>(0,t.jsxs)(G,{width:164,height:32,gap:A.kc,padding:`0 ${A.kc}`,alignItems:"center",color:e,children:[(0,t.jsx)(I.A,{color:`${e.startsWith("#")?"":"#"}${e}`}),(0,t.jsx)(M.A,{size:"medium",isTruncated:!0,children:r})]}),V=(0,u.A)("div",(0,N.A)("popoverOpen","horizontalOffset","isWhiteSelected"))`
  position: absolute;
  left: 178px;
  top: 42px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: ${`#${y}`};
  border: 1px solid
    ${({theme:{themeName:e},isWhiteSelected:r})=>r?T.Ay[`desktop-color-ublue-06-${e}`]:T.Ay[`desktop-color-neutral-03-${e}`]};
  z-index: ${({theme:e})=>e.zIndex["z-index-popover"]+1};
  cursor: pointer;
  display: ${({popoverOpen:e})=>e?"block":" none"};
  transform: ${({horizontalOffset:e})=>`translateX(${e}px)`};
  transition: display 1s;
`,F=({label:e,color:r,rootSelectorId:o,onChange:n,horizontalOffset:s=0})=>{const l=(0,i.useRef)(null),[d,a]=(0,i.useState)(!1),c=(0,i.useMemo)(()=>r.toLocaleLowerCase()===y,[r]);(0,L.A)(l,()=>{a(!1)});const h=(0,i.useCallback)(e=>{n(e.toString()||$)},[n]),m=(0,i.useCallback)(()=>{a(!1),n(y)},[n]),E=c?$:r;return(0,t.jsxs)(P,{id:o,ref:l,children:[(0,t.jsx)(R.A,{value:E.startsWith("#")?E:`#${E}`,onChange:h,colorSpace:"hex",sliders:[{id:"hue",channel:"hue"}],children:(0,t.jsx)("span",{children:(0,t.jsx)(H,{label:e,color:r})})}),(0,t.jsx)(V,{popoverOpen:d,horizontalOffset:s,isWhiteSelected:c,onClick:m})]})};var Q=o(448108),Z=o(110372),z=o(380592);const W=10,B={[String(z.A[Z.n5.PORTSPEED_HALF_100].speed)]:Q.Ms.FE,[String(z.A[Z.n5.PORTSPEED_FULL_100].speed)]:Q.Ms.FE,[String(z.A[Z.n5.PORTSPEED_HALF_1000].speed)]:Q.Ms.GbE,[String(z.A[Z.n5.PORTSPEED_FULL_1000].speed)]:Q.Ms.GbE,[String(z.A[Z.n5.PORTSPEED_FULL_2P5G].speed)]:Q.Ms["2.5GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_5G].speed)]:Q.Ms["5GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_10G].speed)]:Q.Ms["10GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_25G].speed)]:Q.Ms["25GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_40G].speed)]:Q.Ms["40GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_50G].speed)]:Q.Ms["50GbE"],[String(z.A[Z.n5.PORTSPEED_FULL_100G].speed)]:Q.Ms["100GbE"]},K={[Q.Ms.FE]:1,[Q.Ms.GbE]:2,[Q.Ms["2.5GbE"]]:3,[Q.Ms["5GbE"]]:4,[Q.Ms["10GbE"]]:5,[Q.Ms["25GbE"]]:6,[Q.Ms["40GbE"]]:7,[Q.Ms["100GbE"]]:8},U=({colors:e,portSpeeds:r,onChangeColor:o})=>{const n=(0,i.useMemo)(()=>r.map(e=>B[e]).filter(e=>Boolean(e)),[r]),s=(0,i.useMemo)(()=>e.filter(({key:e})=>n.includes(e)).sort((e,r)=>K[e.key]-K[r.key]),[e,n]),l=(0,i.useCallback)(e=>r=>{o(e,r)},[o]),d=(0,i.useMemo)(()=>s.map(({key:e,raw_color_hex:r},o)=>(0,t.jsx)(F,{label:e,color:r,onChange:l(e),rootSelectorId:`etherlighting-speed-${o}`,horizontalOffset:o%2==0?0:-30},e)),[s,l]);return(0,t.jsx)(f.A,{gap:A.kc,flexWrap:"wrap",children:d})};var Y=o(584779),X=o(197571);const q=({colors:e,onChangeColor:r,isEmptyVlanTagged:o})=>{const{formatMessage:n}=(0,k.tz)(),[l,d]=(0,i.useState)(0),c=(0,s.d4)(X.Tn),h=(0,i.useMemo)(()=>c.reduce((e,{_id:r,name:o,vlan:t})=>({...e,[r]:{name:o,vlan:t||1}}),{}),[c]),m=(0,i.useMemo)(()=>e.filter(({key:e})=>h[e]?.name||o&&"none"===e).sort((e,r)=>(h[e.key]?.vlan||1e4)-(h[r.key]?.vlan||1e4)),[e,o,h]),E=(0,i.useCallback)(e=>o=>{r(e,o)},[r]),u=(0,i.useMemo)(()=>m.slice(l*W,(l+1)*W).map(({key:e,raw_color_hex:r},o)=>(0,t.jsx)(F,{label:h[e]?.name||n({id:"COMMON_NONE"}),color:r,onChange:E(e),rootSelectorId:`etherlighting-network-${o}`,horizontalOffset:o%2==0?0:-30},e)),[m,h,n,l,E]),p=(0,i.useCallback)(()=>{d(l-1)},[l]),_=(0,i.useCallback)(()=>{d(l+1)},[l]);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(f.A,{gap:A.kc,flexWrap:"wrap",children:u}),m.length>W?(0,t.jsxs)(f.A,{gap:A.xO,alignItems:"center",children:[(0,t.jsx)(a.A,{color:"text-3",children:(0,t.jsx)(k.sA,{id:"PAGINATION_FROM_TO",values:{from:l*W+1,to:Math.min((l+1)*W,m.length),total:m.length,section:(0,t.jsx)(k.sA,{id:"COMMON_NETWORKS"})}})}),(0,t.jsxs)(f.A,{children:[(0,t.jsx)(a.A,{color:"text-2",children:(0,t.jsx)(Y.A,{disabled:0===l,onClick:p})}),(0,t.jsx)(a.A,{color:"text-2",children:(0,t.jsx)(Y.A,{disabled:(l+1)*W>=m.length,onClick:_,rotate:!0})})]})]}):null]})},J="etherlighting",ee=(0,u.A)(d.A)`
  bottom: 2px;
`,re=e=>(0,t.jsxs)(a.A,{color:"text-1",children:[e,"%"]}),oe=e=>{const{mode:r,network:o,speed:t,brightness:n,behavior:s,led_mode:i}=e;return{led_mode:i,mode:r,brightness:n,behavior:s,...r===v.QZ.SPEED?{speed:t}:{},...r===v.QZ.NETWORK?{network:o}:{}}},te=(e,r)=>e.length===r.length&&e.every(e=>{const o=r.find(r=>r.key===e.key);return e.raw_color_hex===o?.raw_color_hex}),ne=(e=[],r=[])=>[...e,...r].reduce((e,r)=>(e.some(e=>e.key===r.key)||e.push(r),e),[]),se=(0,l.bk)({enableReinitialize:!0,mapPropsToValues:({activeItem:e,activeItem:{ether_lighting:r={mode:v.QZ.SPEED,brightness:100,behavior:v.VC.BREATH}},etherlightingSettings:{network_overrides:o,network_defaults:t,speed_defaults:n,speed_overrides:s}={network_overrides:[],network_defaults:[],speed_defaults:[],speed_overrides:[]}})=>{const i=r.mode||v.QZ.SPEED,l=i!==v.QZ.NETWORK||(0,_.OD)({switch_caps:e.switch_caps})?i:v.QZ.SPEED;return{led_mode:r.led_mode||v.QV.ETHERLIGHTING,brightness:r.brightness||100,behavior:r.behavior||v.VC.BREATH,mode:l,network:ne(o,t),speed:ne(s,n)}},handleSubmit:(e,{resetForm:r})=>{r({values:e})}}),ie=(0,n.Zz)(se)(({setFieldValue:e,setFormDirty:r,values:o,resetForm:n,activeItem:l,etherlightingSettings:d={}})=>{const u=(0,s.wA)(),g=(0,i.useRef)(o),T=(0,s.d4)(C.wD),M=(R=l.port_table,L=l.port_overrides,I=T,Boolean(R?.some(e=>{const r=e.portconf_id&&I?.find(r=>r._id===e.portconf_id),o=L?.find(r=>r.port_idx===e.port_idx);let t=e.native_networkconf_id;return r?t=r.native_networkconf_id:o&&(t=o.native_networkconf_id),t===w.F})));var R,L,I;const N=(0,i.useMemo)(()=>(0,_.Nr)({switch_caps:l.switch_caps}),[l.switch_caps]),y=(0,i.useMemo)(()=>(0,_.OD)({switch_caps:l.switch_caps}),[l.switch_caps]),$=(0,i.useCallback)((r,t)=>{e(`${o.mode}.[${(o.mode in o&&o[o.mode]||[]).findIndex(e=>e.key===r)}].raw_color_hex`,(0,p.E6)(t).replace("#",""))},[e,o]),P=(0,i.useCallback)(()=>{e(o.mode,o.mode===v.QZ.SPEED?d.speed_defaults:d.network_defaults)},[e,o.mode,d.speed_defaults,d.network_defaults]),G=(0,i.useCallback)(({target:{checked:r}})=>{e("behavior",r?v.VC.BREATH:v.VC.STEADY)},[e]),H=(0,i.useMemo)(()=>o.mode===v.QZ.SPEED?d.speed_defaults?.some(e=>o.speed?.some(r=>r.key===e.key&&r.raw_color_hex!==e.raw_color_hex)):d.network_defaults?.some(e=>o.network?.some(r=>r.key===e.key&&r.raw_color_hex!==e.raw_color_hex)),[d.network_defaults,d.speed_defaults,o.speed,o.network,o.mode]),V=(0,i.useMemo)(()=>oe(o),[o]),F=(0,i.useMemo)(()=>{const{current:e}=g;return o.mode!==e.mode||!te(o[o.mode]||[],e[o.mode]||[])},[o]);(0,i.useEffect)(()=>{const{current:e}=g;var o,t;e&&r(J,!((o=oe(e)).mode===(t=V).mode&&o.brightness===t.brightness&&o.behavior===t.behavior&&o.led_mode===t.led_mode&&(o[v.QZ.NETWORK]?te(o[v.QZ.NETWORK]||[],t[v.QZ.NETWORK]||[]):!o[v.QZ.SPEED]||te(o[v.QZ.SPEED]||[],t[v.QZ.SPEED]||[]))))},[r,V]),(0,i.useEffect)(()=>{const e={...g.current,...V};return u((0,O.uo)({[J]:()=>({ether_lighting:e})})),u((0,O.Oo)({[J]:()=>{g.current=e,n({values:e}),r(J,!1)}})),u((0,O.rW)({[J]:n})),()=>{u((0,O.uo)({[J]:null})),u((0,O.Oo)({[J]:null})),u((0,O.rW)({[J]:null}))}},[u,n,r,V,o]);const Q=(0,i.useCallback)(({target:{value:r}})=>{e("brightness",+r)},[e]);return(0,t.jsxs)(f.A,{flexDirection:"column",gap:A.Ln,children:[N?(0,t.jsx)(j,{}):null,o.led_mode===v.QV.ETHERLIGHTING?(0,t.jsxs)(t.Fragment,{children:[y?(0,t.jsxs)(f.A,{height:x.b,alignItems:"center",gap:A.Ln,children:[(0,t.jsx)(b.A,{name:"mode",type:"radio",value:v.QZ.SPEED,children:(0,t.jsx)(k.sA,{id:"COMMON_SPEED"})}),(0,t.jsx)(b.A,{name:"mode",type:"radio",value:v.QZ.NETWORK,children:(0,t.jsx)(k.sA,{id:"COMMON_NETWORK"})})]}):null,(0,t.jsxs)(f.A,{flexDirection:"column",gap:A.kc,children:[(0,t.jsxs)(f.A,{width:"100%",height:20,justifyContent:"space-between",alignItems:"center",children:[(0,t.jsx)(a.A,{color:"text-3",children:(0,t.jsx)(k.sA,{id:"COMMON_COLORS"})}),H?(0,t.jsx)(m.A,{type:"button",variant:"inline",size:"medium",onClick:P,children:(0,t.jsx)(k.sA,{id:"COMMON_ACTION_RESET"})}):null]}),o.mode===v.QZ.SPEED&&(o[v.QZ.SPEED]||[]).length>0?(0,t.jsx)(U,{colors:o[v.QZ.SPEED]||[],portSpeeds:(0,D.MB)(l),onChangeColor:$}):null,o.mode===v.QZ.NETWORK&&(o[v.QZ.NETWORK]||[]).length>0?(0,t.jsx)(q,{colors:o[v.QZ.NETWORK]||[],onChangeColor:$,isEmptyVlanTagged:M}):null]}),(0,t.jsxs)(f.A,{flexDirection:"column",gap:A.kc,children:[(0,t.jsx)(a.A,{color:"text-3",children:(0,t.jsx)(k.sA,{id:"COMMON_BRIGHTNESS"})}),(0,t.jsx)(c.A,{value:o.brightness,withValueIndicator:!0,min:1,valueIndicatorPosition:"right",formatValueIndicatorContent:re,onChange:Q})]}),(0,t.jsx)(h.A,{id:"breathingMode",checked:o.behavior===v.VC.BREATH,onChange:G,children:(0,t.jsxs)(f.A,{alignItems:"center",gap:A.YC,children:[(0,t.jsx)(k.sA,{id:"DEVICE_PROPERTIES_LABEL_BREATHING_MODE"}),(0,t.jsx)(ee,{portal:!0,description:(0,t.jsx)(k.sA,{id:"DEVICE_PROPERTIES_LABEL_BREATHING_MODE_DESC"}),children:(0,t.jsx)(E.A,{size:"original",isActive:!0})})]})}),F?(0,t.jsx)(S.A,{variant:"info",nested:!0,padding:A.kc,children:(0,t.jsx)(k.sA,{id:"DEVICE_ETHERLIGHTING_CHANGE_WARNING"})}):null]}):null]})})},584779(e,r,o){o.d(r,{A:()=>E});var t,n=o(274934),s=o(599110),i=o(247816),l=o(565527);!function(e){e.DEFAULT="default",e.HOVER="hover",e.DISABLED="disabled",e.ACTIVE="active"}(t||(t={}));const d={[t.DEFAULT]:{[l.S.LIGHT]:"#d6d9e2",[l.S.DARK]:"#3f3f3f"},[t.HOVER]:{[l.S.LIGHT]:"#7e8190",[l.S.DARK]:"#9d9d9d"},[t.DISABLED]:{[l.S.LIGHT]:"#eeeff3",[l.S.DARK]:"#1e1e1e"},[t.ACTIVE]:{[l.S.LIGHT]:"#a4a7b5",[l.S.DARK]:"#2f2f2f"}},a=(e,r)=>d[r][e],c=(e,r)=>`1px 0px 0px 0px ${a(e,r)}`;var h=o(291508);const m=(0,i.A)(s.A,(0,h.A)("rotate"))`
  margin: 0;
  padding: 0;
  width: 26px;
  height: 24px;
  color: inherit;
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  border-color: transparent;
  border-color: ${({theme:{themeName:e}})=>`${a(e,t.DEFAULT)}`};
  box-shadow: ${({theme:{themeName:e}})=>`${c(e,t.DEFAULT)}`};
  ${({rotate:e=!1})=>e?"\n    transform: rotate(-180deg);\n  ":"\n  position: relative; \n  left: -1px;\n  margin-left: 1px;\n    "}
  > span {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      display: flex;
    }
  }
  &:disabled {
    z-index: 0;
    box-shadow: ${({theme:{themeName:e}})=>`${c(e,t.DISABLED)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${a(e,t.DISABLED)} !important`};
  }
  &:hover {
    z-index: 1;
    box-shadow: ${({theme:{themeName:e}})=>`${c(e,t.HOVER)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${a(e,t.HOVER)} !important`};
    border-right: 0;
    background-color: transparent !important;
  }
  &:active {
    box-shadow: ${({theme:{themeName:e}})=>`${c(e,t.ACTIVE)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${a(e,t.ACTIVE)} !important`};
  }
`,E=({disabled:e,onClick:r,rotate:o})=>(0,n.jsx)(m,{variant:"secondary",rotate:o,disabled:e,onClick:r,type:"button",children:(0,n.jsx)("svg",{width:"4",height:"8",viewBox:"0 0 4 8",fill:"none",children:(0,n.jsx)("path",{d:"M3.75026 0.999386C3.75026 1.11739 3.70826 1.23639 3.62426 1.33138L1.25026 3.99939L1.27026 4.02039L3.62326 6.66739C3.80726 6.87339 3.78826 7.18939 3.58226 7.37339C3.37626 7.55739 3.06026 7.53839 2.87626 7.33239L0.530256 4.69439C0.156256 4.30739 0.156256 3.69139 0.530256 3.30439L2.87526 0.667385C3.05826 0.461386 3.37526 0.442385 3.58126 0.626385C3.69326 0.724385 3.75026 0.861386 3.75026 0.999386Z",fill:"#A4A7B5"})})})},383897(e,r,o){o.d(r,{A:()=>n});var t=o(602086);const n=(e,r,o=[])=>{const n=(0,t.useCallback)(({target:o})=>{e?.current&&o!==e.current&&!e.current.contains(o)&&r()},[r,e?.current]);(0,t.useEffect)(()=>(document.addEventListener("click",n),()=>{document.removeEventListener("click",n)}),[...o,n])}},714548(e,r,o){o.d(r,{E:()=>t});const t=({formData:e,etherlightingSettings:r,initialEtherlightingSettings:o})=>{const{ether_lighting:t}=e,{brightness:n,behavior:s,mode:i,network:l,speed:d,led_mode:a}=t||{},c={mode:i,brightness:n,behavior:s,led_mode:a},h={network_overrides:(l||[]).filter(({key:e,raw_color_hex:o})=>r.network_defaults.find(r=>r.key===e)?.raw_color_hex!==o),speed_overrides:(d||[]).filter(({key:e,raw_color_hex:o})=>r.speed_defaults.find(r=>r.key===e)?.raw_color_hex!==o)},m=h.network_overrides.length!==(o.network_overrides||[]).length||h.network_overrides.some(e=>(o.network_overrides||[]).find(r=>r.key===e.key)?.raw_color_hex!==e.raw_color_hex)||h.speed_overrides.length!==(o.speed_overrides||[]).length||h.speed_overrides.some(e=>(o.speed_overrides||[]).find(r=>r.key===e.key)?.raw_color_hex!==e.raw_color_hex);return{etherlightingDeviceData:c,etherlightingSettingsToSubmit:h,hasEtherlightingChanges:m}}}}]);