From 0f3eecd2091f7ec50b987dbfa4a2c024ad1844ca Mon Sep 17 00:00:00 2001
From: Karsten Jeschkies <karsten.jeschkies@grafana.com>
Date: Thu, 15 Dec 2022 13:53:40 +0100
Subject: [PATCH] Show help tooltip on hover in sizing tool. (#7919)

---
 docs/sources/installation/sizing/index.md | 29 +++++++++++++++++------
 pkg/sizing/helm.go                        |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/docs/sources/installation/sizing/index.md b/docs/sources/installation/sizing/index.md
index 9b16bbf5c0..3c1657ecae 100644
--- a/docs/sources/installation/sizing/index.md
+++ b/docs/sources/installation/sizing/index.md
@@ -19,18 +19,18 @@ This tool helps to generate a Helm Charts `values.yaml` file based on specified
 
 <div id="app">
 
-  <label class="icon question">Node Type</label>
+  <label class="icon question" v-on:mouseover="help='node'" v-on:mouseleave="help=null">Node Type</label>
   <select name="node-type" v-model="node"> 
   <option v-for="node of nodes">{{ node }}</option>
   </select>
 
-  <label class="icon question">Ingest</label>
+  <label class="icon question" v-on:mouseover="help='ingest'" v-on:mouseleave="help=null">Ingest</label>
   <input v-model="ingest" name="ingest" placeholder="Desired ingest in TB/day" type="number" max="1000" min="0"/>
 
-  <label class="icon question">Log retention period</label>
+  <label class="icon question" v-on:mouseover="help='retention'" v-on:mouseleave="help=null">Log retention period</label>
   <input v-model="retention" name="retention" placeholder="Desired retention period in days" type="number" min="0"/>
 
-  <label class="icon question">Query performance</label>
+  <label class="icon question" v-on:mouseover="help='queryperf'" v-on:mouseleave="help=null">Query performance</label>
   <div id="queryperf" style="display: inline-flex;">
   <label for="basic">
   <input type="radio" id="basic" value="Basic" v-model="queryperf"/>Basic
@@ -42,11 +42,25 @@ This tool helps to generate a Helm Charts `values.yaml` file based on specified
   </div>
 
   <a v-bind:href="helmURL" class="primary-button">Generate and download values file</a>
+
+  <blockquote v-if="help">
+    <span v-if="help === 'ingest'">
+    Defines the log volume in terrabytes expected to be ingested each day.
+    </span>
+    <span v-else-if="help === 'node'">
+    Defines the node type of the Kubernetes cluster.
+    </span>
+    <span v-else-if="help === 'retention'">
+    Defines how long the ingested logs should be kept.
+    </span>
+    <span v-else-if="help === 'queryperf'">
+    Defines the expected query performance. Basic enables 3mbps. Super should be chosen if more query throughput is required.
+    </span>
+  </blockquote>
 </div>
 
 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-
-<style>
+.<style>
 
 #app label.icon.question::after {
   content: '\f29c';
@@ -81,7 +95,8 @@ createApp({
       node: "Loading...",
       ingest: null,
       retention: null,
-      queryperf: 'Basic'
+      queryperf: 'Basic',
+      help: null
     }
   },
 
diff --git a/pkg/sizing/helm.go b/pkg/sizing/helm.go
index 1ceea9a253..9ff9676f1c 100644
--- a/pkg/sizing/helm.go
+++ b/pkg/sizing/helm.go
@@ -14,7 +14,7 @@ type Pod struct {
 }
 
 type Loki struct {
-	AuthEnabled bool `json:"authEnabled"`
+	AuthEnabled bool `json:"auth_enabled"`
 }
 
 type Read struct {