ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-11-03 09:05:07 +01:00
Code Issues Packages Releases Activity

Update component header, format, streamline SV5 components

Browse Source
This commit is contained in:
Christoph Kluge
2025-07-02 18:43:25 +02:00
parent dd48f5ab87
commit 60ec7e54f5
76 changed files with 2070 additions and 1988 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/frontend/src/generic/helper/ConcurrentJobs.svelte
View File

@@ -1,13 +1,13 @@
<!--
@component Concurrent Jobs Component; Lists all concurrent jobs in one scrollable card.
@component Concurrent Jobs Component; Lists all concurrent jobs in one scrollable card.
Properties:
- `cJobs JobLinkResultList`: List of concurrent Jobs
- `showLinks Bool?`: Show list as clickable links [Default: false]
- `renderCard Bool?`: If to render component as content only or with card wrapping [Default: true]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px']
-->
Properties:
- `cJobs JobLinkResultList`: List of concurrent Jobs
- `showLinks Bool?`: Show list as clickable links [Default: false]
- `renderCard Bool?`: If to render component as content only or with card wrapping [Default: false]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '400px']
-->
<script>
import {
@@ -30,12 +30,12 @@
{#if renderCard}
<Card class="overflow-auto" style="width: {width}; height: {height}">
<CardHeader class="mb-0 d-flex justify-content-center">
{cJobs.items.length} Concurrent Jobs
<Icon
style="cursor:help; margin-left:0.5rem;"
name="info-circle"
title="Jobs running on the same node with overlapping runtimes using shared resources"
/>
{cJobs.items.length} Concurrent Jobs
<Icon
style="cursor:help; margin-left:0.5rem;"
name="info-circle"
title="Jobs running on the same node with overlapping runtimes using shared resources"
/>
</CardHeader>
<CardBody>
{#if showLinks}

14
web/frontend/src/generic/helper/JobFootprint.svelte
View File

@@ -1,12 +1,12 @@
<!--
@component Footprint component; Displays job.footprint data as bars in relation to thresholds
@component Footprint component; Displays job.footprint data as bars in relation to thresholds
Properties:
- `job Object`: The GQL job object
- `displayTitle Bool?`: If to display cardHeader with title [Default: true]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px']
-->
Properties:
- `job Object`: The GQL job object
- `displayTitle Bool?`: If to display cardHeader with title [Default: true]
- `width String?`: Width of the card [Default: 'auto']
- `height String?`: Height of the card [Default: '310px']
-->
<script>
import { getContext } from "svelte";

12
web/frontend/src/generic/helper/Refresher.svelte
View File

@@ -1,12 +1,12 @@
<!--
@component Triggers upstream data refresh in selectable intervals
@component Triggers upstream data refresh in selectable intervals
Properties:
- `initially Number?`: Initial refresh interval on component mount, in seconds [Default: null]
Properties:
- `initially Number?`: Initial refresh interval on component mount, in seconds [Default: null]
- `presetClass String?`: Custom class to apply to main <InputGroup>
- `onRefresh Func`: The callback function to perform at refresh times
-->
Events:
- `refresh`: When fired, the upstream component refreshes its contents
-->
<script>
import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";

100
web/frontend/src/generic/helper/Tag.svelte
View File

@@ -1,63 +1,63 @@
<!--
@component Single tag pill component
@component Single tag pill component
Properties:
- id: ID! (if the tag-id is known but not the tag type/name, this can be used)
- tag: { id: ID!, type: String, name: String }
- clickable: Boolean (default is true)
-->
Properties:
- `id ID!`: (if the tag-id is known but not the tag type/name, this can be used)
- `tag Object`: The tag Object
- `clickable Bool`: If tag should be click reactive [Default: true]
-->
<script>
import { getContext } from 'svelte'
/* Svelte 5 Props */
let {
id = null,
tag = null,
clickable = true
} = $props();
import { getContext } from 'svelte'
/* Svelte 5 Props */
let {
id = null,
tag = null,
clickable = true
} = $props();
/* Derived */
const allTags = $derived(getContext('tags'));
const initialized = $derived(getContext('initialized'));
/* Derived */
const allTags = $derived(getContext('tags'));
const initialized = $derived(getContext('initialized'));
/* Effects */
$effect(() => {
if (tag != null && id == null)
id = tag.id
});
/* Effects */
$effect(() => {
if (tag != null && id == null)
id = tag.id
});
$effect(() => {
if ($initialized && tag == null)
tag = allTags.find(tag => tag.id == id)
});
$effect(() => {
if ($initialized && tag == null)
tag = allTags.find(tag => tag.id == id)
});
/* Function*/
function getScopeColor(scope) {
switch (scope) {
case "admin":
return "#19e5e6";
case "global":
return "#c85fc8";
default:
return "#ffc107";
}
/* Function*/
function getScopeColor(scope) {
switch (scope) {
case "admin":
return "#19e5e6";
case "global":
return "#c85fc8";
default:
return "#ffc107";
}
}
</script>
<style>
a {
margin-right: 0.5rem;
}
span {
font-size: 0.9rem;
}
</style>
<a target={clickable ? "_blank" : null} href={clickable ? `/monitoring/jobs/?tag=${id}` : null}>
{#if tag}
<span style="background-color:{getScopeColor(tag?.scope)};" class="my-1 badge text-dark">{tag.type}: {tag.name}</span>
{:else}
Loading...
{/if}
{#if tag}
<span style="background-color:{getScopeColor(tag?.scope)};" class="my-1 badge text-dark">{tag.type}: {tag.name}</span>
{:else}
Loading...
{/if}
</a>
<style>
a {
margin-right: 0.5rem;
}
span {
font-size: 0.9rem;
}
</style>

19
web/frontend/src/generic/helper/TagManagement.svelte
View File

@@ -1,14 +1,15 @@
<!--
@component Job Info Subcomponent; allows management of job tags by deletion or new entries
@component Job Info Subcomponent; allows management of job tags by deletion or new entries
Properties:
- `jobTags [Number]`: The array of currently designated tags [Bindable]
- `job Object`: The job object
- `username String`: Empty string if auth. is disabled, otherwise the username as string
- `authlevel Number`: The current users authentication level
- `roles [Number]`: Enum containing available roles
- `renderModal Bool?`: If component is rendered as bootstrap modal button [Default: true]
-->
Properties:
- `job Object`: The job object
- `jobTags [Number]`: The array of currently designated tags
- `username String`: Empty string if auth. is disabled, otherwise the username as string
- `authlevel Number`: The current users authentication level
- `roles [Number]`: Enum containing available roles
- `renderModal Bool?`: If component is rendered as bootstrap modal button [Default: true]
-->
<script>
import { getContext } from "svelte";
import { gql, getContextClient, mutationStore } from "@urql/svelte";

16
web/frontend/src/generic/helper/TextFilter.svelte
View File

@@ -1,14 +1,12 @@
<!--
@component Search Field for Job-Lists with separate mode if project filter is active
@component Search Field for Job-Lists with separate mode if project filter is active
Properties:
- `presetProject String?`: Currently active project filter [Default: '']
- `authlevel Number?`: The current users authentication level [Default: null]
- `roles [Number]?`: Enum containing available roles [Default: null]
Events:
- `set-filter, {String?, String?, String?}`: Set 'user, project, jobName' filter in upstream component
-->
Properties:
- `presetProject String?`: Currently active project filter [Default: '']
- `authlevel Number?`: The current users authentication level [Default: null]
- `roles [Number]?`: Enum containing available roles [Default: null]
- `setFilter Func`: The callback function to apply current filter selection
-->
<script>
import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";