Start porting to new urql api

It compiles. Not tested
2024-12-24 04:29:04 +01:00 · 2023-05-03 16:41:17 +02:00 · 2023-05-03 16:41:17 +02:00 · f235b5e911
commit f235b5e911
parent ce8eb86569
12 changed files with 224 additions and 142 deletions
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@ -1,7 +1,7 @@
 <script>
    import { init } from './utils.js'
    import { getContext, onMount } from 'svelte'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient  } from '@urql/svelte'
    import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
    import Filters from './filters/Filters.svelte'
    import PlotSelection from './PlotSelection.svelte'
@ -50,7 +50,9 @@
        }
    })

-    const statsQuery = operationStore(`
+    const statsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
        query($filter: [JobFilter!]!) {
            stats: jobsStatistics(filter: $filter) {
                totalJobs
@ -63,33 +65,38 @@

            topUsers: jobsCount(filter: $filter, groupBy: USER, weight: NODE_HOURS, limit: 5) { name, count }
        }
-    `, { filter: [] }, { pause: true })
+    `, 
+    variables: { filter: [] },
+    pause: true 
+    })

-    const footprintsQuery = operationStore(`
+    const footprintsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
        query($filter: [JobFilter!]!, $metrics: [String!]!) {
            footprints: jobsFootprints(filter: $filter, metrics: $metrics) {
                nodehours,
                metrics { metric, data }
            }
-        }
-    `, { filter: [], metrics }, { pause: true })
+        }`,
+    variables:  { filter: [], metrics },
+    pause: true
+    })
    $: $footprintsQuery.variables = { ...$footprintsQuery.variables, metrics }

-    const rooflineQuery = operationStore(`
+    const rooflineQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
        query($filter: [JobFilter!]!, $rows: Int!, $cols: Int!,
                $minX: Float!, $minY: Float!, $maxX: Float!, $maxY: Float!) {
            rooflineHeatmap(filter: $filter, rows: $rows, cols: $cols,
                    minX: $minX, minY: $minY, maxX: $maxX, maxY: $maxY)
        }
-    `, {
-        filter: [],
-        rows: 50, cols: 50,
-        minX: 0.01, minY: 1., maxX: 1000., maxY: -1.
-    }, { pause: true });
+    `,
+    variables: { filter: [], rows: 50, cols: 50, minX: 0.01, minY: 1., maxX: 1000., maxY: -1. },
+    pause: true
+    })

-    query(statsQuery)
-    query(footprintsQuery)
-    query(rooflineQuery)
    onMount(() => filters.update())
 </script>

--- a/web/frontend/src/List.root.svelte
+++ b/web/frontend/src/List.root.svelte
@ -2,22 +2,28 @@
    @component List of users or projects
 -->
 <script>
-    import { onMount } from 'svelte'
-    import { init } from './utils.js'
-    import { Row, Col, Button, Icon, Table, Card, Spinner,
-             InputGroup, Input } from 'sveltestrap'
-    import Filters from './filters/Filters.svelte'
-    import { operationStore, query } from '@urql/svelte';
-    import { scramble, scrambleNames } from './joblist/JobInfo.svelte'
+    import { onMount } from "svelte";
+    import { init } from "./utils.js";
+    import { Row, Col, Button, Icon, Table,
+        Card, Spinner, InputGroup, Input, } from "sveltestrap";
+    import Filters from "./filters/Filters.svelte";
+    import { queryStore, gql, getContextClient } from "@urql/svelte";
+    import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";

-    const { } = init()
+    const {} = init();

-    export let type
-    export let filterPresets
+    export let type;
+    export let filterPresets;

-    console.assert(type == 'USER' || type == 'PROJECT', 'Invalid list type provided!')
+    console.assert(
+        type == "USER" || type == "PROJECT",
+        "Invalid list type provided!"
+    );

-    const stats = operationStore(`query($filter: [JobFilter!]!) {
+    const stats = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!) {
        rows: jobsStatistics(filter: $filter, groupBy: ${type}) {
            id
            name
@ -25,41 +31,39 @@
            totalWalltime
            totalCoreHours
        }
-    }`, {
-        filter: []
-    }, {
-        pause: true
-    })
+    }`,
+        variables: { filter, type },
+    });

