Proposal: Enhance CPU and Memory Meters in Dozzle Interface with Additional Load Levels

[homelab-alpha]

Hi @amir20,

I would like to propose an adjustment to the CPU and Memory meters on the Dozzle interface. The goal is to increase the number of levels from three to five, so that the measurements are less rough and the load is represented more accurately.

The current three levels are sometimes too rough, making it difficult to observe subtle changes in load. As a result, I suggest we divide the levels as follows:

meter::-webkit-meter-optimum-value {
  background: var(--color-green); /* 0% - 20% (very low load) */
}

meter::-webkit-meter-low-value {
  background: var(--color-light-green); /* 21% - 40% (low load) */
}

meter::-webkit-meter-medium-value {
  background: var(--color-yellow); /* 41% - 60% (medium load) */
}

meter::-webkit-meter-high-value {
  background: var(--color-orange); /* 61% - 80% (high load) */
}

meter::-webkit-meter-very-high-value {
  background: var(--color-red); /* 81% - 100% (very high load) */
}

With these changes, Dozzle will be able to display the load in five distinct categories instead of the current three. This will provide users with a more detailed view of the system's status.

Let me know what you think!

[amir20]

I am not against this. But are those valid css values? I wasn't able to find anything that suggest they are. When I was looking at this I only saw the three colors as options.

[homelab-alpha]

That’s a good question. To be honest, I didn’t really check whether the CSS is valid, since the suggestion came from Copilot when it asked whether it was possible to use multiple levels.

After some research, it appears that the CSS works partially in Safari and Chrome, but not in Firefox.

I did read an article about this on CSS-Tricks. I’ll look into it further tomorrow.

[homelab-alpha]

Okay, I’m a domdom. The HTML5 element only supports three levels through the low, high, and optimum attributes. What I suggested turns out not to be technically possible.

I apologize for proposing something that can’t be implemented in this form. Next time, I’ll make sure to research more thoroughly whether something is actually feasible. My apologies again.

[amir20]

Haha. AI fail. Happens to the best of us.

[homelab-alpha]

Let me suggest an alternative that is feasible within the current implementation. Can we make the meter’s scaling less aggressive using the following?

</td>
<td v-if="isVisible('cpu')">
  <div class="flex flex-row items-center gap-1">
    <meter
      class="flex-1 overflow-hidden rounded-3xl"
      min="0"
      max="100"
      low="60"
      optimum="0"
      high="80"
      :value="Math.min(container.movingAverage.cpu, 100)"
    ></meter>
    <span class="w-8 text-right text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
  </div>
</td>
<td v-if="isVisible('mem')">
  <div class="flex flex-row items-center gap-1">
    <meter
      class="flex-1 overflow-hidden rounded-3xl"
      min="0"
      max="100"
      low="70"
      optimum="0"
      high="90"
      :value="container.movingAverage.memory"
    ></meter>
    <span class="w-8 text-right text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
  </div>
</td>

If you feel the memory thresholds are a bit too high, you could also apply the same settings as for the CPU.

[amir20]

Yea send a PR. I honestly had no idea what I was doing with the meters. I found the meter threshold to be so confusing. I just don't want to make them configurable. Just one setting for the average user. 😂

I'll test it when you send it.

[homelab-alpha]

You’re not the only one. I used this web tool to see how the values of the meters behave. I’ll create the PR tomorrow morning.

[homelab-alpha]

I almost forgot: the color settings for the HTML5 <meter> elements are configured as follows:

CPU meter:

• low = 60 → green from 0% to 60%
• high = 80 → orange from 61% to 80%
• above 80% = red from 81% to 100%

Memory meter:

• low = 70 → green from 0% to 70%
• high = 90 → orange from 71% to 90%
• above 90% = red from 91% to 100%

[homelab-alpha]

Closing Note: The proposed UI enhancements for average CPU and memory usage have been implemented.

• Related to: fix: Enhance accuracy of CPU usage metrics in the UI #3944