Make custom target filter table expandable (#1267)

* initial draft to maximize custom target filer table for better UX in case of long keys/names
* Set correct maximize icon identifier and fix problem with wrong db table structure.
* Remove unnecessary local variable.
* Fix db migration scripts
* Fix losing the target tag table when mac and minimizing target table.
* fixed minor styling, removed duplication

Signed-off-by: Bogdan Bondar <Bogdan.Bondar@bosch.io>
Signed-off-by: Michael Herdt <Michael.Herdt@bosch.io>

hawkbit-repository/hawkbit-repository-jpa/src/main/resources/db/migration/DB2/V1_12_22__change_target_type_name_length___DB2.sql

@@ -0,0 +1 @@
+ALTER TABLE sp_target_type ALTER COLUMN name SET DATA TYPE VARCHAR(128);

hawkbit-repository/hawkbit-repository-jpa/src/main/resources/db/migration/H2/V1_12_22__change_target_type_name_length___H2.sql

@@ -0,0 +1 @@
+ALTER TABLE sp_target_type ALTER COLUMN name VARCHAR (128);

hawkbit-repository/hawkbit-repository-jpa/src/main/resources/db/migration/MYSQL/V1_12_22__change_target_type_name_length___MYSQL.sql

@@ -0,0 +1 @@
+ALTER TABLE sp_target_type MODIFY name VARCHAR(128);

hawkbit-repository/hawkbit-repository-jpa/src/main/resources/db/migration/POSTGRESQL/V1_12_22__change_target_type_name_length___POSTGRESQL.sql

@@ -0,0 +1 @@
+ALTER TABLE sp_target_type ALTER COLUMN name VARCHAR (128);

hawkbit-repository/hawkbit-repository-jpa/src/main/resources/db/migration/SQL_SERVER/V1_12_22__fix_target_type_name___SQL_SERVER.sql

@@ -0,0 +1 @@
+ALTER TABLE sp_target_type ALTER COLUMN name VARCHAR (128) NOT NULL;

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/DeploymentView.java

@@ -8,17 +8,11 @@
  */
 package org.eclipse.hawkbit.ui.management;
 
-import com.vaadin.server.Page;
-import com.vaadin.server.Page.BrowserWindowResizeEvent;
-import com.vaadin.server.Page.BrowserWindowResizeListener;
-import com.vaadin.spring.annotation.SpringView;
-import com.vaadin.spring.annotation.UIScope;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.Layout;
 import java.util.Arrays;
 import java.util.EnumMap;
 import java.util.Map;
 import java.util.concurrent.Executor;
+
 import org.eclipse.hawkbit.repository.DeploymentManagement;
 import org.eclipse.hawkbit.repository.DistributionSetInvalidationManagement;
 import org.eclipse.hawkbit.repository.DistributionSetManagement;
@@ -58,6 +52,14 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Qualifier;
 import org.vaadin.spring.events.EventBus.UIEventBus;
 
+import com.vaadin.server.Page;
+import com.vaadin.server.Page.BrowserWindowResizeEvent;
+import com.vaadin.server.Page.BrowserWindowResizeListener;
+import com.vaadin.spring.annotation.SpringView;
+import com.vaadin.spring.annotation.UIScope;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Layout;
+
 /**
  * Target status and deployment management view
  */
@@ -108,9 +110,9 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
                     targetFilterQueryManagement, targetTypeManagement, targetTagManagement, targetManagement,
                     managementUIState.getTargetTagFilterLayoutUiState(), distributionSetTypeManagement);
 
-            this.targetGridLayout = new TargetGridLayout(uiDependencies, targetManagement, targetTypeManagement, deploymentManagement,
+            this.targetGridLayout = new TargetGridLayout(uiDependencies, targetManagement, targetTypeManagement,
-                    uiProperties, targetTagManagement, distributionSetManagement, uiExecutor, configManagement,
+                    deploymentManagement, uiProperties, targetTagManagement, distributionSetManagement, uiExecutor,
-                    targetManagementStateDataSupplier, systemSecurityContext,
+                    configManagement, targetManagementStateDataSupplier, systemSecurityContext,
                     managementUIState.getTargetTagFilterLayoutUiState(), managementUIState.getTargetGridLayoutUiState(),
                     managementUIState.getTargetBulkUploadUiState(),
                     managementUIState.getDistributionGridLayoutUiState());
@@ -153,6 +155,8 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
                     new EventViewAware(EventView.DEPLOYMENT), layoutVisibilityHandlers);
 
             final Map<EventLayout, ResizeHandler> layoutResizeHandlers = new EnumMap<>(EventLayout.class);
