feat: trace profiling

src/store/modules/profile.ts

@@ -163,7 +163,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getSegmentSpans(params: { segmentId: string }) {
-      if (!params.segmentId) {
+      if (!(params && params.segmentId)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);

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

@@ -58,6 +58,7 @@ limitations under the License. -->
   const key = computed(
     () =>
       (profileStore.currentSegment &&
+        profileStore.currentSegment.spans &&
         profileStore.currentSegment.spans.length &&
         profileStore.currentSegment.spans[0].segmentId) ||
       "",

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

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
+    <div
+      :class="['profile-item', 'level' + data.parentId]"
+      :style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
+    >
       <div
         :class="['thread', 'level' + data.parentId]"
         :style="{
@@ -47,6 +50,8 @@ limitations under the License. -->
 <script lang="ts">
   import { ref, defineComponent, toRefs } from "vue";
   import type { PropType } from "vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   const props = {
     data: { type: Object as PropType<any>, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
     name: "TableItem",
     props,
     setup(props) {
+      const appStore = useAppStoreWithOut();
       const displayChildren = ref<boolean>(true);
       function toggle() {
         displayChildren.value = !displayChildren.value;
       }
-      return { toggle, displayChildren, ...toRefs(props) };
+      return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
     },
   });
 </script>
 <style lang="scss" scoped>
-  @import "./profile.scss";
+  @import url("./profile.scss");
 
   .profile-item.level0 {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-hover);
-    color: #448dfe;
+    color: var(--el-color-primary);
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background-color: var(--sw-list-hover);
-      color: #448dfe;
+      color: var(--el-color-primary);
     }
 
     &::before {
@@ -81,7 +87,7 @@ limitations under the License. -->
       content: "";
       width: 5px;
       height: 100%;
-      background: #448dfe;
+      background-color: var(--el-color-primary);
       left: 0;
     }
   }
@@ -92,11 +98,11 @@ limitations under the License. -->
   }
 
   .profile-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-selected);
   }
 
   .profile-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-hover);
   }
 
   .profile-item > div {
@@ -123,7 +129,7 @@ limitations under the License. -->
       width: 100%;
       height: 6px;
       border-radius: 3px;
-      background: rgb(63, 177, 227);
+      background: var(--el-color-primary);
       position: relative;
       margin-top: 11px;
       border: none;
@@ -131,7 +137,7 @@ limitations under the License. -->
 
     .inner-progress_bar {
       position: absolute;
-      background: rgb(110, 64, 170);
+      background: rgb(110 64 170);
       height: 4px;
       border-radius: 2px;
       left: 0;

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

@@ -143,11 +143,12 @@ limitations under the License. -->
 </template>
 <script lang="ts">
   import { useI18n } from "vue-i18n";
-  import { ref, computed, defineComponent } from "vue";
+  import { ref, computed, defineComponent, watch } from "vue";
   import type { PropType } from "vue";
   import SpanDetail from "../D3Graph/SpanDetail.vue";
   import { dateFormat } from "@/utils/dateFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global Recordable*/
   const props = {
@@ -201,12 +202,12 @@ limitations under the License. -->
         }
         const items: any = document.querySelectorAll(".trace-item");
         for (const item of items) {
-          item.style.background = "#fff";
+          item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
         }
-        dom.style.background = "rgba(0, 0, 0, 0.1)";
+        dom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
         const p: any = document.getElementsByClassName("profiled")[0];
         if (p) {
-          p.style.background = "#eee";
+          p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
         }
       }
       function selectSpan(event: Recordable) {
@@ -232,6 +233,19 @@ limitations under the License. -->
         showSelectSpan(dom);
         showDetail.value = true;
       }
+      watch(
+        () => appStore.theme,
+        () => {
+          const items: any = document.querySelectorAll(".trace-item");
+          for (const item of items) {
+            item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
+          }
+          const p: any = document.getElementsByClassName("profiled")[0];
+          if (p) {
+            p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
+          }
+        },
+      );
       return {
         displayChildren,
         outterPercent,
@@ -272,7 +286,8 @@ limitations under the License. -->
   }
 
   .profiled {
-    background-color: #eee;
+    // background-color: #eee;
+    background-color: var(--sw-table-header);
     position: relative;
   }
 
@@ -288,7 +303,7 @@ limitations under the License. -->
     background-color: $font-color;
     color: $text-color;
     text-align: center;
-    box-shadow: #eee 1px 2px 10px;
+    box-shadow: var(--box-shadow-color) 0 2px 3px;
     display: none;
   }
 
@@ -320,11 +335,11 @@ limitations under the License. -->
   }
 
   .trace-item.selected {
-    background: rgb(0 0 0 / 4%);
+    background-color: var(--sw-list-selected);
   }
 
   .trace-item:not(.level0):hover {
-    background: rgb(0 0 0 / 4%);
+    background-color: var(--sw-list-hover);
   }
 
   .trace-item > div {