This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new d86543ae refactor: update Logs view (#333)
d86543ae is described below
commit d86543aeedb9440e8eea005013b335aff7287d3b
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Wed Nov 1 22:45:45 2023 +0800
refactor: update Logs view (#333)
New columns of the Log View
1. Timestamp + Raw log(content) as column one, 70% of the initial table
width. No separate timestamp column. The first column should be timestamp -
content
2. Level tag(key=level)'s value. This could be missed from tags, if so,
keep the column empty.
3. Trace link. If trace ID exists, generate a link to trace. Don't need to
put the relative trace ID in the text.
4. Still keep details pop-up style.
---
src/locales/lang/en.ts | 3 +-
src/locales/lang/es.ts | 1 +
src/locales/lang/zh.ts | 3 +-
src/views/dashboard/related/log/LogTable/Index.vue | 19 ++++++------
.../dashboard/related/log/LogTable/LogDetail.vue | 5 ++-
.../dashboard/related/log/LogTable/LogService.vue | 36 +++++++++-------------
src/views/dashboard/related/log/LogTable/data.ts | 32 +++++--------------
7 files changed, 40 insertions(+), 59 deletions(-)
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 415a4735..9c854703 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -297,7 +297,8 @@ const msg = {
return: "Return",
isError: "Error",
contentType: "Content Type",
- content: "Content",
+ content: "Timestamp - Content",
+ level: "Level",
viewLogs: "View Logs",
logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are
searchable.
Check more details on the Configuration Vocabulary page`,
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 27860e0d..278af1be 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -297,6 +297,7 @@ const msg = {
isError: "Error",
contentType: "Tipo de Contenido",
content: "Contenido",
+ level: "Level",
viewLogs: "Ver Registro de Datos",
logsTagsTip: `Solamente etiquetas definidas en
core/default/searchableLogsTags pueden ser buscadas.
Más información en la página de Vocabulario de Configuración`,
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index b9a6c48d..e9c340ec 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -294,7 +294,8 @@ const msg = {
return: "返回",
isError: "错误",
contentType: "内容类型",
- content: "内容",
+ content: "时间戳 - 内容",
+ level: "Level",
viewLogs: "查看日志",
logsTagsTip:
"只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue
b/src/views/dashboard/related/log/LogTable/Index.vue
index 266b119e..a0b9be81 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -15,10 +15,10 @@ limitations under the License. -->
<template>
<div class="log">
- <div class="log-header" :class="type === 'browser' ? ['browser-header',
'flex-h'] : 'service-header'">
+ <div class="log-header flex-h" :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) }}
+ {{ item.value && t(item.value) }}
</div>
</template>
</div>
@@ -42,7 +42,7 @@ limitations under the License. -->
@closed="showDetail = false"
:title="t('logDetail')"
>
- <LogDetail :currentLog="currentLog" :columns="columns" />
+ <LogDetail :currentLog="currentLog" />
</el-dialog>
</div>
</template>
@@ -80,6 +80,7 @@ limitations under the License. -->
}
.log-header {
+ width: 100%;
white-space: nowrap;
user-select: none;
border-left: 0;
@@ -87,23 +88,23 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 10%);
.traceId {
- width: 390px;
+ width: 140px;
+ }
+
+ .content {
+ width: 1300px;
}
- .content,
.tags {
- width: 300px;
+ width: 100px;
}
- .serviceInstanceName,
- .endpointName,
.serviceName {
width: 200px;
}
}
.log-header div {
- display: inline-block;
padding: 0 5px;
border: 1px solid transparent;
border-right: 1px dotted silver;
diff --git a/src/views/dashboard/related/log/LogTable/LogDetail.vue
b/src/views/dashboard/related/log/LogTable/LogDetail.vue
index b8c8a758..6a17b2cc 100644
--- a/src/views/dashboard/related/log/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/log/LogTable/LogDetail.vue
@@ -14,7 +14,7 @@ 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">
+ <div class="mb-10 clear rk-flex" v-for="(item, index) in ServiceLogDetail"
: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]) }}
@@ -36,14 +36,13 @@ limitations under the License. -->
import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
- import type { Option } from "@/types/app";
import { dateFormat } from "@/utils/dateFormat";
import { formatJson } from "@/utils/formatJson";
+ import { ServiceLogDetail } from "./data";
/*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(() => {
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue
b/src/views/dashboard/related/log/LogTable/LogService.vue
index 31d27403..bd388723 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing
permissions and
limitations under the License. -->
<template>
- <div class="log-item">
+ <div class="log-item flex-h">
<div
v-for="(item, index) in columns"
:key="index"
@@ -25,11 +25,9 @@ limitations under the License. -->
{{ dateFormat(data.timestamp) }}
</span>
<span v-else-if="item.label === 'tags'">
- {{ tags }}
- </span>
- <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ?
'' : 'blue'">
- {{ data[item.label] }}
+ {{ level }}
</span>
+ <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ?
'' : 'blue'"> trace </span>
<span v-else>{{ data[item.label] }}</span>
</div>
</div>
@@ -51,11 +49,11 @@ limitations under the License. -->
const options: Recordable<LayoutConfig> = inject("options") || {};
const emit = defineEmits(["select"]);
const columns = ServiceLogConstants;
- const tags = computed(() => {
+ const level = computed(() => {
if (!props.data.tags) {
return "";
}
- return String(props.data.tags.map((d: { key: string; value: string }) =>
`${d.key}=${d.value}`));
+ return (props.data.tags.find((d: { key: string; value: string }) => d.key
=== "level") || {}).value || "";
});
function selectLog(label: string, value: string) {
@@ -83,18 +81,16 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.log-item {
- white-space: nowrap;
- position: relative;
cursor: pointer;
+ align-items: center;
+ min-height: 30px;
.traceId {
- width: 390px;
cursor: pointer;
span {
display: inline-block;
width: 100%;
- line-height: 30px;
}
.blue {
@@ -102,20 +98,21 @@ limitations under the License. -->
}
}
- .content,
.tags {
- width: 300px;
+ width: 100px;
+ }
+
+ .content {
+ width: 1300px;
}
- .serviceInstanceName,
- .endpointName,
.serviceName {
width: 200px;
}
}
.log-item:hover {
- background: rgba(0, 0, 0, 0.04);
+ background: rgb(0 0 0 / 4%);
}
.log-item > div {
@@ -124,16 +121,13 @@ limitations under the License. -->
display: inline-block;
border: 1px solid transparent;
border-right: 1px dotted silver;
+ white-space: normal;
+ word-break: break-all;
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;
diff --git a/src/views/dashboard/related/log/LogTable/data.ts
b/src/views/dashboard/related/log/LogTable/data.ts
index efb4e6ec..0978688d 100644
--- a/src/views/dashboard/related/log/LogTable/data.ts
+++ b/src/views/dashboard/related/log/LogTable/data.ts
@@ -17,36 +17,16 @@
export const ServiceLogConstants = [
{
- label: "serviceName",
- value: "service",
- },
- {
- label: "serviceInstanceName",
- value: "instance",
- },
- {
- label: "endpointName",
- value: "endpoint",
- },
- {
- label: "timestamp",
- value: "time",
- },
- {
- label: "contentType",
- value: "contentType",
+ label: "content",
+ value: "content",
},
{
label: "tags",
- value: "tags",
+ value: "level",
},
{
label: "traceId",
- value: "traceID",
- },
- {
- label: "content",
- value: "content",
+ value: "",
},
];
export const ServiceLogDetail = [
@@ -58,6 +38,10 @@ export const ServiceLogDetail = [
label: "serviceInstanceName",
value: "instance",
},
+ {
+ label: "endpointName",
+ value: "endpoint",
+ },
{
label: "timestamp",
value: "time",
