From 44f9b72cdd50c2cbf34b8d05f6aa5bdb5430e3f6 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Thu, 21 Apr 2022 17:07:24 +0100
Subject: [PATCH] added dahbard file handler

---
 src/router/selfObservability.ts |   2 +-
 src/views/dashboard/Scroll.vue  | 102 ++++++++++++++++++++++++++++++++
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/Scroll.vue

diff --git a/src/router/selfObservability.ts b/src/router/selfObservability.ts
index 8010cc96..334f58d4 100644
--- a/src/router/selfObservability.ts
+++ b/src/router/selfObservability.ts
@@ -57,7 +57,7 @@ export const routesSelf: Array<RouteRecordRaw> = [
           headPath: "/mesh/controlPanel",
         },
         component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Fullscroll.vue"),
+          import(/* webpackChunkName: "layer" */ "@/views/FullScroll.vue"),
       },
     ],
   },
diff --git a/src/views/dashboard/Scroll.vue b/src/views/dashboard/Scroll.vue
new file mode 100644
index 00000000..723f00fa
--- /dev/null
+++ b/src/views/dashboard/Scroll.vue
@@ -0,0 +1,102 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <Tool v-if="dashboardStore.currentDashboard" />
+  <div
+    class="ds-main"
+    v-if="dashboardStore.currentDashboard"
+    @click="handleClick"
+    :style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
+  >
+    <FullVue :items="dashboardStore.layout"></FullVue>
+    <el-dialog
+      v-model="dashboardStore.showConfig"
+      :title="t('editGraph')"
+      fullscreen
+      :destroy-on-close="true"
+      @closed="dashboardStore.setConfigPanel(false)"
+    >
+      <component :is="dashboardStore.selectedGrid.type" />
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { ref, defineComponent } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import GridLayout from "./panel/Layout.vue";
+import Tool from "./panel/Tool.vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import Configuration from "./configuration";
+import controls from "./controls/index";
+import FullVue from "@/components/FullVue.vue";
+
+export default defineComponent({
+  name: "Dashboard",
+  components: { FullVue, ...Configuration, GridLayout, Tool, ...controls },
+  setup() {
+    const dashboardStore = useDashboardStore();
+    const appStore = useAppStoreWithOut();
+    const { t } = useI18n();
+    const p = useRoute().params;
+    const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
+    setTemplate();
+    const currentItem = ref("");
+    async function setTemplate() {
+      await dashboardStore.setDashboards();
+
+      if (!p.entity) {
+        if (!dashboardStore.currentDashboard) {
+          return;
+        }
+        const { layer, entity, name } = dashboardStore.currentDashboard;
+        layoutKey.value = `${layer}_${entity}_${name}`;
+      }
+      const c: { configuration: string; id: string } = JSON.parse(
+        sessionStorage.getItem(layoutKey.value) || "{}"
+      );
+      const layout: any = c.configuration || {};
+      dashboardStore.setLayout(layout.children || []);
+      appStore.setPageTitle(layout.name);
+
+      if (p.entity) {
+        dashboardStore.setCurrentDashboard({
+          layer: p.layerId,
+          entity: p.entity,
+          name: p.name,
+          id: c.id,
+          isRoot: layout.isRoot,
+        });
+      }
+    }
+    return {
+      t,
+      dashboardStore,
+      currentItem,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.ds-main {
+  overflow: auto;
+}
+.full-view__scroll {
+  height: 60vh;
+  width: 100%;
+}
+</style>