Rollout list view - table to grid initial commit

Signed-off-by: asharani-murugesh <asharani.murugesh@in.bosch.com>

hawkbit-distribution-bar/src/main/java/org/eclipse/hawkbit/ui/distributionbar/DistributionBarRendererWidgetSet.gwt.xml

@@ -1,7 +0,0 @@
-<module>
-
-    <!-- Inherit DefaultWidgetSet -->
-    <inherits name="com.vaadin.DefaultWidgetSet"/>
-
-    <inherits name="org.vaadin.alump.distributionbar.gwt.DistributionBarWidgetset" />
-</module>

hawkbit-distribution-bar/src/main/java/org/eclipse/hawkbit/ui/distributionbar/client/StringDistributionBarRendererConnector.java

@@ -1,17 +0,0 @@
-package org.eclipse.hawkbit.ui.distributionbar.client;
-
-
-import com.vaadin.client.connectors.AbstractRendererConnector;
-import com.vaadin.shared.ui.Connect;
-
-@Connect(org.eclipse.hawkbit.ui.distributionbar.renderers.StringDistributionBarRenderer.class)
-public class StringDistributionBarRendererConnector extends
-        AbstractRendererConnector<String> {
-
-	private static final long serialVersionUID = 7697966991925490786L;
-
-	@Override
-    public org.eclipse.hawkbit.ui.distributionbar.client.renderers.StringDistributionBarRenderer getRenderer() {
-        return (org.eclipse.hawkbit.ui.distributionbar.client.renderers.StringDistributionBarRenderer) super.getRenderer();
-    }
-}

hawkbit-distribution-bar/src/main/java/org/eclipse/hawkbit/ui/distributionbar/client/renderers/StringDistributionBarRenderer.java

@@ -1,77 +0,0 @@
-package org.eclipse.hawkbit.ui.distributionbar.client.renderers;
-
-import java.util.HashMap;
-import java.util.Map;
-
-import org.vaadin.alump.distributionbar.gwt.client.GwtDistributionBar;
-
-import com.google.gwt.core.client.GWT;
-import com.vaadin.client.renderers.WidgetRenderer;
-import com.vaadin.client.widget.grid.RendererCellReference;
-
-public class StringDistributionBarRenderer extends WidgetRenderer<String, GwtDistributionBar> {
-
-    @Override
-    public GwtDistributionBar createWidget() {
-        return GWT.create(GwtDistributionBar.class);
-    }
-
-    @Override
-    public void render(RendererCellReference cell, String input, GwtDistributionBar widget) {
-        if (null != input) {
-            widget.setNumberOfParts(2);
-            Map<String, Long> map = formatData(input);
-            if (!map.isEmpty()) {
-                final Long notStartedTargetsCount = map.keySet().contains("NOTSTARTED") ? map.get("NOTSTARTED") : 0L;
-                final Long runningTargetsCount = map.keySet().contains("RUNNING") ? map.get("RUNNING") : 0L;
-                final Long scheduledTargetsCount = map.keySet().contains("SCHEDULED") ? map.get("SCHEDULED") : 0L;
-                final Long errorTargetsCount = map.keySet().contains("ERROR") ? map.get("ERROR") : 0L;
-                final Long finishedTargetsCount = map.keySet().contains("FINISHED") ? map.get("FINISHED") : 0L;
-                final Long cancelledTargetsCount = map.keySet().contains("CANCELLED") ? map.get("CANCELLED") : 0L;
-                if (isNoTargets(errorTargetsCount, notStartedTargetsCount, runningTargetsCount, scheduledTargetsCount,
-                        finishedTargetsCount, cancelledTargetsCount)) {
-                    setBarPartSize(widget, "SCHEDULED".toLowerCase(), 0, 0);
-                    setBarPartSize(widget, "FINISHED".toString().toLowerCase(), 0, 1);
-
-                } else {
-                    widget.setNumberOfParts(6);
-                    setBarPartSize(widget, "NOTSTARTED".toString().toLowerCase(), notStartedTargetsCount.intValue(), 0);
-                    setBarPartSize(widget, "SCHEDULED".toString().toLowerCase(), scheduledTargetsCount.intValue(), 1);
-                    setBarPartSize(widget, "RUNNING".toLowerCase(), scheduledTargetsCount.intValue(), 2);
-                    setBarPartSize(widget, "ERROR".toLowerCase(), errorTargetsCount.intValue(), 3);
-                    setBarPartSize(widget, "FINISHED".toLowerCase(), finishedTargetsCount.intValue(), 4);
-                    setBarPartSize(widget, "CANCELLED".toLowerCase(), cancelledTargetsCount.intValue(), 5);
-                }
-            }
-            widget.updateParts();
-        }
-    }
-
-    private Map<String, Long> formatData(String input) {
-        Map<String, Long> details = new HashMap<>();
-        String[] tempData = input.split(",");
-        for (String statusWithCount : tempData) {
-            String[] statusWithCountList = statusWithCount.split(":");
-            details.put(statusWithCountList[0], new Long(statusWithCountList[1]));
-        }
-        return details;
-    }
-
-    private static boolean isNoTargets(Long errorTargetsCount, Long notStartedTargetsCount, Long runningTargetsCount,
-            Long scheduledTargetsCount, Long finishedTargetsCount, Long cancelledTargetsCount) {
-        if (errorTargetsCount == 0 && notStartedTargetsCount == 0 && runningTargetsCount == 0
-                && scheduledTargetsCount == 0 && finishedTargetsCount == 0 && cancelledTargetsCount == 0) {
-            return true;
-        }
-        return false;
-    }
-
-    public void setBarPartSize(final GwtDistributionBar bar, final String statusName, final int count,
-            final int index) {
-        bar.setPartSize(index, count);
-        bar.setPartTooltip(index, statusName);
-        // check thi:::
-        bar.setPartStyleName(index, index, "status-bar-part-" + statusName);
-    }
-
-}

hawkbit-distribution-bar/src/main/java/org/eclipse/hawkbit/ui/distributionbar/renderers/StringDistributionBarRenderer.java

@@ -1,18 +0,0 @@
-package org.eclipse.hawkbit.ui.distributionbar.renderers;
-
-
-import com.vaadin.ui.Grid.AbstractRenderer;
-
-public class StringDistributionBarRenderer extends AbstractRenderer<String> {
-	private static final long serialVersionUID = -4543220859821576209L;
-
-	/**
-     * Creates a new text renderer
-     */
-    public StringDistributionBarRenderer() {
-        super(String.class, null);
-    }
-    
-
-}
-

hawkbit-ui/pom.xml

@@ -78,6 +78,25 @@
                <nosuffix>true</nosuffix>
             </configuration>
          </plugin>
+		 <plugin>
+			<groupId>org.apache.maven.plugins</groupId>
+			<artifactId>maven-jar-plugin</artifactId>
+			<configuration>
+				<archive>
+					<index>true</index>
+					<manifest>
+						<addClasspath>true</addClasspath>
+						<addDefaultImplementationEntries>true</addDefaultImplementationEntries>
+					</manifest>
+					<manifestEntries>
+					<!-- Package format version - do not change -->
+						<Implementation-Title>DistributionBarRenderer</Implementation-Title>
+						<Vaadin-Package-Version>1</Vaadin-Package-Version>
+						<Vaadin-Widgetsets>org.eclipse.hawkbit.ui.distributionbar.DistributionBarRendererWidgetSet</Vaadin-Widgetsets>
+					</manifestEntries>
+				</archive>
+			</configuration>
+		</plugin>
       </plugins>
       <pluginManagement>
          <plugins>
@@ -173,7 +192,10 @@
          <groupId>com.vaadin</groupId>
          <artifactId>vaadin-server</artifactId>
       </dependency>
-
+	  <dependency>
+		 <groupId>com.vaadin</groupId>
+		 <artifactId>vaadin-client</artifactId>
+	  </dependency>
 	  <dependency>
          <groupId>com.vaadin</groupId>
          <artifactId>vaadin-push</artifactId>

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/AppWidgetSet.gwt.xml

@@ -1,14 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--
+<!-- Copyright (c) 2015 Bosch Software Innovations GmbH and others. All rights 
-
+	reserved. This program and the accompanying materials are made available 
-    Copyright (c) 2015 Bosch Software Innovations GmbH and others.
+	under the terms of the Eclipse Public License v1.0 which accompanies this 
-
+	distribution, and is available at http://www.eclipse.org/legal/epl-v10.html -->
-    All rights reserved. This program and the accompanying materials
-    are made available under the terms of the Eclipse Public License v1.0
-    which accompanies this distribution, and is available at
-    http://www.eclipse.org/legal/epl-v10.html
-
--->
 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
 <module>
 	<!-- This file is automatically updated based on new dependencies by the 
@@ -17,14 +11,27 @@
 	<!-- Inherit DefaultWidgetSet -->
 	<inherits name="com.vaadin.DefaultWidgetSet" />
 
