Issue with list in patterpropperties

General
1

Hello I’m using vue2JS and JSONFORMS.

And I would want use some list within patternProperty but I have some issue with the printing of these.

Here you can find my a screenshot of the issue, the data, jsonformat and uischema :

image
image657×565 29.9 KB

Data :

{
“standard_services”: {
“service1”: {
“dest_ports”: [
“80”
],
“name”: “HTTP”,
“protocol”: “TCP”
},
“service2”: {
“dest_ports”: [
“443”
],
“name”: “HTTPS”,
“protocol”: “TCP”
},
“service3”: {
“dest_ports”: [
“53”
],
“name”: “DNS”,
“protocol”: “UDP”
},
“service4”: {
“dest_ports”: [
“22”
],
“name”: “SSH”,
“protocol”: “TCP”
},
“service5”: {
“dest_ports”: [
“123”
],
“name”: “NTP”,
“protocol”: “UDP”
},
“service6”: {
“dest_ports”: [
“25”
],
“name”: “SMTP”,
“protocol”: “TCP”
},
“service7”: {
“dest_ports”: [
“3389”
],
“name”: “RDP”,
“protocol”: “TCP”
},
“service8”: {
“dest_ports”: [
“3128”
],
“name”: “TCP-3128”,
“protocol”: “TCP”
}
},
“to_from_ein_rules”: {
“rule1”: {
“description”: “Rule to allow access from ein to ssh gateway”,
“direction”: “IN”,
“dst_ips”: [
“10.253.49.1/32”
],
“services”: [
“SSH”,
“RDP”,
“ICMP”
],
“src_ips”:
}
},
“to_from_internet_rules”: {
“rule1”: {
“description”: “Rule to allow access to internet from default lan”,
“direction”: “OUT”,
“dst_ips”: ,
“services”: [
“HTTP”,
“HTTPS”,
“SSH”,
“DNS”,
“NTP”,
“ICMP”
],
“src_ips”: [
“100.81.0.0/24”
]
},
“rule2”: {
“description”: “Rule to allow access to internet from OOB Pods lans”,
“direction”: “OUT”,
“dst_ips”: ,
“services”: [
“HTTP”,
“HTTPS”,
“SSH”,
“DNS”,
“NTP”,
“ICMP”
],
“src_ips”: [
“100.68.0.0/16”
]
}
},
“to_from_intertenant_rules”: {},
“to_from_intra_tenant_rules”: {
“rule1”: {
“description”: “Rule to allow RDP access from sshgw to pod-oob lan”,
“direction”: “IN_OUT”,
“dst_ips”: [
“100.68.0.0/16”
],
“services”: [
“RDP”,
“ICMP”
],
“src_ips”: [
“100.81.0.1/32”
]
}
},
“to_from_other_vrf_rules”: {},
“to_from_pase_rules”: {
“rule1”: {
“description”: “Rule to allow access from pase to ssh gateway”,
“direction”: “IN”,
“dst_ips”: [
“10.242.226.1/32”
],
“services”: [
“SSH”,
“RDP”,
“ICMP”
],
“src_ips”:
}
},
“to_from_servicezone_rules”: {
“rule1”: {
“description”: “Rule to allow access from podOOB to proxy”,
“direction”: “OUT”,
“dst_ips”: [
“100.127.0.1/32”
],
“services”: [
“TCP-3128”
],
“src_ips”: [
“100.68.0.0/16”
]
}
},
“to_from_tpc_ctsi_rules”: {}
}

Schema :

