fix: update endpointlist

This commit is contained in:
Qiuxia Fan 2022-01-24 13:35:42 +08:00
parent bbb269a665
commit 28281e5bd4
4 changed files with 32 additions and 19 deletions

View File

@ -195,7 +195,8 @@ function aggregation(json: {
export function useQueryPodsMetrics( export function useQueryPodsMetrics(
pods: Array<Instance | Endpoint>, pods: Array<Instance | Endpoint>,
config: { metrics: string[]; metricTypes: string[] } config: { metrics: string[]; metricTypes: string[] },
scope: string
) { ) {
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
@ -207,9 +208,10 @@ export function useQueryPodsMetrics(
const fragmentList = pods.map((d: Instance | Endpoint, index: number) => { const fragmentList = pods.map((d: Instance | Endpoint, index: number) => {
const param = { const param = {
scope: "ServiceInstance", scope,
serviceName: currentService.label, serviceName: currentService.label,
serviceInstanceName: d.label, serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
endpointName: scope === "Endpoint" ? d.label : undefined,
normal: currentService.normal, normal: currentService.normal,
}; };
const f = config.metrics.map((name: string, idx: number) => { const f = config.metrics.map((name: string, idx: number) => {

View File

@ -100,8 +100,8 @@ const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const endpoints = ref<Endpoint[]>([]); const endpoints = ref<Endpoint[]>([]);
const currentEndpoints = ref<Endpoint[]>([]); const searchEndpoints = ref<Endpoint[]>([]);
const pageSize = 7; const pageSize = 5;
const searchText = ref<string>(""); const searchText = ref<string>("");
queryEndpoints(); queryEndpoints();
@ -115,16 +115,18 @@ async function queryEndpoints() {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
return; return;
} }
searchEndpoints.value = selectorStore.endpoints;
endpoints.value = selectorStore.endpoints.splice(0, pageSize); endpoints.value = selectorStore.endpoints.splice(0, pageSize);
queryMetrics(endpoints.value); queryEndpointMetrics(endpoints.value);
} }
async function queryMetrics(currentPods: Endpoint[]) { async function queryEndpointMetrics(currentPods: Endpoint[]) {
const { metrics } = dashboardStore.selectedGrid; const { metrics } = dashboardStore.selectedGrid;
if (metrics.length && metrics[0]) { if (metrics.length && metrics[0]) {
const params = await useQueryPodsMetrics( const params = await useQueryPodsMetrics(
currentPods, currentPods,
dashboardStore.selectedGrid dashboardStore.selectedGrid,
"Endpoint"
); );
const json = await dashboardStore.fetchMetricValue(params); const json = await dashboardStore.fetchMetricValue(params);
@ -142,13 +144,14 @@ async function queryMetrics(currentPods: Endpoint[]) {
endpoints.value = currentPods; endpoints.value = currentPods;
} }
function changePage(pageIndex: number) { function changePage(pageIndex: number) {
endpoints.value = selectorStore.endpoints.splice(pageIndex - 1, pageSize); endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
} }
function searchList() { function searchList() {
currentEndpoints.value = selectorStore.instances.filter( const currentEndpoints = selectorStore.instances.filter(
(d: { label: string }) => d.label.includes(searchText.value) (d: { label: string }) => d.label.includes(searchText.value)
); );
endpoints.value = currentEndpoints.value.splice(0, pageSize); searchEndpoints.value = currentEndpoints;
endpoints.value = currentEndpoints.splice(0, pageSize);
} }
watch( watch(
() => [ () => [
@ -156,11 +159,14 @@ watch(
dashboardStore.selectedGrid.metrics, dashboardStore.selectedGrid.metrics,
], ],
() => { () => {
const currentPods = currentEndpoints.value.splice(0, pageSize); queryEndpointMetrics(endpoints.value);
queryMetrics(currentPods);
} }
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./style.scss"; @import "./style.scss";
.chart {
height: 39px;
}
</style> </style>

View File

@ -115,16 +115,17 @@ async function queryInstance() {
searchInstances.value = selectorStore.instances; searchInstances.value = selectorStore.instances;
const currentInstances = searchInstances.value.splice(0, pageSize); const currentInstances = searchInstances.value.splice(0, pageSize);
queryMetrics(currentInstances); queryInstanceMetrics(currentInstances);
} }
async function queryMetrics(currentInstances: Instance[]) { async function queryInstanceMetrics(currentInstances: Instance[]) {
const { metrics } = dashboardStore.selectedGrid; const { metrics } = dashboardStore.selectedGrid;
if (metrics.length && metrics[0]) { if (metrics.length && metrics[0]) {
const params = await useQueryPodsMetrics( const params = await useQueryPodsMetrics(
currentInstances, currentInstances,
dashboardStore.selectedGrid dashboardStore.selectedGrid,
"ServiceInstance"
); );
const json = await dashboardStore.fetchMetricValue(params); const json = await dashboardStore.fetchMetricValue(params);
@ -158,8 +159,7 @@ watch(
dashboardStore.selectedGrid.metrics, dashboardStore.selectedGrid.metrics,
], ],
() => { () => {
const currentInstances = searchInstances.value.splice(0, pageSize); queryInstanceMetrics(instances.value);
queryMetrics(currentInstances);
} }
); );
</script> </script>

View File

@ -75,10 +75,11 @@ defineProps({
type: Object as PropType<ServiceListConfig>, type: Object as PropType<ServiceListConfig>,
default: () => ({ dashboardName: "", fontSize: 12 }), default: () => ({ dashboardName: "", fontSize: 12 }),
}, },
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
}); });
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const pageSize = 7; const pageSize = 5;
const services = ref<{ label: string; layer: string }[]>([]); const services = ref<{ label: string; layer: string }[]>([]);
const searchServices = ref<{ layer: string; label: string }[]>([]); const searchServices = ref<{ layer: string; label: string }[]>([]);
const searchText = ref<string>(""); const searchText = ref<string>("");
@ -105,4 +106,8 @@ function searchList() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./style.scss"; @import "./style.scss";
.chart {
height: 39px;
}
</style> </style>