PCC Rule, Flow is added in Web User Interface

This commit is contained in:
Sukchan Lee 2017-08-22 13:09:28 +09:00
parent 75c7337e0c
commit 3c8dc911bd
5 changed files with 289 additions and 54 deletions

View File

@ -30,9 +30,9 @@ const Subscriber = new Schema({
default: 12 // minites
},
ue_ambr: {
max_bandwidth_ul: Number,
max_bandwidth_dl: Number
ambr: {
downlink: Number,
uplink: Number
},
pdn: [{
@ -45,17 +45,42 @@ const Subscriber = new Schema({
arp: {
priority_level: Number,
pre_emption_capability: {
$type: Number, default: 1 // Capability Disabled
$type: Number, default: 1 // Capability Disabled
},
pre_emption_vulnerability: {
$type : Number, default: 1 // Vulnerability Disabled
$type : Number, default: 1 // Vulnerability Disabled
}
}
},
pdn_ambr: {
max_bandwidth_ul: Number,
max_bandwidth_dl: Number
}
ambr: {
downlink: Number,
uplink: Number
},
pcc_rule: [{
flow: [{
description: String
}],
qos: {
qci: Number,
arp: {
priority_level: Number,
pre_emption_capability: {
$type: Number, default: 1 // Capability Disabled
},
pre_emption_vulnerability: {
$type : Number, default: 1 // Vulnerability Disabled
}
},
mbr: {
downlink: Number,
uplink: Number
},
gbr: {
downlink: Number,
uplink: Number
},
},
}]
}]
}, { typeKey: '$type' });

View File

@ -16,7 +16,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
postion: relative;
width: 800px;
width: 1050px;
${media.mobile`
width: calc(100vw - 2rem);
@ -39,7 +39,7 @@ const Body = styled.div`
padding: 2rem;
font-size: 14px;
height: 400px;
height: 500px;
${media.mobile`
height: calc(100vh - 16rem);
`}

View File

@ -5,7 +5,7 @@ import withWidth, { SMALL } from 'helpers/with-width';
import { Form } from 'components';
const schema = {
"title": "Subscriber",
"title": "Subscriber Configuration",
"type": "object",
"properties": {
"imsi": {
@ -51,16 +51,16 @@ const schema = {
}
}
},
"ue_ambr": {
"ambr": {
"type": "object",
"title": "",
"properties": {
"max_bandwidth_dl": {
"downlink": {
"type": "number",
"title": "UE-AMBR Downlink (Kbps)*",
"required": true
},
"max_bandwidth_ul": {
"uplink": {
"type": "number",
"title": "UE-AMBR Uplink (Kbps)*",
"required": true
@ -69,12 +69,12 @@ const schema = {
},
"pdn": {
"type": "array",
"title": "EPS Session",
"title": "APN Configurations",
"minItems": 1,
"maxItems": 8,
"messages": {
"minItems": "At least 1 PDN is required",
"maxItems": "8 PDNs are supported"
"minItems": "At least 1 APN is required",
"maxItems": "8 APNs are supported"
},
"items": {
"type": "object",
@ -92,7 +92,7 @@ const schema = {
"type": "number",
"title": "QoS Class Identifier (QCI)*",
"enum": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 65, 66, 69, 70 ],
"default": 9
"default": 9,
},
"arp" : {
"type": "object",
@ -112,7 +112,6 @@ const schema = {
"enum": [1, 0],
"enumNames": ["Disabled", "Enabled"],
"default": 1,
"required": true
},
"pre_emption_vulnerability": {
"type": "number",
@ -123,25 +122,129 @@ const schema = {
"enum": [1, 0],
"enumNames": ["Disabled", "Enabled"],
"default": 1,
"required": true
},
}
}
}
},
"pdn_ambr": {
"ambr": {
"type": "object",
"title": "",
"properties": {
"max_bandwidth_dl": {
"downlink": {
"type": "number",
"title": "APN-AMBR Downlink (Kbps)",
},
"max_bandwidth_ul": {
"uplink": {
"type": "number",
"title": "APN-AMBR Uplink (Kbps)",
},
}
},
"pcc_rule": {
"type": "array",
"title": "PCC Rules",
"maxItems": 16,
"messages": {
"maxItems": "16 PCC Rules are supported"
},
"items": {
"type": "object",
"properties": {
"flow": {
"type": "array",
"title": "",
"minItems": 1,
"maxItems": 16,
"messages": {
"minItems": "At least 1 Flow is required",
"maxItems": "16 Flows are supported"
},
"items": {
"type": "object",
"properties": {
"description": {
"type": "string",
"title": "Flow Description*",
"default": "permit in ip from any to any",
"required": true
}
}
}
},
"qos": {
"type": "object",
"title": "",
"properties": {
"qci": {
"type": "number",
"title": "QoS Class Identifier (QCI)*",
"enum": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 65, 66, 69, 70 ],
"default": 9,
},
"arp" : {
"type": "object",
"title": "",
"properties": {
"priority_level": {
"type": "number",
"title": "ARP Priority Level (1-15)*",
"default": 8,
"minimum": 1,
"maximum": 15,
"required": true
},
"pre_emption_capability": {
"type": "number",
"title": "Capability*",
"enum": [1, 0],
"enumNames": ["Disabled", "Enabled"],
"default": 1,
},
"pre_emption_vulnerability": {
"type": "number",
"title": "Vulnerability*",
"default": 1,
"minimum": 0,
"maximum": 1,
"enum": [1, 0],
"enumNames": ["Disabled", "Enabled"],
"default": 1,
},
}
},
"mbr": {
"type": "object",
"title": "",
"properties": {
"downlink": {
"type": "number",
"title": "MBR Downlink (Kbps)",
},
"uplink": {
"type": "number",
"title": "MBR Uplink (Kbps)",
},
}
},
"gbr": {
"type": "object",
"title": "",
"properties": {
"downlink": {
"type": "number",
"title": "GBR Downlink (Kbps)",
},
"uplink": {
"type": "number",
"title": "GBR Uplink (Kbps)",
},
}
},
},
},
}
}
}
}
}
@ -164,18 +267,15 @@ const uiSchema = {
classNames: "col-xs-5",
},
},
"ue_ambr" : {
"max_bandwidth_dl" : {
"ambr" : {
"downlink" : {
classNames: "col-xs-6"
},
"max_bandwidth_ul" : {
"uplink" : {
classNames: "col-xs-6"
},
},
"pdn": {
"ui:options": {
"orderable": false
},
"items": {
"qos": {
"qci": {
@ -196,13 +296,55 @@ const uiSchema = {
}
}
},
"pdn_ambr" : {
"max_bandwidth_dl" : {
"ambr" : {
"downlink" : {
classNames: "col-xs-6"
},
"max_bandwidth_ul" : {
"uplink" : {
classNames: "col-xs-6"
},
},
"pcc_rule": {
"items": {
"flow": {
"ui:help": "Hint: See IPFilterRule in RFC 3588!"
},
"qos": {
"qci": {
"ui:widget": "radio",
"ui:options": {
"inline": true
},
},
"arp": {
"priority_level": {
classNames: "col-xs-6"
},
"pre_emption_capability": {
classNames: "col-xs-3"
},
"pre_emption_vulnerability": {
classNames: "col-xs-3"
}
},
"mbr": {
"downlink": {
classNames: "col-xs-6"
},
"uplink": {
classNames: "col-xs-6"
}
},
"gbr": {
"downlink": {
classNames: "col-xs-6"
},
"uplink": {
classNames: "col-xs-6"
}
}
}
}
}
}
}
@ -307,4 +449,4 @@ class Edit extends Component {
}
}
export default withWidth()(Edit);
export default withWidth()(Edit);

View File

@ -18,7 +18,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
postion: relative;
width: 600px;
width: 900px;
${media.mobile`
width: calc(100vw - 4rem);
@ -80,7 +80,7 @@ const Body = styled.div`
display: block;
margin: 0.5rem;
height: 400px;
height: 500px;
${media.mobile`
height: calc(100vh - 16rem);
`}
@ -141,17 +141,27 @@ const Pdn = styled.div`
flex:1;
margin: 0px 32px;
.data {
.small_data {
width: 40px;
font-size: 12px;
margin: 4px;
}
.medium_data {
width: 80px;
font-size: 12px;
margin: 4px;
}
.large_data {
width: 160px;
font-size: 12px;
margin: 4px;
}
}
`
const View = ({ visible, disableOnClickOutside, subscriber, onEdit, onDelete, onHide }) => {
const imsi = (subscriber || {}).imsi;
const security = ((subscriber || {}).security || {});
const ue_ambr = ((subscriber || {}).ue_ambr || {});
const ambr = ((subscriber || {}).ambr || {});
const pdns = ((subscriber || {}).pdn || []);
return (
@ -178,7 +188,7 @@ const View = ({ visible, disableOnClickOutside, subscriber, onEdit, onDelete, on
<Body>
<Subscriber>
<div className="header">
Subscriber Details
Subscriber Configuration
</div>
<div className="body">
<div className="left">
@ -217,11 +227,11 @@ const View = ({ visible, disableOnClickOutside, subscriber, onEdit, onDelete, on
</div>
<div className="right">
<div className="data">
{ue_ambr.max_bandwidth_ul} Kbps
{ambr.downlink} Kbps
<span style={{color:oc.gray[5]}}><KeyboardControlIcon/>UL</span>
</div>
<div className="data">
{ue_ambr.max_bandwidth_dl} Kbps
{ambr.uplink} Kbps
<span style={{color:oc.gray[5]}}><KeyboardControlIcon/>DL</span>
</div>
</div>
@ -229,20 +239,78 @@ const View = ({ visible, disableOnClickOutside, subscriber, onEdit, onDelete, on
</Subscriber>
<Pdn>
<div className="header">
PDN
APN Configrations
</div>
<div className="body" style={{color:oc.gray[5]}}>
<div className="data">APN</div>
<div className="data">QCI</div>
<div className="data">ARP</div>
<div className="data">UL/DL(Kbps)</div>
<div className="medium_data">APN</div>
<div className="small_data">QCI</div>
<div className="small_data">ARP</div>
<div className="medium_data">Capability</div>
<div className="medium_data">Vulnerablility</div>
<div className="large_data">MBR DL/UL(Kbps)</div>
<div className="large_data">GBR DL/UL(Kbps)</div>
</div>
{pdns.map(pdn =>
<div className="body" key={pdn.apn}>
<div className="data">{pdn.apn}</div>
<div className="data">{pdn.qos.qci}</div>
<div className="data">{pdn.qos.arp.priority_level}</div>
<div className="data">{pdn.pdn_ambr.max_bandwidth_ul}/{pdn.pdn_ambr.max_bandwidth_ul}</div>
<div key={pdn.apn}>
<div className="body">
<div className="medium_data">{pdn.apn}</div>
<div className="small_data">{pdn.qos.qci}</div>
<div className="small_data">{pdn.qos.arp.priority_level}</div>
<div className="medium_data">{pdn.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Enabled"}</div>
<div className="medium_data">{pdn.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Enabled"}</div>
{pdn['ambr'] === undefined ?
<div className="large_data">
unlimited/unlimited
</div> :
<div className="large_data">
{pdn.ambr['downlink'] === undefined ? "unlimited" : pdn.ambr.downlink}
/
{pdn.ambr['uplink'] === undefined ? "unlimited" : pdn.ambr.uplink}
</div>
}
</div>
{pdn['pcc_rule'] !== undefined &&
pdn.pcc_rule.map(pcc_rule =>
<div>
<div className="body">
<div className="medium_data"></div>
<div className="small_data">{pcc_rule.qos.qci}</div>
<div className="small_data">{pcc_rule.qos.arp.priority_level}</div>
<div className="medium_data">{pcc_rule.qos.arp.pre_emption_capability === 1 ? "Disabled" : "Enabled"}</div>
<div className="medium_data">{pcc_rule.qos.arp.pre_emption_vulnerability === 1 ? "Disabled" : "Enabled"}</div>
{pcc_rule.qos['mbr'] === undefined ?
<div className="large_data">
unlimited/unlimited
</div> :
<div className="large_data">
{pcc_rule.qos.mbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.downlink}
/
{pcc_rule.qos.mbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.mbr.uplink}
</div>
}
{pcc_rule.qos['gbr'] === undefined ?
<div className="large_data">
unlimited/unlimited
</div> :
<div className="large_data">
{pcc_rule.qos.gbr['downlink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.downlink}
/
{pcc_rule.qos.gbr['uplink'] === undefined ? "unlimited" : pcc_rule.qos.gbr.uplink}
</div>
}
</div>
{pcc_rule['flow'] !== undefined &&
pcc_rule.flow.map(flow =>
<div className="body" key={flow.description}>
<div className="medium_data"></div>
<div className="small_data" style={{color:oc.gray[5]}}>FLOW</div>
<div className="large_data" style={{width:"640px"}}>{flow.description}</div>
</div>
)
}
</div>
)
}
</div>
)}
</Pdn>

View File

@ -17,9 +17,9 @@ const formData = {
op: "5F1D289C 5D354D0A 140C2548 F5F3E3BA",
amf: "8000"
},
"ue_ambr": {
"max_bandwidth_ul": 1024000,
"max_bandwidth_dl": 1024000
"ambr": {
"downlink": 1024000,
"uplink": 1024000
},
"pdn": [
{