From bb66e051c9d76c79ec1e588959ef643ea899bdc8 Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Thu, 16 Jan 2025 19:00:13 +0530
Subject: [PATCH] fix: Import dashboard latest revamp (#5546)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Enhanced dashboard import functionality with a tabbed interface for
file and URL imports.
  - Added support for community dashboard navigation.

- **Localization**
- Added "Community Dashboards" translation for English language support.

- **User Experience**
  - Streamlined dashboard import process with dynamic input components.
- Improved input validation and error handling during dashboard imports.
  - More robust error feedback for import-related actions.
  - Updated layout for better user interaction and navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 web/src/composables/shared/router.ts         |   2 +-
 web/src/locales/languages/en.json            |   3 +-
 web/src/views/Dashboards/ImportDashboard.vue | 892 ++++++++++++++-----
 3 files changed, 667 insertions(+), 230 deletions(-)

diff --git a/web/src/composables/shared/router.ts b/web/src/composables/shared/router.ts
index a9de7c9afd..b4a13407ff 100644
--- a/web/src/composables/shared/router.ts
+++ b/web/src/composables/shared/router.ts
@@ -186,7 +186,7 @@ const useRoutes = () => {
       component: ImportDashboard,
       props: true,
       meta: {
-        keepAlive: true,
+        // keepAlive: true,
       },
       beforeEnter(to: any, from: any, next: any) {
         routeGuard(to, from, next);
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index 0bacfa4ca3..8b60d48b1f 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -731,7 +731,8 @@
     "searchMsg": "Search for Dashboards across Folders",
     "trellisLayout": "Trellis Layout",
     "numOfColumns": "Columns per Row",
-    "trellisTooltip": "This is only applicable when breakdown field is available. Add Breakdown Field to enable Trellis Layout"
+    "trellisTooltip": "This is only applicable when breakdown field is available. Add Breakdown Field to enable Trellis Layout",
+    "communityDashboard": "Community Dashboards"
   },
   "panel": {
     "header": "Panel",
diff --git a/web/src/views/Dashboards/ImportDashboard.vue b/web/src/views/Dashboards/ImportDashboard.vue
index 77a97ae601..9449b9904f 100644
--- a/web/src/views/Dashboards/ImportDashboard.vue
+++ b/web/src/views/Dashboards/ImportDashboard.vue
@@ -14,15 +14,15 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="q-mx-md q-my-md">
-    <div class="row items-center no-wrap">
+  <div class="q-mx-sm q-mt-md">
+    <div class="flex q-mx-md items-center no-wrap">
       <div class="col">
         <div class="flex">
           <q-btn
             no-caps
-            @click="goBack()"
             padding="xs"
             outline
+            @click="goBack()"
             icon="arrow_back_ios_new"
           />
           <div class="text-h6 q-ml-md">
@@ -30,165 +30,307 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </div>
         </div>
       </div>
+      <div class="flex justify-center">
+        <q-btn
+          outline
+          padding="sm"
+          class="q-mr-md"
+          no-caps
+          :label="t('dashboard.communityDashboard')"
+          @click="goToCommunityDashboards"
+          data-test="dashboard-panel-tutorial-btn"
+        ></q-btn>
+        <q-btn
+          v-close-popup
+          class="text-bold q-mr-md"
+          :label="t('function.cancel')"
+          text-color="light-text"
+          padding="sm xl"
+          no-caps
+          @click="goBack()"
+        />
+        <q-btn
+          :disable="!!isLoading"
+          class="text-bold no-border"
+          :label="t('dashboard.import')"
+          color="secondary"
+          type="submit"
+          padding="sm xl"
+          no-caps
+          @click="importDashboard"
+        />
+      </div>
     </div>
     <q-separator class="q-my-sm" />
-    <div style="width: 400px">
-      <q-form @submit="onSubmit">
-        <div class="q-my-md">Import Dashboard from exported JSON file</div>
-        <div style="width: 400px">
-          <q-file
-            filled
-            bottom-slots
-            v-model="jsonFiles"
-            :label="t('dashboard.dropFileMsg')"
-            accept=".json"
-            multiple
-            :disable="!!isLoading"
-          >
-            <template v-slot:prepend>
-              <q-icon name="cloud_upload" @click.stop.prevent />
-            </template>
-            <template v-slot:append>
-              <q-icon
-                name="close"
-                @click.stop.prevent="jsonFiles = null"
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:hint> .json files only </template>
-          </q-file>
+    <div class="flex">
+      <div
+        class="dashboard-import-type-tabs flex items-center justify-center q-mx-md"
+      >
+        <app-tabs
+          data-test="dashboard-import-type-tabs"
+          class="q-mr-md"
+          :tabs="tabs"
+          v-model:active-tab="activeTab"
+          @update:active-tab="updateActiveTab"
+        />
+      </div>
 
-          <!-- select folder or create new folder and select -->
-          <select-folder-dropdown
-            @folder-selected="selectedFolderAtJson = $event"
-            :activeFolderId="selectedFolderAtJson.value"
-          />
+      <div class="flex">
+        <q-splitter
+          no-scroll
+          v-model="splitterModel"
+          :limits="[40, 80]"
+          style="width: calc(95vw - 20px); height: 100%"
+        >
+          <template #before>
+            <div
+              v-if="activeTab == 'import_json_url'"
+              class="editor-container-url"
+            >
+              <q-form class="q-mx-md q-mt-md" @submit="onSubmit">
+                <div
+                  style="width: calc(100% - 10px)"
+                  class="q-mb-md flex full-width editor-form"
+                >
+                  <div
+                    data-test="dashboard-import-url-input"
+                    style="width: 69%"
+                    class="q-pr-sm"
+                  >
+                    <q-input
+                      v-model="url"
+                      :label="t('dashboard.addURL')"
+                      color="input-border"
+                      bg-color="input-bg"
+                      stack-label
+                      filled
+                      label-slot
+                      :loading="isLoading == ImportType.URL"
+                    />
+                  </div>
 
-          <div>
-            <div v-if="filesImportResults.length" class="q-py-sm">
-              <div v-for="importResult in filesImportResults">
-                <span v-if="importResult.status == 'rejected'" class="text-red">
-                  <code style="background-color: #f2f1f1; padding: 3px">{{
-                    importResult?.reason?.file
-                  }}</code>
-                  : {{ importResult?.reason?.error }}
-                </span>
+                  <div
+                    style="width: calc(30%)"
+                    class="dashboard-folder-dropdown"
+                    data-test="dashboard-folder-dropdown"
+                  >
+                    <select-folder-dropdown
+                      @folder-selected="selectedFolder = $event"
+                      :activeFolderId="selectedFolder.value"
+                    />
+                  </div>
+                </div>
+                <query-editor
+                  data-test="dashboard-import-url-editor"
+                  ref="queryEditorFileRef"
+                  editor-id="dashboards-query-editor-file"
+                  class="monaco-editor"
+                  :debounceTime="300"
+                  v-model:query="jsonStr"
+                  language="json"
+                  :class="
+                    jsonStr == '' && queryEditorPlaceholderFlag
+                      ? 'empty-query'
+                      : ''
+                  "
+                  @focus="queryEditorPlaceholderFlag = false"
+                  @blur="queryEditorPlaceholderFlag = true"
+                />
+              </q-form>
+            </div>
+            <div
+              v-if="activeTab == 'import_json_file'"
+              class="dashboard-import-json-container"
+            >
+              <q-form class="q-mx-md q-mt-md" @submit="onSubmit">
+                <div
+                  style="width: calc(100% - 10px)"
+                  class="q-mb-md flex full-width editor-form"
+                >
+                  <div
+                    data-test="dashboard-import-file-input"
+                    style="width: 69%"
+                    class="q-pr-sm"
+                  >
+                    <q-file
+                      v-model="jsonFiles"
+                      filled
+                      bottom-slots
+                      :label="t('dashboard.dropFileMsg')"
+                      accept=".json"
+                      multiple
+                      :disable="!!isLoading"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="cloud_upload" @click.stop.prevent />
+                      </template>
+                      <template v-slot:append>
+                        <q-icon
+                          name="close"
+                          @click.stop.prevent="jsonFiles = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                      <template v-slot:hint> .json files only </template>
+                    </q-file>
+                  </div>
+                  <div
+                    style="width: calc(30%)"
+                    class="dashboard-folder-dropdown"
+                  >
+                    <select-folder-dropdown
+                      @folder-selected="selectedFolder = $event"
+                      :activeFolderId="selectedFolder.value"
+                    />
+                  </div>
+                  <div v-if="filesImportResults.length" class="q-py-sm">
+                    <div v-for="importResult in filesImportResults">
+                      <span
+                        v-if="importResult.status == 'rejected'"
+                        class="text-red"
+                      >
+                        <code style="background-color: #f2f1f1; padding: 3px">{{
+                          importResult?.reason?.file
+                        }}</code>
+                        : {{ importResult?.reason?.error }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <query-editor
+                  data-test="dashboard-import-json-file-editor"
+                  ref="queryEditorJsonRef"
+                  editor-id="dashboards-query-editor-json"
+                  class="monaco-editor"
+                  :debounceTime="300"
+                  v-model:query="jsonStr"
+                  language="json"
+                  :class="
+                    jsonStr == '' && queryEditorPlaceholderFlag
+                      ? 'empty-query'
+                      : ''
+                  "
+                  @focus="queryEditorPlaceholderFlag = false"
+                  @blur="queryEditorPlaceholderFlag = true"
+                />
+
+                <div></div>
+              </q-form>
+            </div>
+          </template>
+          <template #after>
+            <div
+              data-test="dashboard-import-error-container"
+              style="width: 100%; height: 100%"
+            >
+              <div class="text-center text-h6">Error Validations</div>
+              <q-separator class="q-mt-md" />
+              <div
+                class="error-section"
+                v-if="dashboardErrorsToDisplay.length > 0"
+              >
+                <div class="error-list">
+                  <!-- Iterate through the outer array -->
+
+                  <!-- Iterate through each inner array (the individual error message) -->
+                  <div
+                    v-for="(
+                      errorMessage, errorIndex
+                    ) in dashboardErrorsToDisplay"
+                    :key="errorIndex"
+                    class="error-item"
+                  >
+                    <span
+                      v-if="errorMessage.field == 'dashboard_title'"
+                      class="text-red"
+                    >
+                      {{ errorMessage.message }}
+                      <div style="width: 300px">
+                        <q-input
+                          v-model="dashboardTitles[errorIndex]"
+                          :label="'Dashboard Title'"
+                          color="input-border"
+                          bg-color="input-bg"
+                          class="showLabelOnTop"
+                          stack-label
+                          outlined
+                          filled
+                          dense
+                          tabindex="0"
+                          @update:model-value="
+                            updateDashboardTitle(
+                              dashboardTitles[errorIndex],
+                              errorMessage.dashboardIndex,
+                            )
+                          "
+                        />
+                      </div>
+                    </span>
+                    <span
+                      v-else-if="errorMessage.field == 'stream_type'"
+                      class="text-red"
+                    >
+                      {{ errorMessage.message }}
+                      <div style="width: 300px">
+                        <q-select
+                          v-model="streamTypes[errorIndex]"
+                          :options="streamTypeOptions"
+                          :label="'Stream Type'"
+                          :popup-content-style="{
+                            textTransform: 'lowercase',
+                          }"
+                          color="input-border"
+                          bg-color="input-bg"
+                          class="q-py-sm showLabelOnTop no-case"
+                          filled
+                          stack-label
+                          dense
+                          use-input
+                          hide-selected
+                          fill-input
+                          :input-debounce="400"
+                          @update:model-value="
+                            updateStreamType(
+                              streamTypes[errorIndex],
+                              errorMessage.dashboardIndex,
+                              errorMessage.tabIndex,
+                              errorMessage.panelIndex,
+                              errorMessage.queryIndex,
+                            )
+                          "
+                          behavior="menu"
+                        />
+                      </div>
+                    </span>
+
+                    <span v-else>{{ errorMessage }}</span>
+                  </div>
+                </div>
               </div>
             </div>
-            <q-btn
-              :disable="!!isLoading"
-              :loading="isLoading == ImportType.FILES"
-              :label="t('dashboard.import')"
-              class="q-my-md text-bold no-border"
-              color="secondary"
-              padding="sm xl"
-              type="submit"
-              no-caps
-              @click="importFiles()"
-            />
-          </div>
-        </div>
-      </q-form>
-      <q-separator class="q-my-sm" />
-
-      <q-form @submit="onSubmit">
-        <div class="q-my-md">{{ t("dashboard.importURL") }}</div>
-        <div style="width: 400px">
-          <q-input
-            v-model="url"
-            :label="t('dashboard.addURL')"
-            color="input-border"
-            bg-color="input-bg"
-            stack-label
-            filled
-            dense
-            label-slot
-            :disable="!!isLoading"
-          />
-
-          <!-- select folder or create new folder and select -->
-          <select-folder-dropdown
-            @folder-selected="selectedFolderAtUrl = $event"
-            :activeFolderId="selectedFolderAtUrl.value"
-          />
-
-          <div class="q-my-md">
-            <q-btn
-              :disable="!!isLoading"
-              :loading="isLoading == ImportType.URL"
-              class="text-bold no-border"
-              :label="t('dashboard.import')"
-              color="secondary"
-              type="submit"
-              no-caps
-              @click="importFromUrl()"
-              padding="sm xl"
-            />
-          </div>
-        </div>
-      </q-form>
-      <q-separator class="q-my-sm" />
-      <q-form @submit="onSubmit">
-        <div class="q-my-md">{{ t("dashboard.importJson") }}</div>
-        <div style="width: 400px" class="flex">
-          <q-input
-            :disable="!!isLoading"
-            v-model="jsonStr"
-            style="width: 400px"
-            :label="t('dashboard.jsonObject')"
-            color="input-border"
-            dense
-            filled
-            type="textarea"
-          />
-        </div>
-
-        <!-- select folder or create new folder and select -->
-        <select-folder-dropdown
-          @folder-selected="selectedFolderAtJsonObj = $event"
-          :activeFolderId="selectedFolderAtJsonObj.value"
-        />
-
-        <div class="q-my-md">
-          <q-btn
-            :disable="!!isLoading"
-            :loading="isLoading == ImportType.JSON_STRING"
-            class="text-bold no-border q-mr-md"
-            :label="t('dashboard.import')"
-            color="secondary"
-            type="submit"
-            padding="sm xl"
-            no-caps
-            @click="importFromJsonStr()"
-          />
-          <q-btn
-            v-close-popup
-            class="text-bold"
-            :label="t('function.cancel')"
-            text-color="light-text"
-            padding="sm xl"
-            no-caps
-            @click="goBack()"
-          />
-        </div>
-      </q-form>
+          </template>
+        </q-splitter>
+      </div>
     </div>
+
     <div></div>
   </div>
 </template>
 <script lang="ts">
 // @ts-nocheck
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, ref, onMounted, reactive, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { getAllDashboards, getFoldersList } from "../../utils/commons.ts";
+import { getAllDashboards, getFoldersList } from "../../utils/commons.js";
 import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
-import dashboardService from "../../services/dashboards";
+import dashboardService from "../../services/dashboards.js";
 import axios from "axios";
 import { convertDashboardSchemaVersion } from "@/utils/dashboard/convertDashboardSchemaVersion";
 import SelectFolderDropdown from "@/components/dashboards/SelectFolderDropdown.vue";
 import useNotifications from "@/composables/useNotifications";
-
+import AppTabs from "@/components/common/AppTabs.vue";
+import QueryEditor from "@/components/QueryEditor.vue";
+import stream from "@/services/stream.js";
 export default defineComponent({
   name: "Import Dashboard",
   props: ["dashboardId"],
@@ -199,24 +341,10 @@ export default defineComponent({
     const route = useRoute();
     const { showPositiveNotification, showErrorNotification } =
       useNotifications();
-    const selectedFolderAtJson = ref({
+    const selectedFolder = ref({
       label:
         store.state.organizationData.folders.find(
-          (item: any) => item.folderId === route.query.folder ?? "default"
-        )?.name ?? "default",
-      value: route.query.folder,
-    });
-    const selectedFolderAtUrl = ref({
-      label:
-        store.state.organizationData.folders.find(
-          (item: any) => item.folderId === route.query.folder ?? "default"
-        )?.name ?? "default",
-      value: route.query.folder,
-    });
-    const selectedFolderAtJsonObj = ref({
-      label:
-        store.state.organizationData.folders.find(
-          (item: any) => item.folderId === route.query.folder ?? "default"
+          (item: any) => item.folderId === route.query.folder ?? "default",
         )?.name ?? "default",
       value: route.query.folder,
     });
@@ -226,9 +354,27 @@ export default defineComponent({
     const url = ref("");
     const jsonStr = ref("");
 
+    const tabs = reactive([
+      {
+        label: "File Upload / JSON",
+        value: "import_json_file",
+      },
+      {
+        label: "URL Import",
+        value: "import_json_url",
+      },
+    ]);
+    const activeTab = ref("import_json_file");
+
+    const dashboardErrorsToDisplay = ref([]);
+    const splitterModel = ref(60);
+
     // holds the value of the loading for any of the import type
     const isLoading = ref(false);
-
+    const queryEditorPlaceholderFlag = ref(true);
+    const dashboardTitles = reactive({});
+    const streamTypes = reactive({});
+    const streamTypeOptions = ["logs", "metrics", "traces"];
     // import type values
     const ImportType = {
       FILES: "files",
@@ -242,40 +388,99 @@ export default defineComponent({
     onMounted(async () => {
       filesImportResults.value = [];
       await getFoldersList(store);
-      selectedFolderAtJson.value = {
+      selectedFolder.value = {
         label:
           store.state.organizationData.folders.find(
-            (item: any) => item.folderId === route.query.folder ?? "default"
-          )?.name ?? "default",
-        value: route.query.folder,
-      };
-      selectedFolderAtUrl.value = {
-        label:
-          store.state.organizationData.folders.find(
-            (item: any) => item.folderId === route.query.folder ?? "default"
-          )?.name ?? "default",
-        value: route.query.folder,
-      };
-      selectedFolderAtJsonObj.value = {
-        label:
-          store.state.organizationData.folders.find(
-            (item: any) => item.folderId === route.query.folder ?? "default"
+            (item: any) => item.folderId === route.query.folder ?? "default",
           )?.name ?? "default",
         value: route.query.folder,
       };
     });
 
+    watch(jsonFiles, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        const fileContents = []; // Array to store parsed JSON objects
+
+        newVal.forEach((file) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            try {
+              const jsonObject = JSON.parse(e.target.result);
+              fileContents.push(jsonObject);
+
+              // Check if all files have been processed
+              if (fileContents.length === newVal.length) {
+                jsonStr.value = JSON.stringify(fileContents, null, 2);
+              }
+            } catch (error) {
+              console.error("Error parsing JSON:", error);
+            }
+          };
+          reader.readAsText(file);
+        });
+      }
+    });
+
+    watch(jsonStr, (newVal) => {
+      if (newVal && newVal !== JSON.stringify(JSON.parse(newVal), null, 2)) {
+        try {
+          if (typeof newVal === "object") {
+            jsonStr.value = JSON.stringify(newVal, null, 2);
+          } else {
+            const jsonObject = JSON.parse(newVal);
+            jsonStr.value = JSON.stringify(jsonObject, null, 2);
+          }
+        } catch (error) {
+          showErrorNotification("Invalid JSON format");
+        }
+      }
+    });
+
+    watch(url, async (newVal) => {
+      try {
+        if (newVal) {
+          const urlObj = new URL(newVal);
+        if (!['http:', 'https:'].includes(urlObj.protocol)) {
+          throw new Error('Only HTTP(S) URLs are allowed');
+        }
+        const response = await axios.get(newVal, {
+          timeout: 5000,
+          headers: {
+            'Accept': 'application/json,text/plain'
+          }
+        });
+
+          // Check if the response body is valid JSON
+          try {
+            if (
+              response.headers["content-type"].includes("application/json") ||
+              response.headers["content-type"].includes("text/plain")
+            ) {
+              jsonStr.value = JSON.stringify(response.data, null, 2);
+            } else {
+              showErrorNotification("Invalid JSON format in the URL");
+            }
+          } catch (parseError) {
+            // If parsing fails, display an error message
+            showErrorNotification("Invalid JSON format");
+          }
+        }
+      } catch (error) {
+        showErrorNotification("Error fetching data");
+      }
+    });
+
     //import dashboard from the json
     const importDashboardFromJSON = async (
       jsonObj: any,
-      selectedFolder: any
+      selectedFolder: any,
     ) => {
       const data =
         typeof jsonObj == "string"
           ? JSON.parse(jsonObj)
           : typeof jsonObj == "object"
-          ? jsonObj
-          : jsonObj;
+            ? jsonObj
+            : jsonObj;
 
       //set owner name and creator name to import dashboard
       data.owner = store.state.userInfo.name;
@@ -285,7 +490,7 @@ export default defineComponent({
       const newDashboard = await dashboardService.create(
         store.state.selectedOrganization.identifier,
         data,
-        selectedFolder.value
+        selectedFolder.value,
       );
 
       //update store
@@ -297,62 +502,56 @@ export default defineComponent({
 
     // import multiple files
     const importFiles = async () => {
-      if (!jsonFiles.value || !jsonFiles.value.length) {
+      if (!jsonStr.value || !jsonStr.value.length) {
         showErrorNotification("No JSON file(s) selected for import");
         isLoading.value = false;
         return;
       }
       isLoading.value = ImportType.FILES;
 
-      const data = jsonFiles?.value?.map((it: any, index: number) => {
-        return new Promise((resolve, reject) => {
-          let reader = new FileReader();
-          reader.onload = function (readerResult) {
-            try {
-              const oldImportedSchema = JSON.parse(readerResult.target.result);
-              const convertedSchema =
-                convertDashboardSchemaVersion(oldImportedSchema);
+      jsonStr.value = JSON.parse(jsonStr.value);
 
-              importDashboardFromJSON(
-                convertedSchema,
-                selectedFolderAtJson.value
-              )
-                .then((res) => {
-                  resolve({ file: it.name, result: res });
-                })
-                .catch((e) => {
-                  reject({ file: it.name, error: e });
-                });
-            } catch (e) {
-              reject({ file: it.name, error: "Error reading file" });
-            }
-          };
-          reader.readAsText(it);
+      const data = jsonStr.value.map((parsedObject, index) => {
+        return new Promise((resolve, reject) => {
+          try {
+            const convertedSchema = convertDashboardSchemaVersion(parsedObject);
+
+            importDashboardFromJSON(convertedSchema, selectedFolder.value)
+              .then((res) => {
+                resolve({ file: jsonFiles.value[index].name, result: res });
+              })
+              .catch((e) => {
+                reject({ file: jsonFiles.value[index].name, error: e });
+              });
+          } catch (e) {
+            reject({
+              file: jsonFiles.value[index].name,
+              error: "Error processing file",
+            });
+          }
         });
       });
 
-      Promise.allSettled(data ?? []).then(async (results) => {
+      Promise.allSettled(data).then(async (results) => {
         filesImportResults.value = results;
 
         const allFulfilledValues = results.filter(
-          (r) => r.status === "fulfilled"
-        )?.length;
+          (r) => r.status === "fulfilled",
+        ).length;
 
-        if (results.length == allFulfilledValues) {
-          await resetAndRefresh(ImportType.FILES, selectedFolderAtJson.value);
+        if (results.length === allFulfilledValues) {
+          await resetAndRefresh(ImportType.FILES, selectedFolder.value);
         }
 
         if (allFulfilledValues) {
           showPositiveNotification(
-            `${allFulfilledValues} Dashboard(s) Imported`
+            `${allFulfilledValues} Dashboard(s) Imported`,
           );
         }
 
         if (results.length - allFulfilledValues) {
           showErrorNotification(
-            `${
-              results.length - allFulfilledValues
-            } Dashboard(s) Failed to Import`
+            `${results.length - allFulfilledValues} Dashboard(s) Failed to Import`,
           );
         }
 
@@ -365,6 +564,7 @@ export default defineComponent({
       switch (type) {
         case ImportType.FILES:
           jsonFiles.value = null;
+          jsonStr.value = "";
           isLoading.value = false;
           break;
         case ImportType.URL:
@@ -400,23 +600,22 @@ export default defineComponent({
           return;
         }
 
-        const res = await axios.get(urlData);
-
-        const oldImportedSchema = res.data;
+        const oldImportedSchema = JSON.parse(jsonStr.value);
         const convertedSchema =
           convertDashboardSchemaVersion(oldImportedSchema);
 
         await importDashboardFromJSON(
           convertedSchema,
-          selectedFolderAtUrl.value
+          selectedFolder.value,
         ).then((res) => {
-          resetAndRefresh(ImportType.URL, selectedFolderAtUrl.value);
+          resetAndRefresh(ImportType.URL, selectedFolder.value);
           filesImportResults.value = [];
+          jsonStr.value = "";
 
           showPositiveNotification(`Dashboard Imported Successfully`);
         });
       } catch (error) {
-        showErrorNotification("Please Enter a URL for import");
+        showErrorNotification("Failed to Import Dashboard");
       } finally {
         isLoading.value = false;
       }
@@ -434,13 +633,11 @@ export default defineComponent({
 
         await importDashboardFromJSON(
           convertedSchema,
-          selectedFolderAtJsonObj.value
+          selectedFolder.value,
         ).then((res) => {
-          resetAndRefresh(
-            ImportType.JSON_STRING,
-            selectedFolderAtJsonObj.value
-          );
+          resetAndRefresh(ImportType.JSON_STRING, selectedFolder.value);
           filesImportResults.value = [];
+          jsonStr.value = "";
 
           showPositiveNotification(`Dashboard Imported Successfully`);
         });
@@ -465,6 +662,107 @@ export default defineComponent({
         },
       });
     };
+    const updateActiveTab = () => {
+      jsonStr.value = "";
+      jsonFiles.value = null;
+      url.value = "";
+    };
+    const importDashboard = () => {
+      try{
+        dashboardErrorsToDisplay.value = [];
+      const jsonObj = JSON.parse(jsonStr.value);
+      if (Array.isArray(jsonObj)) {
+        jsonObj.forEach((input, index) => {
+          validateBasicInputs(input, index);
+        });
+      } else {
+        validateBasicInputs(jsonObj);
+      }
+      if (dashboardErrorsToDisplay.value.length > 0) {
+        return;
+      }
+      if (activeTab.value === "import_json_file") {
+        if (jsonFiles.value == undefined) {
+          importFromJsonStr();
+        } else {
+          importFiles();
+        }
+      } else {
+        importFromUrl();
+      }
+      }
+      catch(e){
+        showErrorNotification("Failed to Import Dashboard");
+      }
+ 
+    };
+    const validateBasicInputs = (input, index = 0) => {
+      if (input.title === "" || typeof input.title !== "string") {
+        dashboardErrorsToDisplay.value.push({
+          message: `Title is required for dashboard - ${index ? index + 1 : 1}  and should be a string`,
+          field: "dashboard_title",
+          dashboardIndex: index,
+        });
+      }
+      checkStreamType(input.tabs, index);
+    };
+    function checkStreamType(tabs, dashboardIndex) {
+      const streamTypeOptions = ["logs", "metrics", "traces"];
+      tabs.forEach((tab, tabIndex) => {
+        tab.panels.forEach((panel, panelIndex) => {
+          panel.queries.forEach((query, queryIndex) => {
+            // Check if stream is defined and is a valid string
+            if (
+              !query.fields.stream_type ||
+              typeof query.fields.stream_type !== "string" ||
+              query.fields.stream_type.trim() === "" ||
+              !streamTypeOptions.includes(query.fields.stream_type)
+            ) {
+              dashboardErrorsToDisplay.value.push({
+                message: `Missing or invalid 'stream_type' of dashboard - ${dashboardIndex + 1} at tab index ${tabIndex}, panel index ${panelIndex}, query index ${queryIndex}`,
+                field: "stream_type",
+                tabIndex: tabIndex,
+                panelIndex: panelIndex,
+                queryIndex: queryIndex,
+                dashboardIndex,
+              });
+            }
+          });
+        });
+      });
+    }
+
+    const goToCommunityDashboards = () => {
+      window.open("https://github.com/openobserve/dashboards", "_blank");
+    };
+    const updateDashboardTitle = (selectedDashboard, dashboardIndex) => {
+      const jsonObj = JSON.parse(jsonStr.value);
+      if (Array.isArray(jsonObj)) {
+        jsonObj[dashboardIndex].title = selectedDashboard;
+      } else {
+        jsonObj.title = selectedDashboard;
+      }
+      jsonStr.value = JSON.stringify(jsonObj, null, 2);
+    };
+    const updateStreamType = (
+      selectedStreamType,
+      dashboardIndex,
+      tabIndex,
+      panelIndex,
+      queryIndex,
+    ) => {
+      const jsonObj = JSON.parse(jsonStr.value);
+      if (Array.isArray(jsonObj)) {
+        jsonObj[dashboardIndex].tabs[tabIndex].panels[panelIndex].queries[
+          queryIndex
+        ].fields.stream_type = selectedStreamType;
+      } else {
+        jsonObj.tabs[tabIndex].panels[panelIndex].queries[
+          queryIndex
+        ].fields.stream_type = selectedStreamType;
+      }
+      jsonStr.value = JSON.stringify(jsonObj, null, 2);
+    };
     const onSubmit = () => {
       // do nothing here
     };
@@ -483,11 +781,149 @@ export default defineComponent({
       ImportType,
       filesImportResults,
       route,
-      selectedFolderAtJson,
-      selectedFolderAtUrl,
-      selectedFolderAtJsonObj,
+      selectedFolder,
+      tabs,
+      activeTab,
+      dashboardErrorsToDisplay,
+      splitterModel,
+      updateActiveTab,
+      queryEditorPlaceholderFlag,
+      importDashboard,
+      goToCommunityDashboards,
+      updateDashboardTitle,
+      updateStreamType,
+      streamTypeOptions,
+      dashboardTitles,
+      streamTypes,
     };
   },
-  components: { SelectFolderDropdown },
+  components: { SelectFolderDropdown, AppTabs, QueryEditor },
 });
 </script>
+
+<style scoped lang="scss">
+.empty-query .monaco-editor-background {
+  background-image: url("../../assets/images/common/query-editor.png");
+  background-repeat: no-repeat;
+  background-size: 115px;
+}
+
+.empty-function .monaco-editor-background {
+  background-image: url("../../assets/images/common/vrl-function.png");
+  background-repeat: no-repeat;
+  background-size: 170px;
+}
+.editor-container {
+  height: calc(80vh - 20px) !important;
+}
+.editor-container-url {
+  .monaco-editor {
+    height: calc(71vh - 14px) !important; /* Total editor height */
+    overflow: auto; /* Allows scrolling if content overflows */
+    resize: none; /* Remove resize behavior */
+  }
+}
+.dashboard-import-json-container {
+  .monaco-editor {
+    height: calc(71vh - 20px) !important; /* Total editor height */
+    overflow: auto; /* Allows scrolling if content overflows */
+    resize: none; /* Remove resize behavior */
+  }
+}
+.monaco-editor {
+  height: calc(81vh - 14px) !important; /* Total editor height */
+  overflow: auto; /* Allows scrolling if content overflows */
+  resize: none; /* Remove resize behavior */
+}
+.error-report-container {
+  height: calc(78vh - 8px) !important; /* Total editor height */
+  overflow: auto; /* Allows scrolling if content overflows */
+  resize: none;
+}
+.error-container {
+  display: flex;
+  overflow-y: auto;
+
+  flex-direction: column;
+  border: 1px solid #ccc;
+  height: calc(100% - 100px) !important; /* Total container height */
+}
+
+.error-section {
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.section-title {
+  font-size: 16px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+
+.error-list {
+}
+
+.error-item {
+  padding: 5px 0px;
+  font-size: 14px;
+}
+.dashboard-import-type-tabs {
+  height: fit-content;
+
+  :deep(.rum-tabs) {
+    border: 1px solid #464646;
+  }
+
+  :deep(.rum-tab) {
+    &:hover {
+      background: #464646;
+    }
+
+    &.active {
+      background: #5960b2;
+      color: #ffffff !important;
+    }
+  }
+}
+.dashboard-import-type-tabs {
+  height: fit-content;
+
+  :deep(.rum-tabs) {
+    border: 1px solid #eaeaea;
+    height: fit-content;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  :deep(.rum-tab) {
+    width: fit-content !important;
+    padding: 4px 12px !important;
+    border: none !important;
+
+    &:hover {
+      background: #eaeaea;
+    }
+
+    &.active {
+      background: #5960b2;
+      color: #ffffff !important;
+    }
+  }
+}
+.dashboard-folder-dropdown {
+  :deep(.q-field--labeled.showLabelOnTop) {
+    padding-top: 12px; /* Example override */
+  }
+}
+.dashboard-folder-dropdown {
+  :deep(
+      .q-field--labeled.showLabelOnTop.q-select
+        .q-field__control-container
+        .q-field__native
+    )
+    > :first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>