Skip to content

Commit

Permalink
improve job list toolbar layouting, smaller layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@spacehamster87
spacehamster87 committed Oct 7, 2024
1 parent 7243dbe commit 37415fa
Show file tree
Hide file tree
Showing 9 changed files with 292 additions and 247 deletions.
2 changes: 1 addition & 1 deletion web/frontend/src/Analysis.root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
62 changes: 34 additions & 28 deletions web/frontend/src/Jobs.root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
Row,
Col,
Button,
ButtonGroup,
Icon,
Card,
Spinner,
Expand Down Expand Up @@ -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
Expand All @@ -94,30 +100,30 @@
}}
/>
</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
bind:roles
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>
Expand Down
15 changes: 8 additions & 7 deletions web/frontend/src/List.root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -119,7 +119,7 @@
/>
</InputGroup>
</Col>
<Col xs="auto">
<Col xs="12" md="7" lg="8" xl="9">
<Filters
bind:this={filterComponent}
{filterPresets}
Expand All @@ -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"
Expand Down
105 changes: 67 additions & 38 deletions web/frontend/src/User.root.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
Row,
Col,
Button,
ButtonGroup,
Icon,
Card,
Spinner,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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}

<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>
</Row>
{/if}

<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 }) => {
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -259,6 +274,7 @@
</Col>
</Row>
{:else}
<hr class="my-2"/>
{#key $stats.data.jobsStatistics[0].histMetrics}
<PlotGrid
let:item
Expand All @@ -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>

Expand Down
Loading

0 comments on commit 37415fa

Please sign in to comment.