Skip to content

SED-4417 Grid layout for executions report#1325

Draft
dvladir wants to merge 17 commits intomasterfrom
SED-4417-grid-layout-for-executions-report
Draft

SED-4417 Grid layout for executions report#1325
dvladir wants to merge 17 commits intomasterfrom
SED-4417-grid-layout-for-executions-report

Conversation

@dvladir
Copy link
Contributor

@dvladir dvladir commented Feb 5, 2026

No description provided.

@dvladir dvladir requested a review from neogucky February 5, 2026 08:43
@gemini-code-assist
Copy link

Summary of Changes

Hello @dvladir, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user interface flexibility by introducing a new, highly customizable editable grid layout module. This module allows users to dynamically resize and rearrange widgets within the application, with a particular focus on improving the execution reports. The changes provide a more interactive and personalized experience for visualizing data, as widget positions and sizes are now persistent across user sessions.

Highlights

  • New Editable Grid Layout Module: Introduced a comprehensive editable-grid-layout module in step-core to enable dynamic and customizable grid layouts. This module includes components for grid layout, element titles, and resizers, along with directives for managing grid dimensions, drag handles, and editable states.
  • Grid Functionality for Execution Reports: Integrated the new grid layout system into the execution reports in step-frontend. Widgets within the execution report can now be resized and dragged, and their positions are persisted using session storage, offering a more flexible user interface.
  • Grid Element Configuration and Persistence: Added GridSettingsRegistryService to register default configurations for grid elements, including their IDs, titles, and initial dimensions. A GridPersistencePositionsService and GridSessionStorageService were implemented to handle the loading and saving of widget positions, ensuring user preferences are maintained across sessions.
  • Refactoring of Report Widgets: Refactored various alt-report-widget components in step-frontend to utilize the new stepGridElement directive, allowing them to participate in the editable grid layout. This involved removing hardcoded column spans and integrating drag handles and resizers directly into the widgets.
  • New Grid View Test Module: Created a dedicated grid-view-test module to demonstrate and test the capabilities of the new editable grid layout, including a test component and initializer for registering test grid settings and routes.
