diff --git a/web/frontend/src/MetricSelection.svelte b/web/frontend/src/MetricSelection.svelte index 30b00b4..59fe263 100644 --- a/web/frontend/src/MetricSelection.svelte +++ b/web/frontend/src/MetricSelection.svelte @@ -54,17 +54,15 @@ } const client = getContextClient(); - const query = gql` - mutation($name: String!, $value: String!) { - updateConfiguration(name: $name, value: $value) - } - `; - - const updateConfiguration = ({ name, value }) => { - mutationStore({ - client, - query, - variables: { name, value }, + const updateConfigurationMutation = ({ name, value }) => { + return mutationStore({ + client: client, + query: gql` + mutation($name: String!, $value: String!) { + updateConfiguration(name: $name, value: $value) + } + `, + variables: { name, value } })} let columnHovering = null @@ -92,9 +90,14 @@ metrics = newMetricsOrder.filter(m => unorderedMetrics.includes(m)) isOpen = false - updateConfiguration({ + updateConfigurationMutation({ name: cluster == null ? configName : `${configName}:${cluster}`, value: JSON.stringify(metrics) + }).subscribe(res => { + if (res.fetching === false && res.error) { + throw res.error + // console.log('Error on subscription: ' + res.error) + } }) } diff --git a/web/frontend/src/PlotSelection.svelte b/web/frontend/src/PlotSelection.svelte index 064a2f6..449de64 100644 --- a/web/frontend/src/PlotSelection.svelte +++ b/web/frontend/src/PlotSelection.svelte @@ -8,9 +8,8 @@ export let metricsInScatterplots const client = getContextClient(); - - $: updateConfigurationMutation = ({ name, value }) => { - mutationStore({ + const updateConfigurationMutation = ({ name, value }) => { + return mutationStore({ client: client, query: gql`mutation($name: String!, $value: String!) { updateConfiguration(name: $name, value: $value) @@ -26,6 +25,11 @@ updateConfigurationMutation({ name: data.name, value: JSON.stringify(data.value) + }).subscribe(res => { + if (res.fetching === false && res.error) { + throw res.error + // console.log('Error on subscription: ' + res.error) + } }) } diff --git a/web/frontend/src/joblist/JobList.svelte b/web/frontend/src/joblist/JobList.svelte index 6c9550c..68e1a76 100644 --- a/web/frontend/src/joblist/JobList.svelte +++ b/web/frontend/src/joblist/JobList.svelte @@ -81,34 +81,23 @@ `; $: jobs = queryStore({ - client, - query, - variables: { paging, sorting, filter }, + client: client, + query: query, + variables: { paging, sorting, filter } }); - const configName = 'plot_list_jobsPerPage' - let configValue = '' + $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0; - $: if (configValue != '') { - mutationStore({ - client: getContextClient(), - query: gql` - mutation ($configName: String!, $configValue: String!) { - updateConfiguration(name: $configName, value: $configValue) - } - `, - variables: { configName, configValue }, + // Force refresh list with existing unchanged variables (== usually would not trigger reactivity) + export function refresh() { + queryStore({ + client: client, + query: query, + variables: { paging, sorting, filter }, + requestPolicy: 'network-only' }); } - const updateConfiguration = ({ value, page }) => { - configValue = value; // Trigger mutation - paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList - }; - - // $: $jobs.variables = { ...$jobs.variables, sorting, paging } - $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0; - // (Re-)query and optionally set new filters. export function update(filters) { if (filters != null) { @@ -116,26 +105,39 @@ if (minRunningFor && minRunningFor > 0) { filters.push({ minRunningFor }); } - filter = filters; } - page = 1; paging = paging = { page, itemsPerPage }; } - // Force refresh list with existing unchanged variables (== usually would not trigger reactivity) - export function refresh() { - queryStore({ - client, - query, - variables: { paging, sorting, filter }, - requestPolicy: 'network-only' - }); + const updateConfigurationMutation = ({ name, value }) => { + return mutationStore({ + client: client, + query: gql` + mutation ($name: String!, $value: String!) { + updateConfiguration(name: $name, value: $value) + } + `, + variables: { name, value } + }); } + function updateConfiguration(value, page) { + updateConfigurationMutation({ name: 'plot_list_jobsPerPage', value: value }) + .subscribe(res => { + if (res.fetching === false && !res.error) { + paging = { itemsPerPage: value, page: page }; // Trigger reload of jobList + } else if (res.fetching === false && res.error) { + throw res.error + // console.log('Error on subscription: ' + res.error) + } + }) + }; + let tableWidth = null; let jobInfoColumnWidth = 250; + $: plotWidth = Math.floor( (tableWidth - jobInfoColumnWidth) / metrics.length - 10 ); @@ -232,11 +234,10 @@ totalItems={matchedJobs} on:update={({ detail }) => { if (detail.itemsPerPage != itemsPerPage) { - itemsPerPage = detail.itemsPerPage; - updateConfiguration({ - value: itemsPerPage.toString(), - page: detail.page, - }) + updateConfiguration( + detail.itemsPerPage.toString(), + detail.page + ) } else { paging = { itemsPerPage: detail.itemsPerPage, page: detail.page } }