mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-07-27 22:56:08 +02:00
Restructure frontend svelte file src folder
- Goal: Dependency structure mirrored in file structure
This commit is contained in:
Christoph Kluge
123
web/frontend/src/job/Metric.svelte
Normal file
123
web/frontend/src/job/Metric.svelte
Normal file
@@ -0,0 +1,123 @@
|
||||
<!--
|
||||
@component Metric plot wrapper with user scope selection; used in job detail view
|
||||
|
||||
Properties:
|
||||
- `job Object`: The GQL job object
|
||||
- `metricName String`: The metrics name
|
||||
- `metricUnit Object`: The metrics GQL unit object
|
||||
- `nativeScope String`: The metrics native scope
|
||||
- `scopes [String]`: The scopes returned for this metric
|
||||
- `width Number`: Nested plot width
|
||||
- `rawData [Object]`: Metric data for all scopes returned for this metric
|
||||
- `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly in downstream plots [Default: false]
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Spinner,
|
||||
Card,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
import { minScope } from "../generic/utils";
|
||||
import Timeseries from "../generic/plots/MetricPlot.svelte";
|
||||
|
||||
export let job;
|
||||
export let metricName;
|
||||
export let metricUnit;
|
||||
export let nativeScope;
|
||||
export let scopes;
|
||||
export let width;
|
||||
export let rawData;
|
||||
export let isShared = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const unit = (metricUnit?.prefix ? metricUnit.prefix : "") + (metricUnit?.base ? metricUnit.base : "")
|
||||
|
||||
let selectedHost = null,
|
||||
plot,
|
||||
fetching = false,
|
||||
error = null;
|
||||
let selectedScope = minScope(scopes);
|
||||
|
||||
let statsPattern = /(.*)-stat$/
|
||||
let statsSeries = rawData.map((data) => data?.statisticsSeries ? data.statisticsSeries : null)
|
||||
let selectedScopeIndex
|
||||
|
||||
$: availableScopes = scopes;
|
||||
$: patternMatches = statsPattern.exec(selectedScope)
|
||||
$: if (!patternMatches) {
|
||||
selectedScopeIndex = scopes.findIndex((s) => s == selectedScope);
|
||||
} else {
|
||||
selectedScopeIndex = scopes.findIndex((s) => s == patternMatches[1]);
|
||||
}
|
||||
$: data = rawData[selectedScopeIndex];
|
||||
$: series = data?.series.filter(
|
||||
(series) => selectedHost == null || series.hostname == selectedHost,
|
||||
);
|
||||
|
||||
$: if (selectedScope == "load-all") dispatch("load-all");
|
||||
</script>
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupText style="min-width: 150px;">
|
||||
{metricName} ({unit})
|
||||
</InputGroupText>
|
||||
<select class="form-select" bind:value={selectedScope}>
|
||||
{#each availableScopes as scope, index}
|
||||
<option value={scope}>{scope}</option>
|
||||
{#if statsSeries[index]}
|
||||
<option value={scope + '-stat'}>stats series ({scope})</option>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if availableScopes.length == 1 && nativeScope != "node"}
|
||||
<option value={"load-all"}>Load all...</option>
|
||||
{/if}
|
||||
</select>
|
||||
{#if job.resources.length > 1}
|
||||
<select class="form-select" bind:value={selectedHost} disabled={patternMatches}>
|
||||
<option value={null}>All Hosts</option>
|
||||
{#each job.resources as { hostname }}
|
||||
<option value={hostname}>{hostname}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</InputGroup>
|
||||
{#key series}
|
||||
{#if fetching == true}
|
||||
<Spinner />
|
||||
{:else if error != null}
|
||||
<Card body color="danger">{error.message}</Card>
|
||||
{:else if series != null && !patternMatches}
|
||||
<Timeseries
|
||||
bind:this={plot}
|
||||
{width}
|
||||
height={300}
|
||||
cluster={job.cluster}
|
||||
subCluster={job.subCluster}
|
||||
timestep={data.timestep}
|
||||
scope={selectedScope}
|
||||
metric={metricName}
|
||||
{series}
|
||||
{isShared}
|
||||
resources={job.resources}
|
||||
/>
|
||||
{:else if statsSeries[selectedScopeIndex] != null && patternMatches}
|
||||
<Timeseries
|
||||
bind:this={plot}
|
||||
{width}
|
||||
height={300}
|
||||
cluster={job.cluster}
|
||||
subCluster={job.subCluster}
|
||||
timestep={data.timestep}
|
||||
scope={selectedScope}
|
||||
metric={metricName}
|
||||
{series}
|
||||
{isShared}
|
||||
resources={job.resources}
|
||||
statisticsSeries={statsSeries[selectedScopeIndex]}
|
||||
useStatsSeries={!!statsSeries[selectedScopeIndex]}
|
||||
/>
|
||||
{/if}
|
||||
{/key}
|
||||
157
web/frontend/src/job/StatsTable.svelte
Normal file
157
web/frontend/src/job/StatsTable.svelte
Normal file
@@ -0,0 +1,157 @@
|
||||
<!--
|
||||
@component Job-View subcomponent; display table of metric data statistics with selectable scopes
|
||||
|
||||
Properties:
|
||||
- `job Object`: The job object
|
||||
- `jobMetrics [Object]`: The jobs metricdata
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { getContext } from "svelte";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Icon,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
import { maxScope } from "../generic/utils.js";
|
||||
import StatsTableEntry from "./StatsTableEntry.svelte";
|
||||
import MetricSelection from "../generic/Select/MetricSelection.svelte";
|
||||
|
||||
export let job;
|
||||
export let jobMetrics;
|
||||
|
||||
const allMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort(),
|
||||
scopesForMetric = (metric) =>
|
||||
jobMetrics.filter((jm) => jm.name == metric).map((jm) => jm.scope);
|
||||
|
||||
let hosts = job.resources.map((r) => r.hostname).sort(),
|
||||
selectedScopes = {},
|
||||
sorting = {},
|
||||
isMetricSelectionOpen = false,
|
||||
selectedMetrics =
|
||||
getContext("cc-config")[
|
||||
`job_view_nodestats_selectedMetrics:${job.cluster}`
|
||||
] || getContext("cc-config")["job_view_nodestats_selectedMetrics"];
|
||||
|
||||
for (let metric of allMetrics) {
|
||||
// Not Exclusive or Multi-Node: get maxScope directly (mostly: node)
|
||||
// -> Else: Load smallest available granularity as default as per availability
|
||||
const availableScopes = scopesForMetric(metric);
|
||||
if (job.exclusive != 1 || job.numNodes == 1) {
|
||||
if (availableScopes.includes("accelerator")) {
|
||||
selectedScopes[metric] = "accelerator";
|
||||
} else if (availableScopes.includes("core")) {
|
||||
selectedScopes[metric] = "core";
|
||||
} else if (availableScopes.includes("socket")) {
|
||||
selectedScopes[metric] = "socket";
|
||||
} else {
|
||||
selectedScopes[metric] = "node";
|
||||
}
|
||||
} else {
|
||||
selectedScopes[metric] = maxScope(availableScopes);
|
||||
}
|
||||
|
||||
sorting[metric] = {
|
||||
min: { dir: "up", active: false },
|
||||
avg: { dir: "up", active: false },
|
||||
max: { dir: "up", active: false },
|
||||
};
|
||||
}
|
||||
|
||||
function sortBy(metric, stat) {
|
||||
let s = sorting[metric][stat];
|
||||
if (s.active) {
|
||||
s.dir = s.dir == "up" ? "down" : "up";
|
||||
} else {
|
||||
for (let metric in sorting)
|
||||
for (let stat in sorting[metric]) sorting[metric][stat].active = false;
|
||||
s.active = true;
|
||||
}
|
||||
|
||||
let series = jobMetrics.find(
|
||||
(jm) => jm.name == metric && jm.scope == "node",
|
||||
)?.metric.series;
|
||||
sorting = { ...sorting };
|
||||
hosts = hosts.sort((h1, h2) => {
|
||||
let s1 = series.find((s) => s.hostname == h1)?.statistics;
|
||||
let s2 = series.find((s) => s.hostname == h2)?.statistics;
|
||||
if (s1 == null || s2 == null) return -1;
|
||||
|
||||
return s.dir != "up" ? s1[stat] - s2[stat] : s2[stat] - s1[stat];
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Button outline on:click={() => (isMetricSelectionOpen = true)}>
|
||||
Metrics
|
||||
</Button>
|
||||
</th>
|
||||
{#each selectedMetrics as metric}
|
||||
<th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
|
||||
<InputGroup>
|
||||
<InputGroupText>
|
||||
{metric}
|
||||
</InputGroupText>
|
||||
<select class="form-select" bind:value={selectedScopes[metric]}>
|
||||
{#each scopesForMetric(metric, jobMetrics) as scope}
|
||||
<option value={scope}>{scope}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</InputGroup>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Node</th>
|
||||
{#each selectedMetrics as metric}
|
||||
{#if selectedScopes[metric] != "node"}
|
||||
<th>Id</th>
|
||||
{/if}
|
||||
{#each ["min", "avg", "max"] as stat}
|
||||
<th on:click={() => sortBy(metric, stat)}>
|
||||
{stat}
|
||||
{#if selectedScopes[metric] == "node"}
|
||||
<Icon
|
||||
name="caret-{sorting[metric][stat].dir}{sorting[metric][stat]
|
||||
.active
|
||||
? '-fill'
|
||||
: ''}"
|
||||
/>
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each hosts as host (host)}
|
||||
<tr>
|
||||
<th scope="col">{host}</th>
|
||||
{#each selectedMetrics as metric (metric)}
|
||||
<StatsTableEntry
|
||||
{host}
|
||||
{metric}
|
||||
scope={selectedScopes[metric]}
|
||||
{jobMetrics}
|
||||
/>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<br />
|
||||
|
||||
<MetricSelection
|
||||
cluster={job.cluster}
|
||||
configName="job_view_nodestats_selectedMetrics"
|
||||
allMetrics={new Set(allMetrics)}
|
||||
bind:metrics={selectedMetrics}
|
||||
bind:isOpen={isMetricSelectionOpen}
|
||||
/>
|
||||
96
web/frontend/src/job/StatsTableEntry.svelte
Normal file
96
web/frontend/src/job/StatsTableEntry.svelte
Normal file
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
@component Job-View subcomponent; Single Statistics entry component fpr statstable
|
||||
|
||||
Properties:
|
||||
- `host String`: The hostname (== node)
|
||||
- `metric String`: The metric name
|
||||
- `scope String`: The selected scope
|
||||
- `jobMetrics [Object]`: The jobs metricdata
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { Icon } from "@sveltestrap/sveltestrap";
|
||||
|
||||
export let host;
|
||||
export let metric;
|
||||
export let scope;
|
||||
export let jobMetrics;
|
||||
|
||||
function compareNumbers(a, b) {
|
||||
return a.id - b.id;
|
||||
}
|
||||
|
||||
function sortByField(field) {
|
||||
let s = sorting[field];
|
||||
if (s.active) {
|
||||
s.dir = s.dir == "up" ? "down" : "up";
|
||||
} else {
|
||||
for (let field in sorting) sorting[field].active = false;
|
||||
s.active = true;
|
||||
}
|
||||
|
||||
sorting = { ...sorting };
|
||||
series = series.sort((a, b) => {
|
||||
if (a == null || b == null) return -1;
|
||||
|
||||
if (field === "id") {
|
||||
return s.dir != "up" ? a[field] - b[field] : b[field] - a[field];
|
||||
} else {
|
||||
return s.dir != "up"
|
||||
? a.statistics[field] - b.statistics[field]
|
||||
: b.statistics[field] - a.statistics[field];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let sorting = {
|
||||
id: { dir: "down", active: true },
|
||||
min: { dir: "up", active: false },
|
||||
avg: { dir: "up", active: false },
|
||||
max: { dir: "up", active: false },
|
||||
};
|
||||
|
||||
$: series = jobMetrics
|
||||
.find((jm) => jm.name == metric && jm.scope == scope)
|
||||
?.metric.series.filter((s) => s.hostname == host && s.statistics != null)
|
||||
?.sort(compareNumbers);
|
||||
</script>
|
||||
|
||||
{#if series == null || series.length == 0}
|
||||
<td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
|
||||
{:else if series.length == 1 && scope == "node"}
|
||||
<td>
|
||||
{series[0].statistics.min}
|
||||
</td>
|
||||
<td>
|
||||
{series[0].statistics.avg}
|
||||
</td>
|
||||
<td>
|
||||
{series[0].statistics.max}
|
||||
</td>
|
||||
{:else}
|
||||
<td colspan="4">
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
{#each ["id", "min", "avg", "max"] as field}
|
||||
<th on:click={() => sortByField(field)}>
|
||||
Sort
|
||||
<Icon
|
||||
name="caret-{sorting[field].dir}{sorting[field].active
|
||||
? '-fill'
|
||||
: ''}"
|
||||
/>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{#each series as s, i}
|
||||
<tr>
|
||||
<th>{s.id ?? i}</th>
|
||||
<td>{s.statistics.min}</td>
|
||||
<td>{s.statistics.avg}</td>
|
||||
<td>{s.statistics.max}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</td>
|
||||
{/if}
|
||||
238
web/frontend/src/job/TagManagement.svelte
Normal file
238
web/frontend/src/job/TagManagement.svelte
Normal file
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
@component Job View Subcomponent; allows management of job tags by deletion or new entries
|
||||
|
||||
Properties:
|
||||
- `job Object`: The job object
|
||||
- `jobTags [Number]`: The array of currently designated tags
|
||||
-->
|
||||
<script>
|
||||
import { getContext } from "svelte";
|
||||
import { gql, getContextClient, mutationStore } from "@urql/svelte";
|
||||
import {
|
||||
Icon,
|
||||
Button,
|
||||
ListGroupItem,
|
||||
Spinner,
|
||||
Modal,
|
||||
Input,
|
||||
ModalBody,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
Alert,
|
||||
} from "@sveltestrap/sveltestrap";
|
||||
import { fuzzySearchTags } from "../generic/utils.js";
|
||||
import Tag from "../generic/helper/Tag.svelte";
|
||||
|
||||
export let job;
|
||||
export let jobTags = job.tags;
|
||||
|
||||
let allTags = getContext("tags"),
|
||||
initialized = getContext("initialized");
|
||||
let newTagType = "",
|
||||
newTagName = "";
|
||||
let filterTerm = "";
|
||||
let pendingChange = false;
|
||||
let isOpen = false;
|
||||
|
||||
const client = getContextClient();
|
||||
|
||||
const createTagMutation = ({ type, name }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
mutation ($type: String!, $name: String!) {
|
||||
createTag(type: $type, name: $name) {
|
||||
id
|
||||
type
|
||||
name
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { type, name },
|
||||
});
|
||||
};
|
||||
|
||||
const addTagsToJobMutation = ({ job, tagIds }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
mutation ($job: ID!, $tagIds: [ID!]!) {
|
||||
addTagsToJob(job: $job, tagIds: $tagIds) {
|
||||
id
|
||||
type
|
||||
name
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { job, tagIds },
|
||||
});
|
||||
};
|
||||
|
||||
const removeTagsFromJobMutation = ({ job, tagIds }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
mutation ($job: ID!, $tagIds: [ID!]!) {
|
||||
removeTagsFromJob(job: $job, tagIds: $tagIds) {
|
||||
id
|
||||
type
|
||||
name
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { job, tagIds },
|
||||
});
|
||||
};
|
||||
|
||||
let allTagsFiltered; // $initialized is in there because when it becomes true, allTags is initailzed.
|
||||
$: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags));
|
||||
|
||||
$: {
|
||||
newTagType = "";
|
||||
newTagName = "";
|
||||
let parts = filterTerm.split(":").map((s) => s.trim());
|
||||
if (parts.length == 2 && parts.every((s) => s.length > 0)) {
|
||||
newTagType = parts[0];
|
||||
newTagName = parts[1];
|
||||
}
|
||||
}
|
||||
|
||||
function isNewTag(type, name) {
|
||||
for (let tag of allTagsFiltered)
|
||||
if (tag.type == type && tag.name == name) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function createTag(type, name) {
|
||||
pendingChange = true;
|
||||
createTagMutation({ type: type, name: name }).subscribe((res) => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
pendingChange = false;
|
||||
allTags = [...allTags, res.data.createTag];
|
||||
newTagType = "";
|
||||
newTagName = "";
|
||||
addTagToJob(res.data.createTag);
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addTagToJob(tag) {
|
||||
pendingChange = tag.id;
|
||||
addTagsToJobMutation({ job: job.id, tagIds: [tag.id] }).subscribe((res) => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
jobTags = job.tags = res.data.addTagsToJob;
|
||||
pendingChange = false;
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeTagFromJob(tag) {
|
||||
pendingChange = tag.id;
|
||||
removeTagsFromJobMutation({ job: job.id, tagIds: [tag.id] }).subscribe(
|
||||
(res) => {
|
||||
if (res.fetching === false && !res.error) {
|
||||
jobTags = job.tags = res.data.removeTagsFromJob;
|
||||
pendingChange = false;
|
||||
} else if (res.fetching === false && res.error) {
|
||||
throw res.error;
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
|
||||
<ModalHeader>
|
||||
Manage Tags
|
||||
{#if pendingChange !== false}
|
||||
<Spinner size="sm" secondary />
|
||||
{:else}
|
||||
<Icon name="tags" />
|
||||
{/if}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Input
|
||||
style="width: 100%;"
|
||||
type="text"
|
||||
placeholder="Search Tags"
|
||||
bind:value={filterTerm}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<Alert color="info">
|
||||
Search using "<code>type: name</code>". If no tag matches your search, a
|
||||
button for creating a new one will appear.
|
||||
</Alert>
|
||||
|
||||
<ul class="list-group">
|
||||
{#each allTagsFiltered as tag}
|
||||
<ListGroupItem>
|
||||
<Tag {tag} />
|
||||
|
||||
<span style="float: right;">
|
||||
{#if pendingChange === tag.id}
|
||||
<Spinner size="sm" secondary />
|
||||
{:else if job.tags.find((t) => t.id == tag.id)}
|
||||
<Button
|
||||
size="sm"
|
||||
outline
|
||||
color="danger"
|
||||
on:click={() => removeTagFromJob(tag)}
|
||||
>
|
||||
<Icon name="x" />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
size="sm"
|
||||
outline
|
||||
color="success"
|
||||
on:click={() => addTagToJob(tag)}
|
||||
>
|
||||
<Icon name="plus" />
|
||||
</Button>
|
||||
{/if}
|
||||
</span>
|
||||
</ListGroupItem>
|
||||
{:else}
|
||||
<ListGroupItem disabled>
|
||||
<i>No tags matching</i>
|
||||
</ListGroupItem>
|
||||
{/each}
|
||||
</ul>
|
||||
<br />
|
||||
{#if newTagType && newTagName && isNewTag(newTagType, newTagName)}
|
||||
<Button
|
||||
outline
|
||||
color="success"
|
||||
on:click={(e) => (
|
||||
e.preventDefault(), createTag(newTagType, newTagName)
|
||||
)}
|
||||
>
|
||||
Create & Add Tag:
|
||||
<Tag tag={{ type: newTagType, name: newTagName }} clickable={false} />
|
||||
</Button>
|
||||
{:else if allTagsFiltered.length == 0}
|
||||
<Alert>Search Term is not a valid Tag (<code>type: name</code>)</Alert>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="primary" on:click={() => (isOpen = false)}>Close</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<Button outline on:click={() => (isOpen = true)}>
|
||||
Manage Tags <Icon name="tags" />
|
||||
</Button>
|
||||
|
||||
<style>
|
||||
ul.list-group {
|
||||
max-height: 450px;
|
||||
margin-bottom: 10px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user