From d9cb7500c86a916158ad61d83154156f63cfe902 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Wed, 19 Jan 2022 14:21:20 +0800 Subject: [PATCH] feat: query metric list and add pagination for list components --- .../icons/add_circle_outlinecontrol_point.svg | 18 +++ src/graph/fragments/dashboard.ts | 11 ++ src/graph/query/dashboard.ts | 3 + src/store/modules/dashboard.ts | 7 + .../dashboard/configuration/ConfigEdit.vue | 127 +++++++++--------- .../configuration/graph-styles/index.ts | 6 + src/views/dashboard/graphs/EndpointList.vue | 66 ++++++--- src/views/dashboard/graphs/InstanceList.vue | 66 ++++++--- src/views/dashboard/graphs/ServiceList.vue | 65 ++++++--- 9 files changed, 254 insertions(+), 115 deletions(-) create mode 100644 src/assets/icons/add_circle_outlinecontrol_point.svg diff --git a/src/assets/icons/add_circle_outlinecontrol_point.svg b/src/assets/icons/add_circle_outlinecontrol_point.svg new file mode 100644 index 00000000..d618a74b --- /dev/null +++ b/src/assets/icons/add_circle_outlinecontrol_point.svg @@ -0,0 +1,18 @@ + + +add_circle_outlinecontrol_point + + diff --git a/src/graph/fragments/dashboard.ts b/src/graph/fragments/dashboard.ts index 7ad1a9a4..de6c5ba1 100644 --- a/src/graph/fragments/dashboard.ts +++ b/src/graph/fragments/dashboard.ts @@ -18,6 +18,17 @@ export const TypeOfMetrics = { variable: "$name: String!", query: `typeOfMetrics(name: $name)`, }; +export const listMetrics = { + variable: "$regex: String", + query: ` + metrics: listMetrics(regex: $regex) { + value: name + label: name + type + catalog + } + `, +}; export const queryMetricsValues = { variable: ["$condition: MetricsCondition!, $duration: Duration!"], query: ` diff --git a/src/graph/query/dashboard.ts b/src/graph/query/dashboard.ts index e5ffac98..3609d0a4 100644 --- a/src/graph/query/dashboard.ts +++ b/src/graph/query/dashboard.ts @@ -22,6 +22,7 @@ import { querySortMetrics, queryMetricsValue, queryMetricsValues, + listMetrics, } from "../fragments/dashboard"; export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`; @@ -38,3 +39,5 @@ export const sortMetrics = `query queryData(${querySortMetrics.variable}) {${que export const readMetricsValue = `query queryData(${queryMetricsValue.variable}) {${queryMetricsValue.query}}`; export const readMetricsValues = `query queryData(${queryMetricsValues.variable}) {${queryMetricsValues.query}}`; + +export const queryMetrics = `query queryData(${listMetrics.variable}) {${listMetrics.query}}`; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 5fb95524..60b4185b 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -165,6 +165,13 @@ export const dashboardStore = defineStore({ return res.data; }, + async fetchMetricList(regex: string) { + const res: AxiosResponse = await graph + .query("queryMetrics") + .params({ regex }); + + return res.data; + }, async fetchMetricValue(config: LayoutConfig) { // if (!config.queryMetricType) { // return; diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index ae70e0fe..75ab6527 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -38,37 +38,22 @@ limitations under the License. --> v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }" > - -
- - {{ type.label }} - -
- - -
+ +
-
+
class="selectors" v-loading="loading" /> + +
+ + +
+ + {{ type.label }} +
@@ -147,6 +151,7 @@ export default defineComponent({ StandardOptions, }, setup() { + const configHeight = document.documentElement.clientHeight - 520; const loading = ref(false); const { t } = useI18n(); const dashboardStore = useDashboardStore(); @@ -166,6 +171,7 @@ export default defineComponent({ standard: StandardConfig; visType: Option[]; isTable: boolean; + metricList: (Option & { type: string })[]; }>({ metrics: selectedGrid.metrics || [], valueTypes: [], @@ -179,14 +185,11 @@ export default defineComponent({ standard: selectedGrid.standard, visType: [], isTable: false, + metricList: [], }); states.isTable = TableChartTypes.includes(states.graph.type || ""); - if (states.metrics[0]) { - queryMetricType(states.metrics[0]); - } - if (params.entity === "service") { states.visType = ChartTypes.filter( (d: Option) => d.value !== "serviceList" @@ -201,32 +204,23 @@ export default defineComponent({ ); } - async function changeMetrics(arr: Option[]) { + setMetricType(states.metrics[0]); + + async function changeMetrics(arr: (Option & { type: string })[]) { if (!arr.length) { states.valueTypes = []; states.valueType = ""; return; } - states.metrics = arr.map((d: Option) => String(d.value)); - if (arr[0].value) { - queryMetricType(String(arr[0].value)); + states.metrics = arr.map((d: Option) => d.value); + if (arr[0]) { + const typeOfMetrics = arr[0].type; + states.valueTypes = ValuesTypes[typeOfMetrics]; + states.valueType = ValuesTypes[typeOfMetrics][0].value; + queryMetrics(); } } - async function queryMetricType(metric: string) { - loading.value = true; - const resp = await dashboardStore.fetchMetricType(metric); - loading.value = false; - if (resp.error) { - ElMessage.error(resp.data.error); - return; - } - const { typeOfMetrics } = resp.data; - states.valueTypes = ValuesTypes[typeOfMetrics]; - states.valueType = ValuesTypes[typeOfMetrics][0].value; - queryMetrics(); - } - function changeValueType(val: Option[]) { states.valueType = String(val[0].value); states.metricQueryType = (MetricQueryTypes as any)[states.valueType]; @@ -244,20 +238,6 @@ export default defineComponent({ states.graph.dashboardName = item[0].value; } - const metricOpts = [ - { value: "service_apdex", label: "service_apdex" }, - { value: "service_sla", label: "service_sla" }, - { value: "service_cpm", label: "service_cpm" }, - { value: "service_resp_time", label: "service_resp_time" }, - { value: "service_percentile", label: "service_percentile" }, - { - value: "service_mq_consume_latency", - label: "service_mq_consume_latency", - }, - { value: "service_mq_consume_count", label: "service_mq_consume_count" }, - ]; - const configHeight = document.documentElement.clientHeight - 520; - function updateWidgetOptions(param: { [key: string]: unknown }) { states.widget = { ...states.widget, @@ -288,10 +268,11 @@ export default defineComponent({ } if (json.errors) { + ElMessage.error(json.errors); return; } const metricVal = json.data.readMetricsValues.values.values.map( - (d: { value: number }) => d.value + 1 + (d: { value: number }) => d.value ); const m = states.metrics[0]; if (!m) { @@ -301,8 +282,28 @@ export default defineComponent({ [m]: metricVal, }; } + async function setMetricType(regex: string) { + const json = await dashboardStore.fetchMetricList(regex); + if (json.errors) { + ElMessage.error(json.errors); + return; + } + states.metricList = json.data.metrics || []; + const name = states.metrics[0]; + if (!name) { + return; + } + const typeOfMetrics: any = states.metricList.filter( + (d: { value: string }) => d.value === name + )[0]; + states.valueTypes = ValuesTypes[typeOfMetrics]; + states.valueType = ValuesTypes[typeOfMetrics][0].value; + queryMetrics(); + } - queryMetrics(); + function addMetricName() { + console.log(states); + } function applyConfig() { const opts = { @@ -325,13 +326,13 @@ export default defineComponent({ t, appStoreWithOut, ChartTypes, - metricOpts, updateWidgetOptions, configHeight, updateGraphOptions, updateStandardOptions, applyConfig, changeDashboard, + addMetricName, loading, }; }, @@ -369,7 +370,7 @@ export default defineComponent({ .render-chart { padding: 5px; - height: 350px; + height: 360px; width: 100%; } @@ -427,4 +428,8 @@ span.active { margin-top: 10px; overflow: auto; } + +.ds-name { + margin-bottom: 10px; +} diff --git a/src/views/dashboard/configuration/graph-styles/index.ts b/src/views/dashboard/configuration/graph-styles/index.ts index a1b673d2..5286f26d 100644 --- a/src/views/dashboard/configuration/graph-styles/index.ts +++ b/src/views/dashboard/configuration/graph-styles/index.ts @@ -18,9 +18,12 @@ import AreaConfig from "./Area.vue"; import LineConfig from "./Line.vue"; import BarConfig from "./Bar.vue"; +import TableConfig from "./Table.vue"; +import CardConfig from "./Card.vue"; import InstanceListConfig from "./InstanceList.vue"; import EndpointListConfig from "./EndpointList.vue"; import ServiceListConfig from "./ServiceList.vue"; +import TopListConfig from "./TopList.vue"; export default { AreaConfig, @@ -29,4 +32,7 @@ export default { InstanceListConfig, EndpointListConfig, ServiceListConfig, + TableConfig, + CardConfig, + TopListConfig, }; diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 7594d5f8..3bcb286c 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -13,24 +13,36 @@ 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. -->