backup Edit component

src/views/dashboard/JbEdit.vue

@@ -0,0 +1,107 @@
+<!-- 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%' }"
+  >
+    <grid-layout />
+    <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/JbTool.vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import Configuration from "./configuration";
+
+export default defineComponent({
+  name: "Dashboard",
+  components: { ...Configuration, GridLayout, Tool },
+  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();
+    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,
+        });
+      }
+    }
+    function handleClick(e: any) {
+      e.stopPropagation();
+      if (e.target.className === "ds-main") {
+        dashboardStore.activeGridItem("");
+        dashboardStore.selectWidget(null);
+      }
+    }
+
+    return {
+      t,
+      handleClick,
+      dashboardStore,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.ds-main {
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/views/dashboard/controls/JbTrace.vue

@@ -0,0 +1,115 @@
+<!-- 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>
+  <div class="trace-wrapper flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <div class="trace flex-h">
+      <TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
+      <TraceDetail @show:list="showTraceList" v-if="!traceListActive" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType, computed, onMounted, onBeforeUnmount } from "vue";
+import TraceList from "../related/trace/TraceList.vue";
+import TraceDetail from "../related/trace/Detail.vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useTraceStore } from "@/store/modules/trace";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const traceStore = useTraceStore();
+const traceListActive = computed(() => {
+  return traceStore.currentView === "traceList";
+});
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+function showTraceDetails() {
+  traceStore.currentView === "traceDetails";
+}
+function showTraceList() {
+  traceStore.currentView === "traceList";
+}
+
+onMounted(() => {
+  dashboardStore.setTraceTools(true);
+});
+onBeforeUnmount(() => {
+  dashboardStore.setTraceTools(false);
+});
+</script>
+<style lang="scss" scoped>
+.trace-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.trace {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+</style>