mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-04-03 18:55:55 +02:00
81 lines
2.2 KiB
Svelte
81 lines
2.2 KiB
Svelte
<!--
|
|
@component Navbar component; renders in app navigation links as received from upstream
|
|
|
|
Properties:
|
|
- `clusters [String]`: List of cluster names
|
|
- `links [Object]`: Pre-filtered link objects based on user auth
|
|
-->
|
|
|
|
<script>
|
|
import {
|
|
Icon,
|
|
NavLink,
|
|
Dropdown,
|
|
DropdownToggle,
|
|
DropdownMenu,
|
|
DropdownItem,
|
|
} from "@sveltestrap/sveltestrap";
|
|
|
|
export let clusters;
|
|
export let links;
|
|
</script>
|
|
|
|
{#each links as item}
|
|
{#if item.listOptions}
|
|
<Dropdown nav inNavbar>
|
|
<DropdownToggle nav caret>
|
|
<Icon name={item.icon} />
|
|
{item.title}
|
|
</DropdownToggle>
|
|
<DropdownMenu class="dropdown-menu-lg-end">
|
|
<DropdownItem
|
|
href={item.href}
|
|
>
|
|
All Clusters
|
|
</DropdownItem>
|
|
<DropdownItem divider />
|
|
{#each clusters as cluster}
|
|
<Dropdown nav direction="right">
|
|
<DropdownToggle nav caret class="dropdown-item py-1 px-2">
|
|
{cluster.name}
|
|
</DropdownToggle>
|
|
<DropdownMenu>
|
|
<DropdownItem class="py-1 px-2"
|
|
href={item.href + '?cluster=' + cluster.name}
|
|
>
|
|
All Jobs
|
|
</DropdownItem>
|
|
<DropdownItem class="py-1 px-2"
|
|
href={item.href + '?cluster=' + cluster.name + '&state=running'}
|
|
>
|
|
Running Jobs
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
{/each}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
{:else if !item.perCluster}
|
|
<NavLink href={item.href} active={window.location.pathname == item.href}
|
|
><Icon name={item.icon} /> {item.title}</NavLink
|
|
>
|
|
{:else}
|
|
<Dropdown nav inNavbar>
|
|
<DropdownToggle nav caret>
|
|
<Icon name={item.icon} />
|
|
{item.title}
|
|
</DropdownToggle>
|
|
<DropdownMenu class="dropdown-menu-lg-end">
|
|
{#each clusters as cluster}
|
|
<DropdownItem
|
|
href={item.href + cluster.name}
|
|
active={window.location.pathname == item.href + cluster.name}
|
|
>
|
|
{cluster.name}
|
|
</DropdownItem>
|
|
{/each}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
{/if}
|
|
{/each}
|