diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts index 8f1b09eb..37a2c790 100644 --- a/src/graphql/fragments/selector.ts +++ b/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 diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index b4f2c693..75597f1e 100644 --- a/src/locales/lang/en.ts +++ b/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", diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts index 25a94cc3..1e714278 100644 --- a/src/locales/lang/es.ts +++ b/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", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 45f635dc..b6c1fbb8 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -137,7 +137,6 @@ const msg = { duplicateName: "重复的名称", text: "文本", query: "查询", - endpointTips: "这里最多展示20条endpoints。", viewTrace: "查看相关Trace", relatedTraceOptions: "相关的Trace选项", setLatencyDuration: "延迟相关指标", diff --git a/src/store/data.ts b/src/store/data.ts index c0414116..760e1107 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -56,3 +56,5 @@ export enum EBPFProfilingTriggerType { FIXED_TIME = "FIXED_TIME", CONTINUOUS_PROFILING = "CONTINUOUS_PROFILING", } + +export const EndpointsTopNDefault = 20; diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts index 4401ebd9..9b3954be 100644 --- a/src/store/modules/event.ts +++ b/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; diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts index 44f332c2..fc0c341f 100644 --- a/src/store/modules/log.ts +++ b/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; diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts index 55ac9a5b..7409ff85 100644 --- a/src/store/modules/profile.ts +++ b/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; diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 4101b850..0c1da36b 100644 --- a/src/store/modules/selectors.ts +++ b/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) { diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 4c2d5876..808a183a 100644 --- a/src/store/modules/trace.ts +++ b/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; diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 3831b043..e6133461 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -16,13 +16,15 @@ limitations under the License. -->
@@ -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(false); @@ -100,6 +100,14 @@ limitations under the License. --> const colSubMetrics = ref([]); const metricConfig = ref(props.config.metricConfig || []); const typesOfMQE = ref(props.config.typesOfMQE || []); + const topN = ref(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; diff --git a/src/views/dashboard/graphs/style.scss b/src/views/dashboard/graphs/style.scss index 4f621921..d1797e9d 100644 --- a/src/views/dashboard/graphs/style.scss +++ b/src/views/dashboard/graphs/style.scss @@ -53,5 +53,5 @@ } .inputs { - width: 300px; + width: 400px; }