add validation for multigauge

Signed-off-by: Musilah <nataleigh.nk@gmail.com>
absmach · Mar 13, 2024 · 10de76b · 10de76b
1 parent bcd09a0
commit 10de76b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 39 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -1263,47 +1263,54 @@ class MultiGaugeChart extends Echart {
           const data2 = await response2.json(); 
           const data3 = await response3.json();
 
-          multiGaugeChart.setOption({
-            series: [
-              {
-                data: [
-                  {
-                    value: data1.messages[0].value,
-                    name: '${gaugeLabel[0]}',
-                    title: {
-                      offsetCenter: ['0%', '-30%']
-                    },
-                    detail: {
-                      valueAnimation: true,
-                      offsetCenter: ['0%', '-18%']
-                    }
-                  },
-                  {
-                    value: data2.messages[0].value,
-                    name: '${gaugeLabel[1]}',
-                    title: {
-                      offsetCenter: ['0%', '0%']
+          if (data1.messages && data1.messages.length > 0 &&
+            data2.messages && data2.messages.length > 0 &&
+            data3.messages && data3.messages.length > 0) {
+
+            multiGaugeChart.setOption({
+              series: [
+                {
+                  data: [
+                    {
+                      value: data1.messages[0].value,
+                      name: '${gaugeLabel[0]}',
+                      title: {
+                        offsetCenter: ['0%', '-30%']
+                      },
+                      detail: {
+                        valueAnimation: true,
+                        offsetCenter: ['0%', '-18%']
+                      }
                     },
-                    detail: {
-                      valueAnimation: true,
-                      offsetCenter: ['0%', '12%']
-                    }
-                  },
-                  {
-                    value: data3.messages[0].value,
-                    name: '${gaugeLabel[2]}',
-                    title: {
-                      offsetCenter: ['0%', '28%']
+                    {
+                      value: data2.messages[0].value,
+                      name: '${gaugeLabel[1]}',
+                      title: {
+                        offsetCenter: ['0%', '0%']
+                      },
+                      detail: {
+                        valueAnimation: true,
+                        offsetCenter: ['0%', '12%']
+                      }
                     },
-                    detail: {
-                      valueAnimation: true,
-                      offsetCenter: ['0%', '40%']
+                    {
+                      value: data3.messages[0].value,
+                      name: '${gaugeLabel[2]}',
+                      title: {
+                        offsetCenter: ['0%', '28%']
+                      },
+                      detail: {
+                        valueAnimation: true,
+                        offsetCenter: ['0%', '40%']
+                      }
                     }
-                  }
-                ],
-              },
-            ],
-          });
+                  ],
+                },
+              ],
+            });
+          } else {
+            console.error("Response is an empty array");
+          }
         } else {
           console.error("HTTP request failed with status: ", response.status);
         }

diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
@@ -94,12 +94,14 @@ <h5 class="modal-title" id="multiGaugeModalLabel">Multi Gauge Chart</h5>
                   <label for="value-name" class="form-label">Value names</label>
                   <input
                     type="text"
+                    pattern="^[a-zA-Z0-9]+,[a-zA-Z0-9]+,[a-zA-Z0-9]+$"
                     class="form-control mb-3"
                     name="valueName"
                     id="value-name"
-                    placeholder="Enter the value names eg. temperature, voltage"
+                    placeholder="Enter three value names eg. temperature,voltage"
                     required
                   />
+                  <div class="invalid-feedback">Please enter three value names without spaces between them</div>
                 </div>
               </div>
               <!-- Appearance Tab -->