mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2026-03-19 06:17:29 +01:00
Merge pull request #453 from ClusterCockpit/status_dashboard
Status dashboard
This commit is contained in:
Jan Eitzinger
GitHub
@@ -164,6 +164,13 @@ type JobMetricWithName {
|
|||||||
metric: JobMetric!
|
metric: JobMetric!
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ClusterMetricWithName {
|
||||||
|
name: String!
|
||||||
|
unit: Unit
|
||||||
|
timestep: Int!
|
||||||
|
data: [NullableFloat!]!
|
||||||
|
}
|
||||||
|
|
||||||
type JobMetric {
|
type JobMetric {
|
||||||
unit: Unit
|
unit: Unit
|
||||||
timestep: Int!
|
timestep: Int!
|
||||||
@@ -267,6 +274,11 @@ type NodeMetrics {
|
|||||||
metrics: [JobMetricWithName!]!
|
metrics: [JobMetricWithName!]!
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ClusterMetrics {
|
||||||
|
nodeCount: Int!
|
||||||
|
metrics: [ClusterMetricWithName!]!
|
||||||
|
}
|
||||||
|
|
||||||
type NodesResultList {
|
type NodesResultList {
|
||||||
items: [NodeMetrics!]!
|
items: [NodeMetrics!]!
|
||||||
offset: Int
|
offset: Int
|
||||||
@@ -385,6 +397,13 @@ type Query {
|
|||||||
page: PageRequest
|
page: PageRequest
|
||||||
resolution: Int
|
resolution: Int
|
||||||
): NodesResultList!
|
): NodesResultList!
|
||||||
|
|
||||||
|
clusterMetrics(
|
||||||
|
cluster: String!
|
||||||
|
metrics: [String!]
|
||||||
|
from: Time!
|
||||||
|
to: Time!
|
||||||
|
): ClusterMetrics!
|
||||||
}
|
}
|
||||||
|
|
||||||
type Mutation {
|
type Mutation {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,18 @@ import (
|
|||||||
"github.com/ClusterCockpit/cc-lib/schema"
|
"github.com/ClusterCockpit/cc-lib/schema"
|
||||||
)
|
)
|
||||||
|
|
||||||
|
type ClusterMetricWithName struct {
|
||||||
|
Name string `json:"name"`
|
||||||
|
Unit *schema.Unit `json:"unit,omitempty"`
|
||||||
|
Timestep int `json:"timestep"`
|
||||||
|
Data []schema.Float `json:"data"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type ClusterMetrics struct {
|
||||||
|
NodeCount int `json:"nodeCount"`
|
||||||
|
Metrics []*ClusterMetricWithName `json:"metrics"`
|
||||||
|
}
|
||||||
|
|
||||||
type Count struct {
|
type Count struct {
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
Count int `json:"count"`
|
Count int `json:"count"`
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
package graph
|
package graph
|
||||||
|
|
||||||
// This file will be automatically regenerated based on the schema, any resolver implementations
|
// This file will be automatically regenerated based on the schema, any resolver
|
||||||
|
// implementations
|
||||||
// will be copied through when generating and any unknown code will be moved to the end.
|
// will be copied through when generating and any unknown code will be moved to the end.
|
||||||
// Code generated by github.com/99designs/gqlgen version v0.17.81
|
// Code generated by github.com/99designs/gqlgen version v0.17.84
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"context"
|
"context"
|
||||||
"errors"
|
"errors"
|
||||||
"fmt"
|
"fmt"
|
||||||
|
"math"
|
||||||
"regexp"
|
"regexp"
|
||||||
"slices"
|
"slices"
|
||||||
"strconv"
|
"strconv"
|
||||||
@@ -973,6 +975,85 @@ func (r *queryResolver) NodeMetricsList(ctx context.Context, cluster string, sub
|
|||||||
return nodeMetricsListResult, nil
|
return nodeMetricsListResult, nil
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ClusterMetrics is the resolver for the clusterMetrics field.
|
||||||
|
func (r *queryResolver) ClusterMetrics(ctx context.Context, cluster string, metrics []string, from time.Time, to time.Time) (*model.ClusterMetrics, error) {
|
||||||
|
user := repository.GetUserFromContext(ctx)
|
||||||
|
if user != nil && !user.HasAnyRole([]schema.Role{schema.RoleAdmin, schema.RoleSupport}) {
|
||||||
|
return nil, errors.New("you need to be administrator or support staff for this query")
|
||||||
|
}
|
||||||
|
|
||||||
|
if metrics == nil {
|
||||||
|
for _, mc := range archive.GetCluster(cluster).MetricConfig {
|
||||||
|
metrics = append(metrics, mc.Name)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 'nodes' == nil -> Defaults to all nodes of cluster for existing query workflow
|
||||||
|
scopes := []schema.MetricScope{"node"}
|
||||||
|
data, err := metricDataDispatcher.LoadNodeData(cluster, metrics, nil, scopes, from, to, ctx)
|
||||||
|
if err != nil {
|
||||||
|
cclog.Warn("error while loading node data")
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
clusterMetricData := make([]*model.ClusterMetricWithName, 0)
|
||||||
|
clusterMetrics := model.ClusterMetrics{NodeCount: 0, Metrics: clusterMetricData}
|
||||||
|
|
||||||
|
collectorTimestep := make(map[string]int)
|
||||||
|
collectorUnit := make(map[string]schema.Unit)
|
||||||
|
collectorData := make(map[string][]schema.Float)
|
||||||
|
|
||||||
|
for _, metrics := range data {
|
||||||
|
clusterMetrics.NodeCount += 1
|
||||||
|
for metric, scopedMetrics := range metrics {
|
||||||
|
_, ok := collectorData[metric]
|
||||||
|
if !ok {
|
||||||
|
collectorData[metric] = make([]schema.Float, 0)
|
||||||
|
for _, scopedMetric := range scopedMetrics {
|
||||||
|
// Collect Info
|
||||||
|
collectorTimestep[metric] = scopedMetric.Timestep
|
||||||
|
collectorUnit[metric] = scopedMetric.Unit
|
||||||
|
// Collect Initial Data
|
||||||
|
for _, ser := range scopedMetric.Series {
|
||||||
|
for _, val := range ser.Data {
|
||||||
|
collectorData[metric] = append(collectorData[metric], val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Sum up values by index
|
||||||
|
for _, scopedMetric := range scopedMetrics {
|
||||||
|
// For This Purpose (Cluster_Wide-Sum of Node Metrics) OK
|
||||||
|
for _, ser := range scopedMetric.Series {
|
||||||
|
for i, val := range ser.Data {
|
||||||
|
collectorData[metric][i] += val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for metricName, data := range collectorData {
|
||||||
|
cu := collectorUnit[metricName]
|
||||||
|
roundedData := make([]schema.Float, 0)
|
||||||
|
for _, val := range data {
|
||||||
|
roundedData = append(roundedData, schema.Float((math.Round(float64(val)*100.0) / 100.0)))
|
||||||
|
}
|
||||||
|
|
||||||
|
cm := model.ClusterMetricWithName{
|
||||||
|
Name: metricName,
|
||||||
|
Unit: &cu,
|
||||||
|
Timestep: collectorTimestep[metricName],
|
||||||
|
Data: roundedData,
|
||||||
|
}
|
||||||
|
|
||||||
|
clusterMetrics.Metrics = append(clusterMetrics.Metrics, &cm)
|
||||||
|
}
|
||||||
|
|
||||||
|
return &clusterMetrics, nil
|
||||||
|
}
|
||||||
|
|
||||||
// NumberOfNodes is the resolver for the numberOfNodes field.
|
// NumberOfNodes is the resolver for the numberOfNodes field.
|
||||||
func (r *subClusterResolver) NumberOfNodes(ctx context.Context, obj *schema.SubCluster) (int, error) {
|
func (r *subClusterResolver) NumberOfNodes(ctx context.Context, obj *schema.SubCluster) (int, error) {
|
||||||
nodeList, err := archive.ParseNodeList(obj.Nodes)
|
nodeList, err := archive.ParseNodeList(obj.Nodes)
|
||||||
|
|||||||
@@ -47,7 +47,9 @@ var routes []Route = []Route{
|
|||||||
{"/monitoring/systems/list/{cluster}/{subcluster}", "monitoring/systems.tmpl", "Cluster <ID> <SID> Node List - ClusterCockpit", false, setupClusterListRoute},
|
{"/monitoring/systems/list/{cluster}/{subcluster}", "monitoring/systems.tmpl", "Cluster <ID> <SID> Node List - ClusterCockpit", false, setupClusterListRoute},
|
||||||
{"/monitoring/node/{cluster}/{hostname}", "monitoring/node.tmpl", "Node <ID> - ClusterCockpit", false, setupNodeRoute},
|
{"/monitoring/node/{cluster}/{hostname}", "monitoring/node.tmpl", "Node <ID> - ClusterCockpit", false, setupNodeRoute},
|
||||||
{"/monitoring/analysis/{cluster}", "monitoring/analysis.tmpl", "Analysis - ClusterCockpit", true, setupAnalysisRoute},
|
{"/monitoring/analysis/{cluster}", "monitoring/analysis.tmpl", "Analysis - ClusterCockpit", true, setupAnalysisRoute},
|
||||||
{"/monitoring/status/{cluster}", "monitoring/status.tmpl", "Status of <ID> - ClusterCockpit", false, setupClusterStatusRoute},
|
{"/monitoring/status/{cluster}", "monitoring/status.tmpl", "<ID> Dashboard - ClusterCockpit", false, setupClusterStatusRoute},
|
||||||
|
{"/monitoring/status/detail/{cluster}", "monitoring/status.tmpl", "Status of <ID> - ClusterCockpit", false, setupClusterDetailRoute},
|
||||||
|
{"/monitoring/dashboard/{cluster}", "monitoring/dashboard.tmpl", "<ID> Dashboard - ClusterCockpit", false, setupDashboardRoute},
|
||||||
}
|
}
|
||||||
|
|
||||||
func setupHomeRoute(i InfoType, r *http.Request) InfoType {
|
func setupHomeRoute(i InfoType, r *http.Request) InfoType {
|
||||||
@@ -117,11 +119,23 @@ func setupClusterStatusRoute(i InfoType, r *http.Request) InfoType {
|
|||||||
vars := mux.Vars(r)
|
vars := mux.Vars(r)
|
||||||
i["id"] = vars["cluster"]
|
i["id"] = vars["cluster"]
|
||||||
i["cluster"] = vars["cluster"]
|
i["cluster"] = vars["cluster"]
|
||||||
from, to := r.URL.Query().Get("from"), r.URL.Query().Get("to")
|
i["displayType"] = "DASHBOARD"
|
||||||
if from != "" || to != "" {
|
return i
|
||||||
i["from"] = from
|
}
|
||||||
i["to"] = to
|
|
||||||
}
|
func setupClusterDetailRoute(i InfoType, r *http.Request) InfoType {
|
||||||
|
vars := mux.Vars(r)
|
||||||
|
i["id"] = vars["cluster"]
|
||||||
|
i["cluster"] = vars["cluster"]
|
||||||
|
i["displayType"] = "DETAILS"
|
||||||
|
return i
|
||||||
|
}
|
||||||
|
|
||||||
|
func setupDashboardRoute(i InfoType, r *http.Request) InfoType {
|
||||||
|
vars := mux.Vars(r)
|
||||||
|
i["id"] = vars["cluster"]
|
||||||
|
i["cluster"] = vars["cluster"]
|
||||||
|
i["displayType"] = "PUBLIC" // Used in Main Template
|
||||||
return i
|
return i
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -74,5 +74,6 @@ export default [
|
|||||||
entrypoint('node', 'src/node.entrypoint.js'),
|
entrypoint('node', 'src/node.entrypoint.js'),
|
||||||
entrypoint('analysis', 'src/analysis.entrypoint.js'),
|
entrypoint('analysis', 'src/analysis.entrypoint.js'),
|
||||||
entrypoint('status', 'src/status.entrypoint.js'),
|
entrypoint('status', 'src/status.entrypoint.js'),
|
||||||
|
entrypoint('dashpublic', 'src/dashpublic.entrypoint.js'),
|
||||||
entrypoint('config', 'src/config.entrypoint.js')
|
entrypoint('config', 'src/config.entrypoint.js')
|
||||||
];
|
];
|
||||||
|
|||||||
565
web/frontend/src/DashPublic.root.svelte
Normal file
565
web/frontend/src/DashPublic.root.svelte
Normal file
@@ -0,0 +1,565 @@
|
|||||||
|
<!--
|
||||||
|
@component Main cluster status view component; renders current system-usage information
|
||||||
|
|
||||||
|
Properties:
|
||||||
|
- `presetCluster String`: The cluster to show status information for
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import {
|
||||||
|
// getContext
|
||||||
|
// } from "svelte"
|
||||||
|
import {
|
||||||
|
queryStore,
|
||||||
|
gql,
|
||||||
|
getContextClient,
|
||||||
|
} from "@urql/svelte";
|
||||||
|
import {
|
||||||
|
init,
|
||||||
|
} from "./generic/utils.js";
|
||||||
|
import {
|
||||||
|
formatNumber,
|
||||||
|
} from "./generic/units.js";
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
Spinner,
|
||||||
|
Table,
|
||||||
|
Progress,
|
||||||
|
Icon,
|
||||||
|
} from "@sveltestrap/sveltestrap";
|
||||||
|
import Roofline from "./generic/plots/Roofline.svelte";
|
||||||
|
import Pie, { colors } from "./generic/plots/Pie.svelte";
|
||||||
|
import Stacked from "./generic/plots/Stacked.svelte";
|
||||||
|
import DoubleMetric from "./generic/plots/DoubleMetricPlot.svelte";
|
||||||
|
import Refresher from "./generic/helper/Refresher.svelte";
|
||||||
|
|
||||||
|
/* Svelte 5 Props */
|
||||||
|
let {
|
||||||
|
presetCluster,
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
/*Const Init */
|
||||||
|
const { query: initq } = init();
|
||||||
|
const client = getContextClient();
|
||||||
|
// const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
|
||||||
|
|
||||||
|
/* States */
|
||||||
|
let from = $state(new Date(Date.now() - (5 * 60 * 1000)));
|
||||||
|
let clusterFrom = $state(new Date(Date.now() - (8 * 60 * 60 * 1000)));
|
||||||
|
let to = $state(new Date(Date.now()));
|
||||||
|
let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
|
||||||
|
let colWidthStates = $state(0);
|
||||||
|
let colWidthRoof = $state(0);
|
||||||
|
let colWidthTotals = $state(0);
|
||||||
|
let colWidthStacked = $state(0);
|
||||||
|
|
||||||
|
/* Derived */
|
||||||
|
// States for Stacked charts
|
||||||
|
const statesTimed = $derived(queryStore({
|
||||||
|
client: client,
|
||||||
|
query: gql`
|
||||||
|
query ($filter: [NodeFilter!], $type: String!) {
|
||||||
|
nodeStatesTimed(filter: $filter, type: $type) {
|
||||||
|
state
|
||||||
|
counts
|
||||||
|
times
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
filter: { cluster: { eq: presetCluster }, timeStart: stackedFrom},
|
||||||
|
type: "node",
|
||||||
|
},
|
||||||
|
requestPolicy: "network-only"
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Note: nodeMetrics are requested on configured $timestep resolution
|
||||||
|
// Result: The latest 5 minutes (datapoints) for each node independent of job
|
||||||
|
const statusQuery = $derived(queryStore({
|
||||||
|
client: client,
|
||||||
|
query: gql`
|
||||||
|
query (
|
||||||
|
$cluster: String!
|
||||||
|
$metrics: [String!]
|
||||||
|
$from: Time!
|
||||||
|
$to: Time!
|
||||||
|
$clusterFrom: Time!
|
||||||
|
$jobFilter: [JobFilter!]!
|
||||||
|
$nodeFilter: [NodeFilter!]!
|
||||||
|
$paging: PageRequest!
|
||||||
|
$sorting: OrderByInput!
|
||||||
|
) {
|
||||||
|
# Node 5 Minute Averages for Roofline
|
||||||
|
nodeMetrics(
|
||||||
|
cluster: $cluster
|
||||||
|
metrics: $metrics
|
||||||
|
from: $from
|
||||||
|
to: $to
|
||||||
|
) {
|
||||||
|
host
|
||||||
|
subCluster
|
||||||
|
metrics {
|
||||||
|
name
|
||||||
|
metric {
|
||||||
|
series {
|
||||||
|
statistics {
|
||||||
|
avg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
# Running Job Metric Average for Rooflines
|
||||||
|
jobsMetricStats(filter: $jobFilter, metrics: $metrics) {
|
||||||
|
id
|
||||||
|
jobId
|
||||||
|
duration
|
||||||
|
numNodes
|
||||||
|
numAccelerators
|
||||||
|
subCluster
|
||||||
|
stats {
|
||||||
|
name
|
||||||
|
data {
|
||||||
|
avg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
# Get Jobs for Per-Node Counts
|
||||||
|
jobs(filter: $jobFilter, order: $sorting, page: $paging) {
|
||||||
|
items {
|
||||||
|
jobId
|
||||||
|
resources {
|
||||||
|
hostname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
count
|
||||||
|
}
|
||||||
|
# Only counts shared nodes once
|
||||||
|
allocatedNodes(cluster: $cluster) {
|
||||||
|
name
|
||||||
|
count
|
||||||
|
}
|
||||||
|
# Get Current States fir Pie Charts
|
||||||
|
nodeStates(filter: $nodeFilter) {
|
||||||
|
state
|
||||||
|
count
|
||||||
|
}
|
||||||
|
# Get States for Node Roofline; $sorting unused in backend: Use placeholder
|
||||||
|
nodes(filter: $nodeFilter, order: $sorting) {
|
||||||
|
count
|
||||||
|
items {
|
||||||
|
hostname
|
||||||
|
cluster
|
||||||
|
subCluster
|
||||||
|
schedulerState
|
||||||
|
}
|
||||||
|
}
|
||||||
|
# totalNodes includes multiples if shared jobs: Info-Card Data
|
||||||
|
jobsStatistics(
|
||||||
|
filter: $jobFilter
|
||||||
|
page: $paging
|
||||||
|
sortBy: TOTALJOBS
|
||||||
|
groupBy: SUBCLUSTER
|
||||||
|
) {
|
||||||
|
id
|
||||||
|
totalJobs
|
||||||
|
totalUsers
|
||||||
|
totalCores
|
||||||
|
totalAccs
|
||||||
|
}
|
||||||
|
# ClusterMetrics for doubleMetricPlot
|
||||||
|
clusterMetrics(
|
||||||
|
cluster: $cluster
|
||||||
|
metrics: $metrics
|
||||||
|
from: $clusterFrom
|
||||||
|
to: $to
|
||||||
|
) {
|
||||||
|
nodeCount
|
||||||
|
metrics {
|
||||||
|
name
|
||||||
|
unit {
|
||||||
|
prefix
|
||||||
|
base
|
||||||
|
}
|
||||||
|
timestep
|
||||||
|
data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
cluster: presetCluster,
|
||||||
|
metrics: ["flops_any", "mem_bw"], // Metrics For Cluster Plot and Roofline
|
||||||
|
from: from.toISOString(),
|
||||||
|
clusterFrom: clusterFrom.toISOString(),
|
||||||
|
to: to.toISOString(),
|
||||||
|
jobFilter: [{ state: ["running"] }, { cluster: { eq: presetCluster } }],
|
||||||
|
nodeFilter: { cluster: { eq: presetCluster }},
|
||||||
|
paging: { itemsPerPage: -1, page: 1 }, // Get all: -1
|
||||||
|
sorting: { field: "startTime", type: "col", order: "DESC" }
|
||||||
|
},
|
||||||
|
requestPolicy: "network-only"
|
||||||
|
}));
|
||||||
|
|
||||||
|
const clusterInfo = $derived.by(() => {
|
||||||
|
if ($initq?.data?.clusters) {
|
||||||
|
let rawInfos = {};
|
||||||
|
let subClusters = $initq?.data?.clusters?.find((c) => c.name == presetCluster)?.subClusters || [];
|
||||||
|
for (let subCluster of subClusters) {
|
||||||
|
// Allocations
|
||||||
|
if (!rawInfos['allocatedNodes']) rawInfos['allocatedNodes'] = $statusQuery?.data?.allocatedNodes?.find(({ name }) => name == subCluster.name)?.count || 0;
|
||||||
|
else rawInfos['allocatedNodes'] += $statusQuery?.data?.allocatedNodes?.find(({ name }) => name == subCluster.name)?.count || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['allocatedCores']) rawInfos['allocatedCores'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalCores || 0;
|
||||||
|
else rawInfos['allocatedCores'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalCores || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['allocatedAccs']) rawInfos['allocatedAccs'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalAccs || 0;
|
||||||
|
else rawInfos['allocatedAccs'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalAccs || 0;
|
||||||
|
|
||||||
|
// Infos
|
||||||
|
if (!rawInfos['processorTypes']) rawInfos['processorTypes'] = subCluster?.processorType ? new Set([subCluster.processorType]) : new Set([]);
|
||||||
|
else rawInfos['processorTypes'].add(subCluster.processorType);
|
||||||
|
|
||||||
|
if (!rawInfos['activeUsers']) rawInfos['activeUsers'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalUsers || 0;
|
||||||
|
else rawInfos['activeUsers'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalUsers || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['runningJobs']) rawInfos['runningJobs'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalJobs || 0;
|
||||||
|
else rawInfos['runningJobs'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalJobs || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalNodes']) rawInfos['totalNodes'] = subCluster?.numberOfNodes || 0;
|
||||||
|
else rawInfos['totalNodes'] += subCluster?.numberOfNodes || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalCores']) rawInfos['totalCores'] = (subCluster?.socketsPerNode * subCluster?.coresPerSocket * subCluster?.numberOfNodes) || 0;
|
||||||
|
else rawInfos['totalCores'] += (subCluster?.socketsPerNode * subCluster?.coresPerSocket * subCluster?.numberOfNodes) || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalAccs']) rawInfos['totalAccs'] = (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
|
||||||
|
else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
|
||||||
|
|
||||||
|
// Units (Set Once)
|
||||||
|
if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base
|
||||||
|
if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base
|
||||||
|
|
||||||
|
// Get Maxima For Roofline Knee Render
|
||||||
|
if (!rawInfos['roofData']) {
|
||||||
|
rawInfos['roofData'] = {
|
||||||
|
flopRateScalar: {value: subCluster.flopRateScalar.value},
|
||||||
|
flopRateSimd: {value: subCluster.flopRateSimd.value},
|
||||||
|
memoryBandwidth: {value: subCluster.memoryBandwidth.value}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
rawInfos['roofData']['flopRateScalar']['value'] = Math.max(rawInfos['roofData']['flopRateScalar']['value'], subCluster.flopRateScalar.value)
|
||||||
|
rawInfos['roofData']['flopRateSimd']['value'] = Math.max(rawInfos['roofData']['flopRateSimd']['value'], subCluster.flopRateSimd.value)
|
||||||
|
rawInfos['roofData']['memoryBandwidth']['value'] = Math.max(rawInfos['roofData']['memoryBandwidth']['value'], subCluster.memoryBandwidth.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keymetrics (Data on Cluster-Scope)
|
||||||
|
let rawFlops = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
|
||||||
|
sum + (node.metrics.find((m) => m.name == 'flops_any')?.metric?.series[0]?.statistics?.avg || 0),
|
||||||
|
0, // Initial Value
|
||||||
|
) || 0;
|
||||||
|
rawInfos['flopRate'] = Math.floor((rawFlops * 100) / 100)
|
||||||
|
|
||||||
|
let rawMemBw = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
|
||||||
|
sum + (node.metrics.find((m) => m.name == 'mem_bw')?.metric?.series[0]?.statistics?.avg || 0),
|
||||||
|
0, // Initial Value
|
||||||
|
) || 0;
|
||||||
|
rawInfos['memBwRate'] = Math.floor((rawMemBw * 100) / 100)
|
||||||
|
|
||||||
|
return rawInfos
|
||||||
|
} else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const refinedStateData = $derived.by(() => {
|
||||||
|
return $statusQuery?.data?.nodeStates.
|
||||||
|
filter((e) => ['allocated', 'reserved', 'idle', 'mixed','down', 'unknown'].includes(e.state)).
|
||||||
|
sort((a, b) => b.count - a.count)
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Functions */
|
||||||
|
function transformNodesStatsToData(subclusterData) {
|
||||||
|
let data = null
|
||||||
|
const x = [], y = []
|
||||||
|
|
||||||
|
if (subclusterData) {
|
||||||
|
for (let i = 0; i < subclusterData.length; i++) {
|
||||||
|
const flopsData = subclusterData[i].metrics.find((s) => s.name == "flops_any")
|
||||||
|
const memBwData = subclusterData[i].metrics.find((s) => s.name == "mem_bw")
|
||||||
|
|
||||||
|
const f = flopsData.metric.series[0].statistics.avg
|
||||||
|
const m = memBwData.metric.series[0].statistics.avg
|
||||||
|
|
||||||
|
let intensity = f / m
|
||||||
|
if (Number.isNaN(intensity) || !Number.isFinite(intensity)) {
|
||||||
|
intensity = 0.0 // Set to Float Zero: Will not show in Log-Plot (Always below render limit)
|
||||||
|
}
|
||||||
|
|
||||||
|
x.push(intensity)
|
||||||
|
y.push(f)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// console.warn("transformNodesStatsToData: metrics for 'mem_bw' and/or 'flops_any' missing!")
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x.length > 0 && y.length > 0) {
|
||||||
|
data = [null, [x, y]] // for dataformat see roofline.svelte
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformNodesStatsToInfo(subClusterData) {
|
||||||
|
let result = [];
|
||||||
|
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++) {
|
||||||
|
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 schedulerState = nodeMatch?.schedulerState ? nodeMatch.schedulerState : "notindb"
|
||||||
|
let numJobs = 0
|
||||||
|
|
||||||
|
if ($statusQuery?.data) {
|
||||||
|
const nodeJobs = $statusQuery?.data?.jobs?.items?.filter((job) => job.resources.find((res) => res.hostname == nodeName))
|
||||||
|
numJobs = nodeJobs?.length ? nodeJobs.length : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
result.push({nodeName: nodeName, schedulerState: schedulerState, numJobs: numJobs})
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card style="height: 98vh;">
|
||||||
|
<CardBody class="align-content-center">
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<Refresher
|
||||||
|
hideSelector
|
||||||
|
initially={60}
|
||||||
|
onRefresh={(interval) => {
|
||||||
|
from = new Date(Date.now() - 5 * 60 * 1000);
|
||||||
|
to = new Date(Date.now());
|
||||||
|
clusterFrom = new Date(Date.now() - (8 * 60 * 60 * 1000))
|
||||||
|
|
||||||
|
if (interval) stackedFrom += Math.floor(interval / 1000);
|
||||||
|
else stackedFrom += 1 // Workaround: TimeSelection not linked, just trigger new data on manual refresh
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{#if $statusQuery.fetching || $statesTimed.fetching}
|
||||||
|
<Row class="justify-content-center">
|
||||||
|
<Col xs="auto">
|
||||||
|
<Spinner />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{:else if $statusQuery.error || $statesTimed.error}
|
||||||
|
<Row cols={{xs:1, md:2}}>
|
||||||
|
{#if $statusQuery.error}
|
||||||
|
<Col>
|
||||||
|
<Card color="danger"><CardBody>Error Requesting Status Data: {$statusQuery.error.message}</CardBody></Card>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if $statesTimed.error}
|
||||||
|
<Col>
|
||||||
|
<Card color="danger"><CardBody>Error Requesting Node Scheduler States: {$statesTimed.error.message}</CardBody></Card>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{:else}
|
||||||
|
<Row cols={{xs:1, md:2}}>
|
||||||
|
<Col> <!-- General Cluster Info Card -->
|
||||||
|
<Card class="h-100">
|
||||||
|
<CardHeader class="text-center">
|
||||||
|
<h2 class="mb-0">Cluster {presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}</h2>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<h4>CPU(s)</h4><p><strong>{[...clusterInfo?.processorTypes].join(', ')}</strong></p>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Utilization Info Card -->
|
||||||
|
<Card class="h-100">
|
||||||
|
<CardBody>
|
||||||
|
<Table borderless>
|
||||||
|
<tr class="py-2">
|
||||||
|
<td style="font-size:x-large;">{clusterInfo?.runningJobs} Running Jobs</td>
|
||||||
|
<td colspan="2" style="font-size:x-large;">{clusterInfo?.activeUsers} Active Users</td>
|
||||||
|
</tr>
|
||||||
|
<hr class="my-1"/>
|
||||||
|
<tr class="pt-2">
|
||||||
|
<td style="font-size: large;">
|
||||||
|
Flop Rate (<span style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]">Any</span>)
|
||||||
|
</td>
|
||||||
|
<td colspan="2" style="font-size: large;">
|
||||||
|
Memory BW Rate
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="pb-2">
|
||||||
|
<td style="font-size:x-large;">
|
||||||
|
{clusterInfo?.flopRate}
|
||||||
|
{clusterInfo?.flopRateUnit}
|
||||||
|
</td>
|
||||||
|
<td colspan="2" style="font-size:x-large;">
|
||||||
|
{clusterInfo?.memBwRate}
|
||||||
|
{clusterInfo?.memBwRateUnit}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<hr class="my-1"/>
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Nodes</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedNodes}
|
||||||
|
max={clusterInfo?.totalNodes}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{clusterInfo?.allocatedNodes} / {clusterInfo?.totalNodes}
|
||||||
|
Nodes</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Cores</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedCores}
|
||||||
|
max={clusterInfo?.totalCores}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{formatNumber(clusterInfo?.allocatedCores)} / {formatNumber(clusterInfo?.totalCores)}
|
||||||
|
Cores</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{#if clusterInfo?.totalAccs !== 0}
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Accelerators</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedAccs}
|
||||||
|
max={clusterInfo?.totalAccs}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{clusterInfo?.allocatedAccs} / {clusterInfo?.totalAccs}
|
||||||
|
Accelerators</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
</Table>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Total Cluster Metric in Time SUMS-->
|
||||||
|
<div bind:clientWidth={colWidthTotals}>
|
||||||
|
<DoubleMetric
|
||||||
|
width={colWidthTotals}
|
||||||
|
timestep={$statusQuery?.data?.clusterMetrics[0]?.timestep || 60}
|
||||||
|
numNodes={$statusQuery?.data?.clusterMetrics?.nodeCount || 0}
|
||||||
|
metricData={$statusQuery?.data?.clusterMetrics?.metrics || []}
|
||||||
|
cluster={presetCluster}
|
||||||
|
fixLinewidth={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Nodes Roofline -->
|
||||||
|
<div bind:clientWidth={colWidthRoof}>
|
||||||
|
{#key $statusQuery?.data?.nodeMetrics}
|
||||||
|
<Roofline
|
||||||
|
colorBackground
|
||||||
|
useColors={false}
|
||||||
|
useLegend={false}
|
||||||
|
allowSizeChange
|
||||||
|
width={colWidthRoof - 10}
|
||||||
|
height={300}
|
||||||
|
cluster={presetCluster}
|
||||||
|
subCluster={clusterInfo?.roofData ? clusterInfo.roofData : null}
|
||||||
|
roofData={transformNodesStatsToData($statusQuery?.data?.nodeMetrics)}
|
||||||
|
nodesData={transformNodesStatsToInfo($statusQuery?.data?.nodeMetrics)}
|
||||||
|
fixTitle="Node Utilization"
|
||||||
|
yMinimum={1.0}
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col> <!-- Pie Last States -->
|
||||||
|
<Row>
|
||||||
|
<Col class="px-3 mt-2 mt-lg-0">
|
||||||
|
<div bind:clientWidth={colWidthStates}>
|
||||||
|
{#key refinedStateData}
|
||||||
|
<Pie
|
||||||
|
canvasId="hpcpie-slurm"
|
||||||
|
size={colWidthStates * 0.66}
|
||||||
|
sliceLabel="Nodes"
|
||||||
|
quantities={refinedStateData.map(
|
||||||
|
(sd) => sd.count,
|
||||||
|
)}
|
||||||
|
entities={refinedStateData.map(
|
||||||
|
(sd) => sd.state,
|
||||||
|
)}
|
||||||
|
fixColors={refinedStateData.map(
|
||||||
|
(sd) => colors['nodeStates'][sd.state],
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col class="px-4 py-2">
|
||||||
|
{#key refinedStateData}
|
||||||
|
<Table>
|
||||||
|
<tr class="mb-2">
|
||||||
|
<th></th>
|
||||||
|
<th class="h4">State</th>
|
||||||
|
<th class="h4">Count</th>
|
||||||
|
</tr>
|
||||||
|
{#each refinedStateData as sd, i}
|
||||||
|
<tr>
|
||||||
|
<td><Icon name="circle-fill" style="color: {colors['nodeStates'][sd.state]}; font-size: 30px;"/></td>
|
||||||
|
<td class="h5">{sd.state.charAt(0).toUpperCase() + sd.state.slice(1)}</td>
|
||||||
|
<td class="h5">{sd.count}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</Table>
|
||||||
|
{/key}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Stacked SchedState -->
|
||||||
|
<div bind:clientWidth={colWidthStacked}>
|
||||||
|
{#key $statesTimed?.data?.nodeStatesTimed}
|
||||||
|
<Stacked
|
||||||
|
data={$statesTimed?.data?.nodeStatesTimed}
|
||||||
|
width={colWidthStacked * 0.95}
|
||||||
|
xlabel="Time"
|
||||||
|
ylabel="Nodes"
|
||||||
|
yunit = "#Count"
|
||||||
|
title = "Cluster Status"
|
||||||
|
stateType = "Node"
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{/if}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
href: "/monitoring/status/",
|
href: "/monitoring/status/",
|
||||||
icon: "clipboard-data",
|
icon: "clipboard-data",
|
||||||
perCluster: true,
|
perCluster: true,
|
||||||
listOptions: false,
|
listOptions: true,
|
||||||
menu: "Info",
|
menu: "Info",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -3,80 +3,39 @@
|
|||||||
|
|
||||||
Properties:
|
Properties:
|
||||||
- `presetCluster String`: The cluster to show status information for
|
- `presetCluster String`: The cluster to show status information for
|
||||||
|
- `displayType String`: The type of status component to render
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
|
||||||
getContext
|
|
||||||
} from "svelte"
|
|
||||||
import {
|
|
||||||
init,
|
|
||||||
} from "./generic/utils.js";
|
|
||||||
import {
|
import {
|
||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody
|
||||||
TabContent,
|
|
||||||
TabPane,
|
|
||||||
Spinner
|
|
||||||
} from "@sveltestrap/sveltestrap";
|
} from "@sveltestrap/sveltestrap";
|
||||||
|
|
||||||
import StatusDash from "./status/StatusDash.svelte";
|
import DashDetails from "./status/DashDetails.svelte";
|
||||||
import UsageDash from "./status/UsageDash.svelte";
|
import DashInternal from "./status/DashInternal.svelte";
|
||||||
import StatisticsDash from "./status/StatisticsDash.svelte";
|
|
||||||
|
|
||||||
/* Svelte 5 Props */
|
/* Svelte 5 Props */
|
||||||
let {
|
let {
|
||||||
presetCluster
|
presetCluster,
|
||||||
|
displayType
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
/*Const Init */
|
|
||||||
const { query: initq } = init();
|
|
||||||
const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Loading indicator & Refresh -->
|
{#if displayType === 'DETAILS'}
|
||||||
|
<DashDetails {presetCluster}/>
|
||||||
<Row cols={1} class="mb-2">
|
{:else if displayType === 'DASHBOARD'}
|
||||||
<Col>
|
<DashInternal {presetCluster}/>
|
||||||
<h3 class="mb-0">Current Status of Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</h3>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
|
|
||||||
{#if $initq.fetching}
|
|
||||||
<Row cols={1} class="text-center mt-3">
|
|
||||||
<Col>
|
|
||||||
<Spinner />
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{:else if $initq.error}
|
|
||||||
<Row cols={1} class="text-center mt-3">
|
|
||||||
<Col>
|
|
||||||
<Card body color="danger">{$initq.error.message}</Card>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{:else}
|
{:else}
|
||||||
<Card class="overflow-auto" style="height: auto;">
|
<Row>
|
||||||
<TabContent>
|
<Col>
|
||||||
<TabPane tabId="status-dash" tab="Status" active>
|
<Card color="danger">
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<StatusDash clusters={$initq.data.clusters} {presetCluster} {useCbColors} useAltColors></StatusDash>
|
Unknown DisplayType for Status View!
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</TabPane>
|
</Card>
|
||||||
|
</Col>
|
||||||
<TabPane tabId="usage-dash" tab="Usage">
|
</Row>
|
||||||
<CardBody>
|
|
||||||
<UsageDash {presetCluster} {useCbColors}></UsageDash>
|
|
||||||
</CardBody>
|
|
||||||
</TabPane>
|
|
||||||
|
|
||||||
<TabPane tabId="metric-dash" tab="Statistics">
|
|
||||||
<CardBody>
|
|
||||||
<StatisticsDash {presetCluster} {useCbColors}></StatisticsDash>
|
|
||||||
</CardBody>
|
|
||||||
</TabPane>
|
|
||||||
</TabContent>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
13
web/frontend/src/dashpublic.entrypoint.js
Normal file
13
web/frontend/src/dashpublic.entrypoint.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { mount } from 'svelte';
|
||||||
|
// import {} from './header.entrypoint.js'
|
||||||
|
import DashPublic from './DashPublic.root.svelte'
|
||||||
|
|
||||||
|
mount(DashPublic, {
|
||||||
|
target: document.getElementById('svelte-app'),
|
||||||
|
props: {
|
||||||
|
presetCluster: presetCluster,
|
||||||
|
},
|
||||||
|
context: new Map([
|
||||||
|
['cc-config', clusterCockpitConfig]
|
||||||
|
])
|
||||||
|
})
|
||||||
@@ -14,6 +14,7 @@
|
|||||||
let {
|
let {
|
||||||
initially = null,
|
initially = null,
|
||||||
presetClass = "",
|
presetClass = "",
|
||||||
|
hideSelector = false,
|
||||||
onRefresh
|
onRefresh
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
@@ -36,25 +37,27 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<InputGroup class={presetClass}>
|
{#if !hideSelector}
|
||||||
<Input
|
<InputGroup class={presetClass}>
|
||||||
type="select"
|
<Input
|
||||||
title="Periodic refresh interval"
|
type="select"
|
||||||
bind:value={refreshInterval}
|
title="Periodic refresh interval"
|
||||||
onchange={refreshIntervalChanged}
|
bind:value={refreshInterval}
|
||||||
>
|
onchange={refreshIntervalChanged}
|
||||||
<option value={null}>No Interval</option>
|
|
||||||
<option value={30 * 1000}>30 Seconds</option>
|
|
||||||
<option value={60 * 1000}>60 Seconds</option>
|
|
||||||
<option value={2 * 60 * 1000}>Two Minutes</option>
|
|
||||||
<option value={5 * 60 * 1000}>5 Minutes</option>
|
|
||||||
</Input>
|
|
||||||
<Button
|
|
||||||
outline
|
|
||||||
onclick={() => onRefresh(refreshInterval)}
|
|
||||||
disabled={refreshInterval != null}
|
|
||||||
>
|
>
|
||||||
<Icon name="arrow-clockwise" /> Refresh
|
<option value={null}>No Interval</option>
|
||||||
</Button>
|
<option value={30 * 1000}>30 Seconds</option>
|
||||||
</InputGroup>
|
<option value={60 * 1000}>60 Seconds</option>
|
||||||
|
<option value={2 * 60 * 1000}>Two Minutes</option>
|
||||||
|
<option value={5 * 60 * 1000}>5 Minutes</option>
|
||||||
|
</Input>
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
onclick={() => onRefresh(refreshInterval)}
|
||||||
|
disabled={refreshInterval != null}
|
||||||
|
>
|
||||||
|
<Icon name="arrow-clockwise" /> Refresh
|
||||||
|
</Button>
|
||||||
|
</InputGroup>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|||||||
642
web/frontend/src/generic/plots/DoubleMetricPlot.svelte
Normal file
642
web/frontend/src/generic/plots/DoubleMetricPlot.svelte
Normal file
@@ -0,0 +1,642 @@
|
|||||||
|
<!--
|
||||||
|
@component Main plot component, based on uPlot; metricdata values by time
|
||||||
|
|
||||||
|
Only width/height should change reactively.
|
||||||
|
|
||||||
|
Properties:
|
||||||
|
- `metric String`: The metric name
|
||||||
|
- `scope String?`: Scope of the displayed data [Default: node]
|
||||||
|
- `height Number?`: The plot height [Default: 300]
|
||||||
|
- `timestep Number`: The timestep used for X-axis rendering
|
||||||
|
- `series [GraphQL.Series]`: The metric data object
|
||||||
|
- `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
|
||||||
|
- `cluster String?`: Cluster name of the parent job / data [Default: ""]
|
||||||
|
- `subCluster String`: Name of the subCluster of the parent job
|
||||||
|
- `isShared Bool?`: If this job used shared resources; for additional legend display [Default: false]
|
||||||
|
- `forNode Bool?`: If this plot is used for node data display; will render x-axis as negative time with $now as maximum [Default: false]
|
||||||
|
- `numhwthreads Number?`: Number of job HWThreads [Default: 0]
|
||||||
|
- `numaccs Number?`: Number of job Accelerators [Default: 0]
|
||||||
|
- `zoomState Object?`: The last zoom state to preserve on user zoom [Default: null]
|
||||||
|
- `thersholdState Object?`: The last threshold state to preserve on user zoom [Default: null]
|
||||||
|
- `extendedLegendData Object?`: Additional information to be rendered in an extended legend [Default: null]
|
||||||
|
- `onZoom Func`: Callback function to handle zoom-in event
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uPlot from "uplot";
|
||||||
|
import { formatNumber, formatDurationTime } from "../units.js";
|
||||||
|
import { getContext, onMount, onDestroy } from "svelte";
|
||||||
|
import { Card } from "@sveltestrap/sveltestrap";
|
||||||
|
|
||||||
|
/* Svelte 5 Props */
|
||||||
|
let {
|
||||||
|
// metric,
|
||||||
|
width = 0,
|
||||||
|
height = 300,
|
||||||
|
fixLinewidth = null,
|
||||||
|
timestep,
|
||||||
|
numNodes,
|
||||||
|
metricData,
|
||||||
|
// useStatsSeries = false,
|
||||||
|
// statisticsSeries = null,
|
||||||
|
cluster = "",
|
||||||
|
forNode = true,
|
||||||
|
// zoomState = null,
|
||||||
|
// thresholdState = null,
|
||||||
|
enableFlip = false,
|
||||||
|
// onZoom
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
/* Const Init */
|
||||||
|
const clusterCockpitConfig = getContext("cc-config");
|
||||||
|
// const resampleConfig = getContext("resampling");
|
||||||
|
// const subClusterTopology = getContext("getHardwareTopology")(cluster, subCluster);
|
||||||
|
// const metricConfig = getContext("getMetricConfig")(cluster, subCluster, metric);
|
||||||
|
const lineColors = clusterCockpitConfig.plotConfiguration_colorScheme;
|
||||||
|
const lineWidth = fixLinewidth ? fixLinewidth : clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio;
|
||||||
|
// const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
|
||||||
|
const renderSleepTime = 200;
|
||||||
|
// const normalLineColor = "#000000";
|
||||||
|
// const backgroundColors = {
|
||||||
|
// normal: "rgba(255, 255, 255, 1.0)",
|
||||||
|
// caution: cbmode ? "rgba(239, 230, 69, 0.3)" : "rgba(255, 128, 0, 0.3)",
|
||||||
|
// alert: cbmode ? "rgba(225, 86, 44, 0.3)" : "rgba(255, 0, 0, 0.3)",
|
||||||
|
// };
|
||||||
|
|
||||||
|
/* Var Init */
|
||||||
|
let timeoutId = null;
|
||||||
|
|
||||||
|
/* State Init */
|
||||||
|
let plotWrapper = $state(null);
|
||||||
|
let uplot = $state(null);
|
||||||
|
|
||||||
|
/* Derived */
|
||||||
|
// const usesMeanStatsSeries = $derived((statisticsSeries?.mean && statisticsSeries.mean.length != 0));
|
||||||
|
// const resampleTrigger = $derived(resampleConfig?.trigger ? Number(resampleConfig.trigger) : null);
|
||||||
|
// const resampleResolutions = $derived(resampleConfig?.resolutions ? [...resampleConfig.resolutions] : null);
|
||||||
|
// const resampleMinimum = $derived(resampleConfig?.resolutions ? Math.min(...resampleConfig.resolutions) : null);
|
||||||
|
// const thresholds = $derived(findJobAggregationThresholds(
|
||||||
|
// subClusterTopology,
|
||||||
|
// metricConfig,
|
||||||
|
// scope,
|
||||||
|
// numhwthreads,
|
||||||
|
// numaccs
|
||||||
|
// ));
|
||||||
|
const longestSeries = $derived.by(() => {
|
||||||
|
// if (useStatsSeries) {
|
||||||
|
// return usesMeanStatsSeries ? statisticsSeries?.mean?.length : statisticsSeries?.median?.length;
|
||||||
|
// } else {
|
||||||
|
return metricData.reduce((n, m) => Math.max(n, m.data.length), 0);
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
const maxX = $derived(longestSeries * timestep);
|
||||||
|
// const maxY = $derived.by(() => {
|
||||||
|
// let pendingY = 0;
|
||||||
|
// // if (useStatsSeries) {
|
||||||
|
// // pendingY = statisticsSeries.max.reduce(
|
||||||
|
// // (max, x) => Math.max(max, x),
|
||||||
|
// // thresholds?.normal,
|
||||||
|
// // ) || thresholds?.normal
|
||||||
|
// // } else {
|
||||||
|
// pendingY = series.reduce(
|
||||||
|
// (max, series) => Math.max(max, series?.statistics?.max),
|
||||||
|
// thresholds?.normal,
|
||||||
|
// ) || thresholds?.normal;
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// if (pendingY >= 10 * thresholds.peak) {
|
||||||
|
// // Hard y-range render limit if outliers in series data
|
||||||
|
// return (10 * thresholds.peak);
|
||||||
|
// } else {
|
||||||
|
// return pendingY;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// const plotBands = $derived.by(() => {
|
||||||
|
// if (useStatsSeries) {
|
||||||
|
// return [
|
||||||
|
// { series: [2, 3], fill: cbmode ? "rgba(0,0,255,0.1)" : "rgba(0,255,0,0.1)" },
|
||||||
|
// { series: [3, 1], fill: cbmode ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)" },
|
||||||
|
// ];
|
||||||
|
// };
|
||||||
|
// return null;
|
||||||
|
// })
|
||||||
|
const plotData = $derived.by(() => {
|
||||||
|
let pendingData = [new Array(longestSeries)];
|
||||||
|
// X
|
||||||
|
if (forNode === true) {
|
||||||
|
// Negative Timestamp Buildup
|
||||||
|
for (let i = 0; i <= longestSeries; i++) {
|
||||||
|
pendingData[0][i] = (longestSeries - i) * timestep * -1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Positive Timestamp Buildup
|
||||||
|
for (let j = 0; j < longestSeries; j++) {
|
||||||
|
pendingData[0][j] = j * timestep;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// Y
|
||||||
|
// if (useStatsSeries) {
|
||||||
|
// pendingData.push(statisticsSeries.min);
|
||||||
|
// pendingData.push(statisticsSeries.max);
|
||||||
|
// if (usesMeanStatsSeries) {
|
||||||
|
// pendingData.push(statisticsSeries.mean);
|
||||||
|
// } else {
|
||||||
|
// pendingData.push(statisticsSeries.median);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
for (let i = 0; i < metricData.length; i++) {
|
||||||
|
pendingData.push(metricData[i]?.data);
|
||||||
|
};
|
||||||
|
// };
|
||||||
|
return pendingData;
|
||||||
|
})
|
||||||
|
const plotSeries = $derived.by(() => {
|
||||||
|
let pendingSeries = [
|
||||||
|
// Note: X-Legend Will not be shown as soon as Y-Axis are in extendedMode
|
||||||
|
{
|
||||||
|
label: "Runtime",
|
||||||
|
value: (u, ts, sidx, didx) =>
|
||||||
|
(didx == null) ? null : formatDurationTime(ts, forNode),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// Y
|
||||||
|
// if (useStatsSeries) {
|
||||||
|
// pendingSeries.push({
|
||||||
|
// label: "min",
|
||||||
|
// scale: "y",
|
||||||
|
// width: lineWidth,
|
||||||
|
// stroke: cbmode ? "rgb(0,255,0)" : "red",
|
||||||
|
// });
|
||||||
|
// pendingSeries.push({
|
||||||
|
// label: "max",
|
||||||
|
// scale: "y",
|
||||||
|
// width: lineWidth,
|
||||||
|
// stroke: cbmode ? "rgb(0,0,255)" : "green",
|
||||||
|
// });
|
||||||
|
// pendingSeries.push({
|
||||||
|
// label: usesMeanStatsSeries ? "mean" : "median",
|
||||||
|
// scale: "y",
|
||||||
|
// width: lineWidth,
|
||||||
|
// stroke: "black",
|
||||||
|
// });
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
for (let i = 0; i < metricData.length; i++) {
|
||||||
|
// Default
|
||||||
|
// if (!extendedLegendData) {
|
||||||
|
pendingSeries.push({
|
||||||
|
label: `${metricData[i]?.name} (${metricData[i]?.unit?.prefix}${metricData[i]?.unit?.base})`,
|
||||||
|
scale: `y${i+1}`,
|
||||||
|
width: lineWidth,
|
||||||
|
stroke: lineColor(i, metricData.length),
|
||||||
|
});
|
||||||
|
// }
|
||||||
|
// Extended Legend For NodeList
|
||||||
|
// else {
|
||||||
|
// pendingSeries.push({
|
||||||
|
// label:
|
||||||
|
// scope === "node"
|
||||||
|
// ? series[i].hostname
|
||||||
|
// : scope === "accelerator"
|
||||||
|
// ? 'Acc #' + (i + 1) // series[i].id.slice(9, 14) | Too Hardware Specific
|
||||||
|
// : scope + " #" + (i + 1),
|
||||||
|
// scale: "y",
|
||||||
|
// width: lineWidth,
|
||||||
|
// stroke: lineColor(i, series?.length),
|
||||||
|
// values: (u, sidx, idx) => {
|
||||||
|
// // "i" = "sidx - 1" : sidx contains x-axis-data
|
||||||
|
// if (idx == null)
|
||||||
|
// return {
|
||||||
|
// time: '-',
|
||||||
|
// value: '-',
|
||||||
|
// user: '-',
|
||||||
|
// job: '-'
|
||||||
|
// };
|
||||||
|
|
||||||
|
// if (series[i].id in extendedLegendData) {
|
||||||
|
// return {
|
||||||
|
// time: formatDurationTime(plotData[0][idx], forNode),
|
||||||
|
// value: plotData[sidx][idx],
|
||||||
|
// user: extendedLegendData[series[i].id].user,
|
||||||
|
// job: extendedLegendData[series[i].id].job,
|
||||||
|
// };
|
||||||
|
// } else {
|
||||||
|
// return {
|
||||||
|
// time: formatDurationTime(plotData[0][idx], forNode),
|
||||||
|
// value: plotData[sidx][idx],
|
||||||
|
// user: '-',
|
||||||
|
// job: '-',
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
};
|
||||||
|
return pendingSeries;
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Effects */
|
||||||
|
// $effect(() => {
|
||||||
|
// if (!useStatsSeries && statisticsSeries != null) useStatsSeries = true;
|
||||||
|
// })
|
||||||
|
|
||||||
|
// This updates plot on all size changes if wrapper (== data) exists
|
||||||
|
$effect(() => {
|
||||||
|
if (plotWrapper) {
|
||||||
|
onSizeChange(width, height);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Functions */
|
||||||
|
function timeIncrs(timestep, maxX, forNode) {
|
||||||
|
if (forNode === true) {
|
||||||
|
return [60, 120, 240, 300, 360, 480, 600, 900, 1800, 3600, 7200, 14400, 21600]; // forNode fixed increments
|
||||||
|
} else {
|
||||||
|
let incrs = [];
|
||||||
|
for (let t = timestep; t < maxX; t *= 10)
|
||||||
|
incrs.push(t, t * 2, t * 3, t * 5);
|
||||||
|
|
||||||
|
return incrs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// removed arg "subcluster": input metricconfig and topology now directly derived from subcluster
|
||||||
|
// function findJobAggregationThresholds(
|
||||||
|
// subClusterTopology,
|
||||||
|
// metricConfig,
|
||||||
|
// scope,
|
||||||
|
// numhwthreads,
|
||||||
|
// numaccs
|
||||||
|
// ) {
|
||||||
|
|
||||||
|
// if (!subClusterTopology || !metricConfig || !scope) {
|
||||||
|
// console.warn("Argument missing for findJobAggregationThresholds!");
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // handle special *-stat scopes
|
||||||
|
// if (scope.match(/(.*)-stat$/)) {
|
||||||
|
// const statParts = scope.split('-');
|
||||||
|
// scope = statParts[0]
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (metricConfig?.aggregation == "avg") {
|
||||||
|
// // Return as Configured
|
||||||
|
// return {
|
||||||
|
// normal: metricConfig.normal,
|
||||||
|
// caution: metricConfig.caution,
|
||||||
|
// alert: metricConfig.alert,
|
||||||
|
// peak: metricConfig.peak,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (metricConfig?.aggregation == "sum") {
|
||||||
|
// // Scale Thresholds
|
||||||
|
// let fraction;
|
||||||
|
// if (numaccs > 0) fraction = subClusterTopology.accelerators.length / numaccs;
|
||||||
|
// else if (numhwthreads > 0) fraction = subClusterTopology.core.length / numhwthreads;
|
||||||
|
// else fraction = 1; // Fallback
|
||||||
|
|
||||||
|
// let divisor;
|
||||||
|
// // Exclusive: Fraction = 1; Shared: Fraction > 1
|
||||||
|
// if (scope == 'node') divisor = fraction;
|
||||||
|
// // Cap divisor at number of available sockets or domains
|
||||||
|
// else if (scope == 'socket') divisor = (fraction < subClusterTopology.socket.length) ? subClusterTopology.socket.length : fraction;
|
||||||
|
// else if (scope == "memoryDomain") divisor = (fraction < subClusterTopology.memoryDomain.length) ? subClusterTopology.socket.length : fraction;
|
||||||
|
// // Use Maximum Division for Smallest Scopes
|
||||||
|
// else if (scope == "core") divisor = subClusterTopology.core.length;
|
||||||
|
// else if (scope == "hwthread") divisor = subClusterTopology.core.length; // alt. name for core
|
||||||
|
// else if (scope == "accelerator") divisor = subClusterTopology.accelerators.length;
|
||||||
|
// else {
|
||||||
|
// console.log('Unknown scope, return default aggregation thresholds for sum', scope)
|
||||||
|
// divisor = 1;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// peak: metricConfig.peak / divisor,
|
||||||
|
// normal: metricConfig.normal / divisor,
|
||||||
|
// caution: metricConfig.caution / divisor,
|
||||||
|
// alert: metricConfig.alert / divisor,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.warn(
|
||||||
|
// "Missing or unkown aggregation mode (sum/avg) for metric:",
|
||||||
|
// metricConfig,
|
||||||
|
// );
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// UPLOT PLUGIN // converts the legend into a simple tooltip
|
||||||
|
function legendAsTooltipPlugin({
|
||||||
|
className,
|
||||||
|
style = { backgroundColor: "rgba(255, 249, 196, 0.92)", color: "black" },
|
||||||
|
} = {}) {
|
||||||
|
let legendEl;
|
||||||
|
const dataSize = metricData.length;
|
||||||
|
|
||||||
|
function init(u, opts) {
|
||||||
|
legendEl = u.root.querySelector(".u-legend");
|
||||||
|
|
||||||
|
legendEl.classList.remove("u-inline");
|
||||||
|
className && legendEl.classList.add(className);
|
||||||
|
|
||||||
|
uPlot.assign(legendEl.style, {
|
||||||
|
minWidth: "100px",
|
||||||
|
textAlign: "left",
|
||||||
|
pointerEvents: "none",
|
||||||
|
display: "none",
|
||||||
|
position: "absolute",
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
zIndex: 100,
|
||||||
|
boxShadow: "2px 2px 10px rgba(0,0,0,0.5)",
|
||||||
|
...style,
|
||||||
|
});
|
||||||
|
|
||||||
|
// conditional hide series color markers:
|
||||||
|
if (
|
||||||
|
// useStatsSeries || // Min/Max/Median Self-Explanatory
|
||||||
|
dataSize === 1 || // Only one Y-Dataseries
|
||||||
|
dataSize > 8 // More than 8 Y-Dataseries
|
||||||
|
) {
|
||||||
|
const idents = legendEl.querySelectorAll(".u-marker");
|
||||||
|
for (let i = 0; i < idents.length; i++)
|
||||||
|
idents[i].style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
const overEl = u.over;
|
||||||
|
overEl.style.overflow = "visible";
|
||||||
|
|
||||||
|
// move legend into plot bounds
|
||||||
|
overEl.appendChild(legendEl);
|
||||||
|
|
||||||
|
// show/hide tooltip on enter/exit
|
||||||
|
overEl.addEventListener("mouseenter", () => {
|
||||||
|
legendEl.style.display = null;
|
||||||
|
});
|
||||||
|
overEl.addEventListener("mouseleave", () => {
|
||||||
|
legendEl.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
// let tooltip exit plot
|
||||||
|
// overEl.style.overflow = "visible";
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(u) {
|
||||||
|
const { left, top } = u.cursor;
|
||||||
|
const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
|
||||||
|
if (enableFlip && (left < (width/2))) {
|
||||||
|
legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
|
||||||
|
} else {
|
||||||
|
legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dataSize <= 12 ) { // || useStatsSeries) {
|
||||||
|
return {
|
||||||
|
hooks: {
|
||||||
|
init: init,
|
||||||
|
setCursor: update,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Setting legend-opts show/live as object with false here will not work ...
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// RETURN BG COLOR FROM THRESHOLD
|
||||||
|
// function backgroundColor() {
|
||||||
|
// if (
|
||||||
|
// clusterCockpitConfig.plotConfiguration_colorBackground == false ||
|
||||||
|
// // !thresholds ||
|
||||||
|
// !(series && series.every((s) => s.statistics != null))
|
||||||
|
// )
|
||||||
|
// return backgroundColors.normal;
|
||||||
|
|
||||||
|
// let cond =
|
||||||
|
// thresholds.alert < thresholds.caution
|
||||||
|
// ? (a, b) => a <= b
|
||||||
|
// : (a, b) => a >= b;
|
||||||
|
|
||||||
|
// let avg =
|
||||||
|
// series.reduce((sum, series) => sum + series.statistics.avg, 0) /
|
||||||
|
// series.length;
|
||||||
|
|
||||||
|
// if (Number.isNaN(avg)) return backgroundColors.normal;
|
||||||
|
|
||||||
|
// if (cond(avg, thresholds.alert)) return backgroundColors.alert;
|
||||||
|
|
||||||
|
// if (cond(avg, thresholds.caution)) return backgroundColors.caution;
|
||||||
|
|
||||||
|
// return backgroundColors.normal;
|
||||||
|
// }
|
||||||
|
|
||||||
|
function lineColor(i, n) {
|
||||||
|
if (n && n >= lineColors.length) return lineColors[i % lineColors.length];
|
||||||
|
else return lineColors[Math.floor((i / n) * lineColors.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(ren_width, ren_height) {
|
||||||
|
// Set Options
|
||||||
|
const opts = {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
title: 'Cluster Utilization',
|
||||||
|
plugins: [legendAsTooltipPlugin()],
|
||||||
|
series: plotSeries,
|
||||||
|
axes: [
|
||||||
|
{
|
||||||
|
scale: "x",
|
||||||
|
space: 35,
|
||||||
|
incrs: timeIncrs(timestep, maxX, forNode),
|
||||||
|
label: "Time",
|
||||||
|
values: (_, vals) => vals.map((v) => formatDurationTime(v, forNode)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scale: "y1",
|
||||||
|
grid: { show: true },
|
||||||
|
label: `${metricData[0]?.name} (${metricData[0]?.unit?.prefix}${metricData[0]?.unit?.base})`,
|
||||||
|
values: (u, vals) => vals.map((v) => formatNumber(v)),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
side: 1,
|
||||||
|
scale: "y2",
|
||||||
|
grid: { show: false },
|
||||||
|
label: `${metricData[1]?.name} (${metricData[1]?.unit?.prefix}${metricData[1]?.unit?.base})`,
|
||||||
|
values: (u, vals) => vals.map((v) => formatNumber(v)),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// bands: plotBands,
|
||||||
|
padding: [5, 10, -20, 0],
|
||||||
|
hooks: {
|
||||||
|
// init: [
|
||||||
|
// (u) => {
|
||||||
|
// /* IF Zoom Enabled */
|
||||||
|
// if (resampleConfig && !forNode) {
|
||||||
|
// u.over.addEventListener("dblclick", (e) => {
|
||||||
|
// // console.log('Dispatch: Zoom Reset')
|
||||||
|
// onZoom({
|
||||||
|
// lastZoomState: {
|
||||||
|
// x: { time: false },
|
||||||
|
// y: { auto: true }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
draw: [
|
||||||
|
(u) => {
|
||||||
|
// Draw plot type label:
|
||||||
|
let textl = `Cluster ${cluster}`
|
||||||
|
// let textl = `${scope}${plotSeries.length > 2 ? "s" : ""}${
|
||||||
|
// useStatsSeries
|
||||||
|
// ? (usesMeanStatsSeries ? ": min/mean/max" : ": min/median/max")
|
||||||
|
// : metricConfig != null && scope != metricConfig.scope
|
||||||
|
// ? ` (${metricConfig.aggregation})`
|
||||||
|
// : ""
|
||||||
|
// }`;
|
||||||
|
let textr = `Sums of ${numNodes} nodes`
|
||||||
|
//let textr = `${isShared && scope != "core" && scope != "accelerator" ? "[Shared]" : ""}`;
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.textAlign = "start"; // 'end'
|
||||||
|
u.ctx.fillStyle = "black";
|
||||||
|
u.ctx.fillText(textl, u.bbox.left + 10, u.bbox.top + (forNode ? 0 : 10));
|
||||||
|
u.ctx.textAlign = "end";
|
||||||
|
u.ctx.fillStyle = "black";
|
||||||
|
u.ctx.fillText(
|
||||||
|
textr,
|
||||||
|
u.bbox.left + u.bbox.width - 10,
|
||||||
|
u.bbox.top + (forNode ? 0 : 10),
|
||||||
|
);
|
||||||
|
// u.ctx.fillText(text, u.bbox.left + u.bbox.width - 10, u.bbox.top + u.bbox.height - 10) // Recipe for bottom right
|
||||||
|
|
||||||
|
// if (!thresholds) {
|
||||||
|
u.ctx.restore();
|
||||||
|
return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let y = u.valToPos(thresholds.normal, "y", true);
|
||||||
|
// u.ctx.save();
|
||||||
|
// u.ctx.lineWidth = lineWidth;
|
||||||
|
// u.ctx.strokeStyle = normalLineColor;
|
||||||
|
// u.ctx.setLineDash([5, 5]);
|
||||||
|
// u.ctx.beginPath();
|
||||||
|
// u.ctx.moveTo(u.bbox.left, y);
|
||||||
|
// u.ctx.lineTo(u.bbox.left + u.bbox.width, y);
|
||||||
|
// u.ctx.stroke();
|
||||||
|
// u.ctx.restore();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// setScale: [
|
||||||
|
// (u, key) => { // If ZoomResample is Configured && Not System/Node View
|
||||||
|
// if (resampleConfig && !forNode && key === 'x') {
|
||||||
|
// const numX = (u.series[0].idxs[1] - u.series[0].idxs[0])
|
||||||
|
// if (numX <= resampleTrigger && timestep !== resampleMinimum) {
|
||||||
|
// /* Get closest zoom level; prevents multiple iterative zoom requests for big zoom-steps (e.g. 600 -> 300 -> 120 -> 60) */
|
||||||
|
// // Which resolution to theoretically request to achieve 30 or more visible data points:
|
||||||
|
// const target = (numX * timestep) / resampleTrigger
|
||||||
|
// // Which configured resolution actually matches the closest to theoretical target:
|
||||||
|
// const closest = resampleResolutions.reduce(function(prev, curr) {
|
||||||
|
// return (Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev);
|
||||||
|
// });
|
||||||
|
// // Prevents non-required dispatches
|
||||||
|
// if (timestep !== closest) {
|
||||||
|
// // console.log('Dispatch: Zoom with Res from / to', timestep, closest)
|
||||||
|
// onZoom({
|
||||||
|
// newRes: closest,
|
||||||
|
// lastZoomState: u?.scales,
|
||||||
|
// lastThreshold: thresholds?.normal
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// // console.log('Dispatch: Zoom Update States')
|
||||||
|
// onZoom({
|
||||||
|
// lastZoomState: u?.scales,
|
||||||
|
// lastThreshold: thresholds?.normal
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: { time: false },
|
||||||
|
y1: { auto: true },
|
||||||
|
y1: { auto: true },
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// Display legend until max 12 Y-dataseries
|
||||||
|
show: true, // metricData.length <= 12 || useStatsSeries,
|
||||||
|
live: true // But This Plot always for 2 Data-Series
|
||||||
|
},
|
||||||
|
cursor: {
|
||||||
|
drag: { x: true, y: true },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle Render
|
||||||
|
if (!uplot) {
|
||||||
|
opts.width = ren_width;
|
||||||
|
opts.height = ren_height;
|
||||||
|
|
||||||
|
// if (plotSync) {
|
||||||
|
// opts.cursor.sync = {
|
||||||
|
// key: plotSync.key,
|
||||||
|
// scales: ["x", null],
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (zoomState && metricConfig?.aggregation == "avg") {
|
||||||
|
// opts.scales = {...zoomState}
|
||||||
|
// } else if (zoomState && metricConfig?.aggregation == "sum") {
|
||||||
|
// // Allow Zoom In === Ymin changed
|
||||||
|
// if (zoomState.y.min !== 0) { // scope change?: only use zoomState if thresholds match
|
||||||
|
// if ((thresholdState === thresholds?.normal)) { opts.scales = {...zoomState} };
|
||||||
|
// } // else: reset scaling to default
|
||||||
|
// }
|
||||||
|
|
||||||
|
uplot = new uPlot(opts, plotData, plotWrapper);
|
||||||
|
} else {
|
||||||
|
uplot.setSize({ width: ren_width, height: ren_height });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSizeChange(chg_width, chg_height) {
|
||||||
|
if (!uplot) return;
|
||||||
|
if (timeoutId != null) clearTimeout(timeoutId);
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
timeoutId = null;
|
||||||
|
render(chg_width, chg_height);
|
||||||
|
}, renderSleepTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On Mount */
|
||||||
|
onMount(() => {
|
||||||
|
if (plotWrapper) {
|
||||||
|
render(width, height);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* On Destroy */
|
||||||
|
onDestroy(() => {
|
||||||
|
if (timeoutId != null) clearTimeout(timeoutId);
|
||||||
|
if (uplot) uplot.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Define $width Wrapper and NoData Card -->
|
||||||
|
{#if metricData[0]?.data && metricData[0]?.data?.length > 0}
|
||||||
|
<div bind:this={plotWrapper} bind:clientWidth={width}
|
||||||
|
class={forNode ? 'py-2 rounded' : 'rounded'}
|
||||||
|
></div>
|
||||||
|
{:else}
|
||||||
|
<Card body color="warning" class="mx-4"
|
||||||
|
>Cannot render plot: No series data returned for <code>{cluster}</code></Card
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
@@ -59,7 +59,15 @@
|
|||||||
'rgb(135,133,0)',
|
'rgb(135,133,0)',
|
||||||
'rgb(0,167,108)',
|
'rgb(0,167,108)',
|
||||||
'rgb(189,189,189)',
|
'rgb(189,189,189)',
|
||||||
]
|
],
|
||||||
|
nodeStates: {
|
||||||
|
allocated: "rgba(0, 128, 0, 0.75)",
|
||||||
|
down: "rgba(255, 0, 0, 0.75)",
|
||||||
|
idle: "rgba(0, 0, 255, 0.75)",
|
||||||
|
reserved: "rgba(255, 0, 255, 0.75)",
|
||||||
|
mixed: "rgba(255, 215, 0, 0.75)",
|
||||||
|
unknown: "rgba(0, 0, 0, 0.75)"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -77,6 +85,7 @@
|
|||||||
entities,
|
entities,
|
||||||
displayLegend = false,
|
displayLegend = false,
|
||||||
useAltColors = false,
|
useAltColors = false,
|
||||||
|
fixColors = null
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
/* Const Init */
|
/* Const Init */
|
||||||
@@ -98,6 +107,8 @@
|
|||||||
c = [...colors['colorblind']];
|
c = [...colors['colorblind']];
|
||||||
} else if (useAltColors) {
|
} else if (useAltColors) {
|
||||||
c = [...colors['alternative']];
|
c = [...colors['alternative']];
|
||||||
|
} else if (fixColors?.length > 0) {
|
||||||
|
c = [...fixColors];
|
||||||
} else {
|
} else {
|
||||||
c = [...colors['default']];
|
c = [...colors['default']];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,14 +34,18 @@
|
|||||||
nodesData = null,
|
nodesData = null,
|
||||||
cluster = null,
|
cluster = null,
|
||||||
subCluster = null,
|
subCluster = null,
|
||||||
|
fixTitle = null,
|
||||||
|
yMinimum = null,
|
||||||
allowSizeChange = false,
|
allowSizeChange = false,
|
||||||
useColors = true,
|
useColors = true,
|
||||||
|
useLegend = true,
|
||||||
|
colorBackground = false,
|
||||||
width = 600,
|
width = 600,
|
||||||
height = 380,
|
height = 380,
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
/* Const Init */
|
/* Const Init */
|
||||||
const lineWidth = clusterCockpitConfig.plotConfiguration_lineWidth;
|
const lineWidth = 2 // clusterCockpitConfig.plotConfiguration_lineWidth;
|
||||||
const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
|
const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
|
||||||
|
|
||||||
/* Var Init */
|
/* Var Init */
|
||||||
@@ -293,7 +297,7 @@
|
|||||||
} else {
|
} else {
|
||||||
// No Colors: Use Black
|
// No Colors: Use Black
|
||||||
u.ctx.strokeStyle = "rgb(0, 0, 0)";
|
u.ctx.strokeStyle = "rgb(0, 0, 0)";
|
||||||
u.ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
|
u.ctx.fillStyle = colorBackground ? "rgb(0, 0, 0)" : "rgba(0, 0, 0, 0.5)";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get Values
|
// Get Values
|
||||||
@@ -526,6 +530,7 @@
|
|||||||
let plotTitle = "CPU Roofline Diagram";
|
let plotTitle = "CPU Roofline Diagram";
|
||||||
if (jobsData) plotTitle = "Job Average Roofline Diagram";
|
if (jobsData) plotTitle = "Job Average Roofline Diagram";
|
||||||
if (nodesData) plotTitle = "Node Average Roofline Diagram";
|
if (nodesData) plotTitle = "Node Average Roofline Diagram";
|
||||||
|
if (fixTitle) plotTitle = fixTitle
|
||||||
|
|
||||||
if (roofData) {
|
if (roofData) {
|
||||||
const opts = {
|
const opts = {
|
||||||
@@ -534,7 +539,7 @@
|
|||||||
width: width,
|
width: width,
|
||||||
height: height,
|
height: height,
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: useLegend,
|
||||||
},
|
},
|
||||||
cursor: {
|
cursor: {
|
||||||
dataIdx: (u, seriesIdx) => {
|
dataIdx: (u, seriesIdx) => {
|
||||||
@@ -616,7 +621,7 @@
|
|||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
range: [
|
range: [
|
||||||
0.01,
|
yMinimum ? yMinimum : 0.01,
|
||||||
subCluster?.flopRateSimd?.value
|
subCluster?.flopRateSimd?.value
|
||||||
? nearestThousand(subCluster.flopRateSimd.value)
|
? nearestThousand(subCluster.flopRateSimd.value)
|
||||||
: 10000,
|
: 10000,
|
||||||
@@ -646,7 +651,7 @@
|
|||||||
hooks: {
|
hooks: {
|
||||||
// setSeries: [ (u, seriesIdx) => console.log('setSeries', seriesIdx) ],
|
// setSeries: [ (u, seriesIdx) => console.log('setSeries', seriesIdx) ],
|
||||||
// setLegend: [ u => console.log('setLegend', u.legend.idxs) ],
|
// setLegend: [ u => console.log('setLegend', u.legend.idxs) ],
|
||||||
drawClear: [
|
drawClear: [ // drawClear hook which fires before anything exists, so will render under the grid
|
||||||
(u) => {
|
(u) => {
|
||||||
qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
|
qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
|
||||||
qt.clear();
|
qt.clear();
|
||||||
@@ -658,7 +663,7 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
draw: [
|
drawAxes: [ // drawAxes hook, which fires after axes and grid have been rendered
|
||||||
(u) => {
|
(u) => {
|
||||||
// draw roofs when subCluster set
|
// draw roofs when subCluster set
|
||||||
if (subCluster != null) {
|
if (subCluster != null) {
|
||||||
@@ -668,6 +673,7 @@
|
|||||||
u.ctx.lineWidth = lineWidth;
|
u.ctx.lineWidth = lineWidth;
|
||||||
u.ctx.beginPath();
|
u.ctx.beginPath();
|
||||||
|
|
||||||
|
// Get Values
|
||||||
const ycut = 0.01 * subCluster.memoryBandwidth.value;
|
const ycut = 0.01 * subCluster.memoryBandwidth.value;
|
||||||
const scalarKnee =
|
const scalarKnee =
|
||||||
(subCluster.flopRateScalar.value - ycut) /
|
(subCluster.flopRateScalar.value - ycut) /
|
||||||
@@ -675,19 +681,20 @@
|
|||||||
const simdKnee =
|
const simdKnee =
|
||||||
(subCluster.flopRateSimd.value - ycut) /
|
(subCluster.flopRateSimd.value - ycut) /
|
||||||
subCluster.memoryBandwidth.value;
|
subCluster.memoryBandwidth.value;
|
||||||
const scalarKneeX = u.valToPos(scalarKnee, "x", true), // Value, axis, toCanvasPixels
|
|
||||||
simdKneeX = u.valToPos(simdKnee, "x", true),
|
|
||||||
flopRateScalarY = u.valToPos(
|
|
||||||
subCluster.flopRateScalar.value,
|
|
||||||
"y",
|
|
||||||
true,
|
|
||||||
),
|
|
||||||
flopRateSimdY = u.valToPos(
|
|
||||||
subCluster.flopRateSimd.value,
|
|
||||||
"y",
|
|
||||||
true,
|
|
||||||
);
|
|
||||||
|
|
||||||
|
// Get Const Coords
|
||||||
|
const originX = u.valToPos(0.01, "x", true);
|
||||||
|
const originY = u.valToPos(yMinimum ? yMinimum : 0.01, "y", true);
|
||||||
|
|
||||||
|
const outerX = u.valToPos(1000, "x", true); // rightmost x in plot coords
|
||||||
|
|
||||||
|
const scalarKneeX = u.valToPos(scalarKnee, "x", true) // Value, axis, toCanvasPixels
|
||||||
|
const simdKneeX = u.valToPos(simdKnee, "x", true)
|
||||||
|
|
||||||
|
const flopRateScalarY = u.valToPos(subCluster.flopRateScalar.value, "y", true)
|
||||||
|
const flopRateSimdY = u.valToPos(subCluster.flopRateSimd.value, "y", true);
|
||||||
|
|
||||||
|
/* Render Lines */
|
||||||
if (
|
if (
|
||||||
scalarKneeX <
|
scalarKneeX <
|
||||||
width * window.devicePixelRatio -
|
width * window.devicePixelRatio -
|
||||||
@@ -727,10 +734,10 @@
|
|||||||
y1,
|
y1,
|
||||||
x2,
|
x2,
|
||||||
y2,
|
y2,
|
||||||
u.valToPos(0.01, "x", true),
|
originX, // x3; X-Axis Start Coord-X
|
||||||
u.valToPos(1.0, "y", true), // X-Axis Start Coords
|
originY, // y3; X-Axis Start Coord-Y
|
||||||
u.valToPos(1000, "x", true),
|
outerX, // x4; X-Axis End Coord-X
|
||||||
u.valToPos(1.0, "y", true), // X-Axis End Coords
|
originY, // y4; X-Axis End Coord-Y
|
||||||
);
|
);
|
||||||
|
|
||||||
if (xAxisIntersect.x > x1) {
|
if (xAxisIntersect.x > x1) {
|
||||||
@@ -745,6 +752,144 @@
|
|||||||
u.ctx.stroke();
|
u.ctx.stroke();
|
||||||
// Reset grid lineWidth
|
// Reset grid lineWidth
|
||||||
u.ctx.lineWidth = 0.15;
|
u.ctx.lineWidth = 0.15;
|
||||||
|
|
||||||
|
/* Render Area */
|
||||||
|
if (colorBackground) {
|
||||||
|
|
||||||
|
u.ctx.beginPath();
|
||||||
|
// Additional Coords for Colored Regions
|
||||||
|
const yhalf = u.valToPos(ycut/2, "y", true)
|
||||||
|
const simdShift = u.valToPos(simdKnee*1.75, "x", true)
|
||||||
|
|
||||||
|
let upperBorderIntersect = lineIntersect(
|
||||||
|
x1,
|
||||||
|
y1,
|
||||||
|
x2,
|
||||||
|
y2,
|
||||||
|
originX, // x3; X-Axis Start Coord-X
|
||||||
|
flopRateSimdY*1.667, // y3; X-Axis Start Coord-Y
|
||||||
|
outerX, // x4; X-Axis End Coord-X
|
||||||
|
flopRateSimdY*1.667, // y4; X-Axis End Coord-Y
|
||||||
|
);
|
||||||
|
|
||||||
|
let lowerBorderIntersect = lineIntersect(
|
||||||
|
x1,
|
||||||
|
y1,
|
||||||
|
x2,
|
||||||
|
y2,
|
||||||
|
originX, // x3; X-Axis Start Coord-X
|
||||||
|
flopRateScalarY*1.1667, // y3; X-Axis Start Coord-Y
|
||||||
|
outerX, // x4; X-Axis End Coord-X
|
||||||
|
flopRateScalarY*1.1667, // y4; X-Axis End Coord-Y
|
||||||
|
);
|
||||||
|
|
||||||
|
let helperUpperBorderIntersect = lineIntersect(
|
||||||
|
x1,
|
||||||
|
yhalf,
|
||||||
|
simdShift,
|
||||||
|
y2,
|
||||||
|
originX, // x3; X-Axis Start Coord-X
|
||||||
|
flopRateSimdY*1.667, // y3; X-Axis Start Coord-Y
|
||||||
|
outerX, // x4; X-Axis End Coord-X
|
||||||
|
flopRateSimdY*1.667, // y4; X-Axis End Coord-Y
|
||||||
|
);
|
||||||
|
|
||||||
|
let helperLowerBorderIntersect = lineIntersect(
|
||||||
|
x1,
|
||||||
|
yhalf,
|
||||||
|
simdShift,
|
||||||
|
y2,
|
||||||
|
originX, // x3; X-Axis Start Coord-X
|
||||||
|
flopRateScalarY*1.1667, // y3; X-Axis Start Coord-Y
|
||||||
|
outerX, // x4; X-Axis End Coord-X
|
||||||
|
flopRateScalarY*1.1667, // y4; X-Axis End Coord-Y
|
||||||
|
);
|
||||||
|
|
||||||
|
let helperLowerBorderIntersectTop = lineIntersect(
|
||||||
|
x1,
|
||||||
|
yhalf,
|
||||||
|
simdShift,
|
||||||
|
y2,
|
||||||
|
scalarKneeX, // x3; X-Axis Start Coord-X
|
||||||
|
flopRateScalarY, // y3; X-Axis Start Coord-Y
|
||||||
|
outerX, // x4; X-Axis End Coord-X
|
||||||
|
flopRateScalarY, // y4; X-Axis End Coord-Y
|
||||||
|
);
|
||||||
|
|
||||||
|
// Diagonal Helper
|
||||||
|
u.ctx.moveTo(x1, yhalf);
|
||||||
|
u.ctx.lineTo(simdShift, y2);
|
||||||
|
// Upper Simd Helper
|
||||||
|
u.ctx.moveTo(upperBorderIntersect.x, flopRateSimdY*1.667);
|
||||||
|
u.ctx.lineTo(outerX, flopRateSimdY*1.667);
|
||||||
|
// Lower Scalar Helper
|
||||||
|
u.ctx.moveTo(lowerBorderIntersect.x, flopRateScalarY*1.1667);
|
||||||
|
u.ctx.lineTo(outerX, flopRateScalarY*1.1667);
|
||||||
|
|
||||||
|
u.ctx.stroke();
|
||||||
|
|
||||||
|
/* Color Regions */
|
||||||
|
// MemoryBound
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.beginPath();
|
||||||
|
u.ctx.lineTo(x1, y1); // YCut
|
||||||
|
u.ctx.lineTo(x2, y2); // Upper Knee
|
||||||
|
u.ctx.lineTo(simdShift, y2); // Upper Helper Knee
|
||||||
|
u.ctx.lineTo(x1, yhalf); // Half yCut
|
||||||
|
u.ctx.closePath();
|
||||||
|
u.ctx.fillStyle = "rgba(255, 200, 0, 0.4)"; // Yellow
|
||||||
|
u.ctx.fill();
|
||||||
|
u.ctx.restore();
|
||||||
|
|
||||||
|
// Compute Lower
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.beginPath();
|
||||||
|
u.ctx.moveTo(lowerBorderIntersect.x, flopRateScalarY*1.1667); // Lower Helper Knee
|
||||||
|
u.ctx.lineTo(scalarKneeX, flopRateScalarY); // Lower Knee
|
||||||
|
u.ctx.lineTo(outerX, flopRateScalarY); // Outer Border
|
||||||
|
u.ctx.lineTo(outerX, flopRateScalarY*1.1667); // Outer Lower Helper Border
|
||||||
|
u.ctx.closePath();
|
||||||
|
u.ctx.fillStyle = "rgba(0, 180, 255, 0.4)"; // Cyan Blue
|
||||||
|
u.ctx.fill();
|
||||||
|
u.ctx.restore();
|
||||||
|
|
||||||
|
// Compute Upper
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.beginPath();
|
||||||
|
u.ctx.moveTo(upperBorderIntersect.x, flopRateSimdY*1.667); // Upper Helper Knee
|
||||||
|
u.ctx.lineTo(simdKneeX, flopRateSimdY); // Upper Knee
|
||||||
|
u.ctx.lineTo(outerX, flopRateSimdY); // Outer Border
|
||||||
|
u.ctx.lineTo(outerX, flopRateSimdY*1.667); // Outer Upper Helper Border
|
||||||
|
u.ctx.closePath();
|
||||||
|
u.ctx.fillStyle = "rgba(0, 180, 255, 0.4)"; // Cyan Blue
|
||||||
|
u.ctx.fill();
|
||||||
|
u.ctx.restore();
|
||||||
|
|
||||||
|
// Nomansland Lower
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.beginPath();
|
||||||
|
u.ctx.moveTo(originX, originY); // Origin
|
||||||
|
u.ctx.lineTo(originX, yhalf); // YCut Half
|
||||||
|
u.ctx.lineTo(helperLowerBorderIntersect.x, flopRateScalarY*1.1667); // Lower Inner Helper Knee
|
||||||
|
u.ctx.lineTo(outerX, flopRateScalarY*1.1667); // Lower Inner Border
|
||||||
|
u.ctx.lineTo(outerX, originY); // Lower Right Corner
|
||||||
|
u.ctx.closePath();
|
||||||
|
u.ctx.fillStyle = "rgba(255, 50, 50, 0.1)"; // Red Light
|
||||||
|
u.ctx.fill();
|
||||||
|
u.ctx.restore();
|
||||||
|
|
||||||
|
// Nomansland Upper
|
||||||
|
u.ctx.save();
|
||||||
|
u.ctx.beginPath();
|
||||||
|
u.ctx.moveTo(helperLowerBorderIntersectTop.x, flopRateScalarY); // Lower Knee Top
|
||||||
|
u.ctx.lineTo(helperUpperBorderIntersect.x, flopRateSimdY*1.667); // Upper Helper Knee
|
||||||
|
u.ctx.lineTo(outerX, flopRateSimdY*1.667); // Upper Inner Border
|
||||||
|
u.ctx.lineTo(outerX, flopRateScalarY); // Lower Knee Border
|
||||||
|
u.ctx.closePath();
|
||||||
|
u.ctx.fillStyle = "rgba(255, 50, 50, 0.1)"; // Red Light
|
||||||
|
u.ctx.fill();
|
||||||
|
u.ctx.restore();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Render Scales */
|
/* Render Scales */
|
||||||
|
|||||||
@@ -315,10 +315,10 @@
|
|||||||
y1,
|
y1,
|
||||||
x2,
|
x2,
|
||||||
y2,
|
y2,
|
||||||
u.valToPos(0.01, "x", true),
|
u.valToPos(0.01, "x", true), // x3; X-Axis Start Coord-X
|
||||||
u.valToPos(1.0, "y", true), // X-Axis Start Coords
|
u.valToPos(1.0, "y", true), // y3; X-Axis Start Coord-Y
|
||||||
u.valToPos(1000, "x", true),
|
u.valToPos(1000, "x", true), // x4; X-Axis End Coord-X
|
||||||
u.valToPos(1.0, "y", true), // X-Axis End Coords
|
u.valToPos(1.0, "y", true), // y4; X-Axis End Coord-Y
|
||||||
);
|
);
|
||||||
|
|
||||||
if (xAxisIntersect.x > x1) {
|
if (xAxisIntersect.x > x1) {
|
||||||
|
|||||||
@@ -39,63 +39,63 @@
|
|||||||
label: "Full",
|
label: "Full",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(0, 110, 0, 0.4)" : "rgba(0, 128, 0, 0.4)",
|
fill: cbmode ? "rgba(0, 110, 0, 0.6)" : "rgba(0, 128, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
|
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
|
||||||
},
|
},
|
||||||
partial: {
|
partial: {
|
||||||
label: "Partial",
|
label: "Partial",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(235, 172, 35, 0.4)" : "rgba(255, 215, 0, 0.4)",
|
fill: cbmode ? "rgba(235, 172, 35, 0.6)" : "rgba(255, 215, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
|
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
|
||||||
},
|
},
|
||||||
failed: {
|
failed: {
|
||||||
label: "Failed",
|
label: "Failed",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgb(181, 29, 20, 0.4)" : "rgba(255, 0, 0, 0.4)",
|
fill: cbmode ? "rgb(181, 29, 20, 0.6)" : "rgba(255, 0, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
|
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
|
||||||
},
|
},
|
||||||
idle: {
|
idle: {
|
||||||
label: "Idle",
|
label: "Idle",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(0, 140, 249, 0.4)" : "rgba(0, 0, 255, 0.4)",
|
fill: cbmode ? "rgba(0, 140, 249, 0.6)" : "rgba(0, 0, 255, 0.6)",
|
||||||
stroke: cbmode ? "rgb(0, 140, 249)" : "blue",
|
stroke: cbmode ? "rgb(0, 140, 249)" : "blue",
|
||||||
},
|
},
|
||||||
allocated: {
|
allocated: {
|
||||||
label: "Allocated",
|
label: "Allocated",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(0, 110, 0, 0.4)" : "rgba(0, 128, 0, 0.4)",
|
fill: cbmode ? "rgba(0, 110, 0, 0.6)" : "rgba(0, 128, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
|
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
|
||||||
},
|
},
|
||||||
reserved: {
|
reserved: {
|
||||||
label: "Reserved",
|
label: "Reserved",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(209, 99, 230, 0.4)" : "rgba(255, 0, 255, 0.4)",
|
fill: cbmode ? "rgba(209, 99, 230, 0.6)" : "rgba(255, 0, 255, 0.6)",
|
||||||
stroke: cbmode ? "rgb(209, 99, 230)" : "magenta",
|
stroke: cbmode ? "rgb(209, 99, 230)" : "magenta",
|
||||||
},
|
},
|
||||||
mixed: {
|
mixed: {
|
||||||
label: "Mixed",
|
label: "Mixed",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(235, 172, 35, 0.4)" : "rgba(255, 215, 0, 0.4)",
|
fill: cbmode ? "rgba(235, 172, 35, 0.6)" : "rgba(255, 215, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
|
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
|
||||||
},
|
},
|
||||||
down: {
|
down: {
|
||||||
label: "Down",
|
label: "Down",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: cbmode ? "rgba(181, 29 ,20, 0.4)" : "rgba(255, 0, 0, 0.4)",
|
fill: cbmode ? "rgba(181, 29 ,20, 0.6)" : "rgba(255, 0, 0, 0.6)",
|
||||||
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
|
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
|
||||||
},
|
},
|
||||||
unknown: {
|
unknown: {
|
||||||
label: "Unknown",
|
label: "Unknown",
|
||||||
scale: "y",
|
scale: "y",
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
fill: "rgba(0, 0, 0, 0.4)",
|
fill: "rgba(0, 0, 0, 0.6)",
|
||||||
stroke: "black",
|
stroke: "black",
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -156,7 +156,7 @@
|
|||||||
{
|
{
|
||||||
scale: "y",
|
scale: "y",
|
||||||
grid: { show: true },
|
grid: { show: true },
|
||||||
labelFont: "sans-serif",
|
// labelFont: "sans-serif",
|
||||||
label: ylabel + (yunit ? ` (${yunit})` : ''),
|
label: ylabel + (yunit ? ` (${yunit})` : ''),
|
||||||
// values: (u, vals) => vals.map((v) => formatNumber(v)),
|
// values: (u, vals) => vals.map((v) => formatNumber(v)),
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -64,6 +64,34 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
{:else if item.title === 'Status'}
|
||||||
|
<Dropdown nav inNavbar {direction}>
|
||||||
|
<DropdownToggle nav caret>
|
||||||
|
<Icon name={item.icon} />
|
||||||
|
{item.title}
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu class="dropdown-menu-lg-end">
|
||||||
|
{#each clusters as cluster}
|
||||||
|
<Dropdown nav direction="right">
|
||||||
|
<DropdownToggle nav caret class="dropdown-item py-1 px-2">
|
||||||
|
{cluster.name}
|
||||||
|
</DropdownToggle>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem class="py-1 px-2"
|
||||||
|
href={item.href + cluster.name}
|
||||||
|
>
|
||||||
|
Status Dashboard
|
||||||
|
</DropdownItem>
|
||||||
|
<DropdownItem class="py-1 px-2"
|
||||||
|
href={item.href + 'detail/' + cluster.name}
|
||||||
|
>
|
||||||
|
Status Details
|
||||||
|
</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
{/each}
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
{:else}
|
{:else}
|
||||||
<Dropdown nav inNavbar {direction}>
|
<Dropdown nav inNavbar {direction}>
|
||||||
<DropdownToggle nav caret>
|
<DropdownToggle nav caret>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ mount(Status, {
|
|||||||
target: document.getElementById('svelte-app'),
|
target: document.getElementById('svelte-app'),
|
||||||
props: {
|
props: {
|
||||||
presetCluster: infos.cluster,
|
presetCluster: infos.cluster,
|
||||||
|
displayType: displayType,
|
||||||
},
|
},
|
||||||
context: new Map([
|
context: new Map([
|
||||||
['cc-config', clusterCockpitConfig]
|
['cc-config', clusterCockpitConfig]
|
||||||
|
|||||||
82
web/frontend/src/status/DashDetails.svelte
Normal file
82
web/frontend/src/status/DashDetails.svelte
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!--
|
||||||
|
@component Main cluster status view component; renders current system-usage information
|
||||||
|
|
||||||
|
Properties:
|
||||||
|
- `presetCluster String`: The cluster to show status information for
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getContext
|
||||||
|
} from "svelte"
|
||||||
|
import {
|
||||||
|
init,
|
||||||
|
} from "../generic/utils.js";
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
TabContent,
|
||||||
|
TabPane,
|
||||||
|
Spinner
|
||||||
|
} from "@sveltestrap/sveltestrap";
|
||||||
|
|
||||||
|
import StatusDash from "./dashdetails/StatusDash.svelte";
|
||||||
|
import UsageDash from "./dashdetails/UsageDash.svelte";
|
||||||
|
import StatisticsDash from "./dashdetails/StatisticsDash.svelte";
|
||||||
|
|
||||||
|
/* Svelte 5 Props */
|
||||||
|
let {
|
||||||
|
presetCluster,
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
/*Const Init */
|
||||||
|
const { query: initq } = init();
|
||||||
|
const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Loading indicator & Refresh -->
|
||||||
|
|
||||||
|
<Row cols={1} class="mb-2">
|
||||||
|
<Col>
|
||||||
|
<h3 class="mb-0">Current Status of Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</h3>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
|
||||||
|
{#if $initq.fetching}
|
||||||
|
<Row cols={1} class="text-center mt-3">
|
||||||
|
<Col>
|
||||||
|
<Spinner />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{:else if $initq.error}
|
||||||
|
<Row cols={1} class="text-center mt-3">
|
||||||
|
<Col>
|
||||||
|
<Card body color="danger">{$initq.error.message}</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{:else}
|
||||||
|
<Card class="overflow-auto" style="height: auto;">
|
||||||
|
<TabContent>
|
||||||
|
<TabPane tabId="status-dash" tab="Status" active>
|
||||||
|
<CardBody>
|
||||||
|
<StatusDash clusters={$initq.data.clusters} {presetCluster} {useCbColors} useAltColors></StatusDash>
|
||||||
|
</CardBody>
|
||||||
|
</TabPane>
|
||||||
|
|
||||||
|
<TabPane tabId="usage-dash" tab="Usage">
|
||||||
|
<CardBody>
|
||||||
|
<UsageDash {presetCluster} {useCbColors}></UsageDash>
|
||||||
|
</CardBody>
|
||||||
|
</TabPane>
|
||||||
|
|
||||||
|
<TabPane tabId="metric-dash" tab="Statistics">
|
||||||
|
<CardBody>
|
||||||
|
<StatisticsDash {presetCluster} {useCbColors}></StatisticsDash>
|
||||||
|
</CardBody>
|
||||||
|
</TabPane>
|
||||||
|
</TabContent>
|
||||||
|
</Card>
|
||||||
|
{/if}
|
||||||
594
web/frontend/src/status/DashInternal.svelte
Normal file
594
web/frontend/src/status/DashInternal.svelte
Normal file
@@ -0,0 +1,594 @@
|
|||||||
|
<!--
|
||||||
|
@component Main cluster status view component; renders current system-usage information
|
||||||
|
|
||||||
|
Properties:
|
||||||
|
- `presetCluster String`: The cluster to show status information for
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getContext
|
||||||
|
} from "svelte"
|
||||||
|
import {
|
||||||
|
queryStore,
|
||||||
|
gql,
|
||||||
|
getContextClient,
|
||||||
|
} from "@urql/svelte";
|
||||||
|
import {
|
||||||
|
init,
|
||||||
|
scramble,
|
||||||
|
scrambleNames,
|
||||||
|
} from "../generic/utils.js";
|
||||||
|
import {
|
||||||
|
formatDurationTime,
|
||||||
|
formatNumber,
|
||||||
|
} from "../generic/units.js";
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Card,
|
||||||
|
CardTitle,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
Spinner,
|
||||||
|
Table,
|
||||||
|
Progress,
|
||||||
|
Icon,
|
||||||
|
} from "@sveltestrap/sveltestrap";
|
||||||
|
import Roofline from "../generic/plots/Roofline.svelte";
|
||||||
|
import Pie, { colors } from "../generic/plots/Pie.svelte";
|
||||||
|
import Stacked from "../generic/plots/Stacked.svelte";
|
||||||
|
import DoubleMetric from "../generic/plots/DoubleMetricPlot.svelte";
|
||||||
|
import Refresher from "../generic/helper/Refresher.svelte";
|
||||||
|
|
||||||
|
/* Svelte 5 Props */
|
||||||
|
let {
|
||||||
|
presetCluster,
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
/*Const Init */
|
||||||
|
const { query: initq } = init();
|
||||||
|
const client = getContextClient();
|
||||||
|
const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
|
||||||
|
|
||||||
|
/* States */
|
||||||
|
let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
|
||||||
|
let from = $state(new Date(Date.now() - 5 * 60 * 1000));
|
||||||
|
let clusterFrom = $state(new Date(Date.now() - (8 * 60 * 60 * 1000)));
|
||||||
|
let to = $state(new Date(Date.now()));
|
||||||
|
let stackedFrom = $state(Math.floor(Date.now() / 1000) - 14400);
|
||||||
|
let colWidthJobs = $state(0);
|
||||||
|
let colWidthRoof = $state(0);
|
||||||
|
let colWidthTotals =$state(0);
|
||||||
|
let colWidthStacked1 = $state(0);
|
||||||
|
let colWidthStacked2 = $state(0);
|
||||||
|
|
||||||
|
/* Derived */
|
||||||
|
// States for Stacked charts
|
||||||
|
const statesTimed = $derived(queryStore({
|
||||||
|
client: client,
|
||||||
|
query: gql`
|
||||||
|
query ($filter: [NodeFilter!], $typeNode: String!, $typeHealth: String!) {
|
||||||
|
nodeStates: nodeStatesTimed(filter: $filter, type: $typeNode) {
|
||||||
|
state
|
||||||
|
counts
|
||||||
|
times
|
||||||
|
}
|
||||||
|
healthStates: nodeStatesTimed(filter: $filter, type: $typeHealth) {
|
||||||
|
state
|
||||||
|
counts
|
||||||
|
times
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
filter: { cluster: { eq: presetCluster }, timeStart: stackedFrom},
|
||||||
|
typeNode: "node",
|
||||||
|
typeHealth: "health"
|
||||||
|
},
|
||||||
|
requestPolicy: "network-only"
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Note: nodeMetrics are requested on configured $timestep resolution
|
||||||
|
// Result: The latest 5 minutes (datapoints) for each node independent of job
|
||||||
|
const statusQuery = $derived(queryStore({
|
||||||
|
client: client,
|
||||||
|
query: gql`
|
||||||
|
query (
|
||||||
|
$cluster: String!
|
||||||
|
$metrics: [String!]
|
||||||
|
$from: Time!
|
||||||
|
$to: Time!
|
||||||
|
$clusterFrom: Time!
|
||||||
|
$jobFilter: [JobFilter!]!
|
||||||
|
$paging: PageRequest!
|
||||||
|
$sorting: OrderByInput!
|
||||||
|
) {
|
||||||
|
# Node 5 Minute Averages for Roofline
|
||||||
|
nodeMetrics(
|
||||||
|
cluster: $cluster
|
||||||
|
metrics: $metrics
|
||||||
|
from: $from
|
||||||
|
to: $to
|
||||||
|
) {
|
||||||
|
host
|
||||||
|
subCluster
|
||||||
|
metrics {
|
||||||
|
name
|
||||||
|
metric {
|
||||||
|
series {
|
||||||
|
statistics {
|
||||||
|
avg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
# Running Job Metric Average for Rooflines
|
||||||
|
jobsMetricStats(filter: $jobFilter, metrics: $metrics) {
|
||||||
|
id
|
||||||
|
jobId
|
||||||
|
duration
|
||||||
|
numNodes
|
||||||
|
numAccelerators
|
||||||
|
subCluster
|
||||||
|
stats {
|
||||||
|
name
|
||||||
|
data {
|
||||||
|
avg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
# Get Jobs for Per-Node Counts
|
||||||
|
jobs(filter: $jobFilter, order: $sorting, page: $paging) {
|
||||||
|
items {
|
||||||
|
jobId
|
||||||
|
resources {
|
||||||
|
hostname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
count
|
||||||
|
}
|
||||||
|
# Only counts shared nodes once
|
||||||
|
allocatedNodes(cluster: $cluster) {
|
||||||
|
name
|
||||||
|
count
|
||||||
|
}
|
||||||
|
# totalNodes includes multiples if shared jobs: Info-Card Data
|
||||||
|
jobsStatistics(
|
||||||
|
filter: $jobFilter
|
||||||
|
page: $paging
|
||||||
|
sortBy: TOTALJOBS
|
||||||
|
groupBy: SUBCLUSTER
|
||||||
|
) {
|
||||||
|
id
|
||||||
|
totalJobs
|
||||||
|
totalUsers
|
||||||
|
totalCores
|
||||||
|
totalAccs
|
||||||
|
}
|
||||||
|
# ClusterMetrics for doubleMetricPlot
|
||||||
|
clusterMetrics(
|
||||||
|
cluster: $cluster
|
||||||
|
metrics: $metrics
|
||||||
|
from: $clusterFrom
|
||||||
|
to: $to
|
||||||
|
) {
|
||||||
|
nodeCount
|
||||||
|
metrics {
|
||||||
|
name
|
||||||
|
unit {
|
||||||
|
prefix
|
||||||
|
base
|
||||||
|
}
|
||||||
|
timestep
|
||||||
|
data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
cluster: presetCluster,
|
||||||
|
metrics: ["flops_any", "mem_bw"], // Fixed names for roofline and status bars
|
||||||
|
from: from.toISOString(),
|
||||||
|
to: to.toISOString(),
|
||||||
|
clusterFrom: clusterFrom.toISOString(),
|
||||||
|
jobFilter: [{ state: ["running"] }, { cluster: { eq: presetCluster } }],
|
||||||
|
paging: { itemsPerPage: -1, page: 1 }, // Get all: -1
|
||||||
|
sorting: { field: "startTime", type: "col", order: "DESC" }
|
||||||
|
},
|
||||||
|
requestPolicy: "network-only"
|
||||||
|
}));
|
||||||
|
|
||||||
|
const topJobsQuery = $derived(queryStore({
|
||||||
|
client: client,
|
||||||
|
query: gql`
|
||||||
|
query (
|
||||||
|
$filter: [JobFilter!]!
|
||||||
|
$paging: PageRequest!
|
||||||
|
) {
|
||||||
|
jobsStatistics(
|
||||||
|
filter: $filter
|
||||||
|
page: $paging
|
||||||
|
sortBy: TOTALJOBS
|
||||||
|
groupBy: PROJECT
|
||||||
|
) {
|
||||||
|
id
|
||||||
|
totalJobs
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
filter: [{ state: ["running"] }, { cluster: { eq: presetCluster} }],
|
||||||
|
paging: pagingState // Top 10
|
||||||
|
},
|
||||||
|
requestPolicy: "network-only"
|
||||||
|
}));
|
||||||
|
|
||||||
|
const clusterInfo = $derived.by(() => {
|
||||||
|
if ($initq?.data?.clusters) {
|
||||||
|
let rawInfos = {};
|
||||||
|
let subClusters = $initq?.data?.clusters?.find((c) => c.name == presetCluster)?.subClusters || [];
|
||||||
|
for (let subCluster of subClusters) {
|
||||||
|
// Allocations
|
||||||
|
if (!rawInfos['allocatedNodes']) rawInfos['allocatedNodes'] = $statusQuery?.data?.allocatedNodes?.find(({ name }) => name == subCluster.name)?.count || 0;
|
||||||
|
else rawInfos['allocatedNodes'] += $statusQuery?.data?.allocatedNodes?.find(({ name }) => name == subCluster.name)?.count || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['allocatedCores']) rawInfos['allocatedCores'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalCores || 0;
|
||||||
|
else rawInfos['allocatedCores'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalCores || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['allocatedAccs']) rawInfos['allocatedAccs'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalAccs || 0;
|
||||||
|
else rawInfos['allocatedAccs'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalAccs || 0;
|
||||||
|
|
||||||
|
// Infos
|
||||||
|
if (!rawInfos['processorTypes']) rawInfos['processorTypes'] = subCluster?.processorType ? new Set([subCluster.processorType]) : new Set([]);
|
||||||
|
else rawInfos['processorTypes'].add(subCluster.processorType);
|
||||||
|
|
||||||
|
if (!rawInfos['activeUsers']) rawInfos['activeUsers'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalUsers || 0;
|
||||||
|
else rawInfos['activeUsers'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalUsers || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['runningJobs']) rawInfos['runningJobs'] = $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalJobs || 0;
|
||||||
|
else rawInfos['runningJobs'] += $statusQuery?.data?.jobsStatistics?.find(({ id }) => id == subCluster.name)?.totalJobs || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalNodes']) rawInfos['totalNodes'] = subCluster?.numberOfNodes || 0;
|
||||||
|
else rawInfos['totalNodes'] += subCluster?.numberOfNodes || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalCores']) rawInfos['totalCores'] = (subCluster?.socketsPerNode * subCluster?.coresPerSocket * subCluster?.numberOfNodes) || 0;
|
||||||
|
else rawInfos['totalCores'] += (subCluster?.socketsPerNode * subCluster?.coresPerSocket * subCluster?.numberOfNodes) || 0;
|
||||||
|
|
||||||
|
if (!rawInfos['totalAccs']) rawInfos['totalAccs'] = (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
|
||||||
|
else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
|
||||||
|
|
||||||
|
// Units (Set Once)
|
||||||
|
if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base
|
||||||
|
if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base
|
||||||
|
|
||||||
|
// Get Maxima For Roofline Knee Render
|
||||||
|
if (!rawInfos['roofData']) {
|
||||||
|
rawInfos['roofData'] = {
|
||||||
|
flopRateScalar: {value: subCluster.flopRateScalar.value},
|
||||||
|
flopRateSimd: {value: subCluster.flopRateSimd.value},
|
||||||
|
memoryBandwidth: {value: subCluster.memoryBandwidth.value}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
rawInfos['roofData']['flopRateScalar']['value'] = Math.max(rawInfos['roofData']['flopRateScalar']['value'], subCluster.flopRateScalar.value)
|
||||||
|
rawInfos['roofData']['flopRateSimd']['value'] = Math.max(rawInfos['roofData']['flopRateSimd']['value'], subCluster.flopRateSimd.value)
|
||||||
|
rawInfos['roofData']['memoryBandwidth']['value'] = Math.max(rawInfos['roofData']['memoryBandwidth']['value'], subCluster.memoryBandwidth.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keymetrics (Data on Cluster-Scope)
|
||||||
|
let rawFlops = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
|
||||||
|
sum + (node.metrics.find((m) => m.name == 'flops_any')?.metric?.series[0]?.statistics?.avg || 0),
|
||||||
|
0, // Initial Value
|
||||||
|
) || 0;
|
||||||
|
rawInfos['flopRate'] = Math.floor((rawFlops * 100) / 100)
|
||||||
|
|
||||||
|
let rawMemBw = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
|
||||||
|
sum + (node.metrics.find((m) => m.name == 'mem_bw')?.metric?.series[0]?.statistics?.avg || 0),
|
||||||
|
0, // Initial Value
|
||||||
|
) || 0;
|
||||||
|
rawInfos['memBwRate'] = Math.floor((rawMemBw * 100) / 100)
|
||||||
|
|
||||||
|
return rawInfos
|
||||||
|
} else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Functions */
|
||||||
|
function legendColors(targetIdx) {
|
||||||
|
// Reuses first color if targetIdx overflows
|
||||||
|
let c;
|
||||||
|
if (useCbColors) {
|
||||||
|
c = [...colors['colorblind']];
|
||||||
|
// } else if (useAltColors) {
|
||||||
|
// c = [...colors['alternative']];
|
||||||
|
} else {
|
||||||
|
c = [...colors['default']];
|
||||||
|
}
|
||||||
|
return c[(c.length + targetIdx) % c.length];
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformJobsStatsToData(clusterData) {
|
||||||
|
/* c will contain values from 0 to 1 representing the duration */
|
||||||
|
let data = null
|
||||||
|
const x = [], y = [], c = [], day = 86400.0
|
||||||
|
|
||||||
|
if (clusterData) {
|
||||||
|
for (let i = 0; i < clusterData.length; i++) {
|
||||||
|
const flopsData = clusterData[i].stats.find((s) => s.name == "flops_any")
|
||||||
|
const memBwData = clusterData[i].stats.find((s) => s.name == "mem_bw")
|
||||||
|
|
||||||
|
const f = flopsData.data.avg
|
||||||
|
const m = memBwData.data.avg
|
||||||
|
const d = clusterData[i].duration / day
|
||||||
|
|
||||||
|
const intensity = f / m
|
||||||
|
if (Number.isNaN(intensity) || !Number.isFinite(intensity))
|
||||||
|
continue
|
||||||
|
|
||||||
|
x.push(intensity)
|
||||||
|
y.push(f)
|
||||||
|
// Long Jobs > 1 Day: Use max Color
|
||||||
|
if (d > 1.0) c.push(1.0)
|
||||||
|
else c.push(d)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn("transformJobsStatsToData: metrics for 'mem_bw' and/or 'flops_any' missing!")
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x.length > 0 && y.length > 0 && c.length > 0) {
|
||||||
|
data = [null, [x, y], c] // for dataformat see roofline.svelte
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformJobsStatsToInfo(clusterData) {
|
||||||
|
if (clusterData) {
|
||||||
|
return clusterData.map((sc) => { return {id: sc.id, jobId: sc.jobId, numNodes: sc.numNodes, numAcc: sc?.numAccelerators? sc.numAccelerators : 0, duration: formatDurationTime(sc.duration)} })
|
||||||
|
} else {
|
||||||
|
console.warn("transformJobsStatsToInfo: jobInfo missing!")
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card style="height: 88vh;">
|
||||||
|
<CardBody class="align-content-center">
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<Refresher
|
||||||
|
hideSelector
|
||||||
|
initially={60}
|
||||||
|
onRefresh={(interval) => {
|
||||||
|
from = new Date(Date.now() - 5 * 60 * 1000);
|
||||||
|
to = new Date(Date.now());
|
||||||
|
clusterFrom = new Date(Date.now() - (8 * 60 * 60 * 1000))
|
||||||
|
pagingState = { page:1, itemsPerPage: 10 };
|
||||||
|
|
||||||
|
if (interval) stackedFrom += Math.floor(interval / 1000);
|
||||||
|
else stackedFrom += 1 // Workaround: TimeSelection not linked, just trigger new data on manual refresh
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{#if $statusQuery.fetching || $statesTimed.fetching || $topJobsQuery.fetching}
|
||||||
|
<Row class="justify-content-center">
|
||||||
|
<Col xs="auto">
|
||||||
|
<Spinner />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{:else if $statusQuery.error || $statesTimed.error || $topJobsQuery.error}
|
||||||
|
<Row>
|
||||||
|
{#if $statusQuery.error}
|
||||||
|
<Col>
|
||||||
|
<Card color="danger"><CardBody>Error Requesting Status Data: {$statusQuery.error.message}</CardBody></Card>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if $statesTimed.error}
|
||||||
|
<Col>
|
||||||
|
<Card color="danger"><CardBody>Error Requesting Node Scheduler States: {$statesTimed.error.message}</CardBody></Card>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
{#if $topJobsQuery.error}
|
||||||
|
<Col>
|
||||||
|
<Card color="danger"><CardBody>Error Requesting Jobs By Project: {$topJobsQuery.error.message}</CardBody></Card>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{:else}
|
||||||
|
<Row cols={{xs:1, md:2, xl: 3}}>
|
||||||
|
<Col> <!-- Info Card -->
|
||||||
|
<Card class="h-auto mt-1">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle class="mb-0">Cluster "{presetCluster.charAt(0).toUpperCase() + presetCluster.slice(1)}"</CardTitle>
|
||||||
|
<span>{[...clusterInfo?.processorTypes].join(', ')}</span>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Table borderless>
|
||||||
|
<tr class="py-2">
|
||||||
|
<td style="font-size:x-large;">{clusterInfo?.runningJobs} Running Jobs</td>
|
||||||
|
<td colspan="2" style="font-size:x-large;">{clusterInfo?.activeUsers} Active Users</td>
|
||||||
|
</tr>
|
||||||
|
<hr class="my-1"/>
|
||||||
|
<tr class="pt-2">
|
||||||
|
<td style="font-size: large;">
|
||||||
|
Flop Rate (<span style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]">Any</span>)
|
||||||
|
</td>
|
||||||
|
<td colspan="2" style="font-size: large;">
|
||||||
|
Memory BW Rate
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="pb-2">
|
||||||
|
<td style="font-size:x-large;">
|
||||||
|
{clusterInfo?.flopRate}
|
||||||
|
{clusterInfo?.flopRateUnit}
|
||||||
|
</td>
|
||||||
|
<td colspan="2" style="font-size:x-large;">
|
||||||
|
{clusterInfo?.memBwRate}
|
||||||
|
{clusterInfo?.memBwRateUnit}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<hr class="my-1"/>
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Nodes</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedNodes}
|
||||||
|
max={clusterInfo?.totalNodes}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{clusterInfo?.allocatedNodes} / {clusterInfo?.totalNodes}
|
||||||
|
Nodes</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Cores</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedCores}
|
||||||
|
max={clusterInfo?.totalCores}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{formatNumber(clusterInfo?.allocatedCores)} / {formatNumber(clusterInfo?.totalCores)}
|
||||||
|
Cores</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{#if clusterInfo?.totalAccs !== 0}
|
||||||
|
<tr class="py-2">
|
||||||
|
<th scope="col">Allocated Accelerators</th>
|
||||||
|
<td style="min-width: 100px;"
|
||||||
|
><div class="col">
|
||||||
|
<Progress
|
||||||
|
value={clusterInfo?.allocatedAccs}
|
||||||
|
max={clusterInfo?.totalAccs}
|
||||||
|
/>
|
||||||
|
</div></td
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
>{clusterInfo?.allocatedAccs} / {clusterInfo?.totalAccs}
|
||||||
|
Accelerators</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
</Table>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Pie Jobs -->
|
||||||
|
<Row cols={{xs:1, md:2}}>
|
||||||
|
<Col class="p-2">
|
||||||
|
<div bind:clientWidth={colWidthJobs}>
|
||||||
|
<h4 class="text-center">
|
||||||
|
Top Projects: Jobs
|
||||||
|
</h4>
|
||||||
|
<Pie
|
||||||
|
{useCbColors}
|
||||||
|
canvasId="hpcpie-jobs-projects"
|
||||||
|
size={colWidthJobs * 0.75}
|
||||||
|
sliceLabel={'Jobs'}
|
||||||
|
quantities={$topJobsQuery.data.jobsStatistics.map(
|
||||||
|
(tp) => tp['totalJobs'],
|
||||||
|
)}
|
||||||
|
entities={$topJobsQuery.data.jobsStatistics.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col class="p-2">
|
||||||
|
<Table>
|
||||||
|
<tr class="mb-2">
|
||||||
|
<th></th>
|
||||||
|
<th style="padding-left: 0.5rem;">Project</th>
|
||||||
|
<th>Jobs</th>
|
||||||
|
</tr>
|
||||||
|
{#each $topJobsQuery.data.jobsStatistics as tp, i}
|
||||||
|
<tr>
|
||||||
|
<td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
|
||||||
|
<td>
|
||||||
|
<a target="_blank" href="/monitoring/jobs/?cluster={presetCluster}&state=running&project={tp.id}&projectMatch=eq"
|
||||||
|
>{scrambleNames ? scramble(tp.id) : tp.id}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>{tp['totalJobs']}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</Table>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Job Roofline -->
|
||||||
|
<div bind:clientWidth={colWidthRoof}>
|
||||||
|
{#key $statusQuery?.data?.jobsMetricStats}
|
||||||
|
<Roofline
|
||||||
|
useColors={true}
|
||||||
|
allowSizeChange
|
||||||
|
width={colWidthRoof - 10}
|
||||||
|
height={300}
|
||||||
|
subCluster={clusterInfo?.roofData ? clusterInfo.roofData : null}
|
||||||
|
roofData={transformJobsStatsToData($statusQuery?.data?.jobsMetricStats)}
|
||||||
|
jobsData={transformJobsStatsToInfo($statusQuery?.data?.jobsMetricStats)}
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Total Cluster Metric in Time SUMS-->
|
||||||
|
<div bind:clientWidth={colWidthTotals}>
|
||||||
|
<DoubleMetric
|
||||||
|
width={colWidthTotals}
|
||||||
|
timestep={$statusQuery?.data?.clusterMetrics[0]?.timestep || 60}
|
||||||
|
numNodes={$statusQuery?.data?.clusterMetrics?.nodeCount || 0}
|
||||||
|
metricData={$statusQuery?.data?.clusterMetrics?.metrics || []}
|
||||||
|
cluster={presetCluster}
|
||||||
|
fixLinewidth={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Stacked SchedState -->
|
||||||
|
<div bind:clientWidth={colWidthStacked1}>
|
||||||
|
{#key $statesTimed?.data?.nodeStates}
|
||||||
|
<Stacked
|
||||||
|
data={$statesTimed?.data?.nodeStates}
|
||||||
|
width={colWidthStacked1 * 0.95}
|
||||||
|
xlabel="Time"
|
||||||
|
ylabel="Nodes"
|
||||||
|
yunit = "#Count"
|
||||||
|
title = "Node States"
|
||||||
|
stateType = "Node"
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col> <!-- Stacked Healthstate -->
|
||||||
|
<div bind:clientWidth={colWidthStacked2}>
|
||||||
|
{#key $statesTimed?.data?.healthStates}
|
||||||
|
<Stacked
|
||||||
|
data={$statesTimed?.data?.healthStates}
|
||||||
|
width={colWidthStacked2 * 0.95}
|
||||||
|
xlabel="Time"
|
||||||
|
ylabel="Nodes"
|
||||||
|
yunit = "#Count"
|
||||||
|
title = "Health States"
|
||||||
|
stateType = "Health"
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{/if}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
@@ -22,11 +22,11 @@
|
|||||||
} from "@urql/svelte";
|
} from "@urql/svelte";
|
||||||
import {
|
import {
|
||||||
convert2uplot,
|
convert2uplot,
|
||||||
} from "../generic/utils.js";
|
} from "../../generic/utils.js";
|
||||||
import PlotGrid from "../generic/PlotGrid.svelte";
|
import PlotGrid from "../../generic/PlotGrid.svelte";
|
||||||
import Histogram from "../generic/plots/Histogram.svelte";
|
import Histogram from "../../generic/plots/Histogram.svelte";
|
||||||
import HistogramSelection from "../generic/select/HistogramSelection.svelte";
|
import HistogramSelection from "../../generic/select/HistogramSelection.svelte";
|
||||||
import Refresher from "../generic/helper/Refresher.svelte";
|
import Refresher from "../../generic/helper/Refresher.svelte";
|
||||||
|
|
||||||
/* Svelte 5 Props */
|
/* Svelte 5 Props */
|
||||||
let {
|
let {
|
||||||
@@ -22,12 +22,12 @@
|
|||||||
gql,
|
gql,
|
||||||
getContextClient,
|
getContextClient,
|
||||||
} from "@urql/svelte";
|
} from "@urql/svelte";
|
||||||
import { formatDurationTime } from "../generic/units.js";
|
import { formatDurationTime } from "../../generic/units.js";
|
||||||
import Refresher from "../generic/helper/Refresher.svelte";
|
import Refresher from "../../generic/helper/Refresher.svelte";
|
||||||
import TimeSelection from "../generic/select/TimeSelection.svelte";
|
import TimeSelection from "../../generic/select/TimeSelection.svelte";
|
||||||
import Roofline from "../generic/plots/Roofline.svelte";
|
import Roofline from "../../generic/plots/Roofline.svelte";
|
||||||
import Pie, { colors } from "../generic/plots/Pie.svelte";
|
import Pie, { colors } from "../../generic/plots/Pie.svelte";
|
||||||
import Stacked from "../generic/plots/Stacked.svelte";
|
import Stacked from "../../generic/plots/Stacked.svelte";
|
||||||
|
|
||||||
/* Svelte 5 Props */
|
/* Svelte 5 Props */
|
||||||
let {
|
let {
|
||||||
@@ -402,7 +402,7 @@
|
|||||||
to = new Date(Date.now());
|
to = new Date(Date.now());
|
||||||
|
|
||||||
if (interval) stackedFrom += Math.floor(interval / 1000);
|
if (interval) stackedFrom += Math.floor(interval / 1000);
|
||||||
else stackedFrom += 1 // Workaround: TineSelection not linked, just trigger new data on manual refresh
|
else stackedFrom += 1 // Workaround: TimeSelection not linked, just trigger new data on manual refresh
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
@@ -27,10 +27,10 @@
|
|||||||
scramble,
|
scramble,
|
||||||
scrambleNames,
|
scrambleNames,
|
||||||
convert2uplot,
|
convert2uplot,
|
||||||
} from "../generic/utils.js";
|
} from "../../generic/utils.js";
|
||||||
import Pie, { colors } from "../generic/plots/Pie.svelte";
|
import Pie, { colors } from "../../generic/plots/Pie.svelte";
|
||||||
import Histogram from "../generic/plots/Histogram.svelte";
|
import Histogram from "../../generic/plots/Histogram.svelte";
|
||||||
import Refresher from "../generic/helper/Refresher.svelte";
|
import Refresher from "../../generic/helper/Refresher.svelte";
|
||||||
|
|
||||||
/* Svelte 5 Props */
|
/* Svelte 5 Props */
|
||||||
let {
|
let {
|
||||||
@@ -23,34 +23,49 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="site">
|
<body class="site">
|
||||||
{{block "navigation" .}}
|
{{if eq .Infos.displayType "PUBLIC"}}
|
||||||
<header id="svelte-header"></header>
|
<main>
|
||||||
{{end}}
|
<div class="container">
|
||||||
|
{{block "content-public" .}}
|
||||||
|
Whoops, you should not see this... [PUBLIC]
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<main class="site-content">
|
{{block "javascript-public" .}}
|
||||||
<div class="container">
|
Whoops, you should not see this... [JS PUBLIC]
|
||||||
{{block "content" .}}
|
{{end}}
|
||||||
Whoops, you should not see this...
|
|
||||||
{{end}}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{{block "footer" .}}
|
{{else}}
|
||||||
<footer class="site-footer bg-light">
|
{{block "navigation" .}}
|
||||||
<ul class="footer-list">
|
<header id="svelte-header"></header>
|
||||||
<li class="footer-list-item"><a class="link-secondary fs-5" href="/imprint" title="Imprint" rel="nofollow">Imprint</a></li>
|
{{end}}
|
||||||
<li class="footer-list-item"><a class="link-secondary fs-5" href="/privacy" title="Privacy Policy" rel="nofollow">Privacy Policy</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="build-list">
|
|
||||||
<li class="build-list-item">Version {{ .Build.Version }}</li>
|
|
||||||
<li class="build-list-item">Hash {{ .Build.Hash }}</li>
|
|
||||||
<li class="build-list-item">Built {{ .Build.Buildtime }}</li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
{{end}}
|
|
||||||
|
|
||||||
{{block "javascript" .}}
|
<main class="site-content">
|
||||||
<script src='/build/header.js'></script>
|
<div class="container">
|
||||||
|
{{block "content" .}}
|
||||||
|
Whoops, you should not see this... [MAIN]
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{block "footer" .}}
|
||||||
|
<footer class="site-footer bg-light">
|
||||||
|
<ul class="footer-list">
|
||||||
|
<li class="footer-list-item"><a class="link-secondary fs-5" href="/imprint" title="Imprint" rel="nofollow">Imprint</a></li>
|
||||||
|
<li class="footer-list-item"><a class="link-secondary fs-5" href="/privacy" title="Privacy Policy" rel="nofollow">Privacy Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="build-list">
|
||||||
|
<li class="build-list-item">Version {{ .Build.Version }}</li>
|
||||||
|
<li class="build-list-item">Hash {{ .Build.Hash }}</li>
|
||||||
|
<li class="build-list-item">Built {{ .Build.Buildtime }}</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{block "javascript" .}}
|
||||||
|
<script src='/build/header.js'></script>
|
||||||
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
14
web/templates/monitoring/dashboard.tmpl
Normal file
14
web/templates/monitoring/dashboard.tmpl
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{{define "content-public"}}
|
||||||
|
<div id="svelte-app"></div>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
{{define "stylesheets"}}
|
||||||
|
<link rel='stylesheet' href='/build/dashpublic.css'>
|
||||||
|
{{end}}
|
||||||
|
{{define "javascript-public"}}
|
||||||
|
<script>
|
||||||
|
const presetCluster = {{ .Infos.cluster }};
|
||||||
|
const clusterCockpitConfig = {{ .Config }};
|
||||||
|
</script>
|
||||||
|
<script src='/build/dashpublic.js'></script>
|
||||||
|
{{end}}
|
||||||
@@ -8,6 +8,7 @@
|
|||||||
{{define "javascript"}}
|
{{define "javascript"}}
|
||||||
<script>
|
<script>
|
||||||
const infos = {{ .Infos }};
|
const infos = {{ .Infos }};
|
||||||
|
const displayType = {{ .Infos.displayType }};
|
||||||
const clusterCockpitConfig = {{ .Config }};
|
const clusterCockpitConfig = {{ .Config }};
|
||||||
</script>
|
</script>
|
||||||
<script src='/build/status.js'></script>
|
<script src='/build/status.js'></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user