Changelog
  • projects/step-core/src/lib/modules/custom-registeries/custom-registries.module.ts
    • Exported GridSettingsRegistryService.
  • projects/step-core/src/lib/modules/custom-registeries/services/grid-settings-registry.service.ts
    • Added new service GridSettingsRegistryService for registering and retrieving grid element configurations (GridElementInfo).
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-element-title/grid-element-title.component.html
    • Added new component for displaying grid element titles.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-element-title/grid-element-title.component.ts
    • Added new component GridElementTitleComponent to display titles for grid elements, injecting GRID_LAYOUT_CONFIG and GridElementDirective.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-layout/grid-layout.component.html
    • Added new component for the main grid layout structure, including a preview element for drag/resize operations and placeholders for hidden widgets.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-layout/grid-layout.component.scss
    • Added styling for the step-grid-layout component, defining grid properties, preview styles, and edit mode visual cues.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-layout/grid-layout.component.ts
    • Added new component GridLayoutComponent to manage the overall grid layout, handling element rendering, drag/resize previews, and interaction with position state services.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-resizer/grid-resizer.component.html
    • Added new component for grid element resizing handle.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-resizer/grid-resizer.component.scss
    • Added styling for the step-grid-resizer component, including hover effects for resizing.
  • projects/step-core/src/lib/modules/editable-grid-layout/components/grid-resizer/grid-resizer.component.ts
    • Added new component GridResizerComponent to handle resize interactions for grid elements.
  • projects/step-core/src/lib/modules/editable-grid-layout/directives/grid-dimensions.directive.ts
    • Added new directive GridDimensionsDirective to provide grid dimension calculations and inject GridDimensionsService.
  • projects/step-core/src/lib/modules/editable-grid-layout/directives/grid-drag-handle.directive.ts
    • Added new directive GridDragHandleDirective to enable dragging functionality for grid elements.
  • projects/step-core/src/lib/modules/editable-grid-layout/directives/grid-editable.directive.ts
    • Added new directive GridEditableDirective to control the edit mode of the grid layout.
  • projects/step-core/src/lib/modules/editable-grid-layout/directives/grid-element.directive.ts
    • Added new directive GridElementDirective to mark and manage individual elements within the grid layout, handling their positioning and rendering.
  • projects/step-core/src/lib/modules/editable-grid-layout/index.ts
    • Exported all components, directives, and injectables related to the editable-grid-layout module.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-column-count.token.ts
    • Added new injection token GRID_COLUMN_COUNT to define the number of columns in the grid.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-dimensions.service.ts
    • Added new abstract class GridDimensionsService defining an interface for grid dimension calculations.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-editable.service.ts
    • Added new abstract class GridEditableService defining an interface for grid edit mode state.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-element-drag.service.ts
    • Added new injectable service GridElementDragService to manage drag operations for grid elements, including preview and position updates.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-element-resizer.service.ts
    • Added new injectable service GridElementResizerService to manage resize operations for grid elements, including preview and position updates.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-layout-config.token.ts
    • Added new injection token GRID_LAYOUT_CONFIG and provideGridLayoutConfig function for configuring grid layouts with default element parameters.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-persistence-positions.service.ts
    • Added new injectable service GridPersistencePositionsService for saving and loading grid element positions using session storage.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/grid-session-storage.service.ts
    • Added new injectable service GridSessionStorageService extending StorageProxy for session-based storage of grid data.
  • projects/step-core/src/lib/modules/editable-grid-layout/injectables/widgets-positions-state.service.ts
    • Added new injectable service WidgetsPositionsStateService to manage the state of widget positions within the grid, including initialization, updates, and collision detection.
  • projects/step-core/src/lib/modules/editable-grid-layout/types/grid-element-id.ts
    • Added new utility function gridElementId to extract the ID from a grid element's dataset.
  • projects/step-core/src/lib/modules/editable-grid-layout/types/widget-ids.ts
    • Added new class WidgetIDs for mapping string widget IDs to numeric IDs and vice-versa.
  • projects/step-core/src/lib/modules/editable-grid-layout/types/widget-position.ts
    • Added new interface WidgetPositionParams and class WidgetPosition to define and manage the position and dimensions of widgets within the grid.
  • projects/step-core/src/lib/modules/execution-common/index.ts
    • Exported EXECUTION_REPORT_GRID.
  • projects/step-core/src/lib/modules/execution-common/types/execution-report-grid.ts
    • Added new constant EXECUTION_REPORT_GRID.
  • projects/step-core/src/lib/modules/routing/injectables/view-registry.service.ts
    • Updated type annotations for registeredViews, registeredDashlets, registerStandardMenuEntries, getViewTemplate, isPublicView, isStaticView, and normalizeWeight for improved type safety.
  • projects/step-core/src/lib/step-core.module.ts
    • Imported and exported EDITABLE_GIRD_LAYOUT_EXPORTS to make the new grid module available throughout the application.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-errors-widget/alt-execution-errors-widget.component.html
    • Added step-grid-resizer to allow resizing of the errors widget.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-progress/alt-execution-progress.component.ts
    • Added gridEditMode as a model signal.
    • Changed toggleRequestWarning, execution, and isAnalyticsRoute to readonly.
    • Added explicit return types to handleTimeRangeChange and setupNavigationHistoryChange.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report-controls/alt-execution-report-controls.component.html
    • Added a button to toggle the grid edit mode, visible only on non-small screens.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report-controls/alt-execution-report-controls.component.scss
    • Added styling for the new grid edit mode toggle button.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report-controls/alt-execution-report-controls.component.ts
    • Injected AltExecutionStateService and IS_SMALL_SCREEN.
    • Added toggleGridEdit method to update the grid edit mode state.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report/alt-execution-report.component.html
    • Replaced the root <section> element with <step-grid-layout> to enable grid functionality.
    • Bound editMode to the grid layout component.
    • Applied stepGridElement directives to various widgets (e.g., errorsWidget, testCases, keywordsSummary, executionTree, keywordsList, performanceOverview, errors, currentOperations).
    • Integrated stepGridDragHandle and step-grid-element-title into widget titles for drag-and-drop functionality.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report/alt-execution-report.component.scss
    • Updated styling to adapt to the new step-grid-layout and step-grid-element structure, including responsive adjustments for single-column view.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-report/alt-execution-report.component.ts
    • Imported EXECUTION_REPORT_GRID and provideGridLayoutConfig.
    • Added provideGridLayoutConfig(EXECUTION_REPORT_GRID) to the component's providers.
    • Changed treeWidget, treeWidgetContainer, and errors view children to readonly.
    • Added explicit return types to handleChartZooming and searchFor methods.
  • projects/step-frontend/src/lib/modules/execution/components/alt-execution-tree-widget/alt-execution-tree-widget.component.html
    • Removed the title attribute from step-alt-report-widget.
    • Added step-alt-report-widget-title with stepGridDragHandle and step-grid-element-title.
    • Added step-grid-resizer.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-current-operations/alt-report-current-operations.component.html
    • Removed the title attribute from step-alt-report-widget.
    • Added step-alt-report-widget-title with stepGridDragHandle and step-grid-element-title.
    • Added step-grid-resizer.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-current-operations/alt-report-current-operations.component.ts
    • Changed operations input to readonly.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-node-keywords/alt-report-node-keywords.component.html
    • Removed the title attribute from step-alt-report-node-list.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-node-list/alt-report-node-list.component.html
    • Removed the title attribute from step-alt-report-widget.
    • Added step-alt-report-widget-title with stepGridDragHandle and step-grid-element-title.
    • Added step-grid-resizer.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-node-list/alt-report-node-list.component.ts
    • Removed the title input property.
    • Changed sortInternal and showSort to readonly.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-node-summary/alt-report-node-summary.component.html
    • Added conditional rendering for stepGridDragHandle, step-grid-element-title, and step-grid-resizer based on the hasGrid property.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-node-summary/alt-report-node-summary.component.ts
    • Injected GRID_LAYOUT_CONFIG as optional.
    • Added hasGrid computed property to determine if the component is part of a grid layout.
    • Changed statusFilter, availableStatuses, summaryDistinct, and dictionary to readonly.
    • Added explicit return types to toggleChartItem and toggleStatusFilter.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-nodes-testcases/alt-report-nodes-testcases.component.html
    • Removed the title attribute from step-alt-report-node-list.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-performance-overview-chart/alt-report-performance-overview-chart.component.html
    • Removed the title attribute from step-alt-report-widget.
    • Added step-alt-report-widget-title with stepGridDragHandle and step-grid-element-title.
    • Added step-grid-resizer.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-widget/alt-report-widget.component.html
    • Modified mat-card-title to project step-alt-report-widget-title content, allowing custom title layouts.
  • projects/step-frontend/src/lib/modules/execution/components/alt-report-widget/alt-report-widget.component.ts
    • Added titleDirective as a content child for AltReportWidgetTitleDirective.
    • Added hasTitleLayout computed property to check for the presence of a custom title layout.
  • projects/step-frontend/src/lib/modules/execution/directives/alt-report-widget-title.directive.ts
    • Added new directive AltReportWidgetTitleDirective to mark custom title content within step-alt-report-widget.
  • projects/step-frontend/src/lib/modules/execution/execution.module.ts
    • Imported GridSettingsRegistryService, EXECUTION_REPORT_GRID, and AltReportWidgetTitleDirective.
    • Added AltReportWidgetTitleDirective to declarations and exports.
    • Injected GridSettingsRegistryService into the ExecutionModule constructor.
    • Added registerGridLayout method to register default grid settings for various execution report widgets.
    • Called this.registerGridLayout() in the module's constructor.
    • Updated variable names in canActivate guards for clarity (e.g., _ctx, _treeState).
  • projects/step-frontend/src/lib/modules/execution/services/alt-execution-state.service.ts
    • Added gridEditMode as an abstract ModelSignal<boolean>.
  • projects/step-frontend/src/lib/modules/execution/services/executions-panels.service.ts
    • Added JSDoc @deprecated tag to the class.
    • Added explicit return types to toggleShowPanel and updateObservable.
  • projects/step-frontend/src/lib/modules/execution/services/single-execution-panels.service.ts
    • Added JSDoc @deprecated tag to the class.
    • Added explicit return type to toggleShowPanel.
  • projects/step-frontend/src/lib/modules/grid-view-test/components/grid-view-test/grid-view-test.component.html
    • Added new component for testing grid view, including a toggle for edit mode and various step-alt-report-widget elements with stepGridElement directives.
  • projects/step-frontend/src/lib/modules/grid-view-test/components/grid-view-test/grid-view-test.component.scss
    • Added styling for the grid-view-test component, including layout for controls and widget content.
  • projects/step-frontend/src/lib/modules/grid-view-test/components/grid-view-test/grid-view-test.component.ts
    • Added new component GridViewTestComponent for testing the editable grid layout, including editMode and visibility signals for test widgets.
  • projects/step-frontend/src/lib/modules/grid-view-test/grid-view-test.initializer.ts
    • Added new initializer GRID_VIEW_TEST_INITIALIZER to register a test route and default grid settings for the grid-view-test module.
  • projects/step-frontend/src/lib/modules/grid-view-test/index.ts
    • Exported grid-view-test.initializer and grid-view-test.component.
  • projects/step-frontend/src/lib/modules/grid-view-test/shared/grid-test.ts
    • Added new constant GRID_TEST.
