mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-15 20:59:18 +00:00
feat: the log widget and the trace widget associate with each other, remove log tables on the trace widget (#128)
This commit is contained in:
Fine0830
@@ -1,147 +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>
|
||||
<div class="log">
|
||||
<div
|
||||
class="log-header"
|
||||
:class="
|
||||
type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'
|
||||
"
|
||||
>
|
||||
<template v-for="(item, index) in columns" :key="`col${index}`">
|
||||
<div
|
||||
:class="[
|
||||
item.label,
|
||||
['message', 'stack'].includes(item.label) ? 'max-item' : '',
|
||||
]"
|
||||
>
|
||||
{{ t(item.value) }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="type === 'browser'">
|
||||
<LogBrowser
|
||||
v-for="(item, index) in tableData"
|
||||
:data="item"
|
||||
:key="'browser' + index"
|
||||
@select="setCurrentLog"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<LogService
|
||||
v-for="(item, index) in tableData"
|
||||
:data="item"
|
||||
:key="'service' + index"
|
||||
:noLink="noLink"
|
||||
@select="setCurrentLog"
|
||||
/>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<el-dialog
|
||||
v-model="showDetail"
|
||||
:destroy-on-close="true"
|
||||
fullscreen
|
||||
@closed="showDetail = false"
|
||||
:title="t('logDetail')"
|
||||
>
|
||||
<LogDetail :currentLog="currentLog" :columns="columns" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ServiceLogConstants, BrowserLogConstants } from "./data";
|
||||
import LogBrowser from "./LogBrowser.vue";
|
||||
import LogService from "./LogService.vue";
|
||||
import LogDetail from "./LogDetail.vue";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
type: { type: String, default: "service" },
|
||||
tableData: { type: Array, default: () => [] },
|
||||
noLink: { type: Boolean, default: true },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const currentLog = ref<any>({});
|
||||
const showDetail = ref<boolean>(false);
|
||||
const columns: any[] =
|
||||
props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
|
||||
|
||||
function setCurrentLog(log: any) {
|
||||
showDetail.value = true;
|
||||
currentLog.value = log;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log {
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
.traceId {
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.content,
|
||||
.tags {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.serviceInstanceName,
|
||||
.endpointName,
|
||||
.serviceName {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-header div {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
border: 1px solid transparent;
|
||||
border-right: 1px dotted silver;
|
||||
line-height: 30px;
|
||||
background-color: #f3f4f9;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
div {
|
||||
min-width: 140px;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.max-item {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.service-header div {
|
||||
width: 140px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,114 +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>
|
||||
<div
|
||||
@click="showSelectSpan"
|
||||
:class="['log-item', 'clearfix', 'flex-h']"
|
||||
ref="logItem"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in columns"
|
||||
:key="index"
|
||||
:class="[
|
||||
'log',
|
||||
['message', 'stack'].includes(item.label) ? 'max-item' : '',
|
||||
]"
|
||||
>
|
||||
<span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
|
||||
<span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
|
||||
<el-tooltip v-else :content="data[item.label] || '-'">
|
||||
<span>
|
||||
{{ data[item.label] || "-" }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { BrowserLogConstants } from "./data";
|
||||
|
||||
/*global defineProps, defineEmits, NodeListOf */
|
||||
const props = defineProps({
|
||||
data: { type: Object as any, default: () => ({}) },
|
||||
});
|
||||
const columns = BrowserLogConstants;
|
||||
const emit = defineEmits(["select"]);
|
||||
const logItem = ref<any>(null);
|
||||
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
|
||||
function showSelectSpan() {
|
||||
const items: NodeListOf<any> = document.querySelectorAll(".log-item");
|
||||
|
||||
for (const item of items) {
|
||||
item.style.background = "#fff";
|
||||
}
|
||||
|
||||
logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
|
||||
emit("select", props.data);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-item {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.log-item.selected {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.log-item:not(.level0):hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.log-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
.log-item > div {
|
||||
width: 10%;
|
||||
min-width: 140px;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
border-right: 1px dotted silver;
|
||||
overflow: hidden;
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.max-item.log {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.log-item .text {
|
||||
width: 100% !important;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-item > div.log {
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +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>
|
||||
<div class="log-detail">
|
||||
<div
|
||||
class="mb-10 clear rk-flex"
|
||||
v-for="(item, index) in columns"
|
||||
:key="index"
|
||||
>
|
||||
<span class="g-sm-4 grey">{{ t(item.value) }}:</span>
|
||||
<span
|
||||
v-if="['timestamp', 'time'].includes(item.label)"
|
||||
class="g-sm-8 mb-10"
|
||||
>
|
||||
{{ dateFormat(currentLog[item.label]) }}
|
||||
</span>
|
||||
<textarea
|
||||
class="content mb-10"
|
||||
:readonly="true"
|
||||
v-else-if="item.label === 'content'"
|
||||
:value="currentLog[item.label]"
|
||||
/>
|
||||
<span v-else-if="item.label === 'tags'" class="g-sm-8 mb-10">
|
||||
<div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
|
||||
</span>
|
||||
<span v-else class="g-sm-8 mb-10">{{ currentLog[item.label] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import dayjs from "dayjs";
|
||||
import { Option } from "@/types/app";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
currentLog: { type: Object as PropType<any>, default: () => ({}) },
|
||||
columns: { type: Array as PropType<Option[]>, default: () => [] },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const logTags = computed(() => {
|
||||
if (!props.currentLog.tags) {
|
||||
return [];
|
||||
}
|
||||
return props.currentLog.tags.map((d: { key: string; value: string }) => {
|
||||
return `${d.key} = ${d.value}`;
|
||||
});
|
||||
});
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
max-width: 700px;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #3d444f;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,120 +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>
|
||||
<div @click="showSelectSpan" class="log-item">
|
||||
<div v-for="(item, index) in columns" :key="index" :class="item.label">
|
||||
<span v-if="item.label === 'timestamp'">
|
||||
{{ dateFormat(data.timestamp) }}
|
||||
</span>
|
||||
<span v-else-if="item.label === 'tags'">
|
||||
{{ tags }}
|
||||
</span>
|
||||
<!-- <router-link
|
||||
v-else-if="item.label === 'traceId' && !noLink"
|
||||
:to="{ name: 'trace', query: { traceid: data[item.label] } }"
|
||||
>
|
||||
<span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
|
||||
</router-link> -->
|
||||
<span v-else>{{ data[item.label] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { ServiceLogConstants } from "./data";
|
||||
/*global defineProps, defineEmits */
|
||||
const props = defineProps({
|
||||
data: { type: Object as any, default: () => ({}) },
|
||||
noLink: { type: Boolean, default: true },
|
||||
});
|
||||
const emit = defineEmits(["select"]);
|
||||
const columns = ServiceLogConstants;
|
||||
const tags = computed(() => {
|
||||
if (!props.data.tags) {
|
||||
return "";
|
||||
}
|
||||
return String(props.data.tags.map((d: any) => `${d.key}=${d.value}`));
|
||||
});
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
function showSelectSpan() {
|
||||
emit("select", props.data);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-item {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.traceId {
|
||||
width: 390px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #448dfe;
|
||||
}
|
||||
}
|
||||
|
||||
.content,
|
||||
.tags {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.serviceInstanceName,
|
||||
.endpointName,
|
||||
.serviceName {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.log-item > div {
|
||||
width: 140px;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
border-right: 1px dotted silver;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-item .text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.log-item > div.method {
|
||||
height: 100%;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,120 +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.
|
||||
*/
|
||||
|
||||
export const ServiceLogConstants = [
|
||||
{
|
||||
label: "serviceName",
|
||||
value: "service",
|
||||
},
|
||||
{
|
||||
label: "serviceInstanceName",
|
||||
value: "instance",
|
||||
},
|
||||
{
|
||||
label: "endpointName",
|
||||
value: "endpoint",
|
||||
},
|
||||
{
|
||||
label: "timestamp",
|
||||
value: "time",
|
||||
},
|
||||
{
|
||||
label: "contentType",
|
||||
value: "contentType",
|
||||
},
|
||||
{
|
||||
label: "tags",
|
||||
value: "tags",
|
||||
},
|
||||
{
|
||||
label: "content",
|
||||
value: "content",
|
||||
},
|
||||
{
|
||||
label: "traceId",
|
||||
value: "traceID",
|
||||
},
|
||||
];
|
||||
export const ServiceLogDetail = [
|
||||
{
|
||||
label: "serviceName",
|
||||
value: "service",
|
||||
},
|
||||
{
|
||||
label: "serviceInstanceName",
|
||||
value: "instance",
|
||||
},
|
||||
{
|
||||
label: "timestamp",
|
||||
value: "time",
|
||||
},
|
||||
{
|
||||
label: "contentType",
|
||||
value: "contentType",
|
||||
},
|
||||
{
|
||||
label: "traceId",
|
||||
value: "traceID",
|
||||
},
|
||||
{
|
||||
label: "tags",
|
||||
value: "tags",
|
||||
},
|
||||
{
|
||||
label: "content",
|
||||
value: "content",
|
||||
},
|
||||
];
|
||||
// The order of columns should be time, service, error, stack, version, url, catalog, and grade.
|
||||
export const BrowserLogConstants = [
|
||||
{
|
||||
label: "service",
|
||||
value: "service",
|
||||
},
|
||||
{
|
||||
label: "serviceVersion",
|
||||
value: "serviceVersion",
|
||||
},
|
||||
{
|
||||
label: "errorUrl",
|
||||
value: "errorPage",
|
||||
},
|
||||
{
|
||||
label: "time",
|
||||
value: "time",
|
||||
},
|
||||
{
|
||||
label: "message",
|
||||
value: "message",
|
||||
// drag: true,
|
||||
method: 350,
|
||||
},
|
||||
{
|
||||
label: "stack",
|
||||
value: "stack",
|
||||
// drag: true,
|
||||
method: 350,
|
||||
},
|
||||
{
|
||||
label: "category",
|
||||
value: "category",
|
||||
},
|
||||
{
|
||||
label: "grade",
|
||||
value: "grade",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user