fix: update style

src/store/modules/profile.ts

@@ -166,11 +166,12 @@ export const traceStore = defineStore({
         .params(params);
 
       if (res.data.errors) {
-        this.segmentSpans = [];
+        this.analyzeTrees = [];
         return res.data;
       }
       const { analyze, tip } = res.data.data;
       if (tip) {
+        this.analyzeTrees = [];
         return res.data;
       }
 

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="rk-profile-task">
+  <div class="profile-task">
     <div>
       <div class="label">{{ t("endpointName") }}</div>
       <el-input v-model="endpointName" class="profile-input" />
@@ -28,7 +28,7 @@ limitations under the License. -->
           :options="InitTaskField.monitorTimeEn"
           @change="changeMonitorTime"
         />
-        <span>
+        <span class="date">
           <TimePicker
             :value="time"
             position="bottom"
@@ -144,6 +144,15 @@ function changeTimeRange(val: Date) {
 }
 </script>
 <style lang="scss" scoped>
+.profile-task {
+  margin: 0 auto;
+  width: 300px;
+}
+
+.date {
+  font-size: 12px;
+}
+
 .label {
   margin-top: 10px;
   font-size: 14px;
@@ -157,14 +166,4 @@ function changeTimeRange(val: Date) {
   width: 300px;
   margin-top: 50px;
 }
-
-.message-tip {
-  font-size: 14px;
-  color: red;
-  margin-top: 10px;
-}
-
-.monitor-time-radio {
-  display: inline;
-}
 </style>

src/views/dashboard/related/profile/components/Stack/Container.vue

@@ -27,7 +27,7 @@ limitations under the License. -->
         Self Duration (ms)
         <a
           class="profile-set-btn"
-          @click="updateHighlightTop()"
+          @click="updateHighlightTop"
           title="Highlight top 10 slow methods"
           :style="{ color: highlightTop ? '#448dfe' : '#484b55' }"
         >

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -128,7 +128,6 @@ const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
   showRelatedLogs.value = true;
-  console.log(props.currentSpan);
   const res = await traceStore.getSpanLogs({
     condition: {
       relatedTrace: {

src/views/dashboard/related/trace/components/Table/TableContainer.vue

@@ -50,7 +50,7 @@ limitations under the License. -->
       :key="'key' + index"
       :type="type"
       :headerType="headerType"
-      @click="selectItem(item)"
+      @select="selectItem"
     />
     <slot></slot>
   </div>

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -55,7 +55,6 @@ limitations under the License. -->
         'level' + (data.level - 1),
         { 'trace-item-error': data.isError },
       ]"
-      ref="traceItem"
     >
       <div
         :class="['method', 'level' + (data.level - 1)]"
@@ -121,6 +120,7 @@ limitations under the License. -->
         :data="child"
         :type="type"
         :headerType="headerType"
+        @select="selectedItem(child)"
       />
     </div>
     <el-dialog
@@ -149,13 +149,13 @@ const props = {
 export default defineComponent({
   name: "TableItem",
   props,
+  emits: ["select"],
   components: { SpanDetail },
-  setup(props) {
+  setup(props, { emit }) {
     /* global Nullable */
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
     const { t } = useI18n();
-    const traceItem = ref<Nullable<HTMLDivElement>>(null);
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
     const selfTime = computed(() => (props.data.dur ? props.data.dur : 0));
@@ -186,35 +186,36 @@ export default defineComponent({
     function toggle() {
       displayChildren.value = !displayChildren.value;
     }
-    function showSelectSpan() {
+    function showSelectSpan(dom: any) {
+      if (!dom) {
+        return;
+      }
       const items: any = document.querySelectorAll(".trace-item");
       for (const item of items) {
         item.style.background = "#fff";
       }
-      if (!traceItem.value) {
+      dom.style.background = "rgba(0, 0, 0, 0.1)";
+    }
+    function selectSpan(event: any) {
+      const dom = event.path.find((d: any) =>
+        d.className.includes("trace-item")
+      );
+
+      emit("select", props.data);
+      if (props.headerType === "profile") {
+        showSelectSpan(dom);
         return;
       }
+      viewSpanDetail(dom);
+    }
 
-      traceItem.value.style.background = "rgba(0, 0, 0, 1)";
+    function selectedItem(data: any) {
+      emit("select", data);
     }
-    function selectSpan() {
-      if (props.headerType === "profile") {
-        showSelectSpan();
-        return;
-      }
-      viewSpanDetail();
-    }
-    function viewSpanDetail() {
-      showSelectSpan();
+    function viewSpanDetail(dom: any) {
+      showSelectSpan(dom);
       showDetail.value = true;
     }
-
-    watch(
-      () => props.data,
-      () => {
-        showSelectSpan();
-      }
-    );
     return {
       displayChildren,
       outterPercent,
@@ -225,6 +226,7 @@ export default defineComponent({
       showSelectSpan,
       showDetail,
       selectSpan,
+      selectedItem,
       t,
     };
   },