-    <inherits name="org.vaadin.hene.flexibleoptiongroup.widgetset.FlexibleOptionGroupWidgetset" />
+	<inherits
+		name="org.vaadin.hene.flexibleoptiongroup.widgetset.FlexibleOptionGroupWidgetset" />
 
 	<inherits name="org.vaadin.tokenfield.TokenfieldWidgetset" />
 
 
-    <inherits name="org.vaadin.alump.distributionbar.gwt.DistributionBarWidgetset" />
+	<inherits
+		name="org.vaadin.alump.distributionbar.gwt.DistributionBarWidgetset" />
 
 
 
 	<inherits name="org.vaadin.peter.contextmenu.ContextmenuWidgetset" />
+
+	<inherits
+		name="org.eclipse.hawkbit.ui.distributionbar.DistributionBarRendererWidgetSet" />
+
+
+
+    <inherits name="org.eclipse.hawkbit.ui.distributionbar.DistributionBarRendererWidgetSet" />
+
+    <inherits name="org.vaadin.hene.flexibleoptiongroup.widgetset.FlexibleOptionGroupWidgetset" />
+
+    <inherits name="org.vaadin.alump.distributionbar.gwt.DistributionBarWidgetset" />
 </module>

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/distributionbar/client/renderers/StringDistributionBarRenderer.java

