Show https endpoints more consistently (#3266)

dotnet · Mar 29, 2024 · 1171971 · 1171971
1 parent 1565f57
commit 1171971
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 55 deletions.
diff --git a/src/Aspire.Dashboard/Components/Pages/Resources.razor b/src/Aspire.Dashboard/Components/Pages/Resources.razor
@@ -53,7 +53,7 @@
                         ViewKey="ResourcesList">
         <Summary>
             @{
-                var gridTemplateColumns = HasResourcesWithCommands ? "1fr 2fr 1.25fr 1.5fr 2.5fr 2fr 1fr 1fr 1fr" : "1fr 2fr 1.25fr 1.5fr 2.5fr 2fr 1fr 1fr";
+                var gridTemplateColumns = HasResourcesWithCommands ? "1fr 1.5fr 1.25fr 1.5fr 2.5fr 2.5fr 1fr 1fr 1fr" : "1fr 1.5fr 1.25fr 1.5fr 2.5fr 2.5fr 1fr 1fr";
             }
             <FluentDataGrid Virtualize="true" GenerateHeader="GenerateHeaderOption.Sticky" ItemSize="46" Items="@FilteredResources" ResizableColumns="true" GridTemplateColumns="@gridTemplateColumns" RowClass="GetRowClass" Loading="_isLoading">
                 <ChildContent>

diff --git a/src/Aspire.Dashboard/Components/ResourcesGridColumns/EndpointsColumnDisplay.razor b/src/Aspire.Dashboard/Components/ResourcesGridColumns/EndpointsColumnDisplay.razor
@@ -18,63 +18,81 @@
     }
 }
 
-<FluentOverflow Class="endpoint-overflow">
-    <ChildContent>
-        @for (var i = 0; i < displayedEndpoints.Count; i++)
-        {
-            var displayedEndpoint = displayedEndpoints[i];
-            var isLast = i == displayedEndpoints.Count - 1;
+@if (displayedEndpoints.Count == 1)
+{
+    var displayedEndpoint = displayedEndpoints[0];
+    if (displayedEndpoint.Url != null)
+    {
+        <a href="@displayedEndpoint.Url" target="_blank">@displayedEndpoint.Text</a>
+    }
+    else
+    {
+        @displayedEndpoint.Text
+    }
+}
+else
+{
+    // Make sure that endpoints have a consistent ordering. Show https first, then everything else.
+    displayedEndpoints = displayedEndpoints.OrderByDescending(e => e.Url?.StartsWith("https") == true).ThenBy(e=> e.Url ?? e.Text).ToList();
+
+    <FluentOverflow Class="endpoint-overflow">
+        <ChildContent>
+            @for (var i = 0; i < displayedEndpoints.Count; i++)
+            {
+                var displayedEndpoint = displayedEndpoints[i];
+                var isLast = i == displayedEndpoints.Count - 1;
 
-            <FluentOverflowItem Data="displayedEndpoint">
-                @if (displayedEndpoint.Url != null)
-                {
-                    <a href="@displayedEndpoint.Url" target="_blank">@displayedEndpoint.Text</a>
-                }
-                else
-                {
-                    @displayedEndpoint.Text
-                }
-                @if (!isLast)
-                {
-                    <span>,</span>
-                }
-            </FluentOverflowItem>
-        }
-    </ChildContent>
-    <MoreButtonTemplate Context="overflow">
-        <FluentButton Appearance="Appearance.Accent" OnClick="() => _popoverVisible = !_popoverVisible" Class="endpoint-button">
-            @($"+{overflow.ItemsOverflow.Count()}")
-        </FluentButton>
-    </MoreButtonTemplate>
-    <OverflowTemplate Context="overflow">
-        @{
-            var items = overflow.ItemsOverflow.ToList();
-        }
-        <FluentPopover AnchorId="@overflow.IdMoreButton" @bind-Open="_popoverVisible" VerticalThreshold="200">
-            <Header>
-                Endpoints
-            </Header>
-            <Body>
-                <div style="max-height:400px; overflow-x:hidden; overflow-y: auto; padding:5px 10px;">
-                    @foreach (var item in items)
+                <FluentOverflowItem Data="displayedEndpoint">
+                    @if (displayedEndpoint.Url != null)
+                    {
+                        <a href="@displayedEndpoint.Url" target="_blank">@displayedEndpoint.Text</a>
+                    }
+                    else
                     {
-                        var d = (DisplayedEndpoint)item.Data!;
-                        <div style="margin-bottom: 4px;">
-                            @if (d.Url != null)
-                            {
-                                <a href="@d.Url" target="_blank">@d.Text</a>
-                            }
-                            else
-                            {
-                                @d.Text
-                            }
-                        </div>
+                        @displayedEndpoint.Text
                     }
-                </div>
-            </Body>
-        </FluentPopover>
-    </OverflowTemplate>
-</FluentOverflow>
+                    @if (!isLast)
+                    {
+                        <span>,</span>
+                    }
+                </FluentOverflowItem>
+            }
+        </ChildContent>
+        <MoreButtonTemplate Context="overflow">
+            <FluentButton Appearance="Appearance.Accent" OnClick="() => _popoverVisible = !_popoverVisible" Class="endpoint-button">
+                @($"+{overflow.ItemsOverflow.Count()}")
+            </FluentButton>
+        </MoreButtonTemplate>
+        <OverflowTemplate Context="overflow">
+            @{
+                var items = overflow.ItemsOverflow.ToList();
+            }
+            <FluentPopover AnchorId="@overflow.IdMoreButton" @bind-Open="_popoverVisible" VerticalThreshold="200">
+                <Header>
+                    Endpoints
+                </Header>
+                <Body>
+                    <div style="max-height:400px; overflow-x:hidden; overflow-y: auto; padding:5px 10px;">
+                        @foreach (var item in items)
+                        {
+                            var d = (DisplayedEndpoint)item.Data!;
+                            <div style="margin-bottom: 4px;">
+                                @if (d.Url != null)
+                                {
+                                    <a href="@d.Url" target="_blank">@d.Text</a>
+                                }
+                                else
+                                {
+                                    @d.Text
+                                }
+                            </div>
+                        }
+                    </div>
+                </Body>
+            </FluentPopover>
+        </OverflowTemplate>
+    </FluentOverflow>
+}
 
 @if (!string.IsNullOrEmpty(additionalMessage))
 {