Bug dashboard graphique "Grouper par" avec valeur identique

Bonsoir,

Je viens soumettre ce que je penses être un bug :sweat_smile:

En effet lorsque je créer un graphique de ce type avec cet appareil spécifiquement :


Et que j’enregistre la page, les données sont bien enregistrées mais je tombe ensuite sur une page comme ceci qui reste figé :

Je peux faire précédent dans le navigateur et revenir sur la fenêtre d’édition et lorsque je sélectionne « Ne pas grouper » :

image

Et que j’enregistre la page, les données sont bien enregistrées et je tombe sur ma page bien chargé :

Les autres graphiques sont bien configurés pareil avec le groupement par heure et ceux là fonctionne bien.

La seul différence est que la valeur n’a pas changé depuis un moment sur ce capteur (Je vais investiguer car ce n’est pas normal), mais je penses que le problème vient d’ici :thinking:

Merci :slight_smile:

Edit : J’ai pu corriger mon problème d’envoi de valeur en réintégrant le module.
Une nouvelle valeur a été envoyé et j’ai pu remettre le groupement par heure et c’est ok

Merci du retour ! Si tu arrives à reproduire, est-ce que tu as l’erreur dans la console du navigateur ? (Clic-droit → Inspecter → Console)

Sinon, je vais essayer de reproduire :slight_smile:

J’ai pas réussi à reproduire le bug avec les mêmes conditions mais j’ai eu ceci :

