improve job list toolbar layouting, smaller layout fixes

web/frontend/src/Analysis.root.svelte

@@ -307,7 +307,7 @@
       <Spinner />
     </Col>
   {/if}
-  <Col xs="auto">
+  <Col xs="auto" class="mb-2 mb-lg-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
     {:else if cluster}

web/frontend/src/Jobs.root.svelte

@@ -13,6 +13,7 @@
     Row,
     Col,
     Button,
+    ButtonGroup,
     Icon,
     Card,
     Spinner,
@@ -55,19 +56,25 @@
   onMount(() => filterComponent.updateFilters());
 </script>
 
-<Row>
+<!-- ROW1: Status-->
-  {#if $initq.fetching}
+{#if $initq.fetching}
-    <Col xs="auto">
+  <Row class="mb-3">
+    <Col>
       <Spinner />
     </Col>
-  {:else if $initq.error}
+  </Row>
-    <Col xs="auto">
+{:else if $initq.error}
+  <Row class="mb-3">
+    <Col>
       <Card body color="danger">{$initq.error.message}</Card>
     </Col>
-  {/if}
+  </Row>
-</Row>
+{/if}
-<Row>
+
-  <Col xs="auto">
+<!-- ROW2: Tools-->
+<Row cols={{ xs: 1, md: 2, lg: 4}} class="mb-3">
+  <Col lg="2" class="mb-2 mb-lg-0">
+    <ButtonGroup class="w-100">
       <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
         <Icon name="sort-up" /> Sorting
       </Button>
@@ -78,13 +85,12 @@
       >
         <Icon name="graph-up" /> Metrics
       </Button>
-    <Button disabled outline
+    </ButtonGroup>
-      >{matchedJobs == null ? "Loading..." : `${matchedJobs} jobs`}</Button
-    >
   </Col>
-  <Col xs="auto">
+  <Col lg="4" xl="{(presetProject !== '') ? 5 : 6}" class="mb-1 mb-lg-0">
     <Filters
       {filterPresets}
+      {matchedJobs}
       bind:this={filterComponent}
       on:update-filters={({ detail }) => {
         selectedCluster = detail.filters[0]?.cluster
@@ -94,8 +100,7 @@
       }}
     />
   </Col>
-
+  <Col lg="3" xl="{(presetProject !== '') ? 3 : 2}" class="mb-2 mb-lg-0">
-  <Col xs="3" style="margin-left: auto;">
     <TextFilter
       {presetProject}
       bind:authlevel
@@ -103,21 +108,22 @@
       on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
     />
   </Col>
-  <Col xs="2">
+  <Col lg="3" xl="2" class="mb-1 mb-lg-0">
     <Refresher on:refresh={() => {
       jobList.refreshJobs()
       jobList.refreshAllMetrics()
     }} />
   </Col>
 </Row>
-<br />
+
+<!-- ROW3: Job List-->
 <Row>
   <Col>
     <JobList
+      bind:this={jobList}
       bind:metrics
       bind:sorting
       bind:matchedJobs
-      bind:this={jobList}
       bind:showFootprint
     />
   </Col>

web/frontend/src/List.root.svelte

@@ -104,8 +104,8 @@
   onMount(() => filterComponent.updateFilters());
 </script>
 
-<Row>
+<Row cols={{ xs: 1, md: 2}}>
-  <Col xs="auto">
+  <Col xs="12" md="5" lg="4" xl="3" class="mb-2 mb-md-0">
     <InputGroup>
       <Button disabled outline>
         Search {type.toLowerCase()}s
@@ -119,7 +119,7 @@
       />
     </InputGroup>
   </Col>
-  <Col xs="auto">
+  <Col xs="12" md="7" lg="8" xl="9">
     <Filters
       bind:this={filterComponent}
       {filterPresets}
@@ -135,10 +135,11 @@
   <thead>
     <tr>
       <th scope="col">
-        {{
+        {#if type === 'USER'}
-          USER: "Username",
+          Username
-          PROJECT: "Project Name",
+        {:else if type === 'PROJECT'}
-        }[type]}
+          Project Name
+        {/if}
         <Button
           color={sorting.field == "id" ? "primary" : "light"}
           size="sm"

web/frontend/src/User.root.svelte

@@ -13,6 +13,7 @@
     Row,
     Col,
     Button,
+    ButtonGroup,
     Icon,
     Card,
     Spinner,
@@ -48,6 +49,7 @@
   let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
   let jobList;
   let jobFilters = [];
+  let matchedJobs = 0;
   let sorting = { field: "startTime", type: "col", order: "DESC" },
     isSortingOpen = false;
   let metrics = ccconfig.plot_list_selectedMetrics,
@@ -103,22 +105,28 @@
   onMount(() => filterComponent.updateFilters());
 </script>
 
-<Row>
+<!-- ROW1: Status-->
-  {#if $initq.fetching}
+{#if $initq.fetching}
+  <Row>
     <Col>
       <Spinner />
     </Col>
-  {:else if $initq.error}
+  </Row>
-    <Col xs="auto">
+{:else if $initq.error}
+  <Row>
+    <Col>
       <Card body color="danger">{$initq.error.message}</Card>
     </Col>
-  {/if}
+  </Row>
+{/if}
 
-  <Col xs="auto">
+<!-- ROW2: Tools-->
+<Row cols={{ xs: 1, md: 2, lg: 4}} class="mb-3">
+  <Col lg="2" class="mb-2 mb-lg-0">
+    <ButtonGroup class="w-100">
       <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
         <Icon name="sort-up" /> Sorting
       </Button>
-
       <Button
         outline
         color="primary"
@@ -126,18 +134,12 @@
       >
         <Icon name="graph-up" /> Metrics
       </Button>
-
+    </ButtonGroup>
-    <Button
-      outline
-      color="secondary"
-      on:click={() => (isHistogramSelectionOpen = true)}
-    >
-      <Icon name="bar-chart-line" /> Select Histograms
-    </Button>
   </Col>
-  <Col xs="auto">
+  <Col lg="4" xl="6" class="mb-1 mb-lg-0">
     <Filters
       {filterPresets}
+      {matchedJobs}
       startTimeQuickSelect={true}
       bind:this={filterComponent}
       on:update-filters={({ detail }) => {
@@ -149,20 +151,21 @@
       }}
     />
   </Col>
-  <Col xs="auto" style="margin-left: auto;">
+  <Col lg="3" xl="2" class="mb-2 mb-lg-0">
     <TextFilter
       on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
     />
   </Col>
-  <Col xs="auto">
+  <Col lg="3" xl="2" class="mb-1 mb-lg-0">
     <Refresher on:refresh={() => {
       jobList.refreshJobs()
       jobList.refreshAllMetrics()
     }} />
   </Col>
 </Row>
-<br />
+
-<Row cols={{ xs: 1, md: 3}}>
+<!-- ROW3: Base Information-->
+<Row cols={{ xs: 1, md: 3}} class="mb-2">
   {#if $stats.error}
     <Col>
       <Card body color="danger">{$stats.error.message}</Card>
@@ -210,12 +213,12 @@
         </tbody>
       </Table>
     </Col>
-    <Col class="text-center">
+    <Col class="px-1">
       <div bind:clientWidth={w1}>
         {#key $stats.data.jobsStatistics[0].histDuration}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-            width={w1 - 25}
+            width={w1}
             height={histogramHeight}
             title="Duration Distribution"
             xlabel="Current Runtimes"
@@ -226,12 +229,12 @@
         {/key}
       </div>
     </Col>
-    <Col class="text-center">
+    <Col class="px-1">
       <div bind:clientWidth={w2}>
         {#key $stats.data.jobsStatistics[0].histNumNodes}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
-            width={w2 - 25}
+            width={w2}
             height={histogramHeight}
             title="Number of Nodes Distribution"
             xlabel="Allocated Nodes"
@@ -245,7 +248,19 @@
   {/if}
 </Row>
 
-{#if metricsInHistograms}
+<!-- ROW4+5: Selectable Histograms -->
+<Row cols={{ xs: 1, md: 5}}>
+  <Col>
+    <Button
+      outline
+      color="secondary"
+      on:click={() => (isHistogramSelectionOpen = true)}
+    >
+      <Icon name="bar-chart-line" /> Select Histograms
+    </Button>
+  </Col>
+</Row>
+{#if metricsInHistograms?.length > 0}
   {#if $stats.error}
     <Row>
       <Col>
@@ -259,6 +274,7 @@
       </Col>
     </Row>
   {:else}
+    <hr class="my-2"/>
     {#key $stats.data.jobsStatistics[0].histMetrics}
       <PlotGrid
         let:item
@@ -281,11 +297,24 @@
       </PlotGrid>
     {/key}
   {/if}
-{/if}
+{:else}
-<br />
+  <Row class="mt-2">
-<Row>
     <Col>
-    <JobList bind:metrics bind:sorting bind:this={jobList} bind:showFootprint />
+      <Card body>No footprint histograms selected.</Card>
+    </Col>
+  </Row>
+{/if}
+
+<!-- ROW6: JOB LIST-->
+<Row class="mt-3">
+  <Col>
+    <JobList
+      bind:this={jobList} 
+      bind:matchedJobs
+      bind:metrics
+      bind:sorting
+      bind:showFootprint
+    />
   </Col>
 </Row>
 

web/frontend/src/generic/Filters.svelte

@@ -6,6 +6,7 @@
     - `filterPresets Object?`: Optional predefined filter values [Default: {}]
     - `disableClusterSelection Bool?`: Is the selection disabled [Default: false]
     - `startTimeQuickSelect Bool?`: Render startTime quick selections [Default: false]
+    - `matchedJobs Number?`: Number of jobs matching the filter [Default: -2]
 
     Events:
     - `update-filters, {filters: [Object]?}`: The detail's 'filters' prop are new filter items to be applied
@@ -17,11 +18,11 @@
 <script>
   import { createEventDispatcher } from "svelte";
   import {
-    Row,
-    Col,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
+    Button,
+    ButtonGroup,
     ButtonDropdown,
     Icon,
   } from "@sveltestrap/sveltestrap";
@@ -42,6 +43,7 @@
   export let filterPresets = {};
   export let disableClusterSelection = false;
   export let startTimeQuickSelect = false;
+  export let matchedJobs = -2;
 
   let filters = {
     projectMatch: filterPresets.projectMatch || "contains",
@@ -217,9 +219,9 @@
   }
 </script>
 
-<Row>
+<!-- Dropdown-Button -->
-  <Col xs="auto">
+<ButtonGroup>
-    <ButtonDropdown class="cc-dropdown-on-hover">
+  <ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
     <DropdownToggle outline caret color="success">
       <Icon name="sliders" />
       Filters
@@ -256,7 +258,7 @@
       </DropdownItem>
       {#if startTimeQuickSelect}
         <DropdownItem divider />
-          <DropdownItem disabled>Start Time Qick Selection</DropdownItem>
+        <DropdownItem disabled>Start Time Quick Selection</DropdownItem>
         {#each [{ text: "Last 6hrs", url: "last6h", seconds: 6 * 60 * 60 }, { text: "Last 24hrs", url: "last24h", seconds: 24 * 60 * 60 }, { text: "Last 7 days", url: "last7d", seconds: 7 * 24 * 60 * 60 }, { text: "Last 30 days", url: "last30d", seconds: 30 * 24 * 60 * 60 }] as { text, url, seconds }}
           <DropdownItem
             on:click={() => {
@@ -275,24 +277,30 @@
       {/if}
     </DropdownMenu>
   </ButtonDropdown>
-  </Col>
+  {#if matchedJobs >= -1}
-  <Col xs="auto">
+    <Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
-    {#if filters.cluster}
+      {matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
+    </Button>
+  {/if}
+</ButtonGroup>
+
+<!-- SELECTED FILTER PILLS -->
+{#if filters.cluster}
   <Info icon="cpu" on:click={() => (isClusterOpen = true)}>
     {filters.cluster}
     {#if filters.partition}
       ({filters.partition})
     {/if}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.states.length != allJobStates.length}
+{#if filters.states.length != allJobStates.length}
   <Info icon="gear-fill" on:click={() => (isJobStatesOpen = true)}>
     {filters.states.join(", ")}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.startTime.from || filters.startTime.to}
+{#if filters.startTime.from || filters.startTime.to}
   <Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
     {#if filters.startTime.text}
       {filters.startTime.text}
@@ -302,9 +310,9 @@
       ).toLocaleString()}
     {/if}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.duration.from || filters.duration.to}
+{#if filters.duration.from || filters.duration.to}
   <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
     {Math.floor(filters.duration.from / 3600)}h:{Math.floor(
       (filters.duration.from % 3600) / 60,
@@ -313,25 +321,25 @@
       (filters.duration.to % 3600) / 60,
     )}m
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.duration.lessThan}
+{#if filters.duration.lessThan}
   <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
     Duration less than {Math.floor(
       filters.duration.lessThan / 3600,
     )}h:{Math.floor((filters.duration.lessThan % 3600) / 60)}m
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.duration.moreThan}
+{#if filters.duration.moreThan}
   <Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
     Duration more than {Math.floor(
       filters.duration.moreThan / 3600,
     )}h:{Math.floor((filters.duration.moreThan % 3600) / 60)}m
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.tags.length != 0}
+{#if filters.tags.length != 0}
   <Info icon="tags" on:click={() => (isTagsOpen = true)}>
     {#each filters.tags as tagId}
       {#key tagId}
@@ -339,9 +347,9 @@
       {/key}
     {/each}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.numNodes.from != null || filters.numNodes.to != null || filters.numHWThreads.from != null || filters.numHWThreads.to != null || filters.numAccelerators.from != null || filters.numAccelerators.to != null}
+{#if filters.numNodes.from != null || filters.numNodes.to != null || filters.numHWThreads.from != null || filters.numHWThreads.to != null || filters.numAccelerators.from != null || filters.numAccelerators.to != null}
   <Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
     {#if isNodesModified}
       Nodes: {filters.numNodes.from} - {filters.numNodes.to}
@@ -358,29 +366,27 @@
         .numAccelerators.to}
     {/if}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.node != null}
+{#if filters.node != null}
   <Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
     Node: {filters.node}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.energy.from || filters.energy.to}
+{#if filters.energy.from || filters.energy.to}
   <Info icon="lightning-charge-fill" on:click={() => (isEnergyOpen = true)}>
     Total Energy: {filters.energy.from} - {filters.energy.to}
   </Info>
-    {/if}
+{/if}
 
-    {#if filters.stats.length > 0}
+{#if filters.stats.length > 0}
   <Info icon="bar-chart" on:click={() => (isStatsOpen = true)}>
     {filters.stats
       .map((stat) => `${stat.text}: ${stat.from} - ${stat.to}`)
       .join(", ")}
   </Info>
-    {/if}
+{/if}
-  </Col>
-</Row>
 
 <Cluster
   {disableClusterSelection}

web/frontend/src/generic/JobList.svelte

@@ -110,7 +110,7 @@
     jobs = [...$jobsStore.data.jobs.items]
   }
 
-  $: matchedJobs = $jobsStore.data != null ? $jobsStore.data.jobs.count : 0;
+  $: matchedJobs = $jobsStore.data != null ? $jobsStore.data.jobs.count : -1;
 
   // Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
   export function refreshJobs() {

web/frontend/src/generic/filters/InfoBox.svelte

@@ -13,7 +13,7 @@
   export let modified = false;
 </script>
 
-<Button outline color={modified ? "warning" : "primary"} on:click>
+<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} on:click>
   <Icon name={icon} />
   <slot />
 </Button>

web/frontend/src/generic/helper/Refresher.svelte

@@ -34,14 +34,15 @@
 <InputGroup>
   <Input
     type="select"
+    title="Periodic refresh interval"
     bind:value={refreshInterval}
     on:change={refreshIntervalChanged}
   >
-    <option value={null}>No periodic refresh</option>
+    <option value={null}>No Interval</option>
-    <option value={30 * 1000}>Update every 30 seconds</option>
+    <option value={30 * 1000}>30 Seconds</option>
-    <option value={60 * 1000}>Update every minute</option>
+    <option value={60 * 1000}>60 Seconds</option>
-    <option value={2 * 60 * 1000}>Update every two minutes</option>
+    <option value={2 * 60 * 1000}>Two Minutes</option>
-    <option value={5 * 60 * 1000}>Update every 5 minutes</option>
+    <option value={5 * 60 * 1000}>5 Minutes</option>
   </Input>
   <Button
     outline

web/frontend/src/generic/helper/TextFilter.svelte

@@ -83,26 +83,28 @@
 </script>
 
 <InputGroup>
-  <select
+  <Input
-    style="max-width: 175px;"
+    type="select"
+    style="max-width: 120px;"
     class="form-select"
+    title="Search Mode"
     bind:value={mode}
     on:change={modeChanged}
   >
     {#if !presetProject}
-      <option value={"project"}>Search Project</option>
+      <option value={"project"}>Project</option>
     {/if}
     {#if roles && authlevel >= roles.manager}
-      <option value={"user"}>Search User</option>
+      <option value={"user"}>User</option>
     {/if}
-    <option value={"jobName"}>Search Jobname</option>
+    <option value={"jobName"}>Jobname</option>
-  </select>
+  </Input>
   <Input
     type="text"
     bind:value={term}
     on:change={() => termChanged()}
     on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
-    placeholder={presetProject ? `Filter ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Filter ${mode} ...`}
+    placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}
   <Button title="Reset Project" on:click={resetProject}