fix: add loading

src/views/dashboard/related/profile/Content.vue

@@ -19,16 +19,34 @@ limitations under the License. -->
       <SegmentList />
     </div>
     <div class="item">
-      <SpanTree />
-      <ThreadStack />
+      <SpanTree @loading="loadTrees" />
+      <div class="thread-stack">
+        <StackTable
+          v-if="profileStore.analyzeTrees.length"
+          :data="profileStore.analyzeTrees"
+          :highlightTop="profileStore.highlightTop"
+        />
+        <div class="t-loading" v-show="loading">
+          <Icon :loading="true" iconName="spinner" size="middle" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import TaskList from "./components/TaskList.vue";
 import SegmentList from "./components/SegmentList.vue";
 import SpanTree from "./components/SpanTree.vue";
-import ThreadStack from "./components/ThreadStack.vue";
+import StackTable from "./components/Stack/Index.vue";
+import { useProfileStore } from "@/store/modules/profile";
+
+const loading = ref<boolean>(false);
+const profileStore = useProfileStore();
+
+function loadTrees(l: boolean) {
+  loading.value = l;
+}
 </script>
 <style lang="scss" scoped>
 .content {
@@ -45,4 +63,21 @@ import ThreadStack from "./components/ThreadStack.vue";
   width: 300px;
   height: 100%;
 }
+
+.thread-stack {
+  padding: 5px 12px;
+  height: calc(50% - 50px);
+  overflow: auto;
+  width: 100%;
+}
+
+.t-loading {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 70px;
+  margin-top: 40px;
+  line-height: 88px;
+  overflow: hidden;
+}
 </style>

src/views/dashboard/related/profile/components/SpanTree.vue

@@ -58,11 +58,12 @@ import { Option } from "@/types/app";
 import { ElMessage } from "element-plus";
 import { ProfileMode } from "./data";
 
+/* global defineEmits*/
+const emits = defineEmits(["loading"]);
 const { t } = useI18n();
 const profileStore = useProfileStore();
 const mode = ref<string>("include");
 const message = ref<string>("");
-const loading = ref<boolean>(false);
 const timeRange = ref<Array<{ start: number; end: number }>>([]);
 const traceId = ref<string>("");
 const traceIds = computed(() =>
@@ -86,13 +87,13 @@ function changeTraceId(opt: Option[]) {
 }
 
 async function analyzeProfile() {
-  loading.value = true;
+  emits("loading", true);
   updateTimeRange();
   const res = await profileStore.getProfileAnalyze({
     segmentId: profileStore.currentSegment.segmentId,
     timeRanges: timeRange.value,
   });
-  loading.value = false;
+  emits("loading", false);
   if (res.errors) {
     ElMessage.error(res.errors);
   }

src/views/dashboard/related/profile/components/ThreadStack.vue

@@ -1,44 +0,0 @@
-<!-- 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 v-if="profileStore.analyzeTrees.length" class="thread-stack">
-    <StackTable
-      :data="profileStore.analyzeTrees"
-      :highlightTop="profileStore.highlightTop"
-    />
-    <div class="rk-trace-t-loading" v-show="loading">
-      <Icon iconName="spinner" />
-    </div>
-    <div v-if="message">{{ message }}</div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-import StackTable from "./Stack/Index.vue";
-import { useProfileStore } from "@/store/modules/profile";
-
-const profileStore = useProfileStore();
-const loading = ref<boolean>(false);
-const message = ref<string>("");
-</script>
-<style lang="scss" scoped>
-.thread-stack {
-  padding: 5px 12px;
-  height: calc(50% - 50px);
-  overflow: auto;
-  width: 100%;
-}
-</style>