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: watch dashboard change

Browse Source
This commit is contained in:
Fine 2024-08-21 15:17:20 +08:00
parent 6dbb072360
commit 7ebb2ff48a
5 changed files with 75 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Selector.vue
View File

@ -28,8 +28,8 @@ limitations under the License. -->
:filterable="filterable"
>
<el-option
v-for="item in options"
:key="item.value || ''"
v-for="(item, index) in options"
:key="item.value + index"
:label="item.label || ''"
:value="item.value || ''"
:disabled="item.disabled || false"

18
src/hooks/useExpressionsProcessor.ts
View File

@ -88,7 +88,7 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
};
}
function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable }) {
function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable | any }) {
if (resp.errors) {
ElMessage.error(resp.errors);
return { source: {}, tips: [], typesOfMQE: [] };
@ -97,6 +97,10 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
ElMessage.error("The query is wrong");
return { source: {}, tips: [], typesOfMQE: [] };
}
if (resp.data.error) {
ElMessage.error(resp.data.error);
return { source: {}, tips: [], typesOfMQE: [] };
}
const tips: string[] = [];
const source: { [key: string]: unknown } = {};
const keys = Object.keys(resp.data);
@ -162,12 +166,16 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
}
try {
const pageData: Recordable = {};
for (let i = 0; i < configArr.length; i++) {
const data = expressionsSource(configArr[i], json);
pageData[i] = data;
const resp: any = {};
for (let m = 0; m < configArr[i].metrics.length; m++) {
resp[`expression${i}${m}`] = json.data[`expression${i}${m}`];
}
const data = expressionsSource(configArr[i], { ...json, data: resp });
const id = configArr[i].id;
pageData[id] = data;
}
return pageData;
} catch (error) {
console.error(error);

5
src/views/dashboard/controls/Tab.vue
View File

@ -113,6 +113,7 @@ limitations under the License. -->
:data="item"
:activeIndex="`${data.i}-${activeTabIndex}-${item.i}`"
:needQuery="needQuery"
:metricsValues="metricsValues"
/>
</grid-item>
</grid-layout>
@ -136,6 +137,10 @@ limitations under the License. -->
type: Object as PropType<LayoutConfig>,
default: () => ({ children: [] }),
},
metricsValues: {
type: Object as PropType<any>,
default: () => ({}),
},
active: { type: Boolean, default: false },
};
export default defineComponent({

55
src/views/dashboard/controls/Widget.vue
View File

@ -88,6 +88,10 @@ limitations under the License. -->
type: Object as PropType<LayoutConfig>,
default: () => ({ widget: {}, graph: {} }),
},
metricsValues: {
type: Object as PropType<any>,
default: () => ({}),
},
activeIndex: { type: String, default: "" },
needQuery: { type: Boolean, default: false },
};
@ -111,10 +115,6 @@ limitations under the License. -->
const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));
const typesOfMQE = ref<string[]>([]);
// if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) {
// queryMetrics();
// }
async function queryMetrics() {
loading.value = true;
const e = {
@ -176,48 +176,15 @@ limitations under the License. -->
},
);
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => props.metricsValues,
() => {
if (isList.value) {
return;
}
if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => [selectorStore.currentPod, selectorStore.currentDestPod],
() => {
if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
return;
}
if (isList.value) {
return;
}
queryMetrics();
},
);
watch(
() => [selectorStore.currentProcess, selectorStore.currentDestProcess],
() => {
if (isList.value) {
return;
}
if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => appStore.durationTime,
() => {
if (isList.value) {
return;
}
if (dashboardStore.entity === EntityType[1].value) {
queryMetrics();
loading.value = true;
const params = props.metricsValues[data.value.i];
if (params) {
state.source = params.source || {};
typesOfMQE.value = params.typesOfMQE;
}
loading.value = false;
},
);

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

@ -33,19 +33,20 @@ limitations under the License. -->
:class="{ active: dashboardStore.activedGridItem === item.i }"
:drag-ignore-from="dragIgnoreFrom"
>
<component :is="item.type" :data="item" />
<component :is="item.type" :data="item" :metricsValues="metricsValues" />
</grid-item>
</grid-layout>
<div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, watch } from "vue";
import { defineComponent, onBeforeUnmount, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useSelectorStore } from "@/store/modules/selectors";
import type { LayoutConfig } from "@/types/dashboard";
import controls from "../controls/index";
import { dragIgnoreFrom } from "../data";
import { dragIgnoreFrom, ListChartTypes, WidgetType } from "../data";
import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
import { EntityType } from "../data";
@ -54,14 +55,16 @@ limitations under the License. -->
components: { ...controls },
setup() {
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const metricsValues = ref();
function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i);
dashboardStore.selectWidget(item);
if (
item.type === "Tab" &&
item.type === WidgetType.Tab &&
!["operations", "tab-layout"].includes((event.target as HTMLDivElement)?.className) &&
(event.target as HTMLDivElement)?.classList[2] !== "icon-tool" &&
(event.target as HTMLDivElement)?.nodeName !== "use"
@ -71,11 +74,13 @@ limitations under the License. -->
}
async function queryMetrics() {
const widgets = [];
for (const item of dashboardStore.layout) {
if (item.type === "Widget") {
const isList = ListChartTypes.includes(item.type || "");
if (item.type === WidgetType.Widget && !isList) {
widgets.push(item);
}
if (item.type === "Tab") {
if (item.type === WidgetType.Tab) {
const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
widgets.push(...item.children[index].children);
}
@ -83,10 +88,14 @@ limitations under the License. -->
const configList = widgets.map((d: any) => ({
metrics: d.expressions || [],
metricConfig: d.metricConfig || [],
id: d.i,
}));
const params = (await useDashboardQueryProcessor(configList)) || {};
console.log(params);
if (!widgets.length) {
return {};
}
metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
}
onBeforeUnmount(() => {
dashboardStore.setLayout([]);
selectorStore.setCurrentService(null);
@ -94,6 +103,7 @@ limitations under the License. -->
dashboardStore.setEntity("");
dashboardStore.setConfigPanel(false);
});
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => {
@ -102,11 +112,37 @@ limitations under the License. -->
}
},
);
watch(
() => [selectorStore.currentPod, selectorStore.currentDestPod],
() => {
if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
return;
}
queryMetrics();
},
);
watch(
() => [selectorStore.currentProcess, selectorStore.currentDestProcess],
() => {
if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
queryMetrics();
}
},
);
watch(
() => appStore.durationTime,
() => {
if (dashboardStore.entity === EntityType[1].value) {
queryMetrics();
}
},
);
return {
dashboardStore,
clickGrid,
t,
dragIgnoreFrom,
metricsValues,
};
},
});