mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-09-08 17:53:00 +02:00
Upgrade frontend dependencies
Change to most recent @sveltestrap/sveltestrap Reformat with Svelte LSP
This commit is contained in:
@@ -1,178 +1,169 @@
|
||||
<script>
|
||||
import {
|
||||
Icon,
|
||||
Collapse,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
Nav,
|
||||
NavbarToggler,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
} from "sveltestrap";
|
||||
import NavbarLinks from "./NavbarLinks.svelte";
|
||||
import NavbarTools from "./NavbarTools.svelte";
|
||||
import {
|
||||
Icon,
|
||||
Collapse,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
Nav,
|
||||
NavbarToggler,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
import NavbarLinks from "./NavbarLinks.svelte";
|
||||
import NavbarTools from "./NavbarTools.svelte";
|
||||
|
||||
export let username; // empty string if auth. is disabled, otherwise the username as string
|
||||
export let authlevel; // Integer
|
||||
export let clusters; // array of names
|
||||
export let roles; // Role Enum-Like
|
||||
export let username; // empty string if auth. is disabled, otherwise the username as string
|
||||
export let authlevel; // Integer
|
||||
export let clusters; // array of names
|
||||
export let roles; // Role Enum-Like
|
||||
|
||||
let isOpen = false;
|
||||
let screenSize;
|
||||
let isOpen = false;
|
||||
let screenSize;
|
||||
|
||||
const jobsTitle = new Map();
|
||||
jobsTitle.set(2, "Job Search");
|
||||
jobsTitle.set(3, "Managed Jobs");
|
||||
jobsTitle.set(4, "Jobs");
|
||||
jobsTitle.set(5, "Jobs");
|
||||
const usersTitle = new Map();
|
||||
usersTitle.set(3, "Managed Users");
|
||||
usersTitle.set(4, "Users");
|
||||
usersTitle.set(5, "Users");
|
||||
const jobsTitle = new Map();
|
||||
jobsTitle.set(2, "Job Search");
|
||||
jobsTitle.set(3, "Managed Jobs");
|
||||
jobsTitle.set(4, "Jobs");
|
||||
jobsTitle.set(5, "Jobs");
|
||||
const usersTitle = new Map();
|
||||
usersTitle.set(3, "Managed Users");
|
||||
usersTitle.set(4, "Users");
|
||||
usersTitle.set(5, "Users");
|
||||
|
||||
const views = [
|
||||
{
|
||||
title: "My Jobs",
|
||||
requiredRole: roles.user,
|
||||
href: `/monitoring/user/${username}`,
|
||||
icon: "bar-chart-line-fill",
|
||||
perCluster: false,
|
||||
menu: "none",
|
||||
},
|
||||
{
|
||||
title: jobsTitle.get(authlevel),
|
||||
requiredRole: roles.user,
|
||||
href: `/monitoring/jobs/`,
|
||||
icon: "card-list",
|
||||
perCluster: false,
|
||||
menu: "none",
|
||||
},
|
||||
{
|
||||
title: usersTitle.get(authlevel),
|
||||
requiredRole: roles.manager,
|
||||
href: "/monitoring/users/",
|
||||
icon: "people-fill",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Projects",
|
||||
requiredRole: roles.support,
|
||||
href: "/monitoring/projects/",
|
||||
icon: "folder",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Tags",
|
||||
requiredRole: roles.user,
|
||||
href: "/monitoring/tags/",
|
||||
icon: "tags",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Analysis",
|
||||
requiredRole: roles.support,
|
||||
href: "/monitoring/analysis/",
|
||||
icon: "graph-up",
|
||||
perCluster: true,
|
||||
menu: "Stats",
|
||||
},
|
||||
{
|
||||
title: "Nodes",
|
||||
requiredRole: roles.admin,
|
||||
href: "/monitoring/systems/",
|
||||
icon: "cpu",
|
||||
perCluster: true,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
requiredRole: roles.admin,
|
||||
href: "/monitoring/status/",
|
||||
icon: "cpu",
|
||||
perCluster: true,
|
||||
menu: "Stats",
|
||||
},
|
||||
];
|
||||
const views = [
|
||||
{
|
||||
title: "My Jobs",
|
||||
requiredRole: roles.user,
|
||||
href: `/monitoring/user/${username}`,
|
||||
icon: "bar-chart-line-fill",
|
||||
perCluster: false,
|
||||
menu: "none",
|
||||
},
|
||||
{
|
||||
title: jobsTitle.get(authlevel),
|
||||
requiredRole: roles.user,
|
||||
href: `/monitoring/jobs/`,
|
||||
icon: "card-list",
|
||||
perCluster: false,
|
||||
menu: "none",
|
||||
},
|
||||
{
|
||||
title: usersTitle.get(authlevel),
|
||||
requiredRole: roles.manager,
|
||||
href: "/monitoring/users/",
|
||||
icon: "people-fill",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Projects",
|
||||
requiredRole: roles.support,
|
||||
href: "/monitoring/projects/",
|
||||
icon: "folder",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Tags",
|
||||
requiredRole: roles.user,
|
||||
href: "/monitoring/tags/",
|
||||
icon: "tags",
|
||||
perCluster: false,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Analysis",
|
||||
requiredRole: roles.support,
|
||||
href: "/monitoring/analysis/",
|
||||
icon: "graph-up",
|
||||
perCluster: true,
|
||||
menu: "Stats",
|
||||
},
|
||||
{
|
||||
title: "Nodes",
|
||||
requiredRole: roles.admin,
|
||||
href: "/monitoring/systems/",
|
||||
icon: "cpu",
|
||||
perCluster: true,
|
||||
menu: "Groups",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
requiredRole: roles.admin,
|
||||
href: "/monitoring/status/",
|
||||
icon: "cpu",
|
||||
perCluster: true,
|
||||
menu: "Stats",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={screenSize} />
|
||||
<Navbar color="light" light expand="md" fixed="top">
|
||||
<NavbarBrand href="/">
|
||||
<img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
|
||||
</NavbarBrand>
|
||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||
<Collapse
|
||||
style="justify-content: space-between"
|
||||
{isOpen}
|
||||
navbar
|
||||
expand="md"
|
||||
on:update={({ detail }) => (isOpen = detail.isOpen)}
|
||||
>
|
||||
<Nav navbar>
|
||||
{#if screenSize > 1500 || screenSize < 768}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) => item.requiredRole <= authlevel
|
||||
)}
|
||||
/>
|
||||
{:else if screenSize > 1300}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) =>
|
||||
item.requiredRole <= authlevel &&
|
||||
item.menu != "Stats"
|
||||
)}
|
||||
/>
|
||||
<Dropdown nav>
|
||||
<DropdownToggle nav caret>
|
||||
<Icon name="graph-up" />
|
||||
Stats
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-lg-end">
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) =>
|
||||
item.requiredRole <= authlevel &&
|
||||
item.menu == "Stats"
|
||||
)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{:else}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) =>
|
||||
item.requiredRole <= authlevel &&
|
||||
item.menu == "none"
|
||||
)}
|
||||
/>
|
||||
{#each Array("Groups", "Stats") as menu}
|
||||
<Dropdown nav>
|
||||
<DropdownToggle nav caret>
|
||||
{menu}
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-lg-end">
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) =>
|
||||
item.requiredRole <= authlevel &&
|
||||
item.menu == menu
|
||||
)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/each}
|
||||
{/if}
|
||||
</Nav>
|
||||
<NavbarTools {username} {authlevel} {roles} {screenSize} />
|
||||
</Collapse>
|
||||
<NavbarBrand href="/">
|
||||
<img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
|
||||
</NavbarBrand>
|
||||
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
||||
<Collapse
|
||||
style="justify-content: space-between"
|
||||
{isOpen}
|
||||
navbar
|
||||
expand="md"
|
||||
on:update={({ detail }) => (isOpen = detail.isOpen)}
|
||||
>
|
||||
<Nav navbar>
|
||||
{#if screenSize > 1500 || screenSize < 768}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter((item) => item.requiredRole <= authlevel)}
|
||||
/>
|
||||
{:else if screenSize > 1300}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) => item.requiredRole <= authlevel && item.menu != "Stats",
|
||||
)}
|
||||
/>
|
||||
<Dropdown nav>
|
||||
<DropdownToggle nav caret>
|
||||
<Icon name="graph-up" />
|
||||
Stats
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-lg-end">
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) =>
|
||||
item.requiredRole <= authlevel && item.menu == "Stats",
|
||||
)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{:else}
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) => item.requiredRole <= authlevel && item.menu == "none",
|
||||
)}
|
||||
/>
|
||||
{#each Array("Groups", "Stats") as menu}
|
||||
<Dropdown nav>
|
||||
<DropdownToggle nav caret>
|
||||
{menu}
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="dropdown-menu-lg-end">
|
||||
<NavbarLinks
|
||||
{clusters}
|
||||
links={views.filter(
|
||||
(item) => item.requiredRole <= authlevel && item.menu == menu,
|
||||
)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/each}
|
||||
{/if}
|
||||
</Nav>
|
||||
<NavbarTools {username} {authlevel} {roles} {screenSize} />
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
|
||||
Reference in New Issue
Block a user