Fixed Filtering with the OS Distribution Dashboard card

This commit is contained in:
Muhammad Ibrahim
2025-10-07 21:01:44 +01:00
parent 7819d4512e
commit 2a1eed1354
2 changed files with 24 additions and 39 deletions

View File

@@ -651,17 +651,7 @@ const Dashboard = () => {
case "osDistribution":
return (
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOSDistributionClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOSDistributionClick();
}
}}
>
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
@@ -670,22 +660,12 @@ const Dashboard = () => {
<Pie data={osChartData} options={chartOptions} />
</div>
</div>
</button>
</div>
);
case "osDistributionDoughnut":
return (
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOSDistributionClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOSDistributionClick();
}
}}
>
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
@@ -694,29 +674,19 @@ const Dashboard = () => {
<Doughnut data={osChartData} options={doughnutChartOptions} />
</div>
</div>
</button>
</div>
);
case "osDistributionBar":
return (
<button
type="button"
className="card p-6 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200 w-full text-left"
onClick={handleOSDistributionClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleOSDistributionClick();
}
}}
>
<div className="card p-6 w-full">
<h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
OS Distribution
</h3>
<div className="h-64">
<Bar data={osBarChartData} options={barChartOptions} />
</div>
</button>
</div>
);
case "updateStatus":
@@ -1100,6 +1070,7 @@ const Dashboard = () => {
},
},
},
onClick: handleOSChartClick,
};
const osChartData = {

View File

@@ -657,6 +657,18 @@ const Hosts = () => {
hideStale,
]);
// Get unique OS types from hosts for dynamic dropdown
const uniqueOsTypes = useMemo(() => {
if (!hosts) return [];
const osTypes = new Set();
hosts.forEach((host) => {
if (host.os_type) {
osTypes.add(host.os_type);
}
});
return Array.from(osTypes).sort();
}, [hosts]);
// Group hosts by selected field
const groupedHosts = useMemo(() => {
if (groupBy === "none") {
@@ -1268,9 +1280,11 @@ const Hosts = () => {
className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
>
<option value="all">All OS</option>
<option value="linux">Linux</option>
<option value="windows">Windows</option>
<option value="macos">macOS</option>
{uniqueOsTypes.map((osType) => (
<option key={osType} value={osType.toLowerCase()}>
{osType}
</option>
))}
</select>
</div>
<div className="flex items-end">