fix: update ui for logs (#425)
* fix: update log bar
* fix: update data
* fix: update style of selectors
* fix: log time
diff --git a/src/views/components/common/trace-select.vue b/src/views/components/common/trace-select.vue
index 9eed5e7..4f487bd 100644
--- a/src/views/components/common/trace-select.vue
+++ b/src/views/components/common/trace-select.vue
@@ -26,7 +26,7 @@
<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 @@
}
}
.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%;
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar-endpoint-select.vue
index 03a6dba..b33c1f0 100644
--- a/src/views/components/dashboard/tool-bar-endpoint-select.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select.vue
@@ -29,7 +29,7 @@
</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 @@
}
}
.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%;
diff --git a/src/views/components/dashboard/tool-bar-select.vue b/src/views/components/dashboard/tool-bar-select.vue
index 54f29ad..667db51 100644
--- a/src/views/components/dashboard/tool-bar-select.vue
+++ b/src/views/components/dashboard/tool-bar-select.vue
@@ -29,7 +29,7 @@
</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 @@
}
}
.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%;
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index bdac002..88ac3a6 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -73,7 +73,7 @@
<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>
diff --git a/src/views/components/log/log-table/log-service-item.vue b/src/views/components/log/log-table/log-service-item.vue
index 87600fa..f041394 100644
--- a/src/views/components/log/log-table/log-service-item.vue
+++ b/src/views/components/log/log-table/log-service-item.vue
@@ -17,7 +17,7 @@
<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 @@
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() {
diff --git a/src/views/containers/topology/trace/trace-select.vue b/src/views/containers/topology/trace/trace-select.vue
index 9eed5e7..4f487bd 100644
--- a/src/views/containers/topology/trace/trace-select.vue
+++ b/src/views/containers/topology/trace/trace-select.vue
@@ -26,7 +26,7 @@
<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 @@
}
}
.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%;