-    query(stats)
-
-    let filters
-    let nameFilter = ''
-    let sorting = { field: 'totalJobs', direction: 'down' }
+    let filters;
+    let nameFilter = "";
+    let sorting = { field: "totalJobs", direction: "down" };

    function changeSorting(event, field) {
-        let target = event.target
-        while (target.tagName != 'BUTTON')
-            target = target.parentElement
+        let target = event.target;
+        while (target.tagName != "BUTTON") target = target.parentElement;

-        let direction = target.children[0].className.includes('up') ? 'down' : 'up'
-        target.children[0].className = `bi-sort-numeric-${direction}`
-        sorting = { field, direction }
+        let direction = target.children[0].className.includes("up")
+            ? "down"
+            : "up";
+        target.children[0].className = `bi-sort-numeric-${direction}`;
+        sorting = { field, direction };
    }

    function sort(stats, sorting, nameFilter) {
-        const cmp = sorting.field == 'id'
-            ? (sorting.direction == 'up'
-                ? (a, b) => a.id < b.id
-                : (a, b) => a.id > b.id)
-            : (sorting.direction == 'up'
+        const cmp =
+            sorting.field == "id"
+                ? sorting.direction == "up"
+                    ? (a, b) => a.id < b.id
+                    : (a, b) => a.id > b.id
+                : sorting.direction == "up"
                ? (a, b) => a[sorting.field] - b[sorting.field]
-                : (a, b) => b[sorting.field] - a[sorting.field])
+                : (a, b) => b[sorting.field] - a[sorting.field];

-        return stats.filter(u => u.id.includes(nameFilter)).sort(cmp)
+        return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
    }

-    onMount(() => filters.update())
+    onMount(() => filters.update());
 </script>

 <Row>
@ -68,59 +72,85 @@
            <Button disabled outline>
                Search {type.toLowerCase()}s
            </Button>
-            <Input bind:value={nameFilter} placeholder="Filter by {({ USER: 'username', PROJECT: 'project' })[type]}" />
+            <Input
+                bind:value={nameFilter}
+                placeholder="Filter by {{
+                    USER: 'username',
+                    PROJECT: 'project',
+                }[type]}"
+            />
        </InputGroup>
    </Col>
    <Col xs="auto">
        <Filters
            bind:this={filters}
-            filterPresets={filterPresets}
+            {filterPresets}
            startTimeQuickSelect={true}
            menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
            on:update={({ detail }) => {
-                $stats.variables = { filter: detail.filters }
-                $stats.context.pause = false
-                $stats.reexecute()
-            }} />
+                $stats.variables = { filter: detail.filters };
+                $stats.context.pause = false;
+                $stats.reexecute();
+            }}
+        />
    </Col>
 </Row>
 <Table>
    <thead>
        <tr>
            <th scope="col">
-                {({ USER: 'Username', PROJECT: 'Project Name' })[type]}
-                <Button color="{sorting.field == 'id' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'id')}>
+                {({ USER: "Username", PROJECT: "Project Name" })[type]}
+                <Button
+                    color={sorting.field == "id" ? "primary" : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "id")}
+                >
                    <Icon name="sort-numeric-down" />
                </Button>
            </th>
