feat: optimize profile functions (#551)
diff --git a/src/types/profile.d.ts b/src/types/profile.d.ts
index 37b4fec..e1e60e3 100644
--- a/src/types/profile.d.ts
+++ b/src/types/profile.d.ts
@@ -55,3 +55,23 @@
currentService: IOption;
endpointName: string;
}
+
+export interface TaskListItem {
+ dumpPeriod?: number;
+ duration?: number;
+ endpointName?: string;
+ id: string;
+ logs: TaskLog[];
+ maxSamplingCount?: number;
+ minDurationThreshold?: number;
+ serviceId?: string;
+ startTime?: number;
+}
+
+export interface TaskLog {
+ id: string;
+ instanceId: string;
+ instanceName: string;
+ operationTime: number;
+ operationType: string;
+}
diff --git a/src/views/components/profile/profile-header.vue b/src/views/components/profile/profile-header.vue
index 3506de0..1756af8 100644
--- a/src/views/components/profile/profile-header.vue
+++ b/src/views/components/profile/profile-header.vue
@@ -46,7 +46,6 @@
</template>
<script lang="ts">
- import { Duration, Option } from '@/types/global';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Mutation, Action } from 'vuex-class';
import { CommonSelector } from '../common/index';
diff --git a/src/views/components/profile/task-list.vue b/src/views/components/profile/task-list.vue
index e68fe12..5b9b446 100644
--- a/src/views/components/profile/task-list.vue
+++ b/src/views/components/profile/task-list.vue
@@ -74,19 +74,17 @@
<span class="g-sm-4 grey">{{ $t('maxSamplingCount') }}:</span>
<span class="g-sm-8 wba">{{ selectedTask.maxSamplingCount }}</span>
</div>
- <h5 class="mb-10" v-if="selectedTask.logs" v-show="selectedTask.logs.length">{{ $t('logs') }}.</h5>
- <div class="log-item" v-for="(i, index) in selectedTask.logs" :key="index">
+ <h5 class="mb-10" v-show="selectedTask.logs && selectedTask.logs.length">{{ $t('logs') }}.</h5>
+ <div class="log-item" v-for="(i, index) in Object.keys(instanceLogs)" :key="index">
<div class="mb-10 sm">
<span class="mr-10 grey">{{ $t('instance') }}:</span>
- <span>{{ i.instanceName }}</span>
+ <span>{{ i }}</span>
</div>
- <div class="mb-10 sm">
+ <div v-for="(d, index) in instanceLogs[i]" :key="index">
<span class="mr-10 grey">{{ $t('operationType') }}:</span>
- <span>{{ i.operationType }}</span>
- </div>
- <div class="mb-10 sm">
- <span class="mr-10 grey">{{ $t('operationTime') }}:</span>
- <span>{{ i.operationTime | dateformat }}</span>
+ <span class="mr-20">{{ d.operationType }}</span>
+ <span class="mr-10 grey">{{ $t('time') }}:</span>
+ <span>{{ d.operationTime | dateformat }}</span>
</div>
</div>
</div>
@@ -129,6 +127,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Action, Mutation } from 'vuex-class';
+ import { TaskLog, TaskListItem } from '@/types/profile';
@Component
export default class ProfileTaskList extends Vue {
@@ -139,12 +138,20 @@
@Action('profileStore/GET_SEGMENT_LIST') private GET_SEGMENT_LIST: any;
@Action('profileStore/GET_SEGMENT_SPANS') private GET_SEGMENT_SPANS: any;
private selectedKey: string = '';
- private selectedTask: any = {};
+ private selectedTask: TaskListItem | {} = {};
private viewDetail: boolean = false;
private selectedTaskService: any = {};
+ private instanceLogs: TaskLog | any = {};
- private selectTask(item: { id: string; serviceId: string }) {
+ private selectTask(item: { id: string; serviceId: string; logs: TaskLog[] }) {
this.selectedTask = item;
+ 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.selectedTaskService =
this.headerSource.serviceSource.filter((service: any) => service.key === item.serviceId)[0] || {};
this.GET_SEGMENT_LIST({ taskID: item.id });
diff --git a/src/views/components/trace/trace-detail-chart-list.vue b/src/views/components/trace/trace-detail-chart-list.vue
index d540cd3..a9fc16e 100644
--- a/src/views/components/trace/trace-detail-chart-list.vue
+++ b/src/views/components/trace/trace-detail-chart-list.vue
@@ -340,12 +340,4 @@
overflow: auto;
font-family: monospace;
}
- .rk-popup-btn {
- color: #fff;
- padding: 10px 9px;
- border-radius: 4px;
- margin-top: 40px;
- width: 100%;
- text-align: center;
- }
</style>
diff --git a/src/views/components/trace/trace-span-logs.vue b/src/views/components/trace/trace-span-logs.vue
index 6fc3549..97df2af 100644
--- a/src/views/components/trace/trace-span-logs.vue
+++ b/src/views/components/trace/trace-span-logs.vue
@@ -153,3 +153,13 @@
}
}
</script>
+<style lang="scss" scoped>
+ .rk-popup-btn {
+ color: #fff;
+ padding: 10px 9px;
+ border-radius: 4px;
+ margin-top: 40px;
+ width: 100%;
+ text-align: center;
+ }
+</style>
diff --git a/src/views/containers/profile.vue b/src/views/containers/profile.vue
index c032ed7..51d27d6 100644
--- a/src/views/containers/profile.vue
+++ b/src/views/containers/profile.vue
@@ -39,7 +39,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
- import { State, Getter } from 'vuex-class';
+ import { State, Getter, Action, Mutation } from 'vuex-class';
import { State as profileState } from '@/store/modules/profile/profile-store';
import ProfileHeader from '@/views/components/profile/profile-header.vue';
import ProfileTaskList from '@/views/components/profile/task-list.vue';
@@ -51,11 +51,29 @@
export default class Profile extends Vue {
@State('profileStore') private profile!: profileState;
@Getter('durationTime') private durationTime: any;
+ @Action('profileStore/GET_SERVICES') private GET_SERVICES: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+
+ private interval: any;
private beforeMount() {
- this.$store.dispatch('profileStore/GET_SERVICES', {
+ this.GET_SERVICES({
duration: this.durationTime,
});
+ this.SET_EVENTS([
+ () => {
+ this.GET_SERVICES({ duration: this.durationTime });
+ },
+ ]);
+ this.interval = setInterval(() => {
+ this.GET_SERVICES({
+ duration: this.durationTime,
+ });
+ }, 300000);
+ }
+ private beforeDestroy() {
+ this.SET_EVENTS([]);
+ clearInterval(this.interval);
}
}
</script>
