mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-16 13:19:29 +00:00
build: migrate the build tool from vue-cli to vite4 (#208)
This commit is contained in:
Fine0830
@@ -12,19 +12,11 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="trace-detail" v-loading="loading">
|
||||
<div
|
||||
class="trace-detail-wrapper clear"
|
||||
v-if="traceStore.currentTrace.endpointNames"
|
||||
>
|
||||
<div class="trace-detail-wrapper clear" v-if="traceStore.currentTrace.endpointNames">
|
||||
<h5 class="mb-5 mt-0">
|
||||
<span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
|
||||
<div class="trace-log-btn">
|
||||
<el-button
|
||||
size="small"
|
||||
class="mr-10"
|
||||
type="primary"
|
||||
@click="searchTraceLogs"
|
||||
>
|
||||
<el-button size="small" class="mr-10" type="primary" @click="searchTraceLogs">
|
||||
{{ t("viewLogs") }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -50,28 +42,16 @@ limitations under the License. -->
|
||||
{{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
|
||||
</span>
|
||||
<div class="tag mr-5">{{ t("duration") }}</div>
|
||||
<span class="mr-15 sm"
|
||||
>{{ traceStore.currentTrace.duration }} ms</span
|
||||
>
|
||||
<span class="mr-15 sm">{{ traceStore.currentTrace.duration }} ms</span>
|
||||
<div class="tag mr-5">{{ t("spans") }}</div>
|
||||
<span class="sm">{{ traceStore.traceSpans.length }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
class="grey"
|
||||
size="small"
|
||||
:class="{ ghost: displayMode !== 'List' }"
|
||||
@click="displayMode = 'List'"
|
||||
>
|
||||
<el-button class="grey" size="small" :class="{ ghost: displayMode !== 'List' }" @click="displayMode = 'List'">
|
||||
<Icon class="mr-5" size="sm" iconName="list-bulleted" />
|
||||
{{ t("list") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="grey"
|
||||
size="small"
|
||||
:class="{ ghost: displayMode !== 'Tree' }"
|
||||
@click="displayMode = 'Tree'"
|
||||
>
|
||||
<el-button class="grey" size="small" :class="{ ghost: displayMode !== 'Tree' }" @click="displayMode = 'Tree'">
|
||||
<Icon class="mr-5" size="sm" iconName="issue-child" />
|
||||
{{ t("tree") }}
|
||||
</el-button>
|
||||
@@ -110,133 +90,133 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, inject } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
import { Option } from "@/types/app";
|
||||
import copy from "@/utils/copy";
|
||||
import graphs from "./components/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import { dateFormat } from "@/utils/dateFormat";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ref, defineComponent, inject } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
import type { Option } from "@/types/app";
|
||||
import copy from "@/utils/copy";
|
||||
import graphs from "./components/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
import { dateFormat } from "@/utils/dateFormat";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
export default defineComponent({
|
||||
name: "TraceDetail",
|
||||
components: {
|
||||
...graphs,
|
||||
},
|
||||
setup() {
|
||||
const appStore = useAppStoreWithOut();
|
||||
/*global Recordable */
|
||||
const options: Recordable<LayoutConfig> = inject("options") || {};
|
||||
const { t } = useI18n();
|
||||
const traceStore = useTraceStore();
|
||||
const loading = ref<boolean>(false);
|
||||
const traceId = ref<string>("");
|
||||
const displayMode = ref<string>("List");
|
||||
export default defineComponent({
|
||||
name: "TraceDetail",
|
||||
components: {
|
||||
...graphs,
|
||||
},
|
||||
setup() {
|
||||
const appStore = useAppStoreWithOut();
|
||||
/*global Recordable */
|
||||
const options: Recordable<LayoutConfig> = inject("options") || {};
|
||||
const { t } = useI18n();
|
||||
const traceStore = useTraceStore();
|
||||
const loading = ref<boolean>(false);
|
||||
const traceId = ref<string>("");
|
||||
const displayMode = ref<string>("List");
|
||||
|
||||
function handleClick() {
|
||||
copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
|
||||
}
|
||||
|
||||
async function changeTraceId(opt: Option[] | any) {
|
||||
traceId.value = opt[0].value;
|
||||
loading.value = true;
|
||||
const res = await traceStore.getTraceSpans({ traceId: opt[0].value });
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
function handleClick() {
|
||||
copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function searchTraceLogs() {
|
||||
const { associationWidget } = getDashboard();
|
||||
associationWidget(
|
||||
(options.id as any) || "",
|
||||
{
|
||||
sourceId: options?.id || "",
|
||||
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
|
||||
},
|
||||
"Log"
|
||||
);
|
||||
}
|
||||
return {
|
||||
traceStore,
|
||||
displayMode,
|
||||
dateFormat,
|
||||
changeTraceId,
|
||||
handleClick,
|
||||
t,
|
||||
searchTraceLogs,
|
||||
appStore,
|
||||
loading,
|
||||
traceId,
|
||||
};
|
||||
},
|
||||
});
|
||||
async function changeTraceId(opt: Option[] | any) {
|
||||
traceId.value = opt[0].value;
|
||||
loading.value = true;
|
||||
const res = await traceStore.getTraceSpans({ traceId: opt[0].value });
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function searchTraceLogs() {
|
||||
const { associationWidget } = getDashboard();
|
||||
associationWidget(
|
||||
(options.id as any) || "",
|
||||
{
|
||||
sourceId: options?.id || "",
|
||||
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
|
||||
},
|
||||
"Log",
|
||||
);
|
||||
}
|
||||
return {
|
||||
traceStore,
|
||||
displayMode,
|
||||
dateFormat,
|
||||
changeTraceId,
|
||||
handleClick,
|
||||
t,
|
||||
searchTraceLogs,
|
||||
appStore,
|
||||
loading,
|
||||
traceId,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trace-detail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trace-chart {
|
||||
height: calc(100% - 100px);
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.trace-detail-wrapper {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
|
||||
.grey {
|
||||
color: #fff;
|
||||
background-color: #448dfe;
|
||||
.trace-detail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
.trace-chart {
|
||||
height: calc(100% - 100px);
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.trace-detail-wrapper {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
|
||||
.trace-detail-ids {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
outline: 0;
|
||||
border-style: unset;
|
||||
color: inherit;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
}
|
||||
.grey {
|
||||
color: #fff;
|
||||
background-color: #448dfe;
|
||||
}
|
||||
|
||||
.trace-log-btn {
|
||||
float: right;
|
||||
}
|
||||
.ghost {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
padding: 0px 7px;
|
||||
background-color: #40454e;
|
||||
color: #eee;
|
||||
}
|
||||
.item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
padding-top: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.trace-detail-ids {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
outline: 0;
|
||||
border-style: unset;
|
||||
color: inherit;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.trace-log-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
padding: 0px 7px;
|
||||
background-color: #40454e;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
padding-top: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user