Split systems view into node-overview and node-list

web/frontend/src/systems/nodelist/NodeInfo.svelte

@@ -0,0 +1,152 @@
+<!--
+    @component Displays job metaData, serves links to detail pages
+
+    Properties:
+    - `job Object`: The Job Object (GraphQL.Job)
+    - `jobTags [Number]?`: The jobs tags as IDs, default useful for dynamically updating the tags [Default: job.tags]
+ -->
+
+<script>
+  import { Badge, Icon } from "@sveltestrap/sveltestrap";
+  import { scrambleNames, scramble } from "../../generic/utils.js";
+  import Tag from "../../generic/helper/Tag.svelte";
+  import TagManagement from "../../generic/helper/TagManagement.svelte";
+
+  export let job;
+  export let jobTags = job.tags;
+  export let showTagedit = false;
+  export let username = null;
+  export let authlevel= null;
+  export let roles = null;
+
+  function formatDuration(duration) {
+    const hours = Math.floor(duration / 3600);
+    duration -= hours * 3600;
+    const minutes = Math.floor(duration / 60);
+    duration -= minutes * 60;
+    const seconds = duration;
+    return `${hours}:${("0" + minutes).slice(-2)}:${("0" + seconds).slice(-2)}`;
+  }
+
+  function getStateColor(state) {
+    switch (state) {
+      case "running":
+        return "success";
+      case "completed":
+        return "primary";
+      default:
+        return "danger";
+    }
+  }
+</script>
+
+<div>
+  <p class="mb-2">
+    <span class="fw-bold"
+      ><a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
+      ({job.cluster})</span
+    >
+    {#if job.metaData?.jobName}
+      <br />
+      {#if job.metaData?.jobName.length <= 25}
+        <div>{job.metaData.jobName}</div>
+      {:else}
+        <div
+          class="truncate"
+          style="cursor:help; width:230px;"
+          title={job.metaData.jobName}
+        >
+          {job.metaData.jobName}
+        </div>
+      {/if}
+    {/if}
+    {#if job.arrayJobId}
+      Array Job: <a
+        href="/monitoring/jobs/?arrayJobId={job.arrayJobId}&cluster={job.cluster}"
+        target="_blank">#{job.arrayJobId}</a
+      >
+    {/if}
+  </p>
+
+  <p class="mb-2">
+    <Icon name="person-fill" />
+    <a class="fst-italic" href="/monitoring/user/{job.user}" target="_blank">
+      {scrambleNames ? scramble(job.user) : job.user}
+    </a>
+    {#if job.userData && job.userData.name}
+      ({scrambleNames ? scramble(job.userData.name) : job.userData.name})
+    {/if}
+    {#if job.project && job.project != "no project"}
+      <br />
+      <Icon name="people-fill" />
+      <a
+        class="fst-italic"
+        href="/monitoring/jobs/?project={job.project}&projectMatch=eq"
+        target="_blank"
+      >
+        {scrambleNames ? scramble(job.project) : job.project}
+      </a>
+    {/if}
+  </p>
+
+  <p class="mb-2">
+    {#if job.numNodes == 1}
+      {job.resources[0].hostname}
+    {:else}
+      {job.numNodes}
+    {/if}
+    <Icon name="pc-horizontal" />
+    {#if job.exclusive != 1}
+      (shared)
+    {/if}
+    {#if job.numAcc > 0}
+      , {job.numAcc} <Icon name="gpu-card" />
+    {/if}
+    {#if job.numHWThreads > 0}
+      , {job.numHWThreads} <Icon name="cpu" />
+    {/if}
+    <br />
+    {job.subCluster}
+  </p>
+
+  <p class="mb-2">
+    Start: <span class="fw-bold"
+      >{new Date(job.startTime).toLocaleString()}</span
+    >
+    <br />
+    Duration: <span class="fw-bold">{formatDuration(job.duration)}</span>
+    <Badge color={getStateColor(job.state)}>{job.state}</Badge>
+    {#if job.walltime}
+      <br />
+      Walltime: <span class="fw-bold">{formatDuration(job.walltime)}</span>
+    {/if}
+  </p>
+
+  {#if showTagedit}
+    <hr class="mt-0 mb-2"/>
+    <p class="mb-1">
+      <TagManagement bind:jobTags {job} {username} {authlevel} {roles} renderModal/> : 
+      {#if jobTags?.length > 0}
+        {#each jobTags as tag}
+          <Tag {tag}/>
+        {/each}
+      {:else}
+        <span style="font-size: 0.9rem; background-color: lightgray;" class="my-1 badge text-dark">No Tags</span>
+      {/if}
+    </p>
+  {:else}
+    <p class="mb-1">
+      {#each jobTags as tag}
+        <Tag {tag} />
+      {/each}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -0,0 +1,207 @@
+<!-- 
+    @component Data row for a single job displaying metric plots
+
+    Properties:
+    - `job Object`: The job object (GraphQL.Job)
+    - `metrics [String]`: Currently selected metrics
+    - `plotWidth Number`: Width of the sub-components
+    - `plotHeight Number?`: Height of the sub-components [Default: 275]
+    - `showFootprint Bool`: Display of footprint component for job
+    - `triggerMetricRefresh Bool?`: If changed to true from upstream, will trigger metric query
+ -->
+
+<script>
+  import { queryStore, gql, getContextClient } from "@urql/svelte";
+  import { getContext } from "svelte";
+  import { Card, Spinner } from "@sveltestrap/sveltestrap";
+  import { maxScope, checkMetricDisabled } from "../../generic/utils.js";
+  import JobInfo from "./NodeInfo.svelte";
+  import MetricPlot from "../../generic/plots/MetricPlot.svelte";
+  import JobFootprint from "../../generic/helper/JobFootprint.svelte";
+
+  export let job;
+  export let metrics;
+  export let plotWidth;
+  export let plotHeight = 275;
+  export let showFootprint;
+  export let triggerMetricRefresh = false;
+
+  const resampleConfig = getContext("resampling") || null;
+  const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
+  
+  let { id } = job;
+  let scopes = job.numNodes == 1
+    ? job.numAcc >= 1
+      ? ["core", "accelerator"]
+      : ["core"]
+    : ["node"];
+  let selectedResolution = resampleDefault;
+  let zoomStates = {};
+
+  const cluster = getContext("clusters").find((c) => c.name == job.cluster);
+  const client = getContextClient();
+  const query = gql`
+    query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!, $selectedResolution: Int) {
+      jobMetrics(id: $id, metrics: $metrics, scopes: $scopes, resolution: $selectedResolution) {
+        name
+        scope
+        metric {
+          unit {
+            prefix
+            base
+          }
+          timestep
+          statisticsSeries {
+            min
+            mean
+            median
+            max
+          }
+          series {
+            hostname
+            id
+            data
+            statistics {
+              min
+              avg
+              max
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  function handleZoom(detail, metric) {
+    if ( // States have to differ, causes deathloop if just set
+        (zoomStates[metric]?.x?.min !== detail?.lastZoomState?.x?.min) &&
+        (zoomStates[metric]?.y?.max !== detail?.lastZoomState?.y?.max)
+    ) {
+        zoomStates[metric] = {...detail.lastZoomState}
+    }
+
+    if (detail?.newRes) { // Triggers GQL
+        selectedResolution = detail.newRes
+    }
+  }
+
+  $: metricsQuery = queryStore({
+    client: client,
+    query: query,
+    variables: { id, metrics, scopes, selectedResolution },
+  });
+  
+  function refreshMetrics() {
+    metricsQuery = queryStore({
+      client: client,
+      query: query,
+      variables: { id, metrics, scopes, selectedResolution },
+      // requestPolicy: 'network-only' // use default cache-first for refresh
+    });
+  }
+
+  $: if (job.state === 'running' && triggerMetricRefresh === true) {
+    refreshMetrics();
+  }
+
+  // Helper
+  const selectScope = (jobMetrics) =>
+    jobMetrics.reduce(
+      (a, b) =>
+        maxScope([a.scope, b.scope]) == a.scope
+          ? job.numNodes > 1
+            ? a
+            : b
+          : job.numNodes > 1
+            ? b
+            : a,
+      jobMetrics[0],
+    );
+
+  const sortAndSelectScope = (jobMetrics) =>
+    metrics
+      .map((name) => jobMetrics.filter((jobMetric) => jobMetric.name == name))
+      .map((jobMetrics) => ({
+        disabled: false,
+        data: jobMetrics.length > 0 ? selectScope(jobMetrics) : null,
+      }))
+      .map((jobMetric) => {
+        if (jobMetric.data) {
+          return {
+            disabled: checkMetricDisabled(
+              jobMetric.data.name,
+              job.cluster,
+              job.subCluster,
+            ),
+            data: jobMetric.data,
+          };
+        } else {
+          return jobMetric;
+        }
+      });
+
+</script>
+
+<tr>
+  <td>
+    <JobInfo {job} />
+  </td>
+  {#if job.monitoringStatus == 0 || job.monitoringStatus == 2}
+    <td colspan={metrics.length}>
+      <Card body color="warning">Not monitored or archiving failed</Card>
+    </td>
+  {:else if $metricsQuery.fetching}
+    <td colspan={metrics.length} style="text-align: center;">
+      <Spinner secondary />
+    </td>
+  {:else if $metricsQuery.error}
+    <td colspan={metrics.length}>
+      <Card body color="danger" class="mb-3">
+        {$metricsQuery.error.message.length > 500
+          ? $metricsQuery.error.message.substring(0, 499) + "..."
+          : $metricsQuery.error.message}
+      </Card>
+    </td>
+  {:else}
+    {#if showFootprint}
+      <td>
+        <JobFootprint
+          {job}
+          width={plotWidth}
+          height="{plotHeight}px"
+          displayTitle={false}
+        />
+      </td>
+    {/if}
+    {#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric || i)}
+      <td>
+        <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
+        {#if metric.disabled == false && metric.data}
+          <MetricPlot
+            on:zoom={({detail}) => { handleZoom(detail, metric.data.name) }}
+            height={plotHeight}
+            timestep={metric.data.metric.timestep}
+            scope={metric.data.scope}
+            series={metric.data.metric.series}
+            statisticsSeries={metric.data.metric.statisticsSeries}
+            metric={metric.data.name}
+            {cluster}
+            subCluster={job.subCluster}
+            isShared={job.exclusive != 1}
+            numhwthreads={job.numHWThreads}
+            numaccs={job.numAcc}
+            zoomState={zoomStates[metric.data.name] || null}
+          />
+        {:else if metric.disabled == true && metric.data}
+          <Card body color="info"
+            >Metric disabled for subcluster <code
+              >{metric.data.name}:{job.subCluster}</code
+            ></Card
+          >
+        {:else}
+          <Card body color="warning">No dataset returned</Card>
+        {/if}
+      </td>
+    {/each}
+  {/if}
+</tr>