From 2b2af67d2ef80856128343878c96f491094d3e44 Mon Sep 17 00:00:00 2001 From: Fine Date: Wed, 9 Aug 2023 16:32:58 +0800 Subject: [PATCH] feat: add metric mode --- src/locales/lang/en.ts | 1 + src/locales/lang/es.ts | 1 + src/locales/lang/zh.ts | 1 + src/types/components.d.ts | 3 --- .../topology/components/Expressions.vue | 27 +++++++++++++++++++ .../related/topology/components/Graph.vue | 2 +- .../topology/components/PodTopology.vue | 1 + .../related/topology/components/Settings.vue | 26 +++++++++++++++--- 8 files changed, 55 insertions(+), 7 deletions(-) create mode 100644 src/views/dashboard/related/topology/components/Expressions.vue diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index db2eb4ab..f0f9f793 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -378,5 +378,6 @@ const msg = { menus: "Menus", saveReload: "Save and reload the page", document: "Documentation", + metricMode: "Metric Mode", }; export default msg; diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts index aa7953e6..965ea78c 100644 --- a/src/locales/lang/es.ts +++ b/src/locales/lang/es.ts @@ -378,5 +378,6 @@ const msg = { menus: "Menus", saveReload: "Save and reload the page", document: "Documentation", + metricMode: "Metric Mode", }; export default msg; diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 430755e5..27e7e593 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -376,5 +376,6 @@ const msg = { menusManagement: "菜单", saveReload: "保存并重新加载页面", document: "文档", + metricMode: "Metric Mode", }; export default msg; diff --git a/src/types/components.d.ts b/src/types/components.d.ts index cae7912a..fa07aadd 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -7,7 +7,6 @@ declare module '@vue/runtime-core' { export interface GlobalComponents { DateCalendar: typeof import('./../components/DateCalendar.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] - ElCard: typeof import('element-plus/es')['ElCard'] ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElDialog: typeof import('element-plus/es')['ElDialog'] @@ -18,13 +17,11 @@ declare module '@vue/runtime-core' { ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] - ElLink: typeof import('element-plus/es')['ElLink'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] - ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopover: typeof import('element-plus/es')['ElPopover'] ElProgress: typeof import('element-plus/es')['ElProgress'] ElRadio: typeof import('element-plus/es')['ElRadio'] diff --git a/src/views/dashboard/related/topology/components/Expressions.vue b/src/views/dashboard/related/topology/components/Expressions.vue new file mode 100644 index 00000000..78bf6c37 --- /dev/null +++ b/src/views/dashboard/related/topology/components/Expressions.vue @@ -0,0 +1,27 @@ + + + + diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 22fc4078..f6318aeb 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -667,7 +667,7 @@ limitations under the License. --> padding: 0 15px; border-radius: 3px; color: $disabled-color; - border: 1px solid $disabled-color; + border: 1px solid #eee; background-color: $theme-background; box-shadow: #eee 1px 2px 10px; transition: all 0.5ms linear; diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 114570c4..a987f56b 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -22,6 +22,7 @@ limitations under the License. --> :options="DepthList" placeholder="Select a option" @change="changeDepth" + size="small" /> diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index 95d47668..999af06e 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -13,6 +13,17 @@ 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. --> - + + - + + + @@ -189,8 +203,9 @@ limitations under the License. --> import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; import type { Node } from "@/types/topology"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; - import { EntityType, LegendOpt, MetricsType } from "../../../data"; + import { EntityType, LegendOpt, MetricsType, MetricModes } from "../../../data"; import Metrics from "./Metrics.vue"; + import Expressions from "./Expressions.vue"; /*global defineEmits */ const emit = defineEmits(["update", "updateNodes"]); @@ -198,6 +213,7 @@ limitations under the License. --> const dashboardStore = useDashboardStore(); const topologyStore = useTopologyStore(); const { selectedGrid } = dashboardStore; + const isExpression = ref(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false); const nodeDashboard = selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : ""; const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity); @@ -431,6 +447,9 @@ limitations under the License. --> function setConfigType(type: string) { configType.value = type; } + function changeMetricMode() { + console.log(isExpression.value); + }