From bdcb20de6b2f0d2c724e46b729fa3151663c5579 Mon Sep 17 00:00:00 2001
From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Date: Sat, 9 Mar 2024 00:30:41 +0530
Subject: [PATCH] feat: dashboard tutorial button (#2920)

![image](https://github.com/openobserve/openobserve/assets/134508096/af520380-ba21-4471-8b14-1ca70ee532d7)

Co-authored-by: Prabhat Sharma <hi.prabhat@gmail.com>
---
 web/src/views/Dashboards/addPanel/AddPanel.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue
index 2128aa7837..fc887e4866 100644
--- a/web/src/views/Dashboards/addPanel/AddPanel.vue
+++ b/web/src/views/Dashboards/addPanel/AddPanel.vue
@@ -34,6 +34,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </div>
       <div class="flex q-gutter-sm">
+        <q-btn
+          outline
+          padding="sm"
+          class="q-mr-sm"
+          no-caps
+          label="Dashboard Tutorial"
+          @click="showTutorial"
+          data-test="dashboard-panel-tutorial-btn"
+        ></q-btn>
         <q-btn
           v-if="!['html', 'markdown'].includes(dashboardPanelData.data.type)"
           outline
@@ -369,6 +378,11 @@ export default defineComponent({
       metaData.value = metadata;
     };
 
+    //dashboard tutorial link on click
+    const showTutorial = () => {
+      window.open("https://short.openobserve.ai/dashboard-tutorial");
+    };
+    
     const variablesDataUpdated = (data: any) => {
       Object.assign(variablesData, data);
     };
@@ -1258,6 +1272,7 @@ export default defineComponent({
       metaData,
       panelTitle,
       onDataZoom,
+      showTutorial,
     };
   },
   methods: {