{
    "response": {
        "status": 500,
        "data": {
            "status": 500,
            "code": "SERVER_ERROR",
            "error": {}
        }
    }
}
index.js:652 Gladys Gateway, connected in websocket
main.js:56 {response: {…}}response: data: code: "SERVER_ERROR"error: {}status: 500[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()status: 500[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
refreshTabletMode @ main.js:56
await in refreshTabletMode
checkSession @ main.js:71
await in checkSession
(anonymous) @ index.js:60
componentWillMount @ app.jsx:383
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1
SetTabletMode.jsx:34 {response: {…}}
(anonymous) @ SetTabletMode.jsx:34
await in (anonymous)
(anonymous) @ SetTabletMode.jsx:63
await in (anonymous)
componentDidMount @ SetTabletMode.jsx:81
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ async.js:36
(anonymous) @ index.js:7
Promise.then
(anonymous) @ index.js:5
i.componentWillMount @ async.js:34
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1
apexcharts.common.js:6 Uncaught (in promise) RangeError: Invalid array length
    at Array.push (<anonymous>)
    at e.value (apexcharts.common.js:6:166933)
    at e.value (apexcharts.common.js:6:168998)
    at e.value (apexcharts.common.js:6:175666)
    at e.value (apexcharts.common.js:6:171632)
    at e.value (apexcharts.common.js:6:427093)
    at e.value (apexcharts.common.js:14:38538)
    at e.create (apexcharts.common.js:6:5550)
    at apexcharts.common.js:14:37073
    at new Promise (<anonymous>)
    at e.value (apexcharts.common.js:14:21768)
    at t.c.displayChart (ApexChartComponent.jsx:218:18)
    at t.c.componentDidMount (ApexChartComponent.jsx:222:10)
    at index.js:358:8
    at Array.some (<anonymous>)
    at index.js:356:16
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:14
(anonymous) @ apexcharts.common.js:6
(anonymous) @ apexcharts.common.js:14
value @ apexcharts.common.js:14
(anonymous) @ ApexChartComponent.jsx:218
componentDidMount @ ApexChartComponent.jsx:222
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ Chart.jsx:326
await in (anonymous)
componentDidMount @ Chart.jsx:357
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ index.js:98
await in (anonymous)
(anonymous) @ index.js:123
await in (anonymous)
componentDidMount @ index.js:224
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ async.js:36
(anonymous) @ index.js:7
Promise.then
(anonymous) @ index.js:5
i.componentWillMount @ async.js:34
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1

1 « J'aime »

Ok merci ça devrait me suffire pour reproduire !

J’ai créé une issue Github avec les détails :

Je te tiens au courant

1 « J'aime »

@prohand Je n’ai pas réussi à reproduire :smiley: J’ai tenté exactement le même cas que toi, et tout marche. Est-ce que tu peux me donner plus de détails sur comment reproduire ?

En attendant, j’ai amélioré la gestion des erreurs de ce widget pour afficher exactement l’erreur qui arrive du serveur au lieu de continuer à tourner dans le vide :slight_smile:

Un exemple avec une erreur bidon pour tester :

Edit: La PR :

1 « J'aime »

Merci pour la PR :slight_smile:

La actuellement je n’arrive pas à reproduire le problème ^^

Tu as essayé d’avoir une seul valeur dans le graph je suppose et le mettre en groupé par heure ?

Sinon je verrai lorsque la PR sera en Prod si cela m’affiche un message d’erreur :innocent:

Yes ! J’ai essayé plusieurs cas : sans valeurs et avec une seule valeur.

ça marche aussi :slight_smile: Si tu as à nouveau le bug, va aussi voir les logs de Gladys, car d’après l’erreur c’est une erreur côté serveur

J’ai réussi à reproduire avec ce graphique uniquement avec une valeur de température :slight_smile:

Pas d’erreurs dans les logs Gladys

La console ne m’affiche pas plus d’erreurs qu’avant car lors de la sauvegarde l’écran se fige et je suis obligé de faire F5 pour revenir sur la fenêtre d’édition.

Tu peux me décrire les étapes à suivre pour reproduire ?

Le problème ne semble pas se produire sur tous les appareils.

J’ai réussi à reproduire le problème comme ceci :

Ici j’ai sélectionné un capteur de température sur une sonde qui détecte s’il y a une fuite d’eau (Capteur eau lave linge (Température))

Ajout d’un graphique.
On selectionne un appareil avec une température qui a qu’une seul valeur
Selection du type graphique : Aire
fficher les aces : Oui
Fonction d’agrégation : Moyenne
Grouper par : Heure (Testé aussi avec Ne pas grouper)
Afficher la variation : Oui
Intervalle par défaut : 24h

Et Sauvegarder

J’ai pu voir ceci dans la console :

{
    "response": {
        "status": 422,
        "data": {
            "status": 422,
            "code": "UNPROCESSABLE_ENTITY",
            "properties": [
                {
                    "message": "\"[2][4].chart_type\" is not allowed to be empty",
                    "attribute": "boxes",
                    "value": [
                        [
                            {
                                "type": "temperature-in-room",
                                "room": "chambre-2",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "chambre-enfants",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "salle-de-bain",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "informatique",
                                "temperature_use_custom_value": true,
                                "temperature_min": 17,
                                "temperature_max": 30
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "cuisine",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "salon",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "entree",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "toilettes",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salle-de-bain-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "chart_type": "area",
                                "display_variation": true,
                                "interval": "last-day",
                                "display_axes": true,
                                "title": "Température salle de bain",
                                "device_feature_names": [
                                    "Capteur température salle de bain (Température)"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur température cuisine (Température)"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-cuisine-temperature-sensor-decimal-temperature"
                                ],
                                "title": "Température cuisine",
                                "chart_type": "area",
                                "units": [
                                    "celsius"
                                ],
                                "aggregate_function": "avg",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "group_by": "hour"
                            }
                        ],
                        [
                            {
                                "type": "humidity-in-room",
                                "room": "chambre-2",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "chambre-enfants",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "salle-de-bain",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "informatique",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "cuisine",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "salon",
                                "humidity_use_custom_value": true,
                                "humidity_min": 45,
                                "humidity_max": 60
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "entree",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "humidity_use_custom_value": true,
                                "room": "toilettes"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salle-de-bain-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "title": "Humidité salle de bain",
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Capteur température salle de bain (Humidité (pourcentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur température cuisine (Humidité (pourcentage))"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-cuisine-humidity-sensor-decimal-humidity"
                                ],
                                "title": "Humidité cuisine",
                                "units": [
                                    "percent"
                                ],
                                "aggregate_function": "avg",
                                "chart_type": "area",
                                "colors": [
                                    "#d63031"
                                ],
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "group_by": "hour"
                            }
                        ],
                        [
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-chambre-1-temperature-sensor-decimal-temperature",
                                    "zigbee2mqtt-capteur-temperature-chambre-2-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius",
                                    "celsius"
                                ],
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "title": "Températures chambres",
                                "device_feature_names": [
                                    "Capteur température chambre 1 (Température)",
                                    "Capteur température chambre 2 (Température)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-chambre-1-humidity-sensor-decimal-humidity",
                                    "zigbee2mqtt-capteur-temperature-chambre-2-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent",
                                    "percent"
                                ],
                                "title": "Humidité chambres",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Capteur température chambre 1 (Humidité (pourcentage))",
                                    "Capteur température chambre 2 (Humidité (pourcentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "title": "Température salon",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Capteur température salon (Température)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "title": "Humidité salon",
                                "chart_type": "area",
                                "display_axes": true,
                                "interval": "last-day",
                                "display_variation": true,
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Capteur température salon (Humidité (pourcentage))"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur eau lave linge (Température)"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-eau-lave-linge-device-temperature-sensor-decimal-device-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "aggregate_function": "avg",
                                "chart_type": "",
                                "display_axes": true,
                                "group_by": "hour",
                                "interval": "last-day",
                                "display_variation": true
                            }
                        ]
                    ],
                    "type": "Validation error"
                }
            ]
        }
    }
}

A mon avis c’est autre chose, tu n’as juste pas sélectionné de type de graphique visiblement? [2][4].chart_type\" is not allowed to be empty

ça ne ressemble pas à l’erreur que tu avais avant

Effectivement, désolé :frowning:

Je n’arrive pas à reproduire de nouveau le problème pour le moment

Par contre à chaque fois que j’enregistre j’ai pas mal d’erreurs comme celle-ci sans reproduire le bug cependant :

{
    "status": 500,
    "data": {
        "status": 500,
        "code": "SERVER_ERROR",
        "error": {}
    }
}

Est-ce que tu as dans l’onglet « Réseau » la requête qui affiche cette erreur ?

Dans l’onglet réseau je n’ai pas de code status 500 :

Mais j’ai bien le message dans la console

Tu es sur Gladys Plus c’est normal, est-ce que tu peux faire le même test en local ? :slight_smile:

Je ne reproduis pas le problème en local
J’ai vraiment l’impression que c’est lié à Gladys Plus

On avance :slight_smile:

J’ai essayé de mon côté de reproduire sur Gladys Plus, sans succès.

J’ai créé un capteur de température, ajouté au tableau de bord dans un graphique avec tous les mêmes paramètres, et ça fonctionne bien :

Est-ce que tu es sûr que tu n’as aucun logs dans Gladys ? Si il y a une erreur 500, en général il y a un log d’erreur

J’ai réessayé à plusieurs reprise de reproduire le problème de base mais je n’y suis pas arrivé :frowning:
J’ai l’impression que le problème est aléatoire et je n’arrive pas a trouver un dénominateur commun…

Pour l’erreur 500 oui je suis sur n’avoir aucun logs d’erreurs dans dockers logs glagys :wink:

Je suis allé voir, et effectivement le « log level » d’une erreur 500 n’est pas assez élevé pour qu’elle soit visible dans les logs en production, j’ai changé ça dans une PR car ça devrait être plus facilement visible :

T’inquiète avec les 2 changements que j’ai fais :

  • Message d’erreur affiché dans l’interface
  • Erreur 500 complète affichée dans les logs

Tu devrais être capable de mieux débugger ça après la prochaine release :wink:

1 « J'aime »

Parfait :slight_smile:

Merci beaucoup, je ferrai un retour à la suite de la prochaine release

1 « J'aime »