diff --git a/README.md b/README.md
index 6c9df56..324bad7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # Grafana Debugger
 
-TODO
\ No newline at end of file
+TODO
diff --git a/package-lock.json b/package-lock.json
index 8c81a15..52eba3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
         "@mdi/font": "7.0.96",
         "core-js": "^3.29.0",
         "md-editor-v3": "^4.10.0",
+        "rison-node": "^2.1.1",
         "roboto-fontface": "*",
         "vue": "^3.3.0",
         "vue-cookies": "^1.8.3",
+        "vue-gtag": "^2.0.1",
         "vue-router": "^4.0.0",
         "vuetify": "^3.4.9"
       },
@@ -2594,6 +2596,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rison-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/rison-node/-/rison-node-2.1.1.tgz",
+      "integrity": "sha512-GuV0OnSL2erZJ0j/9YUsrAdfSh3mGcrq+4wM4PqRftOYT7+TRhxbMrpVZaGC5YIPwncIoOM7PPnskDku5Ywg1Q=="
+    },
     "node_modules/roboto-fontface": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
@@ -2970,6 +2977,14 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-gtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz",
+      "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/package.json b/package.json
index 409c579..2abec7b 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,11 @@
     "@mdi/font": "7.0.96",
     "core-js": "^3.29.0",
     "md-editor-v3": "^4.10.0",
+    "rison-node": "^2.1.1",
     "roboto-fontface": "*",
     "vue": "^3.3.0",
     "vue-cookies": "^1.8.3",
+    "vue-gtag": "^2.0.1",
     "vue-router": "^4.0.0",
     "vuetify": "^3.4.9"
   },
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index db46473..6a9462c 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -18,21 +18,21 @@
       >
         
           <div class="text-no-wrap ml-2 float-left">
-            Maintained by:&nbsp;<a href="https://monitoringartist.com" _target="_blank">Monitoring Artist</a>
+            Crafted with <v-icon icon="mdi-cards-heart" color="red"></v-icon> by:&nbsp;<a class="text-decoration-none" href="https://monitoringartist.com" _target="_blank">Monitoring Artist</a>
           </div>
           <div class="ml-2 float-left">
             |
           </div>
           <div class="text-no-wrap ml-2 float-left">
-            Star:&nbsp;<a target="_blank" href="https://github.com/jangaraj/gv">GitHub repository</a>
+            <v-icon icon="mdi-github"></v-icon>&nbsp;<a class="text-decoration-none" target="_blank" href="https://github.com/monitoringartist/grafana-debugger">GitHub repository</a>
           </div>
           <div class="ml-2 float-left">
             | 
           </div>
           <div class="text-no-wrap ml-2 float-left">
-            Feedback:&nbsp;<a target="_blank" href="https://github.com/jangaraj/gv/issues/new">New GitHub issue</a>
+            <v-icon icon="mdi-scale-balance"></v-icon>&nbsp;<a class="text-decoration-none" target="_blank" href="todo">Legal</a>
           </div>
-        
+
       </v-card>
     </v-footer>
   </v-app>
diff --git a/src/main.js b/src/main.js
index da621e6..57e27f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,9 +17,20 @@ const app = createApp(App)
 
 registerPlugins(app)
 
-app.mount('#app')
-
 import { VueCookies } from 'vue-cookies'
 app.use(VueCookies)
 
+import VueGtag from 'vue-gtag'
+import router from './router'
+app.use(
+    VueGtag, 
+    {
+        config: { id: 'G-KY34G7DB1G' },
+        appName: 'Grafan Debugger',
+        pageTrackerScreenviewEnabled: true,
+    },
+    router
+)
+
+app.mount('#app')
 app.config.globalProperties.window = window
diff --git a/src/router/index.js b/src/router/index.js
index b16547c..9991d5b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,9 +9,6 @@ const routes = [
       {
         path: '',
         name: 'Introduction',
-        // route level code-splitting
-        // this generates a separate chunk (Home-[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
         component: () => import('@/views/Main.vue'),
       }
     ],
diff --git a/src/views/Main.vue b/src/views/Main.vue
index da9d390..72d2d49 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -77,7 +77,7 @@
         <v-stepper-window-item :value="1">
           <v-card title="Introduction" flat>
             <v-card-text>
