Merge pull request #507 from charithag/release-2.0.x-Grouping-Fixes

Fixed following issues:

components/device-mgt/org.wso2.carbon.device.mgt.api/src/main/java/org/wso2/carbon/device/mgt/jaxrs/beans/DeviceToGroupsAssignment.java

@@ -0,0 +1,56 @@
+/*
+ *   Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ *   WSO2 Inc. licenses this file to you under the Apache License,
+ *   Version 2.0 (the "License"); you may not use this file except
+ *   in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing,
+ *   software distributed under the License is distributed on an
+ *   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ *   KIND, either express or implied.  See the License for the
+ *   specific language governing permissions and limitations
+ *   under the License.
+ *
+ */
+package org.wso2.carbon.device.mgt.jaxrs.beans;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.annotations.ApiModelProperty;
+import org.wso2.carbon.device.mgt.common.DeviceIdentifier;
+import org.wso2.carbon.device.mgt.jaxrs.beans.BasePaginatedResult;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class DeviceToGroupsAssignment extends BasePaginatedResult {
+
+    @ApiModelProperty(value = "List of device group ids.")
+    @JsonProperty("deviceGroupIds")
+    private List<Integer> deviceGroupIds = new ArrayList<>();
+
+    @ApiModelProperty(value = "Device identifier of the device needed to be assigned with group")
+    @JsonProperty("deviceIdentifier")
+    private DeviceIdentifier deviceIdentifier;
+
+
+    public List<Integer> getDeviceGroupIds() {
+        return deviceGroupIds;
+    }
+
+    public void setDeviceGroupIds(List<Integer> deviceGroupIds) {
+        this.deviceGroupIds = deviceGroupIds;
+    }
+
+    public DeviceIdentifier getDeviceIdentifier() {
+        return deviceIdentifier;
+    }
+
+    public void setDeviceIdentifier(DeviceIdentifier deviceIdentifier) {
+        this.deviceIdentifier = deviceIdentifier;
+    }
+
+}

components/device-mgt/org.wso2.carbon.device.mgt.api/src/main/java/org/wso2/carbon/device/mgt/jaxrs/service/api/GroupManagementService.java

@@ -37,6 +37,7 @@ import org.wso2.carbon.device.mgt.common.DeviceIdentifier;
 import org.wso2.carbon.device.mgt.common.group.mgt.DeviceGroup;
 import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceGroupList;
 import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceList;
+import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceToGroupsAssignment;
 import org.wso2.carbon.device.mgt.jaxrs.beans.ErrorResponse;
 import org.wso2.carbon.device.mgt.jaxrs.beans.RoleList;
 
@@ -774,4 +775,115 @@ public interface GroupManagementService {
                                             required = true)
                                     @Valid List<DeviceIdentifier> deviceIdentifiers);
 
