feat: enhance the custom content of tooltips on dashboard (#482)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 4848d1a..574a51d 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -221,6 +221,7 @@
show: 'Show',
hide: 'Hide',
message: 'Message',
+ tooltipsContent: 'Tooltip Content',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 570ef7d..e6d6594 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -219,6 +219,7 @@
show: '展示',
hide: '隐藏',
message: '信息',
+ tooltipsContent: '提示内容',
};
export default m;
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index d7bf985..59c9177 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -281,6 +281,15 @@
<option :value="false">{{ $t('hide') }}</option>
</select>
</div>
+ <div class="flex-h mb-5">
+ <div class="title grey sm">{{ $t('tooltipsContent') }}:</div>
+ <input
+ type="text"
+ class="rk-chart-edit-input long"
+ :value="itemConfig.tips"
+ @change="setItemConfig({ type: 'tips', value: $event.target.value })"
+ />
+ </div>
</div>
</div>
</template>
@@ -367,7 +376,7 @@
private setItemConfig(params: { type: string; value: string }) {
this.itemConfig[params.type] = params.value;
const types = ['endpointsKey', 'instancesKey', 'currentService'];
- const typesUpdate = ['title', 'width', 'height', 'unit'];
+ const typesUpdate = ['title', 'width', 'height', 'unit', 'tips'];
if (params.type === 'servicesKey') {
this.setItemServices(true);
}
@@ -588,7 +597,7 @@
.rk-chart-edit {
margin: 0 -10px;
height: 100%;
- overflow: auto;
+ border: 1px dashed rgba(196, 200, 225, 0.5);
select {
margin: 0;
@@ -601,10 +610,9 @@
.rk-chart-edit-container {
padding: 7px 5px;
- border: 1px dashed rgba(196, 200, 225, 0.5);
border-radius: 4px;
height: 100%;
-
+ overflow: auto;
.title {
width: 120px;
flex-shrink: 0;
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index 7cc7104..137ad4b 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -320,6 +320,9 @@
if (type === 'unit') {
this.unit = value;
}
+ if (type === 'tips') {
+ this.tips = value;
+ }
}
private copyTable() {
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 9b3dde7..67aa4d7 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -235,7 +235,6 @@
temp.traceId = this.traceId;
}
localStorage.setItem('traceId', this.traceId);
-
if (this.tagsList.length) {
const tagsMap = this.tagsList.map((item: string) => {
const key = item.substring(0, item.indexOf('='));
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index ee65932..dd0545e 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -140,3 +140,14 @@
}
}
</script>
+<style lang="scss" scoped>
+ .rk-add-dashboard-item {
+ height: 342px;
+ text-align: center;
+ line-height: 250px;
+ border: 1px dashed rgba(196, 200, 225, 0.5);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 16px;
+ }
+</style>