+            layoutResizeHandlers.put(EventLayout.TARGET_TAG_FILTER,
+                    new ResizeHandler(this::maximizeCustomFilterLayout, this::minimizeCustomFilterLayout));
             layoutResizeHandlers.put(EventLayout.TARGET_LIST,
                     new ResizeHandler(this::maximizeTargetGridLayout, this::minimizeTargetGridLayout));
             layoutResizeHandlers.put(EventLayout.DS_LIST,
@@ -272,6 +276,10 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
             showTargetTagLayout();
         }
 
+        if (managementUIState.getTargetTagFilterLayoutUiState().isMaximized()) {
+            maximizeCustomFilterLayout();
+        }
+
         if (managementUIState.getTargetGridLayoutUiState().isMaximized()) {
             maximizeTargetGridLayout();
         }
@@ -312,6 +320,9 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
         if (distributionTagLayout != null) {
             hideDsTagLayout();
         }
+        if (targetTagFilterLayout != null) {
+            hideTargetTagLayout();
+        }
         actionHistoryLayout.setVisible(false);
 
         clearAllWidgetsRatios();
@@ -320,17 +331,46 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
         targetGridLayout.maximize();
     }
 
+    private void maximizeCustomFilterLayout() {
+        if (distributionGridLayout != null) {
+            distributionGridLayout.setVisible(false);
+        }
+        if (distributionTagLayout != null) {
+            hideDsTagLayout();
+        }
+        actionHistoryLayout.setVisible(false);
+
+        clearAllWidgetsRatios();
+        mainLayout.setExpandRatio(targetTagFilterLayout, 1F);
+        mainLayout.setExpandRatio(targetGridLayout, 0.5F);
+
+        targetTagFilterLayout.maximize();
+    }
+
     private void clearAllWidgetsRatios() {
         mainLayout.iterator().forEachRemaining(layout -> mainLayout.setExpandRatio(layout, 0F));
     }
 
     private void minimizeTargetGridLayout() {
+        showNonTargetSpecificWidgetsAdaptingRatios();
+
+        if (targetTagFilterLayout != null && !managementUIState.getTargetTagFilterLayoutUiState().isHidden()) {
+            showTargetTagLayout();
+            targetTagFilterLayout.minimize();
+        }
+
+        targetGridLayout.minimize();
+    }
+
+    private void showNonTargetSpecificWidgetsAdaptingRatios() {
         if (distributionGridLayout != null) {
             distributionGridLayout.setVisible(true);
         }
+
         if (distributionTagLayout != null && !managementUIState.getDistributionTagLayoutUiState().isHidden()) {
             showDsTagLayout();
         }
+
         actionHistoryLayout.setVisible(true);
 
         if (distributionGridLayout != null && distributionTagLayout != null) {
@@ -339,7 +379,12 @@ public class DeploymentView extends AbstractEventListenersAwareView implements B
             adaptTargetWidgetsRatios();
         }
 
-        targetGridLayout.minimize();
+    }
+
+    private void minimizeCustomFilterLayout() {
+        showNonTargetSpecificWidgetsAdaptingRatios();
+
+        targetTagFilterLayout.minimize();
     }
 
     private void maximizeDsGridLayout() {

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/filter/FilterByStatusLayout.java

@@ -168,7 +168,7 @@ public class FilterByStatusLayout extends VerticalLayout {
         targetFilterStatusLabel.addStyleName("target-status-filters-title");
 
         addComponent(targetFilterStatusLabel);
-        setComponentAlignment(targetFilterStatusLabel, Alignment.MIDDLE_CENTER);
+        setComponentAlignment(targetFilterStatusLabel, Alignment.MIDDLE_LEFT);
 
         final HorizontalLayout fiterByStatusLayout = buildFilterByStatusLayout();
 

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/filter/TargetTagFilterHeader.java

@@ -9,13 +9,18 @@
 package org.eclipse.hawkbit.ui.management.targettag.filter;
 
 import org.eclipse.hawkbit.ui.common.CommonUiDependencies;
+import org.eclipse.hawkbit.ui.common.event.CommandTopics;
 import org.eclipse.hawkbit.ui.common.event.EventLayout;
 import org.eclipse.hawkbit.ui.common.event.EventView;
+import org.eclipse.hawkbit.ui.common.event.LayoutResizeEventPayload;
+import org.eclipse.hawkbit.ui.common.event.LayoutResizeEventPayload.ResizeType;
 import org.eclipse.hawkbit.ui.common.grid.header.AbstractFilterHeader;
+import org.eclipse.hawkbit.ui.common.grid.header.support.ResizeHeaderSupport;
 import org.eclipse.hawkbit.ui.management.targettag.TargetTagWindowBuilder;
 import org.eclipse.hawkbit.ui.management.targettag.targettype.TargetTypeWindowBuilder;
 import org.eclipse.hawkbit.ui.utils.UIComponentIdProvider;
 import org.eclipse.hawkbit.ui.utils.UIMessageIdProvider;
+import org.vaadin.spring.events.EventBus.UIEventBus;
 
 import com.vaadin.ui.Window;
 
@@ -31,25 +36,35 @@ public class TargetTagFilterHeader extends AbstractFilterHeader {
 
     private final transient TargetTypeWindowBuilder targetTypeWindowBuilder;
 
+    private final transient ResizeHeaderSupport resizeHeaderSupport;
 
     /**
      * Constructor for TargetTagFilterHeader
-     *  @param uiDependencies
+     * 
+     * @param uiDependencies
      *            {@link CommonUiDependencies}
      * @param targetTagFilterLayoutUiState
-     *            TargetTagFilterLayoutUiState
+     *            {@link TargetTagFilterLayoutUiState}
      * @param targetTagWindowBuilder
+     *            {@link TargetTagWindowBuilder}
      * @param targetTypeWindowBuilder
+     *            {@link TargetTypeWindowBuilder}
      */
-    public TargetTagFilterHeader(final CommonUiDependencies uiDependencies,
+    public TargetTagFilterHeader(
-                                 final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState,
+            final CommonUiDependencies uiDependencies,
-                                 final TargetTagWindowBuilder targetTagWindowBuilder, TargetTypeWindowBuilder targetTypeWindowBuilder) {
+            final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState,
+            final TargetTagWindowBuilder targetTagWindowBuilder,
+            final TargetTypeWindowBuilder targetTypeWindowBuilder) {
         super(uiDependencies.getI18n(), uiDependencies.getPermChecker(), uiDependencies.getEventBus());
 
         this.targetTagFilterLayoutUiState = targetTagFilterLayoutUiState;
         this.targetTagWindowBuilder = targetTagWindowBuilder;
         this.targetTypeWindowBuilder = targetTypeWindowBuilder;
 
+        this.resizeHeaderSupport = new ResizeHeaderSupport(i18n, UIComponentIdProvider.CUSTOM_FILTER_MAX_MIN_TABLE_ICON,
+                this::maximizeTable, this::minimizeTable, this::onLoadIsTableMaximized);
+        addHeaderSupport(resizeHeaderSupport);
+
         buildHeader();
     }
 
@@ -98,6 +113,24 @@ public class TargetTagFilterHeader extends AbstractFilterHeader {
         targetTagFilterLayoutUiState.setHidden(true);
     }
 
+    protected void maximizeTable() {
+        eventBus.publish(CommandTopics.RESIZE_LAYOUT, this,
+                new LayoutResizeEventPayload(ResizeType.MAXIMIZE, getLayout(), EventView.DEPLOYMENT));
+
+        targetTagFilterLayoutUiState.setMaximized(true);
+    }
+
+    protected void minimizeTable() {
+        eventBus.publish(CommandTopics.RESIZE_LAYOUT, this,
+                new LayoutResizeEventPayload(ResizeType.MINIMIZE, getLayout(), EventView.DEPLOYMENT));
+
+        targetTagFilterLayoutUiState.setMaximized(false);
+    }
+
+    protected Boolean onLoadIsTableMaximized() {
+        return targetTagFilterLayoutUiState.isMaximized();
+    }
+
     @Override
     protected EventLayout getLayout() {
         return EventLayout.TARGET_TAG_FILTER;

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/filter/TargetTagFilterLayout.java

@@ -20,9 +20,10 @@ import org.eclipse.hawkbit.ui.common.filterlayout.AbstractFilterLayout;
 import org.eclipse.hawkbit.ui.common.layout.listener.GenericEventListener;
 import org.eclipse.hawkbit.ui.management.ManagementUIState;
 import org.eclipse.hawkbit.ui.management.targettag.TargetTagWindowBuilder;
+import org.eclipse.hawkbit.ui.management.targettag.targettype.TargetTypeWindowBuilder;
 
 import com.vaadin.ui.ComponentContainer;
-import org.eclipse.hawkbit.ui.management.targettag.targettype.TargetTypeWindowBuilder;
+import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 
 /**
  * Target Tag filter layout.
@@ -52,10 +53,10 @@ public class TargetTagFilterLayout extends AbstractFilterLayout {
      *            TargetTagFilterLayoutUiState
      */
     public TargetTagFilterLayout(final CommonUiDependencies uiDependencies, final ManagementUIState managementUIState,
-                                 final TargetFilterQueryManagement targetFilterQueryManagement,
+            final TargetFilterQueryManagement targetFilterQueryManagement,
-                                 final TargetTypeManagement targetTypeManagement,
+            final TargetTypeManagement targetTypeManagement, final TargetTagManagement targetTagManagement,
-                                 final TargetTagManagement targetTagManagement, final TargetManagement targetManagement,
+            final TargetManagement targetManagement, final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState,
-                                 final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState, final DistributionSetTypeManagement distributionSetTypeManagement) {
+            final DistributionSetTypeManagement distributionSetTypeManagement) {
         final TargetTagWindowBuilder targetTagWindowBuilder = new TargetTagWindowBuilder(uiDependencies,
                 targetTagManagement);
 
@@ -65,7 +66,8 @@ public class TargetTagFilterLayout extends AbstractFilterLayout {
         this.targetTagFilterHeader = new TargetTagFilterHeader(uiDependencies, targetTagFilterLayoutUiState,
                 targetTagWindowBuilder, targetTypeWindowBuilder);
         this.multipleTargetFilter = new MultipleTargetFilter(uiDependencies, targetFilterQueryManagement,
-                targetTagManagement, targetManagement, targetTagFilterLayoutUiState, targetTagWindowBuilder, targetTypeWindowBuilder, targetTypeManagement);
+                targetTagManagement, targetManagement, targetTagFilterLayoutUiState, targetTagWindowBuilder,
+                targetTypeWindowBuilder, targetTypeManagement);
 
         this.filterTabChangedListener = new GenericEventListener<>(uiDependencies.getEventBus(),
                 EventTopics.TARGET_FILTER_TAB_CHANGED, this::onTargetFilterTabChanged);
@@ -113,4 +115,12 @@ public class TargetTagFilterLayout extends AbstractFilterLayout {
         filterTabChangedListener.unsubscribe();
         multipleTargetFilter.unsubscribeListeners();
     }
+
+    public void maximize() {
+        setWidthFull();
+    }
+
+    public void minimize() {
+        setWidth(SPUIDefinitions.FILTER_BY_TYPE_WIDTH, Unit.PIXELS);
+    }
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/filter/TargetTagFilterLayoutUiState.java

@@ -26,12 +26,13 @@ public class TargetTagFilterLayoutUiState extends TagFilterLayoutUiState {
     private boolean isOverdueFilterClicked;
     private boolean isCustomFilterTabSelected;
     private boolean isTargetTypeFilterTabSelected;
+    private boolean isMaximized;
 
     public Long getClickedTargetTypeFilterId() {
         return clickedTargetTypeFilterId;
     }
 
-    public void setClickedTargetTypeFilterId(Long clickedTargetTypeFilterId) {
+    public void setClickedTargetTypeFilterId(final Long clickedTargetTypeFilterId) {
         this.clickedTargetTypeFilterId = clickedTargetTypeFilterId;
     }
 
@@ -109,8 +110,16 @@ public class TargetTagFilterLayoutUiState extends TagFilterLayoutUiState {
         return isTargetTypeFilterTabSelected;
     }
 
-    public void setTargetTypeFilterTabSelected(boolean targetTypeFilterTabSelected) {
+    public void setTargetTypeFilterTabSelected(final boolean targetTypeFilterTabSelected) {
         isTargetTypeFilterTabSelected = targetTypeFilterTabSelected;
     }
 
+    public void setMaximized(final boolean maximized) {
+        isMaximized = maximized;
+    }
+
+    public boolean isMaximized() {
+        return isMaximized;
+    }
+
 }

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

@@ -780,10 +780,15 @@ public final class UIComponentIdProvider {
     public static final String TARGET_ATTRIBUTES_UPDATE = "target.attributes.update";
 
     /**
-     * Id of maximize/minimize icon of table - Software module table.
+     * Id of maximize/minimize icon of table - Target table.
      */
     public static final String TARGET_MAX_MIN_TABLE_ICON = "target.max.min.table.icon";
 
+    /**
+     * Id of maximize/minimize icon of table - Custom filter table.
+     */
+    public static final String CUSTOM_FILTER_MAX_MIN_TABLE_ICON = "custom.filter.max.min.table.icon";
+
     /**
      * Id of Assignment type in Software Module Details.
      */

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

@@ -115,4 +115,8 @@
     background-image: none;
     box-shadow: none !important;
   }
+
+  .target-status-filters-title {
+    padding-left: 10px;
+  }
 }