diff --git a/src/assets/icons/version.svg b/src/assets/icons/version.svg deleted file mode 100644 index fba69678..00000000 --- a/src/assets/icons/version.svg +++ /dev/null @@ -1,15 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/Select.vue b/src/components/SelectSingle.vue similarity index 100% rename from src/components/Select.vue rename to src/components/SelectSingle.vue diff --git a/src/components/Selector.vue b/src/components/Selector.vue index 908b2f65..a925bb27 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -23,6 +23,9 @@ limitations under the License. --> :disabled="disabled" :style="{ borderRadius }" :clearable="clearable" + :remote="isRemote" + :reserve-keyword="isRemote" + :remote-method="remoteMethod" > , @@ -62,6 +65,7 @@ const props = defineProps({ multiple: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, + isRemote: { type: Boolean, default: false }, }); const selected = ref(props.value); @@ -73,6 +77,13 @@ function changeSelected() { ); emit("change", options); } + +function remoteMethod(query: string) { + if (props.isRemote) { + emit("query", query); + } +} + watch( () => props.value, (data) => { diff --git a/src/components/index.ts b/src/components/index.ts index 0ce63ae1..6417e237 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -19,7 +19,7 @@ import TimePicker from "./TimePicker.vue"; import Selector from "./Selector.vue"; import Graph from "./Graph.vue"; import Radio from "./Radio.vue"; -import SelectSingle from "./Select.vue"; +import SelectSingle from "./SelectSingle.vue"; import type { App } from "vue"; import VueGridLayout from "vue-grid-layout"; diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts index 4b90d4f9..f855d8f3 100644 --- a/src/graphql/fragments/selector.ts +++ b/src/graphql/fragments/selector.ts @@ -52,7 +52,7 @@ export const Instances = { export const Endpoints = { variable: "$serviceId: ID!, $keyword: String!", query: ` - pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) { + pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20) { id value: name label: name diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 000a36c3..8a006237 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -30,6 +30,20 @@ limitations under the License. --> + + + + + @@ -39,6 +53,7 @@ import { useRoute } from "vue-router"; import { useI18n } from "vue-i18n"; import timeFormat from "@/utils/timeFormat"; import { useAppStoreWithOut } from "@/store/modules/app"; +import { ElMessage } from "element-plus"; const { t } = useI18n(); const appStore = useAppStoreWithOut(); @@ -47,6 +62,7 @@ const pageName = ref(""); const timeRange = ref(0); const theme = ref("light"); +getVersion(); const setConfig = (value: string) => { pageName.value = value || ""; theme.value = route.path.includes("/infrastructure/") ? "dark" : "light"; @@ -76,6 +92,12 @@ watch( setConfig(String(title)); } ); +async function getVersion() { + const res = await appStore.fetchVersion(); + if (res.errors) { + ElMessage.error(res.errors); + } +} diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts index a4d93ca3..b9934976 100644 --- a/src/store/modules/log.ts +++ b/src/store/modules/log.ts @@ -86,14 +86,14 @@ export const logStore = defineStore({ ] || [{ value: " 0", label: "All" }]; return res.data; }, - async getEndpoints(id: string) { + async getEndpoints(id: string, keyword?: string) { const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id; const res: AxiosResponse = await graphql.query("queryEndpoints").params({ serviceId, duration: this.durationTime, - keyword: "", + keyword: keyword || "", }); if (res.data.errors) { return res.data; diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 695865f7..a7178a0d 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -101,14 +101,14 @@ export const traceStore = defineStore({ ] || [{ value: " 0", label: "All" }]; return res.data; }, - async getEndpoints(id: string) { + async getEndpoints(id: string, keyword?: string) { const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id; const res: AxiosResponse = await graphql.query("queryEndpoints").params({ serviceId, duration: this.durationTime, - keyword: "", + keyword: keyword || "", }); if (res.data.errors) { return res.data; diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 197a7f76..6d5724ce 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -219,8 +219,8 @@ async function setMetricType(chart?: any) { } } -function setDashboards() { - const { graph } = dashboardStore.selectedGrid; +function setDashboards(type?: string) { + const graph = type || dashboardStore.selectedGrid.graph; const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]"); const arr = list.reduce( ( @@ -279,7 +279,7 @@ function changeChartType(item: Option) { defaultLen.value = 5; } setMetricType(graph); - setDashboards(); + setDashboards(graph.type); states.dashboardName = ""; defaultLen.value = 10; } diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index b3823d1d..7669adea 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -40,7 +40,11 @@ limitations under the License. --> size="small" placeholder="Select a data" @change="changePods" + @query="searchPods" class="selectorPod" + :isRemote=" + ['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity) + " />
@@ -60,15 +64,17 @@ limitations under the License. --> dashboardStore.entity === "EndpointRelation" ? "$DestinationEndpoint" : "$DestinationServiceInstance" - }} + }} +
@@ -126,7 +132,6 @@ const params = useRoute().params; const toolIcons = ref<{ name: string; content: string; id: string }[]>( EndpointRelationTools ); -const limit = ref(10); const loading = ref(false); const states = reactive<{ destService: string; @@ -320,6 +325,14 @@ function changePods(pod: any) { } } +function changeDestPods(pod: any) { + if (pod[0]) { + selectorStore.setCurrentDestPod(pod[0]); + } else { + selectorStore.setCurrentDestPod(null); + } +} + function changeMode() { if (dashboardStore.editMode) { ElMessage.warning(t("editWarning")); @@ -403,11 +416,16 @@ function setControls(id: string) { } } -async function fetchPods(type: string, serviceId: string, setPod: boolean) { +async function fetchPods( + type: string, + serviceId: string, + setPod: boolean, + param?: { keyword?: string } +) { let resp; switch (type) { case EntityType[2].value: - resp = await selectorStore.getEndpoints({ serviceId, limit }); + resp = await selectorStore.getEndpoints({ serviceId, ...param }); if (setPod) { selectorStore.setCurrentPod( selectorStore.pods.length ? selectorStore.pods[0] : null @@ -428,7 +446,7 @@ async function fetchPods(type: string, serviceId: string, setPod: boolean) { resp = await selectorStore.getEndpoints({ serviceId, isRelation: true, - limit, + ...param, }); if (setPod) { selectorStore.setCurrentDestPod( @@ -483,6 +501,23 @@ function getTools() { toolIcons.value = EndpointRelationTools; } } +function searchPods(query: string) { + const param = { + keyword: query, + }; + fetchPods(EntityType[2].value, selectorStore.currentService.id, false, param); +} +function searchDestPods(query: string) { + const param = { + keyword: query, + }; + fetchPods( + EntityType[6].value, + selectorStore.currentDestService.id, + false, + param + ); +}