fix: update ui for logs (#425)

* fix: update log bar

* fix: update data

* fix: update style of selectors

* fix: log time

Author: Fine0830

src/views/components/common/trace-select.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
     <div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
       <div class="mr-15 rk-trace-bar-i-text">
         <div class="sm grey">{{ title }}</div>
-        <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
+        <div v-tooltip:right.ellipsis="value.label || ''">
           {{ value.label || '' }}
         </div>
       </div>
@@ -92,8 +92,10 @@ limitations under the License. -->
     }
   }
   .rk-trace-bar-i-text {
-    max-width: 150px;
-    min-width: 80px;
+    max-width: 350px;
+    min-width: 100px;
+    word-wrap: break-word;
+    word-break: break-all;
   }
   .rk-trace-bar-i {
     height: 100%;

src/views/components/dashboard/tool-bar-endpoint-select.vue

@@ -29,7 +29,7 @@ limitations under the License. -->
       </svg>
       <div class="mr-15 rk-dashboard-bar-i-text">
         <div class="sm grey">{{ title }}</div>
-        <div class="ell" v-tooltip:right.ellipsis="current.label || ''">
+        <div class="selector-ell" v-tooltip:right.ellipsis="current.label || ''">
           {{ current.label }}
         </div>
       </div>
@@ -97,7 +97,11 @@ limitations under the License. -->
     }
   }
   .rk-dashboard-bar-i-text {
-    max-width: 250px;
+    max-width: 350px;
+    .selector-ell {
+      word-wrap: break-word;
+      word-break: break-all;
+    }
   }
   .rk-dashboard-bar-i {
     height: 100%;

src/views/components/dashboard/tool-bar-select.vue

@@ -29,7 +29,7 @@ limitations under the License. -->
       </svg>
       <div class="mr-15 rk-dashboard-bar-i-text">
         <div class="sm grey">{{ title }}</div>
-        <div class="ell" v-tooltip:right.ellipsis="current.label || ''">
+        <div class="selector-ell" v-tooltip:right.ellipsis="current.label || ''">
           {{ current.label }}
         </div>
       </div>
@@ -97,7 +97,11 @@ limitations under the License. -->
     }
   }
   .rk-dashboard-bar-i-text {
-    max-width: 200px;
+    max-width: 350px;
+    .selector-ell {
+      word-wrap: break-word;
+      word-break: break-all;
+    }
   }
   .rk-dashboard-bar-i {
     height: 100%;

src/views/components/log/log-bar.vue

@@ -73,7 +73,7 @@ limitations under the License. -->
         <RkPage :currentSize="10" :currentPage="pageNum" @changePage="handleRefresh" :total="logState.total" />
       </span>
     </div>
-    <div class="flex-h" v-show="showConditionsBox">
+    <div class="flex-h" v-show="showConditionsBox && logState.type.key !== cateGoryBrowser">
       <LogConditions />
     </div>
   </div>

src/views/components/log/log-table/log-service-item.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
   <div @click="showSelectSpan" class="log-item">
     <div v-for="(item, index) in columns" :key="index" :class="item.label">
       <span v-if="item.label === 'timestamp'">
-        {{ data.time | dateformat }}
+        {{ data.timestamp | dateformat }}
       </span>
       <span v-else-if="item.label === 'tags'">
         {{ tags }}
@@ -43,6 +43,9 @@ limitations under the License. -->
     private columns = ServiceLogConstants;
     private tags: string = '';
     private created() {
+      if (!this.data.tags) {
+        return;
+      }
       this.tags = String(this.data.tags.map((d: any) => `${d.key}=${d.value}`));
     }
     private showSelectSpan() {

src/views/containers/topology/trace/trace-select.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
     <div class="rk-trace-bar-i flex-h" @click="visible = !visible && !readonly">
       <div class="mr-15 rk-trace-bar-i-text">
         <div class="sm grey">{{ title }}</div>
-        <div class="ell" v-tooltip:right.ellipsis="value.label || ''">
+        <div v-tooltip:right.ellipsis="value.label || ''">
           {{ value.label || '' }}
         </div>
       </div>
@@ -92,8 +92,10 @@ limitations under the License. -->
     }
   }
   .rk-trace-bar-i-text {
-    max-width: 150px;
-    min-width: 80px;
+    max-width: 350px;
+    min-width: 100px;
+    word-wrap: break-word;
+    word-break: break-all;
   }
   .rk-trace-bar-i {
     height: 100%;