optimize js

Kioubit · Jul 29, 2024 · ceb0548 · ceb0548
1 parent f48b2bf
commit ceb0548
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 42 deletions.
diff --git a/main.go b/main.go
@@ -86,6 +86,10 @@ func main() {
 		os.Exit(1)
 	}
 
+	if conf.RouteChangeCounter == 0 {
+		conf.MinimumAge = 0
+	}
+
 	modules := monitor.GetRegisteredModuleNames()
 	if len(modules) != 0 {
 		slog.Info("Enabled", "modules", strings.Join(modules, ","))

diff --git a/modules/httpAPI/dashboard/analyze/index.html b/modules/httpAPI/dashboard/analyze/index.html
@@ -7,6 +7,7 @@
           content="default-src 'none'; base-uri 'none'; form-action 'none'; style-src 'self' 'unsafe-inline'; style-src-elem 'self'; script-src 'self'; connect-src 'self';">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../assets/css/analyze.css">
+    <script async type="module" src="../assets/js/analyze-prefix.js"></script>
 </head>
 <body>
 <div id="loaderText">Please wait... This may take a while.</div>
@@ -51,7 +52,5 @@
         <div id="pathTable"></div>
     </div>
 </div>
-<script src="../assets/js/chartjs/4.4.1/chart.umd.min.js"></script>
-<script src="../assets/js/analyze-prefix.js"></script>
 </body>
 </html>
diff --git a/modules/httpAPI/dashboard/assets/js/analyze-prefix.js b/modules/httpAPI/dashboard/assets/js/analyze-prefix.js
@@ -1,3 +1,5 @@
+import "./chartjs/4.4.1/chart.umd.min.js";
+
 window.onload = () => {
     display();
 };

diff --git a/modules/httpAPI/dashboard/assets/js/dashboard.js b/modules/httpAPI/dashboard/assets/js/dashboard.js
@@ -1,3 +1,7 @@
+import "./justgage/1.7.0/raphael-2.3.0.min.js"
+import "./justgage/1.7.0/justgage.min.js"
+import "./chartjs/4.4.1/chart.umd.min.js"
+
 const gauge = new JustGage({
     id: "justgage",
     value: 0,
@@ -78,33 +82,30 @@ const dataRouteChange = {
             pointRadius: 5,
             pointHitRadius: 10,
             data: [],
+        },{
+            label: "Route Changes (listed prefixes)",
+            fill: false,
+            lineTension: 0.1,
+            backgroundColor: "rgba(15,151,3,0.4)",
+            borderColor: "rgb(50,168,5)",
+            borderCapStyle: 'butt',
+            borderDash: [],
+            borderDashOffset: 0.0,
+            borderJoinStyle: 'miter',
+            pointBorderColor: "rgb(75,192,81)",
+            pointBackgroundColor: "#fff",
+            pointBorderWidth: 1,
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: "rgb(75,192,102)",
+            pointHoverBorderColor: "rgba(220,220,220,1)",
+            pointHoverBorderWidth: 2,
+            pointRadius: 5,
+            pointHitRadius: 10,
+            data: [],
         }
     ]
 };
 
-const listedPrefixDataset = {
-    label: "Route Changes (listed prefixes)",
-    fill: false,
-    lineTension: 0.1,
-    backgroundColor: "rgba(15,151,3,0.4)",
-    borderColor: "rgb(50,168,5)",
-    borderCapStyle: 'butt',
-    borderDash: [],
-    borderDashOffset: 0.0,
-    borderJoinStyle: 'miter',
-    pointBorderColor: "rgb(75,192,81)",
-    pointBackgroundColor: "#fff",
-    pointBorderWidth: 1,
-    pointHoverRadius: 5,
-    pointHoverBackgroundColor: "rgb(75,192,102)",
-    pointHoverBorderColor: "rgba(220,220,220,1)",
-    pointHoverBorderWidth: 2,
-    pointRadius: 5,
-    pointHitRadius: 10,
-    data: [],
-};
-
-
 const ctxFlapCount = document.getElementById('chartFlapCount').getContext('2d');
 const ctxRoute = document.getElementById('chartRoute').getContext('2d');
 
@@ -141,8 +142,8 @@ async function updateCapabilities() {
     versionBox.innerText = "FlapAlerted " + data.Version;
     if (data.UserParameters.RouteChangeCounter === 0) {
         infoBox.innerText = `Current settings: Displaying every BGP update received. Removing entries after ${data.UserParameters.FlapPeriod} seconds of inactivity.`;
+        dataFlapCount.datasets[1].hidden = true;
     } else {
-        dataRouteChange.datasets.push(listedPrefixDataset);
         infoBox.innerText = `Current settings: A route for a prefix needs to change at least ${data.UserParameters.RouteChangeCounter}  times in ${data.UserParameters.FlapPeriod} seconds and remain active for at least ${data.UserParameters.MinimumAge} seconds for it to be shown in the table.`;
     }
 }
@@ -171,17 +172,20 @@ function addToChart(liveChart, point, unixTime, dataInterval) {
 }
 
 
+getStats()
+updateCapabilities().catch((err) => {
+    console.log(err);
+})
+
 window.onload = () => {
-    updateCapabilities().catch((err) => {
-        console.log(err);
-    }).finally(() => {
-        getStats();
-        document.getElementById("loadingScreen").style.display = 'none';
-    });
+    document.getElementById("loadingScreen").style.display = 'none';
 };
 
+
+const prefixTable = document.getElementById("prefixTableBody");
+
 async function updateList(flapList) {
-    let prefixTableHtml = '<thead><tr><th>Prefix</th><th>Duration</th><th>Route Changes</th></tr></thead><tbody>';
+    let prefixTableHtml = '';
 
     if (flapList !== null) {
         flapList.sort((a, b) => b.TotalCount - a.TotalCount);
@@ -198,16 +202,16 @@ async function updateList(flapList) {
             }
         }
         if (flapList.length === 0) {
-            prefixTableHtml += '<tr><td colspan="3" class="centerText">Waiting for BGP flapping...</td></tr>';
+            prefixTableHtml += '<tr><td colspan="3" class="centerText">No flapping prefixes detected</td></tr>';
         }
     } else {
         prefixTableHtml += '<tr><td colspan="3" class="centerText"><b>Please wait</b></td></tr>';
     }
 
-    prefixTableHtml += "</tbody>";
-    document.getElementById("prefixTable").innerHTML = prefixTableHtml;
+    prefixTable.innerHTML = prefixTableHtml;
 }
 
