github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add loading

Browse Source
This commit is contained in:
Fine 2024-08-22 16:12:49 +08:00
parent 703d98998e
commit f7a7f970c6
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/dashboard/panel/Layout.vue
View File

@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<grid-layout <grid-layout
v-if="dashboardStore.layout.length"
v-model:layout="dashboardStore.layout" v-model:layout="dashboardStore.layout"
:col-num="24" :col-num="24"
:row-height="10" :row-height="10"
:is-draggable="dashboardStore.editMode" :is-draggable="dashboardStore.editMode"
:is-resizable="dashboardStore.editMode" :is-resizable="dashboardStore.editMode"
v-if="dashboardStore.layout.length" v-loading.fullscreen.lock="loading"
element-loading-text="Loading..."
element-loading-background="rgba(122, 122, 122, 0.8)"
> >
<grid-item <grid-item
v-for="item in dashboardStore.layout" v-for="item in dashboardStore.layout"
@ -59,6 +62,7 @@ limitations under the License. -->
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const metricsValues = ref(); const metricsValues = ref();
const loading = ref<boolean>(false);
function clickGrid(item: LayoutConfig, event: Event) { function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i); dashboardStore.activeGridItem(item.i);
@ -93,7 +97,9 @@ limitations under the License. -->
if (!widgets.length) { if (!widgets.length) {
return {}; return {};
} }
loading.value = true;
metricsValues.value = (await useDashboardQueryProcessor(configList)) || {}; metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
loading.value = false;
} }
async function queryTabsMetrics() { async function queryTabsMetrics() {
const configList = dashboardStore.currentTabItems const configList = dashboardStore.currentTabItems
@ -106,7 +112,9 @@ limitations under the License. -->
if (!configList.length) { if (!configList.length) {
return {}; return {};
} }
loading.value = true;
metricsValues.value = (await useDashboardQueryProcessor(configList)) || {}; metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
loading.value = false;
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
@ -162,6 +170,7 @@ limitations under the License. -->
t, t,
dragIgnoreFrom, dragIgnoreFrom,
metricsValues, metricsValues,
loading,
}; };
}, },
}); });