refactor: enhance the Log widget (#339)

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;
@@ -58,7 +62,7 @@ html {
 }
 
 html.dark {
-  --el-color-primary: rgb(64, 158, 255);
+  --el-color-primary: #409eff;
   --theme-background: #212224;
   --font-color: #fafbfc;
   --disabled-color: #ccc;

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;

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>

src/views/dashboard/related/log/LogTable/LogService.vue

@@ -24,10 +24,12 @@ limitations under the License. -->
       <span v-if="item.label === 'timestamp'">
         {{ dateFormat(data.timestamp) }}
       </span>
-      <span v-else-if="item.label === 'tags'">
+      <span v-else-if="item.label === 'tags'" :class="level.toLowerCase()"> > </span>
-        {{ level }}
+      <el-tooltip v-else-if="item.label === 'traceId'" content="Trace Link">
+        <span :class="noLink ? '' : 'blue'">
+          <Icon v-if="!noLink" iconName="merge" />
         </span>
-      <span v-else-if="item.label === 'traceId' && !noLink" :class="noLink ? '' : 'blue'"> trace </span>
+      </el-tooltip>
       <span v-else>{{ data[item.label] }}</span>
     </div>
   </div>
@@ -87,6 +89,9 @@ limitations under the License. -->
 
     .traceId {
       cursor: pointer;
+      width: 20px;
+      text-align: center;
+      position: relative;
 
       span {
         display: inline-block;
@@ -94,12 +99,16 @@ limitations under the License. -->
       }
 
       .blue {
-        color: #448dfe;
+        color: var(--el-color-primary);
       }
     }
 
     .tags {
-      width: 100px;
+      width: 15px;
+      text-align: center;
+      color: var(--sw-green);
+      font-weight: 400;
+      font-size: 14px;
     }
 
     .content {
@@ -112,15 +121,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 +145,12 @@ limitations under the License. -->
     height: 100%;
     padding: 3px 8px;
   }
+
+  .error {
+    color: var(--sw-orange);
+  }
+
+  .warning {
+    color: var(--sw-orange);
+  }
 </style>

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 = [
   {

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -287,7 +287,6 @@ limitations under the License. -->
   }
 
   .profiled {
-    // background-color: #eee;
     background-color: var(--sw-table-header);
     position: relative;
   }
@@ -329,7 +328,6 @@ limitations under the License. -->
   }
 
   .trace-item {
-    // display: flex;
     white-space: nowrap;
     position: relative;
     cursor: pointer;