"use strict";(self.webpackChunkunifiNetworkUi=self.webpackChunkunifiNetworkUi||[]).push([[84185],{224948:(e,t,r)=>{r.d(t,{A:()=>m});var n=r(296540),o=r(217439),a=r(71479),l=r(566723),i=r(294303),s=r(689965);const c=(0,a.A)("div")`
  margin-right: ${l.kc};
`,d=(0,a.A)("div")`
  margin-left: ${l.kc};
`,m=({icon:e,closeIcon:t,nested:r,children:a,...l})=>n.createElement(s.A,{nested:r,...l},n.createElement(i.A,null,n.createElement(c,null,e),n.createElement(o.A,{size:"medium"},a),t?n.createElement(d,null,t):null))},334243:(e,t,r)=>{r.d(t,{E:()=>n});const n=({formData:e,etherlightingSettings:t,initialEtherlightingSettings:r})=>{const{ether_lighting:n}=e,{brightness:o,behavior:a,mode:l,network:i,speed:s,led_mode:c}=n||{},d={mode:l,brightness:o,behavior:a,led_mode:c},m={network_overrides:(i||[]).filter(({key:e,raw_color_hex:r})=>t.network_defaults.find(t=>t.key===e)?.raw_color_hex!==r),speed_overrides:(s||[]).filter(({key:e,raw_color_hex:r})=>t.speed_defaults.find(t=>t.key===e)?.raw_color_hex!==r)},E=m.network_overrides.length!==(r.network_overrides||[]).length||m.network_overrides.some(e=>(r.network_overrides||[]).find(t=>t.key===e.key)?.raw_color_hex!==e.raw_color_hex)||m.speed_overrides.length!==(r.speed_overrides||[]).length||m.speed_overrides.some(e=>(r.speed_overrides||[]).find(t=>t.key===e.key)?.raw_color_hex!==e.raw_color_hex);return{etherlightingDeviceData:d,etherlightingSettingsToSubmit:m,hasEtherlightingChanges:E}}},401479:(e,t,r)=>{r.d(t,{A:()=>s});var n=r(296540);var o=r(822336),a=r(71479),l=r(294303);const i=(0,a.A)(l.A,{shouldForwardProp:e=>!["color","dimension"].includes(e)})`
  width: ${({dimension:e})=>e}px;
  height: ${({dimension:e})=>e}px;
  border-radius: 50%;
  background-color: ${({color:e})=>e};
  border: ${({theme:{themeName:e}})=>o.Ay[`desktop-border-divider-${e}`]};
`,s=({color:e,dimension:t=16})=>n.createElement(i,{color:e,dimension:t})},531935:(e,t,r)=>{r.d(t,{t:()=>q,A:()=>ae});var n=r(868238),o=r(469733),a=r(296540),l=r(951272),i=r(271856),s=r(927099),c=r(802),d=r(314714),m=r(758649),E=r(162420),h=r(71479),u=r(939703),p=r(860631),_=r(454195),g=r(566723),A=r(217439),f=r(766624),b=r(143811),v=r(294303),k=r(699784),S=r(768195);const C=()=>a.createElement(v.A,{flexDirection:"column"},a.createElement(v.A,{height:g.Er,alignItems:"center",gap:g.YC},a.createElement(A.A,{color:"text-3",size:"small"},a.createElement(k.sA,{id:"COMMON_MODE"})),a.createElement(f.A,{description:a.createElement(k.sA,{id:"DEVICE_PROPERTIES_LABEL_COMBO_MODE_DESC"})})),a.createElement(v.A,{height:_.b,alignItems:"center",gap:g.Ln},a.createElement(b.A,{name:"led_mode",type:"radio",value:S.QV.ETHERLIGHTING},a.createElement(k.sA,{id:"COMMON_ETHERLIGHTING"})),a.createElement(b.A,{name:"led_mode",type:"radio",value:S.QV.STANDARD},a.createElement(k.sA,{id:"COMMON_STANDARD"}))));var O=r(551753),w=r(845030),D=r(854726),x=r(936621),T=r(962669),M=r(822336),I=r(705145),R=r(766412),L=r(879002),y=r(401479);const N="ffffff",P="ff0505",G=(0,h.A)("div")`
  position: relative;
`,$=(0,h.A)(v.A,{shouldForwardProp:e=>"color"!==e})`
  border: ${({theme:{themeName:e}})=>M.Ay[`desktop-border-divider-${e}`]};
  border-radius: ${M.Ay["desktop-radius-base"]};
  cursor: pointer;
`,F=({color:e,label:t})=>a.createElement($,{width:164,height:32,gap:g.kc,padding:`0 ${g.kc}`,alignItems:"center",color:e},a.createElement(y.A,{color:`${e.startsWith("#")?"":"#"}${e}`}),a.createElement(I.A,{size:"medium",isTruncated:!0},t)),H=(0,h.A)("div",{shouldForwardProp:e=>!["popoverOpen","horizontalOffset","isWhiteSelected"].includes(e)})`
  position: absolute;
  left: 178px;
  top: 42px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: ${`#${N}`};
  border: 1px solid
    ${({theme:{motifPalette:e},isWhiteSelected:t})=>t?e.uBlue06:e.neutral03};
  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;
`,V=({label:e,color:t,rootSelectorId:r,onChange:n,horizontalOffset:o=0})=>{const l=(0,a.useRef)(null),[i,s]=(0,a.useState)(!1),c=(0,a.useMemo)(()=>t.toLocaleLowerCase()===N,[t]);(0,L.A)(l,()=>{s(!1)});const d=(0,a.useCallback)(e=>{n(e.toString()||P)},[n]),m=(0,a.useCallback)(()=>{s(!1),n(N)},[n]),E=c?P:t;return a.createElement(G,{id:r,ref:l},a.createElement(R.A,{value:E.startsWith("#")?E:`#${E}`,onChange:d,colorSpace:"hex",sliders:[{id:"hue",channel:"hue"}]},a.createElement("span",null,a.createElement(F,{label:e,color:t}))),a.createElement(H,{popoverOpen:i,horizontalOffset:o,isWhiteSelected:c,onClick:m}))};var Q=r(823881),z=r(768941),Z=r(356927);const B=10,W={[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"]},U={[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},K=({colors:e,portSpeeds:t,onChangeColor:r})=>{const n=(0,a.useMemo)(()=>t.map(e=>W[e]).filter(e=>Boolean(e)),[t]),o=(0,a.useMemo)(()=>e.filter(({key:e})=>n.includes(e)).sort((e,t)=>U[e.key]-U[t.key]),[e,n]),l=(0,a.useCallback)(e=>t=>{r(e,t)},[r]),i=(0,a.useMemo)(()=>o.map(({key:e,raw_color_hex:t},r)=>a.createElement(V,{key:e,label:e,color:t,onChange:l(e),rootSelectorId:`etherlighting-speed-${r}`,horizontalOffset:r%2==0?0:-30})),[o,l]);return a.createElement(v.A,{gap:g.kc,flexWrap:"wrap"},i)};var j=r(878237),Y=r(366188);const X=({colors:e,onChangeColor:t,isEmptyVlanTagged:r})=>{const{formatMessage:n}=(0,k.tz)(),[l,i]=(0,a.useState)(0),s=(0,o.useSelector)(Y.Tn),c=(0,a.useMemo)(()=>s.reduce((e,{_id:t,name:r,vlan:n})=>({...e,[t]:{name:r,vlan:n||1}}),{}),[s]),d=(0,a.useMemo)(()=>e.filter(({key:e})=>c[e]?.name||r&&"none"===e).sort((e,t)=>(c[e.key]?.vlan||1e4)-(c[t.key]?.vlan||1e4)),[e,r,c]),m=(0,a.useCallback)(e=>r=>{t(e,r)},[t]),E=(0,a.useMemo)(()=>d.slice(l*B,(l+1)*B).map(({key:e,raw_color_hex:t},r)=>a.createElement(V,{key:e,label:c[e]?.name||n({id:"COMMON_NONE"}),color:t,onChange:m(e),rootSelectorId:`etherlighting-network-${r}`,horizontalOffset:r%2==0?0:-30})),[d,c,n,l,m]),h=(0,a.useCallback)(()=>{i(l-1)},[l]),u=(0,a.useCallback)(()=>{i(l+1)},[l]);return a.createElement(a.Fragment,null,a.createElement(v.A,{gap:g.kc,flexWrap:"wrap"},E),d.length>B?a.createElement(v.A,{gap:g.xO,alignItems:"center"},a.createElement(A.A,{color:"text-3"},a.createElement(k.sA,{id:"PAGINATION_FROM_TO",values:{from:l*B+1,to:Math.min((l+1)*B,d.length),total:d.length,section:a.createElement(k.sA,{id:"COMMON_NETWORKS"})}})),a.createElement(v.A,null,a.createElement(A.A,{color:"text-2"},a.createElement(j.A,{disabled:0===l,onClick:h})),a.createElement(A.A,{color:"text-2"},a.createElement(j.A,{disabled:(l+1)*B>=d.length,onClick:u,rotate:!0})))):null)},q="etherlighting",J=(0,h.A)(i.A)`
  bottom: 2px;
`,ee=e=>a.createElement(s.A,{color:"primary"},e,"%"),te=e=>{const{mode:t,network:r,speed:n,brightness:o,behavior:a,led_mode:l}=e;return{led_mode:l,mode:t,brightness:o,behavior:a,...t===S.QZ.SPEED?{speed:n}:{},...t===S.QZ.NETWORK?{network:r}:{}}},re=(e,t)=>e.length===t.length&&e.every(e=>{const r=t.find(t=>t.key===e.key);return e.raw_color_hex===r?.raw_color_hex}),ne=(e=[],t=[])=>[...e,...t].reduce((e,t)=>(e.some(e=>e.key===t.key)||e.push(t),e),[]),oe=(0,l.bk)({enableReinitialize:!0,mapPropsToValues:({activeItem:{ether_lighting:e={mode:S.QZ.SPEED,brightness:100,behavior:S.VC.BREATH}},etherlightingSettings:{network_overrides:t,network_defaults:r,speed_defaults:n,speed_overrides:o}={network_overrides:[],network_defaults:[],speed_defaults:[],speed_overrides:[]}})=>({led_mode:e.led_mode||S.QV.ETHERLIGHTING,brightness:e.brightness||100,behavior:e.behavior||S.VC.BREATH,mode:e.mode||S.QZ.SPEED,network:ne(t,r),speed:ne(o,n)}),handleSubmit:(e,{resetForm:t})=>{t({values:e})}}),ae=(0,n.Zz)(oe)(({setFieldValue:e,setFormDirty:t,values:r,resetForm:n,activeItem:l,etherlightingSettings:i={}})=>{const h=(0,o.useDispatch)(),A=(0,a.useRef)(r),f=(0,o.useSelector)(D.wD),M=(I=l.port_table,R=l.port_overrides,L=f,Boolean(I?.some(e=>{const t=e.portconf_id&&L?.find(t=>t._id===e.portconf_id),r=R?.find(t=>t.port_idx===e.port_idx);let n=e.native_networkconf_id;return t?n=t.native_networkconf_id:r&&(n=r.native_networkconf_id),n===x.F})));var I,R,L;const y=(0,a.useMemo)(()=>(0,p.Nr)({switch_caps:l.switch_caps}),[l.switch_caps]),N=(0,a.useCallback)((t,n)=>{e(`${r.mode}.[${(r.mode in r&&r[r.mode]||[]).findIndex(e=>e.key===t)}].raw_color_hex`,(0,u.E6)(n).replace("#",""))},[e,r]),P=(0,a.useCallback)(()=>{e(r.mode,r.mode===S.QZ.SPEED?i.speed_defaults:i.network_defaults)},[e,r.mode,i.speed_defaults,i.network_defaults]),G=(0,a.useCallback)(({target:{checked:t}})=>{e("behavior",t?S.VC.BREATH:S.VC.STEADY)},[e]),$=(0,a.useMemo)(()=>r.mode===S.QZ.SPEED?i.speed_defaults?.some(e=>r.speed?.some(t=>t.key===e.key&&t.raw_color_hex!==e.raw_color_hex)):i.network_defaults?.some(e=>r.network?.some(t=>t.key===e.key&&t.raw_color_hex!==e.raw_color_hex)),[i.network_defaults,i.speed_defaults,r.speed,r.network,r.mode]),F=(0,a.useMemo)(()=>te(r),[r]),H=(0,a.useMemo)(()=>{const{current:e}=A;return r.mode!==e.mode||!re(r[r.mode]||[],e[r.mode]||[])},[r]);(0,a.useEffect)(()=>{const{current:e}=A;var r,n;e&&t(q,(r=te(e),n=F,!(r.mode===n.mode&&r.brightness===n.brightness&&r.behavior===n.behavior&&r.led_mode===n.led_mode&&(r[S.QZ.NETWORK]?re(r[S.QZ.NETWORK]||[],n[S.QZ.NETWORK]||[]):!r[S.QZ.SPEED]||re(r[S.QZ.SPEED]||[],n[S.QZ.SPEED]||[])))))},[t,F]),(0,a.useEffect)(()=>{const e={...A.current,...F};return h((0,w.uo)({[q]:()=>({ether_lighting:e})})),h((0,w.Oo)({[q]:()=>{A.current=e,n({values:e}),t(q,!1)}})),h((0,w.rW)({[q]:n})),()=>{h((0,w.uo)({[q]:null})),h((0,w.Oo)({[q]:null})),h((0,w.rW)({[q]:null}))}},[h,n,t,F,r]);const V=(0,a.useCallback)(({target:{value:t}})=>{e("brightness",+t)},[e]);return a.createElement(v.A,{flexDirection:"column",gap:g.Ln},y?a.createElement(C,null):null,r.led_mode===S.QV.ETHERLIGHTING?a.createElement(a.Fragment,null,a.createElement(v.A,{height:_.b,alignItems:"center",gap:g.Ln},a.createElement(b.A,{name:"mode",type:"radio",value:S.QZ.SPEED},a.createElement(k.sA,{id:"COMMON_SPEED"})),a.createElement(b.A,{name:"mode",type:"radio",value:S.QZ.NETWORK},a.createElement(k.sA,{id:"COMMON_NETWORK"}))),a.createElement(v.A,{flexDirection:"column",gap:g.kc},a.createElement(v.A,{width:"100%",height:20,justifyContent:"space-between",alignItems:"center"},a.createElement(s.A,{color:"tertiary"},a.createElement(k.sA,{id:"COMMON_COLORS"})),$?a.createElement(m.A,{type:"button",variant:"inline",size:"medium",onClick:P},a.createElement(k.sA,{id:"COMMON_ACTION_RESET"})):null),r.mode===S.QZ.SPEED&&(r[S.QZ.SPEED]||[]).length>0?a.createElement(K,{colors:r[S.QZ.SPEED]||[],portSpeeds:(0,T.MB)(l),onChangeColor:N}):null,r.mode===S.QZ.NETWORK&&(r[S.QZ.NETWORK]||[]).length>0?a.createElement(X,{colors:r[S.QZ.NETWORK]||[],onChangeColor:N,isEmptyVlanTagged:M}):null),a.createElement(v.A,{flexDirection:"column",gap:g.kc},a.createElement(s.A,{color:"tertiary"},a.createElement(k.sA,{id:"COMMON_BRIGHTNESS"})),a.createElement(c.A,{value:r.brightness,withValueIndicator:!0,min:1,valueIndicatorPosition:"right",formatValueIndicatorContent:ee,onChange:V})),a.createElement(d.A,{id:"breathingMode",checked:r.behavior===S.VC.BREATH,onChange:G},a.createElement(v.A,{alignItems:"center",gap:g.YC},a.createElement(k.sA,{id:"DEVICE_PROPERTIES_LABEL_BREATHING_MODE"}),a.createElement(J,{portal:!0,description:a.createElement(k.sA,{id:"DEVICE_PROPERTIES_LABEL_BREATHING_MODE_DESC"})},a.createElement(E.A,{size:"original",isActive:!0})))),H?a.createElement(O.A,{variant:"info",nested:!0,padding:g.kc},a.createElement(k.sA,{id:"DEVICE_ETHERLIGHTING_CHANGE_WARNING"})):null):null)})},551753:(e,t,r)=>{r.d(t,{A:()=>u});var n=r(296540),o=r(758649),a=r(217439),l=r(162420),i=r(823858),s=r(793336),c=r(998837),d=r(46119),m=r(699784),E=r(224948),h=r(294303);const u=(0,n.memo)(({children:e,customIcon:t,link:r,nested:u,extra:p,variant:_="warning",...g})=>{const{motifPalette:{warning:A,danger:f}}=(0,c.u)(),b=(0,n.useMemo)(()=>{switch(_){case"warning":return n.createElement(i.A,{size:"original",color:A,variant:"fill"});case"info":return n.createElement(l.A,{isActive:!0,size:"original",variant:"fill"});case"custom":return t;default:return n.createElement(s.A,{size:"medium",color:f,variant:"fill"})}},[_,A,f,t]),v=(0,n.useCallback)(()=>{d.A.open(r)},[r]);return n.createElement(E.A,{icon:b,nested:u,...g},n.createElement(h.A,{flexDirection:"column",alignItems:"flex-start"},n.createElement(a.A,null,e),n.createElement(a.A,null,r?n.createElement(o.A,{type:"button",variant:"inline",onClick:v},n.createElement(m.sA,{id:"COMMON_LEARN_MORE"})):null),p))})},878237:(e,t,r)=>{r.d(t,{A:()=>E});var n,o=r(296540),a=r(758649),l=r(71479),i=r(825032);!function(e){e.DEFAULT="default",e.HOVER="hover",e.DISABLED="disabled",e.ACTIVE="active"}(n||(n={}));const s={[n.DEFAULT]:{[i.S.LIGHT]:"#d6d9e2",[i.S.DARK]:"#3f3f3f"},[n.HOVER]:{[i.S.LIGHT]:"#7e8190",[i.S.DARK]:"#9d9d9d"},[n.DISABLED]:{[i.S.LIGHT]:"#eeeff3",[i.S.DARK]:"#1e1e1e"},[n.ACTIVE]:{[i.S.LIGHT]:"#a4a7b5",[i.S.DARK]:"#2f2f2f"}},c=(e,t)=>s[t][e],d=(e,t)=>`1px 0px 0px 0px ${c(e,t)}`,m=(0,l.A)(a.A,{shouldForwardProp:e=>"rotate"!==e})`
  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}})=>`${c(e,n.DEFAULT)}`};
  box-shadow: ${({theme:{themeName:e}})=>`${d(e,n.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}})=>`${d(e,n.DISABLED)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${c(e,n.DISABLED)} !important`};
  }
  &:hover {
    z-index: 1;
    box-shadow: ${({theme:{themeName:e}})=>`${d(e,n.HOVER)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${c(e,n.HOVER)} !important`};
    border-right: 0;
    background-color: transparent !important;
  }
  &:active {
    box-shadow: ${({theme:{themeName:e}})=>`${d(e,n.ACTIVE)} !important`};
    border-color: ${({theme:{themeName:e}})=>`${c(e,n.ACTIVE)} !important`};
  }
`,E=({disabled:e,onClick:t,rotate:r})=>o.createElement(m,{variant:"secondary",rotate:r,disabled:e,onClick:t,type:"button"},o.createElement("svg",{width:"4",height:"8",viewBox:"0 0 4 8",fill:"none"},o.createElement("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"})))},879002:(e,t,r)=>{r.d(t,{A:()=>o});var n=r(296540);const o=(e,t,r=[])=>{const o=(0,n.useCallback)(({target:r})=>{e?.current&&r!==e.current&&!e.current.contains(r)&&t()},[t,e?.current]);(0,n.useEffect)(()=>(document.addEventListener("click",o),()=>{document.removeEventListener("click",o)}),[...r,o])}},947045:(e,t,r)=>{r.d(t,{A:()=>d,m:()=>c});var n=r(296540),o=r(860631),a=r(941555),l=r(294303),i=r(956619),s=r(279675);const c="manage",d=({activeItem:e,setFormDirty:t,setFormInvalid:r})=>n.createElement(l.A,{flexDirection:"column"},(0,o.j0)(e)?n.createElement(s.A,{activeItem:e,setFormDirty:t,setFormInvalid:r}):n.createElement(a.Ay,{activeItem:e,setFormDirty:t}),n.createElement(i.A,{activeItem:e,hideSnmp:!0}))}}]);