mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-11-13 02:17:25 +01:00
improve job list toolbar layouting, smaller layout fixes
This commit is contained in:
Christoph Kluge
parent
7243dbe763
commit
37415fa261
@ -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}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Icon,
|
||||
Card,
|
||||
Spinner,
|
||||
@ -55,36 +56,41 @@
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
{#if $initq.fetching}
|
||||
<Col xs="auto">
|
||||
<!-- ROW1: Status-->
|
||||
{#if $initq.fetching}
|
||||
<Row class="mb-3">
|
||||
<Col>
|
||||
<Spinner />
|
||||
</Col>
|
||||
{:else if $initq.error}
|
||||
<Col xs="auto">
|
||||
</Row>
|
||||
{:else if $initq.error}
|
||||
<Row class="mb-3">
|
||||
<Col>
|
||||
<Card body color="danger">{$initq.error.message}</Card>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs="auto">
|
||||
<Button outline color="primary" on:click={() => (isSortingOpen = true)}>
|
||||
<Icon name="sort-up" /> Sorting
|
||||
</Button>
|
||||
<Button
|
||||
outline
|
||||
color="primary"
|
||||
on:click={() => (isMetricsSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="graph-up" /> Metrics
|
||||
</Button>
|
||||
<Button disabled outline
|
||||
>{matchedJobs == null ? "Loading..." : `${matchedJobs} jobs`}</Button
|
||||
>
|
||||
</Row>
|
||||
{/if}
|
||||
|
||||
<!-- 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"
|
||||
on:click={() => (isMetricsSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="graph-up" /> Metrics
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</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 xs="3" style="margin-left: auto;">
|
||||
<Col lg="3" xl="{(presetProject !== '') ? 3 : 2}" class="mb-2 mb-lg-0">
|
||||
<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>
|
||||
|
||||
@ -104,8 +104,8 @@
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<Col xs="auto">
|
||||
<Row cols={{ xs: 1, md: 2}}>
|
||||
<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">
|
||||
{{
|
||||
USER: "Username",
|
||||
PROJECT: "Project Name",
|
||||
}[type]}
|
||||
{#if type === 'USER'}
|
||||
Username
|
||||
{:else if type === 'PROJECT'}
|
||||
Project Name
|
||||
{/if}
|
||||
<Button
|
||||
color={sorting.field == "id" ? "primary" : "light"}
|
||||
size="sm"
|
||||
|
||||
@ -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,41 +105,41 @@
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
{#if $initq.fetching}
|
||||
<!-- ROW1: Status-->
|
||||
{#if $initq.fetching}
|
||||
<Row>
|
||||
<Col>
|
||||
<Spinner />
|
||||
</Col>
|
||||
{:else if $initq.error}
|
||||
<Col xs="auto">
|
||||
</Row>
|
||||
{:else if $initq.error}
|
||||
<Row>
|
||||
<Col>
|
||||
<Card body color="danger">{$initq.error.message}</Card>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
{/if}
|
||||
|
||||
<Col xs="auto">
|
||||
<Button outline color="primary" on:click={() => (isSortingOpen = true)}>
|
||||
<Icon name="sort-up" /> Sorting
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
outline
|
||||
color="primary"
|
||||
on:click={() => (isMetricsSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="graph-up" /> Metrics
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
outline
|
||||
color="secondary"
|
||||
on:click={() => (isHistogramSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="bar-chart-line" /> Select Histograms
|
||||
</Button>
|
||||
<!-- 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"
|
||||
on:click={() => (isMetricsSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="graph-up" /> Metrics
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</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}
|
||||
{:else}
|
||||
<Row class="mt-2">
|
||||
<Col>
|
||||
<Card body>No footprint histograms selected.</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
<br />
|
||||
<Row>
|
||||
|
||||
<!-- ROW6: JOB LIST-->
|
||||
<Row class="mt-3">
|
||||
<Col>
|
||||
<JobList bind:metrics bind:sorting bind:this={jobList} bind:showFootprint />
|
||||
<JobList
|
||||
bind:this={jobList}
|
||||
bind:matchedJobs
|
||||
bind:metrics
|
||||
bind:sorting
|
||||
bind:showFootprint
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
|
||||
@ -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,170 +219,174 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<Col xs="auto">
|
||||
<ButtonDropdown class="cc-dropdown-on-hover">
|
||||
<DropdownToggle outline caret color="success">
|
||||
<Icon name="sliders" />
|
||||
Filters
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem header>Manage Filters</DropdownItem>
|
||||
{#if menuText}
|
||||
<DropdownItem disabled>{menuText}</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
{/if}
|
||||
<DropdownItem on:click={() => (isClusterOpen = true)}>
|
||||
<Icon name="cpu" /> Cluster/Partition
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isJobStatesOpen = true)}>
|
||||
<Icon name="gear-fill" /> Job States
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isStartTimeOpen = true)}>
|
||||
<Icon name="calendar-range" /> Start Time
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isDurationOpen = true)}>
|
||||
<Icon name="stopwatch" /> Duration
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isTagsOpen = true)}>
|
||||
<Icon name="tags" /> Tags
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isResourcesOpen = true)}>
|
||||
<Icon name="hdd-stack" /> Resources
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isEnergyOpen = true)}>
|
||||
<Icon name="lightning-charge-fill" /> Energy
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isStatsOpen = true)}>
|
||||
<Icon name="bar-chart" on:click={() => (isStatsOpen = true)} /> Statistics
|
||||
</DropdownItem>
|
||||
{#if startTimeQuickSelect}
|
||||
<DropdownItem divider />
|
||||
<DropdownItem disabled>Start Time Qick 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={() => {
|
||||
filters.startTime.from = new Date(
|
||||
Date.now() - seconds * 1000,
|
||||
).toISOString();
|
||||
filters.startTime.to = new Date(Date.now()).toISOString();
|
||||
(filters.startTime.text = text), (filters.startTime.url = url);
|
||||
updateFilters();
|
||||
}}
|
||||
>
|
||||
<Icon name="calendar-range" />
|
||||
{text}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
{#if filters.cluster}
|
||||
<Info icon="cpu" on:click={() => (isClusterOpen = true)}>
|
||||
{filters.cluster}
|
||||
{#if filters.partition}
|
||||
({filters.partition})
|
||||
{/if}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#if filters.states.length != allJobStates.length}
|
||||
<Info icon="gear-fill" on:click={() => (isJobStatesOpen = true)}>
|
||||
{filters.states.join(", ")}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#if filters.startTime.from || filters.startTime.to}
|
||||
<Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
|
||||
{#if filters.startTime.text}
|
||||
{filters.startTime.text}
|
||||
{:else}
|
||||
{new Date(filters.startTime.from).toLocaleString()} - {new Date(
|
||||
filters.startTime.to,
|
||||
).toLocaleString()}
|
||||
{/if}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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,
|
||||
)}m -
|
||||
{Math.floor(filters.duration.to / 3600)}h:{Math.floor(
|
||||
(filters.duration.to % 3600) / 60,
|
||||
)}m
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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 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 filters.tags.length != 0}
|
||||
<Info icon="tags" on:click={() => (isTagsOpen = true)}>
|
||||
{#each filters.tags as tagId}
|
||||
{#key tagId}
|
||||
<Tag id={tagId} clickable={false} />
|
||||
{/key}
|
||||
<!-- Dropdown-Button -->
|
||||
<ButtonGroup>
|
||||
<ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
|
||||
<DropdownToggle outline caret color="success">
|
||||
<Icon name="sliders" />
|
||||
Filters
|
||||
</DropdownToggle>
|
||||
<DropdownMenu>
|
||||
<DropdownItem header>Manage Filters</DropdownItem>
|
||||
{#if menuText}
|
||||
<DropdownItem disabled>{menuText}</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
{/if}
|
||||
<DropdownItem on:click={() => (isClusterOpen = true)}>
|
||||
<Icon name="cpu" /> Cluster/Partition
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isJobStatesOpen = true)}>
|
||||
<Icon name="gear-fill" /> Job States
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isStartTimeOpen = true)}>
|
||||
<Icon name="calendar-range" /> Start Time
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isDurationOpen = true)}>
|
||||
<Icon name="stopwatch" /> Duration
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isTagsOpen = true)}>
|
||||
<Icon name="tags" /> Tags
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isResourcesOpen = true)}>
|
||||
<Icon name="hdd-stack" /> Resources
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isEnergyOpen = true)}>
|
||||
<Icon name="lightning-charge-fill" /> Energy
|
||||
</DropdownItem>
|
||||
<DropdownItem on:click={() => (isStatsOpen = true)}>
|
||||
<Icon name="bar-chart" on:click={() => (isStatsOpen = true)} /> Statistics
|
||||
</DropdownItem>
|
||||
{#if startTimeQuickSelect}
|
||||
<DropdownItem divider />
|
||||
<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={() => {
|
||||
filters.startTime.from = new Date(
|
||||
Date.now() - seconds * 1000,
|
||||
).toISOString();
|
||||
filters.startTime.to = new Date(Date.now()).toISOString();
|
||||
(filters.startTime.text = text), (filters.startTime.url = url);
|
||||
updateFilters();
|
||||
}}
|
||||
>
|
||||
<Icon name="calendar-range" />
|
||||
{text}
|
||||
</DropdownItem>
|
||||
{/each}
|
||||
</Info>
|
||||
{/if}
|
||||
{/if}
|
||||
</DropdownMenu>
|
||||
</ButtonDropdown>
|
||||
{#if matchedJobs >= -1}
|
||||
<Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
|
||||
{matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
|
||||
</Button>
|
||||
{/if}
|
||||
</ButtonGroup>
|
||||
|
||||
{#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}
|
||||
{/if}
|
||||
{#if isNodesModified && isHwthreadsModified},
|
||||
{/if}
|
||||
{#if isHwthreadsModified}
|
||||
HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to}
|
||||
{/if}
|
||||
{#if (isNodesModified || isHwthreadsModified) && isAccsModified},
|
||||
{/if}
|
||||
{#if isAccsModified}
|
||||
Accelerators: {filters.numAccelerators.from} - {filters
|
||||
.numAccelerators.to}
|
||||
{/if}
|
||||
</Info>
|
||||
<!-- SELECTED FILTER PILLS -->
|
||||
{#if filters.cluster}
|
||||
<Info icon="cpu" on:click={() => (isClusterOpen = true)}>
|
||||
{filters.cluster}
|
||||
{#if filters.partition}
|
||||
({filters.partition})
|
||||
{/if}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#if filters.node != null}
|
||||
<Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
|
||||
Node: {filters.node}
|
||||
</Info>
|
||||
{/if}
|
||||
{#if filters.states.length != allJobStates.length}
|
||||
<Info icon="gear-fill" on:click={() => (isJobStatesOpen = true)}>
|
||||
{filters.states.join(", ")}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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 filters.startTime.from || filters.startTime.to}
|
||||
<Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
|
||||
{#if filters.startTime.text}
|
||||
{filters.startTime.text}
|
||||
{:else}
|
||||
{new Date(filters.startTime.from).toLocaleString()} - {new Date(
|
||||
filters.startTime.to,
|
||||
).toLocaleString()}
|
||||
{/if}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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 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,
|
||||
)}m -
|
||||
{Math.floor(filters.duration.to / 3600)}h:{Math.floor(
|
||||
(filters.duration.to % 3600) / 60,
|
||||
)}m
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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 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 filters.tags.length != 0}
|
||||
<Info icon="tags" on:click={() => (isTagsOpen = true)}>
|
||||
{#each filters.tags as tagId}
|
||||
{#key tagId}
|
||||
<Tag id={tagId} clickable={false} />
|
||||
{/key}
|
||||
{/each}
|
||||
</Info>
|
||||
{/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}
|
||||
<Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
|
||||
{#if isNodesModified}
|
||||
Nodes: {filters.numNodes.from} - {filters.numNodes.to}
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
{#if isNodesModified && isHwthreadsModified},
|
||||
{/if}
|
||||
{#if isHwthreadsModified}
|
||||
HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to}
|
||||
{/if}
|
||||
{#if (isNodesModified || isHwthreadsModified) && isAccsModified},
|
||||
{/if}
|
||||
{#if isAccsModified}
|
||||
Accelerators: {filters.numAccelerators.from} - {filters
|
||||
.numAccelerators.to}
|
||||
{/if}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#if filters.node != null}
|
||||
<Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
|
||||
Node: {filters.node}
|
||||
</Info>
|
||||
{/if}
|
||||
|
||||
{#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 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}
|
||||
|
||||
<Cluster
|
||||
{disableClusterSelection}
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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={30 * 1000}>Update every 30 seconds</option>
|
||||
<option value={60 * 1000}>Update every minute</option>
|
||||
<option value={2 * 60 * 1000}>Update every two minutes</option>
|
||||
<option value={5 * 60 * 1000}>Update every 5 minutes</option>
|
||||
<option value={null}>No Interval</option>
|
||||
<option value={30 * 1000}>30 Seconds</option>
|
||||
<option value={60 * 1000}>60 Seconds</option>
|
||||
<option value={2 * 60 * 1000}>Two Minutes</option>
|
||||
<option value={5 * 60 * 1000}>5 Minutes</option>
|
||||
</Input>
|
||||
<Button
|
||||
outline
|
||||
|
||||
@ -83,26 +83,28 @@
|
||||
</script>
|
||||
|
||||
<InputGroup>
|
||||
<select
|
||||
style="max-width: 175px;"
|
||||
<Input
|
||||
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>
|
||||
</select>
|
||||
<option value={"jobName"}>Jobname</option>
|
||||
</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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user