feat: add switch to control dashboard mode (#31)

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

@@ -14,13 +14,18 @@ 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">
+    <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" v-if="routeParams.entity">
+      <div class="tools" @click="removeWidget">
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
@@ -35,7 +40,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 +55,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,
     };
   },