mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-02 22:25:24 +00:00
update task details
This commit is contained in:
Qiuxia Fan
parent
be5dc29bb7
commit
beb427f9cc
@ -106,7 +106,7 @@ export const ebpfStore = defineStore({
|
||||
}) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("newNetworkProfiling")
|
||||
.params({ request: { serviceInstanceId: param.serviceInstanceId } });
|
||||
.params({ request: { instanceId: param.serviceInstanceId } });
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
@ -137,9 +137,6 @@ export const ebpfStore = defineStore({
|
||||
this.networkTasks = res.data.data.queryEBPFTasks || [];
|
||||
this.selectedNetworkTask = this.networkTasks[0] || {};
|
||||
this.setSelectedNetworkTask(this.selectedNetworkTask);
|
||||
if (!this.networkTasks.length) {
|
||||
return res.data;
|
||||
}
|
||||
} else {
|
||||
this.tip = "";
|
||||
if (res.data.errors) {
|
||||
@ -151,8 +148,8 @@ export const ebpfStore = defineStore({
|
||||
if (!this.taskList.length) {
|
||||
return res.data;
|
||||
}
|
||||
this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
|
||||
}
|
||||
this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
|
||||
return res.data;
|
||||
},
|
||||
async getEBPFSchedules(params: { taskId: string }) {
|
||||
|
||||
82
src/views/dashboard/related/components/TaskDetails.vue
Normal file
82
src/views/dashboard/related/components/TaskDetails.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<!-- 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>
|
||||
<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>
|
||||
</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 */
|
||||
defineProps({
|
||||
details: {
|
||||
type: Object as PropType<EBPFTaskList>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const { t } = useI18n();
|
||||
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>
|
||||
@ -152,7 +152,6 @@ const keywordsOfContent = ref<string[]>([]);
|
||||
const excludingKeywordsOfContent = ref<string[]>([]);
|
||||
const contentStr = ref<string>("");
|
||||
const excludingContentStr = ref<string>("");
|
||||
// const limit = ref<number>(20);
|
||||
const state = reactive<any>({
|
||||
instance: { value: "", label: "" },
|
||||
container: { value: "", label: "" },
|
||||
|
||||
@ -79,7 +79,7 @@ limitations under the License. -->
|
||||
/>
|
||||
<el-table-column width="300" label="Attributes">
|
||||
<template #default="scope">
|
||||
{{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
|
||||
{{ attributes(scope.row.attributes) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -125,6 +125,11 @@ const aggregateType = ref<string>(AggregateTypes[0].value);
|
||||
const duration = ref<string[]>([]);
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
const attributes = (attr: { name: string; value: string }[]) => {
|
||||
return attr
|
||||
.map((d: { name: string; value: string }) => `${d.name}=${d.value}`)
|
||||
.join("; ");
|
||||
};
|
||||
|
||||
function changeLabels(opt: any[]) {
|
||||
const arr = opt.map((d) => d.value);
|
||||
|
||||
@ -67,53 +67,7 @@ limitations under the License. -->
|
||||
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.selectedTask.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.selectedTask.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.selectedTask.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.selectedTask.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.selectedTask.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.selectedTask.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.selectedTask.targetType
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TaskDetails :details="ebpfStore.selectedTask" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -123,6 +77,7 @@ import { useI18n } from "vue-i18n";
|
||||
import { useEbpfStore } from "@/store/modules/ebpf";
|
||||
import { EBPFTaskList } from "@/types/ebpf";
|
||||
import { ElMessage } from "element-plus";
|
||||
import TaskDetails from "../../components/TaskDetails.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const ebpfStore = useEbpfStore();
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
<!-- 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>
|
||||
<div class="filters">
|
||||
<el-button type="primary" size="small">
|
||||
{{ t("start") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useEbpfStore } from "@/store/modules/ebpf";
|
||||
|
||||
const { t } = useI18n();
|
||||
const ebpfStore = useEbpfStore();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filters {
|
||||
margin: 5px 0;
|
||||
width: 100%;
|
||||
min-width: 560px;
|
||||
}
|
||||
</style>
|
||||
@ -1,91 +0,0 @@
|
||||
<!-- 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>
|
||||
@ -47,13 +47,7 @@ limitations under the License. -->
|
||||
>
|
||||
<div class="ell">
|
||||
<span>
|
||||
{{
|
||||
i.targetType +
|
||||
": " +
|
||||
(i.processLabels.length
|
||||
? i.processLabels.join(" ")
|
||||
: `All Processes`)
|
||||
}}
|
||||
{{ i.targetType }}
|
||||
</span>
|
||||
<a class="profile-btn r" @click="viewDetail = true">
|
||||
<Icon iconName="view" size="middle" />
|
||||
@ -73,7 +67,14 @@ limitations under the License. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TaskDetails :details="ebpfStore.selectedNetworkTask" :show="viewDetail" />
|
||||
<el-dialog
|
||||
v-model="viewDetail"
|
||||
:destroy-on-close="true"
|
||||
fullscreen
|
||||
@closed="viewDetail = false"
|
||||
>
|
||||
<TaskDetails :details="ebpfStore.selectedNetworkTask" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
@ -83,7 +84,7 @@ import { useEbpfStore } from "@/store/modules/ebpf";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { EBPFTaskList } from "@/types/ebpf";
|
||||
import { ElMessage } from "element-plus";
|
||||
import TaskDetails from "./TaskDetails.vue";
|
||||
import TaskDetails from "../../components/TaskDetails.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user