From 00e1cb1772ddf18a5e2ad8758fc4d551c61bcc85 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 17 Nov 2023 00:01:18 +0800
Subject: [PATCH] feat: update logs

---
 src/styles/theme.scss                         |  4 +++
 .../dashboard/related/log/LogTable/Index.vue  |  5 ++--
 .../related/log/LogTable/LogDetail.vue        |  1 +
 .../related/log/LogTable/LogService.vue       | 27 ++++++++++++++-----
 .../dashboard/related/log/LogTable/data.ts    | 10 +++----
 5 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 2fb0dd27..4617bac5 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -15,6 +15,10 @@
  * limitations under the License.
  */
 @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+:root {
+  --sw-green: #70c877;
+  --sw-orange: #e6a23c;
+}
 
 html {
   --el-color-primary: #409eff;
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index 125345e3..0162ca5f 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -88,7 +88,7 @@ limitations under the License. -->
     border-bottom: 1px solid var(--sw-trace-list-border);
 
     .traceId {
-      width: 140px;
+      width: 20px;
     }
 
     .content {
@@ -96,7 +96,7 @@ limitations under the License. -->
     }
 
     .tags {
-      width: 100px;
+      width: 15px;
     }
 
     .serviceName {
@@ -107,7 +107,6 @@ limitations under the License. -->
   .log-header div {
     padding: 0 5px;
     border: 1px solid transparent;
-    border-right: 1px dotted silver;
     line-height: 30px;
     background-color: var(--sw-table-header);
     overflow: hidden;
diff --git a/src/views/dashboard/related/log/LogTable/LogDetail.vue b/src/views/dashboard/related/log/LogTable/LogDetail.vue
index 6a17b2cc..3cb92193 100644
--- a/src/views/dashboard/related/log/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/log/LogTable/LogDetail.vue
@@ -73,5 +73,6 @@ limitations under the License. -->
     outline: none;
     color: $font-color;
     overflow: auto;
+    padding: 5px;
   }
 </style>
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index bd388723..a27bb629 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -24,10 +24,10 @@ limitations under the License. -->
       <span v-if="item.label === 'timestamp'">
         {{ dateFormat(data.timestamp) }}
       </span>
-      <span v-else-if="item.label === 'tags'">
-        {{ level }}
+      <span v-else-if="item.label === 'tags'" :class="level.toLowerCase()"> > </span>
+      <span v-else-if="item.label === 'traceId'" :class="noLink ? '' : 'blue'">
+        <Icon v-if="!noLink" iconName="merge" />
       </span>
-      <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ? '' : 'blue'"> trace </span>
       <span v-else>{{ data[item.label] }}</span>
     </div>
   </div>
@@ -87,6 +87,8 @@ limitations under the License. -->
 
     .traceId {
       cursor: pointer;
+      width: 20px;
+      text-align: center;
 
       span {
         display: inline-block;
@@ -99,7 +101,11 @@ limitations under the License. -->
     }
 
     .tags {
-      width: 100px;
+      width: 15px;
+      text-align: center;
+      color: var(--sw-green);
+      font-weight: 600;
+      font-size: 14px;
     }
 
     .content {
@@ -112,15 +118,14 @@ limitations under the License. -->
   }
 
   .log-item:hover {
-    background: rgb(0 0 0 / 4%);
+    background: var(--sw-list-hover);
   }
 
   .log-item > div {
-    width: 140px;
+    width: 60px;
     padding: 0 5px;
     display: inline-block;
     border: 1px solid transparent;
-    border-right: 1px dotted silver;
     white-space: normal;
     word-break: break-all;
     overflow: hidden;
@@ -137,4 +142,12 @@ limitations under the License. -->
     height: 100%;
     padding: 3px 8px;
   }
+
+  .error {
+    color: var(--sw-orange);
+  }
+
+  .warning {
+    color: var(--sw-orange);
+  }
 </style>
diff --git a/src/views/dashboard/related/log/LogTable/data.ts b/src/views/dashboard/related/log/LogTable/data.ts
index 0978688d..96f42aa3 100644
--- a/src/views/dashboard/related/log/LogTable/data.ts
+++ b/src/views/dashboard/related/log/LogTable/data.ts
@@ -16,18 +16,18 @@
  */
 
 export const ServiceLogConstants = [
-  {
-    label: "content",
-    value: "content",
-  },
   {
     label: "tags",
-    value: "level",
+    value: "",
   },
   {
     label: "traceId",
     value: "",
   },
+  {
+    label: "content",
+    value: "content",
+  },
 ];
 export const ServiceLogDetail = [
   {