github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add title, tips

Browse Source
This commit is contained in:
Fine 2023-01-31 14:14:24 +08:00
parent a3395cd0b2
commit a19e06f4d4
1 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/dashboard/Widget.vue
View File

@ -13,22 +13,34 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="widget-chart"> <div class="content">
<component <div class="header">
:is="graph.type" <span>{{ decodeURIComponent(title) }}</span>
:intervalTime="appStoreWithOut.intervalTime" <div class="tips" v-show="tips">
:data="source" <el-tooltip :content="decodeURIComponent(tips) || ''">
:config="{ <span>
i: 0, <Icon iconName="info_outline" size="sm" />
...graph, </span>
metrics: config.metrics, </el-tooltip>
metricTypes: config.metricTypes, </div>
metricConfig: config.metricConfig, </div>
}" <div class="widget-chart">
:needQuery="true" <component
/> :is="graph.type"
<div v-show="!config.type" class="no-data"> :intervalTime="appStoreWithOut.intervalTime"
{{ t("noData") }} :data="source"
:config="{
i: 0,
...graph,
metrics: config.metrics,
metricTypes: config.metricTypes,
metricConfig: config.metricConfig,
}"
:needQuery="true"
/>
<div v-show="!config.type" class="no-data">
{{ t("noData") }}
</div>
</div> </div>
</div> </div>
</template> </template>
@ -58,6 +70,8 @@ limitations under the License. -->
const source = ref<unknown>({}); const source = ref<unknown>({});
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const title = computed(() => encodeURIComponent((config.value.widget && config.value.widget.title) || ""));
const tips = computed(() => encodeURIComponent((config.value.widget && config.value.widget.tips) || ""));
init(); init();
async function init() { async function init() {
@ -126,11 +140,20 @@ limitations under the License. -->
source, source,
appStoreWithOut, appStoreWithOut,
config, config,
title,
tips,
}; };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content {
min-width: 800px;
border: 1px solid #eee;
background-color: #fff;
position: relative;
}
.widget-chart { .widget-chart {
background: #fff; background: #fff;
box-shadow: 0px 1px 4px 0px #00000029; box-shadow: 0px 1px 4px 0px #00000029;
@ -145,4 +168,19 @@ limitations under the License. -->
text-align: center; text-align: center;
line-height: 400px; line-height: 400px;
} }
.header {
height: 25px;
line-height: 25px;
text-align: center;
background-color: aliceblue;
font-size: 12px;
position: relative;
}
.tips {
position: absolute;
right: 5px;
top: 0;
}
</style> </style>