-            {#if type == 'USER'}
+            {#if type == "USER"}
                <th scope="col">
                    Name
-                    <Button color="{sorting.field == 'name' ? 'primary' : 'light'}"
-                        size="sm" on:click={e => changeSorting(e, 'name')}>
+                    <Button
+                        color={sorting.field == "name" ? "primary" : "light"}
+                        size="sm"
+                        on:click={(e) => changeSorting(e, "name")}
+                    >
                        <Icon name="sort-numeric-down" />
                    </Button>
                </th>
            {/if}
            <th scope="col">
                Total Jobs
-                <Button color="{sorting.field == 'totalJobs' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalJobs')}>
+                <Button
+                    color={sorting.field == "totalJobs" ? "primary" : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalJobs")}
+                >
                    <Icon name="sort-numeric-down" />
                </Button>
            </th>
            <th scope="col">
                Total Walltime
-                <Button color="{sorting.field == 'totalWalltime' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalWalltime')}>
+                <Button
+                    color={sorting.field == "totalWalltime"
+                        ? "primary"
+                        : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalWalltime")}
+                >
                    <Icon name="sort-numeric-down" />
                </Button>
            </th>
            <th scope="col">
                Total Core Hours
-                <Button color="{sorting.field == 'totalCoreHours' ? 'primary' : 'light'}"
-                    size="sm" on:click={e => changeSorting(e, 'totalCoreHours')}>
+                <Button
+                    color={sorting.field == "totalCoreHours"
+                        ? "primary"
+                        : "light"}
+                    size="sm"
+                    on:click={(e) => changeSorting(e, "totalCoreHours")}
+                >
                    <Icon name="sort-numeric-down" />
                </Button>
            </th>
@ -129,26 +159,36 @@
    <tbody>
        {#if $stats.fetching}
            <tr>
-                <td colspan="4" style="text-align: center;"><Spinner secondary/></td>
+                <td colspan="4" style="text-align: center;"
+                    ><Spinner secondary /></td
+                >
            </tr>
        {:else if $stats.error}
            <tr>
-                <td colspan="4"><Card body color="danger" class="mb-3">{$stats.error.message}</Card></td>
+                <td colspan="4"
+                    ><Card body color="danger" class="mb-3"
+                        >{$stats.error.message}</Card
+                    ></td
+                >
            </tr>
        {:else if $stats.data}
            {#each sort($stats.data.rows, sorting, nameFilter) as row (row.id)}
                <tr>
                    <td>
-                        {#if type == 'USER'}
-                            <a href="/monitoring/user/{row.id}">{scrambleNames ? scramble(row.id) : row.id}</a>
-                        {:else if type == 'PROJECT'}
-                            <a href="/monitoring/jobs/?project={row.id}">{row.id}</a>
+                        {#if type == "USER"}
+                            <a href="/monitoring/user/{row.id}"
+                                >{scrambleNames ? scramble(row.id) : row.id}</a
+                            >
+                        {:else if type == "PROJECT"}
+                            <a href="/monitoring/jobs/?project={row.id}"
+                                >{row.id}</a
+                            >
                        {:else}
                            {row.id}
                        {/if}
                    </td>
-                    {#if type == 'USER'}
-                        <td>{row?.name ? row.name : ''}</td>
+                    {#if type == "USER"}
+                        <td>{row?.name ? row.name : ""}</td>
                    {/if}
                    <td>{row.totalJobs}</td>
                    <td>{row.totalWalltime}</td>
@ -156,7 +196,9 @@
                </tr>
            {:else}
                <tr>
-                    <td colspan="4"><i>No {type.toLowerCase()}s/jobs found</i></td>
+                    <td colspan="4"
+                        ><i>No {type.toLowerCase()}s/jobs found</i></td
+                    >
                </tr>
            {/each}
        {/if}
--- a/web/frontend/src/MetricSelection.svelte
+++ b/web/frontend/src/MetricSelection.svelte
@ -10,7 +10,7 @@
 <script>
    import  { Modal, ModalBody, ModalHeader, ModalFooter, Button, ListGroup } from 'sveltestrap'
    import { getContext } from 'svelte'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore  } from '@urql/svelte'

    export let metrics
    export let isOpen
@ -53,11 +53,15 @@
        }
    }

-    const updateConfiguration = mutation({
-        query: `mutation($name: String!, $value: String!) {
+    const updateConfiguration = ({ name, value }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($name: String!, $value: String!) {
            updateConfiguration(name: $name, value: $value)
-        }`
+        }`,
+        variables: {name, value}
    })
+    }

    let columnHovering = null

--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@ -1,7 +1,7 @@
 <script>
    import { init } from './utils.js'
    import { Row, Col, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
    import TimeSelection from './filters/TimeSelection.svelte'
    import PlotTable from './PlotTable.svelte'
    import MetricPlot from './plots/MetricPlot.svelte'
@ -23,7 +23,9 @@
    const ccconfig = getContext('cc-config')
    const clusters = getContext('clusters')

-    const nodesQuery = operationStore(`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
+    const nodesQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
        nodeMetrics(cluster: $cluster, nodes: $nodes, from: $from, to: $to) {
            host
            subCluster
@ -40,11 +42,12 @@
                }
            }
        }
-    }`, {
+    }`,
+    variables: {
        cluster: cluster,
        nodes: [hostname],
        from: from.toISOString(),
-        to: to.toISOString()
+        to: to.toISOString() }
    })

    $: $nodesQuery.variables = { cluster, nodes: [hostname], from: from.toISOString(), to: to.toISOString() }
@ -59,9 +62,6 @@
            }
        }
    }
