remove watch

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -13,14 +13,15 @@ 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 v-show="states.isTable" class="ds-name">
+  <div v-if="states.isTable && dashboardList.length" class="ds-name">
     <div>{{ t("dashboards") }}</div>
-    <el-input
+    <Selector
-      v-model="states.dashboardName"
+      :value="states.dashboardName"
-      placeholder="Please input dashboard name"
+      :options="dashboardList"
+      size="small"
+      placeholder="Please select a dashboard name"
       @change="changeDashboard"
       class="selectors"
-      size="small"
     />
   </div>
   <div>{{ t("metrics") }}</div>
@@ -100,6 +101,7 @@ import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
 import { useI18n } from "vue-i18n";
+import { DashboardItem } from "@/types/dashboard";
 
 /*global defineEmits */
 const { t } = useI18n();
@@ -123,6 +125,26 @@ const states = reactive<{
   metricList: [],
   dashboardName: graph.dashboardName,
 });
+const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+const dashboardList = list.reduce(
+  (
+    prev: (DashboardItem & { label: string; value: string })[],
+    d: DashboardItem
+  ) => {
+    if (
+      d.entity === dashboardStore.entity &&
+      d.layer === dashboardStore.layerId
+    ) {
+      prev.push({
+        ...d,
+        value: d.name,
+        label: d.name,
+      });
+    }
+    return prev;
+  },
+  []
+);
 
 states.isTable = TableChartTypes.includes(graph.type);
 states.visTypes = setVisTypes();
@@ -274,7 +296,8 @@ async function queryMetrics() {
   emit("update", source);
 }
 
-function changeDashboard() {
+function changeDashboard(opt: any) {
+  states.dashboardName = opt[0].value;
   const graph = {
     ...dashboardStore.selectedGrid.graph,
     dashboardName: states.dashboardName,

src/views/dashboard/panel/Layout.vue

@@ -19,6 +19,7 @@ limitations under the License. -->
     :row-height="10"
     :is-draggable="true"
     :is-resizable="true"
+    v-if="dashboardStore.layout.length"
   >
     <grid-item
       v-for="item in dashboardStore.layout"
@@ -35,6 +36,7 @@ limitations under the License. -->
       <component :is="item.type" :data="item" />
     </grid-item>
   </grid-layout>
+  <div class="no-data-tips" v-else>Please add widgets.</div>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
@@ -48,7 +50,6 @@ export default defineComponent({
   setup() {
     const dashboardStore = useDashboardStore();
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-      console.log(newLayout);
       dashboardStore.setLayout(newLayout);
     }
     function clickGrid(item: LayoutConfig) {
@@ -78,4 +79,12 @@ export default defineComponent({
 .vue-grid-item.active {
   border: 1px solid #409eff;
 }
+
+.no-data-tips {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  padding-top: 30px;
+  color: #888;
+}
 </style>

src/views/dashboard/panel/Tool.vue

@@ -86,7 +86,7 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch, ref } from "vue";
+import { reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -423,12 +423,7 @@ function getTools() {
       toolIcons.value = PodRelationTools;
   }
 }
-watch(
+appStore.setEventStack([initSelector]);
-  () => appStore.durationTime,
-  () => {
-    initSelector();
-  }
-);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {