feat: Add colorization based on health level for panels and toolbar #2178
Conversation
|
I'll be writing the testcases for this. It would be great if you could take a look at it before testcases. Thanks! Edit: You can also suggest how to compute health(debatable name) across other panel profiling, time etc... |
|
|
||
| --djdt-health-bg-1: #4b3f1b; | ||
| --djdt-health-color-1: #ffe761; | ||
| --djdt-health-bc-1: #ffcc00; |
There was a problem hiding this comment.
What is bc? Background color? I think we prefer using variable names without abbreviations.
|
|
||
| #djDebug .djdt-toolbarhandle-health-2 { | ||
| border-color: var(--djdt-health-bc-2) !important; | ||
| } |
There was a problem hiding this comment.
Can you add a comment why all these !important are necessary? And/or remove them when they are not?
| @@ -31,7 +31,7 @@ | |||
| </ul> | |||
| </div> | |||
| <div class="djdt-hidden" id="djDebugToolbarHandle"> | |||
| <div title="{% translate 'Show toolbar' %}" id="djShowToolBarButton"> | |||
| <div title="{% translate 'Show toolbar' %}" id="djShowToolBarButton" class="{% if toolbar.health_level %} djdt-toolbarhandle-health-{{ toolbar.health_level }}{% endif %}"> | |||
There was a problem hiding this comment.
I generally do not like uppercase letters much in ID and class attributes, but I wonder if we should keep capitalization for internal consistency here? Any thoughts?
| Return the maximum health level across all panels. | ||
| This is used to color the toolbar hidden button. | ||
| """ | ||
| return max(panel.health_level for panel in self.panels) |
There was a problem hiding this comment.
What happens when self.panels is empty? Is it possible? I think you might want to provide a default value as a fallback (max((...), NONE))
| @@ -401,3 +402,9 @@ def is_processable_html_response(response): | |||
| and content_encoding == "" | |||
| and content_type in _HTML_TYPES | |||
| ) | |||
|
|
|||
|
|
|||
| class ToolbarHealthLevel(IntEnum): | |||
There was a problem hiding this comment.
I think this could be called HealthLevel only since it actually doesn't only apply to the toolbar itself but also to individual panels.
Description
This PR introduces a unified health/alert state for Django Debug Toolbar panels and updates the UI to reflect panel.
The name
healthis debatable, but thealertwas already taken by the panel.Key Changes
Adds a
ToolbarHealthLevelenum (NONE,WARNING,CRITICAL) for numeric health states.Adds a
health_levelproperty to the basePanelclass, allowing panels to report their health status.Implements
health_levelinAlertsPanelandSQLPanelfor alert and slow query detection.The toolbar now computes the maximum health level across all panels and uses it to color the hidden toolbar handle.
UI Updates:
Motivation
Checklist:
docs/changes.rst.