refactor: polish Trace Profiling widget (#436)

src/store/modules/profile.ts

@@ -80,7 +80,7 @@ export const profileStore = defineStore({
       this.analyzeTrees = [];
     },
     setCurrentSegment(segment: Trace) {
-      this.currentSegment = segment;
+      this.currentSegment = segment || {};
       this.segmentSpans = segment.spans || [];
       if (segment.spans) {
         this.currentSpan = segment.spans[0] || {};
@@ -155,10 +155,10 @@ export const profileStore = defineStore({
         return res.data;
       }
       if (segmentList[0]) {
-        this.currentSegment = segmentList[0];
+        this.setCurrentSegment(segmentList[0]);
         this.getSegmentSpans(segmentList[0].segmentId);
       } else {
-        this.currentSegment = {};
+        this.setCurrentSegment({});
       }
       return res.data;
     },

src/styles/theme.scss

@@ -69,6 +69,7 @@ html {
   --sw-drawer-header: #72767b;
   --sw-marketplace-border: #dedfe0;
   --sw-grid-item-active: #d4d7de;
+  --sw-trace-line: #999;
 }
 
 html.dark {
@@ -110,6 +111,7 @@ html.dark {
   --sw-drawer-header: #e9e9eb;
   --sw-marketplace-border: #606266;
   --sw-grid-item-active: #73767a;
+  --sw-trace-line: #e8e8e8;
 }
 
 .el-drawer__header {

src/views/dashboard/controls/Trace.vue

@@ -184,7 +184,7 @@ limitations under the License. -->
     position: relative;
     width: 2px;
     height: 100%;
-    background-color: #e8e8e8;
+    background-color: var(--sw-trace-line);
     cursor: ew-resize;
 
     &:hover {

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

@@ -77,7 +77,7 @@ limitations under the License. -->
       ElMessage.error(res.errors);
       return;
     }
-    endpointName.value = profileStore.endpoints[0].value;
+    endpointName.value = profileStore.endpoints[0]?.value;
   }
 
   function changeEndpoint(opt: any[]) {

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

@@ -56,12 +56,7 @@ limitations under the License. -->
   const { t } = useI18n();
   const profileStore = useProfileStore();
   const key = computed(
-    () =>
+    () => (profileStore.currentSegment.spans?.length && profileStore.currentSegment.spans[0].segmentId) || "",
-      (profileStore.currentSegment &&
-        profileStore.currentSegment.spans &&
-        profileStore.currentSegment.spans.length &&
-        profileStore.currentSegment.spans[0].segmentId) ||
-      "",
   );
 
   async function selectSegment(item: Trace) {

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

@@ -14,38 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="profile-task-list flex-v">
-    <div class="profile-task-wrapper flex-v">
+    <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
-      <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
+    <div class="profile-t-wrapper">
-      <div class="profile-t-wrapper">
+      <div class="no-data" v-show="!profileStore.taskList.length">
-        <div class="no-data" v-show="!profileStore.taskList.length">
+        {{ t("noData") }}
-          {{ t("noData") }}
-        </div>
-        <table class="profile-t">
-          <tr class="profile-tr cp" v-for="(i, index) in profileStore.taskList" @click="changeTask(i)" :key="index">
-            <td
-              class="profile-td"
-              :class="{
-                selected: profileStore.currentTask && profileStore.currentTask.id === i.id,
-              }"
-            >
-              <div class="ell">
-                <span>{{ i.endpointName }}</span>
-                <a class="profile-btn r" @click="viewTask($event, i)">
-                  <Icon iconName="view" size="middle" />
-                </a>
-              </div>
-              <div class="grey ell sm">
-                <span class="mr-10 sm">
-                  {{ dateFormat(i.startTime) }}
-                </span>
-                <span class="mr-10 sm">
-                  {{ dateFormat(i.startTime + i.duration * 60 * 1000) }}
-                </span>
-              </div>
-            </td>
-          </tr>
-        </table>
       </div>
+      <table class="profile-t">
+        <tr class="profile-tr cp" v-for="(i, index) in profileStore.taskList" @click="changeTask(i)" :key="index">
+          <td
+            class="profile-td"
+            :class="{
+              selected: profileStore.currentTask && profileStore.currentTask.id === i.id,
+            }"
+          >
+            <div class="ell">
+              <span>{{ i.endpointName }}</span>
+              <a class="profile-btn r" @click="viewTask($event, i)">
+                <Icon iconName="view" size="middle" />
+              </a>
+            </div>
+            <div class="grey ell sm">
+              <span class="mr-10 sm">
+                {{ dateFormat(i.startTime) }}
+              </span>
+              <span class="mr-10 sm">
+                {{ dateFormat(i.startTime + i.duration * 60 * 1000) }}
+              </span>
+            </div>
+          </td>
+        </tr>
+      </table>
     </div>
   </div>
   <el-dialog v-model="viewDetail" :destroy-on-close="true" fullscreen @closed="viewDetail = false">
@@ -117,7 +115,6 @@ limitations under the License. -->
   const selectorStore = useSelectorStore();
   const viewDetail = ref<boolean>(false);
   const service = ref<string>("");
-  // const selectedTask = ref<TaskListItem | Record<string, never>>({});
   const instanceLogs = ref<TaskLog | any>({});
 
   async function changeTask(item: TaskListItem) {
@@ -130,7 +127,7 @@ limitations under the License. -->
   }
 
   async function viewTask(e: Event, item: TaskListItem) {
-    window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
+    e.stopPropagation();
     viewDetail.value = true;
     profileStore.setCurrentTask(item);
     service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label;