fix: avoid some abnormal settings (#561)

Author: Fine0830

src/graph/fragments/dashboard.ts

@@ -32,16 +32,6 @@ export const getAllTemplates = {
   `,
 };
 
-export const addTemplate = {
-  variable: '$setting: DashboardSetting!',
-  query: `
-    addTemplate(setting: $setting) {
-      status
-      message
-    }
-  `,
-};
-
 export const fetchEvents = {
   variable: ['$condition: EventQueryCondition'],
   query: `

src/graph/query/dashboard.ts

@@ -18,7 +18,6 @@
 import {
   TypeOfMetrics,
   getAllTemplates,
-  addTemplate,
   changeTemplate,
   disableTemplate,
   querySampledRecords,
@@ -32,8 +31,6 @@ import {
 
 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}}`;
 

src/views/components/dashboard/charts/chart-edit.vue

@@ -285,8 +285,8 @@ limitations under the License. -->
         <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 @@ limitations under the License. -->
       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,14 +413,17 @@ limitations under the License. -->
     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);
       }
       if (types.includes(params.type)) {
         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') {

src/views/components/dashboard/dashboard-item.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 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 @@ limitations under the License. -->
       >
         <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 @@ limitations under the License. -->
       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 @@ limitations under the License. -->
       if (type === 'unit') {
         this.unit = value;
       }
-      if (type === 'tips') {
+      if (type === 'tipsContent') {
         this.tips = value;
       }
     }
@@ -474,7 +478,7 @@ limitations under the License. -->
     }
   }
 </script>
-<style lang="scss">
+<style lang="scss" scope>
   .rk-dashboard-item {
     display: flex;
     height: 100%;
@@ -502,6 +506,8 @@ limitations under the License. -->
     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 @@ limitations under the License. -->
   .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>