add mode

src/store/modules/dashboard.ts

@@ -41,6 +41,7 @@ interface DashboardState {
   currentTabItems: LayoutConfig[];
   dashboards: DashboardItem[];
   currentDashboard: Nullable<DashboardItem>;
+  editMode: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -58,11 +59,15 @@ export const dashboardStore = defineStore({
     currentTabItems: [],
     dashboards: [],
     currentDashboard: null,
+    editMode: true,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
+    setMode(mode: boolean) {
+      this.editMode = mode;
+    },
     resetDashboards(list: DashboardItem[]) {
       this.dashboards = list;
       sessionStorage.setItem("dashboards", JSON.stringify(list));

src/views/Layer.vue

@@ -46,6 +46,7 @@ const layer = ref<string>("GENERAL");
 getDashboard();
 
 async function getDashboard() {
+  dashboardStore.setMode(false);
   dashboardStore.setCurrentDashboard(null);
   setLayer(String(route.name));
   await dashboardStore.setDashboards();

src/views/dashboard/Edit.vue

@@ -13,11 +13,11 @@ 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="p.entity" />
+  <Tool v-if="dashboardStore.editMode" />
   <div
     class="ds-main"
     @click="handleClick"
-    :style="{ height: p.entity ? 'calc(100% - 45px)' : '100%' }"
+    :style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
   >
     <grid-layout />
     <el-dialog

src/views/dashboard/controls/Log.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
       placement="bottom"
       trigger="click"
       :width="100"
-      v-if="routeParams.entity"
+      v-if="dashboardStore.editMode"
     >
       <template #reference>
         <span class="delete cp">
@@ -39,7 +39,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
@@ -53,7 +52,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function removeWidget() {

src/views/dashboard/controls/Profile.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
       placement="bottom"
       trigger="click"
       :width="100"
-      v-if="routeParams.entity"
+      v-if="dashboardStore.editMode"
     >
       <template #reference>
         <span class="delete cp">
@@ -39,7 +39,6 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/profile/Header.vue";
 import Content from "../related/profile/Content.vue";
-import { useRoute } from "vue-router";
 
 /*global defineProps */
 const props = defineProps({
@@ -50,8 +49,8 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
+
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }

src/views/dashboard/controls/Tab.vue

@@ -34,10 +34,10 @@ limitations under the License. -->
           size="sm"
           iconName="cancel"
           @click="deleteTabItem($event, idx)"
-          v-if="routeParams.entity"
+          v-if="dashboardStore.editMode"
         />
       </span>
-      <span class="tab-icons" v-if="routeParams.entity">
+      <span class="tab-icons" v-if="dashboardStore.editMode">
         <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
@@ -45,7 +45,7 @@ limitations under the License. -->
         </el-tooltip>
       </span>
     </div>
-    <div class="operations" v-if="routeParams.entity">
+    <div class="operations" v-if="dashboardStore.editMode">
       <el-popover
         placement="bottom"
         trigger="click"
@@ -113,7 +113,6 @@ limitations under the License. -->
 <script lang="ts">
 import { ref, watch, defineComponent, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -136,7 +135,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
-    const routeParams = useRoute().params;
     const dashboardStore = useDashboardStore();
     const activeTabIndex = ref<number>(0);
     const activeTabWidget = ref<string>("");
@@ -247,7 +245,6 @@ export default defineComponent({
       needQuery,
       canEditTabName,
       showTools,
-      routeParams,
       t,
     };
   },

src/views/dashboard/controls/Topology.vue

@@ -19,7 +19,7 @@ limitations under the License. -->
         placement="bottom"
         trigger="click"
         :width="100"
-        v-if="routeParams.entity"
+        v-if="dashboardStore.editMode"
       >
         <template #reference>
           <span>
@@ -39,7 +39,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Topology from "../related/topology/Index.vue";
@@ -53,7 +52,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function removeTopo() {

src/views/dashboard/controls/Trace.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
-      <div class="tools" @click="removeWidget" v-if="routeParams.entity">
+      <div class="tools" @click="removeWidget" v-if="dashboardStore.editMode">
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
@@ -35,7 +35,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import Filter from "../related/trace/Filter.vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
@@ -51,7 +50,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeControls(props.data);

src/views/dashboard/controls/Widget.vue

@@ -38,7 +38,7 @@ limitations under the License. -->
           placement="bottom"
           trigger="click"
           :width="100"
-          v-if="routeParams.entity"
+          v-if="dashboardStore.editMode"
         >
           <template #reference>
             <span>
@@ -74,7 +74,6 @@ limitations under the License. -->
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -98,7 +97,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
-    const routeParams = useRoute().params;
     const loading = ref<boolean>(false);
     const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
@@ -196,7 +194,7 @@ export default defineComponent({
       editConfig,
       data,
       loading,
-      routeParams,
+      dashboardStore,
       t,
     };
   },

src/views/dashboard/related/topology/components/Settings.vue

@@ -225,6 +225,7 @@ const states = reactive<{
   linkDashboards: [],
   nodeDashboards: [],
 });
+console.log(dashboardStore.selectedGrid);
 const isService = [EntityType[0].value, EntityType[1].value].includes(
   dashboardStore.entity
 );