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

@@ -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`,

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`,

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服务器的当前存储不支持此操作",

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;

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(() => {

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 }}
+        {{ level }}
-      </span>
-      <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ? '' : 'blue'">
-        {{ data[item.label] }}
       </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;

src/views/dashboard/related/log/LogTable/data.ts

@@ -17,36 +17,16 @@
 
 export const ServiceLogConstants = [
   {
-    label: "serviceName",
+    label: "content",
-    value: "service",
+    value: "content",
-  },
-  {
-    label: "serviceInstanceName",
-    value: "instance",
-  },
-  {
-    label: "endpointName",
-    value: "endpoint",
-  },
-  {
-    label: "timestamp",
-    value: "time",
-  },
-  {
-    label: "contentType",
-    value: "contentType",
   },
   {
     label: "tags",
-    value: "tags",
+    value: "level",
   },
   {
     label: "traceId",
-    value: "traceID",
+    value: "",
-  },
-  {
-    label: "content",
-    value: "content",
   },
 ];
 export const ServiceLogDetail = [
@@ -58,6 +38,10 @@ export const ServiceLogDetail = [
     label: "serviceInstanceName",
     value: "instance",
   },
+  {
+    label: "endpointName",
+    value: "endpoint",
+  },
   {
     label: "timestamp",
     value: "time",