From edeef107f07f9f12184df55f46ab5b9dc95e6763 Mon Sep 17 00:00:00 2001
From: Zach Naimon <zach.naimon@clickhouse.com>
Date: Mon, 3 Jul 2023 12:42:51 -0400
Subject: [PATCH] fix authError behavior, fix overlapping chart behavior

---
 programs/server/dashboard.html | 36 +++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/programs/server/dashboard.html b/programs/server/dashboard.html
index 951b7db3aa3..ea818e05e31 100644
--- a/programs/server/dashboard.html
+++ b/programs/server/dashboard.html
@@ -12,7 +12,8 @@
             --chart-background: white;
             --shadow-color: rgba(0, 0, 0, 0.25);
             --input-shadow-color: rgba(0, 255, 0, 1);
-            --error-color: white;
+            --error-color: red;
+            --auth-error-color: white;
             --legend-background: rgba(255, 255, 255, 0.75);
             --title-color: #666;
             --text-color: black;
@@ -258,7 +259,7 @@
             width: 60%;
             padding: .5rem;
 
-            color: var(--error-color);
+            color: var(--auth-error-color);
 
             display: flex;
             flex-flow: row nowrap;
@@ -906,9 +907,9 @@ async function draw(idx, chart, url_params, query) {
 
     if (error) {
         const errorMatch = errorMessages.find(({ regex }) => error.match(regex))
-        if (errorMatch) {
-            const match = error.match(errorMatch.regex)
-            const message = errorMatch.messageFunc(match)
+        const match = error.match(errorMatch.regex)
+        const message = errorMatch.messageFunc(match)
+        if (message) {
             const authError = new Error(message)
             throw authError
         }
@@ -930,7 +931,7 @@ async function draw(idx, chart, url_params, query) {
     let title_div = chart.querySelector('.title');
     if (error) {
         error_div.firstChild.data = error;
-        title_div.style.display = 'none';
+        title_div.style.display = 'none'; 
         error_div.style.display = 'block';
         return false;
     } else {
@@ -1019,13 +1020,15 @@ async function drawAll() {
             firstLoad = false;
         } else {
             enableReloadButton();
+            enableRunButton();
         }
-        if (!results.includes(false)) {
+        if (results.includes(true)) {
             const element = document.querySelector('.inputs');
             element.classList.remove('unconnected');
             const add = document.querySelector('#add');
             add.style.display = 'block';
-        } else {
+        } 
+        else {
             const charts = document.querySelector('#charts')
             charts.style.height = '0px';
         }
@@ -1050,6 +1053,13 @@ function disableReloadButton() {
     reloadButton.classList.add('disabled')
 }
 
+function disableRunButton() {
+    const runButton = document.getElementById('run')
+    runButton.value = 'Reloading...'
+    runButton.disabled = true
+    runButton.classList.add('disabled')
+}
+
 function enableReloadButton() {
     const reloadButton = document.getElementById('reload')
     reloadButton.value = 'Reload'
@@ -1057,11 +1067,19 @@ function enableReloadButton() {
     reloadButton.classList.remove('disabled')
 }
 
+function enableRunButton() {
+    const runButton = document.getElementById('run')
+    runButton.value = 'Ok'
+    runButton.disabled = false
+    runButton.classList.remove('disabled')
+}
+
 function reloadAll() {
     updateParams();
     drawAll();
     saveState();
-    disableReloadButton()
+    disableReloadButton();
+    disableRunButton();
 }
 
 document.getElementById('params').onsubmit = function(event) {