-              Grafana debugger provides a structured guide on resolving issues with Grafana, covering aspects such as configuration, visualization creation, and queries.
+              Grafana Debugger provides a structured guide on resolving issues with Grafana, covering aspects such as configuration, visualization creation, and queries.
               <br /><br />
               A notable 73% of Grafana Debugger users swiftly identified their issues and find further resources with this tool immediately. Others are able to create community posts, 
               which will have much higher chance to attracts the attention of Grafana community members, because it contains all details required for quick problem assesment.
@@ -87,10 +87,11 @@
 
               <v-divider class="ma-4"></v-divider>
 
-              Some debugging examples:
+              Debugging examples:
               <br /><br />
-              <a href="#step=2&step1Version=v10.2.4&step1Type=Enterprise (Free %26 unlicensed)&step1Cloud=false&step1Installation=installed as container with orchestration&step1Os=Linux&step1DeploymentDetails=My docker-compose yaml file%3A%0A```yaml%0Aversion%3A '3.8'%0Aservices%3A%0A%20 grafana%3A%0A%20%20%20 image%3A grafana%2Fgrafana-enterprise%3Alatest%0A%20%20%20 ports%3A%0A%20%20%20%20%20 - 3000%3A3000%0A%20%20%20 environment%3A%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ENABLED%3Dtrue%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ROLE%3DAdmin%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_NAME%3DMain Org.%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ID%3D1%0A%20%20%20 volumes%3A%0A%20%20%20%20%20 - grafana-storage%3A%2Fvar%2Flib%2Fgrafana%0Avolumes%3A%0A%20 grafana-storage%3A%0A```&step2WhatHappened=I don't see SAML login option in the login page.&step2WhatsExpected=I expect to see SAML login option in the login page.&step2HowReproduce=1. Open Grafana login page.%0A2. See that SAML login option is missing.&step2AdditionalDetails=I have configured SAML authentication according to the documentation. I use Azure IDP.&step3DocumentationLink=https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fauth%2Fsaml%2F&step4Title=Missing SAML Login Option in Grafana Enterprise Deployment&step4Category=Authentication&step4SearchQuery=Grafana Enterprise missing SAML login option&step4Tags=saml%2Clogin%2C grafana enterprise%2C deployment%2C docker%2C linux%2C azure idp">Issue: SAML login is not available</a>
-
+              <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:'My docker-compose yaml file%3A%0A```yaml%0Aversion%3A !'3.8!'%0Aservices%3A%0A%20 grafana%3A%0A%20%20%20 image%3A grafana%2Fgrafana-enterprise%3Alatest%0A%20%20%20 ports%3A%0A%20%20%20%20%20 - 3000%3A3000%0A%20%20%20 environment%3A%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ENABLED%3Dtrue%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ROLE%3DAdmin%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_NAME%3DMain Org.%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ID%3D1%0A%20%20%20 volumes%3A%0A%20%20%20%20%20 - grafana-storage%3A%2Fvar%2Flib%2Fgrafana%0Avolumes%3A%0A%20 grafana-storage%3A%0A```',step2Installation:installed as simple container,step2Os:Linux,step2Type:'Enterprise (Free %26 unlicensed)',step2Version:v10.2.3,step3AdditionalDetails:I have configured SAML authentication according to the documentation. I use Azure IDP.,step3HowReproduce:'1. Open Grafana login page.%0A2. See that SAML login option is missing.',step3WhatHappened:'I don!'t see SAML login option in the login page.',step3WhatsExpected:I expect to see SAML login option in the login page.,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fauth%2Fsaml%2F,step5Category:Authentication%2FIdentity Management,step5SearchQuery:Grafana SAML login option missing,step5Tags:grafana%2Csaml%2C login%2C authentication%2C azure idp,step5Title:SAML login option missing in Grafana login page)">Issue: SAML login is not available</a>
+              &nbsp;
+              <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:My%20%60start-grafana.sh%60%20script%3A%0A%60%60%60sh%0Adocker%20rm%20-f%20grafana%20%7C%7C%20true%0A%0Adocker%20run%20-d%20%5C%0A%20%20--name%20grafana%20%5C%0A%20%20-p%2080%3A80%20%5C%0A%20%20grafana%2Fgrafana%3Alatest%0A%60%60%60,step2Installation:installed%20as%20simple%20container,step2Os:Linux,step2Type:Open%20Source,step2Version:v8.2.3,step3AdditionalDetails:I%20tried%20Firefox%2C%20Chrome%2C%20Edge.%20All%20of%20them%20have%20the%20same%20problem.,step3HowReproduce:'1.%20Run%20%60start-grafana.sh%60%20script%0A2.%20Try%20to%20open%20http%3A%2F%2Flocalhost%20in%20the%20browser',step3WhatHappened:'I%20can!'t%20open%20Grafana%20on%20http%3A%2F%2Flocalhost',step3WhatsExpected:I%20can%20see%20Grafana%20on%20http%3A%2F%2Flocalhost,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fsetup-grafana%2Finstallation%2Fdocker%2F,step5Category:Grafana%20Troubleshooting,step5SearchQuery:Grafana%20Docker%20deployment%20access%20issue,step5Tags:grafana%2Cdeployment%2C%20docker%2C%20access%20issue%2C%20documentation,step5Title:Unable%20to%20Access%20Grafana%20after%20Deployment)">Issue: Grafana is not available on localhost</a>
             </v-card-text>
           </v-card>
         </v-stepper-window-item>
