You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2021/10/25 13:04:57 UTC

[skywalking-rocketbot-ui] branch master updated: feat: query task logs with task ID for viewing task details (#556)

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

qiuxiafan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new c766ad5  feat: query task logs with task ID for viewing task details  (#556)
c766ad5 is described below

commit c766ad5910f96dd596da1e1961e624603605a850
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Mon Oct 25 21:04:50 2021 +0800

    feat: query task logs with task ID for viewing task details  (#556)
    
    * feat: query profile task logs
    
    * remove intervals
    
    * fix: update data
---
 src/graph/fragments/profile.ts             | 12 ++++++++++++
 src/graph/query/profile.ts                 |  3 +++
 src/store/modules/profile/profile-store.ts | 12 ++++++++++++
 src/views/components/profile/task-list.vue | 24 ++++++++++++++----------
 src/views/containers/profile.vue           |  8 --------
 5 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/graph/fragments/profile.ts b/src/graph/fragments/profile.ts
index 7b5d247..563c412 100644
--- a/src/graph/fragments/profile.ts
+++ b/src/graph/fragments/profile.ts
@@ -110,3 +110,15 @@ export const GetProfileAnalyze = {
   }
   `,
 };
+export const GetProfileTaskLogs = {
+  variable: '$taskID: String',
+  query: `
+  getProfileTaskLogs: getProfileTaskLogs(taskID: $taskID) {
+    id
+    instanceId
+    instanceName
+    operationTime
+    operationType
+  }
+  `,
+};
diff --git a/src/graph/query/profile.ts b/src/graph/query/profile.ts
index 73665e5..91ddad7 100644
--- a/src/graph/query/profile.ts
+++ b/src/graph/query/profile.ts
@@ -21,6 +21,7 @@ import {
   GetProfileTaskList,
   GetProfileTaskSegmentList,
   GetProfileAnalyze,
+  GetProfileTaskLogs,
 } from '../fragments/profile';
 
 export const queryProfileSegment = `query queryProfileSegment(${ProfileSegment.variable}) {${ProfileSegment.query}}`;
@@ -34,3 +35,5 @@ export const getProfileTaskSegmentList = `query getProfileTaskSegmentList(${GetP
   ${GetProfileTaskSegmentList.query}}`;
 
 export const getProfileAnalyze = `query getProfileAnalyze(${GetProfileAnalyze.variable}) {${GetProfileAnalyze.query}}`;
+
+export const getProfileTaskLogs = `query profileTaskLogs(${GetProfileTaskLogs.variable}) {${GetProfileTaskLogs.query}}`;
diff --git a/src/store/modules/profile/profile-store.ts b/src/store/modules/profile/profile-store.ts
index da0813e..a9585e7 100644
--- a/src/store/modules/profile/profile-store.ts
+++ b/src/store/modules/profile/profile-store.ts
@@ -272,6 +272,18 @@ const actions = {
         return res.data.data.createTask;
       });
   },
+  GET_TASK_LOGS(context: { commit: Commit; state: State; dispatch: Dispatch }, param: { taskID: string }) {
+    return graph
+      .query('getProfileTaskLogs')
+      .params(param)
+      .then((res: AxiosResponse) => {
+        context.commit(types.SET_PROFILE_ERRORS, { msg: 'getProfileTaskLogs', desc: res.data.errors || '' });
+        if (res.data.errors) {
+          return;
+        }
+        return res.data.data.getProfileTaskLogs;
+      });
+  },
 };
 
 export default {
diff --git a/src/views/components/profile/task-list.vue b/src/views/components/profile/task-list.vue
index 82abbd6..0c32f9a 100644
--- a/src/views/components/profile/task-list.vue
+++ b/src/views/components/profile/task-list.vue
@@ -137,6 +137,7 @@ limitations under the License. -->
     @Mutation('profileStore/SET_CURRENT_SEGMENT') private SET_CURRENT_SEGMENT: any;
     @Action('profileStore/GET_SEGMENT_LIST') private GET_SEGMENT_LIST: any;
     @Action('profileStore/GET_SEGMENT_SPANS') private GET_SEGMENT_SPANS: any;
+    @Action('profileStore/GET_TASK_LOGS') private GET_TASK_LOGS: any;
     private selectedKey: string = '';
     private selectedTask: TaskListItem | {} = {};
     private viewDetail: boolean = false;
@@ -150,18 +151,21 @@ limitations under the License. -->
       this.GET_SEGMENT_LIST({ taskID: item.id });
     }
 
-    private viewTask(e: Event, item: any) {
-      this.viewDetail = true;
+    private viewTask(e: Event, item: { id: string; serviceId: string; logs: TaskLog[] }) {
       window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
-      this.instanceLogs = {};
-      for (const d of item.logs) {
-        if (this.instanceLogs[d.instanceName]) {
-          this.instanceLogs[d.instanceName].push({ operationType: d.operationType, operationTime: d.operationTime });
-        } else {
-          this.instanceLogs[d.instanceName] = [{ operationType: d.operationType, operationTime: d.operationTime }];
+      this.viewDetail = true;
+      this.GET_TASK_LOGS({ taskID: item.id }).then((logs: TaskLog[]) => {
+        item.logs = logs;
+        this.instanceLogs = {};
+        for (const d of item.logs) {
+          if (this.instanceLogs[d.instanceName]) {
+            this.instanceLogs[d.instanceName].push({ operationType: d.operationType, operationTime: d.operationTime });
+          } else {
+            this.instanceLogs[d.instanceName] = [{ operationType: d.operationType, operationTime: d.operationTime }];
+          }
         }
-      }
-      this.selectedTask = item;
+        this.selectedTask = item;
+      });
     }
 
     private selectTrace(item: { segmentId: string }) {
diff --git a/src/views/containers/profile.vue b/src/views/containers/profile.vue
index f33a9f0..1461475 100644
--- a/src/views/containers/profile.vue
+++ b/src/views/containers/profile.vue
@@ -54,23 +54,15 @@ limitations under the License. -->
     @Action('profileStore/GET_SERVICES') private GET_SERVICES: any;
     @Mutation('SET_EVENTS') private SET_EVENTS: any;
 
-    private interval: any;
-
     private beforeMount() {
       this.SET_EVENTS([
         () => {
           this.GET_SERVICES({ duration: this.durationTime });
         },
       ]);
-      this.interval = setInterval(() => {
-        this.GET_SERVICES({
-          duration: this.durationTime,
-        });
-      }, 20000);
     }
     private beforeDestroy() {
       this.SET_EVENTS([]);
-      clearInterval(this.interval);
     }
   }
 </script>