ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-08-23 18:43:00 +02:00
Code Issues Packages Releases Activity

move and add interface options for status tabs

Browse Source
This commit is contained in:
Christoph Kluge
2025-08-13 14:22:24 +02:00
parent 44d8254a0b
commit 58ae476a3e
7 changed files with 126 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
@component Main cluster status view component; renders current system-usage information
Properties:
- `cluster String`: The cluster to show status information for
- `presetCluster String`: The cluster to show status information for
-->
<script>
@@ -18,78 +18,45 @@
TabPane
} from "@sveltestrap/sveltestrap";
import Refresher from "./generic/helper/Refresher.svelte";
import StatusDash from "./status/StatusDash.svelte";
import UsageDash from "./status/UsageDash.svelte";
import NodeDash from "./status/NodeDash.svelte";
import StatisticsDash from "./status/StatisticsDash.svelte";
import DevelDash from "./status/DevelDash.svelte";
/* Svelte 5 Props */
let {
cluster
presetCluster
} = $props();
/*Const Init */
const useCbColors = getContext("cc-config")?.plot_general_colorblindMode || false
/* State Init */
let from = $state(new Date(Date.now() - 5 * 60 * 1000));
let to = $state(new Date(Date.now()));
</script>
<!-- Loading indicator & Refresh -->
<Row cols={{ xs: 2 }} class="mb-2">
<Row cols={1} class="mb-2">
<Col>
<h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
</Col>
<Col class="mt-2 mt-md-0">
<Refresher
initially={120}
onRefresh={() => {
from = new Date(Date.now() - 5 * 60 * 1000);
to = new Date(Date.now());
}}
/>
<h3 class="mb-0">Current Status of Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</h3>
</Col>
</Row>
<!-- <Row cols={1} class="text-center mt-3">
<Col>
{#if $initq.fetching || $mainQuery.fetching}
<Spinner />
{:else if $initq.error}
<Card body color="danger">{$initq.error.message}</Card>
{/if}
</Col>
</Row>
{#if $mainQuery.error}
<Row cols={1}>
<Col>
<Card body color="danger">{$mainQuery.error.message}</Card>
</Col>
</Row>
{/if} -->
<Card class="overflow-auto" style="height: auto;">
<TabContent>
<TabPane tabId="status-dash" tab="Status" active>
<CardBody>
<StatusDash {cluster} {useCbColors} useAltColors></StatusDash>
<StatusDash {presetCluster} {useCbColors} useAltColors></StatusDash>
</CardBody>
</TabPane>
<TabPane tabId="usage-dash" tab="Usage">
<CardBody>
<UsageDash {cluster} {useCbColors}></UsageDash>
<UsageDash {presetCluster} {useCbColors}></UsageDash>
</CardBody>
</TabPane>
<TabPane tabId="metric-dash" tab="Statistics">
<CardBody>
<StatisticsDash {cluster} {useCbColors}></StatisticsDash>
<StatisticsDash {presetCluster} {useCbColors}></StatisticsDash>
</CardBody>
</TabPane>
</TabContent>

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

@@ -404,6 +404,7 @@
cluster={selectedCluster}
bind:isOpen={isHistogramSelectionOpen}
presetSelectedHistograms={selectedHistograms}
configName="user_view_histogramMetrics"
applyChange={(newSelection) => {
selectedHistogramsBuffer[selectedCluster || 'all'] = [...newSelection];
}}

8
web/frontend/src/generic/select/HistogramSelection.svelte
View File

@@ -3,8 +3,9 @@
Properties:
- `cluster String`: Currently selected cluster
- `selectedHistograms [String]`: The currently selected metrics to display as histogram
- `ìsOpen Bool`: Is selection opened [Bindable]
- `configName String`: The config id string to be updated in database on selection change
- `presetSelectedHistograms [String]`: The currently selected metrics to display as histogram
- `applyChange Func`: The callback function to apply current selection
-->
@@ -25,6 +26,7 @@
let {
cluster,
isOpen = $bindable(),
configName,
presetSelectedHistograms,
applyChange
} = $props();
@@ -67,8 +69,8 @@
applyChange(selectedHistograms)
updateConfiguration({
name: cluster
? `user_view_histogramMetrics:${cluster}`
: "user_view_histogramMetrics",
? `${configName}:${cluster}`
: configName,
value: selectedHistograms,
});
}

2
web/frontend/src/status.entrypoint.js
View File

@@ -5,7 +5,7 @@ import Status from './Status.root.svelte'
mount(Status, {
target: document.getElementById('svelte-app'),
props: {
cluster: infos.cluster,
presetCluster: infos.cluster,
},
context: new Map([
['cc-config', clusterCockpitConfig]

65
web/frontend/src/status/StatisticsDash.svelte
View File

@@ -2,7 +2,7 @@
@component Main cluster status view component; renders current system-usage information
Properties:
- `cluster String`: The cluster to show status information for
- `presetCluster String`: The cluster to show status information for
-->
<script>
@@ -19,7 +19,6 @@
queryStore,
gql,
getContextClient,
// mutationStore,
} from "@urql/svelte";
import {
init,
@@ -28,10 +27,11 @@
import PlotGrid from "../generic/PlotGrid.svelte";
import Histogram from "../generic/plots/Histogram.svelte";
import HistogramSelection from "../generic/select/HistogramSelection.svelte";
import Refresher from "../generic/helper/Refresher.svelte";
/* Svelte 5 Props */
let {
cluster
presetCluster
} = $props();
/* Const Init */
@@ -40,16 +40,17 @@
const client = getContextClient();
/* State Init */
// Histrogram
let cluster = $state(presetCluster);
// Histogram
let isHistogramSelectionOpen = $state(false);
// TODO: Originally Uses User View Selection! -> Change to Status View
let selectedHistograms = $state(cluster
? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
: ccconfig['user_view_histogramMetrics'] || []);
let from = $state(new Date(Date.now() - (30 * 24 * 60 * 60 * 1000))); // Simple way to retrigger GQL: Jobs Started last Month
let to = $state(new Date(Date.now()));
/* Derived */
let selectedHistograms = $derived(cluster
? ccconfig[`status_view_selectedHistograms:${cluster}`] || ( ccconfig['status_view_selectedHistograms'] || [] )
: ccconfig['status_view_selectedHistograms'] || []);
// Note: nodeMetrics are requested on configured $timestep resolution
const metricStatusQuery = $derived(queryStore({
client: client,
@@ -73,43 +74,16 @@
}
`,
variables: {
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
filter: [{ state: ["running"] }, { cluster: { eq: cluster}}, {startTime: { from, to }}],
selectedHistograms: selectedHistograms,
},
}));
/* Functions */
// TODO: Originally Uses User View Selection! -> Change to Status View : Adapt Mutations from TopUserSelect
// function updateTopUserConfiguration(select) {
// if (ccconfig[`status_view_selectedHistograms:${cluster}`] != select) {
// updateConfigurationMutation({
// name: `status_view_selectedHistograms:${cluster}`,
// value: JSON.stringify(select),
// }).subscribe((res) => {
// if (res.fetching === false && res.error) {
// throw res.error;
// }
// });
// }
// };
// const updateConfigurationMutation = ({ name, value }) => {
// return mutationStore({
// client: client,
// query: gql`
// mutation ($name: String!, $value: String!) {
// updateConfiguration(name: $name, value: $value)
// }
// `,
// variables: { name, value },
// });
// };
</script>
<!-- Loading indicators & Metric Sleect -->
<Row cols={{ xs: 1 }}>
<Col class="text-md-end">
<Row class="justify-content-between">
<Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
<Button
outline
color="secondary"
@@ -118,7 +92,17 @@
<Icon name="bar-chart-line" /> Select Histograms
</Button>
</Col>
<Col xs="12" md="5" lg="4" xl="3">
<Refresher
initially={120}
onRefresh={() => {
from = new Date(Date.now() - (30 * 24 * 60 * 60 * 1000)); // Triggers GQL
to = new Date(Date.now());
}}
/>
</Col>
</Row>
<Row cols={1} class="text-center mt-3">
<Col>
{#if $initq.fetching || $metricStatusQuery.fetching}
@@ -168,6 +152,7 @@
{cluster}
bind:isOpen={isHistogramSelectionOpen}
presetSelectedHistograms={selectedHistograms}
configName="status_view_selectedHistograms"
applyChange={(newSelection) => {
selectedHistograms = [...newSelection];
}}

47
web/frontend/src/status/StatusDash.svelte
View File

@@ -2,7 +2,7 @@
@component Main cluster status view component; renders current system-usage information
Properties:
- `cluster String`: The cluster to show status information for
- `presetCluster String`: The cluster to show status information for
-->
<script>
@@ -26,12 +26,13 @@
init,
} from "../generic/utils.js";
import { scaleNumbers, formatTime } from "../generic/units.js";
import Refresher from "../generic/helper/Refresher.svelte";
import Roofline from "../generic/plots/Roofline.svelte";
import Pie, { colors } from "../generic/plots/Pie.svelte";
/* Svelte 5 Props */
let {
cluster,
presetCluster,
useCbColors = false,
useAltColors = false,
} = $props();
@@ -41,10 +42,11 @@
const client = getContextClient();
/* State Init */
let from = $state(new Date(Date.now() - 5 * 60 * 1000));
let to = $state(new Date(Date.now()));
let cluster = $state(presetCluster);
let pieWidth = $state(0);
let plotWidths = $state([]);
let from = $state(new Date(Date.now() - 5 * 60 * 1000));
let to = $state(new Date(Date.now()));
// Bar Gauges
let allocatedNodes = $state({});
let allocatedAccs = $state({});
@@ -232,7 +234,6 @@
});
/* Const Functions */
// New: Sum Up Node Averages
const sumUp = (data, subcluster, metric) =>
data.reduce(
(sum, node) =>
@@ -246,22 +247,6 @@
0,
);
// Old: SumUp Metric Time Data
// const sumUp = (data, subcluster, metric) =>
// data.reduce(
// (sum, node) =>
// node.subCluster == subcluster
// ? sum +
// (node.metrics
// .find((m) => m.name == metric)
// ?.metric.series.reduce(
// (sum, series) => sum + series.data[series.data.length - 1],
// 0,
// ) || 0)
// : sum,
// 0,
// );
/* Functions */
function transformJobsStatsToData(subclusterData) {
/* c will contain values from 0 to 1 representing the duration */
@@ -311,8 +296,7 @@
let intensity = f / m
if (Number.isNaN(intensity) || !Number.isFinite(intensity)) {
// continue // Old: Introduces mismatch between Data and Info Arrays
intensity = 0.0 // New: Set to Float Zero: Will not show in Log-Plot (Always below render limit)
intensity = 0.0 // Set to Float Zero: Will not show in Log-Plot (Always below render limit)
}
x.push(intensity)
@@ -342,8 +326,6 @@
if (subClusterData) { // && $nodesState?.data) {
// Use Nodes as Returned from CCMS, *NOT* as saved in DB via SlurmState-API!
for (let j = 0; j < subClusterData.length; j++) {
// nodesCounts[subClusterData[i].subCluster] = $nodesState.data.nodes.count; // Probably better as own derived!
const nodeName = subClusterData[j]?.host ? subClusterData[j].host : "unknown"
const nodeMatch = $statusQuery?.data?.nodes?.items?.find((n) => n.hostname == nodeName && n.subCluster == subClusterData[j].subCluster);
const nodeState = nodeMatch?.nodeState ? nodeMatch.nodeState : "notindb"
@@ -375,6 +357,21 @@
</script>
<!-- Refresher and space for other options -->
<Row class="justify-content-end">
<Col xs="12" md="5" lg="4" xl="3">
<Refresher
initially={120}
onRefresh={() => {
from = new Date(Date.now() - 5 * 60 * 1000);
to = new Date(Date.now());
}}
/>
</Col>
</Row>
<hr/>
<!-- Node Health Pis, later Charts -->
{#if $initq.data && $nodesStateCounts.data}
<Row cols={{ lg: 4, md: 2 , sm: 1}} class="mb-3 justify-content-center">

86
web/frontend/src/status/UsageDash.svelte
View File

@@ -2,7 +2,7 @@
@component Main cluster status view component; renders current system-usage information
Properties:
- `cluster String`: The cluster to show status information for
- `presetCluster String`: The cluster to show status information for
-->
<script>
@@ -13,7 +13,10 @@
Card,
Table,
Icon,
Tooltip
Tooltip,
Input,
InputGroup,
InputGroupText
} from "@sveltestrap/sveltestrap";
import {
queryStore,
@@ -28,10 +31,11 @@
} from "../generic/utils.js";
import Pie, { colors } from "../generic/plots/Pie.svelte";
import Histogram from "../generic/plots/Histogram.svelte";
import Refresher from "../generic/helper/Refresher.svelte";
/* Svelte 5 Props */
let {
cluster,
presetCluster,
useCbColors = false,
useAltColors = false
} = $props();
@@ -39,11 +43,16 @@
/* Const Init */
const { query: initq } = init();
const client = getContextClient();
const durationBinOptions = ["1m","10m","1h","6h","12h"];
/* State Init */
let cluster = $state(presetCluster)
let from = $state(new Date(Date.now() - (30 * 24 * 60 * 60 * 1000))); // Simple way to retrigger GQL: Jobs Started last Month
let to = $state(new Date(Date.now()));
let colWidthJobs = $state(0);
let colWidthNodes = $state(0);
let colWidthAccs = $state(0);
let numDurationBins = $state("1h");
/* Derived */
const topJobsQuery = $derived(queryStore({
@@ -75,7 +84,7 @@
}
`,
variables: {
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
filter: [{ state: ["running"] }, { cluster: { eq: cluster}}, {startTime: { from, to }}],
paging: { itemsPerPage: 10, page: 1 } // Top 10
},
}));
@@ -109,7 +118,7 @@
}
`,
variables: {
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
filter: [{ state: ["running"] }, { cluster: { eq: cluster }}, {startTime: { from, to }}],
paging: { itemsPerPage: 10, page: 1 } // Top 10
},
}));
@@ -143,7 +152,7 @@
}
`,
variables: {
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
filter: [{ state: ["running"] }, { cluster: { eq: cluster }}, {startTime: { from, to }}],
paging: { itemsPerPage: 10, page: 1 } // Top 10
},
}));
@@ -155,8 +164,9 @@
query (
$filter: [JobFilter!]!
$selectedHistograms: [String!]
$numDurationBins: String
) {
jobsStatistics(filter: $filter, metrics: $selectedHistograms) {
jobsStatistics(filter: $filter, metrics: $selectedHistograms, numDurationBins: $numDurationBins) {
histDuration {
count
value
@@ -173,8 +183,9 @@
}
`,
variables: {
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
filter: [{ state: ["running"] }, { cluster: { eq: cluster }}, {startTime: { from, to }}],
selectedHistograms: [], // No Metrics requested for node hardware stats
numDurationBins: numDurationBins,
},
}));
@@ -191,25 +202,58 @@
}
return c[(c.length + targetIdx) % c.length];
}
</script>
<!-- Refresher and space for other options -->
<Row class="justify-content-between">
<Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
<InputGroup>
<InputGroupText>
<Icon name="bar-chart-line-fill" />
</InputGroupText>
<InputGroupText>
Duration Bin Size
</InputGroupText>
<Input type="select" bind:value={numDurationBins}>
{#each durationBinOptions as dbin}
<option value={dbin}>{dbin}</option>
{/each}
</Input>
</InputGroup>
</Col>
<Col xs="12" md="5" lg="4" xl="3">
<Refresher
initially={120}
onRefresh={() => {
from = new Date(Date.now() - (30 * 24 * 60 * 60 * 1000)); // Triggers GQL
to = new Date(Date.now());
}}
/>
</Col>
</Row>
<hr/>
<!-- Job Duration, Top Users and Projects-->
{#if $topJobsQuery.fetching || $nodeStatusQuery.fetching}
<Spinner />
{:else if $topJobsQuery.data && $nodeStatusQuery.data}
<Row>
<Col xs="12" lg="4" class="p-2">
<Histogram
data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histDuration)}
title="Duration Distribution"
xlabel="Current Job Runtimes"
xunit="Runtime"
ylabel="Number of Jobs"
yunit="Jobs"
height="275"
usesBins
xtime
/>
{#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
<Histogram
data={convert2uplot($nodeStatusQuery.data.jobsStatistics[0].histDuration)}
title="Duration Distribution"
xlabel="Current Job Runtimes"
xunit="Runtime"
ylabel="Number of Jobs"
yunit="Jobs"
height="275"
usesBins
xtime
/>
{/key}
</Col>
<Col xs="6" md="3" lg="2" class="p-2">
<div bind:clientWidth={colWidthJobs}>
@@ -233,7 +277,7 @@
<tr class="mb-2">
<th></th>
<th style="padding-left: 0.5rem;">User</th>
<th>Active Jobs</th>
<th>Jobs</th>
</tr>
{#each $topJobsQuery.data.topUser as tu, i}
<tr>
@@ -276,7 +320,7 @@
<tr class="mb-2">
<th></th>
<th style="padding-left: 0.5rem;">Project</th>
<th>Active Jobs</th>
<th>Jobs</th>
</tr>
{#each $topJobsQuery.data.topProjects as tp, i}
<tr>