import PropTypes from 'prop-types'; import styled from 'styled-components'; import oc from 'open-color'; import { media } from 'helpers/style-utils'; import EditIcon from 'react-icons/lib/md/edit'; import DeleteIcon from 'react-icons/lib/md/delete'; import CloseIcon from 'react-icons/lib/md/close'; import SecurityIcon from 'react-icons/lib/md/security'; import PdnIcon from 'react-icons/lib/md/cast'; import KeyboardControlIcon from 'react-icons/lib/md/keyboard-control'; import { Modal, Tooltip, Dimmed } from 'components'; const Wrapper = styled.div` display: flex; flex-direction: column; postion: relative; width: 900px; ${media.mobile` width: calc(100vw - 4rem); `} background: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); ` const Header = styled.div` position: relative; display: flex; background: ${oc.gray[1]}; .title { padding: 1.5rem; color: ${oc.gray[8]}; font-size: 1.5rem; } .actions { position: absolute; top: 0; right: 0; width: 8rem; height: 100%; display: flex; align-items: center; justify-content: center; } `; const CircleButton = styled.div` height: 2rem; width: 2rem; display: flex; align-items: center; justify-content: center; margin: 1px; color: ${oc.gray[6]}; border-radius: 1rem; font-size: 1.5rem; &:hover { color: ${oc.indigo[6]}; } &.delete { &:hover { color: ${oc.pink[6]}; } } ` const Body = styled.div` display: block; margin: 0.5rem; height: 500px; ${media.mobile` height: calc(100vh - 16rem); `} overflow: scroll; ` const Profile = styled.div` display: flex; flex-direction: column; margin: 0, auto; color: ${oc.gray[9]}; .header { margin: 12px; font-size: 16px; } .body { display: flex; flex-direction: row; flex:1; margin: 6px; .left { width: 80px; text-align: center; font-size: 18px; color: ${oc.gray[6]}; } .right { display: flex; flex-direction: column; flex:1; .data { flex:1; font-size: 12px; margin: 4px; } } } ` const Pdn = styled.div` display: flex; flex-direction: column; margin: 0 auto; color: ${oc.gray[9]}; .header { margin: 12px; font-size: 16px; } .body { display: flex; flex-direction: row; flex:1; margin: 0px 32px; .small_data { width: 50px; font-size: 12px; margin: 4px; } .medium_data { width: 80px; font-size: 12px; margin: 4px; } .large_data { width: 140px; font-size: 12px; margin: 4px; } } ` const View = ({ visible, disableOnClickOutside, profile, onEdit, onDelete, onHide }) => { const _id = (profile || {})._id; const title = (profile || {}).title; const security = ((profile || {}).security || {}); const ambr = ((profile || {}).ambr || {}); const pdns = ((profile || {}).pdn || []); return (

{title}

onEdit(_id)}> onDelete(_id)}>

Profile Configuration

{security.k} K

{security.opc &&

{security.opc} OPc

} {security.op &&

{security.op} OP

}

{security.amf} AMF

{security.rand &&

{security.rand} RAND

} {security.sqn &&

{security.sqn} SQN

}

{ambr.downlink} Kbps UL

{ambr.uplink} Kbps DL

APN Configrations

APN

QCI

ARP

Capability

Vulnerablility

MBR DL/UL(Kbps)

GBR DL/UL(Kbps)

{pdns.map(pdn =>

{pdn.apn}

{pdn.qos.qci}

{pdn.qos.arp.priority_level}

{pdn.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Enabled"}

{pdn.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Enabled"}

{pdn['ambr'] === undefined ?

unlimited/unlimited

:

{pdn.ambr['downlink'] === undefined ? "unlimited" : pdn.ambr.downlink} / {pdn.ambr['uplink'] === undefined ? "unlimited" : pdn.ambr.uplink}

}

{pdn['ue'] !== undefined &&

{"UE IPv4"}

{(pdn.ue || {}).addr}

{"UE IPv6"}

{(pdn.ue || {}).addr6}

} {pdn['pgw'] !== undefined &&

{"PGW IPv4"}

{(pdn.pgw || {}).addr}

{"PGW IPv6"}

{(pdn.pgw || {}).addr6}

} {pdn['pcc_rule'] !== undefined && pdn.pcc_rule.map((pcc_rule, index) =>

{pcc_rule.qos.qci}

{pcc_rule.qos.arp.priority_level}

{pcc_rule.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Enabled"}

{pcc_rule.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Enabled"}

{pcc_rule.qos['mbr'] === undefined ?

unlimited/unlimited

:

{pcc_rule.qos.mbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.downlink} / {pcc_rule.qos.mbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.uplink}

} {pcc_rule.qos['gbr'] === undefined ?

unlimited/unlimited

:

{pcc_rule.qos.gbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.downlink} / {pcc_rule.qos.gbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.uplink}

}

{pcc_rule['flow'] !== undefined && pcc_rule.flow.map((flow, index) =>

{flow.direction == 1 && "Downlink"} {flow.direction == 2 && "Uplink"}

{flow.description}

) }

) }

)}

) } export default View;