@@ -22,7 +22,7 @@ public class StringDistributionBarRenderer extends WidgetRenderer<String, GwtDis
     public void render(RendererCellReference cell, String input, GwtDistributionBar widget) {
         if (null != input) {
             widget.setNumberOfParts(2);
-            widget.addStyleName("progress-bar");
+            widget.addStyleName("status-bar");
             Map<String, Long> map = formatData(input);
             if (!map.isEmpty()) {
                 if (isNoTargets(map.values())) {

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/AbstractSimpleGrid.java

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ */
+package org.eclipse.hawkbit.ui.rollout;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
+import org.eclipse.hawkbit.ui.utils.TableColumn;
+
+import com.vaadin.data.Container;
+import com.vaadin.data.Container.Indexed;
+import com.vaadin.ui.Grid;
+import com.vaadin.ui.Table;
+import com.vaadin.ui.Grid.Column;
+import com.vaadin.ui.themes.ValoTheme;
+
+/**
+ * Abstract table class.
+ *
+ */
+public abstract class AbstractSimpleGrid extends Grid {
+
+    private static final long serialVersionUID = 4856562746502217630L;
+
+    /**
+     * Initialize the components.
+     */
+    protected void init() {
+        setSizeFull();
+        setImmediate(true);
+        setId(getTableId());
+        setHeight("200px");
+        setWidth("200px");
+        
+        addStyleName("sp-table rollout-table");
+        addStyleName(ValoTheme.TABLE_NO_VERTICAL_LINES);
+        addStyleName(ValoTheme.TABLE_SMALL);
+        
+        addNewContainerDS();
+        
+//        addValueChangeListener(event -> onValueChange());
+//        setPageLength(SPUIDefinitions.PAGE_SIZE);
+        setSelectionMode(SelectionMode.NONE);
+//        setColumnCollapsingAllowed(true);
+        addColumnRenderes();
+        setColumnReorderingAllowed(true);
+    }
+
+
+
+
+	public void addNewContainerDS() {
+        final Container container = createContainer();
+        setContainerDataSource((Indexed) container);
+        addContainerProperties();
+        setColumnProperties();
+        setColumnHeaderNames();
+        setColumnExpandRatio();
+        
+        //Allow column hiding
+        for (Column c : getColumns()) {
+        	c.setHidable(true);
+        }
+        setHiddenColumns();
+        
+        int size = 0;
+        if (container != null) {
+            size = container.size();
+        }
+        if (size == 0) {
+            setData(SPUIDefinitions.NO_DATA);
+        }
+    }
+
+    protected abstract void setColumnExpandRatio() ;
+
+	protected abstract void setColumnHeaderNames() ;
+
+    protected abstract String getTableId();
+    
+    protected abstract Container createContainer();
+    
+    protected abstract void addContainerProperties();
+
+	protected abstract void setColumnProperties() ;
+    
+
+	protected abstract void  addColumnRenderes() ;
+	
+	protected abstract void setHiddenColumns();
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/AbstractSimpleTableLayout.java

@@ -30,9 +30,13 @@ public abstract class AbstractSimpleTableLayout extends VerticalLayout {
 
     private AbstractSimpleTable table;
     
-    protected void init(final AbstractSimpleTableHeader tableHeader, final AbstractSimpleTable table) {
+    private AbstractSimpleGrid grid;
+
+
+    protected void init(final AbstractSimpleTableHeader tableHeader, final AbstractSimpleTable table,final AbstractSimpleGrid grid) {
         this.tableHeader = tableHeader;
         this.table = table;
+        this.grid = grid;
         buildLayout();
     }
 
@@ -50,9 +54,10 @@ public abstract class AbstractSimpleTableLayout extends VerticalLayout {
         tableHeaderLayout.addComponent(tableHeader);
 
         tableHeaderLayout.setComponentAlignment(tableHeader, Alignment.TOP_CENTER);
-        tableHeaderLayout.addComponent(table);
+        grid.setSizeFull();
-        tableHeaderLayout.setComponentAlignment(table, Alignment.TOP_CENTER);
+        tableHeaderLayout.addComponent(grid);
-        tableHeaderLayout.setExpandRatio(table, 1.0f);
+        tableHeaderLayout.setComponentAlignment(grid, Alignment.TOP_CENTER);
+        tableHeaderLayout.setExpandRatio(grid, 1.0f);
         
 
         addComponent(tableHeaderLayout);
@@ -66,10 +71,6 @@ public abstract class AbstractSimpleTableLayout extends VerticalLayout {
         
     }
 
-    /**
-     * @return
-     * 
-     */
     private HorizontalLayout createCountMessageComponent() {
         final HorizontalLayout rolloutGroupTargetsCountLayout = new HorizontalLayout();
         final Label countMessageLabel = getCountMessageLabel();

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/DistributionBarDetails.java

@@ -0,0 +1,23 @@
+package org.eclipse.hawkbit.ui.rollout;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class DistributionBarDetails {
+	
+	private Map<String,Long> details = new HashMap<>();
+	
+	
+	public DistributionBarDetails( Map<String,Long> details){
+		this.details = details;
+	}
+	
+	public Map<String, Long> getDetails() {
+		return details;
+	}
+	
+	public void setDetails(Map<String, Long> details) {
+		this.details = details;
+	}
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/ProxyRollout.java

@@ -8,8 +8,14 @@
  */
 package org.eclipse.hawkbit.ui.rollout;
 
+import java.util.HashMap;
+import java.util.Map;
+
 import org.eclipse.hawkbit.repository.model.Rollout;
 
+import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.Label;
+
 /**
  * Proxy rollout with suctome properties.
  *
@@ -46,6 +52,13 @@ public class ProxyRollout extends Rollout {
 
     private String totalTargetsCount;
     
+    //TODO remove this
+    private DistributionBarDetails distributionBarDetails ;
+    
+    //TODO remove this
+    private Map<String,Long> statusTotalCountMap = new HashMap<>();
+    
+
     /**
      * @return the distributionSetNameVersion
      */
@@ -255,4 +268,27 @@ public class ProxyRollout extends Rollout {
     public void setTotalTargetsCount(final String totalTargetsCount) {
         this.totalTargetsCount = totalTargetsCount;
     }
+    
+    public Map<String, Long> getStatusTotalCountMap() {
+		return statusTotalCountMap;
+	}
+    
+    public void setStatusTotalCountMap(Map<String, Long> statusTotalCountMap) {
+		this.statusTotalCountMap = statusTotalCountMap;
+	}
+    
+    public DistributionBarDetails getDistributionBarDetails() {
+		return distributionBarDetails;
+	}
+    
+    public void setDistributionBarDetails(DistributionBarDetails distributionBarDetails) {
+		this.distributionBarDetails = distributionBarDetails;
+	}
+
+    public String getAction() { 
+        return FontAwesome.CIRCLE_O.getHtml();
+    }
+    
+    
+    
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutGroupTargetsListTable.java

@@ -218,10 +218,13 @@ public class RolloutGroupTargetsListTable extends AbstractSimpleTable {
 			statusLabel.addStyleName("statusIconYellow");
 			break;
 		case CANCELED:
-        case CANCELING:
 			statusLabel.setValue(FontAwesome.TIMES_CIRCLE.getHtml());
 			statusLabel.addStyleName("statusIconPending");
 			break;
+		case CANCELING:
+			statusLabel.setValue(FontAwesome.TIMES_CIRCLE.getHtml());
+			statusLabel.addStyleName("statusIconGreen");
+			break;
 		default:
 			break;
 		}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutGroupTargetsListView.java

@@ -33,13 +33,14 @@ public class RolloutGroupTargetsListView extends AbstractSimpleTableLayout {
     
     @Autowired
     private RolloutGroupTargetsCountLabelMessage rolloutGroupTargetsCountLabelMessage;
-
+    @Autowired
+    private RolloutListGrid3 rolloutListGrid;
     /**
      * Initialization of Rollout group component.
      */
     @PostConstruct
     protected void init() {
-        super.init(rolloutGroupTargetsListHeader, rolloutGroupTargetsListTable);
+        super.init(rolloutGroupTargetsListHeader, rolloutGroupTargetsListTable,rolloutListGrid);
     }
 
     @Override

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutGroupsListView.java

@@ -32,9 +32,14 @@ public class RolloutGroupsListView extends AbstractSimpleTableLayout {
     @Autowired
     private RolloutGroupListTable rolloutGroupListTable;
 
+    
+    @Autowired
+    private RolloutListGrid2 rolloutListGrid;
+    
+    
     @PostConstruct
     protected void init() {
-        super.init(rolloutGroupListHeader, rolloutGroupListTable);
+        super.init(rolloutGroupListHeader, rolloutGroupListTable,rolloutListGrid);
     }
 
     @Override

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutListGrid.java

@@ -1,14 +1,19 @@
 package org.eclipse.hawkbit.ui.rollout;
 
 import java.util.ArrayList;
+import java.util.Arrays;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
 import java.util.Map.Entry;
 
 import javax.annotation.PostConstruct;
+import javax.annotation.PreDestroy;
 
+import org.eclipse.hawkbit.eventbus.event.RolloutChangeEvent;
+import org.eclipse.hawkbit.repository.RolloutManagement;
 import org.eclipse.hawkbit.repository.SpPermissionChecker;
+import org.eclipse.hawkbit.repository.model.Rollout;
 import org.eclipse.hawkbit.repository.model.Rollout.RolloutStatus;
 import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus;
 import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus.Status;
@@ -16,10 +21,13 @@ import org.eclipse.hawkbit.ui.distributionbar.renderers.HtmlButtonRenderer;
 import org.eclipse.hawkbit.ui.distributionbar.renderers.LinkRenderer;
 import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ACTION;
 import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ContextMenuData;
+import org.eclipse.hawkbit.ui.rollout.event.RolloutEvent;
+import org.eclipse.hawkbit.ui.rollout.state.RolloutUIState;
 import org.eclipse.hawkbit.ui.utils.I18N;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
+import org.eclipse.hawkbit.ui.utils.UINotification;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.vaadin.addons.lazyquerycontainer.BeanQueryFactory;
 import org.vaadin.addons.lazyquerycontainer.LazyQueryContainer;
@@ -27,16 +35,20 @@ import org.vaadin.addons.lazyquerycontainer.LazyQueryDefinition;
 import org.vaadin.peter.contextmenu.ContextMenu;
 import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItem;
 import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItemClickEvent;
+import org.vaadin.spring.events.EventBus;
+import org.vaadin.spring.events.EventScope;
+import org.vaadin.spring.events.annotation.EventBusListenerMethod;
 
 import com.vaadin.data.Container;
 import com.vaadin.data.Item;
-import com.vaadin.data.util.GeneratedPropertyContainer;
 import com.vaadin.data.util.PropertyValueGenerator;
 import com.vaadin.data.util.converter.Converter;
 import com.vaadin.server.AbstractClientConnector;
 import com.vaadin.server.FontAwesome;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.ViewScope;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.Window;
 import com.vaadin.ui.renderers.ClickableRenderer.RendererClickEvent;
 import com.vaadin.ui.renderers.HtmlRenderer;
 
@@ -48,6 +60,21 @@ public class RolloutListGrid extends AbstractSimpleGrid {
     @Autowired
     private I18N i18n;
 
+    @Autowired
+    private transient EventBus.SessionEventBus eventBus;
+
+    @Autowired
+    private transient RolloutManagement rolloutManagement;
+
+    @Autowired
+    private AddUpdateRolloutWindowLayout addUpdateRolloutWindow;
+
+    @Autowired
+    private UINotification uiNotification;
+
+    @Autowired
+    private transient RolloutUIState rolloutUIState;
+
     @Autowired
     private transient SpPermissionChecker permissionChecker;
 
@@ -55,6 +82,42 @@ public class RolloutListGrid extends AbstractSimpleGrid {
     @PostConstruct
     protected void init() {
         super.init();
+        eventBus.subscribe(this);
+    }
+
+    @PreDestroy
+    void destroy() {
+        eventBus.unsubscribe(this);
+    }
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    void onEvent(final RolloutEvent event) {
+        if (event == RolloutEvent.FILTER_BY_TEXT || event == RolloutEvent.CREATE_ROLLOUT
+                || event == RolloutEvent.UPDATE_ROLLOUT || event == RolloutEvent.SHOW_ROLLOUTS) {
+            refreshTable();
+        }
+    }
+
+    /**
+     * Handles the RolloutChangeEvent to refresh the item in the table.
+     * 
+     * @param rolloutChangeEvent
+     *            the event which contains the rollout which has been changed
+     */
+    @SuppressWarnings("unchecked")
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    public void onEvent(final RolloutChangeEvent rolloutChangeEvent) {
+        final Rollout rollout = rolloutManagement.findRolloutWithDetailedStatus(rolloutChangeEvent.getRolloutId());
+        final TotalTargetCountStatus totalTargetCountStatus = rollout.getTotalTargetCountStatus();
+        final LazyQueryContainer rolloutContainer = (LazyQueryContainer) getContainerDataSource();
+        final Item item = rolloutContainer.getItem(rolloutChangeEvent.getRolloutId());
+        item.getItemProperty(SPUILabelDefinitions.VAR_STATUS).setValue(rollout.getStatus());
+        item.getItemProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setValue(totalTargetCountStatus);
+        final Long groupCount = (Long) item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).getValue();
+        if (null != rollout.getRolloutGroups() && groupCount != rollout.getRolloutGroups().size()) {
+            item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS)
+                    .setValue(Long.valueOf(rollout.getRolloutGroups().size()));
+        }
     }
 
     @Override
@@ -65,10 +128,13 @@ public class RolloutListGrid extends AbstractSimpleGrid {
     @Override
     protected Container createContainer() {
         final BeanQueryFactory<RolloutBeanQuery> rolloutQf = new BeanQueryFactory<>(RolloutBeanQuery.class);
-        LazyQueryContainer lqc = new LazyQueryContainer(
+        return new LazyQueryContainer(
                 new LazyQueryDefinition(true, SPUIDefinitions.PAGE_SIZE, SPUILabelDefinitions.VAR_ID), rolloutQf);
+    }
 
-        final LazyQueryContainer rolloutGridContainer = lqc;
+    @Override
+    protected void addContainerProperties() {
+        final LazyQueryContainer rolloutGridContainer = (LazyQueryContainer) getContainerDataSource();
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_ID, String.class, null, false, false);
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_NAME, String.class, "", false, false);
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DESC, String.class, null, false, false);
@@ -76,9 +142,6 @@ public class RolloutListGrid extends AbstractSimpleGrid {
                 false);
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DIST_NAME_VERSION, String.class, null, false,
                 false);
-
-        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TARGETFILTERQUERY, String.class, null, false,
-                false);
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_CREATED_DATE, String.class, null, false,
                 false);
 
@@ -95,13 +158,10 @@ public class RolloutListGrid extends AbstractSimpleGrid {
 
         rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS,
                 TotalTargetCountStatus.class, null, false, false);
-        return new GeneratedPropertyContainer(lqc);
-    }
 
-    @Override
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.ACTION, String.class,
-    protected void addContainerProperties() {
+                FontAwesome.CIRCLE_O.getHtml(), false, false);
-        GeneratedPropertyContainer gpc = (GeneratedPropertyContainer) getContainerDataSource();
+
-        gpc.addGeneratedProperty(SPUILabelDefinitions.ACTION, new FontIconGenerator(FontAwesome.CIRCLE_O));
     }
 
     @Override
@@ -119,8 +179,25 @@ public class RolloutListGrid extends AbstractSimpleGrid {
         columnList.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
         columnList.add(SPUILabelDefinitions.VAR_DESC);
         columnList.add(SPUILabelDefinitions.ACTION);
-        // columnList.add("statusTotalCountMap");
         setColumnOrder(columnList.toArray());
+        
+        alignColumns();
+    }
+
+    private void alignColumns() {
+        setCellStyleGenerator(new CellStyleGenerator() {
+            private static final long serialVersionUID = 5573570647129792429L;
+
+            @Override
+            public String getStyle(final CellReference cellReference) {
+                String[] coulmnNames = { SPUILabelDefinitions.VAR_STATUS,
+                        SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS, SPUILabelDefinitions.ACTION };
+                if (Arrays.asList(coulmnNames).contains(cellReference.getPropertyId())) {
+                    return "centeralign";
+                }
+                return null;
+            }
+        });
     }
 
     @Override
@@ -132,7 +209,6 @@ public class RolloutListGrid extends AbstractSimpleGrid {
         columnsToBeHidden.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
         columnsToBeHidden.add(SPUILabelDefinitions.VAR_DESC);
         columnsToBeHidden.add(SPUILabelDefinitions.VAR_ID);
-        columnsToBeHidden.add(SPUILabelDefinitions.VAR_TARGETFILTERQUERY);
         for (Object propertyId : columnsToBeHidden) {
             getColumn(propertyId).setHidden(true);
         }
@@ -165,19 +241,22 @@ public class RolloutListGrid extends AbstractSimpleGrid {
 
         getColumn(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setMinimumWidth(95);
+
         getColumn(SPUILabelDefinitions.VAR_CREATED_DATE).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_CREATED_USER).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_MODIFIED_DATE).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_MODIFIED_BY).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_DESC).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.VAR_STATUS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setMinimumWidth(75);
+
         getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setExpandRatio(2);
         getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setMinimumWidth(600);
 
         getColumn(SPUILabelDefinitions.ACTION).setExpandRatio(0);
         getColumn(SPUILabelDefinitions.ACTION).setMinimumWidth(90);
 
-
     }
 
     @Override
@@ -185,14 +264,19 @@ public class RolloutListGrid extends AbstractSimpleGrid {
         setEditorEnabled(true);
         addDetailStatusColumn();
         addStatusCoulmn();
-        getColumn(SPUILabelDefinitions.ACTION).setRenderer(new HtmlButtonRenderer(event -> OnClickOfActionBtn(event)));
+        getColumn(SPUILabelDefinitions.ACTION).setRenderer(new HtmlButtonRenderer(event -> onClickOfActionBtn(event)));
         getColumn(SPUILabelDefinitions.VAR_NAME).setRenderer(new LinkRenderer(event -> onClickOfRolloutName(event)));
     }
 
     private void onClickOfRolloutName(RendererClickEvent event) {
+        rolloutUIState.setRolloutId((long) event.getItemId());
+        final String rolloutName = (String) getContainerDataSource().getItem(event.getItemId())
+                .getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        rolloutUIState.setRolloutName(rolloutName);
+        eventBus.publish(this, RolloutEvent.SHOW_ROLLOUT_GROUPS);
     }
 
-    private void OnClickOfActionBtn(RendererClickEvent event) {
+    private void onClickOfActionBtn(RendererClickEvent event) {
         final ContextMenu contextMenu = createContextMenu((Long) event.getItemId());
         contextMenu.setAsContextMenuOf((AbstractClientConnector) event.getComponent());
         contextMenu.open(event.getClientX(), event.getClientY());
@@ -223,11 +307,7 @@ public class RolloutListGrid extends AbstractSimpleGrid {
         return context;
     }
 
-    private void menuItemClicked(final ContextMenuItemClickEvent event) {
-    }
-
     private void addDetailStatusColumn() {
-
         getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setRenderer(
                 new org.eclipse.hawkbit.ui.distributionbar.renderers.StringDistributionBarRenderer(),
                 new Converter<String, TotalTargetCountStatus>() {
@@ -259,7 +339,6 @@ public class RolloutListGrid extends AbstractSimpleGrid {
                 });
     }
 
-    
     private void addStatusCoulmn() {
         getColumn(SPUILabelDefinitions.VAR_STATUS).setRenderer(new HtmlRenderer(),
                 new Converter<String, RolloutStatus>() {
@@ -336,6 +415,33 @@ public class RolloutListGrid extends AbstractSimpleGrid {
         return finalVal;
     }
 
+    private void menuItemClicked(final ContextMenuItemClickEvent event) {
+        final ContextMenuItem item = (ContextMenuItem) event.getSource();
+        final ContextMenuData contextMenuData = (ContextMenuData) item.getData();
+        final Item row = getContainerDataSource().getItem(contextMenuData.getRolloutId());
+        final String rolloutName = (String) row.getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        if (contextMenuData.getAction() == ACTION.PAUSE) {
+            rolloutManagement.pauseRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.paused", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.RESUME) {
+            rolloutManagement.resumeRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.resumed", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.START) {
+            rolloutManagement.startRolloutAsync(rolloutManagement.findRolloutByName(rolloutName));
+            uiNotification.displaySuccess(i18n.get("message.rollout.started", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.UPDATE) {
+            addUpdateRolloutWindow.populateData(contextMenuData.getRolloutId());
+            final Window addTargetWindow = addUpdateRolloutWindow.getWindow();
+            addTargetWindow.setCaption(i18n.get("caption.update.rollout"));
+            UI.getCurrent().addWindow(addTargetWindow);
+            addTargetWindow.setVisible(Boolean.TRUE);
+        }
+    }
+
+    private void refreshTable() {
+        ((LazyQueryContainer) getContainerDataSource()).refresh();
+    }
+
     public final class FontIconGenerator extends PropertyValueGenerator<String> {
 
         private static final long serialVersionUID = 2544026030795375748L;
@@ -355,4 +461,5 @@ public class RolloutListGrid extends AbstractSimpleGrid {
             return String.class;
         }
     }
+
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutListGrid2.java

@@ -0,0 +1,465 @@
+package org.eclipse.hawkbit.ui.rollout;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Map.Entry;
+
+import javax.annotation.PostConstruct;
+import javax.annotation.PreDestroy;
+
+import org.eclipse.hawkbit.eventbus.event.RolloutChangeEvent;
+import org.eclipse.hawkbit.repository.RolloutManagement;
+import org.eclipse.hawkbit.repository.SpPermissionChecker;
+import org.eclipse.hawkbit.repository.model.Rollout;
+import org.eclipse.hawkbit.repository.model.Rollout.RolloutStatus;
+import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus;
+import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus.Status;
+import org.eclipse.hawkbit.ui.distributionbar.renderers.HtmlButtonRenderer;
+import org.eclipse.hawkbit.ui.distributionbar.renderers.LinkRenderer;
+import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ACTION;
+import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ContextMenuData;
+import org.eclipse.hawkbit.ui.rollout.event.RolloutEvent;
+import org.eclipse.hawkbit.ui.rollout.state.RolloutUIState;
+import org.eclipse.hawkbit.ui.utils.I18N;
+import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
+import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
+import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
+import org.eclipse.hawkbit.ui.utils.UINotification;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.vaadin.addons.lazyquerycontainer.BeanQueryFactory;
+import org.vaadin.addons.lazyquerycontainer.LazyQueryContainer;
+import org.vaadin.addons.lazyquerycontainer.LazyQueryDefinition;
+import org.vaadin.peter.contextmenu.ContextMenu;
+import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItem;
+import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItemClickEvent;
+import org.vaadin.spring.events.EventBus;
+import org.vaadin.spring.events.EventScope;
+import org.vaadin.spring.events.annotation.EventBusListenerMethod;
+
+import com.vaadin.data.Container;
+import com.vaadin.data.Item;
+import com.vaadin.data.util.PropertyValueGenerator;
+import com.vaadin.data.util.converter.Converter;
+import com.vaadin.server.AbstractClientConnector;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.spring.annotation.SpringComponent;
+import com.vaadin.spring.annotation.ViewScope;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.renderers.ClickableRenderer.RendererClickEvent;
+import com.vaadin.ui.renderers.HtmlRenderer;
+
+@SpringComponent
+@ViewScope
+public class RolloutListGrid2 extends AbstractSimpleGrid {
+    private static final long serialVersionUID = 4060904914954370524L;
+
+    @Autowired
+    private I18N i18n;
+
+    @Autowired
+    private transient EventBus.SessionEventBus eventBus;
+
+    @Autowired
+    private transient RolloutManagement rolloutManagement;
+
+    @Autowired
+    private AddUpdateRolloutWindowLayout addUpdateRolloutWindow;
+
+    @Autowired
+    private UINotification uiNotification;
+
+    @Autowired
+    private transient RolloutUIState rolloutUIState;
+
+    @Autowired
+    private transient SpPermissionChecker permissionChecker;
+
+    @Override
+    @PostConstruct
+    protected void init() {
+        super.init();
+        eventBus.subscribe(this);
+    }
+
+    @PreDestroy
+    void destroy() {
+        eventBus.unsubscribe(this);
+    }
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    void onEvent(final RolloutEvent event) {
+        if (event == RolloutEvent.FILTER_BY_TEXT || event == RolloutEvent.CREATE_ROLLOUT
+                || event == RolloutEvent.UPDATE_ROLLOUT || event == RolloutEvent.SHOW_ROLLOUTS) {
+            refreshTable();
+        }
+    }
+
+    /**
+     * Handles the RolloutChangeEvent to refresh the item in the table.
+     * 
+     * @param rolloutChangeEvent
+     *            the event which contains the rollout which has been changed
+     */
+    @SuppressWarnings("unchecked")
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    public void onEvent(final RolloutChangeEvent rolloutChangeEvent) {
+        final Rollout rollout = rolloutManagement.findRolloutWithDetailedStatus(rolloutChangeEvent.getRolloutId());
+        final TotalTargetCountStatus totalTargetCountStatus = rollout.getTotalTargetCountStatus();
+        final LazyQueryContainer rolloutContainer = (LazyQueryContainer) getContainerDataSource();
+        final Item item = rolloutContainer.getItem(rolloutChangeEvent.getRolloutId());
+        item.getItemProperty(SPUILabelDefinitions.VAR_STATUS).setValue(rollout.getStatus());
+        item.getItemProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setValue(totalTargetCountStatus);
+        final Long groupCount = (Long) item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).getValue();
+        if (null != rollout.getRolloutGroups() && groupCount != rollout.getRolloutGroups().size()) {
+            item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS)
+                    .setValue(Long.valueOf(rollout.getRolloutGroups().size()));
+        }
+    }
+
+    @Override
+    protected String getTableId() {
+        return SPUIComponetIdProvider.ROLLOUT_LIST_TABLE_ID;
+    }
+
+    @Override
+    protected Container createContainer() {
+        final BeanQueryFactory<RolloutBeanQuery> rolloutQf = new BeanQueryFactory<>(RolloutBeanQuery.class);
+        return new LazyQueryContainer(
+                new LazyQueryDefinition(true, SPUIDefinitions.PAGE_SIZE, SPUILabelDefinitions.VAR_ID), rolloutQf);
+    }
+
+    @Override
+    protected void addContainerProperties() {
+        final LazyQueryContainer rolloutGridContainer = (LazyQueryContainer) getContainerDataSource();
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_ID, String.class, null, false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_NAME, String.class, "", false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DESC, String.class, null, false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_STATUS, RolloutStatus.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DIST_NAME_VERSION, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_CREATED_DATE, String.class, null, false,
+                false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_MODIFIED_DATE, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_CREATED_USER, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_MODIFIED_BY, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS, Integer.class, 0, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS, String.class, "0", false,
+                false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS,
+                TotalTargetCountStatus.class, null, false, false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.ACTION, String.class,
+                FontAwesome.CIRCLE_O.getHtml(), false, false);
+
+    }
+
+    @Override
+    protected void setColumnProperties() {
+        List<Object> columnList = new ArrayList<>();
+        columnList.add(SPUILabelDefinitions.VAR_NAME);
+        columnList.add(SPUILabelDefinitions.VAR_DIST_NAME_VERSION);
+        columnList.add(SPUILabelDefinitions.VAR_STATUS);
+        columnList.add(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS);
+        columnList.add(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS);
+        columnList.add(SPUILabelDefinitions.VAR_TOTAL_TARGETS);
+        columnList.add(SPUILabelDefinitions.VAR_CREATED_DATE);
+        columnList.add(SPUILabelDefinitions.VAR_CREATED_USER);
+        columnList.add(SPUILabelDefinitions.VAR_MODIFIED_DATE);
+        columnList.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
+        columnList.add(SPUILabelDefinitions.VAR_DESC);
+        columnList.add(SPUILabelDefinitions.ACTION);
+        setColumnOrder(columnList.toArray());
+        
+        alignColumns();
+    }
+
+    private void alignColumns() {
+        setCellStyleGenerator(new CellStyleGenerator() {
+            private static final long serialVersionUID = 5573570647129792429L;
+
+            @Override
+            public String getStyle(final CellReference cellReference) {
+                String[] coulmnNames = { SPUILabelDefinitions.VAR_STATUS,
+                        SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS, SPUILabelDefinitions.ACTION };
+                if (Arrays.asList(coulmnNames).contains(cellReference.getPropertyId())) {
+                    return "centeralign";
+                }
+                return null;
+            }
+        });
+    }
+
+    @Override
+    protected void setHiddenColumns() {
+        List<Object> columnsToBeHidden = new ArrayList<>();
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_CREATED_DATE);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_CREATED_USER);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_MODIFIED_DATE);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_DESC);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_ID);
+        for (Object propertyId : columnsToBeHidden) {
+            getColumn(propertyId).setHidden(true);
+        }
+    }
+
+    @Override
+    protected void setColumnHeaderNames() {
+        getColumn(SPUILabelDefinitions.VAR_NAME).setHeaderCaption(i18n.get("header.name"));
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setHeaderCaption(i18n.get("header.distributionset"));
+        getColumn(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).setHeaderCaption(i18n.get("header.numberofgroups"));
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setHeaderCaption(i18n.get("header.total.targets"));
+        getColumn(SPUILabelDefinitions.VAR_CREATED_DATE).setHeaderCaption(i18n.get("header.createdDate"));
+        getColumn(SPUILabelDefinitions.VAR_CREATED_USER).setHeaderCaption(i18n.get("header.createdBy"));
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_DATE).setHeaderCaption(i18n.get("header.modifiedDate"));
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_BY).setHeaderCaption(i18n.get("header.modifiedBy"));
+        getColumn(SPUILabelDefinitions.VAR_DESC).setHeaderCaption(i18n.get("header.description"));
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS)
+                .setHeaderCaption(i18n.get("header.detail.status"));
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setHeaderCaption(i18n.get("header.status"));
+        getColumn(SPUILabelDefinitions.ACTION).setHeaderCaption(i18n.get("upload.action"));
+    }
+
+    @Override
+    protected void setColumnExpandRatio() {
+        getColumn(SPUILabelDefinitions.VAR_NAME).setExpandRatio(1);
+        getColumn(SPUILabelDefinitions.VAR_NAME).setMaximumWidth(300);
+
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setExpandRatio(1);
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setMaximumWidth(300);
+
+        getColumn(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setMinimumWidth(95);
+
+        getColumn(SPUILabelDefinitions.VAR_CREATED_DATE).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_CREATED_USER).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_DATE).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_BY).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_DESC).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setMinimumWidth(75);
+
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setExpandRatio(2);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setMinimumWidth(600);
+
+        getColumn(SPUILabelDefinitions.ACTION).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.ACTION).setMinimumWidth(90);
+
+    }
+
+    @Override
+    protected void addColumnRenderes() {
+        setEditorEnabled(true);
+        addDetailStatusColumn();
+        addStatusCoulmn();
+        getColumn(SPUILabelDefinitions.ACTION).setRenderer(new HtmlButtonRenderer(event -> onClickOfActionBtn(event)));
+        getColumn(SPUILabelDefinitions.VAR_NAME).setRenderer(new LinkRenderer(event -> onClickOfRolloutName(event)));
+    }
+
+    private void onClickOfRolloutName(RendererClickEvent event) {
+        rolloutUIState.setRolloutId((long) event.getItemId());
+        final String rolloutName = (String) getContainerDataSource().getItem(event.getItemId())
+                .getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        rolloutUIState.setRolloutName(rolloutName);
+        eventBus.publish(this, RolloutEvent.SHOW_ROLLOUT_GROUPS);
+    }
+
+    private void onClickOfActionBtn(RendererClickEvent event) {
+        final ContextMenu contextMenu = createContextMenu((Long) event.getItemId());
+        contextMenu.setAsContextMenuOf((AbstractClientConnector) event.getComponent());
+        contextMenu.open(event.getClientX(), event.getClientY());
+    }
+
+    private ContextMenu createContextMenu(final Long rolloutId) {
+        final Item row = getContainerDataSource().getItem(rolloutId);
+        final RolloutStatus rolloutStatus = (RolloutStatus) row.getItemProperty(SPUILabelDefinitions.VAR_STATUS)
+                .getValue();
+        final ContextMenu context = new ContextMenu();
+        context.addItemClickListener(event -> menuItemClicked(event));
+        if (rolloutStatus == RolloutStatus.READY) {
+            final ContextMenuItem startItem = context.addItem("Start");
+            startItem.setData(new ContextMenuData(rolloutId, ACTION.START));
+        } else if (rolloutStatus == RolloutStatus.RUNNING) {
+            final ContextMenuItem pauseItem = context.addItem("Pause");
+            pauseItem.setData(new ContextMenuData(rolloutId, ACTION.PAUSE));
+        } else if (rolloutStatus == RolloutStatus.PAUSED) {
+            final ContextMenuItem resumeItem = context.addItem("Resume");
+            resumeItem.setData(new ContextMenuData(rolloutId, ACTION.RESUME));
+        } else if (rolloutStatus == RolloutStatus.STARTING || rolloutStatus == RolloutStatus.CREATING) {
+            return context;
+        }
+        if (permissionChecker.hasRolloutUpdatePermission()) {
+            final ContextMenuItem cancelItem = context.addItem("Update");
+            cancelItem.setData(new ContextMenuData(rolloutId, ACTION.UPDATE));
+        }
+        return context;
+    }
+
+    private void addDetailStatusColumn() {
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setRenderer(
+                new org.eclipse.hawkbit.ui.distributionbar.renderers.StringDistributionBarRenderer(),
+                new Converter<String, TotalTargetCountStatus>() {
+                    private static final long serialVersionUID = 2660476405836705932L;
+
+                    @Override
+                    public TotalTargetCountStatus convertToModel(String value,
+                            Class<? extends TotalTargetCountStatus> targetType, Locale locale)
+                                    throws com.vaadin.data.util.converter.Converter.ConversionException {
+                        return null;
+                    }
+
+                    @Override
+                    public String convertToPresentation(TotalTargetCountStatus value,
+                            Class<? extends String> targetType, Locale locale)
+                                    throws com.vaadin.data.util.converter.Converter.ConversionException {
+                        return getFormattedString(value.getStatusTotalCountMap());
+                    }
+
+                    @Override
+                    public Class<TotalTargetCountStatus> getModelType() {
+                        return TotalTargetCountStatus.class;
+                    }
+
+                    @Override
+                    public Class<String> getPresentationType() {
+                        return String.class;
+                    }
+                });
+    }
+
+    private void addStatusCoulmn() {
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setRenderer(new HtmlRenderer(),
+                new Converter<String, RolloutStatus>() {
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public RolloutStatus convertToModel(final String value,
+                            final Class<? extends RolloutStatus> targetType, final Locale locale) {
+                        return null;
+                    }
+
+                    @Override
+                    public String convertToPresentation(final RolloutStatus value,
+                            final Class<? extends String> targetType, final Locale locale) {
+                        String result = null;
+                        switch (value) {
+                        case FINISHED:
+                            result = "<div class=\"statusIconGreen\">" + FontAwesome.CHECK_CIRCLE.getHtml() + "</div>";
+                            break;
+                        case PAUSED:
+                            result = "<div class=\"statusIconBlue\">" + FontAwesome.PAUSE.getHtml() + "</div>";
+                            break;
+                        case RUNNING:
+                            result = "<div class=\"yellowSpinner\"></div>";
+                            break;
+                        case READY:
+                            result = "<div class=\"statusIconLightBlue\"> <span title=\"xxx\">"
+                                    + FontAwesome.DOT_CIRCLE_O.getHtml() + "</span></div>";
+                            break;
+                        case STOPPED:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.STOP.getHtml() + "</div>";
+                            break;
+                        case CREATING:
+                            result = "<div class=\"greySpinner\"></div>";
+                            break;
+                        case STARTING:
+                            result = "<div class=\"blueSpinner\"></div>";
+                            break;
+                        case ERROR_CREATING:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.EXCLAMATION_CIRCLE.getHtml()
+                                    + "</div>";
+                            break;
+                        case ERROR_STARTING:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.EXCLAMATION_CIRCLE.getHtml()
+                                    + "</div>";
+                            break;
+                        default:
+                            break;
+                        }
+                        return result;
+                    }
+
+                    @Override
+                    public Class<RolloutStatus> getModelType() {
+                        return RolloutStatus.class;
+                    }
+
+                    @Override
+                    public Class<String> getPresentationType() {
+                        return String.class;
+                    }
+                });
+    }
+
+    private String getFormattedString(Map<Status, Long> details) {
+        StringBuilder val = new StringBuilder();
+        String finalVal = null;
+        if (null != details && !details.isEmpty()) {
+            for (Entry<Status, Long> entry : details.entrySet()) {
+                val.append(entry.getKey()).append(":").append(entry.getValue()).append(",");
+            }
+            finalVal = val.substring(0, val.length() - 1);
+        }
+        return finalVal;
+    }
+
+    private void menuItemClicked(final ContextMenuItemClickEvent event) {
+        final ContextMenuItem item = (ContextMenuItem) event.getSource();
+        final ContextMenuData contextMenuData = (ContextMenuData) item.getData();
+        final Item row = getContainerDataSource().getItem(contextMenuData.getRolloutId());
+        final String rolloutName = (String) row.getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        if (contextMenuData.getAction() == ACTION.PAUSE) {
+            rolloutManagement.pauseRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.paused", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.RESUME) {
+            rolloutManagement.resumeRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.resumed", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.START) {
+            rolloutManagement.startRolloutAsync(rolloutManagement.findRolloutByName(rolloutName));
+            uiNotification.displaySuccess(i18n.get("message.rollout.started", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.UPDATE) {
+            addUpdateRolloutWindow.populateData(contextMenuData.getRolloutId());
+            final Window addTargetWindow = addUpdateRolloutWindow.getWindow();
+            addTargetWindow.setCaption(i18n.get("caption.update.rollout"));
+            UI.getCurrent().addWindow(addTargetWindow);
+            addTargetWindow.setVisible(Boolean.TRUE);
+        }
+    }
+
+    private void refreshTable() {
+        ((LazyQueryContainer) getContainerDataSource()).refresh();
+    }
+
+    public final class FontIconGenerator extends PropertyValueGenerator<String> {
+
+        private static final long serialVersionUID = 2544026030795375748L;
+        private final FontAwesome fontIcon;
+
+        public FontIconGenerator(FontAwesome icon) {
+            this.fontIcon = icon;
+        }
+
+        @Override
+        public String getValue(Item item, Object itemId, Object propertyId) {
+            return fontIcon.getHtml();
+        }
+
+        @Override
+        public Class<String> getType() {
+            return String.class;
+        }
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutListGrid3.java

@@ -0,0 +1,465 @@
+package org.eclipse.hawkbit.ui.rollout;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Map.Entry;
+
+import javax.annotation.PostConstruct;
+import javax.annotation.PreDestroy;
+
+import org.eclipse.hawkbit.eventbus.event.RolloutChangeEvent;
+import org.eclipse.hawkbit.repository.RolloutManagement;
+import org.eclipse.hawkbit.repository.SpPermissionChecker;
+import org.eclipse.hawkbit.repository.model.Rollout;
+import org.eclipse.hawkbit.repository.model.Rollout.RolloutStatus;
+import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus;
+import org.eclipse.hawkbit.repository.model.TotalTargetCountStatus.Status;
+import org.eclipse.hawkbit.ui.distributionbar.renderers.HtmlButtonRenderer;
+import org.eclipse.hawkbit.ui.distributionbar.renderers.LinkRenderer;
+import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ACTION;
+import org.eclipse.hawkbit.ui.rollout.RolloutListTable.ContextMenuData;
+import org.eclipse.hawkbit.ui.rollout.event.RolloutEvent;
+import org.eclipse.hawkbit.ui.rollout.state.RolloutUIState;
+import org.eclipse.hawkbit.ui.utils.I18N;
+import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
+import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
+import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
+import org.eclipse.hawkbit.ui.utils.UINotification;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.vaadin.addons.lazyquerycontainer.BeanQueryFactory;
+import org.vaadin.addons.lazyquerycontainer.LazyQueryContainer;
+import org.vaadin.addons.lazyquerycontainer.LazyQueryDefinition;
+import org.vaadin.peter.contextmenu.ContextMenu;
+import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItem;
+import org.vaadin.peter.contextmenu.ContextMenu.ContextMenuItemClickEvent;
+import org.vaadin.spring.events.EventBus;
+import org.vaadin.spring.events.EventScope;
+import org.vaadin.spring.events.annotation.EventBusListenerMethod;
+
+import com.vaadin.data.Container;
+import com.vaadin.data.Item;
+import com.vaadin.data.util.PropertyValueGenerator;
+import com.vaadin.data.util.converter.Converter;
+import com.vaadin.server.AbstractClientConnector;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.spring.annotation.SpringComponent;
+import com.vaadin.spring.annotation.ViewScope;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.renderers.ClickableRenderer.RendererClickEvent;
+import com.vaadin.ui.renderers.HtmlRenderer;
+
+@SpringComponent
+@ViewScope
+public class RolloutListGrid3 extends AbstractSimpleGrid {
+    private static final long serialVersionUID = 4060904914954370524L;
+
+    @Autowired
+    private I18N i18n;
+
+    @Autowired
+    private transient EventBus.SessionEventBus eventBus;
+
+    @Autowired
+    private transient RolloutManagement rolloutManagement;
+
+    @Autowired
+    private AddUpdateRolloutWindowLayout addUpdateRolloutWindow;
+
+    @Autowired
+    private UINotification uiNotification;
+
+    @Autowired
+    private transient RolloutUIState rolloutUIState;
+
+    @Autowired
+    private transient SpPermissionChecker permissionChecker;
+
+    @Override
+    @PostConstruct
+    protected void init() {
+        super.init();
+        eventBus.subscribe(this);
+    }
+
+    @PreDestroy
+    void destroy() {
+        eventBus.unsubscribe(this);
+    }
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    void onEvent(final RolloutEvent event) {
+        if (event == RolloutEvent.FILTER_BY_TEXT || event == RolloutEvent.CREATE_ROLLOUT
+                || event == RolloutEvent.UPDATE_ROLLOUT || event == RolloutEvent.SHOW_ROLLOUTS) {
+            refreshTable();
+        }
+    }
+
+    /**
+     * Handles the RolloutChangeEvent to refresh the item in the table.
+     * 
+     * @param rolloutChangeEvent
+     *            the event which contains the rollout which has been changed
+     */
+    @SuppressWarnings("unchecked")
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    public void onEvent(final RolloutChangeEvent rolloutChangeEvent) {
+        final Rollout rollout = rolloutManagement.findRolloutWithDetailedStatus(rolloutChangeEvent.getRolloutId());
+        final TotalTargetCountStatus totalTargetCountStatus = rollout.getTotalTargetCountStatus();
+        final LazyQueryContainer rolloutContainer = (LazyQueryContainer) getContainerDataSource();
+        final Item item = rolloutContainer.getItem(rolloutChangeEvent.getRolloutId());
+        item.getItemProperty(SPUILabelDefinitions.VAR_STATUS).setValue(rollout.getStatus());
+        item.getItemProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setValue(totalTargetCountStatus);
+        final Long groupCount = (Long) item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).getValue();
+        if (null != rollout.getRolloutGroups() && groupCount != rollout.getRolloutGroups().size()) {
+            item.getItemProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS)
+                    .setValue(Long.valueOf(rollout.getRolloutGroups().size()));
+        }
+    }
+
+    @Override
+    protected String getTableId() {
+        return SPUIComponetIdProvider.ROLLOUT_LIST_TABLE_ID;
+    }
+
+    @Override
+    protected Container createContainer() {
+        final BeanQueryFactory<RolloutBeanQuery> rolloutQf = new BeanQueryFactory<>(RolloutBeanQuery.class);
+        return new LazyQueryContainer(
+                new LazyQueryDefinition(true, SPUIDefinitions.PAGE_SIZE, SPUILabelDefinitions.VAR_ID), rolloutQf);
+    }
+
+    @Override
+    protected void addContainerProperties() {
+        final LazyQueryContainer rolloutGridContainer = (LazyQueryContainer) getContainerDataSource();
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_ID, String.class, null, false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_NAME, String.class, "", false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DESC, String.class, null, false, false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_STATUS, RolloutStatus.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_DIST_NAME_VERSION, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_CREATED_DATE, String.class, null, false,
+                false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_MODIFIED_DATE, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_CREATED_USER, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_MODIFIED_BY, String.class, null, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS, Integer.class, 0, false,
+                false);
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS, String.class, "0", false,
+                false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS,
+                TotalTargetCountStatus.class, null, false, false);
+
+        rolloutGridContainer.addContainerProperty(SPUILabelDefinitions.ACTION, String.class,
+                FontAwesome.CIRCLE_O.getHtml(), false, false);
+
+    }
+
+    @Override
+    protected void setColumnProperties() {
+        List<Object> columnList = new ArrayList<>();
+        columnList.add(SPUILabelDefinitions.VAR_NAME);
+        columnList.add(SPUILabelDefinitions.VAR_DIST_NAME_VERSION);
+        columnList.add(SPUILabelDefinitions.VAR_STATUS);
+        columnList.add(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS);
+        columnList.add(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS);
+        columnList.add(SPUILabelDefinitions.VAR_TOTAL_TARGETS);
+        columnList.add(SPUILabelDefinitions.VAR_CREATED_DATE);
+        columnList.add(SPUILabelDefinitions.VAR_CREATED_USER);
+        columnList.add(SPUILabelDefinitions.VAR_MODIFIED_DATE);
+        columnList.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
+        columnList.add(SPUILabelDefinitions.VAR_DESC);
+        columnList.add(SPUILabelDefinitions.ACTION);
+        setColumnOrder(columnList.toArray());
+        
+        alignColumns();
+    }
+
+    private void alignColumns() {
+        setCellStyleGenerator(new CellStyleGenerator() {
+            private static final long serialVersionUID = 5573570647129792429L;
+
+            @Override
+            public String getStyle(final CellReference cellReference) {
+                String[] coulmnNames = { SPUILabelDefinitions.VAR_STATUS,
+                        SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS, SPUILabelDefinitions.ACTION };
+                if (Arrays.asList(coulmnNames).contains(cellReference.getPropertyId())) {
+                    return "centeralign";
+                }
+                return null;
+            }
+        });
+    }
+
+    @Override
+    protected void setHiddenColumns() {
+        List<Object> columnsToBeHidden = new ArrayList<>();
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_CREATED_DATE);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_CREATED_USER);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_MODIFIED_DATE);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_MODIFIED_BY);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_DESC);
+        columnsToBeHidden.add(SPUILabelDefinitions.VAR_ID);
+        for (Object propertyId : columnsToBeHidden) {
+            getColumn(propertyId).setHidden(true);
+        }
+    }
+
+    @Override
+    protected void setColumnHeaderNames() {
+        getColumn(SPUILabelDefinitions.VAR_NAME).setHeaderCaption(i18n.get("header.name"));
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setHeaderCaption(i18n.get("header.distributionset"));
+        getColumn(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).setHeaderCaption(i18n.get("header.numberofgroups"));
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setHeaderCaption(i18n.get("header.total.targets"));
+        getColumn(SPUILabelDefinitions.VAR_CREATED_DATE).setHeaderCaption(i18n.get("header.createdDate"));
+        getColumn(SPUILabelDefinitions.VAR_CREATED_USER).setHeaderCaption(i18n.get("header.createdBy"));
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_DATE).setHeaderCaption(i18n.get("header.modifiedDate"));
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_BY).setHeaderCaption(i18n.get("header.modifiedBy"));
+        getColumn(SPUILabelDefinitions.VAR_DESC).setHeaderCaption(i18n.get("header.description"));
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS)
+                .setHeaderCaption(i18n.get("header.detail.status"));
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setHeaderCaption(i18n.get("header.status"));
+        getColumn(SPUILabelDefinitions.ACTION).setHeaderCaption(i18n.get("upload.action"));
+    }
+
+    @Override
+    protected void setColumnExpandRatio() {
+        getColumn(SPUILabelDefinitions.VAR_NAME).setExpandRatio(1);
+        getColumn(SPUILabelDefinitions.VAR_NAME).setMaximumWidth(300);
+
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setExpandRatio(1);
+        getColumn(SPUILabelDefinitions.VAR_DIST_NAME_VERSION).setMaximumWidth(300);
+
+        getColumn(SPUILabelDefinitions.VAR_NUMBER_OF_GROUPS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS).setMinimumWidth(95);
+
+        getColumn(SPUILabelDefinitions.VAR_CREATED_DATE).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_CREATED_USER).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_DATE).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_MODIFIED_BY).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_DESC).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setMinimumWidth(75);
+
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setExpandRatio(2);
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setMinimumWidth(600);
+
+        getColumn(SPUILabelDefinitions.ACTION).setExpandRatio(0);
+        getColumn(SPUILabelDefinitions.ACTION).setMinimumWidth(90);
+
+    }
+
+    @Override
+    protected void addColumnRenderes() {
+        setEditorEnabled(true);
+        addDetailStatusColumn();
+        addStatusCoulmn();
+        getColumn(SPUILabelDefinitions.ACTION).setRenderer(new HtmlButtonRenderer(event -> onClickOfActionBtn(event)));
+        getColumn(SPUILabelDefinitions.VAR_NAME).setRenderer(new LinkRenderer(event -> onClickOfRolloutName(event)));
+    }
+
+    private void onClickOfRolloutName(RendererClickEvent event) {
+        rolloutUIState.setRolloutId((long) event.getItemId());
+        final String rolloutName = (String) getContainerDataSource().getItem(event.getItemId())
+                .getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        rolloutUIState.setRolloutName(rolloutName);
+        eventBus.publish(this, RolloutEvent.SHOW_ROLLOUT_GROUPS);
+    }
+
+    private void onClickOfActionBtn(RendererClickEvent event) {
+        final ContextMenu contextMenu = createContextMenu((Long) event.getItemId());
+        contextMenu.setAsContextMenuOf((AbstractClientConnector) event.getComponent());
+        contextMenu.open(event.getClientX(), event.getClientY());
+    }
+
+    private ContextMenu createContextMenu(final Long rolloutId) {
+        final Item row = getContainerDataSource().getItem(rolloutId);
+        final RolloutStatus rolloutStatus = (RolloutStatus) row.getItemProperty(SPUILabelDefinitions.VAR_STATUS)
+                .getValue();
+        final ContextMenu context = new ContextMenu();
+        context.addItemClickListener(event -> menuItemClicked(event));
+        if (rolloutStatus == RolloutStatus.READY) {
+            final ContextMenuItem startItem = context.addItem("Start");
+            startItem.setData(new ContextMenuData(rolloutId, ACTION.START));
+        } else if (rolloutStatus == RolloutStatus.RUNNING) {
+            final ContextMenuItem pauseItem = context.addItem("Pause");
+            pauseItem.setData(new ContextMenuData(rolloutId, ACTION.PAUSE));
+        } else if (rolloutStatus == RolloutStatus.PAUSED) {
+            final ContextMenuItem resumeItem = context.addItem("Resume");
+            resumeItem.setData(new ContextMenuData(rolloutId, ACTION.RESUME));
+        } else if (rolloutStatus == RolloutStatus.STARTING || rolloutStatus == RolloutStatus.CREATING) {
+            return context;
+        }
+        if (permissionChecker.hasRolloutUpdatePermission()) {
+            final ContextMenuItem cancelItem = context.addItem("Update");
+            cancelItem.setData(new ContextMenuData(rolloutId, ACTION.UPDATE));
+        }
+        return context;
+    }
+
+    private void addDetailStatusColumn() {
+        getColumn(SPUILabelDefinitions.VAR_TOTAL_TARGETS_COUNT_STATUS).setRenderer(
+                new org.eclipse.hawkbit.ui.distributionbar.renderers.StringDistributionBarRenderer(),
+                new Converter<String, TotalTargetCountStatus>() {
+                    private static final long serialVersionUID = 2660476405836705932L;
+
+                    @Override
+                    public TotalTargetCountStatus convertToModel(String value,
+                            Class<? extends TotalTargetCountStatus> targetType, Locale locale)
+                                    throws com.vaadin.data.util.converter.Converter.ConversionException {
+                        return null;
+                    }
+
+                    @Override
+                    public String convertToPresentation(TotalTargetCountStatus value,
+                            Class<? extends String> targetType, Locale locale)
+                                    throws com.vaadin.data.util.converter.Converter.ConversionException {
+                        return getFormattedString(value.getStatusTotalCountMap());
+                    }
+
+                    @Override
+                    public Class<TotalTargetCountStatus> getModelType() {
+                        return TotalTargetCountStatus.class;
+                    }
+
+                    @Override
+                    public Class<String> getPresentationType() {
+                        return String.class;
+                    }
+                });
+    }
+
+    private void addStatusCoulmn() {
+        getColumn(SPUILabelDefinitions.VAR_STATUS).setRenderer(new HtmlRenderer(),
+                new Converter<String, RolloutStatus>() {
+                    private static final long serialVersionUID = 1L;
+
+                    @Override
+                    public RolloutStatus convertToModel(final String value,
+                            final Class<? extends RolloutStatus> targetType, final Locale locale) {
+                        return null;
+                    }
+
+                    @Override
+                    public String convertToPresentation(final RolloutStatus value,
+                            final Class<? extends String> targetType, final Locale locale) {
+                        String result = null;
+                        switch (value) {
+                        case FINISHED:
+                            result = "<div class=\"statusIconGreen\">" + FontAwesome.CHECK_CIRCLE.getHtml() + "</div>";
+                            break;
+                        case PAUSED:
+                            result = "<div class=\"statusIconBlue\">" + FontAwesome.PAUSE.getHtml() + "</div>";
+                            break;
+                        case RUNNING:
+                            result = "<div class=\"yellowSpinner\"></div>";
+                            break;
+                        case READY:
+                            result = "<div class=\"statusIconLightBlue\"> <span title=\"xxx\">"
+                                    + FontAwesome.DOT_CIRCLE_O.getHtml() + "</span></div>";
+                            break;
+                        case STOPPED:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.STOP.getHtml() + "</div>";
+                            break;
+                        case CREATING:
+                            result = "<div class=\"greySpinner\"></div>";
+                            break;
+                        case STARTING:
+                            result = "<div class=\"blueSpinner\"></div>";
+                            break;
+                        case ERROR_CREATING:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.EXCLAMATION_CIRCLE.getHtml()
+                                    + "</div>";
+                            break;
+                        case ERROR_STARTING:
+                            result = "<div class=\"statusIconRed\">" + FontAwesome.EXCLAMATION_CIRCLE.getHtml()
+                                    + "</div>";
+                            break;
+                        default:
+                            break;
+                        }
+                        return result;
+                    }
+
+                    @Override
+                    public Class<RolloutStatus> getModelType() {
+                        return RolloutStatus.class;
+                    }
+
+                    @Override
+                    public Class<String> getPresentationType() {
+                        return String.class;
+                    }
+                });
+    }
+
+    private String getFormattedString(Map<Status, Long> details) {
+        StringBuilder val = new StringBuilder();
+        String finalVal = null;
+        if (null != details && !details.isEmpty()) {
+            for (Entry<Status, Long> entry : details.entrySet()) {
+                val.append(entry.getKey()).append(":").append(entry.getValue()).append(",");
+            }
+            finalVal = val.substring(0, val.length() - 1);
+        }
+        return finalVal;
+    }
+
+    private void menuItemClicked(final ContextMenuItemClickEvent event) {
+        final ContextMenuItem item = (ContextMenuItem) event.getSource();
+        final ContextMenuData contextMenuData = (ContextMenuData) item.getData();
+        final Item row = getContainerDataSource().getItem(contextMenuData.getRolloutId());
+        final String rolloutName = (String) row.getItemProperty(SPUILabelDefinitions.VAR_NAME).getValue();
+        if (contextMenuData.getAction() == ACTION.PAUSE) {
+            rolloutManagement.pauseRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.paused", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.RESUME) {
+            rolloutManagement.resumeRollout(rolloutManagement.findRolloutById(contextMenuData.getRolloutId()));
+            uiNotification.displaySuccess(i18n.get("message.rollout.resumed", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.START) {
+            rolloutManagement.startRolloutAsync(rolloutManagement.findRolloutByName(rolloutName));
+            uiNotification.displaySuccess(i18n.get("message.rollout.started", rolloutName));
+        } else if (contextMenuData.getAction() == ACTION.UPDATE) {
+            addUpdateRolloutWindow.populateData(contextMenuData.getRolloutId());
+            final Window addTargetWindow = addUpdateRolloutWindow.getWindow();
+            addTargetWindow.setCaption(i18n.get("caption.update.rollout"));
+            UI.getCurrent().addWindow(addTargetWindow);
+            addTargetWindow.setVisible(Boolean.TRUE);
+        }
+    }
+
+    private void refreshTable() {
+        ((LazyQueryContainer) getContainerDataSource()).refresh();
+    }
+
+    public final class FontIconGenerator extends PropertyValueGenerator<String> {
+
+        private static final long serialVersionUID = 2544026030795375748L;
+        private final FontAwesome fontIcon;
+
+        public FontIconGenerator(FontAwesome icon) {
+            this.fontIcon = icon;
+        }
+
+        @Override
+        public String getValue(Item item, Object itemId, Object propertyId) {
+            return fontIcon.getHtml();
+        }
+
+        @Override
+        public Class<String> getType() {
+            return String.class;
+        }
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/RolloutListView.java

@@ -33,9 +33,12 @@ public class RolloutListView extends AbstractSimpleTableLayout {
     @Autowired
     private RolloutListTable rolloutListTable;
     
+    @Autowired
+    private RolloutListGrid rolloutListGrid;
+
     @PostConstruct
     void init() {
-        super.init(rolloutListHeader, rolloutListTable);
+        super.init(rolloutListHeader, rolloutListTable,rolloutListGrid);
     }
 
     

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/utils/SPUILabelDefinitions.java

@@ -540,6 +540,14 @@ public final class SPUILabelDefinitions {
      */
     public static final String VAR_TOTAL_TARGETS = "totalTargetsCount";
     
+    
+    /**
+     * Total target count status coulmn property name.
+     */
+    public static final String VAR_TOTAL_TARGETS_COUNT_STATUS = "totalTargetCountStatus";
+    
+    
+
     /**
      * Constructor.
      */

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/rollout.scss

@@ -56,5 +56,8 @@
       }
 	}
 	
+	.v-grid-cell.centeralign {
+       text-align: center;
+   }
 }
    

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/statusprogressbar.scss

@@ -61,4 +61,9 @@
     -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
   }
+  
+  	.status-bar{
+		width:100%;
+		height:100%;
+	}
 }

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/hawkbittheme.scss

@@ -32,6 +32,12 @@ $v-app-background-color: $app-background-color;
 //Table header,body border colors are calculated based on this
 $v-table-border-color: $widget-border-color ;
 
+$v-grid-border:$v-grid-border-size solid $widget-border-color ;
+$v-grid-cell-vertical-border:  0px ;
+$v-grid-cell-horizontal-border: 0px ;
+$v-grid-cell-focused-border: 0px ;
+$v-grid-cell-padding-horizontal:6px;
+
 @import '../valo/valo';
 @import 'customstyles/table';
 @import 'customstyles/filter-status';

pom.xml

@@ -363,6 +363,11 @@
             <artifactId>vaadin-push</artifactId>
             <version>${vaadin.version}</version>
          </dependency>
+         <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-client</artifactId>
+            <version>${vaadin.version}</version>
+         </dependency>
          <!-- Needed when using the widgetset optimizer (custom ConnectorBundleLoaderFactory).
             For widgetset compilation, vaadin-client-compiler is automatically added
             on the compilation classpath by vaadin-maven-plugin so normally there is