cc-backend/web/frontend/src/StatsTableEntry.svelte

<script>
  import { Icon } from "@sveltestrap/sveltestrap";

  export let host;
  export let metric;
  export let scope;
  export let jobMetrics;

  function compareNumbers(a, b) {
    return a.id - b.id;
  }

  function sortByField(field) {
    let s = sorting[field];
    if (s.active) {
      s.dir = s.dir == "up" ? "down" : "up";
    } else {
      for (let field in sorting) sorting[field].active = false;
      s.active = true;
    }

    sorting = { ...sorting };
    series = series.sort((a, b) => {
      if (a == null || b == null) return -1;

      if (field === "id") {
        return s.dir != "up" ? a[field] - b[field] : b[field] - a[field];
      } else {
        return s.dir != "up"
          ? a.statistics[field] - b.statistics[field]
          : b.statistics[field] - a.statistics[field];
      }
    });
  }

  let sorting = {
    id: { dir: "down", active: true },
    min: { dir: "up", active: false },
    avg: { dir: "up", active: false },
    max: { dir: "up", active: false },
  };

  $: series = jobMetrics
    .find((jm) => jm.name == metric && jm.scope == scope)
    ?.metric.series.filter((s) => s.hostname == host && s.statistics != null)
    ?.sort(compareNumbers);
</script>

{#if series == null || series.length == 0}
  <td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
{:else if series.length == 1 && scope == "node"}
  <td>
    {series[0].statistics.min}
  </td>
  <td>
    {series[0].statistics.avg}
  </td>
  <td>
    {series[0].statistics.max}
  </td>
{:else}
  <td colspan="4">
    <table style="width: 100%;">
      <tr>
        {#each ["id", "min", "avg", "max"] as field}
          <th on:click={() => sortByField(field)}>
            Sort
            <Icon
              name="caret-{sorting[field].dir}{sorting[field].active
                ? '-fill'
                : ''}"
            />
          </th>
        {/each}
      </tr>
      {#each series as s, i}
        <tr>
          <th>{s.id ?? i}</th>
          <td>{s.statistics.min}</td>
          <td>{s.statistics.avg}</td>
          <td>{s.statistics.max}</td>
        </tr>
      {/each}
    </table>
  </td>
{/if}