@@ -105,7 +106,7 @@
                 You can find Grafana details, when you visit Grafana login page <code>/login</code> 
                 (e.g. <code>https://grafana.example.com/login</code>), where you should see Grafana version and type in the footer.
                 <v-text-field
-                  v-model="step1Version"
+                  v-model="step2Version"
                   :autofocus="true"
                   :clearable="true"
                   placeholder="v10.2.3 "
@@ -121,7 +122,7 @@
                 </h3>
 
                 <v-chip-group
-                  v-model="step1Type"
+                  v-model="step2Type"
                   column
                   :multiple="false"
                   :mandatory="true"
@@ -157,7 +158,7 @@
               </h3>
 
               <v-chip-group
-                v-model="step1Cloud"
+                v-model="step2Cloud"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -181,13 +182,13 @@
 
               <v-divider :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'true'">
+              <h3 v-if="step2Cloud == 'true'">
                 Which cloud provider do you use?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'true'"
-                v-model="step1CloudProvider"
+                v-if="step2Cloud == 'true'"
+                v-model="step2CloudProvider"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -223,13 +224,13 @@
                 </v-chip>
               </v-chip-group>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 How did you deploy/install your on-premise Grafana instance?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'false'"
-                v-model="step1Installation"
+                v-if="step2Cloud == 'false'"
+                v-model="step2Installation"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -265,15 +266,15 @@
                 </v-chip>
               </v-chip-group>
 
-              <v-divider v-if="step1Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
+              <v-divider v-if="step2Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 Which operating system do you use to run on-premise Grafana?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'false'"
-                v-model="step1Os"
+                v-if="step2Cloud == 'false'"
+                v-model="step2Os"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -309,17 +310,17 @@
                 </v-chip>
               </v-chip-group>
 
-              <v-divider v-if="step1Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
+              <v-divider v-if="step2Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 Details about your on-premise Grafana deployment:
               </h3>
-              <div v-if="step1Cloud == 'false'">
-                {{ step1DeploymentDetailsDescription }} Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+              <div v-if="step2Cloud == 'false'">
+                {{ step2DeploymentDetailsDescription }} Please use 3 backticks (```) to format your commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
-              <MdEditor v-if="step1Cloud == 'false'" 
-                v-model="step1DeploymentDetails" 
+              <MdEditor v-if="step2Cloud == 'false'" 
+                v-model="step2DeploymentDetails" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -348,11 +349,11 @@
                 What kind of problem happened?
               </h3>
               <div>
-                Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2WhatHappened" 
+                v-model="step3WhatHappened" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -369,11 +370,11 @@
                 What did you expect to happen?
               </h3>
               <div>
-                Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2WhatsExpected" 
+                v-model="step3WhatsExpected" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -390,11 +391,11 @@
                 How to reproduce it?
               </h3>
               <div>
-                Please provide a steps. Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please provide a steps. Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2HowReproduce" 
+                v-model="step3HowReproduce" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -411,11 +412,11 @@
                 Additional problem details
               </h3>
               <div>
-                Please provide more details, which can be usefull. Did it work before? If it worked before, what Grafana version worked correctly? Provide more details about plugin (name, version, installation method) if problem is related to plugin. Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please provide more details, which can be usefull. Did it work before? If it worked before, what Grafana version worked correctly? Provide more details about plugin (name, version, installation method) if problem is related to plugin. Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2AdditionalDetails" 
+                v-model="step3AdditionalDetails" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -445,12 +446,12 @@
                 Documentation link
               </h3>
               <div>
-                Please provide a link(s) to documentation, which you have used to configure Grafana. Make sure that you have used documentation applicable for your Grafana version and type - {{ step1Type }} {{ step1Version }}.
+                Please provide a link(s) to documentation, which you have used to configure Grafana. Make sure that you have used documentation applicable for your Grafana version and type - {{ step2Type }} {{ step2Version }}.
                 Users make a mistake very often, when they use documentation for different Grafana version or type (e.g. latest where is more features, when they have in their older version or paid licensed features, which are not available for free).
               </div>
 
               <MdEditor 
-                v-model="step3DocumentationLink"
+                v-model="step4DocumentationLink"
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -476,7 +477,7 @@
           <v-card title="Recommendations" flat>
             <v-card-text>
               See recommendations with their pros and cons.<br /><br />
-              <div v-if="step1Type.toLowerCase().includes('licensed') && !step1Type.toLowerCase().includes('unlicensed')">
+              <div v-if="step2Type.toLowerCase().includes('licensed') && !step2Type.toLowerCase().includes('unlicensed')">
                 You have Enteprise licensed Grafana, so you can contact Grafana Enterprise support.
                 <br /><br />
                 <v-table>
@@ -503,10 +504,10 @@
                   </tbody>
                 </v-table>
 
-                <v-btn color="info" :href="'mailto:support@grafana.com?subject='+step4Title+'&body='+getPrompt()+createSignature()">Email Grafana Enterprise support</v-btn>
+                <v-btn color="info" :href="'mailto:support@grafana.com?subject='+step5Title+'&body='+getPrompt()+createSignature()">Email Grafana Enterprise support</v-btn>
               </div>
 
-              <v-divider v-if="step1Type.toLowerCase().includes('licensed') && !step1Type.toLowerCase().includes('unlicensed')" class="ma-4"></v-divider>
+              <v-divider v-if="step2Type.toLowerCase().includes('licensed') && !step2Type.toLowerCase().includes('unlicensed')" class="ma-4"></v-divider>
 
               Try to talk to Grot (AI) - the chatbot has been trained with large language models (LLM) on Grafana Labs’ own content. 
               See <a target="_blank" href="https://grafana.com/blog/2023/10/12/ask-grot-how-were-building-a-chatbot-thats-actually-helpful-on-our-website/">blogpost</a> for more details.
@@ -622,19 +623,19 @@
               
               <v-row>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://community.grafana.com/search?q='+encodeURIComponent(step4SearchQuery.replace('Grafana ', ''))+'%20order%3Alatest')">Search on Community Forum</v-btn>
+                  <v-btn color="info" @click="window.open('https://community.grafana.com/search?q='+encodeURI(step5SearchQuery.replace('Grafana ', ''))+'%20order%3Alatest')">Search on Community Forum</v-btn>
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://stackoverflow.com/search?q=%5Bgrafana%5D+'+encodeURIComponent(step4SearchQuery).replace('Grafana ', ''))">Search on Stack Overflow</v-btn>                  
+                  <v-btn color="info" @click="window.open('https://stackoverflow.com/search?q=%5Bgrafana%5D+'+encodeURI(step5SearchQuery).replace('Grafana ', ''))">Search on Stack Overflow</v-btn>                  
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://github.com/grafana/grafana/issues?q=is%3Aissue+'+encodeURIComponent(step4SearchQuery.replace('Grafana ', '')))">Search in Github Grafana issues</v-btn>                  
+                  <v-btn color="info" @click="window.open('https://github.com/grafana/grafana/issues?q=is%3Aissue+'+encodeURI(step5SearchQuery.replace('Grafana ', '')))">Search in Github Grafana issues</v-btn>                  
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://www.google.com/search?q='+encodeURIComponent(step4SearchQuery))">Search on Google</v-btn>
+                  <v-btn color="info" @click="window.open('https://www.google.com/search?q='+encodeURI(step5SearchQuery))">Search on Google</v-btn>
                 </v-col>
                 <v-col v-if="getPrompt().toLowerCase().includes('influx')">
-                  <v-btn v-if="getPrompt().toLowerCase().includes('influx')" color="info" @click="window.open('https://community.influxdata.com/search?q='+encodeURIComponent(step4Title))">Search on Influx Community Forum</v-btn>
+                  <v-btn v-if="getPrompt().toLowerCase().includes('influx')" color="info" @click="window.open('https://community.influxdata.com/search?q='+encodeURI(step5Title))">Search on InfluxData Forum</v-btn>
                 </v-col>
               </v-row>
               
@@ -665,7 +666,7 @@
                   </tr>
                 </tbody>
               </v-table>
-              <v-btn color="info" @click="window.open('https://community.grafana.com/new-topic?title=' + encodeURIComponent(step4Title) + '&category=' + encodeURIComponent(step4Category) + '&tags=' + step4Tags + '&body=' + encodeURIComponent(getPrompt()+createSignature('markdown')))">Create community post</v-btn>
+              <v-btn color="info" @click="window.open('https://community.grafana.com/new-topic?title=' + encodeURIComponent(step5Title) + '&category=' + encodeURIComponent(step5Category) + '&tags=' + step5Tags + '&body=' + encodeURIComponent(getPrompt()+createSignature('markdown')))">Create community post</v-btn>
 
               <br /><br />
               <br /><br />
@@ -682,93 +683,84 @@
 </template>
 
 <script setup>
-import { MdEditor, MdPreview } from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
+import { MdEditor, MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
 
 </script>
 <script>
 import { useTheme } from 'vuetify'
-
-//import { router } from '../router'
-// import { useRouter } from 'vue-router'
-// var router = useRouter()
-// router.afterEach(() => {
-//   this.setVariablesFromHash()
-//   console.log('router.afterEach')
-// });
+import rison from 'rison-node'
+import { event } from 'vue-gtag'
 
 export default {
-  created() {
-    window.addEventListener("resize", this.setMobile());
-    this.setMobile();
-    // test data prefill
-    if (false) {
-      this.step1Version = "v10.2.3";
-      this.step1Type = "Enterprise (Free & unlicensed)";
-      //this.step1Type = "Enterprise (Licensed)";
-      this.step1Cloud = "false";
-      this.step1Installation = "installed as container with orchestration";
-      this.step1Os = "Linux";
-      this.step1DeploymentDetails = "My docker-compose yaml file:\n```yaml\nversion: '3.8'\nservices:\n  grafana:\n    image: grafana/grafana-enterprise:latest\n    ports:\n      - 3000:3000\n    environment:\n      - GF_AUTH_ANONYMOUS_ENABLED=true\n      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin\n      - GF_AUTH_ANONYMOUS_ORG_NAME=Main Org.\n      - GF_AUTH_ANONYMOUS_ORG_ID=1\n    volumes:\n      - grafana-storage:/var/lib/grafana\nvolumes:\n  grafana-storage:\n```";
-      this.step2WhatHappened  = "I don't see SAML login option in the login page.";
-      this.step2WhatsExpected = "I expect to see SAML login option in the login page.";
-      this.step2HowReproduce  = "1. Open Grafana login page.\n2. See that SAML login option is missing.";
-      this.step2AdditionalDetails = "I have configured SAML authentication according to the documentation. I use Azure IDP.";
-      this.step3DocumentationLink = "https://grafana.com/docs/grafana/latest/auth/saml/";
-    }
+  mounted() {
     this.setVariablesFromHash();
+    //required workaround
+    this.step++;
+    this.step--;
+  },
+  created() {
+    window.addEventListener("resize", this.setMobile())
+    this.setMobile()
   },
   data: () => ({
     step: 1,
     mobile: false,
     loading: false,
     theme: 'dark',
-    step1Version: null,
-    step1Type: null,
-    step1Cloud: null,
-    step1CloudProvider: null,
-    step1Installation: null,
-    step1Os: null,
-    step1DeploymentDetails: "",
-    step1DeploymentDetailsDescription: "Please provide more details about deployment",
-    step2WhatHappened: "",
-    step2WhatsExpected: "",
-    step2HowReproduce: "",
-    step2AdditionalDetails: "",
-    step3DocumentationLink: "",
-    step4Title: "",
-    step4Category: "",
-    step4SearchQuery: "",
-    step4Tags: "",
+    step2Version: null,
+    step2Type: null,
+    step2Cloud: null,
+    step2CloudProvider: null,
+    step2Installation: null,
+    step2Os: null,
+    step2DeploymentDetails: "",
+    step2DeploymentDetailsDescription: "Please provide more details about deployment. ",
+    step3WhatHappened: "",
+    step3WhatsExpected: "",
+    step3HowReproduce: "",
+    step3AdditionalDetails: "",
+    step4DocumentationLink: "",
+    step5Title: "",
+    step5Category: "",
+    step5SearchQuery: "",
+    step5Tags: "",
     grotApplicationId: "06a226e5-ecb6-4193-8996-aab4460a15e0",
     grotConversationId: null,
     grotShow: false,
     chat: [],
     msg: "",
-    inputVariables: ['step', 'step1Version', 'step1Type', 'step1Cloud', 'step1CloudProvider', 'step1Installation', 'step1Os', 'step1DeploymentDetails', 'step2WhatHappened', 'step2WhatsExpected', 'step2HowReproduce', 'step2AdditionalDetails', 'step3DocumentationLink', 'step4Title', 'step4Category', 'step4SearchQuery', 'step4Tags'],
+    inputVariables: ['step', 'step2Version', 'step2Type', 'step2Cloud', 'step2CloudProvider', 'step2Installation', 'step2Os', 'step2DeploymentDetails', 'step3WhatHappened', 'step3WhatsExpected', 'step3HowReproduce', 'step3AdditionalDetails', 'step4DocumentationLink', 'step5Title', 'step5Category', 'step5SearchQuery', 'step5Tags'],
   }),
   watch : {
-    // $route() {
-    //   this.setVariablesFromHash()
-    // },
+    $route() {
+      this.setVariablesFromHash()
+      //required workaround
+      this.step++;
+      this.step--;
+    },
     step() {
       if (this.step == 5) {
         this.askGrotForSummary();
       }
       this.setHash();
+      event('step', {
+        'event-label': this.step,
+        value: 1
+      })
     },
-    installation() {
-      if (this.step1Installation.toLowerCase().includes('simple')) {
-        this.step1DeploymentDetailsDescription = "Please provide command how did you started simple Grafana container.";
+    step2Installation() {
+      if (this.step2Installation.toLowerCase().includes('simple')) {
+        this.step2DeploymentDetailsDescription = "Please provide command how did you started simple Grafana container.";
       }
-      if (this.step1Installation.toLowerCase().includes('package')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
+      if (this.step2Installation.toLowerCase().includes('package')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
       }
-      if (this.step1Installation.toLowerCase().includes('orchestration')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details about used orchestration configuration, e.g. Kubernetes (used container images, helm charts and their versions, how Grafana service is exposed), Docker Compose (docker-compose yaml file), AWS ECS (ECS task definition).";
+      if (this.step2Installation.toLowerCase().includes('orchestration')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details about used orchestration configuration, e.g. Kubernetes (used container images, helm charts and their versions, how Grafana service is exposed), Docker Compose (docker-compose yaml file), AWS ECS (ECS task definition).";
       }
-      if (this.step1Installation.toLowerCase().includes('source')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
+      if (this.step2Installation.toLowerCase().includes('source')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
       }
     }
   },
@@ -786,14 +778,24 @@ export default {
       }
     },
     setHash() {
-      var hash = ''
+      var obj = {}
       for (var i = 0; i < this.inputVariables.length; i++) {
         var variable = this.inputVariables[i]
         if (this[variable] != null && this[variable] != "") {
-          hash = hash + "&" + variable + "=" + encodeURIComponent(this[variable])
+          obj[variable] = encodeURIComponent(this[variable]);
         }
       }
-      window.location.hash = hash.substring(1)
+      window.location.hash = rison.encode(obj)
+    },
+    setVariablesFromHash() {
+      var hash = window.location.hash.substring(1)
+      var obj = {}
+      if (hash != null && hash != "") {
+        obj = rison.decode(hash);
+      }
+      for (var variable in obj) {
+        this[variable] = decodeURIComponent(obj[variable]);
+      }
     },
     createSignature(format) {
       if (format=='markdown') {
@@ -801,17 +803,6 @@ export default {
       }
       return '\n\nProblem debugged with Grafana Debugger: ' + window.location.href;
     },
-    setVariablesFromHash() {
-      var hash = window.location.hash.substring(1)
-      var variables = hash.split("&")
-      for (var i = 0; i < variables.length; i++) {
-        var variable = variables[i]
-        var parts = variable.split("=")
-        if (parts.length == 2) {
-          this[parts[0]] = decodeURIComponent(parts[1])
-        }
-      }
-    },
     sendToGrot() {
       if (this.msg == null || this.msg == "") {
         return
@@ -844,22 +835,21 @@ export default {
       })
       .then(response => response.json())
       .then(data => {
-        console.log("Grot problem summary: " + data.messages[data.messages.length - 1].content);
         var msg = data.messages[data.messages.length - 1].content;
         var lines = msg.split("\n");
         for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.startsWith("Title: ")) {
-            this.step4Title = line.substring(7);
+            this.step5Title = line.substring(7);
           }
           if (line.startsWith("Category: ")) {
-            this.step4Category = line.substring(10);
+            this.step5Category = line.substring(10);
           }
           if (line.startsWith("Search Query: ")) {
-            this.step4SearchQuery = line.substring(14).replace("Enteprise ", "").replace("Open Source ", "");
+            this.step5SearchQuery = line.substring(14).replace("Enteprise ", "").replace("Open Source ", "");
           }
           if (line.startsWith("Tags: ")) {
-            this.step4Tags = line.substring(6).replace(" ","").toLowerCase();
+            this.step5Tags = line.substring(6).replace(" ","").toLowerCase();
           }
         }
         this.setHash();
@@ -875,9 +865,9 @@ export default {
         "conversationId": this.grotConversationId,
         "messageContent": message,
         "isStreaming": false,
-        "role": "system"
       };
       this.chat.push({from: 'user', msg: data.messageContent});
+      event('askGrot', { source: 'user' })
       fetch(url, {
         method: 'POST',
         headers: {
@@ -903,30 +893,30 @@ export default {
     },
     getPrompt() {
       var deployment;
-      if (this.step1Cloud == 'true') {
-        deployment = `It is managed by ${this.step1CloudProvider}`;
+      if (this.step2Cloud == 'true') {
+        deployment = `It is managed by ${this.step2CloudProvider}`;
       }
-      if (this.step1Cloud == 'false') {
-        deployment = `It is on-premise (selfhosted) Grafana, ${this.step1Installation} on ${this.step1Os}.`;
+      if (this.step2Cloud == 'false') {
+        deployment = `It is on-premise (selfhosted) Grafana, ${this.step2Installation} on ${this.step2Os}.`;
       }
-      var msg = `### Deployment:\nI have Grafana ${this.step1Type} ${this.step1Version}. ${deployment}`
-      if (this.step1DeploymentDetails!="") {
-        msg = msg + "\n\n### Deployment details:\n" + this.step1DeploymentDetails;
+      var msg = `### Deployment:\nI have Grafana ${this.step2Type} ${this.step2Version}. ${deployment}`
+      if (this.step2DeploymentDetails!="") {
+        msg = msg + "\n\n### Deployment details:\n" + this.step2DeploymentDetails;
       }
-      if (this.step2WhatHappened!="") {
-        msg = msg + "\n\n### Problem, which happened:\n" + this.step2WhatHappened;
+      if (this.step3WhatHappened!="") {
+        msg = msg + "\n\n### Problem, which happened:\n" + this.step3WhatHappened;
       }
-      if (this.step2WhatsExpected!="") {
-        msg = msg + "\n\n### What I expected:\n" + this.step2WhatsExpected;
+      if (this.step3WhatsExpected!="") {
+        msg = msg + "\n\n### What I expected:\n" + this.step3WhatsExpected;
       }
-      if (this.step2HowReproduce!="") {
-        msg = msg + "\n\n### How to reproduce it:\n" + this.step2HowReproduce;
+      if (this.step3HowReproduce!="") {
+        msg = msg + "\n\n### How to reproduce it:\n" + this.step3HowReproduce;
       }
-      if (this.step2AdditionalDetails!="") {
-        msg = msg + "\n\n### Additional problem details:\n" + this.step2AdditionalDetails;
+      if (this.step3AdditionalDetails!="") {
+        msg = msg + "\n\n### Additional problem details:\n" + this.step3AdditionalDetails;
       }
-      if (this.step3DocumentationLink!="") {
-        msg = msg + "\n\n### I followed this documentation link(s):\n" + this.step3DocumentationLink;
+      if (this.step4DocumentationLink!="") {
+        msg = msg + "\n\n### I followed this documentation link(s):\n" + this.step4DocumentationLink;
       }
       return msg;
     }