Rework searchbar functions, add user jobtable

web/frontend/src/Header.svelte

@@ -10,8 +10,9 @@
     let isOpen = false
 
     const userviews = [
-        { title: 'My Jobs',  href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
-        { title: 'Tags',     href: '/monitoring/tags/',            icon: 'tags' }
+        { title: 'My Jobs',     href: `/monitoring/user/${username}`, icon: 'bar-chart-line-fill' },
+        { title: `Job Search`,  href: '/monitoring/jobs/',            icon: 'card-list' },
+        { title: 'Tags',        href: '/monitoring/tags/',            icon: 'tags' }
     ]
 
     const managerviews = [
@@ -91,9 +92,9 @@
     <div class="d-flex">
         <form method="GET" action="/search">
             <InputGroup>
-                <Input type="text" placeholder={(authlevel >= 4) ? "Search jobId / username" : "Search jobId"} name="searchId"/>
+                <Input type="text" placeholder={"Search 'type:<query>' ..."} name="searchId"/>
                 <Button outline type="submit"><Icon name="search"/></Button>
-                <InputGroupText style="cursor:help;" title={(authlevel >= 4) ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | username" | "name" : "Example: 'jobName:myjob', Types are jobId | jobName"}><Icon name="info-circle"/></InputGroupText>
+                <InputGroupText style="cursor:help;" title={(authlevel >= 4) ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | username | name" : "Example: 'jobName:myjob', Types are jobId | jobName | projectId"}><Icon name="info-circle"/></InputGroupText>
             </InputGroup>
         </form>
         {#if username}

web/frontend/src/Jobs.root.svelte

@@ -14,6 +14,7 @@
     const ccconfig = getContext('cc-config')
 
     export let filterPresets = {}
+    export let authLevel
 
     let filters, jobList, matchedJobs = null
     let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false, isMetricsSelectionOpen = false
@@ -60,7 +61,7 @@
     </Col>
 
     <Col xs="3" style="margin-left: auto;">
-        <UserOrProject on:update={({ detail }) => filters.update(detail)}/>
+        <UserOrProject bind:authLevel={authLevel} on:update={({ detail }) => filters.update(detail)}/>
     </Col>
     <Col xs="2">
         <Refresher on:reload={() => jobList.update()} />

web/frontend/src/filters/UserOrProject.svelte

@@ -6,6 +6,7 @@
 
     export let user = ''
     export let project = ''
+    export let authLevel
     let mode = 'user', term = ''
     const throttle = 500
 
@@ -22,30 +23,53 @@
 
     let timeoutId = null
     function termChanged(sleep = throttle) {
-        if (mode == 'user')
-            user = term
-        else
+        if (authLevel == 2) {
             project = term
 
-        if (timeoutId != null)
-            clearTimeout(timeoutId)
+            if (timeoutId != null)
+                clearTimeout(timeoutId)
 
-        timeoutId = setTimeout(() => {
-            dispatch('update', {
-                user,
-                project
-            })
-        }, sleep)
+            timeoutId = setTimeout(() => {
+                dispatch('update', {
+                    project
+                })
+            }, sleep)
+        } else if (authLevel >= 3) {
+            if (mode == 'user')
+                user = term
+            else
+                project = term
+
+            if (timeoutId != null)
+                clearTimeout(timeoutId)
+
+            timeoutId = setTimeout(() => {
+                dispatch('update', {
+                    user,
+                    project
+                })
+            }, sleep)
+        }
     }
 </script>
 
-<InputGroup>
-    <select style="max-width: 175px;" class="form-select"
-        bind:value={mode} on:change={modeChanged}>
-        <option value={'user'}>Search User</option>
-        <option value={'project'}>Search Project</option>
-    </select>
-    <Input
-        type="text" bind:value={term} on:change={() => termChanged()} on:keyup={(event) => termChanged(event.key == 'Enter' ? 0 : throttle)}
-        placeholder={mode == 'user' ? 'filter username...' : 'filter project...'} />
-</InputGroup>
+{#if authLevel == 2}
+    <InputGroup>
+        <Input
+            type="text" bind:value={term} on:change={() => termChanged()} on:keyup={(event) => termChanged(event.key == 'Enter' ? 0 : throttle)} placeholder='filter project...'
+        />
+    </InputGroup>
+{:else if authLevel >= 3}
+    <InputGroup>
+        <select style="max-width: 175px;" class="form-select"
+            bind:value={mode} on:change={modeChanged}>
+            <option value={'user'}>Search User</option>
+            <option value={'project'}>Search Project</option>
+        </select>
+        <Input
+            type="text" bind:value={term} on:change={() => termChanged()} on:keyup={(event) => termChanged(event.key == 'Enter' ? 0 : throttle)}
+            placeholder={mode == 'user' ? 'filter username...' : 'filter project...'} />
+    </InputGroup>
+{:else}
+    Unauthorized
+{/if}

web/frontend/src/jobs.entrypoint.js

@@ -5,6 +5,7 @@ new Jobs({
     target: document.getElementById('svelte-app'),
     props: {
         filterPresets: filterPresets,
+        authLevel: authLevel
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig]

web/templates/monitoring/jobs.tmpl

@@ -10,6 +10,7 @@
     <script>
         const filterPresets = {{ .FilterPresets }};
         const clusterCockpitConfig = {{ .Config }};
+        const authLevel = {{ .User.AuthLevel }};
     </script>
     <script src='/build/jobs.js'></script>
 {{end}}