Re: [pve-devel] [PATCH pve-manager] ui: ceph status: add pg warning state

[Aaron Lauterer <a.lauterer@proxmox.com>]

The light blue used in .normal is a tad too light IMHO for the cake diagram. It 
is the light blue used in the light theme, for example to indicate the active 
element in the tree view.

What about using a stronger blue? I switched to .info-blue and it was definitely 
nicer. It might even be a good idea to specify a dedicated .working color CSS 
class in the ext6-pmx.css (widget-toolkit).

Another thing I noticed, in the commit message you are talking about PGs in 
critical state. But in the code we use "Error". I would suggest that we rename 
that to Critical to align it more with the nomenclature.

e.g.:

diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js
index e1bf425a..11dfb0d2 100644
--- a/www/manager6/ceph/StatusDetail.js
+++ b/www/manager6/ceph/StatusDetail.js
@@ -169,7 +169,7 @@ Ext.define('PVE.ceph.StatusDetail', {
         degraded: 3,
         undersized: 3,

-       // error
+       // critical
         backfill_toofull: 4,
         backfill_unfound: 4,
         down: 4,
@@ -201,7 +201,7 @@ Ext.define('PVE.ceph.StatusDetail', {
             cls: 'warning',
         },
         {
-           text: gettext('Error'),
+           text: gettext('Critical'),
             cls: 'critical',
         },
      ],

On 6/22/23 12:54, Alexandre Derumier wrote:
> Like ceph mgr dashboard, we need a warning state.
> 
> - set degraded && undersized as warning instead criticial
> 
> - add "normal" (light blue) color for working state
> 
> - use warning (orange) color for warning state
> 
> Signed-off-by: Alexandre Derumier <aderumier@odiso.com>
> ---
>   www/manager6/ceph/StatusDetail.js | 29 ++++++++++++++++++-----------
>   1 file changed, 18 insertions(+), 11 deletions(-)
> 
> diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js
> index d6c0763b..e1bf425a 100644
> --- a/www/manager6/ceph/StatusDetail.js
> +++ b/www/manager6/ceph/StatusDetail.js
> @@ -94,6 +94,7 @@ Ext.define('PVE.ceph.StatusDetail', {
>   	colors: [
>   	    '#CFCFCF',
>   	    '#21BF4B',
> +	    '#C2DDF2',
>   	    '#FFCC00',
>   	    '#FF6C59',
>   	],
> @@ -152,7 +153,6 @@ Ext.define('PVE.ceph.StatusDetail', {
>   	backfilling: 2,
>   	creating: 2,
>   	deep: 2,
> -	degraded: 2,
>   	forced_backfill: 2,
>   	forced_recovery: 2,
>   	peered: 2,
> @@ -165,17 +165,20 @@ Ext.define('PVE.ceph.StatusDetail', {
>   	snaptrim: 2,
>   	snaptrim_wait: 2,
>   
> -	// error
> -	backfill_toofull: 3,
> -	backfill_unfound: 3,
> -	down: 3,
> -	incomplete: 3,
> -	inconsistent: 3,
> -	recovery_toofull: 3,
> -	recovery_unfound: 3,
> -	snaptrim_error: 3,
> -	stale: 3,
> +	//warning
> +	degraded: 3,
>   	undersized: 3,
> +
> +	// error
> +	backfill_toofull: 4,
> +	backfill_unfound: 4,
> +	down: 4,
> +	incomplete: 4,
> +	inconsistent: 4,
> +	recovery_toofull: 4,
> +	recovery_unfound: 4,
> +	snaptrim_error: 4,
> +	stale: 4,
>       },
>   
>       statecategories: [
> @@ -191,6 +194,10 @@ Ext.define('PVE.ceph.StatusDetail', {
>   	},
>   	{
>   	    text: gettext('Working'),
> +	    cls: 'normal',
> +	},
> +	{
> +	    text: gettext('Warning'),
>   	    cls: 'warning',
>   	},
>   	{