fix: avoid some abnormal settings (#561)
diff --git a/src/graph/fragments/dashboard.ts b/src/graph/fragments/dashboard.ts
index 2b46e60..90b5d0e 100644
--- a/src/graph/fragments/dashboard.ts
+++ b/src/graph/fragments/dashboard.ts
@@ -32,16 +32,6 @@
`,
};
-export const addTemplate = {
- variable: '$setting: DashboardSetting!',
- query: `
- addTemplate(setting: $setting) {
- status
- message
- }
- `,
-};
-
export const fetchEvents = {
variable: ['$condition: EventQueryCondition'],
query: `
diff --git a/src/graph/query/dashboard.ts b/src/graph/query/dashboard.ts
index d95f6c1..11be5b7 100644
--- a/src/graph/query/dashboard.ts
+++ b/src/graph/query/dashboard.ts
@@ -18,7 +18,6 @@
import {
TypeOfMetrics,
getAllTemplates,
- addTemplate,
changeTemplate,
disableTemplate,
querySampledRecords,
@@ -32,8 +31,6 @@
export const queryTypeOfMetrics = `query queryTypeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
-export const mutationAddTemplate = `mutation mutationAddTemplate(${addTemplate.variable}) {${addTemplate.query}}`;
-
export const mutationChangeTemplate = `mutation mutationChangeTemplate(${changeTemplate.variable}) {
${changeTemplate.query}}`;
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index 998243a..15c1a19 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -285,8 +285,8 @@
<input
type="text"
class="rk-chart-edit-input long"
- :value="itemConfig.tips"
- @change="setItemConfig({ type: 'tips', value: $event.target.value })"
+ :value="decodeURIComponent(itemConfig.tipsContent)"
+ @change="setItemConfig({ type: 'tipsContent', value: encodeURIComponent($event.target.value) })"
/>
</div>
</div>
@@ -381,6 +381,10 @@
if (this.isChartSlow && !this.itemConfig.maxItemNum) {
this.itemConfig.maxItemNum = MaxItemNum;
}
+ if (!this.itemConfig.tipsContent && this.itemConfig.tips) {
+ this.itemConfig.tipsContent = encodeURIComponent(this.itemConfig.tips);
+ this.setItemConfig({ type: 'tipsContent', value: this.itemConfig.tipsContent });
+ }
this.hasChartType();
}
@@ -409,7 +413,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', 'tips'];
+ const typesUpdate = ['title', 'width', 'height', 'unit', 'tipsContent'];
if (params.type === 'servicesKey') {
this.setItemServices(true);
}
@@ -417,6 +421,9 @@
this.getServiceObject(true);
}
if (typesUpdate.includes(params.type)) {
+ if (params.type === 'tipsContent') {
+ this.EDIT_COMP_CONFIG({ index: this.index, values: { tips: decodeURIComponent(params.value) } });
+ }
this.$emit('updateStatus', params.type, params.value);
}
if (params.type === 'entityType') {
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index 57cb87c..3bbcff1 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -14,7 +14,7 @@
limitations under the License. -->
<template>
<div class="rk-dashboard-item" :class="`g-sm-${width}`" :style="`height:${height}px;`" v-if="itemConfig.entityType">
- <div class="rk-dashboard-item-title ell">
+ <div class="rk-dashboard-item-title">
<span v-show="rocketGlobal.edit || stateTopo.editDependencyMetrics" @click="deleteItem(index, itemConfig.uuid)">
<rk-icon class="r edit red" icon="file-deletion" />
</span>
@@ -33,7 +33,10 @@
>
<rk-icon class="r cp" icon="review-list" />
</span>
- <rk-icon v-if="tips" class="r edit" icon="info_outline" v-tooltip:bottom="{ content: tips }" />
+ <span v-if="tips" class="r edit tipsContent" @mouseenter="showTips = true" @mouseleave="showTips = false">
+ <rk-icon icon="info_outline" />
+ <div v-show="showTips">{{ decodeURIComponent(tips) }}</div>
+ </span>
</div>
<div class="rk-dashboard-item-body" ref="chartBody">
<div style="height:100%;width:100%">
@@ -133,11 +136,12 @@
TopologyType.TOPOLOGY_SERVICE_INSTANCE_DEPENDENCY,
TopologyType.TOPOLOGY_ENDPOINT_DEPENDENCY,
] as string[];
+ private showTips: boolean = false;
private created() {
this.status = this.item.metricType;
this.title = this.item.title;
- this.tips = this.item.tips;
+ this.tips = this.item.tips ? encodeURIComponent(this.item.tips) : '';
this.width = this.item.width;
this.height = this.item.height;
this.unit = this.item.unit;
@@ -342,7 +346,7 @@
if (type === 'unit') {
this.unit = value;
}
- if (type === 'tips') {
+ if (type === 'tipsContent') {
this.tips = value;
}
}
@@ -474,7 +478,7 @@
}
}
</script>
-<style lang="scss">
+<style lang="scss" scope>
.rk-dashboard-item {
display: flex;
height: 100%;
@@ -502,6 +506,8 @@
background-color: rgba(196, 200, 225, 0.2);
color: #9da5b2;
padding: 6px 10px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.rk-dashboard-item-title .hint {
color: #fbb03b;
@@ -541,4 +547,23 @@
.config-box {
padding: 40px 30px;
}
+ .tipsContent {
+ position: relative;
+ > div {
+ display: inline-block;
+ position: absolute;
+ top: 16px;
+ left: 10px;
+ background: #252a2f;
+ box-shadow: 1px 5px 1px #333;
+ color: #efefef;
+ border-radius: 3px;
+ z-index: 9999;
+ padding: 10px;
+ word-wrap: break-word;
+ word-break: break-all;
+ height: auto;
+ max-width: 300px;
+ }
+ }
</style>
