Import svelte web frontend

web/frontend/src/Header.svelte

@@ -0,0 +1,73 @@
+<script>
+    import { Icon, Button, InputGroup, Input, Collapse,
+             Navbar, NavbarBrand, Nav, NavItem, NavLink, NavbarToggler,
+             Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'sveltestrap'
+
+    export let username // empty string if auth. is disabled, otherwise the username as string
+    export let isAdmin  // boolean
+    export let clusters // array of names
+
+    let isOpen = false
+
+    const views = [
+        isAdmin
+            ? { title: 'Jobs',     adminOnly: false, href: '/monitoring/jobs/',            icon: 'card-list' }
+            : { title: 'My Jobs',  adminOnly: false, href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
+        { title: 'Users',    adminOnly: true,  href: '/monitoring/users/',           icon: 'people-fill' },
+        { title: 'Projects', adminOnly: true,  href: '/monitoring/projects/',        icon: 'folder' },
+        { title: 'Tags',     adminOnly: false, href: '/monitoring/tags/',            icon: 'tags' }
+    ]
+    const viewsPerCluster = [
+        { title: 'Analysis', adminOnly: true,  href: '/monitoring/analysis/', icon: 'graph-up' },
+        { title: 'Systems',  adminOnly: true,  href: '/monitoring/systems/',  icon: 'cpu' },
+        { title: 'Status',   adminOnly: true,  href: '/monitoring/status/',   icon: 'cpu' },
+    ]
+</script>
+
+<Navbar color="light" light expand="lg" fixed="top">
+    <NavbarBrand href="/">
+        <img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem">
+    </NavbarBrand>
+    <NavbarToggler on:click={() => (isOpen = !isOpen)} />
+    <Collapse {isOpen} navbar expand="lg" on:update={({ detail }) => (isOpen = detail.isOpen)}>
+        <Nav pills>
+            {#each views.filter(item => isAdmin || !item.adminOnly) as item}
+                <NavLink href={item.href} active={window.location.pathname == item.href}><Icon name={item.icon}/> {item.title}</NavLink>
+            {/each}
+            {#each viewsPerCluster.filter(item => !item.adminOnly || isAdmin) as item}
+                <NavItem>
+                    <Dropdown nav inNavbar>
+                        <DropdownToggle nav caret>
+                            <Icon name={item.icon}/> {item.title}
+                        </DropdownToggle>
+                        <DropdownMenu>
+                            {#each clusters as cluster}
+                                <DropdownItem href={item.href + cluster} active={window.location.pathname == item.href + cluster}>
+                                    {cluster}
+                                </DropdownItem>
+                            {/each}
+                        </DropdownMenu>
+                    </Dropdown>
+                </NavItem>
+            {/each}
+        </Nav>
+    </Collapse>
+    <div class="d-flex">
+        <form method="GET" action="/search">
+            <InputGroup>
+                <Input type="text" placeholder={isAdmin ? "Search jobId / username" : "Search jobId"} name="searchId"/>
+                <Button outline type="submit"><Icon name="search"/></Button>
+            </InputGroup>
+        </form>
+        {#if username}
+            <form method="POST" action="/logout">
+                <Button outline color="success" type="submit" style="margin-left: 10px;">
+                    <Icon name="box-arrow-right"/> Logout {username}
+                </Button>
+            </form>
+        {/if}
+        <Button outline on:click={() => window.location.href = '/config'} style="margin-left: 10px;">
+            <Icon name="gear"/>
+        </Button>
+    </div>
+</Navbar>