build: bump up dependencies

.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-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%",

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) {

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 {
-  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);

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">
-      <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

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="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>