From 61d182b986681f09b3f9fce8af698165f4403450 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Tue, 29 Mar 2022 19:20:16 +0800 Subject: [PATCH] fix: update pagination for service list, endpoint list, instance list and add legend configs (#45) --- src/hooks/useProcessor.ts | 2 +- src/store/modules/dashboard.ts | 11 ++--- src/types/dashboard.ts | 1 + src/views/dashboard/configuration/Widget.vue | 4 +- .../widget/graph-styles/TopList.vue | 38 ++++++++++------ .../configuration/widget/metric/Index.vue | 1 - .../configuration/widget/metric/Standard.vue | 40 +++++++++++++---- src/views/dashboard/data.ts | 2 + src/views/dashboard/graphs/EndpointList.vue | 29 ++++++------ src/views/dashboard/graphs/InstanceList.vue | 25 +++++++---- src/views/dashboard/graphs/ServiceList.vue | 45 ++++++++++++------- src/views/dashboard/graphs/TopList.vue | 39 ++++------------ .../related/topology/components/Graph.vue | 7 ++- .../related/topology/components/Settings.vue | 23 +++++++++- .../related/topology/utils/legend.ts | 17 +++---- .../related/topology/utils/nodeElement.ts | 5 +-- 16 files changed, 168 insertions(+), 121 deletions(-) diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index 8a646336..e928b300 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -66,7 +66,7 @@ export function useQueryProcessor(config: any) { ? selectorStore.currentService.normal : true, scope: config.catalog || dashboardStore.entity, - topN: 10, + topN: c.topN || 10, order: c.sortOrder || "DES", }; } else { diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index c498adaf..93df9a64 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -217,12 +217,10 @@ export const dashboardStore = defineStore({ } if (actived.length === 3) { const tabIndex = Number(actived[1]); - const itemIndex = this.layout[index].children[ - tabIndex - ].children.findIndex((d: LayoutConfig) => actived[2] === d.i); - - this.layout[index].children[tabIndex].children.splice(itemIndex, 1); - this.setCurrentTabItems(this.layout[index].children[tabIndex].children); + this.currentTabItems = this.currentTabItems.filter( + (d: LayoutConfig) => actived[2] !== d.i + ); + this.layout[index].children[tabIndex].children = this.currentTabItems; return; } this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i); @@ -260,7 +258,6 @@ export const dashboardStore = defineStore({ const index = this.layout.findIndex( (d: LayoutConfig) => actived[0] === d.i ); - if (actived.length === 3) { const tabIndex = Number(actived[1]); const itemIndex = this.layout[index].children[ diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index 3a1fe7e1..fc56a4d1 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -45,6 +45,7 @@ export type MetricConfigOpt = { calculation: string; labelsIndex: string; sortOrder: string; + topN?: number; }; export interface WidgetConfig { diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index f10981b7..13239a6e 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -16,9 +16,9 @@ limitations under the License. -->
- {{ dashboardStore.selectedGrid.widget.title }} + {{ dashboardStore.selectedGrid.widget.title || "" }}
- +
diff --git a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue index 6c315ba2..27f7a94f 100644 --- a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue +++ b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue @@ -13,17 +13,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> @@ -35,14 +33,24 @@ import { useDashboardStore } from "@/store/modules/dashboard"; const { t } = useI18n(); const dashboardStore = useDashboardStore(); const { selectedGrid } = dashboardStore; -const topN = ref(selectedGrid.graph.topN); +const color = ref(selectedGrid.graph.color || "purple"); +const Colors = [ + { label: "Purple", value: "purple" }, + { + label: "Green", + value: "green", + }, + { label: "Blue", value: "blue" }, + { label: "Red", value: "red" }, + { label: "Orange", value: "orange" }, +]; function updateConfig(param: { [key: string]: unknown }) { const graph = { - ...selectedGrid.graph, + ...dashboardStore.selectedGrid.graph, ...param, }; - dashboardStore.selectWidget({ ...selectedGrid, graph }); + dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph }); } diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 6d5724ce..adad7438 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -410,7 +410,6 @@ function deleteMetric(index: number) { ...{ metricTypes: states.metricTypes, metrics: states.metrics }, metricConfig, }); - console.log(dashboardStore.selectedGrid); } function setMetricTypeList(type: string) { if (type !== MetricsType.REGULAR_VALUE) { diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue index 499fd59a..6f873d8d 100644 --- a/src/views/dashboard/configuration/widget/metric/Standard.vue +++ b/src/views/dashboard/configuration/widget/metric/Standard.vue @@ -56,10 +56,7 @@ limitations under the License. --> :clearable="true" />
-
+
{{ t("sortOrder") }} @change="changeConfigs(index, { sortOrder: $event })" />
+
+ {{ t("maxItemNum") }} + +
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 4e89cae9..9c579027 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -77,6 +77,7 @@ export const DefaultGraphConfig: { [key: string]: any } = { }, TopList: { type: "TopList", + color: "purple", }, InstanceList: { type: "InstanceList", @@ -263,6 +264,7 @@ export const TextColors: { [key: string]: string } = { white: "#fff", black: "#000", orange: "#E6A23C", + purple: "#bf99f8", }; export const CalculationOpts = [ diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index f96484fd..fe08b8e0 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -117,16 +117,14 @@ const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const chartLoading = ref(false); const endpoints = ref([]); -const pageSize = 15; -const total = 15; +const pageSize = 10; const searchText = ref(""); -queryEndpoints(total); +queryEndpoints(); -async function queryEndpoints(limit?: number) { +async function queryEndpoints() { chartLoading.value = true; const resp = await selectorStore.getEndpoints({ - limit, keyword: searchText.value, }); @@ -135,8 +133,10 @@ async function queryEndpoints(limit?: number) { ElMessage.error(resp.errors); return; } - endpoints.value = selectorStore.pods.splice(0, pageSize); - await queryEndpointMetrics(endpoints.value); + endpoints.value = selectorStore.pods.filter( + (d: unknown, index: number) => index < pageSize + ); + queryEndpointMetrics(endpoints.value); } async function queryEndpointMetrics(currentPods: Endpoint[]) { if (!currentPods.length) { @@ -181,14 +181,15 @@ function clickEndpoint(scope: any) { ); } function changePage(pageIndex: number) { - endpoints.value = selectorStore.pods.splice( - (pageIndex - 1 || 0) * pageSize, - pageSize * (pageIndex || 1) - ); + endpoints.value = selectorStore.pods.filter((d: unknown, index: number) => { + if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) { + return d; + } + }); + queryEndpointMetrics(endpoints.value); } async function searchList() { - const limit = searchText.value ? undefined : total; - await queryEndpoints(limit); + await queryEndpoints(); } function getUnit(index: number) { const u = @@ -211,7 +212,7 @@ watch( watch( () => selectorStore.currentService, () => { - queryEndpoints(total); + queryEndpoints(); } ); diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index 71511287..ff608a63 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -90,7 +90,7 @@ limitations under the License. --> small layout="prev, pager, next" :page-size="pageSize" - :total="searchInstances.length" + :total="selectorStore.pods.length" @current-change="changePage" @prev-click="changePage" @next-click="changePage" @@ -142,8 +142,7 @@ const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const chartLoading = ref(false); const instances = ref([]); // current instances -const searchInstances = ref([]); // all instances -const pageSize = 15; +const pageSize = 10; const searchText = ref(""); queryInstance(); @@ -154,12 +153,12 @@ async function queryInstance() { chartLoading.value = false; if (resp && resp.errors) { ElMessage.error(resp.errors); - searchInstances.value = []; instances.value = []; return; } - searchInstances.value = selectorStore.pods; - instances.value = searchInstances.value.splice(0, pageSize); + instances.value = selectorStore.pods.filter( + (d: unknown, index: number) => index < pageSize + ); queryInstanceMetrics(instances.value); } @@ -209,14 +208,22 @@ function clickInstance(scope: any) { } function changePage(pageIndex: number) { - instances.value = searchInstances.value.splice(pageIndex - 1, pageSize); + instances.value = selectorStore.pods.filter((d: unknown, index: number) => { + if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) { + return d; + } + }); + queryInstanceMetrics(instances.value); } function searchList() { - searchInstances.value = selectorStore.pods.filter((d: { label: string }) => + const searchInstances = selectorStore.pods.filter((d: { label: string }) => d.label.includes(searchText.value) ); - instances.value = searchInstances.value.splice(0, pageSize); + instances.value = searchInstances.filter( + (d: unknown, index: number) => index < pageSize + ); + queryInstanceMetrics(instances.value); } function getUnit(index: number) { diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue index 5b561dfd..7bcac745 100644 --- a/src/views/dashboard/graphs/ServiceList.vue +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -128,7 +128,7 @@ const props = defineProps({ const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const chartLoading = ref(false); -const pageSize = 15; +const pageSize = 10; const services = ref([]); const searchText = ref(""); const groups = ref({}); @@ -144,8 +144,21 @@ async function queryServices() { if (resp.errors) { ElMessage.error(resp.errors); } - setServices(selectorStore.services); - queryServiceMetrics(services.value); + sortServices.value = selectorStore.services.sort((a: any, b: any) => { + const groupA = a.group.toUpperCase(); + const groupB = b.group.toUpperCase(); + if (groupA < groupB) { + return -1; + } + if (groupA > groupB) { + return 1; + } + return 0; + }); + const s = sortServices.value.filter( + (d: Service, index: number) => index < pageSize + ); + setServices(s); } function setServices(arr: (Service & { merge: boolean })[]) { @@ -164,23 +177,19 @@ function setServices(arr: (Service & { merge: boolean })[]) { }, {} ); - sortServices.value = Object.values(map).flat(1); + const list = Object.values(map).flat(1); const obj = {} as any; - for (const s of sortServices.value) { + for (const s of list) { s.group = s.group || ""; if (!obj[s.group]) { obj[s.group] = 1; } else { - if (obj[s.group] % 5 === 0) { - s.merge = false; - } obj[s.group]++; } groups.value[s.group] = obj[s.group]; } - services.value = sortServices.value.filter( - (d: Service, index: number) => index < pageSize - ); + services.value = list; + queryServiceMetrics(services.value); } function clickService(scope: any) { @@ -240,20 +249,22 @@ function objectSpanMethod(param: any): any { return { rowspan: groups.value[param.row.group], colspan: 1 }; } function changePage(pageIndex: number) { - services.value = sortServices.value.filter((d: Service, index: number) => { - if ( - index >= (pageIndex - 1 || 0) * pageSize && - index < pageSize * (pageIndex || 1) - ) { + const arr = sortServices.value.filter((d: Service, index: number) => { + if (index >= (pageIndex - 1) * pageSize && index < pageSize * pageIndex) { return d; } }); + + setServices(arr); } function searchList() { const searchServices = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value) ); - services.value = searchServices.splice(0, pageSize); + const services = searchServices.filter( + (d: unknown, index: number) => index < pageSize + ); + setServices(services); } function getUnit(index: number) { const u = diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue index d22a5773..0b2fc18e 100644 --- a/src/views/dashboard/graphs/TopList.vue +++ b/src/views/dashboard/graphs/TopList.vue @@ -15,12 +15,12 @@ limitations under the License. -->