From 3eef246d1d076871a76d7c7ee11f84a0ae4a0da5 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Fri, 14 Jan 2022 12:27:09 +0800 Subject: [PATCH 01/41] feat: query layers --- src/graph/query/selector.ts | 2 +- src/store/modules/selectors.ts | 4 +-- src/views/dashboard/New.vue | 28 +++++++++++++------ .../dashboard/configuration/ConfigEdit.vue | 2 +- vue.config.js | 12 +++++++- 5 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/graph/query/selector.ts b/src/graph/query/selector.ts index 1681ff5c..4231257a 100644 --- a/src/graph/query/selector.ts +++ b/src/graph/query/selector.ts @@ -17,7 +17,7 @@ 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}}`; +export const queryLayers = `query listLayer {${Layers.query}}`; diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 10453ae4..99edc2bf 100644 --- a/src/store/modules/selectors.ts +++ b/src/store/modules/selectors.ts @@ -33,7 +33,7 @@ export const selectorStore = defineStore({ async fetchLayers(): Promise { const res: AxiosResponse = await graph.query("queryLayers").params({}); - return res; + return res.data || {}; }, async fetchServices(layer: string): Promise { const res: AxiosResponse = await graph @@ -43,7 +43,7 @@ export const selectorStore = defineStore({ if (!res.data.errors) { this.services = res.data.data.services; } - return res; + return res.data; }, async getServiceInstances(params: { serviceId: string; diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 7a7a5d0e..a40cb6eb 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -26,8 +26,8 @@ limitations under the License. -->
{{ t("layer") }}
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index 52505196..10f17d51 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -17,13 +17,20 @@ limitations under the License. --> :data="selectorStore.instances" style="width: 100%; height: 100%; overflow: auto" > - + + + + From db8338ffa5980dcdd9e3e4aaade000ebfb3cee36 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 18 Jan 2022 14:05:50 +0800 Subject: [PATCH 08/41] feat: update router and create service list component --- src/router/dashboard.ts | 24 ++++++- src/views/dashboard/New.vue | 5 +- .../dashboard/configuration/ConfigEdit.vue | 6 +- src/views/dashboard/data.ts | 1 + src/views/dashboard/graphs/InstanceList.vue | 2 +- src/views/dashboard/graphs/ServiceList.vue | 65 +++++++++++++++++++ src/views/dashboard/graphs/index.ts | 2 + 7 files changed, 94 insertions(+), 11 deletions(-) create mode 100644 src/views/dashboard/graphs/ServiceList.vue diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts index c1924a21..0bb9e519 100644 --- a/src/router/dashboard.ts +++ b/src/router/dashboard.ts @@ -48,9 +48,29 @@ export const routesDashboard: Array = [ }, }, { - path: "/dashboard/edit/:layerId/:entity/:dashboardId", + path: "/dashboard/:layerId/:entity/:name", component: () => import("@/views/dashboard/Edit.vue"), - name: "Edit", + name: "Create", + meta: { + title: "dashboardEdit", + exact: false, + notShow: true, + }, + }, + { + path: "/dashboard/:layerId/:entity/:serviceId/:name", + component: () => import("@/views/dashboard/Edit.vue"), + name: "CreateService", + meta: { + title: "dashboardEdit", + exact: false, + notShow: true, + }, + }, + { + path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name", + component: () => import("@/views/dashboard/Edit.vue"), + name: "ViewPod", meta: { title: "dashboardEdit", exact: false, diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 419ed188..6147dc4d 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -58,7 +58,6 @@ import { useI18n } from "vue-i18n"; import router from "@/router"; import { useSelectorStore } from "@/store/modules/selectors"; import { EntityType } from "./data"; -import uuid from "@/utils/uuid"; import { ElMessage } from "element-plus"; const { t } = useI18n(); @@ -70,8 +69,8 @@ const states = reactive({ layers: [], }); const onCreate = () => { - const id = uuid(); - const path = `/dashboard/edit/${states.selectedLayer}/${states.entity}/${id}`; + const name = states.name.split(" ").join("-"); + const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`; router.push(path); }; onBeforeMount(async () => { diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index 727a6aec..db821c0c 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -50,11 +50,7 @@ limitations under the License. --> - +
{ } }); function linkInstance(row: any) { - const path = `/dashboard/view/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}`; + const path = `/dashboard/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}/test`; router.push(path); } diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue new file mode 100644 index 00000000..d07dfd09 --- /dev/null +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -0,0 +1,65 @@ + + + + diff --git a/src/views/dashboard/graphs/index.ts b/src/views/dashboard/graphs/index.ts index d84aae03..dedb6454 100644 --- a/src/views/dashboard/graphs/index.ts +++ b/src/views/dashboard/graphs/index.ts @@ -25,6 +25,7 @@ import Pie from "./Pie.vue"; import Card from "./Card.vue"; import InstanceList from "./InstanceList.vue"; import EndpointList from "./EndpointList.vue"; +import ServiceList from "./ServiceList.vue"; export default { Line, @@ -37,4 +38,5 @@ export default { Card, EndpointList, InstanceList, + ServiceList, }; From 2e82d52e7108e0776e2a8e1a28b1c9d4b3313225 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 18 Jan 2022 15:53:43 +0800 Subject: [PATCH 09/41] feat: add list components config --- src/locales/lang/en.ts | 1 + src/locales/lang/zh.ts | 1 + src/types/dashboard.ts | 27 +++++++- .../dashboard/configuration/ConfigEdit.vue | 42 +++++++++++-- .../graph-styles/EndpointList.vue | 63 +++++++++++++++++++ .../graph-styles/InstanceList.vue | 63 +++++++++++++++++++ .../graph-styles/ServiceList.vue | 63 +++++++++++++++++++ .../configuration/graph-styles/index.ts | 6 ++ src/views/dashboard/data.ts | 11 ++++ src/views/dashboard/graphs/EndpointList.vue | 26 +++++--- src/views/dashboard/graphs/InstanceList.vue | 26 +++++--- src/views/dashboard/graphs/ServiceList.vue | 26 +++++--- 12 files changed, 318 insertions(+), 37 deletions(-) create mode 100644 src/views/dashboard/configuration/graph-styles/EndpointList.vue create mode 100644 src/views/dashboard/configuration/graph-styles/InstanceList.vue create mode 100644 src/views/dashboard/configuration/graph-styles/ServiceList.vue diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 462109d8..a57b3d19 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -73,6 +73,7 @@ const msg = { showBackground: "Show Background", areaOpacity: "Area Opacity", editGraph: "Edit Graph Options", + dashboardName: "Select Dashboard Name", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 93ebc760..d2a2a7a5 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -71,6 +71,7 @@ const msg = { showBackground: "显示背景", areaOpacity: "透明度", editGraph: "编辑图表选项", + dashboardName: "选择仪表板名称", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index 1680dc34..1bd2e6b7 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -47,7 +47,14 @@ export interface StandardConfig { seconds?: string; } -export type GraphConfig = BarConfig | LineConfig | CardConfig | TableConfig; +export type GraphConfig = + | BarConfig + | LineConfig + | CardConfig + | TableConfig + | EndpointListConfig + | ServiceListConfig + | InstanceListConfig; export interface BarConfig { type?: string; showBackground?: boolean; @@ -81,3 +88,21 @@ export interface TopListConfig { type?: string; topN: number; } + +export interface ServiceListConfig { + type?: string; + dashboardName: string; + fontSize: number; +} + +export interface InstanceListConfig { + type?: string; + dashboardName: string; + fontSize: number; +} + +export interface EndpointListConfig { + type?: string; + dashboardName: string; + fontSize: number; +} diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index db821c0c..ae70e0fe 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -50,8 +50,21 @@ limitations under the License. -->
- -
+ +
+ +
+
:value="states.valueType" :options="states.valueTypes" size="mini" - placeholder="Select a metric" @change="changeValueType" class="selectors" v-loading="loading" @@ -117,6 +129,7 @@ import { ChartTypes, DefaultGraphConfig, PodsChartTypes, + TableChartTypes, } from "../data"; import { Option } from "@/types/app"; import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard"; @@ -148,10 +161,11 @@ export default defineComponent({ activeNames: string; source: any; index: string; - graph: GraphConfig; + graph: GraphConfig | any; widget: WidgetConfig | any; standard: StandardConfig; visType: Option[]; + isTable: boolean; }>({ metrics: selectedGrid.metrics || [], valueTypes: [], @@ -164,17 +178,27 @@ export default defineComponent({ widget: selectedGrid.widget, standard: selectedGrid.standard, visType: [], + isTable: false, }); + + states.isTable = TableChartTypes.includes(states.graph.type || ""); + if (states.metrics[0]) { queryMetricType(states.metrics[0]); } if (params.entity === "service") { - states.visType = ChartTypes; - } else { + states.visType = ChartTypes.filter( + (d: Option) => d.value !== "serviceList" + ); + } else if (params.entity === "all") { states.visType = ChartTypes.filter( (d: Option) => !PodsChartTypes.includes(d.value) ); + } else { + states.visType = ChartTypes.filter( + (d: Option) => !TableChartTypes.includes(d.value) + ); } async function changeMetrics(arr: Option[]) { @@ -213,6 +237,11 @@ export default defineComponent({ states.graph = { ...DefaultGraphConfig[item.value], }; + states.isTable = TableChartTypes.includes(states.graph.type || ""); + } + + function changeDashboard(item: Option[]) { + states.graph.dashboardName = item[0].value; } const metricOpts = [ @@ -302,6 +331,7 @@ export default defineComponent({ updateGraphOptions, updateStandardOptions, applyConfig, + changeDashboard, loading, }; }, diff --git a/src/views/dashboard/configuration/graph-styles/EndpointList.vue b/src/views/dashboard/configuration/graph-styles/EndpointList.vue new file mode 100644 index 00000000..e6c86101 --- /dev/null +++ b/src/views/dashboard/configuration/graph-styles/EndpointList.vue @@ -0,0 +1,63 @@ + + + + diff --git a/src/views/dashboard/configuration/graph-styles/InstanceList.vue b/src/views/dashboard/configuration/graph-styles/InstanceList.vue new file mode 100644 index 00000000..8d80e992 --- /dev/null +++ b/src/views/dashboard/configuration/graph-styles/InstanceList.vue @@ -0,0 +1,63 @@ + + + + diff --git a/src/views/dashboard/configuration/graph-styles/ServiceList.vue b/src/views/dashboard/configuration/graph-styles/ServiceList.vue new file mode 100644 index 00000000..f419209d --- /dev/null +++ b/src/views/dashboard/configuration/graph-styles/ServiceList.vue @@ -0,0 +1,63 @@ + + + + diff --git a/src/views/dashboard/configuration/graph-styles/index.ts b/src/views/dashboard/configuration/graph-styles/index.ts index 8e487cc6..a1b673d2 100644 --- a/src/views/dashboard/configuration/graph-styles/index.ts +++ b/src/views/dashboard/configuration/graph-styles/index.ts @@ -18,9 +18,15 @@ import AreaConfig from "./Area.vue"; import LineConfig from "./Line.vue"; import BarConfig from "./Bar.vue"; +import InstanceListConfig from "./InstanceList.vue"; +import EndpointListConfig from "./EndpointList.vue"; +import ServiceListConfig from "./ServiceList.vue"; export default { AreaConfig, LineConfig, BarConfig, + InstanceListConfig, + EndpointListConfig, + ServiceListConfig, }; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 5404fc90..40053266 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -16,6 +16,8 @@ */ export const PodsChartTypes = ["EndpointList", "InstanceList"]; +export const TableChartTypes = ["EndpointList", "InstanceList", "ServiceList"]; + export const ChartTypes = [ { label: "Bar", value: "Bar" }, { label: "Line", value: "Line" }, @@ -60,9 +62,18 @@ export const DefaultGraphConfig: { [key: string]: any } = { }, InstanceList: { type: "InstanceList", + dashboardName: "", + fontSize: 12, }, EndpointList: { type: "EndpointList", + dashboardName: "", + fontSize: 12, + }, + ServiceList: { + type: "ServiceList", + dashboardName: "", + fontSize: 12, }, }; diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 4547f7e5..7594d5f8 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -14,46 +14,52 @@ See the License for the specific language governing permissions and limitations under the License. --> 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. --> diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index 887e3210..289bb5ce 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -14,6 +14,21 @@ See the License for the specific language governing permissions and limitations under the License. --> @@ -50,8 +67,9 @@ import { useRoute } from "vue-router"; import { Option } from "@/types/app"; import { GraphConfig } from "@/types/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard"; -import { MetricTypes, MetricQueryTypes, TableChartTypes } from "../data"; +import { MetricTypes, TableChartTypes } from "../data"; import { ElMessage } from "element-plus"; +import Icon from "@/components/Icon.vue"; const props = defineProps({ graph: { @@ -65,25 +83,26 @@ const { selectedGrid } = dashboardStore; const states = reactive<{ metrics: string[]; metricTypes: string[]; - metricTypeList: Option[]; - metricQueryType: string; + metricTypeList: Option[][]; visType: Option[]; isTable: boolean; metricList: (Option & { type: string })[]; graph: GraphConfig | any; }>({ - metrics: selectedGrid.metrics || [], - metricTypes: selectedGrid.metricTypes || [], + metrics: selectedGrid.metrics || [""], + metricTypes: selectedGrid.metricTypes || [""], metricTypeList: [], - metricQueryType: "", visType: [], isTable: false, metricList: [], graph: props.graph, }); -states.isTable = TableChartTypes.includes(states.graph.type || ""); +states.isTable = TableChartTypes.includes(states.graph.type); + const params = useRoute().params; + setMetricType(); + async function setMetricType() { const json = await dashboardStore.fetchMetricList(); if (json.errors) { @@ -94,38 +113,55 @@ async function setMetricType() { (d: { catalog: string }) => String(params.entity).toUpperCase() === d.catalog ); - const name = states.metrics[0]; - if (!name) { - return; - } const metrics: any = states.metricList.filter( - (d: { value: string }) => d.value === name - )[0]; - states.metricTypeList = MetricTypes[metrics.type]; - states.metricTypes = [MetricTypes[metrics.type][0].value]; - emit("apply", { metricTypes: states.metricTypes }); + (d: { value: string; type: string }) => { + const metric = states.metrics.filter((m: string) => m === d.value)[0]; + if (metric) { + return d; + } + } + ); + for (const metric of metrics) { + states.metricTypeList.push(MetricTypes[metric.type]); + } + queryMetrics(); } -function changeMetrics(arr: (Option & { type: string })[]) { + +function changeMetrics(index: number, arr: (Option & { type: string })[]) { if (!arr.length) { states.metricTypeList = []; states.metricTypes = []; emit("apply", { metricTypes: states.metricTypes }); return; } - states.metrics = arr.map((d: Option) => d.value); - if (arr[0]) { - const typeOfMetrics = arr[0].type; - states.metricTypeList = MetricTypes[typeOfMetrics]; - states.metricTypes = [MetricTypes[typeOfMetrics][0].value]; - emit("apply", { metricTypes: states.metricTypes, metrics: states.metrics }); - queryMetrics(); - } + states.metrics[index] = arr[0].value; + const typeOfMetrics = arr[0].type; + states.metricTypeList[index] = MetricTypes[typeOfMetrics]; + states.metricTypes[index] = MetricTypes[typeOfMetrics][0].value; + emit("apply", { metricTypes: states.metricTypes, metrics: states.metrics }); + queryMetrics(); } -function changeMetricType(val: Option[]) { - states.metricTypes = [val[0].value]; - states.metricQueryType = (MetricQueryTypes as any)[states.metricTypes[0]]; +function changeMetricType(index: number, opt: Option[]) { + const metric = + states.metricList.filter( + (d: Option) => states.metrics[index] === d.value + )[0] || {}; + if (states.isTable) { + states.metricTypes[index] = opt[0].value; + states.metricTypeList[index] = (MetricTypes as any)[metric.type]; + } else { + states.metricTypes = states.metricTypes.map((d: string) => { + d = opt[0].value; + return d; + }); + states.metricTypeList = states.metricTypeList.map((d: Option[]) => { + d = (MetricTypes as any)[metric.type]; + + return d; + }); + } emit("apply", { metricTypes: states.metricTypes }); queryMetrics(); } @@ -153,6 +189,19 @@ async function queryMetrics() { function changeDashboard(item: Option[]) { states.graph.dashboardName = item[0].value; } +function addMetric() { + states.metrics.push(""); + if (!states.isTable) { + states.metricTypes.push(states.metricTypes[0]); + states.metricTypeList.push(states.metricTypeList[0]); + return; + } + states.metricTypes.push(""); +} +function deleteMetric(index: number) { + states.metrics.splice(index, 1); + states.metricTypes.splice(index, 1); +} From 86ec9c985bd904512a021cfbb51785c1185a28d2 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Thu, 20 Jan 2022 15:52:53 +0800 Subject: [PATCH 14/41] style: fix building info --- src/components/DateCalendar.vue | 14 ++-- src/components/Graph.vue | 12 +--- src/components/Icon.vue | 9 ++- src/components/Selector.vue | 5 +- src/components/TimePicker.vue | 70 ++++++++++--------- src/store/modules/dashboard.ts | 3 +- src/views/Log.vue | 2 +- .../dashboard/configuration/MetricOptions.vue | 3 +- .../configuration/StandardOptions.vue | 3 +- .../dashboard/configuration/WidgetOptions.vue | 3 +- .../configuration/graph-styles/Area.vue | 3 +- .../configuration/graph-styles/Bar.vue | 3 +- .../configuration/graph-styles/Card.vue | 3 +- .../graph-styles/EndpointList.vue | 3 +- .../graph-styles/InstanceList.vue | 3 +- .../configuration/graph-styles/Line.vue | 3 +- .../graph-styles/ServiceList.vue | 3 +- .../configuration/graph-styles/Table.vue | 3 +- .../configuration/graph-styles/TopList.vue | 3 +- src/views/dashboard/controls/Tab.vue | 4 +- src/views/dashboard/graphs/Area.vue | 2 +- src/views/dashboard/graphs/Bar.vue | 3 +- src/views/dashboard/graphs/Card.vue | 2 +- src/views/dashboard/graphs/EndpointList.vue | 3 +- src/views/dashboard/graphs/HeatMap.vue | 3 +- src/views/dashboard/graphs/InstanceList.vue | 3 +- src/views/dashboard/graphs/Line.vue | 3 +- src/views/dashboard/graphs/Pie.vue | 3 +- src/views/dashboard/graphs/ServiceList.vue | 3 +- src/views/dashboard/graphs/Table.vue | 3 +- src/views/dashboard/graphs/TopList.vue | 3 +- src/views/service/Profiles.vue | 2 +- src/views/service/Topology.vue | 2 +- src/views/service/Traces.vue | 2 +- 34 files changed, 108 insertions(+), 84 deletions(-) diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index b5736399..0b6b105b 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -277,15 +277,9 @@ limitations under the License. --> diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 90936f7d..750c4e71 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -172,11 +172,10 @@ export const dashboardStore = defineStore({ return res.data; }, - async fetchMetricValue(config: LayoutConfig) { + async fetchMetricValue() { // if (!config.metricTypes) { // return; // } - // config.metricTypes = "readMetricsValues"; const appStoreWithOut = useAppStoreWithOut(); const variable = { condition: { diff --git a/src/views/Log.vue b/src/views/Log.vue index 6e121b20..f70cb63a 100644 --- a/src/views/Log.vue +++ b/src/views/Log.vue @@ -16,7 +16,7 @@ limitations under the License. -->
{{ props.msg }}
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 1874a417..cfd5bf1f 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -20,6 +20,7 @@ import { computed } from "vue"; import type { PropType } from "vue"; import { Event } from "@/types/events"; import { LineConfig } from "@/types/dashboard"; +import { config } from "@vue/test-utils"; /*global defineProps */ const props = defineProps({ @@ -37,6 +38,8 @@ const props = defineProps({ smooth: false, showSymbol: false, opacity: 0.4, + showXAxis: true, + showYAxis: true, }), }, }); @@ -143,6 +146,8 @@ function getOption() { color, tooltip: { trigger: "axis", + zlevel: 1000, + z: 60, backgroundColor: "rgb(50,50,50)", textStyle: { fontSize: 13, @@ -171,6 +176,7 @@ function getOption() { }, xAxis: { type: "category", + show: props.config.showXAxis, axisTick: { lineStyle: { color: "#c1c5ca41" }, alignWithLabel: true, @@ -184,7 +190,11 @@ function getOption() { axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: "#c1c5ca41", type: "dashed" } }, - axisLabel: { color: "#9da5b2", fontSize: "11" }, + axisLabel: { + color: "#9da5b2", + fontSize: "11", + show: props.config.showYAxis, + }, }, series: temp, }; diff --git a/src/views/dashboard/graphs/MinLine.vue b/src/views/dashboard/graphs/MinLine.vue new file mode 100644 index 00000000..e69de29b From 400a1ae5363655ee327c290b43ab0ec2aaf753b9 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Sun, 23 Jan 2022 17:49:41 +0800 Subject: [PATCH 27/41] refactor: set selectedGrid --- .../dashboard/configuration/ConfigEdit.vue | 109 ++++-------------- .../dashboard/configuration/MetricOptions.vue | 22 +--- .../configuration/StandardOptions.vue | 23 ++-- .../dashboard/configuration/WidgetOptions.vue | 23 ++-- .../configuration/graph-styles/Area.vue | 21 ++-- .../configuration/graph-styles/Bar.vue | 22 ++-- .../configuration/graph-styles/Card.vue | 22 ++-- .../graph-styles/EndpointList.vue | 21 ++-- .../graph-styles/InstanceList.vue | 22 ++-- .../configuration/graph-styles/Line.vue | 25 ++-- .../graph-styles/ServiceList.vue | 22 ++-- .../configuration/graph-styles/Table.vue | 29 ++--- .../configuration/graph-styles/TopList.vue | 23 ++-- src/views/dashboard/graphs/Line.vue | 1 - 14 files changed, 131 insertions(+), 254 deletions(-) diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index d684754f..91e9aa0c 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -16,21 +16,23 @@ limitations under the License. -->
- {{ states.widget.title }} -
- + {{ selectedGrid.widget.title }} +
+
-
{{ t("noData") }}
+
+ {{ t("noData") }} +
@@ -39,12 +41,7 @@ limitations under the License. --> :style="{ '--el-collapse-header-font-size': '15px' }" > - +
@@ -52,34 +49,20 @@ limitations under the License. --> v-for="(type, index) in states.visType" :key="index" @click="changeChartType(type)" - :class="{ active: type.value === states.graph.type }" + :class="{ active: type.value === selectedGrid.graph.type }" > {{ type.label }}
- + - + - +
@@ -106,7 +89,6 @@ import { EntityType, } from "../data"; import { Option } from "@/types/app"; -import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard"; import graphs from "../graphs"; import configs from "./graph-styles"; import WidgetOptions from "./WidgetOptions.vue"; @@ -133,26 +115,16 @@ export default defineComponent({ activeNames: string; source: any; index: string; - graph: GraphConfig | any; - widget: WidgetConfig | any; - standard: StandardConfig; visType: Option[]; isTable: boolean; - metrics: string[]; - metricTypes: string[]; }>({ activeNames: "1", source: {}, index: selectedGrid.i, - graph: selectedGrid.graph, - widget: selectedGrid.widget, - standard: selectedGrid.standard, visType: [], isTable: false, - metrics: [], - metricTypes: [], }); - states.isTable = TableChartTypes.includes(states.graph.type || ""); + states.isTable = TableChartTypes.includes(selectedGrid.graph.type || ""); if (entity === EntityType[0].value) { states.visType = ChartTypes.filter( @@ -169,62 +141,24 @@ export default defineComponent({ } function changeChartType(item: Option) { - states.graph = { + const graph = { + ...selectedGrid.graph, ...DefaultGraphConfig[item.value], }; - states.isTable = TableChartTypes.includes(states.graph.type); - } - function updateWidgetOptions(param: { [key: string]: unknown }) { - states.widget = { - ...states.widget, - ...param, - }; - } - - function updateGraphOptions(param: { [key: string]: unknown }) { - states.graph = { - ...states.graph, - ...param, - }; - } - - function updateStandardOptions(param: { [key: string]: unknown }) { - states.standard = { - ...states.standard, - ...param, - }; + states.isTable = TableChartTypes.includes(selectedGrid.graph.type); + dashboardStore.selectWidget({ ...selectedGrid, graph }); } function getSource(source: unknown) { states.source = source; } - function getMetricsConfig(opts: { - metrics?: string[]; - metricTypes?: string[]; - }) { - if (opts.metrics !== undefined) { - states.metrics = opts.metrics; - } - if (opts.metricTypes !== undefined) { - states.metricTypes = opts.metricTypes; - } - } - function setLoading(load: boolean) { loading.value = load; } function applyConfig() { - const opts = { - ...dashboardStore.selectedGrid, - metrics: states.metrics, - metricTypes: states.metricTypes, - widget: states.widget, - graph: states.graph, - standard: states.standard, - }; - dashboardStore.setConfigs(opts); + dashboardStore.setConfigs(dashboardStore.selectedGrid); dashboardStore.setConfigPanel(false); } @@ -234,13 +168,10 @@ export default defineComponent({ changeChartType, t, appStoreWithOut, - updateWidgetOptions, configHeight, - updateGraphOptions, - updateStandardOptions, + selectedGrid, applyConfig, getSource, - getMetricsConfig, setLoading, }; }, diff --git a/src/views/dashboard/configuration/MetricOptions.vue b/src/views/dashboard/configuration/MetricOptions.vue index 96154e78..611374fc 100644 --- a/src/views/dashboard/configuration/MetricOptions.vue +++ b/src/views/dashboard/configuration/MetricOptions.vue @@ -70,7 +70,6 @@ limitations under the License. --> From bbb269a6656431a5c49bd442830664e77bb391fa Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Sun, 23 Jan 2022 21:48:23 +0800 Subject: [PATCH 30/41] feat: add metrics on endpointlist --- src/hooks/useProcessor.ts | 10 +-- src/types/selector.d.ts | 6 ++ src/views/dashboard/graphs/EndpointList.vue | 71 +++++++++++++++++++-- src/views/dashboard/graphs/InstanceList.vue | 2 +- src/views/dashboard/graphs/MinLine.vue | 0 5 files changed, 76 insertions(+), 13 deletions(-) delete mode 100644 src/views/dashboard/graphs/MinLine.vue diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index 54732cc8..b50ffb46 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -19,7 +19,7 @@ import { ElMessage } from "element-plus"; import { useDashboardStore } from "@/store/modules/dashboard"; import { useSelectorStore } from "@/store/modules/selectors"; import { useAppStoreWithOut } from "@/store/modules/app"; -import { Instance } from "@/types/selector"; +import { Instance, Endpoint } from "@/types/selector"; export function useQueryProcessor(config: any) { if (!(config.metrics && config.metrics.length)) { @@ -194,7 +194,7 @@ function aggregation(json: { } export function useQueryPodsMetrics( - pods: Instance[], + pods: Array, config: { metrics: string[]; metricTypes: string[] } ) { const appStore = useAppStoreWithOut(); @@ -205,7 +205,7 @@ export function useQueryPodsMetrics( const variables: string[] = [`$duration: Duration!`]; const { currentService } = selectorStore; - const fragmentList = pods.map((d: Instance, index: number) => { + const fragmentList = pods.map((d: Instance | Endpoint, index: number) => { const param = { scope: "ServiceInstance", serviceName: currentService.label, @@ -229,7 +229,7 @@ export function useQueryPodsMetrics( return { queryStr, conditions }; } export function usePodsSource( - instances: Instance[], + pods: Array, resp: { errors: string; data: { [key: string]: any } }, config: { metrics: string[]; metricTypes: string[] } ): any { @@ -237,7 +237,7 @@ export function usePodsSource( ElMessage.error(resp.errors); return {}; } - const data = instances.map((d: Instance | any, idx: number) => { + const data = pods.map((d: Instance | any, idx: number) => { config.metrics.map((name: string, index: number) => { const key = name + idx + index; diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts index 2c5c1d7b..f968d544 100644 --- a/src/types/selector.d.ts +++ b/src/types/selector.d.ts @@ -31,3 +31,9 @@ export type Instance = { instanceUUID: string; attributes: { name: string; value: string }[]; }; + +export type Endpoint = { + id: string; + label: string; + value: string; +}; diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 2dd7a162..eff152f9 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -46,6 +46,21 @@ limitations under the License. --> + + +
diff --git a/src/views/dashboard/graphs/MinLine.vue b/src/views/dashboard/graphs/MinLine.vue deleted file mode 100644 index e69de29b..00000000 From 28281e5bd4a19eda60a331f59af46c66b427d506 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Mon, 24 Jan 2022 13:35:42 +0800 Subject: [PATCH 31/41] fix: update endpointlist --- src/hooks/useProcessor.ts | 8 ++++--- src/views/dashboard/graphs/EndpointList.vue | 26 +++++++++++++-------- src/views/dashboard/graphs/InstanceList.vue | 10 ++++---- src/views/dashboard/graphs/ServiceList.vue | 7 +++++- 4 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index b50ffb46..a5573594 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -195,7 +195,8 @@ function aggregation(json: { export function useQueryPodsMetrics( pods: Array, - config: { metrics: string[]; metricTypes: string[] } + config: { metrics: string[]; metricTypes: string[] }, + scope: string ) { const appStore = useAppStoreWithOut(); const selectorStore = useSelectorStore(); @@ -207,9 +208,10 @@ export function useQueryPodsMetrics( const fragmentList = pods.map((d: Instance | Endpoint, index: number) => { const param = { - scope: "ServiceInstance", + scope, serviceName: currentService.label, - serviceInstanceName: d.label, + serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined, + endpointName: scope === "Endpoint" ? d.label : undefined, normal: currentService.normal, }; const f = config.metrics.map((name: string, idx: number) => { diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index eff152f9..e9937d39 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -100,8 +100,8 @@ const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const chartLoading = ref(false); const endpoints = ref([]); -const currentEndpoints = ref([]); -const pageSize = 7; +const searchEndpoints = ref([]); +const pageSize = 5; const searchText = ref(""); queryEndpoints(); @@ -115,16 +115,18 @@ async function queryEndpoints() { ElMessage.error(resp.errors); return; } + searchEndpoints.value = selectorStore.endpoints; endpoints.value = selectorStore.endpoints.splice(0, pageSize); - queryMetrics(endpoints.value); + queryEndpointMetrics(endpoints.value); } -async function queryMetrics(currentPods: Endpoint[]) { +async function queryEndpointMetrics(currentPods: Endpoint[]) { const { metrics } = dashboardStore.selectedGrid; if (metrics.length && metrics[0]) { const params = await useQueryPodsMetrics( currentPods, - dashboardStore.selectedGrid + dashboardStore.selectedGrid, + "Endpoint" ); const json = await dashboardStore.fetchMetricValue(params); @@ -142,13 +144,14 @@ async function queryMetrics(currentPods: Endpoint[]) { endpoints.value = currentPods; } function changePage(pageIndex: number) { - endpoints.value = selectorStore.endpoints.splice(pageIndex - 1, pageSize); + endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize); } function searchList() { - currentEndpoints.value = selectorStore.instances.filter( + const currentEndpoints = selectorStore.instances.filter( (d: { label: string }) => d.label.includes(searchText.value) ); - endpoints.value = currentEndpoints.value.splice(0, pageSize); + searchEndpoints.value = currentEndpoints; + endpoints.value = currentEndpoints.splice(0, pageSize); } watch( () => [ @@ -156,11 +159,14 @@ watch( dashboardStore.selectedGrid.metrics, ], () => { - const currentPods = currentEndpoints.value.splice(0, pageSize); - queryMetrics(currentPods); + queryEndpointMetrics(endpoints.value); } ); diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue index b290f5c9..bc0e345d 100644 --- a/src/views/dashboard/graphs/InstanceList.vue +++ b/src/views/dashboard/graphs/InstanceList.vue @@ -115,16 +115,17 @@ async function queryInstance() { searchInstances.value = selectorStore.instances; const currentInstances = searchInstances.value.splice(0, pageSize); - queryMetrics(currentInstances); + queryInstanceMetrics(currentInstances); } -async function queryMetrics(currentInstances: Instance[]) { +async function queryInstanceMetrics(currentInstances: Instance[]) { const { metrics } = dashboardStore.selectedGrid; if (metrics.length && metrics[0]) { const params = await useQueryPodsMetrics( currentInstances, - dashboardStore.selectedGrid + dashboardStore.selectedGrid, + "ServiceInstance" ); const json = await dashboardStore.fetchMetricValue(params); @@ -158,8 +159,7 @@ watch( dashboardStore.selectedGrid.metrics, ], () => { - const currentInstances = searchInstances.value.splice(0, pageSize); - queryMetrics(currentInstances); + queryInstanceMetrics(instances.value); } ); diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue index c4d71efc..0b6cb3de 100644 --- a/src/views/dashboard/graphs/ServiceList.vue +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -75,10 +75,11 @@ defineProps({ type: Object as PropType, default: () => ({ dashboardName: "", fontSize: 12 }), }, + intervalTime: { type: Array as PropType, default: () => [] }, }); const selectorStore = useSelectorStore(); const chartLoading = ref(false); -const pageSize = 7; +const pageSize = 5; const services = ref<{ label: string; layer: string }[]>([]); const searchServices = ref<{ layer: string; label: string }[]>([]); const searchText = ref(""); @@ -105,4 +106,8 @@ function searchList() { From 8a2eeae315a041ed34bceb8b83d45211d1140176 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Mon, 24 Jan 2022 14:03:11 +0800 Subject: [PATCH 32/41] feat: add metrics on servicelist --- src/types/selector.d.ts | 10 ++++ src/views/dashboard/graphs/ServiceList.vue | 67 ++++++++++++++++++++-- 2 files changed, 71 insertions(+), 6 deletions(-) diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts index f968d544..4b9a6f42 100644 --- a/src/types/selector.d.ts +++ b/src/types/selector.d.ts @@ -37,3 +37,13 @@ export type Endpoint = { label: string; value: string; }; + +export type Service = { + id: string; + value: string; + label: string; + group: string; + normal: boolean; + layers: string[]; + shortName: string; +}; diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue index 0b6cb3de..c7a30280 100644 --- a/src/views/dashboard/graphs/ServiceList.vue +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -46,6 +46,21 @@ limitations under the License. --> + + +
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index e643016b..d739217b 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -32,6 +32,18 @@ export const ChartTypes = [ { label: "Endpoint List", value: "EndpointList" }, { label: "Instance List", value: "InstanceList" }, ]; +export const MetricChartType: any = { + readMetricsValue: [{ label: "Card", value: "Card" }], + readMetricsValues: [ + { label: "Bar", value: "Bar" }, + { label: "Line", value: "Line" }, + { label: "Area", value: "Area" }, + ], + sortMetrics: [{ label: "Top List", value: "TopList" }], + readLabeledMetricsValues: [{ label: "Line", value: "Line" }], + readHeatMap: [{ label: "Heatmap", value: "Heatmap" }], + readSampledRecords: [{ label: "Top List", value: "TopList" }], +}; export const DefaultGraphConfig: { [key: string]: any } = { Bar: { type: "Bar", @@ -113,14 +125,6 @@ export const MetricTypes: { { label: "get sorted topN values", value: "readSampledRecords" }, ], }; -export const MetricChartType: { [key: string]: string } = { - readMetricsValue: "ChartNum", - readMetricsValues: "ChartLine", - sortMetrics: "ChartSlow", - readLabeledMetricsValues: "ChartLine", - readHeatMap: "ChartHeatmap", - readSampledRecords: "ChartSlow", -}; export enum MetricCatalog { SERVICE = "Service", diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index c10ddb57..8e9a06d3 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -29,17 +29,12 @@ limitations under the License. -->
- +
- + - +