mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 09:00:50 +00:00
update trace log
This commit is contained in:
parent
673b1a41a8
commit
0322264ef3
@ -38,6 +38,7 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { provide } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
import Header from "../related/log/Header.vue";
|
import Header from "../related/log/Header.vue";
|
||||||
@ -52,6 +53,7 @@ const props = defineProps({
|
|||||||
activeIndex: { type: String, default: "" },
|
activeIndex: { type: String, default: "" },
|
||||||
needQuery: { type: Boolean, default: true },
|
needQuery: { type: Boolean, default: true },
|
||||||
});
|
});
|
||||||
|
provide("options", props.data);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const dashboardStore = useDashboardStore();
|
const dashboardStore = useDashboardStore();
|
||||||
|
|
||||||
|
@ -39,6 +39,7 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { provide } from "vue";
|
||||||
import type { PropType } from "vue";
|
import type { PropType } from "vue";
|
||||||
import Filter from "../related/trace/Filter.vue";
|
import Filter from "../related/trace/Filter.vue";
|
||||||
import TraceList from "../related/trace/TraceList.vue";
|
import TraceList from "../related/trace/TraceList.vue";
|
||||||
@ -55,6 +56,7 @@ const props = defineProps({
|
|||||||
activeIndex: { type: String, default: "" },
|
activeIndex: { type: String, default: "" },
|
||||||
needQuery: { type: Boolean, default: true },
|
needQuery: { type: Boolean, default: true },
|
||||||
});
|
});
|
||||||
|
provide("options", props.data);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const dashboardStore = useDashboardStore();
|
const dashboardStore = useDashboardStore();
|
||||||
function removeWidget() {
|
function removeWidget() {
|
||||||
|
@ -33,33 +33,6 @@ limitations under the License. -->
|
|||||||
{{ t("viewLogs") }}
|
{{ t("viewLogs") }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog
|
|
||||||
v-model="showTraceLogs"
|
|
||||||
:destroy-on-close="true"
|
|
||||||
fullscreen
|
|
||||||
@closed="showTraceLogs = false"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<el-pagination
|
|
||||||
v-model:currentPage="pageNum"
|
|
||||||
v-model:page-size="pageSize"
|
|
||||||
:small="true"
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:pager-count="5"
|
|
||||||
:total="total"
|
|
||||||
@current-change="turnLogsPage"
|
|
||||||
/>
|
|
||||||
<LogTable
|
|
||||||
:tableData="traceStore.traceSpanLogs || []"
|
|
||||||
:type="`service`"
|
|
||||||
:noLink="true"
|
|
||||||
>
|
|
||||||
<div class="log-tips" v-if="!traceStore.traceSpanLogs.length">
|
|
||||||
{{ t("noData") }}
|
|
||||||
</div>
|
|
||||||
</LogTable>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</h5>
|
</h5>
|
||||||
<div class="mb-5 blue sm">
|
<div class="mb-5 blue sm">
|
||||||
<Selector
|
<Selector
|
||||||
@ -148,7 +121,7 @@ limitations under the License. -->
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { ref, defineComponent, computed } from "vue";
|
import { ref, defineComponent, computed, inject } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useTraceStore } from "@/store/modules/trace";
|
import { useTraceStore } from "@/store/modules/trace";
|
||||||
import { Option } from "@/types/app";
|
import { Option } from "@/types/app";
|
||||||
@ -156,6 +129,9 @@ import copy from "@/utils/copy";
|
|||||||
import graphs from "./components/index";
|
import graphs from "./components/index";
|
||||||
import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
|
import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
import getDashboard from "@/hooks/useDashboardsSession";
|
||||||
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
|
import { LayoutConfig } from "@/types/dashboard";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "TraceDetail",
|
name: "TraceDetail",
|
||||||
@ -164,6 +140,7 @@ export default defineComponent({
|
|||||||
LogTable,
|
LogTable,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
const options: LayoutConfig | undefined = inject("options");
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const traceStore = useTraceStore();
|
const traceStore = useTraceStore();
|
||||||
const loading = ref<boolean>(false);
|
const loading = ref<boolean>(false);
|
||||||
@ -171,6 +148,7 @@ export default defineComponent({
|
|||||||
const displayMode = ref<string>("List");
|
const displayMode = ref<string>("List");
|
||||||
const pageNum = ref<number>(1);
|
const pageNum = ref<number>(1);
|
||||||
const pageSize = 10;
|
const pageSize = 10;
|
||||||
|
const dashboardStore = useDashboardStore();
|
||||||
const total = computed(() =>
|
const total = computed(() =>
|
||||||
traceStore.traceList.length === pageSize
|
traceStore.traceList.length === pageSize
|
||||||
? pageSize * pageNum.value + 1
|
? pageSize * pageNum.value + 1
|
||||||
@ -195,18 +173,16 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function searchTraceLogs() {
|
async function searchTraceLogs() {
|
||||||
showTraceLogs.value = true;
|
const { widgets } = getDashboard(dashboardStore.currentDashboard);
|
||||||
const res = await traceStore.getSpanLogs({
|
const widget = widgets.filter((d: { type: string }) => d.type === "Log");
|
||||||
condition: {
|
const item = {
|
||||||
relatedTrace: {
|
...widget,
|
||||||
|
filters: {
|
||||||
|
sourceId: options?.id || "",
|
||||||
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
|
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
|
||||||
},
|
},
|
||||||
paging: { pageNum: pageNum.value, pageSize },
|
};
|
||||||
},
|
dashboardStore.setWidget(item);
|
||||||
});
|
|
||||||
if (res.errors) {
|
|
||||||
ElMessage.error(res.errors);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function turnLogsPage(page: number) {
|
function turnLogsPage(page: number) {
|
||||||
|
Loading…
Reference in New Issue
Block a user