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 PhoneIcon from 'react-icons/lib/md/phone'; 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 Subscriber = 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, subscriber, onEdit, onDelete, onHide }) => { const imsi = (subscriber || {}).imsi; const msisdn_list = ((subscriber || {}).msisdn || []); const imeisv = (subscriber || {}).imeisv; const security = ((subscriber || {}).security || {}); const ambr = ((subscriber || {}).ambr || {}); const slice_list = ((subscriber || {}).slice || []); return (
{imsi}
onEdit(imsi)}> onDelete(imsi)}>
Subscriber Configuration
{(msisdn_list.length !== 0 || (imeisv && imeisv.length !== 0)) &&
{msisdn_list.map((msisdn, index) =>
{msisdn} MSISDN
)} {imeisv && imeisv.length !== 0 &&
{imeisv} IMEISV
}
}
{security.k} K
{security.opc &&
{security.opc} OPc
} {security.op &&
{security.op} OP
}
{security.amf} AMF
{security.sqn &&
{security.sqn} SQN
}
{ambr['downlink'] === undefined ? "unlimited" : ambr.downlink['value'] === undefined ? "unlimited" : ambr.downlink.value } {ambr['downlink'] === undefined ? "unlimited" : ambr.downlink['value'] === undefined ? "" : ambr.downlink['unit'] === undefined ? "bps" : ambr.downlink.unit === 0 ? "bps" : ambr.downlink.unit === 1 ? "Kbps" : ambr.downlink.unit === 2 ? "Mbps" : ambr.downlink.unit === 3 ? "Gbps" : ambr.downlink.unit === 4 ? "Tbps" : "Unknown Unit" } DL
{ambr['uplink'] === undefined ? "unlimited" : ambr.uplink['value'] === undefined ? "unlimited" : ambr.uplink.value } {ambr['uplink'] === undefined ? "unlimited" : ambr.uplink['value'] === undefined ? "" : ambr.uplink['unit'] === undefined ? "bps" : ambr.uplink.unit === 0 ? "bps" : ambr.uplink.unit === 1 ? "Kbps" : ambr.uplink.unit === 2 ? "Mbps" : ambr.uplink.unit === 3 ? "Gbps" : ambr.uplink.unit === 4 ? "Tbps" : "Unknown Unit" } UL
{slice_list.map((slice, index) =>
{slice.sd === undefined ?
SST:{slice.sst} {slice.default_indicator == true ? "(Default S-NSSAI)" : ""}
:
SST:{slice.sst} SD:{slice.sd} {slice.default_indicator == true ? "(Default S-NSSAI)" : ""}
}
DNN/APN
Type
5QI/QCI
ARP
Capability
Vulnerablility
MBR DL/UL
GBR DL/UL
{slice['session'] !== undefined && slice.session.map(session =>
{session.name}
{ session.type === 1 ? "IPv4" : session.type === 2 ? "IPv6" : session.type === 3 ? "IPv4v6" : "Unknown" }
{session.qos.index}
{session.qos.arp.priority_level}
{session.qos.arp.pre_emption_capability === 2 ? "Enabled" : session.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Unknown"}
{session.qos.arp.pre_emption_vulnerability === 2 ? "Enabled" : session.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Unknown"}
{session['ambr'] === undefined ?
unlimited/unlimited
:
{session.ambr['downlink'] === undefined ? "unlimited" : session.ambr.downlink['value'] === undefined ? "unlimited" : session.ambr.downlink.value } {session.ambr['downlink'] === undefined ? "unlimited" : session.ambr.downlink['value'] === undefined ? "" : session.ambr.downlink['unit'] === undefined ? "bps" : session.ambr.downlink.unit === 0 ? "bps" : session.ambr.downlink.unit === 1 ? "Kbps" : session.ambr.downlink.unit === 2 ? "Mbps" : session.ambr.downlink.unit === 3 ? "Gbps" : session.ambr.downlink.unit === 4 ? "Tbps" : "Unknown Unit" } / {session.ambr['uplink'] === undefined ? "unlimited" : session.ambr.uplink['value'] === undefined ? "unlimited" : session.ambr.uplink.value } {session.ambr['uplink'] === undefined ? "unlimited" : session.ambr.uplink['value'] === undefined ? "" : session.ambr.uplink['unit'] === undefined ? "bps" : session.ambr.uplink.unit === 0 ? "bps" : session.ambr.uplink.unit === 1 ? "Kbps" : session.ambr.uplink.unit === 2 ? "Mbps" : session.ambr.uplink.unit === 3 ? "Gbps" : session.ambr.uplink.unit === 4 ? "Tbps" : "Unknown Unit" }
}
{session['ue'] !== undefined &&
{"UE IPv4"}
{(session.ue || {}).addr}
{"UE IPv6"}
{(session.ue || {}).addr6}
} {session['smf'] !== undefined &&
{"SMF IPv4"}
{(session.smf || {}).addr}
{"SMF IPv6"}
{(session.smf || {}).addr6}
} {session['pcc_rule'] !== undefined && session.pcc_rule.map((pcc_rule, index) =>
{pcc_rule.qos.index}
{pcc_rule.qos.arp.priority_level}
{pcc_rule.qos.arp.pre_emption_capability === 2 ? "Enabled" : pcc_rule.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Unknown"}
{pcc_rule.qos.arp.pre_emption_vulnerability === 2 ? "Enabled" : pcc_rule.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Unknown"}
{pcc_rule.qos['mbr'] === undefined ?
unlimited/unlimited
:
{pcc_rule.qos.mbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.downlink['value'] === undefined ? "unlimited" : pcc_rule.qos.mbr.downlink.value } {pcc_rule.qos.mbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.downlink['value'] === undefined ? "" : pcc_rule.qos.mbr.downlink['unit'] === undefined ? "bps" : pcc_rule.qos.mbr.downlink.unit === 0 ? "bps" : pcc_rule.qos.mbr.downlink.unit === 1 ? "Kbps" : pcc_rule.qos.mbr.downlink.unit === 2 ? "Mbps" : pcc_rule.qos.mbr.downlink.unit === 3 ? "Gbps" : pcc_rule.qos.mbr.downlink.unit === 4 ? "Tbps" : "Unknown Unit" } / {pcc_rule.qos.mbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.uplink['value'] === undefined ? "unlimited" : pcc_rule.qos.mbr.uplink.value } {pcc_rule.qos.mbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.uplink['value'] === undefined ? "" : pcc_rule.qos.mbr.uplink['unit'] === undefined ? "bps" : pcc_rule.qos.mbr.uplink.unit === 0 ? "bps" : pcc_rule.qos.mbr.uplink.unit === 1 ? "Kbps" : pcc_rule.qos.mbr.uplink.unit === 2 ? "Mbps" : pcc_rule.qos.mbr.uplink.unit === 3 ? "Gbps" : pcc_rule.qos.mbr.uplink.unit === 4 ? "Tbps" : "Unknown Unit" }
} {pcc_rule.qos['gbr'] === undefined ?
unlimited/unlimited
:
{pcc_rule.qos.gbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.downlink['value'] === undefined ? "unlimited" : pcc_rule.qos.gbr.downlink.value } {pcc_rule.qos.gbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.downlink['value'] === undefined ? "" : pcc_rule.qos.gbr.downlink['unit'] === undefined ? "bps" : pcc_rule.qos.gbr.downlink.unit === 0 ? "bps" : pcc_rule.qos.gbr.downlink.unit === 1 ? "Kbps" : pcc_rule.qos.gbr.downlink.unit === 2 ? "Mbps" : pcc_rule.qos.gbr.downlink.unit === 3 ? "Gbps" : pcc_rule.qos.gbr.downlink.unit === 4 ? "Tbps" : "Unknown Unit" } / {pcc_rule.qos.gbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.uplink['value'] === undefined ? "unlimited" : pcc_rule.qos.gbr.uplink.value } {pcc_rule.qos.gbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.uplink['value'] === undefined ? "" : pcc_rule.qos.gbr.uplink['unit'] === undefined ? "bps" : pcc_rule.qos.gbr.uplink.unit === 0 ? "bps" : pcc_rule.qos.gbr.uplink.unit === 1 ? "Kbps" : pcc_rule.qos.gbr.uplink.unit === 2 ? "Mbps" : pcc_rule.qos.gbr.uplink.unit === 3 ? "Gbps" : pcc_rule.qos.gbr.uplink.unit === 4 ? "Tbps" : "Unknown Unit" }
}
{pcc_rule['flow'] !== undefined && pcc_rule.flow.map((flow, index) =>
{flow.direction == 1 && "Downlink"} {flow.direction == 2 && "Uplink"}
{flow.description}
)}
)}
)}
)}
) } export default View;