Allow filtering by resource state and health status, and update the filters based on visible grid items

src/Aspire.Dashboard/Components/Controls/ResourceFilters.razor

@@ -0,0 +1,45 @@
+@using System.Collections.Concurrent
+
+@inject IStringLocalizer<Dashboard.Resources.Resources> Loc
+
+<FluentStack Orientation="Orientation.Vertical" VerticalGap="15">
+    <div>
+        <h5>@Loc[nameof(Resources.Resources.ResourcesResourceTypesHeader)]</h5>
+        <SelectResourceOptions
+            Values="ResourceTypes"
+            OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
+            OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync"/>
+    </div>
+    <div>
+        <h5>@Loc[nameof(Resources.Resources.ResourcesResourceStatesHeader)]</h5>
+        <SelectResourceOptions
+            Values="ResourceStates"
+            OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
+            OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync"/>
+    </div>
+    <div>
+        <h5>@Loc[nameof(Resources.Resources.ResourcesDetailsHealthStateProperty)]</h5>
+        <SelectResourceOptions
+            Values="ResourceHealthStates"
+            OnAllValuesCheckedChangedAsync="OnAllFilterVisibilityCheckedChangedAsync"
+            OnValueVisibilityChangedAsync="OnResourceFilterVisibilityChangedAsync"/>
+    </div>
+</FluentStack>
+
+@code {
+
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<string, bool> ResourceTypes { get; set; }
+
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<string, bool> ResourceStates { get; set; }
+
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<string, bool> ResourceHealthStates { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<Task> OnAllFilterVisibilityCheckedChangedAsync { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<string, bool, Task> OnResourceFilterVisibilityChangedAsync { get; set; }
+}

src/Aspire.Dashboard/Components/Controls/SelectResourceOptions.razor

@@ -0,0 +1,39 @@
+@namespace Aspire.Dashboard.Components
+
+@using System.Collections.Concurrent
+@using Aspire.Dashboard.Resources
+
+@inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
+@inject IStringLocalizer<Resources> Loc
+
+@typeparam TValue where TValue : notnull
+
+<FluentStack Orientation="Orientation.Vertical">
+    <FluentCheckbox Label="@ControlsStringsLoc[nameof(ControlsStrings.LabelAll)]"
+                    ThreeState="true"
+                    ShowIndeterminate="false"
+                    ThreeStateOrderUncheckToIntermediate="true"
+                    @bind-CheckState:get="@GetCheckState(Values)"
+                    @bind-CheckState:set="@OnAllValuesCheckedChangedInternalAsync"
+    />
+
+    @foreach (var (key, isChecked) in Values.OrderBy(pair => pair.Key.ToString(), StringComparer.OrdinalIgnoreCase))
+    {
+        var label = string.IsNullOrEmpty(key.ToString()) ? Loc[nameof(Resources.ResourceFilterOptionEmpty)] : key.ToString();
+
+        <FluentCheckbox Label="@label"
+                        @bind-Value:get="@isChecked"
+                        @bind-Value:set="@(c => OnValueVisibilityChangedInternalAsync(key, c))" />
+    }
+</FluentStack>
+
+@code {
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<TValue, bool> Values { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<Task> OnAllValuesCheckedChangedAsync { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<TValue, bool, Task> OnValueVisibilityChangedAsync { get; set; }
+}

src/Aspire.Dashboard/Components/Controls/SelectResourceOptions.razor.cs

@@ -0,0 +1,69 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.Collections.Concurrent;
+
+namespace Aspire.Dashboard.Components;
+
+public partial class SelectResourceOptions<TValue>
+{
+    private async Task OnAllValuesCheckedChangedInternalAsync(bool? newAreAllVisible)
+    {
+        SetCheckState(newAreAllVisible, Values);
+        await OnAllValuesCheckedChangedAsync();
+    }
+
+    private Task OnValueVisibilityChangedInternalAsync(TValue value, bool isVisible)
+    {
+        Values[value] = isVisible;
+        return OnValueVisibilityChangedAsync(value, isVisible);
+    }
+
+    private static void SetCheckState(bool? newAreAllVisible, ConcurrentDictionary<TValue, bool> values)
+    {
+        if (newAreAllVisible is null)
+        {
+            return;
+        }
+
+        foreach (var key in values.Keys)
+        {
+            values[key] = newAreAllVisible.Value;
+        }
+    }
+
+    private static bool? GetCheckState(ConcurrentDictionary<TValue, bool> values)
+    {
+        if (values.IsEmpty)
+        {
+            return true;
+        }
+
+        var areAllChecked = true;
+        var areAllUnchecked = true;
+
+        foreach (var value in values.Values)
+        {
+            if (value)
+            {
+                areAllUnchecked = false;
+            }
+            else
+            {
+                areAllChecked = false;
+            }
+        }
+
+        if (areAllChecked)
+        {
+            return true;
+        }
+
+        if (areAllUnchecked)
+        {
+            return false;
+        }
+
+        return null;
+    }
+}

src/Aspire.Dashboard/Components/Pages/Resources.razor

@@ -5,7 +5,6 @@
 @using System.Globalization
 @using Aspire.Dashboard.Components.Controls.Grid
 @using Aspire.Dashboard.Model
-@using Humanizer
 @inject IStringLocalizer<Dashboard.Resources.Resources> Loc
 @inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
 @inject IStringLocalizer<Columns> ColumnsLoc
@@ -33,36 +32,39 @@
             <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
             @if (ViewportInformation.IsDesktop)
             {
-                <FluentButton id="typeFilterButton" slot="end"
-                              Appearance="@(AreAllTypesVisible is true ? Appearance.Stealth : Appearance.Accent)"
+                <FluentButton id="resourceFilterButton" slot="end"
+                              Appearance="@(NoFiltersSet ? Appearance.Stealth : Appearance.Accent)"
                               IconEnd="@(new Icons.Regular.Size20.Filter())"
-                              @onclick="() => _isTypeFilterVisible = !_isTypeFilterVisible"
-                              Title="@(AreAllTypesVisible is true ? Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFilterAllVisible)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFiltered)])"
-                              aria-label="@(AreAllTypesVisible is true ? Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFilterAllVisible)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFiltered)])" />
+                              @onclick="() => _isFilterPopupVisible = !_isFilterPopupVisible"
+                              Title="@(NoFiltersSet ? Loc[nameof(Dashboard.Resources.Resources.ResourcesNotFiltered)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesFiltered)])"
+                              aria-label="@(NoFiltersSet ? Loc[nameof(Dashboard.Resources.Resources.ResourcesNotFiltered)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesFiltered)])" />
             }
             else
             {
                 <div>
-                    <h5>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</h5>
-
-                    <SelectResourceTypes AllResourceTypes="_allResourceTypes"
-                                         VisibleResourceTypes="_visibleResourceTypes"
-                                         OnAllResourceTypesCheckedChangedAsync="@OnAllResourceTypesCheckedChangedAsync"
-                                         AreAllTypesVisible="@(() => AreAllTypesVisible)"
-                                         OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
+                    <ResourceFilters
+                        ResourceStates="@_resourceStatesToVisibility"
+                        ResourceTypes="@_resourceTypesToVisibility"
+                        ResourceHealthStates="@_resourceHealthStatusesToVisibility"
+                        OnAllFilterVisibilityCheckedChangedAsync="@OnAllFilterVisibilityCheckedChangedAsync"
+                        OnResourceFilterVisibilityChangedAsync="@OnResourceFilterVisibilityChangedAsync" />
                 </div>
             }
         </ToolbarSection>
 
         <MainSection>
-            <FluentPopover AnchorId="typeFilterButton" @bind-Open="_isTypeFilterVisible" AutoFocus="true" FixedPlacement="true">
-                <Header>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</Header>
+            <FluentPopover AnchorId="resourceFilterButton"
+                           @bind-Open="_isFilterPopupVisible"
+                           AutoFocus="true"
+                           FixedPlacement="true"
+                           Class="resources-filter-popup">
                 <Body>
-                    <SelectResourceTypes AllResourceTypes="_allResourceTypes"
-                                         VisibleResourceTypes="_visibleResourceTypes"
-                                         OnAllResourceTypesCheckedChangedAsync="@OnAllResourceTypesCheckedChangedAsync"
-                                         AreAllTypesVisible="@(() => AreAllTypesVisible)"
-                                         OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
+                <ResourceFilters
+                        ResourceStates="@_resourceStatesToVisibility"
+                        ResourceTypes="@_resourceTypesToVisibility"
+                        ResourceHealthStates="@_resourceHealthStatusesToVisibility"
+                        OnAllFilterVisibilityCheckedChangedAsync="@OnAllFilterVisibilityCheckedChangedAsync"
+                        OnResourceFilterVisibilityChangedAsync="@OnResourceFilterVisibilityChangedAsync" />
                 </Body>
             </FluentPopover>