Skip to content

Switch grid display mode to fix scrolling #10883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Switch grid display mode to fix scrolling #10883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
74a6618
Switch grid display mode to fix scrolling
JamesNK Aug 6, 2025
d4fe032
More
JamesNK Aug 8, 2025
941c84f
More
JamesNK Aug 8, 2025
dd61e2d
Update
JamesNK Aug 8, 2025
01364db
Update
JamesNK Aug 8, 2025
fd5834c
More updates
JamesNK Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/Aspire.Dashboard/Components/Controls/Grid/AspireTemplateColumn.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ public class AspireTemplateColumn<TGridItem> : TemplateColumn<TGridItem>, IAspir
protected override void OnInitialized()
{
Tooltip = true;

if (ColumnManager is not null && ColumnId is not null)
{
Width = ColumnManager.GetColumnWidth(ColumnId);
}
}

protected override bool ShouldRender()
Expand Down
2 changes: 1 addition & 1 deletion src/Aspire.Dashboard/Components/Controls/GridValue.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@inject IStringLocalizer<ControlsStrings> Loc
@inject IStringLocalizer<Dialogs> DialogsLoc

<div class="@GetContainerClass()" style="width: inherit;">
<div class="@GetContainerClass()">

@* Value area *@

Expand Down
6 changes: 3 additions & 3 deletions src/Aspire.Dashboard/Components/Pages/Resources.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,18 +127,18 @@
Virtualize="true"
GenerateHeader="GenerateHeaderOption.Sticky"
ItemSize="46"
OverscanCount="100"
OverscanCount="@DashboardUIHelpers.DefaultDataGridOverscanCount"
ItemsProvider="@GetData"
ResizableColumns="true"
ResizeColumnOnAllRows="false"
GridTemplateColumns="@_manager.GetGridTemplateColumns()"
RowClass="@(r => GetRowClass(r.Resource))"
Loading="!_loadingTcs.Task.IsCompleted"
ShowHover="true"
TGridItem="ResourceGridViewModel"
ItemKey="@(r => r.Resource.Name)"
OnRowClick="@(r => r.ExecuteOnDefault(d => ShowResourceDetailsAsync(d.Resource, buttonId: null)))"
Class="main-grid enable-row-click">
Class="main-grid enable-row-click"
DisplayMode="DataGridDisplayMode.Table">
<ChildContent>
<AspireTemplateColumn ColumnId="@NameColumn" ColumnManager="@_manager" Title="@ControlsStringsLoc[nameof(ControlsStrings.NameColumnHeader)]" Sortable="true" SortBy="@_nameSort" Tooltip="true" TooltipText="@(c => $"{c.Resource.ResourceType}: {GetResourceName(c.Resource)}")" Class="expand-col">
@{
Expand Down
16 changes: 8 additions & 8 deletions src/Aspire.Dashboard/Components/Pages/Resources.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ public partial class Resources : ComponentBase, IComponentWithTelemetry, IAsyncD
private const string ActionsColumn = nameof(ActionsColumn);

private Subscription? _logsSubscription;
private IList<GridColumn>? _gridColumns;
private List<GridColumn>? _gridColumns;
private EventCallback _onToggleCollapseAllCallback;
private EventCallback _onToggleResourceTypeCallback;
private bool _hideResourceGraph;
Expand Down Expand Up @@ -175,13 +175,13 @@ protected override async Task OnInitializedAsync()
(_resizeLabels, _sortLabels) = DashboardUIHelpers.CreateGridLabels(ControlsStringsLoc);

_gridColumns = [
new GridColumn(Name: NameColumn, DesktopWidth: "1.5fr", MobileWidth: "1.5fr"),
new GridColumn(Name: StateColumn, DesktopWidth: "1.25fr", MobileWidth: "1.25fr"),
new GridColumn(Name: StartTimeColumn, DesktopWidth: "1fr"),
new GridColumn(Name: TypeColumn, DesktopWidth: "1fr", IsVisible: () => _showResourceTypeColumn),
new GridColumn(Name: SourceColumn, DesktopWidth: "2.25fr"),
new GridColumn(Name: UrlsColumn, DesktopWidth: "2.25fr", MobileWidth: "2fr"),
new GridColumn(Name: ActionsColumn, DesktopWidth: "minmax(150px, 1.5fr)", MobileWidth: "1fr")
new GridColumn(Name: NameColumn, DesktopWidth: Width.Fraction(1.5m), MobileWidth: Width.Fraction(1.5m)),
new GridColumn(Name: StateColumn, DesktopWidth: Width.Fraction(1.25m), MobileWidth: Width.Fraction(1.25m)),
new GridColumn(Name: StartTimeColumn, DesktopWidth: Width.Fraction(1)),
new GridColumn(Name: TypeColumn, DesktopWidth: Width.Fraction(1), IsVisible: () => _showResourceTypeColumn),
new GridColumn(Name: SourceColumn, DesktopWidth: Width.Fraction(2.25m)),
new GridColumn(Name: UrlsColumn, DesktopWidth: Width.Fraction(2.25m), MobileWidth: Width.Fraction(2)),
new GridColumn(Name: ActionsColumn, DesktopWidth: Width.Fraction(1.5m), MobileWidth: Width.Fraction(1))
];

_onToggleCollapseAllCallback = EventCallback.Factory.Create(this, OnToggleCollapseAll);
Expand Down
6 changes: 3 additions & 3 deletions src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,16 @@
RowClass="@GetRowClass"
GenerateHeader="GenerateHeaderOption.Sticky"
ItemSize="46"
OverscanCount="100"
OverscanCount="@DashboardUIHelpers.DefaultDataGridOverscanCount"
ResizableColumns="true"
ResizeColumnOnAllRows="false"
ItemsProvider="@GetData"
TGridItem="OtlpLogEntry"
GridTemplateColumns="@_manager.GetGridTemplateColumns()"
ShowHover="true"
ItemKey="@(r => r.InternalId)"
OnRowClick="@(r => r.ExecuteOnDefault(d => OnShowPropertiesAsync(d, buttonId: null)))"
Class="main-grid enable-row-click">
Class="main-grid enable-row-click"
DisplayMode="DataGridDisplayMode.Table">
<ChildContent>
<AspireTemplateColumn ColumnId="@ResourceColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.StructuredLogs.StructuredLogsResourceColumnHeader)]" Tooltip="true" TooltipText="@(e => GetResourceName(e.ApplicationView))">
<span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @(ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.ApplicationView)));">
Expand Down
14 changes: 7 additions & 7 deletions src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ public partial class StructuredLogs : IComponentWithTelemetry, IPageWithSessionA
private string _filter = string.Empty;
private FluentDataGrid<OtlpLogEntry> _dataGrid = null!;
private GridColumnManager _manager = null!;
private IList<GridColumn> _gridColumns = null!;
private List<GridColumn> _gridColumns = null!;

