v8.1.2: Update JS regex, un-comment CSS, and refactor metrics JS

Modified regex in ha.js to include uppercase letters. Un-commented and removed unused CSS code. Refactored the structure of options in metrics.js for readability and consistency.

app/static/css/styles.css

@@ -1338,13 +1338,8 @@ label {
 	float: left;
     margin-top: var(--indent);
     margin-left: var(--indent);
+	margin-bottom: 20px;
 }
-/*.metrics-refresh {*/
-/*	text-align: right;*/
-/*    margin-top: -25px;*/
-/*    margin-right: 10px;*/
-/*    margin-bottom: 20px;*/
-/*}*/
 .ajaxwafstatus {
 	padding-top: 2px;
 	padding-left: 10px;

app/static/js/ha.js

@@ -182,7 +182,7 @@ function createHaClusterStep1(edited=false, cluster_id=0, clean=true) {
 		}
 	});
 	$.getScript(ha);
-	let regx = /^[a-z0-9_-]+$/;
+	let regx = /^[a-zA-Z0-9_-]+$/;
 	let dialog_div = $("#create-ha-cluster-step-1").dialog({
 		autoOpen: false,
 		resizable: false,

app/static/js/metrics.js

@@ -162,8 +162,25 @@ function renderHttpChart(data, labels, server) {
             ],
         },
         options: {
-            maintainAspectRatio: false,
-            plugins: {
+			maintainAspectRatio: false,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                },
+                x: {
+                    ticks: {
+                        major: {
+                            enabled: true,
+                            fontStyle: 'bold'
+                        },
+                        source: 'data',
+                        autoSkip: true,
+                        autoSkipPadding: 45,
+                        maxRotation: 0
+                    }
+                }
+            },
+			plugins: {
                 title: {
                     display: true,
                     text: data[4],
@@ -171,41 +188,19 @@ function renderHttpChart(data, labels, server) {
                         size: 20,
                     },
                 },
-                legend: {
+				legend: {
+					display: true,
+					labels: {
+						color: 'rgb(255, 99, 132)',
+						font: {
+                            size: 10,
+                            family: 'BlinkMacSystemFont'
+                        }
+					},
                     position: 'bottom'
-                }
-            },
-            scales: {
-                y: {
-                    ticks: {
-                        beginAtZero: true,
-                    },
-                },
-                x: {
-                    ticks: {
-                        beginAtZero: true,
-                        major: {
-                            enabled: true,
-                            fontStyle: 'bold',
-                        },
-                        source: 'data',
-                        autoSkip: true,
-                        autoSkipPadding: 45,
-                        maxRotation: 0,
-                    },
-                },
-            },
-            legend: {
-                display: true,
-                labels: {
-                    color: 'rgb(255, 99, 132)',
-                    font: {
-                        size: 10,
-                        family: 'BlinkMacSystemFont',
-                    },
-                },
-            },
-        },
+				}
+			}
+        }
     });
     charts.push(myChart)
     stream_chart(myChart, 'haproxy', server, 1);