Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/legend

.github/workflows/nodejs.yml

@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js ${{ matrix.node-version }}

package.json

@@ -23,7 +23,7 @@
     "d3-flame-graph": "^4.1.3",
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
-    "element-plus": "^2.2.5",
+    "element-plus": "^2.9.4",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
@@ -45,8 +45,8 @@
     "@types/lodash": "^4.14.179",
     "@types/node": "^18.11.12",
     "@types/three": "^0.131.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.2.6",
@@ -64,21 +64,21 @@
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
     "prettier": "^2.7.1",
-    "sass": "^1.56.1",
+    "sass": "^1.85.0",
     "start-server-and-test": "^2.0.5",
     "stylelint": "15.9.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-order": "^6.0.3",
-    "typescript": "~4.7.4",
+    "typescript": "^5.7.3",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",
-    "vite": "^4.5.9",
+    "vite": "^6.1.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^0.25.6",
+    "vitest": "^3.0.5",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.2.2"
   },
   "browserslist": [
     "> 1%",

src/hooks/useBreakpoint.ts

@@ -47,11 +47,11 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void)
 
   function getWindowWidth() {
     const width = document.body.clientWidth;
-    const xs = screenMap.get(sizeEnum.XS) || "";
+    const xs = screenMap.get(sizeEnum.XS) || 0;
-    const sm = screenMap.get(sizeEnum.SM) || "";
+    const sm = screenMap.get(sizeEnum.SM) || 0;
-    const md = screenMap.get(sizeEnum.MD) || "";
+    const md = screenMap.get(sizeEnum.MD) || 0;
-    const lg = screenMap.get(sizeEnum.LG) || "";
+    const lg = screenMap.get(sizeEnum.LG) || 0;
-    const xl = screenMap.get(sizeEnum.XL) || "";
+    const xl = screenMap.get(sizeEnum.XL) || 0;
     if (width < xs) {
       screenRef.value = sizeEnum.XS;
     } else if (width < sm) {

src/layout/components/SideBar.vue

@@ -50,7 +50,7 @@ limitations under the License. -->
               </el-menu-item>
             </el-menu-item-group>
           </el-sub-menu>
-          <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
+          <el-menu-item :index="String(menu.name)" v-else>
             <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
               <router-link class="items menu-title" :to="menu.children[0].path">
                 <Icon size="lg" :iconName="menu.meta.icon" />
@@ -83,7 +83,6 @@ limitations under the License. -->
   const appStore = useAppStoreWithOut();
   const router = useRouter();
   const name = ref<string>(String(router.currentRoute.value.name));
-  const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
   const routes = ref<RouteRecordRaw[] | any>(
     (router.options.routes || []).filter((d: any) => d.meta && d.meta.activate),
   );
@@ -100,9 +99,7 @@ limitations under the License. -->
   if (route.name === "ViewWidget") {
     showMenu.value = false;
   }
-  const changePage = (menu: RouteRecordRaw) => {
+
-    theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
-  };
   const filterMenus = (menus: Recordable[]) => {
     return menus.filter((d) => d.meta && !d.meta.notShow && d.meta.activate);
   };

src/router/alarm.ts

@@ -33,7 +33,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
     children: [
       {
         path: "/alerting",
-        name: "Alarm",
+        name: "ViewAlarm",
         component: Alarm,
       },
     ],

src/router/dashboard.ts

@@ -100,7 +100,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
         component: Edit,
-        name: "ViewServiceRelation",
+        name: "ServiceRelations",
         meta: {
           notShow: true,
         },
@@ -121,7 +121,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
         component: Edit,
-        name: "ViewPod",
+        name: "Pods",
         meta: {
           notShow: true,
         },
@@ -142,7 +142,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
         component: Edit,
-        name: "ViewProcess",
+        name: "Processes",
         meta: {
           notShow: true,
         },
@@ -163,7 +163,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
         component: Edit,
-        name: "PodRelation",
+        name: "PodRelations",
         meta: {
           notShow: true,
         },
@@ -185,7 +185,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         redirect:
           "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
         component: Edit,
-        name: "ProcessRelation",
+        name: "ProcessRelations",
         meta: {
           notShow: true,
         },

src/router/settings.ts

@@ -33,7 +33,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
     children: [
       {
         path: "/settings",
-        name: "Settings",
+        name: "ViewSettings",
         component: Settings,
       },
     ],

src/store/modules/event.ts

@@ -54,7 +54,7 @@ export const eventStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
+      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getEndpoints(keyword: string) {
@@ -70,7 +70,7 @@ export const eventStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getEvents() {

src/store/modules/log.ts

@@ -80,7 +80,7 @@ export const logStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: " 0", label: "All" }];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
@@ -93,7 +93,7 @@ export const logStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: "0", label: "All" }];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods];
       return res.data;
     },
     async getLogsByKeywords() {

src/styles/theme.scss

@@ -118,8 +118,9 @@ html.dark {
   color: var(--sw-drawer-header);
 }
 
-.el-table tr {
+.el-table {
-  background-color: var(--el-table-tr-bg-color);
+  --el-table-tr-bg-color: var(--theme-background);
+  --el-table-header-bg-color: var(--theme-background);
 }
 
 .el-popper.is-light {
@@ -131,27 +132,6 @@ html.dark {
   --el-switch-off-color: #aaa;
 }
 
-.el-table__body-wrapper tr td.el-table-fixed-column--left,
-.el-table__body-wrapper tr td.el-table-fixed-column--right,
-.el-table__body-wrapper tr th.el-table-fixed-column--left,
-.el-table__body-wrapper tr th.el-table-fixed-column--right,
-.el-table__footer-wrapper tr td.el-table-fixed-column--left,
-.el-table__footer-wrapper tr td.el-table-fixed-column--right,
-.el-table__footer-wrapper tr th.el-table-fixed-column--left,
-.el-table__footer-wrapper tr th.el-table-fixed-column--right,
-.el-table__header-wrapper tr td.el-table-fixed-column--left,
-.el-table__header-wrapper tr td.el-table-fixed-column--right,
-.el-table__header-wrapper tr th.el-table-fixed-column--left,
-.el-table__header-wrapper tr th.el-table-fixed-column--right {
-  background-color: var(--sw-table-col);
-}
-
-.el-table.is-scrolling-none th.el-table-fixed-column--left,
-.el-table.is-scrolling-none th.el-table-fixed-column--right,
-.el-table th.el-table__cell {
-  background-color: var(--sw-table-col);
-}
-
 $tool-icon-btn-bg: var(--sw-icon-btn-bg);
 $tool-icon-btn-color: var(--sw-icon-btn-color);
 $popper-hover-bg-color: var(--popper-hover-bg);

src/views/Settings.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
         placeholder="Select a language"
         @change="setLang"
         size="small"
-        style="font-size: 14px"
+        style="font-size: 14px; width: 180px"
       />
     </div>
     <div class="flex-h item">

src/views/alarm/Header.vue

@@ -38,7 +38,7 @@ limitations under the License. -->
           :total="total"
           @current-change="changePage"
           :pager-count="5"
-          small
+          size="small"
           :style="
             appStore.theme === Themes.Light
               ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`

src/views/dashboard/panel/Tool.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="dashboard-tool flex-h">
     <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
       <div class="flex-h">
-        <div class="selectors-item" v-if="key !== 10">
+        <div class="flex-h selectors-item" v-if="key !== 10">
           <span class="label">$Service</span>
           <Selector
             v-model="states.currentService"
@@ -30,7 +30,7 @@ limitations under the License. -->
             <Icon size="small" iconName="hierarchy_topology" />
           </span>
         </div>
-        <div class="selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
+        <div class="flex-h selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
           <span class="label">
             {{ ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity) ? "$Endpoint" : "$ServiceInstance" }}
           </span>
@@ -52,7 +52,7 @@ limitations under the License. -->
             <Icon size="small" iconName="hierarchy_topology" />
           </span>
         </div>
-        <div class="selectors-item" v-if="key === 5 || key === 6">
+        <div class="flex-h selectors-item" v-if="key === 5 || key === 6">
           <span class="label"> $Process </span>
           <Selector
             v-model="states.currentProcess"
@@ -65,7 +65,7 @@ limitations under the License. -->
         </div>
       </div>
       <div class="flex-h" :class="isRelation ? 'relation' : ''">
-        <div class="selectors-item" v-if="key === 2 || key === 4 || key === 5">
+        <div class="flex-h selectors-item" v-if="key === 2 || key === 4 || key === 5">
           <span class="label">$DestinationService</span>
           <Selector
             v-model="states.currentDestService"
@@ -76,7 +76,7 @@ limitations under the License. -->
             class="selectors"
           />
         </div>
-        <div class="selectors-item" v-if="key === 4 || key === 5">
+        <div class="flex-h selectors-item" v-if="key === 4 || key === 5">
           <span class="label">
             {{ dashboardStore.entity === "EndpointRelation" ? "$DestinationEndpoint" : "$DestinationServiceInstance" }}
           </span>
@@ -91,7 +91,7 @@ limitations under the License. -->
             :isRemote="dashboardStore.entity === 'EndpointRelation'"
           />
         </div>
-        <div class="selectors-item" v-if="key === 5">
+        <div class="flex-h selectors-item" v-if="key === 5">
           <span class="label"> $DestinationProcess </span>
           <Selector
             v-model="states.currentDestProcess"
@@ -731,7 +731,7 @@ limitations under the License. -->
 
   .hierarchy-btn {
     display: inline-block;
-    padding: 0 2px 2px;
+    padding: 0 3px;
     border: 1px solid #666;
     border-radius: 4px;
     text-align: center;

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -64,7 +64,7 @@ limitations under the License. -->
   </el-table>
   <el-pagination
     class="mt-10"
-    small
+    size="small"
     layout="prev, pager, next"
     :page-size="pageSize"
     :total="continousProfilingStore.instances.length"

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -190,7 +190,7 @@ limitations under the License. -->
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
+    border-right: 1px solid rgb(0 0 0 / 7%);
     background-color: var(--sw-table-header);
     width: 100%;
     font-weight: bold;

src/views/dashboard/related/demand-log/Header.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5"> {{ t("instance") }}: </span>
       <Selector
         size="small"
@@ -25,7 +25,7 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
-    <div class="mr-5 mb-5" v-if="state.container">
+    <div class="mr-10 mb-5" v-if="state.container">
       <span class="grey mr-5">{{ t("container") }}:</span>
       <Selector
         size="small"
@@ -36,18 +36,7 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
-    <!-- <div class="mr-5">
+    <div class="mr-10">
-      <span class="grey mr-5">{{ t("limit") }}:</span>
-      <el-input-number
-        v-model="limit"
-        :min="1"
-        :max="1000"
-        size="small"
-        controls-position="right"
-        @change="changeField('limit', $event)"
-      />
-    </div> -->
-    <div class="mr-5">
       <span class="grey mr-5">{{ t("duration") }}:</span>
       <Selector
         size="small"
@@ -58,18 +47,19 @@ limitations under the License. -->
         class="duration-range"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("interval") }}:</span>
       <Selector
         size="small"
         :value="state.interval.value"
         :options="IntervalOpts"
         @change="changeField('interval', $event)"
+        class="selectors"
       />
     </div>
   </div>
   <div class="flex-h row">
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
       <span class="log-tags">
         <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
@@ -85,7 +75,7 @@ limitations under the License. -->
         @change="addLabels('keywordsOfContent')"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
       <span class="log-tags">
         <span

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
         </el-table>
         <el-pagination
           class="pagination"
-          small
+          size="small"
           layout="prev, pager, next"
           :page-size="pageSize"
           :total="processes.length"

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

@@ -13,9 +13,9 @@ 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 class="flex-h row">
+  <div class="flex-h">
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-5 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5"> {{ t("instance") }}: </span>
+      <span class="grey mr-5 label"> {{ t("instance") }}: </span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -24,8 +24,8 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-5 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5"> {{ t("endpoint") }}: </span>
+      <span class="grey mr-5 label"> {{ t("endpoint") }}: </span>
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -36,8 +36,8 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-5 flex-h">
-      <span class="grey">{{ t("eventsType") }}: </span>
+      <span class="grey label" style="width: 95px">{{ t("eventsType") }}: </span>
       <Selector
         v-model="state.eventType"
         :options="EventTypes"
@@ -47,15 +47,17 @@ limitations under the License. -->
         size="small"
       />
     </div>
-    <el-pagination
+    <div>
-      v-model="pageNum"
+      <el-pagination
-      :page-size="pageSize"
+        v-model="pageNum"
-      layout="prev, pager, next"
+        :page-size="pageSize"
-      :total="total"
+        layout="prev, pager, next"
-      @current-change="updatePage"
+        :total="total"
-      :pager-count="5"
+        @current-change="updatePage"
-      small
+        :pager-count="5"
-    />
+        size="small"
+      />
+    </div>
     <el-button class="search-btn" size="small" type="primary" @click="queryEvents">
       {{ t("search") }}
     </el-button>
@@ -231,4 +233,8 @@ limitations under the License. -->
     font-size: $font-size-smaller;
     margin: 0 2px;
   }
+
+  .label {
+    line-height: 24px;
+  }
 </style>

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

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+      <span class="grey mr-5 label">{{ t("service") }}:</span>
       <Selector
         size="small"
         :value="state.service.value"
@@ -24,8 +24,8 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5"> {{ isBrowser ? t("version") : t("instance") }}: </span>
+      <span class="grey mr-5 label"> {{ isBrowser ? t("version") : t("instance") }}: </span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -34,8 +34,8 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
+      <span class="grey mr-5 label"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -46,8 +46,8 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5" v-if="isBrowser">
+    <div class="mr-10 flex-h" v-if="isBrowser">
-      <span class="grey mr-5"> {{ t("category") }}: </span>
+      <span class="grey mr-5 label"> {{ t("category") }}: </span>
       <Selector
         size="small"
         :value="state.category.value"
@@ -61,8 +61,8 @@ limitations under the License. -->
     </el-button>
   </div>
   <div class="flex-h row" v-show="!isBrowser">
-    <div class="mr-5 traceId">
+    <div class="mr-10 traceId">
-      <span class="grey mr-5">{{ t("traceID") }}:</span>
+      <span class="grey mr-5 label">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="inputs-max" size="small" />
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
@@ -78,8 +78,8 @@ limitations under the License. -->
     </div>
     <div v-show="logStore.supportQueryLogsByKeywords">
       <div class="flex-h">
-        <div class="mr-5">
+        <div class="mr-10">
-          <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+          <span class="mr-5 grey label">{{ t("keywordsOfContent") }}:</span>
           <span class="log-tags">
             <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
               <span>{{ item }}</span>
@@ -94,8 +94,8 @@ limitations under the License. -->
             @change="addLabels('keywordsOfContent')"
           />
         </div>
-        <div class="mr-5">
+        <div class="mr-10">
-          <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+          <span class="grey mr-5 label"> {{ t("excludingKeywordsOfContent") }}: </span>
           <span class="log-tags">
             <span
               class="selected"
@@ -437,4 +437,8 @@ limitations under the License. -->
     margin-left: 3px;
     cursor: pointer;
   }
+
+  .label {
+    line-height: 24px;
+  }
 </style>

src/views/dashboard/related/log/List.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
       <el-pagination
         v-model="logStore.conditions.paging.pageNum"
         :page-size="pageSize"
-        :small="true"
+        size="small"
         layout="prev, pager, next"
         :pager-count="5"
         :total="total"

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

@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="profile-trace-dashboard" v-if="profileStore.currentSegment">
-    <div class="profile-trace-detail-wrapper">
+    <div class="flex-h profile-trace-detail-wrapper">
-      <label>Trace ID</label>
+      <div>
-      <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
+        <label>Trace ID</label>
+        <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
+      </div>
       <Selector
         size="small"
         :value="dataMode"
         :options="ProfileDataMode"
         placeholder="Please select a profile data mode"
         @change="spanModeChange"
-        class="mr-10"
+        class="mr-10 fliter"
       />
       <Selector
         size="small"
@@ -31,7 +33,7 @@ limitations under the License. -->
         :options="ProfileDisplayMode"
         placeholder="Please select a profile display mode"
         @change="selectDisplayMode"
-        class="mr-10"
+        class="mr-10 fliter"
       />
       <el-button type="primary" size="small" :disabled="!profileStore.currentSpan.profiled" @click="analyzeProfile()">
         {{ t("analyze") }}
@@ -183,4 +185,8 @@ limitations under the License. -->
   .input {
     width: 250px;
   }
+
+  .fliter {
+    width: 140px;
+  }
 </style>

src/views/dashboard/related/topology/service/ServiceMap.vue

@@ -98,17 +98,17 @@ limitations under the License. -->
     <div class="setting" v-if="showSetting && dashboardStore.editMode">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
-    <div class="tool">
+    <div class="tool flex-h">
-      <span v-show="graphConfig.showDepth">
+      <div class="flex-h" v-show="graphConfig.showDepth">
         <span class="label">{{ t("currentDepth") }}</span>
         <Selector class="inputs" :value="depth" :options="DepthList" @change="changeDepth" />
-      </span>
+      </div>
-      <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
+      <div class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
         <Icon size="middle" iconName="settings" />
-      </span>
+      </div>
-      <span class="switch-icon ml-5" title="Back to overview topology" @click="backToTopology">
+      <div class="switch-icon ml-5" title="Back to overview topology" @click="backToTopology">
         <Icon size="middle" iconName="keyboard_backspace" />
-      </span>
+      </div>
     </div>
     <div
       class="operations-list"
@@ -674,8 +674,8 @@ limitations under the License. -->
 
     .label {
       color: var(--sw-topology-color);
-      display: inline-block;
+      line-height: 32px;
-      margin-right: 5px;
+      width: 120px;
     }
 
     .operations-list {
@@ -713,8 +713,8 @@ limitations under the License. -->
       background: var(--sw-topology-switch-icon);
       color: $text-color;
       display: inline-block;
-      padding: 2px 4px;
+      padding: 5px 4px;
-      border-radius: 3px;
+      border-radius: 2px;
     }
 
     .topo-line {

src/views/dashboard/related/trace/Filter.vue

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+      <span class="grey mr-5 label">{{ t("service") }}:</span>
       <Selector
         size="small"
         :value="state.service.value"
@@ -24,8 +24,8 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5">{{ t("instance") }}:</span>
+      <span class="grey mr-5 label">{{ t("instance") }}:</span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -34,8 +34,8 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5">{{ t("endpoint") }}:</span>
+      <span class="grey mr-5 label">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -46,8 +46,8 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-10">
+    <div class="mr-10 flex-h">
-      <span class="grey mr-5">{{ t("status") }}:</span>
+      <span class="grey mr-5 label">{{ t("status") }}:</span>
       <Selector
         size="small"
         :value="state.status.value"
@@ -325,4 +325,8 @@ limitations under the License. -->
     top: 0;
     right: 10px;
   }
+
+  .label {
+    line-height: 24px;
+  }
 </style>

src/views/dashboard/related/trace/TraceList.vue

@@ -71,7 +71,7 @@ limitations under the License. -->
       <el-pagination
         v-model="traceStore.conditions.paging.pageNum"
         :page-size="pageSize"
-        :small="true"
+        size="small"
         layout="prev, pager, next"
         :total="total"
         @current-change="updatePage"

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

@@ -119,7 +119,7 @@ limitations under the License. -->
     <el-pagination
       v-model="pageNum"
       :page-size="pageSize"
-      :small="true"
+      size="small"
       layout="prev, pager, next"
       :pager-count="5"
       :total="total"

tsconfig.app.json

@@ -23,6 +23,10 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "noImplicitThis": false
+    "noImplicitThis": false,
+    "preserveValueImports": false,
+    "importsNotUsedAsValues": "remove",
+    "target": "esnext",
+    "lib": ["es2019", "dom"]
   }
 }