Large amount of roles cause an important wait when viewing a Switch

[nqb]

Describe the bug In 11.1.0 setup with more than 100 roles and around 300 switches, when you go in Switches menu and select a switch, your web browser freeze for several seconds before you can edit a field.

To Reproduce Steps to reproduce the behavior:

1. Setup with more than 100 roles and 300 switches
2. Go to Switches menu
3. Click on a switch

=> Your web browser will freeze for several seconds.

Expected behavior No freeze, possibility to edit fields.

Additional context @satkunas has made a fix

[nqb]

@satkunas, fix is working fine with a minimal change in UI 👍 I noticed one thing that can be perhaps improved, when I click on "Roles", frontend displays "Role mapping by VLAN ID". If I try to enter a value in a field, it takes some time to see what have been enter on the keyboard (like we have previously in GUI before you performed improvements).

[nqb]

@satkunas, issue is gone with latest commit.

@jrouzierinverse, with configuration described below and fixes you pushed previously, it takes ~5 seconds to save a change on a switch: do you think this can be improve ?

[jrouzierinverse]

@nqb did you verify if this was coming from the backend?

[nqb]

@jrouzierinverse, I think it comes from the backend.

I verified with:

# time cat payload.json | pfperl-api get -M PATCH /api/v1/config/switch/172.16.60.12 | python -m json.tool
{
    "message": "Settings updated",
    "status": 200
}

real    0m11.739s
user    0m10.930s
sys     0m0.468s

payload.json contains what is sent by the frontend when I updated a switch.

[jrouzierinverse]

The slowness seems to be coming from the number of switches. Since the number of switches + the number of sub-resources built for pfconfig inline seems to cause the slowness. I would need to discuss with @julsemaan the best approach how not to build these resources inline. Or maybe we could merge some of these resources to increase speed.

[nqb]

@satkunas and @jrouzierinverse, I'm still having this issue on a customer deployment (11.2.0 + all maintenance patches) with:

• 115 roles
• 196 switches

It takes a while to load informations when you click on a switch and when you save.

@satkunas, would it be possible to make your rebase your branch on maintenance/11.2 ? Patch doesn't apply:

error: patch failed: html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue:126
error: html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheForm.vue: patch does not apply
error: patch failed: html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue:128
error: html/pfappserver/root/src/views/Configuration/switches/_components/TheForm.vue: patch does not apply

I used this URL: https://github.com/inverse-inc/packetfence/compare/maintenance/11.2...fix/switches-lazy-tabs.diff

Thanks !