github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update

Browse Source
This commit is contained in:
Fine 2023-03-28 18:32:54 +08:00
parent c978da610b
commit dff3a05c35
3 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/store/modules/profile.ts
View File

@ -34,6 +34,7 @@ interface ProfileState {
taskEndpoints: Endpoint[];
condition: { serviceId: string; endpointName: string };
taskList: TaskListItem[];
currentTask: Recordable<TaskListItem>;
segmentList: Trace[];
currentSegment: Recordable<Trace>;
segmentSpans: Array<Recordable<SegmentSpan>>;
@ -51,6 +52,7 @@ export const profileStore = defineStore({
condition: { serviceId: "", endpointName: "" },
taskList: [],
segmentList: [],
currentTask: {},
currentSegment: {},
segmentSpans: [],
currentSpan: {},
@ -65,7 +67,12 @@ export const profileStore = defineStore({
...data,
};
},
setCurrentTask(task: TaskListItem) {
this.currentTask = task || {};
},
setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
const index = spans.length - 1 || 0;
this.currentSpan = spans[index];
this.segmentSpans = spans;
},
setCurrentSpan(span: Recordable<SegmentSpan>) {
@ -109,6 +116,7 @@ export const profileStore = defineStore({
}
const list = res.data.data.taskList || [];
this.taskList = list;
this.currentTask = list[0] || {};
if (!list.length) {
this.segmentList = [];
this.segmentSpans = [];

7
src/views/dashboard/related/profile/components/SegmentList.vue
View File

@ -24,7 +24,7 @@ limitations under the License. -->
<td
class="profile-td"
:class="{
selected: selectedKey === i.segmentId,
selected: key === i.spans[0].segmentId,
}"
>
<div
@ -47,7 +47,7 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useProfileStore } from "@/store/modules/profile";
import type { Trace } from "@/types/trace";
@ -55,11 +55,10 @@ limitations under the License. -->
const { t } = useI18n();
const profileStore = useProfileStore();
const selectedKey = ref<string>(profileStore.currentSegment && profileStore.currentSegment.segmentId);
const key = computed(() => (profileStore.currentSpan && profileStore.currentSpan.segmentId) || "");
async function selectTrace(item: Trace) {
profileStore.setCurrentSegment(item);
selectedKey.value = item.segmentId;
profileStore.setSegmentSpans(item.spans);
}
</script>

28
src/views/dashboard/related/profile/components/TaskList.vue
View File

@ -25,7 +25,7 @@ limitations under the License. -->
<td
class="profile-td"
:class="{
selected: selectedTask.id === i.id,
selected: profileStore.currentTask && profileStore.currentTask.id === i.id,
}"
>
<div class="ell">
@ -49,7 +49,7 @@ limitations under the License. -->
</div>
</div>
<el-dialog v-model="viewDetail" :destroy-on-close="true" fullscreen @closed="viewDetail = false">
<div class="profile-detail flex-v">
<div class="profile-detail flex-v" v-if="profileStore.currentTask">
<div>
<h5 class="mb-10">{{ t("task") }}.</h5>
<div class="mb-10 clear item">
@ -58,33 +58,35 @@ limitations under the License. -->
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
<span class="g-sm-8 wba">{{ selectedTask.endpointName }}</span>
<span class="g-sm-8 wba">{{ profileStore.currentTask.endpointName }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
<span class="g-sm-8 wba">
{{ dateFormat(selectedTask.startTime) }}
{{ dateFormat(profileStore.currentTask.startTime) }}
</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span
><span class="g-sm-8 wba">{{ selectedTask.duration }} min</span>
><span class="g-sm-8 wba">{{ profileStore.currentTask.duration }} min</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("minThreshold") }}:</span>
<span class="g-sm-8 wba"> {{ selectedTask.minDurationThreshold }} ms </span>
<span class="g-sm-8 wba"> {{ profileStore.currentTask.minDurationThreshold }} ms </span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("dumpPeriod") }}:</span>
<span class="g-sm-8 wba">{{ selectedTask.dumpPeriod }}</span>
<span class="g-sm-8 wba">{{ profileStore.currentTask.dumpPeriod }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("maxSamplingCount") }}:</span>
<span class="g-sm-8 wba">{{ selectedTask.maxSamplingCount }}</span>
<span class="g-sm-8 wba">{{ profileStore.currentTask.maxSamplingCount }}</span>
</div>
</div>
<div>
<h5 class="mb-10 mt-10" v-show="selectedTask.logs && selectedTask.logs.length"> {{ t("logs") }}. </h5>
<h5 class="mb-10 mt-10" v-show="profileStore.currentTask.logs && profileStore.currentTask.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>
@ -115,12 +117,12 @@ limitations under the License. -->
const selectorStore = useSelectorStore();
const viewDetail = ref<boolean>(false);
const service = ref<string>("");
const selectedTask = ref<TaskListItem | Record<string, never>>(profileStore.taskList[0] || {});
// const selectedTask = ref<TaskListItem | Record<string, never>>({});
const instanceLogs = ref<TaskLog | any>({});
async function changeTask(item: TaskListItem) {
profileStore.setCurrentSegment({});
selectedTask.value = item;
profileStore.setCurrentTask(item);
const res = await profileStore.getSegmentList({ taskID: item.id });
if (res.errors) {
ElMessage.error(res.errors);
@ -130,7 +132,7 @@ limitations under the License. -->
async function viewTask(e: Event, item: TaskListItem) {
window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
viewDetail.value = true;
selectedTask.value = item;
profileStore.setCurrentTask(item);
service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label;
const res = await profileStore.getTaskLogs({ taskID: item.id });
@ -150,7 +152,7 @@ limitations under the License. -->
instanceLogs.value[d.instanceName] = [{ operationType: d.operationType, operationTime: d.operationTime }];
}
}
selectedTask.value = item;
profileStore.setCurrentTask(item);
}
</script>
<style lang="scss" scoped>