feat: add topN selector for endpoint list (#450)

src/graphql/fragments/selector.ts

@@ -73,9 +73,9 @@ export const Processes = {
 };
 
 export const Endpoints = {
-  variable: "$serviceId: ID!, $keyword: String!, $duration: Duration",
+  variable: "$serviceId: ID!, $keyword: String!, $duration: Duration, $limit: Int!",
   query: `
-  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20, duration: $duration) {
+  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: $limit, duration: $duration) {
     id
     value: name
      label: name

src/locales/lang/en.ts

@@ -139,7 +139,6 @@ const msg = {
   enableAssociate: "Enable association",
   text: "Text",
   query: "Query",
-  endpointTips: "The table shows up to 20 pieces of endpoints.",
   viewTrace: "View Related Traces",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Latency Related Metrics",

src/locales/lang/es.ts

@@ -138,7 +138,6 @@ const msg = {
     "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres",
   enableAssociate: "Activar asociación",
   query: "Consulta",
-  endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
   queryOrder: "Consulta por duración",
   setOrder: "Orden de consulta",
   latency: "Retraso",

src/locales/lang/zh.ts

@@ -137,7 +137,6 @@ const msg = {
   duplicateName: "重复的名称",
   text: "文本",
   query: "查询",
-  endpointTips: "这里最多展示20条endpoints。",
   viewTrace: "查看相关Trace",
   relatedTraceOptions: "相关的Trace选项",
   setLatencyDuration: "延迟相关指标",

src/store/data.ts

@@ -56,3 +56,5 @@ export enum EBPFProfilingTriggerType {
   FIXED_TIME = "FIXED_TIME",
   CONTINUOUS_PROFILING = "CONTINUOUS_PROFILING",
 }
+
+export const EndpointsTopNDefault = 20;

src/store/modules/event.ts

@@ -22,6 +22,7 @@ import type { Event, QueryEventCondition } from "@/types/events";
 import type { Instance, Endpoint } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { EndpointsTopNDefault } from "../data";
 
 interface eventState {
   loading: boolean;
@@ -66,6 +67,7 @@ export const eventStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
+        limit: EndpointsTopNDefault,
       });
       if (res.data.errors) {
         return res.data;

src/store/modules/log.ts

@@ -22,6 +22,7 @@ import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { EndpointsTopNDefault } from "../data";
 
 interface LogState {
   services: Service[];
@@ -89,6 +90,7 @@ export const logStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
+        limit: EndpointsTopNDefault,
       });
       if (res.data.errors) {
         return res.data;

src/store/modules/profile.ts

@@ -28,6 +28,7 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { EndpointsTopNDefault } from "../data";
 
 interface ProfileState {
   endpoints: Endpoint[];
@@ -97,6 +98,7 @@ export const profileStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
+        limit: EndpointsTopNDefault,
       });
       if (res.data.errors) {
         return res.data;
@@ -109,6 +111,7 @@ export const profileStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
+        limit: EndpointsTopNDefault,
       });
       if (res.data.errors) {
         return res.data;

src/store/modules/selectors.ts

@@ -20,6 +20,7 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { EndpointsTopNDefault } from "../data";
 interface SelectorState {
   services: Service[];
   destServices: Service[];
@@ -143,7 +144,7 @@ export const selectorStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: params.keyword || "",
-        limit: params.limit,
+        limit: params.limit || EndpointsTopNDefault,
       });
       if (!res.data.errors) {
         if (params.isRelation) {

src/store/modules/trace.ts

@@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { QueryOrders } from "@/views/dashboard/data";
+import { EndpointsTopNDefault } from "../data";
 interface TraceState {
   services: Service[];
   instances: Instance[];
@@ -133,6 +134,7 @@ export const traceStore = defineStore({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
         keyword: keyword || "",
+        limit: EndpointsTopNDefault,
       });
       if (res.data.errors) {
         return res.data;

src/views/dashboard/graphs/EndpointList.vue

@@ -16,13 +16,15 @@ limitations under the License. -->
   <div class="table">
     <div class="search">
       <el-input v-model="searchText" placeholder="Search for more endpoints" @change="searchList" class="inputs">
+        <template #prepend>
+          <Selector style="width: 120px" v-model="topN" :options="topNList" placeholder="Select" />
+        </template>
         <template #append>
           <el-button @click="searchList">
             <Icon size="middle" iconName="search" />
           </el-button>
         </template>
       </el-input>
-      <span class="ml-5 tips">{{ t("endpointTips") }}</span>
     </div>
     <div class="list">
       <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
@@ -52,7 +54,6 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { ElMessage } from "element-plus";
-  import { useI18n } from "vue-i18n";
   import type { PropType } from "vue";
   import type { EndpointListConfig } from "@/types/dashboard";
   import type { Endpoint } from "@/types/selector";
@@ -90,7 +91,6 @@ limitations under the License. -->
   });
 
   const emit = defineEmits(["expressionTips"]);
-  const { t } = useI18n();
   const selectorStore = useSelectorStore();
   const dashboardStore = useDashboardStore();
   const chartLoading = ref<boolean>(false);
@@ -100,6 +100,14 @@ limitations under the License. -->
   const colSubMetrics = ref<string[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
+  const topN = ref<number>(20);
+  const topNList = [
+    { label: "TopN20", value: 20 },
+    { label: "TopN50", value: 50 },
+    { label: "TopN100", value: 100 },
+    { label: "TopN150", value: 150 },
+    { label: "TopN200", value: 200 },
+  ];
 
   if (props.needQuery) {
     queryEndpoints();
@@ -108,6 +116,7 @@ limitations under the License. -->
     chartLoading.value = true;
     const resp = await selectorStore.getEndpoints({
       keyword: searchText.value,
+      limit: topN.value,
     });
 
     chartLoading.value = false;

src/views/dashboard/graphs/style.scss

@@ -53,5 +53,5 @@
 }
 
 .inputs {
-  width: 300px;
+  width: 400px;
 }