This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 9927681 fix: avoid some abnormal settings (#561)
9927681 is described below
commit 992768186b6facbe048d93338f4d91afbda12ed9
Author: Fine0830 <[email protected]>
AuthorDate: Sun Nov 21 19:31:16 2021 +0800
fix: avoid some abnormal settings (#561)
---
src/graph/fragments/dashboard.ts | 10 -------
src/graph/query/dashboard.ts | 3 --
.../components/dashboard/charts/chart-edit.vue | 13 ++++++--
src/views/components/dashboard/dashboard-item.vue | 35 ++++++++++++++++++----
4 files changed, 40 insertions(+), 21 deletions(-)
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 getAllTemplates = {
`,
};
-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 @@ 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}}`;
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 @@ 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,7 +413,7 @@ 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);
}
@@ -417,6 +421,9 @@ limitations under the License. -->
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 @@ 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>
