build: bump up dependencies (#448)

2025-04-30 23:04:00 +00:00 · 2025-02-20 13:49:58 +08:00 · 2025-02-20 13:49:58 +08:00 · 2b6f3ecaa8
commit 2b6f3ecaa8
parent 2246a9a045
23 changed files with 2942 additions and 4444 deletions
--- a/.github/workflows/nodejs.yml
+++ b/.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 }}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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-jsx": "^3.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@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",
-    "vue-tsc": "^1.8.27"
+    "vitest": "^3.0.5",
+    "vue-tsc": "^2.2.2"
  },
  "browserslist": [
    "> 1%",
--- a/src/hooks/useBreakpoint.ts
+++ b/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 sm = screenMap.get(sizeEnum.SM) || "";
-    const md = screenMap.get(sizeEnum.MD) || "";
-    const lg = screenMap.get(sizeEnum.LG) || "";
-    const xl = screenMap.get(sizeEnum.XL) || "";
+    const xs = screenMap.get(sizeEnum.XS) || 0;
+    const sm = screenMap.get(sizeEnum.SM) || 0;
+    const md = screenMap.get(sizeEnum.MD) || 0;
+    const lg = screenMap.get(sizeEnum.LG) || 0;
+    const xl = screenMap.get(sizeEnum.XL) || 0;
    if (width < xs) {
      screenRef.value = sizeEnum.XS;
    } else if (width < sm) {
--- a/src/store/modules/event.ts
+++ b/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() {
--- a/src/store/modules/log.ts
+++ b/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() {
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@ -118,8 +118,9 @@ html.dark {
  color: var(--sw-drawer-header);
 }

-.el-table tr {
-  background-color: var(--el-table-tr-bg-color);
+.el-table {
+  --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);
--- a/src/views/Settings.vue
+++ b/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">
--- a/src/views/alarm/Header.vue
+++ b/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;`
--- a/src/views/dashboard/panel/Tool.vue
+++ b/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;
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/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"
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/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;
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/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">
-      <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">
+    <div class="mr-10">
      <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
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/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"
--- a/src/views/dashboard/related/event/Header.vue
+++ b/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="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5"> {{ t("instance") }}: </span>
+  <div class="flex-h">
+    <div class="mr-5 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
+      <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">
-      <span class="grey mr-5"> {{ t("endpoint") }}: </span>
+    <div class="mr-5 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
+      <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">
-      <span class="grey">{{ t("eventsType") }}: </span>
+    <div class="mr-5 flex-h">
+      <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
-      v-model="pageNum"
-      :page-size="pageSize"
-      layout="prev, pager, next"
-      :total="total"
-      @current-change="updatePage"
-      :pager-count="5"
-      small
-    />
+    <div>
+      <el-pagination
+        v-model="pageNum"
+        :page-size="pageSize"
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="updatePage"
+        :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>
--- a/src/views/dashboard/related/log/Header.vue
+++ b/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">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
+      <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">
-      <span class="grey mr-5"> {{ isBrowser ? t("version") : t("instance") }}: </span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
+      <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">
-      <span class="grey mr-5"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
+      <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">
-      <span class="grey mr-5"> {{ t("category") }}: </span>
+    <div class="mr-10 flex-h" v-if="isBrowser">
+      <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">
-      <span class="grey mr-5">{{ t("traceID") }}:</span>
+    <div class="mr-10 traceId">
+      <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">
-          <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+        <div class="mr-10">
+          <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">
-          <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+        <div class="mr-10">
+          <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>
--- a/src/views/dashboard/related/log/List.vue
+++ b/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"
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/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">
-      <label>Trace ID</label>
-      <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
+    <div class="flex-h profile-trace-detail-wrapper">
+      <div>
+        <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>
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/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">
-      <span v-show="graphConfig.showDepth">
+    <div class="tool flex-h">
+      <div class="flex-h" v-show="graphConfig.showDepth">
        <span class="label">{{ t("currentDepth") }}</span>
        <Selector class="inputs" :value="depth" :options="DepthList" @change="changeDepth" />
-      </span>
-      <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
+      </div>
+      <div class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
        <Icon size="middle" iconName="settings" />
-      </span>
-      <span class="switch-icon ml-5" title="Back to overview topology" @click="backToTopology">
+      </div>
+      <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;
-      margin-right: 5px;
+      line-height: 32px;
+      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;
-      border-radius: 3px;
+      padding: 5px 4px;
+      border-radius: 2px;
    }

    .topo-line {
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/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">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
+      <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">
-      <span class="grey mr-5">{{ t("instance") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
+      <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">
-      <span class="grey mr-5">{{ t("endpoint") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
+      <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">
-      <span class="grey mr-5">{{ t("status") }}:</span>
+    <div class="mr-10 flex-h">
+      <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>
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/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"
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/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"
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -23,6 +23,10 @@
    "paths": {
      "@/*": ["./src/*"]
    },
-    "noImplicitThis": false
+    "noImplicitThis": false,
+    "preserveValueImports": false,
+    "importsNotUsedAsValues": "remove",
+    "target": "esnext",
+    "lib": ["es2019", "dom"]
  }
 }