-
-    query(nodesQuery)
-
    // $: console.log($nodesQuery?.data?.nodeMetrics[0].metrics)
 </script>

--- a/web/frontend/src/PlotSelection.svelte
+++ b/web/frontend/src/PlotSelection.svelte
@ -1,17 +1,21 @@
 <script>
    import { Modal, ModalBody, ModalHeader, ModalFooter, InputGroup,
             Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore } from '@urql/svelte'

    export let availableMetrics
    export let metricsInHistograms
    export let metricsInScatterplots

-    const updateConfigurationMutation = mutation({
-        query: `mutation($name: String!, $value: String!) {
+    const updateConfigurationMutation = ({ name, value }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($name: String!, $value: String!) {
            updateConfiguration(name: $name, value: $value)
-        }`
+        }`,
+        variables: { name, value }
    })
+    }

    let isHistogramConfigOpen = false, isScatterPlotConfigOpen = false
    let selectedMetric1 = null, selectedMetric2 = null
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@ -4,7 +4,7 @@
    import Histogram from './plots/Histogram.svelte'
    import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
    import { init } from './utils.js'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient  } from '@urql/svelte'

    const { query: initq } = init()

@ -13,7 +13,9 @@
    let plotWidths = [], colWidth1 = 0, colWidth2

    let from = new Date(Date.now() - 5 * 60 * 1000), to = new Date(Date.now())
-    const mainQuery = operationStore(`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
+    const mainQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $filter: [JobFilter!]!, $metrics: [String!], $from: Time!, $to: Time!) {
        nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
            host
            subCluster
@ -36,12 +38,11 @@
        allocatedNodes(cluster: $cluster)                                                        { name, count }
        topUsers:    jobsCount(filter: $filter, groupBy: USER,    weight: NODE_COUNT, limit: 10) { name, count }
        topProjects: jobsCount(filter: $filter, groupBy: PROJECT, weight: NODE_COUNT, limit: 10) { name, count }
-    }`, {
-        cluster: cluster,
-        metrics: ['flops_any', 'mem_bw'],
-        from: from.toISOString(),
-        to: to.toISOString(),
+    }`,
+    variables: {
+         cluster: cluster, metrics: ['flops_any', 'mem_bw'], from: from.toISOString(), to: to.toISOString(),
        filter: [{ state: ['running'] }, { cluster: { eq: cluster } }]
+    }
    })

    const sumUp = (data, subcluster, metric) => data.reduce((sum, node) => node.subCluster == subcluster
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@ -1,7 +1,7 @@
 <script>
    import { init } from './utils.js'
    import { Row, Col, Input, InputGroup, InputGroupText, Icon, Spinner, Card } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
    import TimeSelection from './filters/TimeSelection.svelte'
    import PlotTable from './PlotTable.svelte'
    import MetricPlot from './plots/MetricPlot.svelte'
@ -27,7 +27,9 @@
    let hostnameFilter = ''
    let selectedMetric = ccconfig.system_view_selectedMetric

-    const nodesQuery = operationStore(`query($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
+    const nodesQuery = queryStore({
+        client: getContextClient(),
+        query: gql`query($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
        nodeMetrics(cluster: $cluster, metrics: $metrics, from: $from, to: $to) {
            host
            subCluster
@ -44,11 +46,12 @@
                }
            }
        }
-    }`, {
+    }`,
+    variables: {
        cluster: cluster,
        metrics: [],
        from: from.toISOString(),
-        to: to.toISOString()
+        to: to.toISOString()}
    })

    let metricUnits = {}
