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: set params and selectors

Browse Source
This commit is contained in:
Fine 2023-01-31 13:44:40 +08:00
parent 24e2f07c9f
commit a3395cd0b2
3 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/router/dashboard.ts
View File

@ -178,7 +178,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
}, },
{ {
path: "", path: "",
redirect: "/widget/:config",
name: "Widget", name: "Widget",
component: () => import("@/views/dashboard/Widget.vue"), component: () => import("@/views/dashboard/Widget.vue"),
meta: { meta: {
@ -186,7 +185,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
}, },
children: [ children: [
{ {
path: "/widget/:config", path: "/page/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:config",
component: () => import("@/views/dashboard/Widget.vue"), component: () => import("@/views/dashboard/Widget.vue"),
name: "ViewWidget", name: "ViewWidget",
}, },

6
src/store/modules/selectors.ts
View File

@ -211,12 +211,12 @@ export const selectorStore = defineStore({
return res.data; return res.data;
}, },
async getProcess(instanceId: string, isRelation?: boolean) { async getProcess(processId: string, isRelation?: boolean) {
if (!instanceId) { if (!processId) {
return; return;
} }
const res: AxiosResponse = await graphql.query("queryProcess").params({ const res: AxiosResponse = await graphql.query("queryProcess").params({
instanceId, processId,
}); });
if (!res.data.errors) { if (!res.data.errors) {
if (isRelation) { if (isRelation) {

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

@ -13,7 +13,7 @@ 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="render-chart"> <div class="widget-chart">
<component <component
:is="graph.type" :is="graph.type"
:intervalTime="appStoreWithOut.intervalTime" :intervalTime="appStoreWithOut.intervalTime"
@ -21,13 +21,13 @@ limitations under the License. -->
:config="{ :config="{
i: 0, i: 0,
...graph, ...graph,
metrics: widget.metricNames, metrics: config.metrics,
metricTypes: widget.metricTypes, metricTypes: config.metricTypes,
metricConfig: widget.metricConfig, metricConfig: config.metricConfig,
}" }"
:needQuery="true" :needQuery="true"
/> />
<div v-show="!widget.type" class="no-data"> <div v-show="!config.type" class="no-data">
{{ t("noData") }} {{ t("noData") }}
</div> </div>
</div> </div>
@ -41,10 +41,10 @@ limitations under the License. -->
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 graphs from "./graphs";
import { EntityType, QueryOrders, Status } from "./data"; import { EntityType } from "./data";
export default defineComponent({ export default defineComponent({
name: "WidgetEdit", name: "WidgetPage",
components: { components: {
...graphs, ...graphs,
}, },
@ -52,34 +52,57 @@ limitations under the License. -->
const { t } = useI18n(); const { t } = useI18n();
const appStoreWithOut = useAppStoreWithOut(); const appStoreWithOut = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const widget = computed<any>(() => JSON.parse(useRoute().params.config as string)); const route = useRoute();
const graph = computed(() => widget.value.graph || {}); const config = computed<any>(() => JSON.parse(route.params.config as string));
const graph = computed(() => config.value.graph || {});
const source = ref<unknown>({}); const source = ref<unknown>({});
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
init(); init();
async function init() { async function init() {
dashboardStore.setEntity(widget.value.entity); dashboardStore.setEntity(route.params.entity);
await setSelector(); await setSelector();
await queryMetrics(); await queryMetrics();
} }
async function setSelector() { async function setSelector() {
if (widget.value.serviceId) { const { serviceId, podId, processId, destServiceId, destPodId, destProcessId, entity } = route.params;
await selectorStore.getService(widget.value.serviceId); if (serviceId) {
await selectorStore.getService(serviceId);
} }
if (widget.value.serviceInstanceId) { if (
await selectorStore.getInstance(widget.value.serviceInstanceId); [EntityType[4].value, EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(
entity as string,
)
) {
await selectorStore.getService(destServiceId);
} }
if (widget.value.serviceInstanceId) { if (
await selectorStore.getEndpoint(widget.value.endpointId); [EntityType[3].value, EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(
entity as string,
)
) {
await selectorStore.getInstance(podId);
}
if ([EntityType[2].value, EntityType[6].value].includes(entity as string)) {
await selectorStore.getEndpoint(podId);
}
if (EntityType[6].value === entity) {
await selectorStore.getEndpoint(destPodId, true);
}
if ([EntityType[5].value, EntityType[7].value].includes(entity as string)) {
await selectorStore.getInstance(destPodId, true);
}
if (EntityType[7].value === entity) {
selectorStore.getProcess(processId);
selectorStore.getProcess(destProcessId, true);
} }
} }
async function queryMetrics() { async function queryMetrics() {
const metricTypes = widget.value.metricTypes || []; const metricTypes = config.value.metricTypes || [];
const metrics = widget.value.metricNames || []; const metrics = config.value.metrics || [];
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]); const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = await useQueryProcessor({ ...widget.value.data, catalog }); const params = await useQueryProcessor({ ...config.value, catalog });
if (!params) { if (!params) {
source.value = {}; source.value = {};
return; return;
@ -91,9 +114,9 @@ limitations under the License. -->
return; return;
} }
const d = { const d = {
metrics: widget.value.metricNames || [], metrics: config.value.metrics || [],
metricTypes: widget.value.metricTypes || [], metricTypes: config.value.metricTypes || [],
metricConfig: widget.value.metricConfig || [], metricConfig: config.value.metricConfig || [],
}; };
source.value = useSourceProcessor(json, d); source.value = useSourceProcessor(json, d);
} }
@ -102,13 +125,16 @@ limitations under the License. -->
graph, graph,
source, source,
appStoreWithOut, appStoreWithOut,
widget, config,
}; };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.render-chart { .widget-chart {
background: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
border-radius: 3px;
padding: 5px; padding: 5px;
height: 400px; height: 400px;
width: 100%; width: 100%;