+    @Path("/device/assign")
+    @POST
+    @ApiOperation(
+            produces = MediaType.APPLICATION_JSON,
+            httpMethod = HTTPConstants.HEADER_POST,
+            value = "Assign devices to groups",
+            notes = "Add existing device to device groups.",
+            tags = "Device Group Management",
+            authorizations = {
+                    @Authorization(
+                            value = "permission",
+                            scopes = {@AuthorizationScope(scope = "/device-mgt/groups/devices/add",
+                                    description = "Add devices")}
+                    )
+            }
+    )
+    @ApiResponses(value = {
+            @ApiResponse(code = 200, message = "OK. \n Successfully assign the device to groups.",
+                    responseHeaders = {
+                            @ResponseHeader(
+                                    name = "Content-Type",
+                                    description = "The content type of the body"),
+                            @ResponseHeader(
+                                    name = "ETag",
+                                    description = "Entity Tag of the response resource.\n" +
+                                                  "Used by caches, or in conditional requests."),
+                            @ResponseHeader(
+                                    name = "Last-Modified",
+                                    description = "Date and time the resource has been modified the last time.\n" +
+                                                  "Used by caches, or in conditional requests."),
+                    }),
+            @ApiResponse(
+                    code = 304,
+                    message = "Not Modified. \n Empty body because the client has already the latest version of " +
+                              "the requested resource."),
+            @ApiResponse(
+                    code = 404,
+                    message = "No groups found.",
+                    response = ErrorResponse.class),
+            @ApiResponse(
+                    code = 406,
+                    message = "Not Acceptable.\n The requested media type is not supported."),
+            @ApiResponse(
+                    code = 500,
+                    message = "Internal Server Error. \n Server error occurred while adding devices to the group.",
+                    response = ErrorResponse.class)
+    })
+    Response updateDeviceAssigningToGroups(
+            @ApiParam(
+                    name = "deviceToGroupsAssignment",
+                    value = "Device to groups assignment",
+                    required = true)
+            @Valid DeviceToGroupsAssignment deviceToGroupsAssignment);
+
+    @Path("/device")
+    @GET
+    @ApiOperation(
+            produces = MediaType.APPLICATION_JSON,
+            httpMethod = HTTPConstants.HEADER_GET,
+            value = "List of groups that have the device",
+            notes = "List of groups that have the device.",
+            tags = "Device Group Management",
+            authorizations = {
+                    @Authorization(
+                            value = "permission",
+                            scopes = {@AuthorizationScope(scope = "/device-mgt/groups/devices/view",
+                                    description = "Add devices")}
+                    )
+            }
+    )
+    @ApiResponses(value = {
+            @ApiResponse(code = 200, message = "OK.",
+                    responseHeaders = {
+                            @ResponseHeader(
+                                    name = "Content-Type",
+                                    description = "The content type of the body"),
+                            @ResponseHeader(
+                                    name = "ETag",
+                                    description = "Entity Tag of the response resource.\n" +
+                                                  "Used by caches, or in conditional requests."),
+                            @ResponseHeader(
+                                    name = "Last-Modified",
+                                    description = "Date and time the resource has been modified the last time.\n" +
+                                                  "Used by caches, or in conditional requests."),
+                    }),
+            @ApiResponse(
+                    code = 304,
+                    message = "Not Modified. \n Empty body because the client has already the latest version of " +
+                              "the requested resource."),
+            @ApiResponse(
+                    code = 404,
+                    message = "No groups found.",
+                    response = ErrorResponse.class),
+            @ApiResponse(
+                    code = 406,
+                    message = "Not Acceptable.\n The requested media type is not supported."),
+            @ApiResponse(
+                    code = 500,
+                    message = "Internal Server Error. \n Server error occurred.",
+                    response = ErrorResponse.class)
+    })
+    Response getGroups(
+            @ApiParam(
+                    name = "deviceId",
+                    value = "Id of the device.")
+            @QueryParam("deviceId") String deviceId,
+            @ApiParam(
+                    name = "deviceType",
+                    value = "Type of the device.")
+            @QueryParam("deviceType") String deviceType);
+
 }

components/device-mgt/org.wso2.carbon.device.mgt.api/src/main/java/org/wso2/carbon/device/mgt/jaxrs/service/impl/GroupManagementServiceImpl.java

@@ -21,6 +21,7 @@ package org.wso2.carbon.device.mgt.jaxrs.service.impl;
 
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
+import org.wso2.carbon.CarbonConstants;
 import org.wso2.carbon.context.CarbonContext;
 import org.wso2.carbon.context.PrivilegedCarbonContext;
 import org.wso2.carbon.device.mgt.common.Device;
@@ -35,12 +36,14 @@ import org.wso2.carbon.device.mgt.common.group.mgt.RoleDoesNotExistException;
 import org.wso2.carbon.device.mgt.core.service.GroupManagementProviderService;
 import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceGroupList;
 import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceList;
+import org.wso2.carbon.device.mgt.jaxrs.beans.DeviceToGroupsAssignment;
 import org.wso2.carbon.device.mgt.jaxrs.beans.RoleList;
 import org.wso2.carbon.device.mgt.jaxrs.service.api.GroupManagementService;
 import org.wso2.carbon.device.mgt.jaxrs.service.impl.util.RequestValidationUtil;
 import org.wso2.carbon.device.mgt.jaxrs.util.DeviceMgtAPIUtils;
 
 import javax.ws.rs.core.Response;
+import java.util.ArrayList;
 import java.util.List;
 
 public class GroupManagementServiceImpl implements GroupManagementService {
@@ -243,7 +246,8 @@ public class GroupManagementServiceImpl implements GroupManagementService {
         }
     }
 