@ -64,8 +67,6 @@
    }

    $: $nodesQuery.variables = { cluster, metrics: [selectedMetric], from: from.toISOString(), to: to.toISOString() }
-
-    query(nodesQuery)
 </script>

 <Row>
--- a/web/frontend/src/TagManagement.svelte
+++ b/web/frontend/src/TagManagement.svelte
@ -1,6 +1,6 @@
 <script>
    import { getContext } from 'svelte'
-    import { mutation } from '@urql/svelte'
+    import { gql, getContextClient , mutationStore } from '@urql/svelte'
    import { Icon, Button, ListGroupItem, Spinner, Modal, Input,
             ModalBody, ModalHeader, ModalFooter, Alert } from 'sveltestrap'
    import { fuzzySearchTags } from './utils.js'
@ -15,23 +15,34 @@
    let pendingChange = false
    let isOpen = false

-    const createTagMutation = mutation({
-        query: `mutation($type: String!, $name: String!) {
+    const createTagMutation = ({ type, name }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($type: String!, $name: String!) {
            createTag(type: $type, name: $name) { id, type, name }
-        }`
+        }`,
+        variables: { type, name}
    })
+    }

-    const addTagsToJobMutation = mutation({
-        query: `mutation($job: ID!, $tagIds: [ID!]!) {
+    const addTagsToJobMutation = ({ job, tagIds }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
            addTagsToJob(job: $job, tagIds: $tagIds) { id, type, name }
-        }`
+        }`,
+        variables: {job, tagIds}
    })
+    }

-    const removeTagsFromJobMutation = mutation({
-        query: `mutation($job: ID!, $tagIds: [ID!]!) {
+    const removeTagsFromJobMutation = ({ job, tagIds }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($job: ID!, $tagIds: [ID!]!) {
            removeTagsFromJob(job: $job, tagIds: $tagIds) { id, type, name }
        }`
    })
+    }

    let allTagsFiltered // $initialized is in there because when it becomes true, allTags is initailzed.
    $: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags))
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@ -2,7 +2,7 @@
    import { onMount, getContext } from 'svelte'
    import { init } from './utils.js'
    import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
    import Filters from './filters/Filters.svelte'
    import JobList from './joblist/JobList.svelte'
    import Sorting from './joblist/SortSelection.svelte'
@ -25,8 +25,10 @@
    let w1, w2, histogramHeight = 250
    let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null

