Dashboard metrics filter popup extends beyond browser window and disappears when I try to scroll the page

[KalleOlaviNiemitalo]

When I click a filter button on the "Metrics" page of the Aspire dashboard, it pops up a checkbox list of known values of the attribute. Depending on the size of the Web browser window and the current scrolling position, it is possible that this checkbox list popup is not fully visible, as part of it extends beyond the bottom of the browser window. The Web browser shows a scroll bar at the edge of the window (and perhaps another scroll bar at the edge of the checkbox list popup), but when I try to scroll the page by dragging the scroll bar at the edge of the window, the scroll box does not move; and when I release the mouse button on the scroll bar, the checkbox list popup disappears.

Reproduced on Microsoft Edge 123.0.2420.53.

[davidfowl]

Picture or video?

[KalleOlaviNiemitalo]

It'll take a while before I can set up a demo project with no proprietary data.

[adamint]

I'm not able to reproduce this currently @KalleOlaviNiemitalo. However, @vnbaaij I did notice that FluentPopover is not respecting the AutoFocus="false" parameter set on the filter popover in this case (unable to scroll using mouse scroll), which could be causing this issue. Just want to confirm that the behavior I am seeing is an unintended issue with FluentPopover

[vnbaaij]

That is not what the Autofocus parameter does. It is intended to automatically place the focus on the popover so keyboard interaction can take place (when set to true). A popover uses an Overlay by default and that can indeed makes the background inert.

[adamint]

@vnbaaij is there a way to set the Overlay PreventScroll parameter on the popover, then?

[vnbaaij]

No, there isn't. The FluentOverlay is internal to the FluentPopover.

But I don't think this issue is relevant anymore. I also can't reproduce it. The Filter popover dispalys in the correct location relative to the button basedon the available screen estate (ie button is at bottom of the window->Popover displays above instead of under the button)

[KalleOlaviNiemitalo]

Here's how to reproduce.

Aspire3137.csproj

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net8.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
    <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.7.0" />
    <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.7.0" />
  </ItemGroup>
</Project>

Program.cs

using System;
using System.Collections.Generic;
using System.Diagnostics.Metrics;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using OpenTelemetry;
using OpenTelemetry.Metrics;

namespace Aspire3137
{
    internal static class Program
    {
        private static void Main(string[] args)
        {
            HostApplicationBuilder hostApplicationBuilder = Host.CreateApplicationBuilder(args);

            OpenTelemetryBuilder openTelemetryBuilder = hostApplicationBuilder.Services.AddOpenTelemetry();
            openTelemetryBuilder.WithMetrics(
                (MeterProviderBuilder providerBuilder) =>
                {
                    providerBuilder.AddMeter("Aspire3137");
                    providerBuilder.AddOtlpExporter();
                });

            using (IHost host = hostApplicationBuilder.Build())
            {
                Meter meter = host.Services.GetRequiredService<IMeterFactory>().Create("Aspire3137");
                meter.CreateObservableGauge<int>("Demo", ObserveDemo);

                host.Run();
            }
        }

        private static IEnumerable<Measurement<int>> ObserveDemo()
        {
            var measurements = new Measurement<int>[50];
            var tags = new KeyValuePair<string, object>[11];

            for (int measurementIndex = 0; measurementIndex < measurements.Length; measurementIndex++)
            {
                for (int tagIndex = 0; tagIndex < tags.Length; tagIndex++)
                {
                    tags[tagIndex] = new KeyValuePair<string, object>($"tag{tagIndex}", measurementIndex);
                }

                measurements[measurementIndex] = new Measurement<int>(1, tags);
            }

            return measurements;
        }
    }
}

Start the Aspire dashboard

C:\>set DOTNET_Dashboard__Frontend__EndpointUrls=http://localhost:18888/

C:\>set DOTNET_Dashboard__Frontend__AuthMode=Unsecured

C:\>set DOTNET_Dashboard__Otlp__EndpointUrl=http://localhost:18889

C:\>set DOTNET_Dashboard__Otlp__AuthMode=Unsecured

C:\>CD C:\Program Files\dotnet\packs\Aspire.Dashboard.Sdk.win-x64\8.0.0-preview.6.24214.1\tools

C:\Program Files\dotnet\packs\Aspire.Dashboard.Sdk.win-x64\8.0.0-preview.6.24214.1\tools>.\Aspire.Dashboard.exe
info: Aspire.Dashboard.DashboardWebApplication[0]
      Aspire version: 8.0.0-preview.6.24214.1+6596fdc41a8d419876a6bf4abc17b7c66b9ef63a
info: Aspire.Dashboard.DashboardWebApplication[0]
      Now listening on: http://localhost:18888
info: Aspire.Dashboard.DashboardWebApplication[0]
      OTLP server running at: http://localhost:18889
warn: Aspire.Dashboard.DashboardWebApplication[0]
      OTLP server is unsecured. Untrusted apps can send telemetry to the dashboard. For more information, visit https://go.microsoft.com/fwlink/?linkid=2267030

Start the demo program

dotnet run -- OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:18889 OTEL_METRIC_EXPORT_INTERVAL=1000

Open the demo metrics in a Web browser

http://localhost:18888/metrics/resource/unknown_service%3AAspire3137?meter=Aspire3137&instrument=Demo

This is Microsoft Edge 124.0.2478.51, InPrivate window, 1920x1080 screen resolution (including the task bar, which is not part of the screen shot), 100% scaling, Windows 10 version 22H2. There aren't any scroll bars.

Click the filter button of tag5

The filter popup, with its scrollable list of tag values, extends below the bottom of the visible area of the web page. A scroll bar appears at the right edge of the Web browser, too.

Use the mouse to drag the scroll bar button of the filter popup

This is as low as it goes. The tag value "6" has only part of the check box visible. The tag values "7", "8", and "9" are entirely off the screen.

Use the mouse to drag the scroll bar button at the right edge of the page

It doesn't move! Instead, when you release the mouse button, the filter popup closes, and the scroll bar at the right edge of the page disappears. So you also cannot pre-scroll the page before the filter popup opens.

[danmoseley]

@KalleOlaviNiemitalo (Just picked this issue at random) -- I have a question to ask you. Are you comfortable sending me a mail at danmose@m....com ? LMK if you'd rather some other way.

[danmoseley]

@KalleOlaviNiemitalo (Just picked this issue at random) -- I have a question to ask you. Are you comfortable sending me a mail at danmose@m....com ? LMK if you'd rather some other way.

I will be out on leave shortly so it would be great @KalleOlaviNiemitalo if you could add joperezr@... to the mail as well.

[KalleOlaviNiemitalo]

@danmoseley, I sent email to you on July 13.