github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27: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[]; taskEndpoints: Endpoint[];
condition: { serviceId: string; endpointName: string }; condition: { serviceId: string; endpointName: string };
taskList: TaskListItem[]; taskList: TaskListItem[];
currentTask: Recordable<TaskListItem>;
segmentList: Trace[]; segmentList: Trace[];
currentSegment: Recordable<Trace>; currentSegment: Recordable<Trace>;
segmentSpans: Array<Recordable<SegmentSpan>>; segmentSpans: Array<Recordable<SegmentSpan>>;
@ -51,6 +52,7 @@ export const profileStore = defineStore({
condition: { serviceId: "", endpointName: "" }, condition: { serviceId: "", endpointName: "" },
taskList: [], taskList: [],
segmentList: [], segmentList: [],
currentTask: {},
currentSegment: {}, currentSegment: {},
segmentSpans: [], segmentSpans: [],
currentSpan: {}, currentSpan: {},
@ -65,7 +67,12 @@ export const profileStore = defineStore({
...data, ...data,
}; };
}, },
setCurrentTask(task: TaskListItem) {
this.currentTask = task || {};
},
setSegmentSpans(spans: Recordable<SegmentSpan>[]) { setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
const index = spans.length - 1 || 0;
this.currentSpan = spans[index];
this.segmentSpans = spans; this.segmentSpans = spans;
}, },
setCurrentSpan(span: Recordable<SegmentSpan>) { setCurrentSpan(span: Recordable<SegmentSpan>) {
@ -109,6 +116,7 @@ export const profileStore = defineStore({
} }
const list = res.data.data.taskList || []; const list = res.data.data.taskList || [];
this.taskList = list; this.taskList = list;
this.currentTask = list[0] || {};
if (!list.length) { if (!list.length) {
this.segmentList = []; this.segmentList = [];
this.segmentSpans = []; this.segmentSpans = [];

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

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

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

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