The file /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend/src/status/dashdetails/UsageDash.svelte has been updated. All occurrences of '$topStatsQuery.data.topProjectJobs' were successfully replaced with 'topProjectJobs'.

<Row class="justify-content-between">
  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
    <InputGroup>
      <InputGroupText>
        <Icon name="bar-chart-line-fill" />
      </InputGroupText>
      <InputGroupText>Duration Bin Size</InputGroupText>
      <Input type="select" bind:value={numDurationBins}>
        {#each durationBinOptions as dbin}
          <option value={dbin}>{dbin}</option>
        {/each}
      </Input>
    </InputGroup>
  </Col>
  <Col xs="12" md="5" lg="4" xl="3">
    <Refresher
      initially={120}
      onRefresh={() => {
        pagingState = { page: 1, itemsPerPage: 10 };
        selectedHistograms = [...$state.snapshot(selectedHistograms)];
      }}
    />
  </Col>
</Row>

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
        <Histogram
          data={convert2uplot(
            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
          )}
          title="Duration Distribution"
          xlabel="Current Job Runtimes"
          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
          height="275"
          usesBins
          xtime
          enableFlip
        />
      {/key}
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Jobs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-jobs-users"
          size={colWidthJobs * 0.75}
          sliceLabel="Jobs"
          quantities={topUserJobs.map(
            (tu) => tu["totalJobs"],
          )}
          entities={topUserJobs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Jobs

        {#each topUserJobs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-jobs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalJobs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Jobs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-jobs-projects"
        size={colWidthJobs * 0.75}
        sliceLabel={"Jobs"}
        quantities={$topStatsQuery.data.topProjectJobs.map(
          (tp) => tp["totalJobs"],
        )}
        entities={$topStatsQuery.data.topProjectJobs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Jobs

        {#each $topStatsQuery.data.topProjectJobs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalJobs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render job status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
        )}
        title="Number of Nodes Distribution"
        xlabel="Allocated Nodes"
        xunit="Nodes"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Nodes

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-nodes-users"
          size={colWidthNodes * 0.75}
          sliceLabel="Nodes"
          quantities={$topStatsQuery.data.topUserNodes.map(
            (tu) => tu["totalNodes"],
          )}
          entities={$topStatsQuery.data.topUserNodes.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Nodes

        {#each $topStatsQuery.data.topUserNodes as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-nodes-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalNodes"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Nodes

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-nodes-projects"
        size={colWidthNodes * 0.75}
        sliceLabel={"Nodes"}
        quantities={$topStatsQuery.data.topProjectNodes.map(
          (tp) => tp["totalNodes"],
        )}
        entities={$topStatsQuery.data.topProjectNodes.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Nodes

        {#each $topStatsQuery.data.topProjectNodes as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalNodes"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render node status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
        )}
        title="Number of Accelerators Distribution"
        xlabel="Allocated Accs"
        xunit="Accs"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: GPUs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-accs-users"
          size={colWidthAccs * 0.75}
          sliceLabel="GPUs"
          quantities={$topStatsQuery.data.topUserAccs.map(
            (tu) => tu["totalAccs"],
          )}
          entities={$topStatsQuery.data.topUserAccs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          GPUs

        {#each $topStatsQuery.data.topUserAccs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-accs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalAccs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: GPUs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-accs-projects"
        size={colWidthAccs * 0.75}
        sliceLabel={"GPUs"}
        quantities={$topStatsQuery.data.topProjectAccs.map(
          (tp) => tp["totalAccs"],
        )}
        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          GPUs

        {#each $topStatsQuery.data.topProjectAccs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalAccs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render accelerator status charts: No data!</Card
  >
{/if}

-        quantities={$topStatsQuery.data.topProjectJobs.map(

+        quantities={topProjectJobs.map(

-        entities={$topStatsQuery.data.topProjectJobs.map((tp) =>

+        entities={topProjectJobs.map((tp) =>

-        {#each $topStatsQuery.data.topProjectJobs as tp, i}

+        {#each topProjectJobs as tp, i}


The file /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend/src/status/dashdetails/UsageDash.svelte has been updated. All occurrences of '$topStatsQuery.data.topUserNodes' were successfully replaced with 'topUserNodes'.

<Row class="justify-content-between">
  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
    <InputGroup>
      <InputGroupText>
        <Icon name="bar-chart-line-fill" />
      </InputGroupText>
      <InputGroupText>Duration Bin Size</InputGroupText>
      <Input type="select" bind:value={numDurationBins}>
        {#each durationBinOptions as dbin}
          <option value={dbin}>{dbin}</option>
        {/each}
      </Input>
    </InputGroup>
  </Col>
  <Col xs="12" md="5" lg="4" xl="3">
    <Refresher
      initially={120}
      onRefresh={() => {
        pagingState = { page: 1, itemsPerPage: 10 };
        selectedHistograms = [...$state.snapshot(selectedHistograms)];
      }}
    />
  </Col>
</Row>

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
        <Histogram
          data={convert2uplot(
            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
          )}
          title="Duration Distribution"
          xlabel="Current Job Runtimes"
          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
          height="275"
          usesBins
          xtime
          enableFlip
        />
      {/key}
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Jobs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-jobs-users"
          size={colWidthJobs * 0.75}
          sliceLabel="Jobs"
          quantities={topUserJobs.map(
            (tu) => tu["totalJobs"],
          )}
          entities={topUserJobs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Jobs

        {#each topUserJobs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-jobs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalJobs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Jobs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-jobs-projects"
        size={colWidthJobs * 0.75}
        sliceLabel={"Jobs"}
        quantities={topProjectJobs.map(
          (tp) => tp["totalJobs"],
        )}
        entities={topProjectJobs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Jobs

        {#each topProjectJobs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalJobs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render job status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
        )}
        title="Number of Nodes Distribution"
        xlabel="Allocated Nodes"
        xunit="Nodes"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Nodes

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-nodes-users"
          size={colWidthNodes * 0.75}
          sliceLabel="Nodes"
          quantities={$topStatsQuery.data.topUserNodes.map(
            (tu) => tu["totalNodes"],
          )}
          entities={$topStatsQuery.data.topUserNodes.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Nodes

        {#each $topStatsQuery.data.topUserNodes as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-nodes-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalNodes"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Nodes

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-nodes-projects"
        size={colWidthNodes * 0.75}
        sliceLabel={"Nodes"}
        quantities={$topStatsQuery.data.topProjectNodes.map(
          (tp) => tp["totalNodes"],
        )}
        entities={$topStatsQuery.data.topProjectNodes.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Nodes

        {#each $topStatsQuery.data.topProjectNodes as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalNodes"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render node status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
        )}
        title="Number of Accelerators Distribution"
        xlabel="Allocated Accs"
        xunit="Accs"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: GPUs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-accs-users"
          size={colWidthAccs * 0.75}
          sliceLabel="GPUs"
          quantities={$topStatsQuery.data.topUserAccs.map(
            (tu) => tu["totalAccs"],
          )}
          entities={$topStatsQuery.data.topUserAccs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          GPUs

        {#each $topStatsQuery.data.topUserAccs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-accs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalAccs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: GPUs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-accs-projects"
        size={colWidthAccs * 0.75}
        sliceLabel={"GPUs"}
        quantities={$topStatsQuery.data.topProjectAccs.map(
          (tp) => tp["totalAccs"],
        )}
        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          GPUs

        {#each $topStatsQuery.data.topProjectAccs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalAccs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render accelerator status charts: No data!</Card
  >
{/if}

-          quantities={$topStatsQuery.data.topUserNodes.map(

+          quantities={topUserNodes.map(

-          entities={$topStatsQuery.data.topUserNodes.map((tu) =>

+          entities={topUserNodes.map((tu) =>

-        {#each $topStatsQuery.data.topUserNodes as tu, i}

><Icon name="circle-fill" style="color: {legendColors(i)};" /></td


The file /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend/src/status/dashdetails/UsageDash.svelte has been updated. All occurrences of '$topStatsQuery.data.topProjectNodes' were successfully replaced with 'topProjectNodes'.

<Row class="justify-content-between">
  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
    <InputGroup>
      <InputGroupText>
        <Icon name="bar-chart-line-fill" />
      </InputGroupText>
      <InputGroupText>Duration Bin Size</InputGroupText>
      <Input type="select" bind:value={numDurationBins}>
        {#each durationBinOptions as dbin}
          <option value={dbin}>{dbin}</option>
        {/each}
      </Input>
    </InputGroup>
  </Col>
  <Col xs="12" md="5" lg="4" xl="3">
    <Refresher
      initially={120}
      onRefresh={() => {
        pagingState = { page: 1, itemsPerPage: 10 };
        selectedHistograms = [...$state.snapshot(selectedHistograms)];
      }}
    />
  </Col>
</Row>

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
        <Histogram
          data={convert2uplot(
            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
          )}
          title="Duration Distribution"
          xlabel="Current Job Runtimes"
          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
          height="275"
          usesBins
          xtime
          enableFlip
        />
      {/key}
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Jobs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-jobs-users"
          size={colWidthJobs * 0.75}
          sliceLabel="Jobs"
          quantities={topUserJobs.map(
            (tu) => tu["totalJobs"],
          )}
          entities={topUserJobs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Jobs

        {#each topUserJobs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-jobs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalJobs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Jobs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-jobs-projects"
        size={colWidthJobs * 0.75}
        sliceLabel={"Jobs"}
        quantities={topProjectJobs.map(
          (tp) => tp["totalJobs"],
        )}
        entities={topProjectJobs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Jobs

        {#each topProjectJobs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalJobs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render job status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
        )}
        title="Number of Nodes Distribution"
        xlabel="Allocated Nodes"
        xunit="Nodes"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Nodes

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-nodes-users"
          size={colWidthNodes * 0.75}
          sliceLabel="Nodes"
          quantities={topUserNodes.map(
            (tu) => tu["totalNodes"],
          )}
          entities={topUserNodes.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Nodes

        {#each topUserNodes as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-nodes-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalNodes"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Nodes

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-nodes-projects"
        size={colWidthNodes * 0.75}
        sliceLabel={"Nodes"}
        quantities={$topStatsQuery.data.topProjectNodes.map(
          (tp) => tp["totalNodes"],
        )}
        entities={$topStatsQuery.data.topProjectNodes.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Nodes

        {#each $topStatsQuery.data.topProjectNodes as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalNodes"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render node status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
        )}
        title="Number of Accelerators Distribution"
        xlabel="Allocated Accs"
        xunit="Accs"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: GPUs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-accs-users"
          size={colWidthAccs * 0.75}
          sliceLabel="GPUs"
          quantities={$topStatsQuery.data.topUserAccs.map(
            (tu) => tu["totalAccs"],
          )}
          entities={$topStatsQuery.data.topUserAccs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          GPUs

        {#each $topStatsQuery.data.topUserAccs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-accs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalAccs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: GPUs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-accs-projects"
        size={colWidthAccs * 0.75}
        sliceLabel={"GPUs"}
        quantities={$topStatsQuery.data.topProjectAccs.map(
          (tp) => tp["totalAccs"],
        )}
        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          GPUs

        {#each $topStatsQuery.data.topProjectAccs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalAccs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render accelerator status charts: No data!</Card
  >
{/if}

-        quantities={$topStatsQuery.data.topProjectNodes.map(

+        quantities={topProjectNodes.map(

-        entities={$topStatsQuery.data.topProjectNodes.map((tp) =>

+        entities={topProjectNodes.map((tp) =>

-        {#each $topStatsQuery.data.topProjectNodes as tp, i}

+        {#each topProjectNodes as tp, i}


The file /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend/src/status/dashdetails/UsageDash.svelte has been updated. All occurrences of '$topStatsQuery.data.topUserAccs' were successfully replaced with 'topUserAccs'.

<Row class="justify-content-between">
  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
    <InputGroup>
      <InputGroupText>
        <Icon name="bar-chart-line-fill" />
      </InputGroupText>
      <InputGroupText>Duration Bin Size</InputGroupText>
      <Input type="select" bind:value={numDurationBins}>
        {#each durationBinOptions as dbin}
          <option value={dbin}>{dbin}</option>
        {/each}
      </Input>
    </InputGroup>
  </Col>
  <Col xs="12" md="5" lg="4" xl="3">
    <Refresher
      initially={120}
      onRefresh={() => {
        pagingState = { page: 1, itemsPerPage: 10 };
        selectedHistograms = [...$state.snapshot(selectedHistograms)];
      }}
    />
  </Col>
</Row>

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
        <Histogram
          data={convert2uplot(
            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
          )}
          title="Duration Distribution"
          xlabel="Current Job Runtimes"
          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
          height="275"
          usesBins
          xtime
          enableFlip
        />
      {/key}
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Jobs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-jobs-users"
          size={colWidthJobs * 0.75}
          sliceLabel="Jobs"
          quantities={topUserJobs.map(
            (tu) => tu["totalJobs"],
          )}
          entities={topUserJobs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Jobs

        {#each topUserJobs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-jobs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalJobs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Jobs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-jobs-projects"
        size={colWidthJobs * 0.75}
        sliceLabel={"Jobs"}
        quantities={topProjectJobs.map(
          (tp) => tp["totalJobs"],
        )}
        entities={topProjectJobs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Jobs

        {#each topProjectJobs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalJobs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render job status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
        )}
        title="Number of Nodes Distribution"
        xlabel="Allocated Nodes"
        xunit="Nodes"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Nodes

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-nodes-users"
          size={colWidthNodes * 0.75}
          sliceLabel="Nodes"
          quantities={topUserNodes.map(
            (tu) => tu["totalNodes"],
          )}
          entities={topUserNodes.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Nodes

        {#each topUserNodes as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-nodes-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalNodes"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Nodes

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-nodes-projects"
        size={colWidthNodes * 0.75}
        sliceLabel={"Nodes"}
        quantities={topProjectNodes.map(
          (tp) => tp["totalNodes"],
        )}
        entities={topProjectNodes.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Nodes

        {#each topProjectNodes as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalNodes"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render node status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
        )}
        title="Number of Accelerators Distribution"
        xlabel="Allocated Accs"
        xunit="Accs"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: GPUs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-accs-users"
          size={colWidthAccs * 0.75}
          sliceLabel="GPUs"
          quantities={$topStatsQuery.data.topUserAccs.map(
            (tu) => tu["totalAccs"],
          )}
          entities={$topStatsQuery.data.topUserAccs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          GPUs

        {#each $topStatsQuery.data.topUserAccs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-accs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalAccs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: GPUs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-accs-projects"
        size={colWidthAccs * 0.75}
        sliceLabel={"GPUs"}
        quantities={$topStatsQuery.data.topProjectAccs.map(
          (tp) => tp["totalAccs"],
        )}
        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          GPUs

        {#each $topStatsQuery.data.topProjectAccs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalAccs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render accelerator status charts: No data!</Card
  >
{/if}

-          quantities={$topStatsQuery.data.topUserAccs.map(

-          entities={$topStatsQuery.data.topUserAccs.map((tu) =>

+          entities={topUserAccs.map((tu) =>

-        {#each $topStatsQuery.data.topUserAccs as tu, i}


The file /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend/src/status/dashdetails/UsageDash.svelte has been updated. All occurrences of '$topStatsQuery.data.topProjectAccs' were successfully replaced with 'topProjectAccs'.

<Row class="justify-content-between">
  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
    <InputGroup>
      <InputGroupText>
        <Icon name="bar-chart-line-fill" />
      </InputGroupText>
      <InputGroupText>Duration Bin Size</InputGroupText>
      <Input type="select" bind:value={numDurationBins}>
        {#each durationBinOptions as dbin}
          <option value={dbin}>{dbin}</option>
        {/each}
      </Input>
    </InputGroup>
  </Col>
  <Col xs="12" md="5" lg="4" xl="3">
    <Refresher
      initially={120}
      onRefresh={() => {
        pagingState = { page: 1, itemsPerPage: 10 };
        selectedHistograms = [...$state.snapshot(selectedHistograms)];
      }}
    />
  </Col>
</Row>

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      {#key $nodeStatusQuery.data.jobsStatistics[0].histDuration}
        <Histogram
          data={convert2uplot(
            $nodeStatusQuery.data.jobsStatistics[0].histDuration,
          )}
          title="Duration Distribution"
          xlabel="Current Job Runtimes"
          xunit="Runtime"
          ylabel="Number of Jobs"
          yunit="Jobs"
          height="275"
          usesBins
          xtime
          enableFlip
        />
      {/key}
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Jobs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-jobs-users"
          size={colWidthJobs * 0.75}
          sliceLabel="Jobs"
          quantities={topUserJobs.map(
            (tu) => tu["totalJobs"],
          )}
          entities={topUserJobs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Jobs

        {#each topUserJobs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-jobs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalJobs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Jobs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-jobs-projects"
        size={colWidthJobs * 0.75}
        sliceLabel={"Jobs"}
        quantities={topProjectJobs.map(
          (tp) => tp["totalJobs"],
        )}
        entities={topProjectJobs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Jobs

        {#each topProjectJobs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalJobs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render job status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumNodes,
        )}
        title="Number of Nodes Distribution"
        xlabel="Allocated Nodes"
        xunit="Nodes"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: Nodes

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-nodes-users"
          size={colWidthNodes * 0.75}
          sliceLabel="Nodes"
          quantities={topUserNodes.map(
            (tu) => tu["totalNodes"],
          )}
          entities={topUserNodes.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          Nodes

        {#each topUserNodes as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-nodes-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalNodes"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: Nodes

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-nodes-projects"
        size={colWidthNodes * 0.75}
        sliceLabel={"Nodes"}
        quantities={topProjectNodes.map(
          (tp) => tp["totalNodes"],
        )}
        entities={topProjectNodes.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          Nodes

        {#each topProjectNodes as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalNodes"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render node status charts: No data!</Card
  >
{/if}

{#if $topStatsQuery?.fetching || $nodeStatusQuery?.fetching}
  <Spinner />
{:else if $topStatsQuery?.data && $nodeStatusQuery?.data}
  <Row>
    <Col xs="12" lg="4" class="p-2">
      <Histogram
        data={convert2uplot(
          $nodeStatusQuery.data.jobsStatistics[0].histNumAccs,
        )}
        title="Number of Accelerators Distribution"
        xlabel="Allocated Accs"
        xunit="Accs"
        ylabel="Number of Jobs"
        yunit="Jobs"
        height="275"
        enableFlip
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

Top Users: GPUs

        <Pie
          {useAltColors}
          canvasId="{canvasPrefix}-hpcpie-accs-users"
          size={colWidthAccs * 0.75}
          sliceLabel="GPUs"
          quantities={topUserAccs.map(
            (tu) => tu["totalAccs"],
          )}
          entities={topUserAccs.map((tu) =>
            scrambleNames ? scramble(tu.id) : tu.id,
          )}
        />

    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          User
          GPUs

        {#each topUserAccs as tu, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tu.id) : tu.id}

            {#if tu?.name}
              <Tooltip
                target={`${canvasPrefix}-topName-accs-${tu.id}`}
                placement="left"
                >{scrambleNames ? scramble(tu.name) : tu.name}</Tooltip
              >
            {/if}
            {tu["totalAccs"]}

        {/each}

    </Col>

    <Col xs="6" md="3" lg="2" class="p-2">

Top Projects: GPUs

      <Pie
        {useAltColors}
        canvasId="{canvasPrefix}-hpcpie-accs-projects"
        size={colWidthAccs * 0.75}
        sliceLabel={"GPUs"}
        quantities={$topStatsQuery.data.topProjectAccs.map(
          (tp) => tp["totalAccs"],
        )}
        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>
          scrambleNames ? scramble(tp.id) : tp.id,
        )}
      />
    </Col>
    <Col xs="6" md="3" lg="2" class="p-2">

          Project
          GPUs

        {#each $topStatsQuery.data.topProjectAccs as tp, i}

            <Icon name="circle-fill" style="color: {legendColors(i)};" />

              {scrambleNames ? scramble(tp.id) : tp.id}

            {tp["totalAccs"]}

        {/each}

    </Col>
  </Row>
{:else}
  <Card class="mx-4" body color="warning"
    >Cannot render accelerator status charts: No data!</Card
  >
{/if}

-        quantities={$topStatsQuery.data.topProjectAccs.map(

+        quantities={topProjectAccs.map(

-        entities={$topStatsQuery.data.topProjectAccs.map((tp) =>

+        entities={topProjectAccs.map((tp) =>

-        {#each $topStatsQuery.data.topProjectAccs as tp, i}

+        {#each topProjectAccs as tp, i}

><Icon name="circle-fill" style="color: {legendColors(i)};" /></td


Now let's run the verification steps — frontend build and backend build + tests in parallel:


Bash

cd /Users/jan/prg/ClusterCockpit/cc-backend/web/frontend && npm run build 2>&1 | tail -20

Build frontend


Build Go backend


node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dom/hydration.js -> node_modules/svelte/src/internal/client/dom/operations.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dev/equality.js -> node_modules/svelte/src/internal/client/proxy.js -> node_modules/svelte/src/internal/client/runtime.js
...and 37 more
created public/build/dashpublic.js in 3.6s

src/config.entrypoint.js → public/build/config.js...
(!) Circular dependencies
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dom/hydration.js -> node_modules/svelte/src/internal/client/dom/operations.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dev/equality.js -> node_modules/svelte/src/internal/client/proxy.js -> node_modules/svelte/src/internal/client/runtime.js
...and 37 more
created public/build/config.js in 2.7s

src/logs.entrypoint.js → public/build/logs.js...
(!) Circular dependencies
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/runtime.js
node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dom/hydration.js -> node_modules/svelte/src/internal/client/dom/operations.js
node_modules/svelte/src/internal/client/runtime.js -> node_modules/svelte/src/internal/client/reactivity/effects.js -> node_modules/svelte/src/internal/client/dom/operations.js -> node_modules/svelte/src/internal/client/dev/equality.js -> node_modules/svelte/src/internal/client/proxy.js -> node_modules/svelte/src/internal/client/runtime.js
...and 35 more
created public/build/logs.js in 1.3s


go: warning: "./..." matched no packages


cd /Users/jan/prg/ClusterCockpit/cc-backend && go build ./cmd/cc-backend 2>&1

Build cc-backend binary


(Bash completed with no output)


Run repository tests


ok  	github.com/ClusterCockpit/cc-backend/internal/repository	0.978s


All 4 changes are implemented and verified:

1. **Partial indexes** — Migration 14 creates partial covering indexes `WHERE job_state = 'running'` for user/project/subcluster groupings. Version bumped to 14. The `BuildWhereClause` now inlines the literal state value (`job.job_state = 'running'`) so SQLite matches the partial index instead of using a parameterized placeholder.

2. **Request-scoped cache** — `stats_cache.go` provides a `statsGroupCache` injected per GraphQL operation via `AroundOperations` middleware. When the same `(filter, groupBy)` pair is requested multiple times (e.g. topUserJobs, topUserNodes, topUserAccs), the DB query runs only once; sort+page is done in Go.

3. **Parallel histograms** — `AddHistograms` now runs all 4 histogram queries concurrently using `errgroup.WithContext`.

4. **Frontend consolidation** — `UsageDash.svelte` sends 2 GraphQL aliases (allUsers, allProjects) requesting all fields, then derives 6 sorted+sliced top-10 lists client-side via `$derived`.


commit it


Let me gather the commit info.


Show working tree status


On branch hotfix
Your branch is behind 'origin/hotfix' by 1 commit, and can be fast-forwarded.
  (use "git pull" to update your local branch)

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   cmd/cc-backend/server.go
	modified:   go.mod
	modified:   internal/graph/schema.resolvers.go
	modified:   internal/repository/jobQuery.go
	modified:   internal/repository/migration.go
	modified:   internal/repository/stats.go
	modified:   web/frontend/src/status/dashdetails/UsageDash.svelte

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	internal/graph/stats_cache.go
	internal/repository/migrations/sqlite3/14_running-partial-indexes.down.sql
	internal/repository/migrations/sqlite3/14_running-partial-indexes.up.sql

no changes added to commit (use "git add" and/or "git commit -a")


Show diff summary


 cmd/cc-backend/server.go                           |   7 ++
 go.mod                                             |   2 +-
 internal/graph/schema.resolvers.go                 |  15 ++-
 internal/repository/jobQuery.go                    |   4 +-
 internal/repository/migration.go                   |   3 +-
 internal/repository/stats.go                       |  58 ++++++----
 .../src/status/dashdetails/UsageDash.svelte        | 117 ++++++++++-----------
 7 files changed, 119 insertions(+), 87 deletions(-)


Show recent commits


cbe46c35 Merge branch 'hotfix' of github.com:ClusterCockpit/cc-backend into hotfix
0037d969 Consolidate UsageDash into single GraphQL query
dd3e5427 Add covering indexes for status/dashboard queries (migration 13)
e6669801 fix typo
c238f68a reduce unnecessary complexity


git add cmd/cc-backend/server.go go.mod internal/graph/stats_cache.go internal/graph/schema.resolvers.go internal/repository/jobQuery.go internal/repository/migration.go internal/repository/stats.go internal/repository/migrations/sqlite3/14_running-partial-indexes.up.sql internal/repository/migrations/sqlite3/14_running-partial-indexes.down.sql web/frontend/src/status/dashdetails/UsageDash.svelte

Stage all changed files


git commit -m "$(cat <<'EOF'
Optimize usage dashboard: partial indexes, request cache, parallel histograms

- Add migration 14: partial covering indexes WHERE job_state='running'
  for user/project/subcluster groupings (tiny B-tree vs full table)
- Inline literal state value in BuildWhereClause so SQLite matches
  partial indexes instead of parameterized placeholders
- Add per-request statsGroupCache (sync.Once per filter+groupBy key)
  so identical grouped stats queries execute only once per GQL operation
- Parallelize 4 histogram queries in AddHistograms using errgroup
- Consolidate frontend from 6 GQL aliases to 2, sort+slice top-10
  client-side via $derived

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
EOF
)"

Create commit