cc-backend/web/frontend/src/User.root.svelte

177 lines
5.8 KiB
Svelte
Raw Normal View History

2022-06-22 11:20:57 +02:00
<script>
import { onMount, getContext } from 'svelte'
import { init } from './utils.js'
import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
import { queryStore, gql, getContextClient } from '@urql/svelte'
2022-06-22 11:20:57 +02:00
import Filters from './filters/Filters.svelte'
import JobList from './joblist/JobList.svelte'
import Sorting from './joblist/SortSelection.svelte'
import Refresher from './joblist/Refresher.svelte'
import Histogram from './plots/Histogram.svelte'
import MetricSelection from './MetricSelection.svelte'
import { scramble, scrambleNames } from './joblist/JobInfo.svelte'
const { query: initq } = init()
const ccconfig = getContext('cc-config')
export let user
export let filterPresets
let filters = []
let jobList
2022-06-22 11:20:57 +02:00
let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false
let metrics = ccconfig.plot_list_selectedMetrics, isMetricsSelectionOpen = false
let w1, w2, histogramHeight = 250
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
2022-06-22 11:20:57 +02:00
2023-05-12 11:19:37 +02:00
const client = getContextClient();
2023-05-08 18:06:58 +02:00
$: stats = queryStore({
2023-05-12 11:19:37 +02:00
client: client,
query: gql`
2023-05-12 11:19:37 +02:00
query($filters: [JobFilter!]!) {
jobsStatistics(filter: $filters) {
totalJobs
shortJobs
totalWalltime
totalCoreHours
histDuration { count, value }
histNumNodes { count, value }
}}`,
variables: { filters }
2022-06-22 11:20:57 +02:00
})
$: selectedCluster = filters[0]?.cluster ? filters[0].cluster.eq : null
2022-06-22 11:20:57 +02:00
onMount(() => filters.update())
</script>
<Row>
{#if $initq.fetching}
<Col>
<Spinner/>
</Col>
{:else if $initq.error}
<Col xs="auto">
<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>
</Col>
<Col xs="auto">
<Filters
filterPresets={filterPresets}
startTimeQuickSelect={true}
bind:this={filters}
on:update={({ detail }) => {
let jobFilters = [...detail.filters, { user: { eq: user.username } }]
filters = jobFilters
jobList.update(jobFilters)
2022-06-22 11:20:57 +02:00
}} />
</Col>
<Col xs="auto" style="margin-left: auto;">
2023-05-08 18:06:58 +02:00
<Refresher on:reload={() => jobList.refresh()} />
2022-06-22 11:20:57 +02:00
</Col>
</Row>
<br/>
<Row>
{#if $stats.error}
<Col>
<Card body color="danger">{$stats.error.message}</Card>
</Col>
{:else if !$stats.data}
<Col>
<Spinner secondary />
</Col>
{:else}
<Col xs="4">
<Table>
<tbody>
<tr>
<th scope="row">Username</th>
<td>{scrambleNames ? scramble(user.username) : user.username}</td>
</tr>
{#if user.name}
<tr>
<th scope="row">Name</th>
<td>{scrambleNames ? scramble(user.name) : user.name}</td>
</tr>
{/if}
{#if user.email}
<tr>
<th scope="row">Email</th>
<td>{user.email}</td>
</tr>
{/if}
<tr>
<th scope="row">Total Jobs</th>
<td>{$stats.data.jobsStatistics[0].totalJobs}</td>
</tr>
<tr>
<th scope="row">Short Jobs</th>
<td>{$stats.data.jobsStatistics[0].shortJobs}</td>
</tr>
<tr>
<th scope="row">Total Walltime</th>
<td>{$stats.data.jobsStatistics[0].totalWalltime}</td>
</tr>
<tr>
<th scope="row">Total Core Hours</th>
<td>{$stats.data.jobsStatistics[0].totalCoreHours}</td>
</tr>
</tbody>
</Table>
</Col>
<div class="col-4" style="text-align: center;" bind:clientWidth={w1}>
<b>Duration Distribution</b>
2022-06-22 11:20:57 +02:00
{#key $stats.data.jobsStatistics[0].histDuration}
<Histogram
data={$stats.data.jobsStatistics[0].histDuration}
width={w1 - 25} height={histogramHeight}
xlabel="Current Runtimes [h]"
ylabel="Number of Jobs"/>
2022-06-22 11:20:57 +02:00
{/key}
</div>
<div class="col-4" style="text-align: center;" bind:clientWidth={w2}>
<b>Number of Nodes Distribution</b>
2022-06-22 11:20:57 +02:00
{#key $stats.data.jobsStatistics[0].histNumNodes}
<Histogram
data={$stats.data.jobsStatistics[0].histNumNodes}
width={w2 - 25} height={histogramHeight}
xlabel="Allocated Nodes [#]"
ylabel="Number of Jobs" />
2022-06-22 11:20:57 +02:00
{/key}
</div>
{/if}
</Row>
<br/>
<Row>
<Col>
<JobList
bind:metrics={metrics}
bind:sorting={sorting}
bind:this={jobList} />
</Col>
</Row>
<Sorting
bind:sorting={sorting}
bind:isOpen={isSortingOpen} />
<MetricSelection
bind:cluster={selectedCluster}
configName="plot_list_selectedMetrics"
2022-06-22 11:20:57 +02:00
bind:metrics={metrics}
bind:isOpen={isMetricsSelectionOpen} />