From 51932ca8775cbb52fef3a38bd523db04e27360a5 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 4 Jan 2022 15:57:15 +0800 Subject: [PATCH] feat: create image, intstance list, endpoint list --- package.json | 12 +++-- src/components/Graph.vue | 2 +- src/graph/fragments/selector.ts | 23 +++++++++ src/graph/query/selector.ts | 5 +- src/store/modules/app.ts | 2 +- src/store/modules/selectors.ts | 23 ++++++++- src/views/dashboard/controls/Image.vue | 35 +++++++++++++ src/views/dashboard/controls/Tab.vue | 14 ++++++ src/views/dashboard/data.ts | 2 +- src/views/dashboard/graphs/EndpointList.vue | 55 +++++++++++++++++++++ src/views/dashboard/graphs/InstanceList.vue | 55 +++++++++++++++++++++ src/views/dashboard/graphs/Table.vue | 5 +- src/views/dashboard/graphs/index.ts | 36 ++++++++++++++ 13 files changed, 259 insertions(+), 10 deletions(-) create mode 100644 src/views/dashboard/controls/Image.vue create mode 100644 src/views/dashboard/controls/Tab.vue create mode 100644 src/views/dashboard/graphs/EndpointList.vue create mode 100644 src/views/dashboard/graphs/InstanceList.vue create mode 100644 src/views/dashboard/graphs/index.ts diff --git a/package.json b/package.json index cb1d3363..6a8497d9 100644 --- a/package.json +++ b/package.json @@ -76,9 +76,15 @@ "ecmaVersion": 2020 }, "rules": { - "@typescript-eslint/no-explicit-any": [ - "off" - ] + "@typescript-eslint/no-explicit-any": "off", + "vue/attributes-order": "off", + "vue/one-component-per-file": "off", + "vue/html-closing-bracket-newline": "off", + "vue/max-attributes-per-line": "off", + "vue/multiline-html-element-content-newline": "off", + "vue/singleline-html-element-content-newline": "off", + "vue/attribute-hyphenation": "off", + "vue/require-default-prop": "off" }, "overrides": [ { diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 03f50aa0..01b0eef3 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -26,7 +26,7 @@ import { } from "vue"; import type { PropType } from "vue"; import * as echarts from "echarts"; -// eslint-disable-next-line no-undef +/*global Nullable*/ const dom = ref>(null); const state = reactive<{ instanceChart: any }>({ instanceChart: null, diff --git a/src/graph/fragments/selector.ts b/src/graph/fragments/selector.ts index a938ee21..d66aae0b 100644 --- a/src/graph/fragments/selector.ts +++ b/src/graph/fragments/selector.ts @@ -30,3 +30,26 @@ export const Layers = { layers: listLayers `, }; +export const Instances = { + variable: "$serviceId: ID!, $duration: Duration!", + query: ` + getServiceInstances(duration: $duration, serviceId: $serviceId) { + key: id + label: name + language + attributes { + name + value + } + } + `, +}; +export const Endpoints = { + variable: "$serviceId: ID!, $keyword: String!", + query: ` + getEndpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) { + key: id + label: name + } +`, +}; diff --git a/src/graph/query/selector.ts b/src/graph/query/selector.ts index 83d9229c..1681ff5c 100644 --- a/src/graph/query/selector.ts +++ b/src/graph/query/selector.ts @@ -14,7 +14,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Services, Layers } from "../fragments/selector"; +import { Services, Layers, Endpoints, Instances } from "../fragments/selector"; export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`; export const queryLayers = `query ${Layers.query}`; +export const queryEndpoints = `query queryEndpoints(${Endpoints.variable}) {${Endpoints.query}}`; + +export const queryInstances = `query queryInstances(${Instances.variable}) {${Instances.query}}`; diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 8b046835..a26b938d 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -20,7 +20,7 @@ import { Duration, DurationTime } from "@/types/app"; import getLocalTime from "@/utils/localtime"; import getDurationRow from "@/utils/dateTime"; import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat"; - +/*global Nullable*/ interface AppState { durationRow: any; utc: string; diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 0e1dfe82..10453ae4 100644 --- a/src/store/modules/selectors.ts +++ b/src/store/modules/selectors.ts @@ -15,7 +15,7 @@ * limitations under the License. */ import { defineStore } from "pinia"; -import { Option } from "@/types/app"; +import { Option, Duration } from "@/types/app"; import { store } from "@/store"; import graph from "@/graph"; import { AxiosResponse } from "axios"; @@ -45,6 +45,27 @@ export const selectorStore = defineStore({ } return res; }, + async getServiceInstances(params: { + serviceId: string; + duration: Duration; + }): Promise { + const res: AxiosResponse = await graph + .query("queryInstances") + .params(params); + return res; + }, + async getEndpoints(params: { + keyword: string; + serviceId: string; + }): Promise { + if (!params.keyword) { + params.keyword = ""; + } + const res: AxiosResponse = await graph + .query("queryEndpoints") + .params(params); + return res; + }, }, }); diff --git a/src/views/dashboard/controls/Image.vue b/src/views/dashboard/controls/Image.vue new file mode 100644 index 00000000..777e8284 --- /dev/null +++ b/src/views/dashboard/controls/Image.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue new file mode 100644 index 00000000..679043c9 --- /dev/null +++ b/src/views/dashboard/controls/Tab.vue @@ -0,0 +1,14 @@ + diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 39deebf9..e97865bf 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -23,9 +23,9 @@ export const ChartTypes = [ { label: "Card", value: "card" }, { label: "Progress Bar", value: "progressBar" }, { label: "Table", value: "table" }, - { label: "Image", value: "image" }, { label: "Endpoint List", value: "endpointList" }, { label: "Instance List", value: "instanceList" }, + { label: "Image", value: "image" }, { label: "Tab", value: "tab" }, ]; export enum MetricQueryTypes { diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue new file mode 100644 index 00000000..4c34fc9c --- /dev/null +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -0,0 +1,55 @@ + + + diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue new file mode 100644 index 00000000..4c34fc9c --- /dev/null +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -0,0 +1,55 @@ + + + diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue index bf68dd02..1bfd50bd 100644 --- a/src/views/dashboard/graphs/Table.vue +++ b/src/views/dashboard/graphs/Table.vue @@ -60,10 +60,11 @@ const props = defineProps({ default: () => ({}), }, }); -const chartTable = ref(null); +/*global Nullable*/ +const chartTable = ref>(null); const initWidth = ref(0); const nameWidth = ref(0); -const draggerName = ref(0); +const draggerName = ref>(null); onMounted(() => { if (!chartTable.value) { return; diff --git a/src/views/dashboard/graphs/index.ts b/src/views/dashboard/graphs/index.ts new file mode 100644 index 00000000..b56f7832 --- /dev/null +++ b/src/views/dashboard/graphs/index.ts @@ -0,0 +1,36 @@ +/** + * 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 ChartArea from "./Area.vue"; +import ChartLine from "./Line.vue"; +import ChartBar from "./Bar.vue"; +import ChartHeatmap from "./Heatmap.vue"; +import ProgressBar from "./ProgressBar.vue"; +import ChartTable from "./Table.vue"; +import ChartPie from "./Pie.vue"; +import ChartCard from "./Card.vue"; + +export default { + ChartLine, + ChartBar, + ChartHeatmap, + ProgressBar, + ChartArea, + ChartTable, + ChartPie, + ChartCard, +};