{
“type”: “object”,
“properties”: {
“to_from_internet_rules”: {
“title”: “Internet IN/OUT rules”,
“type”: “object”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: "Source ips (leave blank if any) one internal cidr per rule ",
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any) one internal cidr per rule”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_tpc_ctsi_rules”: {
“type”: “object”,
“title”: “VPN MPLS TPC_CTSI IN/OUT rules”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: “Source ips (leave blank if any)”,
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any)”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_servicezone_rules”: {
“type”: “object”,
“title”: “Service Zone IN/OUT rules”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: “Source ips (leave blank if any)”,
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any)”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_pase_rules”: {
“type”: “object”,
“title”: “Orange Network IN/OUT rules (PASE)”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: "Source ips (leave blank if any) one internal cidr per rule ",
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any) one internal cidr per rule”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_ein_rules”: {
“type”: “object”,
“title”: “Orange Network IN/OUT rules (EIN)”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: "Source ips (leave blank if any) one internal cidr per rule ",
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any) one internal cidr per rule”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_intertenant_rules”: {
“type”: “object”,
“title”: “Intertenant IN/OUT rules”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“src_ips”: {
“type”: “array”,
“items”: {
“type”: “string”
}
},
“dst_ips”: {
“type”: “array”,
“items”: {
“type”: “string”
}
},
“services”: {
“type”: “array”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”
}
}
}
}
},
“to_from_other_vrf_rules”: {
“type”: “object”,
“title”: “Other MPLS VRF IN/OUT rules”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: “Source ips (leave blank if any)”,
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any)”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN”,
“OUT”
]
}
}
}
}
},
“to_from_intra_tenant_rules”: {
“type”: “object”,
“title”: “Intratenant rules”,
“patternProperties”: {
“^(rule[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe the purpose of this rule”
},
“src_ips”: {
“type”: “array”,
“title”: “Source ips (leave blank if any)”,
“maxItems”: 1,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“dst_ips”: {
“type”: “array”,
“title”: “Destination ips (leave blank if any)”,
“items”: {
“type”: “string”,
“pattern”: “^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$”
}
},
“services”: {
“type”: “array”,
“title”: “Services (leave blank if any)”,
“items”: {
“type”: “string”
}
},
“direction”: {
“type”: “string”,
“enum”: [
“IN_OUT”
]
}
}
}
}
},
“standard_services”: {
“type”: “object”,
“title”: “Services definitions”,
“patternProperties”: {
“^(service[0-9]+)$”: {
“type”: “object”,
“properties”: {
“description”: {
“type”: “string”,
“title”: “Describe this service”
},
“name”: {
“type”: “string”
},
“protocol”: {
“type”: “string”,
“enum”: [
“TCP”,
“UDP”
]
},
“dest_ports”: {
“type”: “array”,
“items”: {
“type”: “string”
}
}
}
}
}
}
}
}

UISCHEMA : (j’ai essayé pas mal de trucs mais pas moyen d’afficher quand on est dans une pattern properties)

{
“elements”: [
{
“type”: “Categorization”,
“label”: “Internet Rules”,
“elements”: [
{
“type”: “Category”,
“label”: “Internet Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_internet_rules”
}
]
},
{
“type”: “Category”,
“label”: “Orange TPC_CTSI MPLS Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_tpc_ctsi_rules”
}
]
},
{
“type”: “Category”,
“label”: “Orange Internal Network”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_pase_rules”
},
{
“type”: “Control”,
“scope”: “#/properties/to_from_ein_rules”
}
]
},
{
“type”: “Category”,
“label”: “Intertenant Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_intertenant_rules”
}
]
},
{
“type”: “Category”,
“label”: “Other VRFs Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_other_vrf_rules”
}
]
},
{
“type”: “Category”,
“label”: “Service Zone Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_servicezone_rules”
}
]
},
{
“type”: “Category”,
“label”: “Intratenant Rules”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/to_from_intra_tenant_rules”
}
]
}
]
},
{
“type”: “Control”,
“label”: “Services Definition”,
“scope”: “#/properties/standard_services”
}
]
}

2

Hi @vvalette,

Can you describe in more detail what the issue is?

Note that we no longer support Vue 2. So if there is an issue within JSON Forms for that version, then we will not fix it. Your options are to update to the Vue 3 variant or workaround the issue on your side, using custom renderers.

3

Infact when I want to add some list (e.g dst_port) in a patternproperty I don’t see it as you can see on the screenshot.. Ok I’ll try to migrate to vue3js. This version support patternProperty ?

Bets regards,
Valentin VALETTE

4

@sdirix I forget to identify you.

Best regards

5

@sdirix

Hello, I would like to remind you about my question on the availability of pattern properties on Vue3J ?

6

Hi @vvalette, yes, there it is supported. See here: JSON Forms Vue 3 Vuetify

7

The current vuetify3 with your schema might not show the element to add new properties - there is pull request waiting to be merged that should fix that - you can preview your schema with that version here JSON Forms Vue 3 Vuetify - just switch to the json schema tab and update it with your schema - this preview is part of the following pull request Mixed support by kchobantonov · Pull Request #2409 · eclipsesource/jsonforms · GitHub