Activity
  • dvladir initiated the pull request to introduce a new editable grid layout feature.
  • The core editable-grid-layout module was developed, providing foundational components and services for dynamic grid management.
  • Existing execution report components were updated to integrate with the new grid system, allowing for interactive resizing and dragging of widgets.
  • Persistence mechanisms were implemented to save and load user-defined widget layouts across sessions.
  • A dedicated test module (grid-view-test) was created to thoroughly validate the new grid layout functionality.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

Overall, this is a significant and well-structured feature addition. The use of Angular signals and modern practices is commendable. I've identified a few areas for improvement, including fixing some typos, correcting a logic bug in cell calculation (with consideration for zero-width components), and refactoring a repetitive block of code for better maintainability. Please see the detailed comments below.

providedIn: 'root',
})
export class GridSettingsRegistryService {
private girdsSettings: Map<string, GridElementInfo[]> = new Map();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There's a typo in the property name girdsSettings. It should be gridSettings. This typo appears in multiple places within this file (lines 15, 18, 19, 21, 25). Please correct it for better code clarity and maintainability.

Suggested change
private girdsSettings: Map<string, GridElementInfo[]> = new Map();
private gridSettings: Map<string, GridElementInfo[]> = new Map();

Comment on lines 8 to 11
// eslint-disable-next-line @angular-eslint/prefer-inject
constructor(@Inject(SESSION_STORAGE) _sessionStorage: Storage) {
super(_sessionStorage, 'GRID');
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The eslint-disable-next-line comment indicates a preference for using the inject() function over constructor injection. You can refactor the constructor to adhere to this style, which also makes the code slightly more concise.

  constructor() {
    super(inject(SESSION_STORAGE), 'GRID');
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant