make aggregation not required

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>
absmach · Mar 13, 2024 · f17fcc0 · f17fcc0
1 parent 858ac79
commit f17fcc0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -899,11 +899,6 @@ class TimeSeriesLineChart extends Echart {
           // Handle errors
           console.error("HTTP request failed with status:", response.status);
         }
-    
-        // Poll again after a couple of seconds
-        setTimeout(function () {
-          getData(linechart, chartData);
-        }, 20000);
       } catch (error) {
         // Handle fetch or other errors
         console.error("Error:", error);

diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
@@ -122,6 +122,17 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                     required
                   />
                 </div>
+                <div class="mb-3">
+                  <label for="aggregation-type" class="form-label">Aggregation</label>
+                  <select class="form-select mb-3" name="aggregationType" id="aggregation-type">
+                    <option value="">Select an aggregation type</option>
+                    <option value="MAX">Maximum</option>
+                    <option value="MIN">Minimum</option>
+                    <option value="SUM">Sum</option>
+                    <option value="COUNT">Count</option>
+                    <option value="AVG">Average</option>
+                  </select>
+                </div>
                 <div class="mb-3">
                   <label for="update-interval" class="form-label">Update interval</label>
                   <input
@@ -131,20 +142,8 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                     name="updateInterval"
                     id="update-interval"
                     placeholder="Enter the update interval, eg. 5s, 10m, 1h, 1d"
-                    required
                   />
-                  <div class="invalid-feedback">Please enter a valid interval</div>
-                </div>
-                <div class="mb-3">
-                  <label for="aggregation-type" class="form-label">Aggregation</label>
-                  <select class="form-select mb-3" name="aggregationType" id="aggregation-type">
-                    <option value="" disabled>Select an aggregation type</option>
-                    <option value="MAX">Maximum</option>
-                    <option value="MIN">Minimum</option>
-                    <option value="SUM">Sum</option>
-                    <option value="COUNT">Count</option>
-                    <option value="AVG">Average</option>
-                  </select>
+                  <div class="invalid-feedback invalid-interval">Please enter a valid interval</div>
                 </div>
               </div>
               <!-- Appearance Tab -->
@@ -252,14 +251,31 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
         }
       }
 
+      if (chartData.aggregationType != "") {
+        const updateInterval = form.querySelector("#update-interval");
+        if (chartData.updateInterval === "") {
+          form.querySelector(".invalid-interval").innerHTML = "Please enter an Interval";
+          updateInterval.classList.remove("was-validated");
+          updateInterval.classList.add("is-invalid");
+          return;
+        } else {
+          form.querySelector(".invalid-interval").innerHTML = "";
+          updateInterval.classList.remove("is-invalid");
+          updateInterval.classList.add("was-validated");
+        }
+      }
+      const invalidTimeFeedback = form.querySelector(".invalid-time");
+      const invalidTimeInput = form.querySelector("#stop-time");
       if (chartData.stopTime <= chartData.startTime) {
-        const invalidTimeFeedback = form.querySelector(".invalid-time");
         invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
         invalidTimeFeedback.style.color = "red";
-        const invalidTimeInput = form.querySelector("#stop-time");
         invalidTimeInput.classList.remove("was-validated");
         invalidTimeInput.classList.add("is-invalid");
         return;
+      } else {
+        invalidTimeFeedback.innerHTML = "";
+        invalidTimeInput.classList.remove("is-invalid");
+        invalidTimeInput.classList.add("was-validated");
       }
 
       var widgetID = "lineChart-" + Date.now();