move debug to saved costs tips

scylladb · Feb 3, 2025 · 6b136ca · 6b136ca
1 parent fa32df0
commit 6b136ca
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 24 deletions.
diff --git a/dist/assets/index-C4_nV1QP.css b/dist/assets/index-C4_nV1QP.css
diff --git a/dist/assets/index-UnL-7Xdd.js b/dist/assets/index-UnL-7Xdd.js
diff --git a/dist/index.html b/dist/index.html
@@ -8,8 +8,8 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"></script>
-  <script type="module" crossorigin src="/assets/index-UnL-7Xdd.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-C4_nV1QP.css">
+  <script type="module" crossorigin src="/assets/index-CTLm646y.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B9xDjrZ1.css">
 </head>
 <body>
 <div class="container">
@@ -19,7 +19,11 @@
       <span id="costDiff">$0</span>
       <span id="costDiffMo">/mo</span>
     </p>
-    <p id="costDiffSaved">saved using ScyllaDB</p>
+    <p id="costSaved">saved using ScyllaDB
+      <span class="info-icon">i
+        <span class="tooltip-text" id="costSavedTip"></span>
+      </span>
+    </p>
   </div>
 
   <div class="radio-container">
@@ -121,8 +125,8 @@
           <option value="infrequentAccess">Infrequent Access</option>
         </select>
         <span class="info-icon">i
-      <span class="tooltip-text">Select the table class for your workload.</span>
-    </span>
+          <span class="tooltip-text">Select the table class for your workload.</span>
+        </span>
       </label>
     </div>
 

diff --git a/index.html b/index.html
@@ -19,7 +19,11 @@
       <span id="costDiff">$0</span>
       <span id="costDiffMo">/mo</span>
     </p>
-    <p id="costDiffSaved">saved using ScyllaDB</p>
+    <p id="costSaved">saved using ScyllaDB
+      <span class="info-icon">i
+        <span class="tooltip-text" id="costSavedTip"></span>
+      </span>
+    </p>
   </div>
 
   <div class="radio-container">
@@ -121,8 +125,8 @@
           <option value="infrequentAccess">Infrequent Access</option>
         </select>
         <span class="info-icon">i
-      <span class="tooltip-text">Select the table class for your workload.</span>
-    </span>
+          <span class="tooltip-text">Select the table class for your workload.</span>
+        </span>
       </label>
     </div>
 

diff --git a/src/app.js b/src/app.js
@@ -116,7 +116,6 @@ document.querySelector('input[name="pricingModel"][value="provisioned"]').addEve
 
 document.getElementById('tableClass').addEventListener('change', (event) => {
     cfg.tableClass = event.target.value;
-    console.log(cfg.tableClass);
     updateChart();
 });
 

diff --git a/src/calculator.js b/src/calculator.js
@@ -1,6 +1,6 @@
 import {cfg} from './config.js';
 import {chart} from "./chart.js";
-import {formatNumber, updateDebugPanel} from "./utils.js";
+import {formatNumber, updateSavedCosts} from "./utils.js";
 
 const scyllaPrices = [{
     family: "i4i", instance: "i4i.xlarge", baseline: 78000, peak: 120000, storage: 937, price: 3.325
@@ -232,7 +232,8 @@ function logCosts(scyllaResult, costRatio) {
         `nodeCount: ${scyllaResult.nodeCount}`,
         `family: ${scyllaResult.family}`]);
 
-    updateDebugPanel(logs);
+    console.log(cfg);
+    updateSavedCosts(logs);
 }
 
 export function updateOps() {

diff --git a/src/style.css b/src/style.css
@@ -54,7 +54,7 @@ h3 {
   vertical-align: middle;
 }
 
-#costDiffSaved {
+#costSaved {
   font-size: 1.5em;
   margin-bottom: 1.0rem;
 }
@@ -182,6 +182,7 @@ input[type="radio"]:checked::after {
   text-align: center;
   line-height: 12px;
   font-size: 12px;
+  vertical-align: middle;
 }
 
 .tooltip-text {
@@ -242,8 +243,8 @@ select:focus {
   box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
 }
 
-.debug-panel {
-  background-color: #f9f9f9;
+.cost-panel {
+  background-color: #333;
   border: 1px solid #ccc;
   padding: 10px;
   margin-top: 20px;
@@ -255,16 +256,19 @@ select:focus {
   white-space: pre-wrap;
 }
 
-.debug-entry {
+.cost-entry {
+  color: #fff;
   display: flex;
   justify-content: space-between;
   padding-right: 20px;
 }
 
-.debug-key {
+.cost-key {
+  color: #fff;
   text-align: left;
 }
 
-.debug-value {
+.cost-value {
+  color: #fff;
   text-align: right;
 }
diff --git a/src/utils.js b/src/utils.js
@@ -15,10 +15,11 @@ function getQueryParams() {
 
 export const queryParams = getQueryParams();
 
-export function updateDebugPanel(logs) {
-    const debugPanel = document.getElementById('debugPanel');
-    debugPanel.innerHTML = logs.map(log => {
+export function updateSavedCosts(logs) {
+    const costDiffPanel = document.getElementById('costSavedTip');
+    costDiffPanel.style.display = 'block';
+    costDiffPanel.innerHTML = logs.map(log => {
         const [key, value] = log.split(': ');
-        return `<div class="debug-entry"><span class="debug-key">${key}:</span><span class="debug-value">${value}</span></div>`;
+        return `<div class="cost-entry"><span class="cost-key">${key}:</span><span class="cost-value">${value}</span></div>`;
     }).join('');
-}
+}