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

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

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