Closes #8232: Add color show full 100% utilization #8816
Conversation
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| {% endif %} |
| aria-valuenow="{{ utilization }}" | ||
| {% if is_full_danger %} | ||
| class="progress-bar" | ||
| style="width: {{ utilization }}%; background-color: #800080;" |
There was a problem hiding this comment.
Do you have any demo image for this? Including all four colors in light mode and dark mode?
There was a problem hiding this comment.
Sure, I choose constants color for 100% utilization
There was a problem hiding this comment.
Darkmode:
Lightmode:
| is_full_danger = False | ||
| if utilization == 100: | ||
| is_full_danger = True |
There was a problem hiding this comment.
This logic can be cleaned up considerably. There should be no need to store a variable indicating whether the utilization value is 100: we can just reference utilization directly.
There was a problem hiding this comment.
Oh sorry, I misunderstand something
| utilization = int(float(child_ips.size) / prefix_size * 100) | ||
| utilization = float(child_ips.size) / prefix_size * 100 | ||
|
|
||
| return min(utilization, 100) |
There was a problem hiding this comment.
The call to min() is needed to address instances where utilization is reported to be greater than 100%.
There was a problem hiding this comment.
Sorry, I forgot that context
| utilization = int(float(child_prefixes.size) / self.prefix.size * 100) | ||
| utilization = float(child_prefixes.size) / self.prefix.size * 100 | ||
|
|
||
| return min(utilization, 100) |
| aria-valuenow="{{ utilization }}" | ||
| {% if utilization == 100 %} | ||
| class="progress-bar" | ||
| style="width: {{ utilization }}%; background-color: #800080;" |
There was a problem hiding this comment.
The bar color needs to be changed by modifying the bar_class context var inside the utilization_graph template tag. (bg-secondary seems like a good choice.) Please avoid hard-coding color values directly in the HTML.
|
Thanks for your work on this @tranthang2404! |
3 participants
Fixes: #8232