private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
Expand Down Expand Up @@ -152,12 +152,12 @@ protected override void OnInitialized()
(_resizeLabels, _sortLabels) = DashboardUIHelpers.CreateGridLabels(ControlsStringsLoc);

_gridColumns = [
new GridColumn(Name: ResourceColumn, DesktopWidth: "2fr", MobileWidth: "1fr"),
new GridColumn(Name: LogLevelColumn, DesktopWidth: "1fr"),
new GridColumn(Name: TimestampColumn, DesktopWidth: "1.5fr"),
new GridColumn(Name: MessageColumn, DesktopWidth: "5fr", "2.5fr"),
new GridColumn(Name: TraceColumn, DesktopWidth: "1fr"),
new GridColumn(Name: ActionsColumn, DesktopWidth: "1fr", MobileWidth: "0.8fr")
new GridColumn(Name: ResourceColumn, DesktopWidth: Width.Fraction(2), MobileWidth: Width.Fraction(1)),
new GridColumn(Name: LogLevelColumn, DesktopWidth: Width.Fraction(1)),
new GridColumn(Name: TimestampColumn, DesktopWidth: Width.Fraction(1.5m)),
new GridColumn(Name: MessageColumn, DesktopWidth: Width.Fraction(5), MobileWidth: Width.Fraction(2.5m)),
new GridColumn(Name: TraceColumn, DesktopWidth: Width.Fraction(1)),
new GridColumn(Name: ActionsColumn, DesktopWidth: Width.Fraction(1), MobileWidth: Width.Fraction(0.8m))
];

