From d71cd66fa1b16defd217dc636d572c667422c680 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 4 Mar 2022 11:38:29 +0800
Subject: [PATCH] fix: update style

---
 src/views/dashboard/controls/Tab.vue          | 23 ++++++++++-----
 src/views/dashboard/controls/Widget.vue       |  8 +++---
 .../dashboard/related/profile/Content.vue     |  5 +---
 .../related/profile/components/SpanTree.vue   | 28 +++++++++++--------
 4 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 0237f938..1d570e72 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -50,7 +50,7 @@ limitations under the License. -->
   </div>
   <div class="tab-layout">
     <grid-layout
-      v-if="dashboardStore.currentTabItems.length"
+      v-if="dashboardStore.currentTabItems"
       v-model:layout="dashboardStore.currentTabItems"
       :col-num="24"
       :row-height="10"
@@ -106,9 +106,11 @@ export default defineComponent({
     const activeTabIndex = ref<number>(0);
     const activeTabWidget = ref<string>("");
     const editTabIndex = ref<number>(NaN); // edit tab item name
+    const l = dashboardStore.layout.findIndex(
+      (d: LayoutConfig) => d.i === props.data.i
+    );
     dashboardStore.setCurrentTabItems(
-      dashboardStore.layout[props.data.i].children[activeTabIndex.value]
-        .children
+      dashboardStore.layout[l].children[activeTabIndex.value].children
     );
 
     function clickTabs(e: Event, idx: number) {
@@ -117,9 +119,11 @@ export default defineComponent({
       dashboardStore.activeGridItem(props.data.i);
       dashboardStore.selectWidget(props.data);
       dashboardStore.setActiveTabIndex(idx);
+      const l = dashboardStore.layout.findIndex(
+        (d: LayoutConfig) => d.i === props.data.i
+      );
       dashboardStore.setCurrentTabItems(
-        dashboardStore.layout[props.data.i].children[activeTabIndex.value]
-          .children
+        dashboardStore.layout[l].children[activeTabIndex.value].children
       );
     }
     function removeTab(e: Event) {
@@ -150,8 +154,13 @@ export default defineComponent({
         `${props.data.i}-${activeTabIndex.value}-${item.i}`
       );
     }
-    function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-      dashboardStore.setCurrentTabItems(newLayout);
+    function layoutUpdatedEvent() {
+      const l = dashboardStore.layout.findIndex(
+        (d: LayoutConfig) => d.i === props.data.i
+      );
+      dashboardStore.setCurrentTabItems(
+        dashboardStore.layout[l].children[activeTabIndex.value].children
+      );
     }
     document.body.addEventListener("click", handleClick, false);
     watch(
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index fd85591b..1e92a7fe 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -128,10 +128,10 @@ export default defineComponent({
     watch(
       () => [props.data.metricTypes, props.data.metrics],
       () => {
-        if (!dashboardStore.selectedGrid) {
-          return;
-        }
-        if (props.data.i !== dashboardStore.selectedGrid.i) {
+        if (
+          dashboardStore.selectedGrid &&
+          props.data.i !== dashboardStore.selectedGrid.i
+        ) {
           return;
         }
         if (TableChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
diff --git a/src/views/dashboard/related/profile/Content.vue b/src/views/dashboard/related/profile/Content.vue
index 4679ba67..47e2210c 100644
--- a/src/views/dashboard/related/profile/Content.vue
+++ b/src/views/dashboard/related/profile/Content.vue
@@ -73,11 +73,8 @@ function loadTrees(l: boolean) {
 
 .t-loading {
   text-align: center;
-  position: absolute;
   width: 100%;
-  height: 70px;
-  margin-top: 40px;
-  line-height: 88px;
   overflow: hidden;
+  height: calc(50% - 50px);
 }
 </style>
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index 63df51d9..0913b7dc 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -35,16 +35,18 @@ limitations under the License. -->
         {{ t("analyze") }}
       </el-button>
     </div>
-    <Table
-      :data="profileStore.segmentSpans"
-      :traceId="
-        profileStore.currentSegment.traceIds &&
-        profileStore.currentSegment.traceIds[0]
-      "
-      :showBtnDetail="true"
-      headerType="profile"
-      @select="selectSpan"
-    />
+    <div class="profile-table">
+      <Table
+        :data="profileStore.segmentSpans"
+        :traceId="
+          profileStore.currentSegment.traceIds &&
+          profileStore.currentSegment.traceIds[0]
+        "
+        :showBtnDetail="true"
+        headerType="profile"
+        @select="selectSpan"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -158,10 +160,14 @@ function updateTimeRange() {
   padding: 5px;
   flex-shrink: 0;
   height: 50%;
-  overflow: auto;
   width: 100%;
 }
 
+.profile-table {
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+
 .profile-trace-detail-wrapper {
   padding: 5px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);