2022-06-22 11:20:57 +02:00
< script >
import { onMount , getContext } from 'svelte'
import { init } from './utils.js'
import { Row , Col , Button , Icon , Card , Spinner } from 'sveltestrap'
import Filters from './filters/Filters.svelte'
import JobList from './joblist/JobList.svelte'
import Refresher from './joblist/Refresher.svelte'
import Sorting from './joblist/SortSelection.svelte'
import MetricSelection from './MetricSelection.svelte'
import UserOrProject from './filters/UserOrProject.svelte'
const { query : initq } = init()
const ccconfig = getContext('cc-config')
export let filterPresets = {}
2023-03-06 11:44:38 +01:00
export let authlevel
export let roles
2022-06-22 11:20:57 +02:00
2023-06-06 16:28:54 +02:00
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
2023-03-31 17:18:16 +02:00
let jobList, matchedJobs = null
2022-06-22 11:20:57 +02:00
let sorting = { field : 'startTime' , order : 'DESC' } , isSortingOpen = false, isMetricsSelectionOpen = false
let metrics = filterPresets.cluster
? ccconfig[`plot_list_selectedMetrics:${ filterPresets . cluster } `] || ccconfig.plot_list_selectedMetrics
: ccconfig.plot_list_selectedMetrics
2023-03-31 17:18:16 +02:00
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
2022-06-22 11:20:57 +02:00
// The filterPresets are handled by the Filters component,
// so we need to wait for it to be ready before we can start a query.
// This is also why JobList component starts out with a paused query.
2023-06-06 16:28:54 +02:00
onMount(() => filterComponent.update())
2022-06-22 11:20:57 +02:00
< / script >
< Row >
{ #if $initq . fetching }
< Col xs = "auto" >
< Spinner / >
< / Col >
{ :else if $initq . error }
< Col xs = "auto" >
< 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 >
< / Col >
< Col xs = "auto" >
< Filters
filterPresets={ filterPresets }
2023-06-06 16:28:54 +02:00
bind:this={ filterComponent }
2023-03-31 17:18:16 +02:00
on:update={({ detail }) => {
2023-06-06 16:28:54 +02:00
selectedCluster = detail.filters[0]?.cluster ? detail.filters[0].cluster.eq : null
jobList.update(detail.filters)
}
2023-03-31 17:18:16 +02:00
} />
2022-06-22 11:20:57 +02:00
< / Col >
< Col xs = "3" style = "margin-left: auto;" >
2023-06-06 16:28:54 +02:00
< UserOrProject bind:authlevel = { authlevel } bind:roles= { roles } on:update = {({ detail }) => filterComponent . update ( detail )} / >
2022-06-22 11:20:57 +02:00
< / Col >
< Col xs = "2" >
2023-05-09 12:40:42 +02:00
< Refresher on:reload = {() => jobList . refresh ()} / >
2022-06-22 11:20:57 +02:00
< / Col >
< / Row >
< br / >
< Row >
< Col >
< JobList
bind:metrics={ metrics }
bind:sorting={ sorting }
bind:matchedJobs={ matchedJobs }
bind:this={ jobList } />
< / Col >
< / Row >
< Sorting
bind:sorting={ sorting }
bind:isOpen={ isSortingOpen } />
< MetricSelection
2023-03-31 17:18:16 +02:00
bind:cluster={ selectedCluster }
2022-06-22 11:20:57 +02:00
configName="plot_list_selectedMetrics"
bind:metrics={ metrics }
bind:isOpen={ isMetricsSelectionOpen } />