(skywalking-booster-ui) branch main updated: feat: set a maximum 20 entities per query in service/instance/endpoint list widgets (#406)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 6b2b6a5d feat: set a maximum 20 entities per query in service/instance/endpoint list widgets (#406)
6b2b6a5d is described below

commit 6b2b6a5dd220381fae2cb91bb3963c1a9bcc2674
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Tue Jul 30 20:44:55 2024 +0800

    feat: set a maximum 20 entities per query in service/instance/endpoint list widgets (#406)
---
 src/hooks/data.ts                    |  1 +
 src/hooks/useExpressionsProcessor.ts | 65 ++++++++++++++++++++++++++----------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index f7c2b2db..abaa263c 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export const MaximumEntities = 20;
 
 export enum sizeEnum {
   XS = "XS",
diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 0a346108..8c767937 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RespFields } from "./data";
+import { RespFields, MaximumEntities } from "./data";
 import { EntityType, ExpressionResultType } from "@/views/dashboard/data";
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -156,7 +156,7 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
 }
 
 export async function useExpressionsQueryPodsMetrics(
-  pods: Array<(Instance | Endpoint | Service) & Indexable>,
+  allPods: Array<(Instance | Endpoint | Service) & Indexable>,
   config: {
     expressions: string[];
     subExpressions: string[];
@@ -164,7 +164,7 @@ export async function useExpressionsQueryPodsMetrics(
   },
   scope: string,
 ) {
-  function expressionsGraphqlPods() {
+  function expressionsGraphqlPods(pods: Array<(Instance | Endpoint | Service) & Indexable>) {
     const metrics: string[] = [];
     const subMetrics: string[] = [];
     config.expressions = config.expressions || [];
@@ -196,18 +196,22 @@ export async function useExpressionsQueryPodsMetrics(
       variables.push(`$entity${index}: Entity!`);
       conditions[`entity${index}`] = entity;
       const f = metrics.map((name: string, idx: number) => {
-        variables.push(`$expression${index}${idx}: String!`);
-        conditions[`expression${index}${idx}`] = name;
+        if (index === 0) {
+          variables.push(`$expression${idx}: String!`);
+          conditions[`expression${idx}`] = name;
+        }
         let str = "";
         if (config.subExpressions[idx]) {
-          variables.push(`$subExpression${index}${idx}: String!`);
-          conditions[`subExpression${index}${idx}`] = config.subExpressions[idx];
-          str = `subexpression${index}${idx}: execExpression(expression: $subExpression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+          if (index === 0) {
+            variables.push(`$subExpression${idx}: String!`);
+            conditions[`subExpression${idx}`] = config.subExpressions[idx];
+          }
+          str = `subexpression${index}${idx}: execExpression(expression: $subExpression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
         }
 
         return (
           str +
-          `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`
+          `expression${index}${idx}: execExpression(expression: $expression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`
         );
       });
       return f;
@@ -218,7 +222,10 @@ export async function useExpressionsQueryPodsMetrics(
     return { queryStr, conditions };
   }
 
-  function expressionsPodsSource(resp: { errors: string; data: Indexable }): Indexable {
+  function expressionsPodsSource(
+    resp: { errors: string; data: Indexable },
+    pods: Array<(Instance | Endpoint | Service) & Indexable>,
+  ): Indexable {
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return {};
@@ -300,17 +307,39 @@ export async function useExpressionsQueryPodsMetrics(
     return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
   }
 
-  const dashboardStore = useDashboardStore();
-  const params = await expressionsGraphqlPods();
-  const json = await dashboardStore.fetchMetricValue(params);
+  async function fetchPodsExpressionValues(pods: Array<(Instance | Endpoint | Service) & Indexable>) {
+    const dashboardStore = useDashboardStore();
+    const params = await expressionsGraphqlPods(pods);
 
-  if (json.errors) {
-    ElMessage.error(json.errors);
-    return {};
+    const json = await dashboardStore.fetchMetricValue(params);
+
+    if (json.errors) {
+      ElMessage.error(json.errors);
+      return {};
+    }
+    const expressionParams = expressionsPodsSource(json, pods);
+
+    return expressionParams;
   }
-  const expressionParams = expressionsPodsSource(json);
 
-  return expressionParams;
+  const result = [];
+  for (let i = 0; i < allPods.length; i += MaximumEntities) {
+    result.push(allPods.slice(i, i + MaximumEntities));
+  }
+  const promiseArr = result.map((d: Array<(Instance | Endpoint | Service) & Indexable>) =>
+    fetchPodsExpressionValues(d),
+  );
+  const responseList = await Promise.all(promiseArr);
+  let resp: Indexable = { data: [], expressionsTips: [], subExpressionsTips: [] };
+  for (const item of responseList) {
+    resp = {
+      ...item,
+      data: [...resp.data, ...item.data],
+      expressionsTips: [...resp.expressionsTips, ...item.expressionsTips],
+      subExpressionsTips: [...resp.subExpressionsTips, ...item.subExpressionsTips],
+    };
+  }
+  return resp;
 }
 
 export function useQueryTopologyExpressionsProcessor(metrics: string[], instances: (Call | Node)[]) {