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: update widget page

Browse Source
This commit is contained in:
Fine 2023-01-30 16:08:04 +08:00
parent ca56d10080
commit 1684ef6124
1 changed files with 86 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,60 +15,108 @@ limitations under the License. -->
<template> <template>
<div class="render-chart"> <div class="render-chart">
<component <component
:is="config.graph" :is="graph.type"
:intervalTime="appStoreWithOut.intervalTime" :intervalTime="appStoreWithOut.intervalTime"
:data="source" :data="source"
:config="{ :config="{
i: 0, i: 0,
metrics: config.metrics, ...graph,
metricTypes: config.metricTypes, metrics: widget.metricNames,
metricConfig: config.metricConfig, metricTypes: widget.metricTypes,
metricConfig: widget.metricConfig,
}" }"
:needQuery="true" :needQuery="true"
/> />
<div v-show="!config.type" class="no-data"> <div v-show="!widget.type" class="no-data">
{{ t("noData") }} {{ t("noData") }}
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts">
import { computed, ref } from "vue"; import { computed, ref, defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor"; import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
import graphs from "./graphs";
import { EntityType, QueryOrders, Status } from "./data";
const { t } = useI18n(); export default defineComponent({
const appStoreWithOut = useAppStoreWithOut(); name: "WidgetEdit",
const config = computed<any>(() => useRoute().params); components: {
const source = ref<any>({}); ...graphs,
const loading = ref<boolean>(false); },
const dashboardStore = useDashboardStore(); setup() {
const { t } = useI18n();
const appStoreWithOut = useAppStoreWithOut();
const selectorStore = useSelectorStore();
const widget = computed<any>(() => JSON.parse(useRoute().params.config as string));
const graph = computed(() => widget.value.graph || {});
const source = ref<unknown>({});
const loading = ref<boolean>(false);
const dashboardStore = useDashboardStore();
queryMetrics(); init();
async function init() {
async function queryMetrics() { dashboardStore.setEntity(widget.value.entity);
const metricTypes = config.value.metricTypes || []; await setSelector();
const metrics = config.value.metrics || []; await queryMetrics();
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]); }
const params = await useQueryProcessor({ ...config.value.data, catalog }); async function setSelector() {
if (widget.value.serviceId) {
if (!params) { await selectorStore.getService(widget.value.serviceId);
source.value = {}; }
return; if (widget.value.serviceInstanceId) {
} await selectorStore.getInstance(widget.value.serviceInstanceId);
loading.value = true; }
const json = await dashboardStore.fetchMetricValue(params); if (widget.value.serviceInstanceId) {
loading.value = false; await selectorStore.getEndpoint(widget.value.endpointId);
if (!json) { }
return; }
} async function queryMetrics() {
const d = { const metricTypes = widget.value.metricTypes || [];
metrics: config.value.metrics || [], const metrics = widget.value.metricNames || [];
metricTypes: config.value.metricTypes || [], const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
metricConfig: config.value.metricConfig || [], const params = await useQueryProcessor({ ...widget.value.data, catalog });
}; if (!params) {
source.value = useSourceProcessor(json, d); source.value = {};
} return;
}
loading.value = true;
const json = await dashboardStore.fetchMetricValue(params);
loading.value = false;
if (!json) {
return;
}
const d = {
metrics: widget.value.metricNames || [],
metricTypes: widget.value.metricTypes || [],
metricConfig: widget.value.metricConfig || [],
};
source.value = useSourceProcessor(json, d);
}
return {
t,
graph,
source,
appStoreWithOut,
widget,
};
},
});
</script> </script>
<style lang="scss" scoped>
.render-chart {
padding: 5px;
height: 400px;
width: 100%;
}
.no-data {
font-size: 14px;
text-align: center;
line-height: 400px;
}
</style>