if (!string.IsNullOrEmpty(TraceId))
Expand Down
6 changes: 3 additions & 3 deletions src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,12 @@
ItemsProvider="@GetData"
TGridItem="SpanWaterfallViewModel"
RowClass="@GetRowClass"
GridTemplateColumns="@_manager.GetGridTemplateColumns()"
RowSize="DataGridRowSize.Small"
OverscanCount="100"
OverscanCount="@DashboardUIHelpers.DefaultDataGridOverscanCount"
ShowHover="true"
ItemKey="@(r => r.Span.SpanId)"
OnRowClick="@(r => r.ExecuteOnDefault(d => OnShowPropertiesAsync(d, buttonId: null)))">
OnRowClick="@(r => r.ExecuteOnDefault(d => OnShowPropertiesAsync(d, buttonId: null)))"
DisplayMode="DataGridDisplayMode.Table">
<AspireTemplateColumn ColumnId="@NameColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailNameHeader)]" Tooltip="true" TooltipText="@(c => c.GetTooltip(_applications))" Class="expand-col">
@{
var isServerOrConsumer = context.Span.Kind == OtlpSpanKind.Server || context.Span.Kind == OtlpSpanKind.Consumer;
Expand Down
8 changes: 4 additions & 4 deletions src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ public partial class TraceDetail : ComponentBase, IComponentWithTelemetry, IDisp
private string? _elementIdBeforeDetailsViewOpened;
private FluentDataGrid<SpanWaterfallViewModel> _dataGrid = null!;
private GridColumnManager _manager = null!;
private IList<GridColumn> _gridColumns = null!;
private List<GridColumn> _gridColumns = null!;
private string _filter = string.Empty;

[Parameter]
Expand Down Expand Up @@ -83,9 +83,9 @@ protected override void OnInitialized()
TelemetryContextProvider.Initialize(TelemetryContext);

_gridColumns = [
new GridColumn(Name: NameColumn, DesktopWidth: "6fr", MobileWidth: "6fr"),
new GridColumn(Name: TicksColumn, DesktopWidth: "12fr", MobileWidth: "12fr"),
new GridColumn(Name: ActionsColumn, DesktopWidth: "100px", MobileWidth: null)
new GridColumn(Name: NameColumn, DesktopWidth: Width.Fraction(6), MobileWidth: Width.Fraction(6)),
new GridColumn(Name: TicksColumn, DesktopWidth: Width.Fraction(12), MobileWidth: Width.Fraction(12)),
new GridColumn(Name: ActionsColumn, DesktopWidth: Width.Pixels(100), MobileWidth: null)
];

foreach (var resolver in OutgoingPeerResolvers)
Expand Down
6 changes: 3 additions & 3 deletions src/Aspire.Dashboard/Components/Pages/Traces.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,16 @@
RowClass="@GetRowClass"
GenerateHeader="GenerateHeaderOption.Sticky"
ItemSize="46"
OverscanCount="100"
OverscanCount="@DashboardUIHelpers.DefaultDataGridOverscanCount"
ResizableColumns="true"
ResizeColumnOnAllRows="false"
ItemsProvider="@GetData"
TGridItem="OtlpTrace"
GridTemplateColumns="@_manager.GetGridTemplateColumns()"
ShowHover="true"
ItemKey="@(r => r.TraceId)"
OnRowClick="@(r => r.ExecuteOnDefault(d => NavigationManager.NavigateTo(DashboardUrls.TraceDetailUrl(d.TraceId))))"
Class="main-grid enable-row-click">
Class="main-grid enable-row-click"
DisplayMode="DataGridDisplayMode.Table">
<ChildContent>
<AspireTemplateColumn ColumnId="@TimestampColumn" ColumnManager="@_manager" Title="@ControlsStringsLoc[nameof(ControlsStrings.TimestampColumnHeader)]" TooltipText="@(context => FormatHelpers.FormatDateTime(TimeProvider, context.FirstSpan.StartTime, MillisecondsDisplay.Full, CultureInfo.CurrentCulture))" Tooltip="true">
@FormatHelpers.FormatTimeWithOptionalDate(TimeProvider, context.FirstSpan.StartTime, MillisecondsDisplay.Truncated)
Expand Down
12 changes: 6 additions & 6 deletions src/Aspire.Dashboard/Components/Pages/Traces.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ public partial class Traces : IComponentWithTelemetry, IPageWithSessionAndUrlSta
private const string SpansColumn = nameof(SpansColumn);
private const string DurationColumn = nameof(DurationColumn);
private const string ActionsColumn = nameof(ActionsColumn);
private IList<GridColumn> _gridColumns = null!;
private List<GridColumn> _gridColumns = null!;
private SelectViewModel<ResourceTypeDetails> _allApplication = null!;

private TotalItemsFooter _totalItemsFooter = default!;
Expand Down Expand Up @@ -154,11 +154,11 @@ protected override void OnInitialized()
(_resizeLabels, _sortLabels) = DashboardUIHelpers.CreateGridLabels(ControlsStringsLoc);

_gridColumns = [
new GridColumn(Name: TimestampColumn, DesktopWidth: "0.8fr", MobileWidth: "0.8fr"),
new GridColumn(Name: NameColumn, DesktopWidth: "2fr", MobileWidth: "2fr"),
new GridColumn(Name: SpansColumn, DesktopWidth: "3fr"),
new GridColumn(Name: DurationColumn, DesktopWidth: "0.8fr"),
new GridColumn(Name: ActionsColumn, DesktopWidth: "0.5fr", MobileWidth: "1fr")
new GridColumn(Name: TimestampColumn, DesktopWidth: Width.Fraction(0.8m), MobileWidth: Width.Fraction(0.8m)),
new GridColumn(Name: NameColumn, DesktopWidth: Width.Fraction(2), MobileWidth: Width.Fraction(2)),
new GridColumn(Name: SpansColumn, DesktopWidth: Width.Fraction(3)),
new GridColumn(Name: DurationColumn, DesktopWidth: Width.Fraction(0.8m)),
new GridColumn(Name: ActionsColumn, DesktopWidth: Width.Fraction(0.5m), MobileWidth: Width.Fraction(1))
];

_allApplication = new SelectViewModel<ResourceTypeDetails> { Id = null, Name = ControlsStringsLoc[name: nameof(ControlsStrings.LabelAll)] };
Expand Down
Loading
Loading