ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-06-08 00:23:48 +02:00
Code Issues Packages Releases Activity

fix: layout issues in jobList toolbar

Browse Source
This commit is contained in:
Christoph Kluge 2025-06-05 17:47:03 +02:00
parent 0a24ef70e0
commit 0e3603f596
4 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/frontend/src/Jobs.root.svelte
View File

@ -113,7 +113,7 @@
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</Col> </Col>
<Col lg="4" class="mb-1 mb-lg-0"> <Col lg="5" class="mb-1 mb-lg-0">
<Filters <Filters
bind:this={filterComponent} bind:this={filterComponent}
{filterPresets} {filterPresets}
@ -142,25 +142,27 @@
/> />
{/if} {/if}
</Col> </Col>
<Col lg="2" class="mb-1 mb-lg-0"> <Col lg="3" class="mb-1 mb-lg-0 d-inline-flex align-items-start justify-content-end ">
{#if !showCompare} {#if !showCompare}
<Refresher onRefresh={() => { <Refresher presetClass="w-auto" onRefresh={() => {
jobList.refreshJobs() jobList.refreshJobs()
jobList.refreshAllMetrics() jobList.refreshAllMetrics()
}} /> }} />
{/if} {/if}
</Col> <div class="mx-1"></div>
<Col lg="2" class="mb-2 mb-lg-0"> <ButtonGroup class="w-50">
<ButtonGroup class="w-100"> <Button color="primary" disabled={(matchedListJobs >= 500 && !(selectedJobs.length != 0)) || $initq.fetching} onclick={() => {
<Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} onclick={() => {
if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true) if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true)
showCompare = !showCompare showCompare = !showCompare
}} > }} >
{showCompare ? 'Return to List' : {showCompare ? 'Return to List' :
'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)} matchedListJobs >= 500 && selectedJobs.length == 0
? 'Compare Disabled'
: 'Compare' + (selectedJobs.length != 0 ? ` ${selectedJobs.length} ` : ' ') + 'Jobs'
}
</Button> </Button>
{#if !showCompare && selectedJobs.length != 0} {#if !showCompare && selectedJobs.length != 0}
<Button color="warning" onclick={() => { <Button class="w-auto" color="warning" onclick={() => {
selectedJobs = [] // Only empty array, filters handled by reactive reset selectedJobs = [] // Only empty array, filters handled by reactive reset
}}> }}>
Clear Clear

2
web/frontend/src/generic/Filters.svelte
View File

@ -344,7 +344,7 @@
{/if} {/if}
{#if matchedJobs >= -1} {#if matchedJobs >= -1}
<Button class="mb-1" style="margin-right: 0.5rem;" disabled outline> <Button class="mb-1" style="margin-right: 0.25rem;" disabled outline>
{matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`} {matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
</Button> </Button>
{/if} {/if}

3
web/frontend/src/generic/helper/Refresher.svelte
View File

@ -13,6 +13,7 @@
/* Svelte 5 Props */ /* Svelte 5 Props */
let { let {
initially = null, initially = null,
presetClass = "",
onRefresh onRefresh
} = $props(); } = $props();
@ -35,7 +36,7 @@
}); });
</script> </script>
<InputGroup> <InputGroup class={presetClass}>
<Input <Input
type="select" type="select"
title="Periodic refresh interval" title="Periodic refresh interval"

4
web/frontend/src/generic/helper/TextFilter.svelte
View File

@ -97,7 +97,7 @@
<Input <Input
type="select" type="select"
style="max-width: 120px;" style="max-width: 120px;"
class="form-select" class="form-select w-auto"
title="Search Mode" title="Search Mode"
bind:value={mode} bind:value={mode}
onchange={modeChanged} onchange={modeChanged}
@ -115,7 +115,7 @@
bind:value={term} bind:value={term}
onchange={() => termChanged()} onchange={() => termChanged()}
onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)} onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`} placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
/> />
{#if presetProject} {#if presetProject}
<Button title="Reset Project" onclick={() => resetProject()} <Button title="Reset Project" onclick={() => resetProject()}