diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index bd6632c2..98f1f762 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -318,11 +318,11 @@ function aggregation(val: number, standard: any): number | string { data = val - Number(standard.plus); return data; } - if (!isNaN(standard.multiply)) { + if (!isNaN(standard.multiply) && standard.divide !== 0) { data = val * Number(standard.multiply); return data; } - if (!isNaN(standard.divide)) { + if (!isNaN(standard.divide) && standard.divide !== 0) { data = val / Number(standard.divide); return data; } diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 0f485c1f..2536a4cc 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -293,7 +293,7 @@ export const dashboardStore = defineStore({ return res.data; } const data = res.data.data.getAllTemplates; - const list = []; + let list = []; for (const t of data) { const c = JSON.parse(t.configuration); const key = [c.layer, c.entity, c.name].join("_"); @@ -310,6 +310,17 @@ export const dashboardStore = defineStore({ JSON.stringify({ id: t.id, configuration: c }) ); } + list = list.sort((a, b) => { + const nameA = a.name.toUpperCase(); + const nameB = b.name.toUpperCase(); + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + return 0; + }); sessionStorage.setItem("dashboards", JSON.stringify(list)); return res.data; }, diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 893af48b..db90a72e 100644 --- a/src/store/modules/selectors.ts +++ b/src/store/modules/selectors.ts @@ -101,6 +101,7 @@ export const selectorStore = defineStore({ keyword?: string; serviceId?: string; isRelation?: boolean; + limit?: number; }): Promise> { if (!params) { params = {}; @@ -113,6 +114,7 @@ export const selectorStore = defineStore({ serviceId, duration: this.durationTime, keyword: params.keyword || "", + limit: params.limit, }); if (!res.data.errors) { if (params.isRelation) { diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 822f9430..8cd9fc3d 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -46,6 +46,7 @@ limitations under the License. --> ref="multipleTableRef" :default-sort="{ prop: 'name' }" @selection-change="handleSelectionChange" + height="637px" > diff --git a/src/views/dashboard/configuration/widget/MetricOptions.vue b/src/views/dashboard/configuration/widget/MetricOptions.vue index 12d71203..7e6bc992 100644 --- a/src/views/dashboard/configuration/widget/MetricOptions.vue +++ b/src/views/dashboard/configuration/widget/MetricOptions.vue @@ -144,10 +144,17 @@ async function setMetricType() { } states.metricList = (json.data.metrics || []).filter( (d: { catalog: string; type: string }) => { - if (states.isList || graph.type === "Table") { + if (states.isList) { if (d.type === MetricsType.REGULAR_VALUE) { return d; } + } else if (graph.type === "Table") { + if ( + d.type === MetricsType.LABELED_VALUE || + d.type === MetricsType.REGULAR_VALUE + ) { + return d; + } } else { return d; } diff --git a/src/views/dashboard/configuration/widget/StandardOptions.vue b/src/views/dashboard/configuration/widget/StandardOptions.vue index 255ad1aa..5b94f05d 100644 --- a/src/views/dashboard/configuration/widget/StandardOptions.vue +++ b/src/views/dashboard/configuration/widget/StandardOptions.vue @@ -33,7 +33,7 @@ limitations under the License. --> @change="changeStandardOpt({ sortOrder })" /> -
+
{{ t("labels") }} @change="changeStandardOpt" />
-
+
{{ t("labelsIndex") }}
{{ t("plus") }} -
{{ t("minus") }} -
{{ t("multiply") }} -
{{ t("divide") }} -
{{ t("convertToMilliseconds") }} -
{{ t("convertToSeconds") }} -
@@ -127,9 +133,6 @@ const { t } = useI18n(); const emit = defineEmits(["update", "loading"]); const dashboardStore = useDashboardStore(); const { selectedGrid } = dashboardStore; -const percentile = ref( - selectedGrid.metricTypes.includes("readLabeledMetricsValues") -); const sortOrder = ref(selectedGrid.standard.sortOrder || "DES"); function changeStandardOpt(param?: any) { diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index d6811aa8..c7915f15 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -66,6 +66,7 @@ limitations under the License. --> i: data.i, }" :standard="data.standard" + :needQuery="needQuery" />
{{ t("noData") }}
@@ -153,6 +154,7 @@ export default defineComponent({ if (props.data.i !== dashboardStore.selectedGrid.i) { return; } + const isList = ListChartTypes.includes(props.data.graph.type || ""); if ( ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) || isList @@ -165,6 +167,7 @@ export default defineComponent({ watch( () => [selectorStore.currentService, selectorStore.currentDestService], () => { + const isList = ListChartTypes.includes(props.data.graph.type || ""); if (isList) { return; } diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 4d61a90d..21a4173b 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -110,6 +110,7 @@ const props = defineProps({ default: () => ({ dashboardName: "", fontSize: 12, i: "" }), }, intervalTime: { type: Array as PropType, default: () => [] }, + needQuery: { type: Boolean, default: false }, }); const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); @@ -117,13 +118,18 @@ const chartLoading = ref(false); const endpoints = ref([]); const searchEndpoints = ref([]); const pageSize = 5; +const total = 10; const searchText = ref(""); -queryEndpoints(); - -async function queryEndpoints() { +if (props.needQuery) { + queryEndpoints(total); +} +async function queryEndpoints(limit?: number) { chartLoading.value = true; - const resp = await selectorStore.getEndpoints(); + const resp = await selectorStore.getEndpoints({ + limit, + keyword: searchText.value, + }); chartLoading.value = false; if (resp.errors) { @@ -132,7 +138,7 @@ async function queryEndpoints() { } searchEndpoints.value = selectorStore.pods; endpoints.value = selectorStore.pods.splice(0, pageSize); - if (props.config.isEdit) { + if (props.config.isEdit || !endpoints.value.length) { return; } queryEndpointMetrics(endpoints.value); @@ -177,12 +183,9 @@ function changePage(pageIndex: number) { pageSize * (pageIndex || 1) ); } -function searchList() { - const currentEndpoints = selectorStore.pods.filter((d: { label: string }) => - d.label.includes(searchText.value) - ); - searchEndpoints.value = currentEndpoints; - endpoints.value = currentEndpoints.splice(0, pageSize); +async function searchList() { + const limit = searchText.value ? undefined : total; + await queryEndpoints(limit); } watch( () => [props.config.metricTypes, props.config.metrics], @@ -193,9 +196,9 @@ watch( } ); watch( - () => [selectorStore.currentService], + () => selectorStore.currentService, () => { - queryEndpoints(); + queryEndpoints(total); } ); diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index a0fd8b89..d2280ccf 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -42,6 +42,20 @@ limitations under the License. --> + + + , default: () => [] }, + needQuery: { type: Boolean, default: false }, }); const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); @@ -122,15 +137,18 @@ const searchInstances = ref([]); // all instances const pageSize = 5; const searchText = ref(""); -queryInstance(); - +if (props.needQuery) { + queryInstance(); +} async function queryInstance() { chartLoading.value = true; const resp = await selectorStore.getServiceInstances(); chartLoading.value = false; - if (resp.errors) { + if (resp && resp.errors) { ElMessage.error(resp.errors); + searchInstances.value = []; + instances.value = []; return; } searchInstances.value = selectorStore.pods; @@ -178,6 +196,7 @@ function clickInstance(scope: any) { function changePage(pageIndex: number) { instances.value = searchInstances.value.splice(pageIndex - 1, pageSize); } + function searchList() { searchInstances.value = selectorStore.pods.filter((d: { label: string }) => d.label.includes(searchText.value) @@ -193,6 +212,12 @@ watch( } } ); +watch( + () => selectorStore.currentService, + () => { + queryInstance(); + } +); diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue index 154a42b2..36d8f50a 100644 --- a/src/views/dashboard/graphs/Table.vue +++ b/src/views/dashboard/graphs/Table.vue @@ -21,13 +21,13 @@ limitations under the License. --> :style="`width: ${nameWidth + initWidth}px`" >
- {{ config.graph.tableHeaderCol1 || t("name") }} + {{ config.tableHeaderCol1 || t("name") }}
- {{ config.graph.tableHeaderCol2 || t("value") }} + {{ config.tableHeaderCol2 || t("value") }}
, default: () => ({ showTableValues: true }), @@ -77,15 +75,15 @@ const chartTable = ref>(null); const initWidth = ref(0); const nameWidth = ref(0); const draggerName = ref>(null); -const showTableValues = ref(props.config.graph.showTableValues); +const showTableValues = ref(props.config.showTableValues || false); onMounted(() => { if (!chartTable.value) { return; } - const width = props.config.graph.showTableValues + const width = props.config.showTableValues ? chartTable.value.offsetWidth / 2 : chartTable.value.offsetWidth; - initWidth.value = props.config.graph.showTableValues + initWidth.value = props.config.showTableValues ? chartTable.value.offsetWidth / 2 : 0; nameWidth.value = width - 5; diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 6faf62e0..d2bcf284 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -72,7 +72,7 @@ limitations under the License. --> />
-
+
( EndpointRelationTools ); +const loading = ref(false); const states = reactive<{ destService: string; destPod: string; @@ -145,7 +145,6 @@ const states = reactive<{ currentDestService: "", currentDestPod: "", }); -const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000); setCurrentDashboard(); appStore.setEventStack([initSelector]); @@ -329,7 +328,13 @@ function changeMode() { ElMessage.warning(t("viewWarning")); } -function clickIcons(t: { id: string; content: string; name: string }) { +async function clickIcons(t: { id: string; content: string; name: string }) { + if (t.id === "apply") { + loading.value = true; + await dashboardStore.saveDashboard(); + loading.value = false; + return; + } if ( dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab" @@ -361,9 +366,6 @@ function setTabControls(id: string) { case "addTopology": dashboardStore.addTabControls("Topology"); break; - case "apply": - applyDashboard(); - break; default: ElMessage.info("Don't support this control"); break; @@ -390,9 +392,6 @@ function setControls(id: string) { case "addTopology": dashboardStore.addControl("Topology"); break; - case "apply": - applyDashboard(); - break; default: dashboardStore.addControl("Widget"); }