diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 8734626d..44fcd781 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -43,6 +43,7 @@ const props = defineProps({ onMounted(() => { setTimeout(() => { + console.log(chart.value); drawEcharts(); window.addEventListener("resize", state.instanceChart.resize); }, 50); diff --git a/src/graph/fragments/dashboard.ts b/src/graph/fragments/dashboard.ts index 6c361e54..7ad1a9a4 100644 --- a/src/graph/fragments/dashboard.ts +++ b/src/graph/fragments/dashboard.ts @@ -18,3 +18,69 @@ export const TypeOfMetrics = { variable: "$name: String!", query: `typeOfMetrics(name: $name)`, }; +export const queryMetricsValues = { + variable: ["$condition: MetricsCondition!, $duration: Duration!"], + query: ` + readMetricsValues: readMetricsValues(condition: $condition, duration: $duration) { + label + values { + values {value} + } + }`, +}; + +export const queryMetricsValue = { + variable: ["$condition: MetricsCondition!, $duration: Duration!"], + query: ` + readMetricsValue: readMetricsValue(condition: $condition, duration: $duration)`, +}; + +export const querySortMetrics = { + variable: ["$condition: TopNCondition!, $duration: Duration!"], + query: ` + sortMetrics: sortMetrics(condition: $condition, duration: $duration) { + name + id + value + refId + }`, +}; +export const queryLabeledMetricsValues = { + variable: [ + "$condition: MetricsCondition!, $labels: [String!]!, $duration: Duration!", + ], + query: ` + readLabeledMetricsValues: readLabeledMetricsValues( + condition: $condition, + labels: $labels, + duration: $duration) { + label + values { + values {value} + } + }`, +}; + +export const queryHeatMap = { + variable: ["$condition: MetricsCondition!, $duration: Duration!"], + query: ` + readHeatMap: readHeatMap(condition: $condition, duration: $duration) { + values { + id + values + } + buckets { + min + max + } + }`, +}; +export const querySampledRecords = { + variable: ["$condition: TopNCondition!, $duration: Duration!"], + query: ` + readSampledRecords: readSampledRecords(condition: $condition, duration: $duration) { + name + value + refId + }`, +}; diff --git a/src/graph/query/dashboard.ts b/src/graph/query/dashboard.ts index cfe6eb2e..e5ffac98 100644 --- a/src/graph/query/dashboard.ts +++ b/src/graph/query/dashboard.ts @@ -14,6 +14,27 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { TypeOfMetrics } from "../fragments/dashboard"; +import { + TypeOfMetrics, + querySampledRecords, + queryHeatMap, + queryLabeledMetricsValues, + querySortMetrics, + queryMetricsValue, + queryMetricsValues, +} from "../fragments/dashboard"; export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`; + +export const readHeatMap = `query queryData(${queryHeatMap.variable}) {${queryHeatMap.query}}`; + +export const readSampledRecords = `query queryData(${querySampledRecords.variable}) {${querySampledRecords.query}}`; + +export const readLabeledMetricsValues = `query queryData(${queryLabeledMetricsValues.variable}) { + ${queryLabeledMetricsValues.query}}`; + +export const sortMetrics = `query queryData(${querySortMetrics.variable}) {${querySortMetrics.query}}`; + +export const readMetricsValue = `query queryData(${queryMetricsValue.variable}) {${queryMetricsValue.query}}`; + +export const readMetricsValues = `query queryData(${queryMetricsValues.variable}) {${queryMetricsValues.query}}`; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 981f4ac4..bc1abdc8 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -19,17 +19,24 @@ import { store } from "@/store"; import { LayoutConfig } from "@/types/dashboard"; import graph from "@/graph"; import { AxiosResponse } from "axios"; - +import { ConfigData } from "./data"; +import { useAppStoreWithOut } from "@/store/modules/app"; interface DashboardState { showConfig: boolean; layout: LayoutConfig[]; + selectedWidget: Nullable; + entity: string; + layerId: string; } export const dashboardStore = defineStore({ id: "dashboard", state: (): DashboardState => ({ - layout: [], + layout: [ConfigData], showConfig: false, + selectedWidget: ConfigData, + entity: "", + layerId: "", }), actions: { setLayout(data: LayoutConfig[]) { @@ -55,6 +62,15 @@ export const dashboardStore = defineStore({ setConfigPanel(show: boolean) { this.showConfig = show; }, + selectWidget(widget: Nullable) { + this.selectedWidget = ConfigData || widget; + }, + setLayer(id: string) { + this.layerId = id; + }, + setEntity(type: string) { + this.entity = type; + }, async fetchMetricType(item: string) { const res: AxiosResponse = await graph .query("queryTypeOfMetrics") @@ -62,6 +78,28 @@ export const dashboardStore = defineStore({ return res.data; }, + async fetchMetricValue(config: LayoutConfig) { + if (!config.queryMetricType) { + return; + } + const appStoreWithOut = useAppStoreWithOut(); + const variable = { + condition: { + name: "service_resp_time", + entity: { + normal: true, + scope: "Service", + serviceName: "agentless::app", + }, + }, + duration: appStoreWithOut.durationTime, + }; + const res: AxiosResponse = await graph + .query(config.queryMetricType) + .params(variable); + + return res.data; + }, }, }); diff --git a/src/store/modules/data.ts b/src/store/modules/data.ts new file mode 100644 index 00000000..fe88ade2 --- /dev/null +++ b/src/store/modules/data.ts @@ -0,0 +1,39 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * 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. + */ +import { LayoutConfig } from "@/types/dashboard"; +export const ConfigData: LayoutConfig = { + x: 0, + y: 0, + w: 8, + h: 12, + i: "0", + metrics: ["service_resp_time"], + queryMetricType: "readMetricsValues", + visualization: "Line", + widget: { + title: "Title", + tips: "Tooltip", + }, + graph: { + showBackground: true, + barWidth: 30, + }, + standard: { + sortOrder: "DEC", + unit: "s", + }, +}; diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index 9364c2a2..75339fa1 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -22,16 +22,25 @@ export interface LayoutConfig { i: string; widget?: WidgetConfig; graph?: GraphConfig; + standard?: StandardConfig; + metrics?: string[]; + visualization?: string; + queryMetricType?: string; } export interface WidgetConfig { - title: string; - Metrics: string[]; - unit: string; - tips: string; - sortOrder: string; + title?: string; + tips?: string; } export interface GraphConfig { - type: string; + showBackground?: boolean; + barWidth?: number; +} + +export interface StandardConfig { + sortOrder?: string; + unit?: string; + max?: string; + min?: string; } diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index ae657d94..87f5c8f2 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -53,7 +53,7 @@ const layout: LayoutConfig[] = [ { x: 4, y: 27, w: 4, h: 12, i: "15" }, { x: 8, y: 27, w: 4, h: 15, i: "16" }, ]; -dashboardStore.setLayout(layout); +// dashboardStore.setLayout(layout); diff --git a/src/views/dashboard/configuration/WidgetOptions.vue b/src/views/dashboard/configuration/WidgetOptions.vue index a90ad721..820f1f3d 100644 --- a/src/views/dashboard/configuration/WidgetOptions.vue +++ b/src/views/dashboard/configuration/WidgetOptions.vue @@ -28,7 +28,7 @@ limitations under the License. --> class="input" v-model="tooltip" size="mini" - placeholder="Please input tooltip content" + placeholder="Please input tips" /> diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index a87cdaa4..931f8928 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -116,6 +116,10 @@ export const EntityType = [ }, { value: "endpointRelation", label: "Endpoint Relation", key: 4 }, ]; +export const SortOrder = [ + { label: "DES", value: "DES" }, + { label: "ASC", value: "ASC" }, +]; export const Options = [ { value: "Option1", diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index 16e91760..b5072775 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -88,7 +88,7 @@ function getOption() { }, showBackground: props.config.showBackground, backgroundStyle: { - color: "rgba(180, 180, 180, 0.2)", + color: "rgba(180, 180, 180, 0.1)", }, markArea: index === 0 diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 298e2af3..9343105a 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -33,9 +33,6 @@ const props = defineProps({ /*global Nullable */ const chart = ref>(null); const option = computed(() => getOption()); -// function resize() { -// chart.value.myChart.resize(); -// } function getOption() { const keys = Object.keys(props.data || {}).filter( (i: any) => Array.isArray(props.data[i]) && props.data[i].length diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 17e6e327..98dd37f2 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -104,14 +104,27 @@ import { Options, SelectOpts, EntityType } from "../data"; const dashboardStore = useDashboardStore(); const params = useRoute().params; -const states = reactive({ +const states = reactive<{ + entity: string | string[]; + layerId: string | string[]; + service: string; + pod: string; + destService: string; + destPod: string; + key: number; +}>({ service: Options[0].value, pod: Options[0].value, // instances and endpoints destService: "", destPod: "", key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0, - ...params, + entity: params.entity, + layerId: params.layerId, }); + +dashboardStore.setLayer(states.layerId); +dashboardStore.setEntity(states.entity); + function changeService(val: { value: string; label: string }) { states.service = val.value; } diff --git a/src/views/dashboard/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue index 1e142d67..bf87d8f9 100644 --- a/src/views/dashboard/panel/Widget.vue +++ b/src/views/dashboard/panel/Widget.vue @@ -26,30 +26,63 @@ limitations under the License. --> -
No Data
+
+ +