-    const stats = operationStore(`
-    query($filter: [JobFilter!]!) {
+    const stats = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!) {
        jobsStatistics(filter: $filter) {
            totalJobs
            shortJobs
@ -35,10 +37,10 @@
            histDuration { count, value }
            histNumNodes { count, value }
        }
-    }
-    `, {
+    }`,
+    variables: {
        filter: []
-    }, {
+    },
        pause: true
    })

--- a/web/frontend/src/joblist/JobList.svelte
+++ b/web/frontend/src/joblist/JobList.svelte
@ -9,7 +9,7 @@
    - update(filters?: [JobFilter])
 -->
 <script>
-    import { operationStore, query, mutation } from '@urql/svelte'
+    import { queryStore, gql, getContextClient , mutationStore } from '@urql/svelte'
    import { getContext } from 'svelte';
    import { Row, Table, Card, Spinner } from 'sveltestrap'
    import Pagination from './Pagination.svelte'
@ -29,11 +29,13 @@
    let paging = { itemsPerPage, page }
    let filter = []

-    const jobs = operationStore(`
-    query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
-        jobs(filter: $filter, order: $sorting, page: $paging) {
-            items {
-                id, jobId, user, project, jobName, cluster, subCluster, startTime,
+    const jobs = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
+            jobs(filter: $filter, order: $sorting, page: $paging) {
+                items {
+                    id, jobId, user, project, jobName, cluster, subCluster, startTime,
                duration, numNodes, numHWThreads, numAcc, walltime, resources { hostname },
                SMT, exclusive, partition, arrayJobId,
                monitoringStatus, state,
@ -43,19 +45,20 @@
            }
            count
        }
-    }`, {
-        paging,
-        sorting,
-        filter,
-    }, {
-        pause: true
+    }`,
+    variables: { paging, sorting, filter },
+    pause: true
    })

-    const updateConfiguration = mutation({
-        query: `mutation($name: String!, $value: String!) {
+    const updateConfiguration = ({ name, value }) => {
+    result = mutationStore({
+        client: getContextClient(),
+        query: gql`mutation($name: String!, $value: String!) {
            updateConfiguration(name: $name, value: $value)
-        }`
+        }`,
+        variables: {name, value}
    })
+    }

    $: $jobs.variables = { ...$jobs.variables, sorting, paging }
    $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0
--- a/web/frontend/src/joblist/Row.svelte
+++ b/web/frontend/src/joblist/Row.svelte
@ -9,7 +9,7 @@
 -->

 <script>
-    import { operationStore, query } from '@urql/svelte'
+    import { queryStore, gql, getContextClient } from '@urql/svelte'
    import { getContext } from 'svelte'
    import { Card, Spinner } from 'sveltestrap'
    import MetricPlot from '../plots/MetricPlot.svelte'
@ -26,7 +26,10 @@
    const cluster = getContext('clusters').find(c => c.name == job.cluster)
    // Get all MetricConfs which include subCluster-specific settings for this job
    const metricConfig = getContext('metrics')
-    const metricsQuery = operationStore(`query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
+    const metricsQuery = queryStore({
+        client: getContextClient(),
+        query: gql`
+        query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
        jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
            name
            scope
@ -39,10 +42,12 @@
                }
            }
        }
-    }`, {
+    }`,
+    pause: true,
+    variables: {
        id: job.id,
        metrics,
-        scopes
+        scopes}
    })

    const selectScope = (jobMetrics) => jobMetrics.reduce(
@ -91,7 +96,7 @@
    $: metricsQuery.variables = { id: job.id, metrics, scopes }

    if (job.monitoringStatus)
-        query(metricsQuery)
+        $metricsQuery.resume()
 </script>

 <tr>
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@ -1,5 +1,5 @@
 import { expiringCacheExchange } from './cache-exchange.js'
-import { Client, fetchExchange } from '@urql/svelte';
+import { Client, setContextClient, fetchExchange } from '@urql/svelte';
 import { setContext, getContext, hasContext, onDestroy, tick } from 'svelte'
 import { readable } from 'svelte/store'

@ -32,6 +32,8 @@ export function init(extraInitQuery = '') {
        ]
    })

+    setContextClient(client)
+
    const query = client.query(`query {
        clusters {
            name,