Add filter

Author: joheredi

packages/spec-dashboard/src/components/dashboard-table.tsx

@@ -148,7 +148,7 @@ function getCompletedRatio(
     }
   }
 
-  return coveredCount / filtered.length;
+  return filtered.length > 0 ? coveredCount / filtered.length : 0;
 }
 
 interface DashboardHeaderRowProps {

packages/spec-dashboard/src/components/dashboard.tsx

@@ -1,5 +1,5 @@
-import { Card, CardHeader, Text } from "@fluentui/react-components";
-import { FunctionComponent } from "react";
+import { Card, CardHeader, Dropdown, Option, Text } from "@fluentui/react-components";
+import { FunctionComponent, useState } from "react";
 import { CoverageSummary } from "../apis.js";
 import { DashboardTable } from "./dashboard-table.js";
 import { InfoEntry, InfoReport } from "./info-table.js";
@@ -9,20 +9,78 @@ export interface DashboardProps {
 }
 
 export const Dashboard: FunctionComponent<DashboardProps> = ({ coverageSummaries }) => {
-  const summaryTables = coverageSummaries.map((coverageSummary, i) => (
+  const [selectedTier, setSelectedTier] = useState<string | undefined>(undefined);
+
+  // Filter scenarios by tier if a tier is selected
+  const filteredCoverageSummaries = selectedTier
+    ? coverageSummaries.map((summary) => ({
+        ...summary,
+        manifest: {
+          ...summary.manifest,
+          scenarios: summary.manifest.scenarios.filter(
+            (scenario) => scenario.tier === selectedTier,
+          ),
+        },
+      }))
+    : coverageSummaries;
+
+  const summaryTables = filteredCoverageSummaries.map((coverageSummary, i) => (
     <div key={i} css={{ margin: 5 }}>
       <DashboardTable coverageSummary={coverageSummary} />
     </div>
   ));
 
-  const specsCardTable = coverageSummaries.map((coverageSummary, i) => (
+  const specsCardTable = filteredCoverageSummaries.map((coverageSummary, i) => (
     <div key={i} css={{ margin: 5, flex: 0 }}>
       <CadlRanchSpecsCard coverageSummary={coverageSummary} />
     </div>
   ));
 
+  // Get unique tiers from all scenarios across all coverage summaries
+  const allTiers = Array.from(
+    new Set(
+      coverageSummaries
+        .flatMap((summary) => summary.manifest.scenarios)
+        .map((scenario) => scenario.tier),
+    ),
+  ).sort();
+
   return (
     <div>
+      <div
+        css={{
+          display: "flex",
+          alignItems: "center",
+          marginBottom: 20,
+          padding: "10px 15px",
+          backgroundColor: "#f8f9fa",
+          borderRadius: "6px",
+          gap: 10,
+        }}
+      >
+        <Text weight="semibold">Filter by Tier:</Text>
+        <Dropdown
+          placeholder="All tiers"
+          value={selectedTier ? `${selectedTier}` : ""}
+          selectedOptions={selectedTier ? [selectedTier] : []}
+          onOptionSelect={(_, data) => {
+            setSelectedTier(data.optionValue === "all" ? undefined : data.optionValue);
+          }}
+          css={{ minWidth: 150 }}
+        >
+          <Option value="all">All tiers</Option>
+          {allTiers.map((tier) => (
+            <Option key={tier} value={tier}>
+              {tier}
+            </Option>
+          ))}
+        </Dropdown>
+        {selectedTier && (
+          <Text size={200} style={{ color: "#666", marginLeft: 10 }}>
+            Showing {selectedTier} tier scenarios only
+          </Text>
+        )}
+      </div>
       <div css={{ display: "flex" }}>{specsCardTable}</div>
       <div css={{ height: 30 }}></div>
       {summaryTables}