Decrease group listing page loading time with lazy roles listing

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.hbs

@@ -117,18 +117,7 @@
                             <h4>
                                 Select user roles to manage group sharing
                                 <br><br>
-                                <div style="max-height: 200px; overflow: scroll">
+                                <div style="max-height: 200px; overflow: scroll" id="rolesListing">
-                                    <br />
-                                    {{#each userRoles}}
-                                        <div class="wr-input-control">
-                                            <label class="wr-input-control checkbox">
-                                                <input class="roleCheckBoxes" type="checkbox"
-                                                       data-role-name="{{this}}" />
-                                            <span class="helper"
-                                                  title="{{this}}">{{this}}</span>
-                                            </label>
-                                        </div>
-                                    {{/each}}
                                 </div>
                             </h4>
                         </div>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/groups.js

@@ -23,10 +23,6 @@ function onRequest(context) {
     var groupPermissions = require("/app/pages/cdmf.page.groups/public/group-permissions.json");
     var currentUser = session.get(constants.USER_SESSION_KEY);
     var page = {};
-    var rolesResult = userModule.getRoles();
-    if (rolesResult.status == "success") {
-        page.userRoles = rolesResult.content;
-    }
     if (currentUser) {
         page.permissions = userModule.getUIPermissions();
         page.permissions.list = stringify(page.permissions);

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.groups/public/js/listing.js

@@ -372,7 +372,7 @@ function attachEvents() {
         $(modalPopupContent).html($('#share-group-w1-modal-content').html());
         showPopup();
 
-        markAlreadySavedUsersRoles(groupId);
+        listAllRoles(groupId);
         var shareGroupNextLink = $("a#share-group-next-link");
         shareGroupNextLink.click(function () {
             var roles = [];
@@ -512,6 +512,41 @@ function markAlreadySavedUsersRoles(groupId) {
         });
 }
 
+function listAllRoles(groupId) {
+    var successCallback = function (data, textStatus, xhr) {
+        data = JSON.parse(data);
+        if (xhr.status == 200) {
+            if (data.roles.length > 0) {
+                var html = "<br/>";
+                for (var i = 0; i < data.roles.length; i++) {
+                    html += '<div class="wr-input-control"><label class="wr-input-control checkbox">' +
+                            '<input class="roleCheckBoxes" type="checkbox" data-role-name="' + data.roles[i] + '" />' +
+                            '<span class="helper" title="' + data.roles[i] + '">' + data.roles[i] +
+                            '</span></label></div>';
+                    $('.roleCheckBoxes').each(
+                        function () {
+                            if (data.roles[i] == $(this).data('role-name')) {
+                                $(this).attr('checked', true);
+                            }
+                        }
+                    );
+                }
+                $("#rolesListing").html(html);
+                markAlreadySavedUsersRoles(groupId);
+            } else {
+                $("#rolesListing").html("No roles available");
+            }
+        } else {
+            displayErrors(xhr);
+        }
+    };
+
+    invokerUtil.get("/api/device-mgt/v1.0/roles?offset=0&limit=100&user-store=all",
+                    successCallback, function (message) {
+            displayErrors(message);
+        });
+}
+
 function addNewRole(roles) {
     $(modalPopupContent).html($('#share-group-w3-modal-content').html());
     $("a#share-group-w3-yes-link").click(function () {