mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-02 19:45:23 +00:00
feat: add no data tips
This commit is contained in:
parent
51103ac6ae
commit
015416d31d
@ -51,22 +51,12 @@ export const dashboardStore = defineStore({
|
||||
w: 24,
|
||||
h: 12,
|
||||
i: String(this.layout.length),
|
||||
metrics: ["service_resp_time"],
|
||||
queryMetricType: "readMetricsValues",
|
||||
type: "Widget",
|
||||
widget: {
|
||||
title: "Title123",
|
||||
tips: "Tooltip123",
|
||||
},
|
||||
graph: {
|
||||
showBackground: true,
|
||||
barWidth: 30,
|
||||
type: "Line",
|
||||
},
|
||||
standard: {
|
||||
sortOrder: "DEC",
|
||||
unit: "s",
|
||||
title: "Title",
|
||||
},
|
||||
graph: {},
|
||||
standard: {},
|
||||
};
|
||||
this.layout = this.layout.map((d: LayoutConfig) => {
|
||||
d.y = d.y + newWidget.h;
|
||||
@ -131,22 +121,12 @@ export const dashboardStore = defineStore({
|
||||
w: 24,
|
||||
h: 12,
|
||||
i: String(children.length),
|
||||
metrics: ["service_resp_time"],
|
||||
queryMetricType: "readMetricsValues",
|
||||
type: "Widget",
|
||||
widget: {
|
||||
title: "Title123",
|
||||
tips: "Tooltip123",
|
||||
},
|
||||
graph: {
|
||||
showBackground: true,
|
||||
barWidth: 30,
|
||||
type: "Line",
|
||||
},
|
||||
standard: {
|
||||
sortOrder: "DEC",
|
||||
unit: "s",
|
||||
title: "Title",
|
||||
},
|
||||
graph: {},
|
||||
standard: {},
|
||||
};
|
||||
if (this.layout[idx].children) {
|
||||
const items = children.map((d: LayoutConfig) => {
|
||||
|
@ -51,6 +51,7 @@ limitations under the License. -->
|
||||
</div>
|
||||
<div class="tab-layout">
|
||||
<grid-layout
|
||||
v-if="state.layout.length"
|
||||
v-model:layout="state.layout"
|
||||
:col-num="24"
|
||||
:row-height="10"
|
||||
@ -72,6 +73,7 @@ limitations under the License. -->
|
||||
<Widget :data="item" :active="activeTabWidget === item.i" />
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
<div class="no-data-tips" v-else>No widgets, plase add widgets</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -243,4 +245,12 @@ watch(
|
||||
.vue-grid-item.active {
|
||||
border: 1px solid #409eff;
|
||||
}
|
||||
|
||||
.no-data-tips {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding-top: 30px;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
|
@ -32,13 +32,14 @@ limitations under the License. -->
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="body" v-loading="loading">
|
||||
<div class="body" v-if="data.graph.type" v-loading="loading">
|
||||
<component
|
||||
:is="data.graph.type"
|
||||
:intervalTime="appStoreWithOut.intervalTime"
|
||||
:data="state.source"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="no-data">No data</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -149,4 +150,12 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user