ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-24 12:29:05 +01:00
Code Issues Packages Releases Activity

Start porting to new urql api

Browse Source 
It compiles. Not tested
This commit is contained in:
Jan Eitzinger 2023-05-03 16:41:17 +02:00
parent ce8eb86569
commit f235b5e911
12 changed files with 224 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/frontend/src/Analysis.root.svelte
View File

@ -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>

166
web/frontend/src/List.root.svelte
View File

@ -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'
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.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}

12
web/frontend/src/MetricSelection.svelte
View File

@ -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

14
web/frontend/src/Node.root.svelte
View File

@ -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>

12
web/frontend/src/PlotSelection.svelte
View File

@ -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

15
web/frontend/src/Status.root.svelte
View File

@ -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

13
web/frontend/src/Systems.root.svelte
View File

@ -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>

29
web/frontend/src/TagManagement.svelte
View File

@ -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))

12
web/frontend/src/User.root.svelte
View File

@ -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,7 +25,9 @@
let w1, w2, histogramHeight = 250
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
const stats = operationStore(`
const stats = queryStore({
client: getContextClient(),
query: gql`
query($filter: [JobFilter!]!) {
jobsStatistics(filter: $filter) {
totalJobs
@ -35,10 +37,10 @@
histDuration { count, value }
histNumNodes { count, value }
}
}
`, {
}`,
variables: {
filter: []
}, {
},
pause: true
})

23
web/frontend/src/joblist/JobList.svelte
View File

@ -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,7 +29,9 @@
let paging = { itemsPerPage, page }
let filter = []
const jobs = operationStore(`
const jobs = queryStore({
client: getContextClient(),
query: gql`
query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
jobs(filter: $filter, order: $sorting, page: $paging) {
items {
@ -43,19 +45,20 @@
}
count
}
}`, {
paging,
sorting,
filter,
}, {
}`,
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

15
web/frontend/src/joblist/Row.svelte
View File

@ -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>

4
web/frontend/src/utils.js
View File

@ -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,