-    @Override public Response removeDevicesFromGroup(int groupId, List<DeviceIdentifier> deviceIdentifiers) {
+    @Override
+    public Response removeDevicesFromGroup(int groupId, List<DeviceIdentifier> deviceIdentifiers) {
         try {
             DeviceMgtAPIUtils.getGroupManagementProviderService().removeDevice(groupId, deviceIdentifiers);
             return Response.status(Response.Status.OK).build();
@@ -256,4 +260,45 @@ public class GroupManagementServiceImpl implements GroupManagementService {
         }
     }
 
+    @Override
+    public Response updateDeviceAssigningToGroups(DeviceToGroupsAssignment deviceToGroupsAssignment) {
+        try {
+            List<DeviceIdentifier> deviceIdentifiers = new ArrayList<>();
+            deviceIdentifiers.add(deviceToGroupsAssignment.getDeviceIdentifier());
+            GroupManagementProviderService service = DeviceMgtAPIUtils.getGroupManagementProviderService();
+            List<DeviceGroup> deviceGroups = service.getGroups(deviceToGroupsAssignment.getDeviceIdentifier());
+            for (DeviceGroup group : deviceGroups) {
+                Integer groupId = group.getGroupId();
+                if (deviceToGroupsAssignment.getDeviceGroupIds().contains(groupId)) {
+                    deviceToGroupsAssignment.getDeviceGroupIds().remove(groupId);
+                } else if (!CarbonConstants.REGISTRY_SYSTEM_USERNAME.equals(group.getOwner())) {
+                    DeviceMgtAPIUtils.getGroupManagementProviderService().removeDevice(groupId, deviceIdentifiers);
+                }
+            }
+            for (int groupId : deviceToGroupsAssignment.getDeviceGroupIds()) {
+                DeviceMgtAPIUtils.getGroupManagementProviderService().addDevices(groupId, deviceIdentifiers);
+            }
+            return Response.status(Response.Status.OK).build();
+        } catch (GroupManagementException e) {
+            String msg = "Error occurred while assigning device to groups.";
+            log.error(msg, e);
+            return Response.status(Response.Status.INTERNAL_SERVER_ERROR).entity(msg).build();
+        } catch (DeviceNotFoundException e) {
+            return Response.status(Response.Status.BAD_REQUEST).entity(e.getMessage()).build();
+        }
+    }
+
+    @Override
+    public Response getGroups(String deviceId, String deviceType) {
+        try {
+            DeviceIdentifier deviceIdentifier = new DeviceIdentifier(deviceId, deviceType);
+            List<DeviceGroup> deviceGroups = DeviceMgtAPIUtils.getGroupManagementProviderService().getGroups(deviceIdentifier);
+            return Response.status(Response.Status.OK).entity(deviceGroups).build();
+        } catch (GroupManagementException e) {
+            String msg = "Error occurred while removing devices from group.";
+            log.error(msg, e);
+            return Response.status(Response.Status.INTERNAL_SERVER_ERROR).entity(msg).build();
+        }
+    }
+
 }

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

@@ -233,17 +233,7 @@
                     <div class="modal-content">
                         <div class="row">
                             <div class="col-md-3 col-centered">
-                                <h3>Device was successfully associated with group.</h3>
+                                <h3>Device associations updated.</h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="group-deassociate-device-200-content" class="hide">
-                    <div class="modal-content">
-                        <div class="row">
-                            <div class="col-md-3 col-centered">
-                                <h3>Device was successfully removed from group.</h3>
                             </div>
                         </div>
                     </div>

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

@@ -261,7 +261,7 @@ function loadDevices(searchType, searchParam) {
                 return '<a href="' + context + '/device/' + row.deviceType + '?id=' + row.deviceIdentifier
                        + '"><div class="thumbnail icon"><img class="square-element text fw " src="'
                        + getDeviceTypeThumb(
-                        row.deviceType) + '"/></div></a>';
+                                row.deviceType) + '"/></div></a>';
             }
         },
         {
@@ -347,31 +347,31 @@ function loadDevices(searchType, searchParam) {
 
                     if ((!groupName || !groupId) && groupingEnabled(row.deviceType)) {
                         html +=
-                            '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view group-device-link" '
+                                '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view group-device-link" '
-                            +
+                                +
-                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                                'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
-                            + '" data-devicename="' +
+                                + '" data-devicename="' +
-                            row.name + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                                row.name + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
-                            '<i class="fw fw-grouping fw-stack-1x"></i></span>' +
+                                '<i class="fw fw-grouping fw-stack-1x"></i></span>' +
-                            '<span class="hidden-xs hidden-on-grid-view">Group</span></a>';
+                                '<span class="hidden-xs hidden-on-grid-view">Group</span></a>';
                     }
 
                     html +=
-                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-device-link" '
+                            '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-device-link" '
-                        +
+                            +
-                        'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
-                        + '" data-devicename="' + row.name + '">' +
+                            + '" data-devicename="' + row.name + '">' +
-                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                            '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
-                        '<i class="fw fw-edit fw-stack-1x"></i></span>' +
+                            '<i class="fw fw-edit fw-stack-1x"></i></span>' +
-                        '<span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
+                            '<span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
                     html +=
-                        '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-device-link" '
+                            '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-device-link" '
-                        +
+                            +
-                        'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
+                            'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType
-                        + '" data-devicename="' + row.name + '">' +
+                            + '" data-devicename="' + row.name + '">' +
-                        '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
+                            '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
-                        '<i class="fw fw-delete fw-stack-1x"></i></span>' +
+                            '<i class="fw fw-delete fw-stack-1x"></i></span>' +
-                        '<span class="hidden-xs hidden-on-grid-view">Delete</span>';
+                            '<span class="hidden-xs hidden-on-grid-view">Delete</span>';
                 }
                 return html;
             }
