fix(frontend): hide unconfigured navigation tabs

This commit is contained in:
rcourtman 2025-12-13 00:21:00 +00:00
parent 0ddc30c1e1
commit 0074e49792
2 changed files with 16 additions and 5 deletions

View file

@ -1055,7 +1055,7 @@ function AppLayout(props: {
});
const platformTabs = createMemo(() => {
return [
const allPlatforms = [
{
id: 'proxmox' as const,
label: 'Proxmox',
@ -1067,6 +1067,7 @@ function AppLayout(props: {
icon: (
<ProxmoxIcon class="w-4 h-4 shrink-0" />
),
alwaysShow: true, // Proxmox is the default, always show
},
{
id: 'docker' as const,
@ -1079,6 +1080,7 @@ function AppLayout(props: {
icon: (
<BoxesIcon class="w-4 h-4 shrink-0" />
),
alwaysShow: true, // Docker is commonly used, keep visible
},
{
id: 'kubernetes' as const,
@ -1086,11 +1088,12 @@ function AppLayout(props: {
route: '/kubernetes',
settingsRoute: '/settings/agents',
tooltip: 'Monitor Kubernetes clusters and workloads',
enabled: hasKubernetesClusters() || !!seenPlatforms()['kubernetes'],
enabled: hasKubernetesClusters(),
live: hasKubernetesClusters(),
icon: (
<NetworkIcon class="w-4 h-4 shrink-0" />
),
alwaysShow: false, // Only show when clusters exist
},
{
id: 'hosts' as const,
@ -1103,8 +1106,12 @@ function AppLayout(props: {
icon: (
<MonitorIcon class="w-4 h-4 shrink-0" />
),
alwaysShow: true, // Hosts is commonly used, keep visible
},
];
// Filter out platforms that should be hidden when not configured
return allPlatforms.filter(p => p.alwaysShow || p.enabled);
});
const utilityTabs = createMemo(() => {

View file

@ -51,14 +51,18 @@ export const ProxmoxSectionNav: Component<ProxmoxSectionNavProps> = (props) => {
const navigate = useNavigate();
const { state } = useWebSocket();
// Only show Mail Gateway tab if PMG instances are configured
// Only show Ceph tab if Ceph clusters are detected (from agent or Proxmox API)
// Only show tabs if the corresponding feature has data:
// - Mail Gateway: requires PMG instances
// - Ceph: requires Ceph clusters (from agent or Proxmox API)
// - Replication: requires replication jobs
const sections = createMemo(() => {
const hasPMG = state.pmg && state.pmg.length > 0;
const hasCeph = state.cephClusters && state.cephClusters.length > 0;
const hasReplication = state.replicationJobs && state.replicationJobs.length > 0;
return allSections.filter((section) =>
(section.id !== 'mail' || hasPMG) &&
(section.id !== 'ceph' || hasCeph)
(section.id !== 'ceph' || hasCeph) &&
(section.id !== 'replication' || hasReplication)
);
});