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

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

[Alexandre Derumier]

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',
 	},
 	{
-- 
2.39.2

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

[Aaron Lauterer]

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',
>   	},
>   	{

[pve-devel] [PATCH widget-toolkit 1/3] css: add 'working' css color class

[Aaron Lauterer]

use the same as info-blue for now.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---

These patches are all a follow up to Alexandre's. This one in
widget-toolkit is needed to specify the css color specifically.

 src/css/ext6-pmx.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 2ffd2a8..1f77cd2 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -109,7 +109,7 @@
     color: #FF6C59;
 }
 
-.info-blue {
+.info-blue, .working {
     color: #3892d4;
 }
 
-- 
2.39.2

[pve-devel] [PATCH manager 2/3] ceph: ui: followup: change blue for PGs in working state

[Aaron Lauterer]

The previous light blue was hard to see in the light theme, especially
if it only had a narrow slice in the cake diagram.
This darker blue is easily visilbe and distinguishable in the light and
dark theme.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
These patches are all a follow up to Alexandre's. This one in
widget-toolkit is needed to specify the css color specifically.

 www/manager6/ceph/StatusDetail.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js
index e1bf425a..7198ba62 100644
--- a/www/manager6/ceph/StatusDetail.js
+++ b/www/manager6/ceph/StatusDetail.js
@@ -94,7 +94,7 @@ Ext.define('PVE.ceph.StatusDetail', {
 	colors: [
 	    '#CFCFCF',
 	    '#21BF4B',
-	    '#C2DDF2',
+	    '#3892D4',
 	    '#FFCC00',
 	    '#FF6C59',
 	],
@@ -194,7 +194,7 @@ Ext.define('PVE.ceph.StatusDetail', {
 	},
 	{
 	    text: gettext('Working'),
-	    cls: 'normal',
+	    cls: 'working',
 	},
 	{
 	    text: gettext('Warning'),
-- 
2.39.2

[pve-devel] [PATCH manager 3/3] ceph: ui: rename PG state error to critical

[Aaron Lauterer]

to align better with Ceph nomenclature.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
These patches are all a follow up to Alexandre's. This one in
widget-toolkit is needed to specify the css color specifically.

 www/manager6/ceph/StatusDetail.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/manager6/ceph/StatusDetail.js b/www/manager6/ceph/StatusDetail.js
index 7198ba62..b1b7ec8c 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',
 	},
     ],
-- 
2.39.2

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

[Aaron Lauterer]

I took the liberty to create a small series of follow up patches to implement 
the changes I suggested. This should save you, Alexandre, some time. :)

I hope that worklow is okay this way.

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

[DERUMIER, Alexandre]

Le 21/07/2023 à 15:08, Aaron Lauterer a écrit :
> I took the liberty to create a small series of follow up patches to 
> implement the changes I suggested. This should save you, Alexandre, 
> some time. :)
>
> I hope that worklow is okay this way.
>
Hi,

I'm back from holiday.

I don't known if you had see it, but I have sent patches in June with 
your requested changes:

https://lists.proxmox.com/pipermail/pve-devel/2023-June/057888.html

https://lists.proxmox.com/pipermail/pve-devel/2023-June/057886.html

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

[Aaron Lauterer]

I must have missed them. I'll give them a quick review. Thanks :)

On 8/7/23 09:46, DERUMIER, Alexandre wrote:
> Le 21/07/2023 à 15:08, Aaron Lauterer a écrit :
>> I took the liberty to create a small series of follow up patches to
>> implement the changes I suggested. This should save you, Alexandre,
>> some time. :)
>>
>> I hope that worklow is okay this way.
>>
> Hi,
> 
> I'm back from holiday.
> 
> I don't known if you had see it, but I have sent patches in June with
> your requested changes:
> 
> https://lists.proxmox.com/pipermail/pve-devel/2023-June/057888.html
> 
> https://lists.proxmox.com/pipermail/pve-devel/2023-June/057886.html
> 
> 
> 
>