@@ -427,16 +427,16 @@ function loadDevices(searchType, searchParam) {
 
         $(data.devices).each(function (index) {
             objects.push(
-                {
+                    {
-                    model: getPropertyValue(data.devices[index].properties, "DEVICE_MODEL"),
+                        model: getPropertyValue(data.devices[index].properties, "DEVICE_MODEL"),
-                    vendor: getPropertyValue(data.devices[index].properties, "VENDOR"),
+                        vendor: getPropertyValue(data.devices[index].properties, "VENDOR"),
-                    user: data.devices[index].enrolmentInfo.owner,
+                        user: data.devices[index].enrolmentInfo.owner,
-                    status: data.devices[index].enrolmentInfo.status,
+                        status: data.devices[index].enrolmentInfo.status,
-                    ownership: data.devices[index].enrolmentInfo.ownership,
+                        ownership: data.devices[index].enrolmentInfo.ownership,
-                    deviceType: data.devices[index].type,
+                        deviceType: data.devices[index].type,
-                    deviceIdentifier: data.devices[index].deviceIdentifier,
+                        deviceIdentifier: data.devices[index].deviceIdentifier,
-                    name: data.devices[index].name
+                        name: data.devices[index].name
-                }
+                    }
             );
         });
 
@@ -449,20 +449,20 @@ function loadDevices(searchType, searchParam) {
     };
 
     $('#device-grid').datatables_extended_serverside_paging(
-        null,
+            null,
-        serviceURL,
+            serviceURL,
-        dataFilter,
+            dataFilter,
-        columns,
+            columns,
-        fnCreatedRow,
+            fnCreatedRow,
-        function () {
+            function () {
-            $(".icon .text").res_text(0.2);
+                $(".icon .text").res_text(0.2);
-            $('#device-grid').removeClass('hidden');
+                $('#device-grid').removeClass('hidden');
-            $("#loading-content").remove();
+                $("#loading-content").remove();
-            attachDeviceEvents();
+                attachDeviceEvents();
-        }, {
+            }, {
-            "placeholder": "Search By Device Name",
+                "placeholder": "Search By Device Name",
-            "searchKey": "name"
+                "searchKey": "name"
-        }
+            }
     );
 
     $(deviceCheckbox).click(function () {
@@ -556,6 +556,34 @@ function hidePopup() {
     $('.modal-backdrop').remove();
 }
 
+function markAlreadyAssignedGroups(deviceId, deviceType) {
+    var successCallback = function (data, textStatus, xhr) {
+        data = JSON.parse(data);
+        if (xhr.status == 200) {
+            if (data.length > 0) {
+                for (var i = 0; i < data.length; i++) {
+                    $('.groupCheckBoxes').each(
+                            function () {
+                                if (data[i].id == $(this).data('groupid')) {
+                                    $(this).attr('checked', true);
+                                }
+                            }
+                    );
+                }
+            } else {
+                return;
+            }
+        } else {
+            displayErrors(xhr);
+        }
+    };
+
+    invokerUtil.get("/api/device-mgt/v1.0/groups/device?deviceId=" + deviceId + "&deviceType=" + deviceType,
+                    successCallback, function (message) {
+                displayErrors(message);
+            });
+}
+
 /**
  * Following functions should be triggered after AJAX request is made.
  */
@@ -572,33 +600,48 @@ function attachDeviceEvents() {
             var deviceType = $(this).data("devicetype");
             $(modalPopupContent).html($('#group-device-modal-content').html());
             $('#user-groups').html(
-                '<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
+                    '<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
             $("a#group-device-yes-link").hide();
             showPopup();
 
             var serviceURL;
             if ($.hasPermission("LIST_ALL_GROUPS")) {
-                serviceURL = "/api/device-mgt/v1.0/groups";
+                serviceURL = "/api/device-mgt/v1.0/admin/groups?limit=100";
             } else if ($.hasPermission("LIST_GROUPS")) {
                 //Get authenticated users groups
-                serviceURL = "/api/device-mgt/v1.0/groups/user/" + currentUser + "/all";
+                serviceURL = "/api/device-mgt/v1.0/groups?limit=100";
             }
 
             invokerUtil.get(serviceURL, function (data) {
                 var groups = JSON.parse(data);
-                var str = '<br /><select id="assign-group-selector" style="color:#3f3f3f;padding:5px;width:250px;">';
+                var html = '<br />';
                 for (var i = 0; i < groups.deviceGroups.length; i++) {
-                    str += '<option value="' + groups.deviceGroups[i].id + '">' +
+                    if (groups.deviceGroups[i].owner != "wso2.system.user") {
-                           groups.deviceGroups[i].name + '</option>';
+                        html += '<div class="wr-input-control"><label class="wr-input-control checkbox">' +
+                                '<input class="groupCheckBoxes" type="checkbox" data-groupid="' + groups.deviceGroups[i].id + '" />' +
+                                '<span class="helper" title="' + groups.deviceGroups[i].name + '">' + groups.deviceGroups[i].name +
+                                '</span></label></div>';
+                    }
                 }
-                str += '</select>';
+                $('#user-groups').html(html);
-                $('#user-groups').html(str);
+                markAlreadyAssignedGroups(deviceId, deviceType);
                 $("a#group-device-yes-link").show();
                 $("a#group-device-yes-link").click(function () {
-                    var selectedGroup = $('#assign-group-selector').val();
+                    var deviceIdentifier = {"id": deviceId, "type": deviceType};
-                    serviceURL = "/api/device-mgt/v1.0/groups/id/" + selectedGroup + "/devices/add";
+                    var deviceGroupIds = [];
-                    var deviceIdentifiers = [{"id": deviceId, "type": deviceType}];
+                    $('.modal .groupCheckBoxes').each(
-                    invokerUtil.post(serviceURL, deviceIdentifiers, function (data) {
+                            function () {
+                                if ($(this).is(':checked')) {
+                                    deviceGroupIds.push($(this).data('groupid'));
+                                }
+                            }
+                    );
+                    var deviceToGroupsAssignment = {
+                        deviceIdentifier: deviceIdentifier,
+                        deviceGroupIds: deviceGroupIds
+                    };
+                    serviceURL = "/api/device-mgt/v1.0/groups/device/assign";
+                    invokerUtil.post(serviceURL, deviceToGroupsAssignment, function (data) {
                         $(modalPopupContent).html($('#group-associate-device-200-content').html());
                         setTimeout(function () {
                             hidePopup();
@@ -640,8 +683,8 @@ function attachDeviceEvents() {
         showPopup();
 
         $("a#remove-device-yes-link").click(function () {
-            if(groupId && groupName) {
+            if (groupId && groupName) {
-                var deviceIdentifiers = [{"id": deviceId,"type": deviceType}];
+                var deviceIdentifiers = [{"id": deviceId, "type": deviceType}];
                 serviceURL = "/api/device-mgt/v1.0/groups/id/" + groupId + "/devices/remove";
                 invokerUtil.post(serviceURL, deviceIdentifiers, function (message) {
                     $(modalPopupContent).html($('#remove-device-from-group-200-content').html());
@@ -733,6 +776,6 @@ function displayDeviceErrors(jqXHR) {
 function getParameterByName(name) {
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
-        results = regex.exec(location.search);
+            results = regex.exec(location.search);
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
 }

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.hbs

@@ -16,26 +16,44 @@
   under the License.
 }}
 
-<div class="row wr-device-board">
+{{#if virtualDeviceTypesList}}
-    <div class="col-lg-12 wr-secondary-bar">
+    <div class="row wr-device-board">
-        <span class="page-sub-title">Device Types</span>
+        <div class="col-lg-12 wr-secondary-bar">
+            <span class="page-sub-title">Device Types</span>
+        </div>
     </div>
-</div>
+    <div class="container-fluid">
-<span id="device-listing-status-msg"></span>
+        <table class="table table-striped table-hover list-table no-operations display responsive nowrap data-table grid-view no-toolbar"
-<div class="container-fluid">
+               id="device-type-grid">
-    <table class="table table-striped table-hover list-table no-operations display responsive nowrap data-table grid-view no-toolbar"
+            <thead>
-           id="device-type-grid">
+            <tr class="sort-row">
-        <thead>
+                <th class="no-sort"></th>
-        <tr class="sort-row">
+                <th>By Device Type</th>
-            <th class="no-sort"></th>
+                <th class="no-sort"></th>
-            <th>By Device Type</th>
+            </tr>
-            <th class="no-sort"></th>
+            </thead>
-        </tr>
+            <tbody id="ast-container">
-        </thead>
+            </tbody>
-        <tbody id="ast-container">
+        </table>
-        </tbody>
+    </div>
-    </table>
+{{else}}
-</div>
+    <div class="ast-container list-view">
+        <div class="ctrl-info-panel col-centered text-center wr-login">
+            <h3 class="text-muted">
+                <i class="fw fw-mobile fw-3x"></i>
+            </h3>
+            <h3 class="text-muted">No device type is available to be displayed.</h3>
+            <a href="https://docs.wso2.com/display/IoTS100/Quick+Start+Guide" target="_blank"
+               class="btn-operations btn-default">
+                <span class="fw-stack">
+                    <i class="fw fw-ring fw-stack-2x"></i>
+                    <i class="fw fw-document fw-stack-1x"></i>
+                </span>
+                Quick Startup Guide
+            </a>
+        </div>
+    </div>
+{{/if}}
 <br class="c-both"/>
 
 {{#if virtualDeviceTypesList}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/listing.js

@@ -29,6 +29,9 @@ function onRequest(context) {
     if (typesListResponse["status"] == "success") {
         var deviceTypes = typesListResponse.content.deviceTypes;
         if (deviceTypes) {
+            if (deviceTypes.length > 0){
+                viewModel.hasDeviceTypes = true;
+            }
             var deviceTypesList = [], virtualDeviceTypesList = [];
             for (var i = 0; i < deviceTypes.length; i++) {
                 var deviceType = deviceTypes[i];

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.types.listing/public/js/listing.js

@@ -142,13 +142,6 @@ function loadDevices(searchType, searchParam){
         }
     } else {
         $('#device-type-grid').addClass('hidden');
-        $('#device-listing-status-msg').html(
-            '<div class="col-centered text-center"><h3 class="text-muted"><i class="fw fw-mobile fw-3x"></i>' +
-            '</h3><h3 class="text-muted">No device type is available to be displayed.</h3>' +
-            '<a href="https://docs.wso2.com/display/IoTS100/Quick+Start+Guide" target="_blank" ' +
-            'class="btn-operations btn-default"><span class="fw-stack">' +
-            '<i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-document fw-stack-1x"></i></span>' +
-            'Quick Startup Guide</a></div>');
     }
 
     $(".icon .text").res_text(0.2);