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>
This commit is contained in:
Michael Herdt
2022-08-05 11:52:52 +02:00
committed by GitHub
parent 5c95c4ce28
commit 1682b526ef
12 changed files with 137 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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,
uiProperties, targetTagManagement, distributionSetManagement, uiExecutor, configManagement,
targetManagementStateDataSupplier, systemSecurityContext,
this.targetGridLayout = new TargetGridLayout(uiDependencies, targetManagement, targetTypeManagement,
deploymentManagement, uiProperties, targetTagManagement, distributionSetManagement, uiExecutor,
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() {

View File

@@ -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();

View File

@@ -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,
final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState,
final TargetTagWindowBuilder targetTagWindowBuilder, TargetTypeWindowBuilder targetTypeWindowBuilder) {
public TargetTagFilterHeader(
final CommonUiDependencies uiDependencies,
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;

View File

@@ -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 TargetTypeManagement targetTypeManagement,
final TargetTagManagement targetTagManagement, final TargetManagement targetManagement,
final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState, final DistributionSetTypeManagement distributionSetTypeManagement) {
final TargetFilterQueryManagement targetFilterQueryManagement,
final TargetTypeManagement targetTypeManagement, final TargetTagManagement targetTagManagement,
final TargetManagement targetManagement, final TargetTagFilterLayoutUiState targetTagFilterLayoutUiState,
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);
}
}

View File

@@ -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;
}
}

View File

@@ -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.
*/

View File

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