mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 09:00:50 +00:00
update task details
This commit is contained in:
Qiuxia Fan
parent
93b76e7762
commit
be5dc29bb7
@ -145,7 +145,7 @@ import { ErrorCategory } from "./data";
|
|||||||
import { LayoutConfig } from "@/types/dashboard";
|
import { LayoutConfig } from "@/types/dashboard";
|
||||||
import { DurationTime } from "@/types/app";
|
import { DurationTime } from "@/types/app";
|
||||||
|
|
||||||
/*global defineProps, Recordable */
|
/*global defineProps, Recordable */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
needQuery: { type: Boolean, default: true },
|
needQuery: { type: Boolean, default: true },
|
||||||
data: {
|
data: {
|
||||||
|
|||||||
@ -0,0 +1,91 @@
|
|||||||
|
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
contributor license agreements. See the NOTICE file distributed with
|
||||||
|
this work for additional information regarding copyright ownership.
|
||||||
|
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
(the "License"); you may not use this file except in compliance with
|
||||||
|
the License. You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License. -->
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="viewDetail"
|
||||||
|
:destroy-on-close="true"
|
||||||
|
fullscreen
|
||||||
|
@closed="viewDetail = false"
|
||||||
|
>
|
||||||
|
<div class="profile-detail flex-v">
|
||||||
|
<div>
|
||||||
|
<h5 class="mb-10">{{ t("task") }}.</h5>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("taskId") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">
|
||||||
|
{{ details.taskId }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("service") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">
|
||||||
|
{{ details.serviceName }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("labels") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">
|
||||||
|
{{ details.processLabels.join(";") }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">
|
||||||
|
{{ dateFormat(details.taskStartTime) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">
|
||||||
|
{{ details.fixedTriggerDuration / 60 }} min
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">{{ details.triggerType }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="mb-10 clear item">
|
||||||
|
<span class="g-sm-4 grey">{{ t("targetType") }}:</span>
|
||||||
|
<span class="g-sm-8 wba">{{ details.targetType }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { PropType } from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { EBPFTaskList } from "@/types/ebpf";
|
||||||
|
|
||||||
|
/*global defineProps */
|
||||||
|
const props = defineProps({
|
||||||
|
show: { type: Boolean, default: false },
|
||||||
|
details: {
|
||||||
|
type: Object as PropType<EBPFTaskList>,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { t } = useI18n();
|
||||||
|
const viewDetail = ref<boolean>(props.show);
|
||||||
|
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||||
|
dayjs(date).format(pattern);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item span {
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -73,60 +73,7 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog
|
<TaskDetails :details="ebpfStore.selectedNetworkTask" :show="viewDetail" />
|
||||||
v-model="viewDetail"
|
|
||||||
:destroy-on-close="true"
|
|
||||||
fullscreen
|
|
||||||
@closed="viewDetail = false"
|
|
||||||
>
|
|
||||||
<div class="profile-detail flex-v">
|
|
||||||
<div>
|
|
||||||
<h5 class="mb-10">{{ t("task") }}.</h5>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("taskId") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">
|
|
||||||
{{ ebpfStore.selectedNetworkTask.taskId }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("service") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">{{
|
|
||||||
ebpfStore.selectedNetworkTask.serviceName
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("labels") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">
|
|
||||||
{{ ebpfStore.selectedNetworkTask.processLabels.join(";") }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">
|
|
||||||
{{ dateFormat(ebpfStore.selectedNetworkTask.taskStartTime) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">
|
|
||||||
{{ ebpfStore.selectedNetworkTask.fixedTriggerDuration / 60 }} min
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">{{
|
|
||||||
ebpfStore.selectedNetworkTask.triggerType
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="mb-10 clear item">
|
|
||||||
<span class="g-sm-4 grey">{{ t("targetType") }}:</span>
|
|
||||||
<span class="g-sm-8 wba">{{
|
|
||||||
ebpfStore.selectedNetworkTask.targetType
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
@ -136,6 +83,7 @@ import { useEbpfStore } from "@/store/modules/ebpf";
|
|||||||
import { useSelectorStore } from "@/store/modules/selectors";
|
import { useSelectorStore } from "@/store/modules/selectors";
|
||||||
import { EBPFTaskList } from "@/types/ebpf";
|
import { EBPFTaskList } from "@/types/ebpf";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
import TaskDetails from "./TaskDetails.vue";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const selectorStore = useSelectorStore();
|
const selectorStore = useSelectorStore();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user