+
 function getStats() {
     const evtSource = new EventSource("flaps/statStream");
     const avgArray = [];

diff --git a/modules/httpAPI/dashboard/index.html b/modules/httpAPI/dashboard/index.html
@@ -7,6 +7,7 @@
           content="default-src 'none'; base-uri 'none'; form-action 'none'; style-src 'self'; style-src-elem 'self'; script-src 'self'; connect-src 'self'; img-src 'self';">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/css/dashboard.css">
+    <script async type="module" src="assets/js/dashboard.js"></script>
 </head>
 
 <body>
@@ -22,7 +23,12 @@ <h3 class="mt-0" id="dataInfo">Live Data</h3>
     <div id="grid-container-main">
         <div id="justgage"></div>
         <div id="prefixTableBox">
-            <table id="prefixTable"></table>
+            <table id="prefixTable">
+                <thead><tr><th>Prefix</th><th>Duration</th><th>Route Changes</th></tr></thead>
+                <tbody id="prefixTableBody">
+                    <tr><td colspan="3" class="centerText">...</td></tr>
+                </tbody>
+            </table>
         </div>
     </div>
     <div id="grid-container-charts">
@@ -34,17 +40,13 @@ <h3 class="mt-0" id="dataInfo">Live Data</h3>
         </div>
     </div>
     <div class="footer">
-        <div>Connected BGP feeds: <span id="sessionCount">N/A</span></div>
+        <div>Connected BGP feeds: <span id="sessionCount">...</span></div>
         <div id="info"></div>
         <div>Average route changes value: 90th percentile average over the last 250 seconds, shown as overall route
             changes per second.
         </div>
         <a href="https://github.com/Kioubit/FlapAlerted/" id="version"></a>
     </div>
 </div>
-<script src="assets/js/chartjs/4.4.1/chart.umd.min.js"></script>
-<script src="assets/js/justgage/1.7.0/raphael-2.3.0.min.js"></script>
-<script src="assets/js/justgage/1.7.0/justgage.min.js"></script>
-<script src="assets/js/dashboard.js"></script>
 </body>
 </html>