From 767c92c60d2e4e0e6f819b450cb59bd6c3747bfa Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Wed, 30 Mar 2022 16:29:19 +0800 Subject: [PATCH] fix: polish pages and validate data (#46) --- src/components/Graph.vue | 37 +++++++- src/hooks/data.ts | 2 + src/hooks/useProcessor.ts | 17 +++- src/locales/lang/en.ts | 5 +- src/locales/lang/zh.ts | 1 + src/store/data.ts | 8 -- src/types/dashboard.ts | 25 ++---- src/views/dashboard/configuration/Text.vue | 11 +-- .../dashboard/configuration/Topology.vue | 6 +- src/views/dashboard/configuration/Widget.vue | 20 +++-- .../configuration/widget/WidgetOptions.vue | 7 +- .../widget/graph-styles/HeatMap.vue | 3 +- .../configuration/widget/metric/Index.vue | 89 ++++++++++--------- .../configuration/widget/metric/Standard.vue | 14 ++- src/views/dashboard/controls/Widget.vue | 51 ++++++----- src/views/dashboard/data.ts | 4 +- src/views/dashboard/graphs/Bar.vue | 16 ++-- src/views/dashboard/graphs/Card.vue | 17 ++-- src/views/dashboard/graphs/EndpointList.vue | 38 +++----- src/views/dashboard/graphs/HeatMap.vue | 7 +- src/views/dashboard/graphs/InstanceList.vue | 4 +- src/views/dashboard/graphs/Line.vue | 2 +- src/views/dashboard/graphs/ServiceList.vue | 4 +- src/views/dashboard/graphs/TopList.vue | 21 ++++- .../related/topology/components/Graph.vue | 16 +++- .../related/topology/utils/legend.ts | 8 +- 26 files changed, 241 insertions(+), 192 deletions(-) diff --git a/src/components/Graph.vue b/src/components/Graph.vue index e70b7a1d..c83f9db3 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -13,10 +13,23 @@ 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/hooks/data.ts b/src/hooks/data.ts index 5f1fdd88..4bc394fd 100644 --- a/src/hooks/data.ts +++ b/src/hooks/data.ts @@ -26,6 +26,8 @@ export enum MetricQueryTypes { export enum Calculations { Percentage = "percentage", ByteToKB = "byteToKB", + ByteToMB = "ByteToMB", + ByteToGB = "ByteToGB", Apdex = "apdex", Precision = "precision", ConvertSeconds = "convertSeconds", diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index e928b300..b1ed0e9c 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -28,6 +28,9 @@ export function useQueryProcessor(config: any) { if (!(config.metrics && config.metrics[0])) { return; } + if (!(config.metricTypes && config.metricTypes[0])) { + return; + } const appStore = useAppStoreWithOut(); const dashboardStore = useDashboardStore(); const selectorStore = useSelectorStore(); @@ -221,13 +224,19 @@ export function useQueryPodsMetrics( config: { metrics: string[]; metricTypes: string[] }, scope: string ) { + if (!(config.metrics && config.metrics[0])) { + return; + } + if (!(config.metricTypes && config.metricTypes[0])) { + return; + } const appStore = useAppStoreWithOut(); const selectorStore = useSelectorStore(); const conditions: { [key: string]: unknown } = { duration: appStore.durationTime, }; const variables: string[] = [`$duration: Duration!`]; - const { currentService } = selectorStore; + const currentService = selectorStore.currentService || {}; const fragmentList = pods.map( ( d: (Instance | Endpoint | Service) & { normal: boolean }, @@ -324,6 +333,12 @@ export function aggregation(val: number, config: any): number | string { case Calculations.ByteToKB: data = val / 1024; break; + case Calculations.ByteToMB: + data = val / 1024 / 1024; + break; + case Calculations.ByteToGB: + data = val / 1024 / 1024 / 1024; + break; case Calculations.Apdex: data = val / 10000; break; diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 609c05ea..0f198740 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -38,8 +38,8 @@ const msg = { health: "Health", groupName: "Group Name", topologies: "Topologies", - dataPanel: "Data Panel", - controlPanel: "Control Panel", + dataPanel: "Data Plane", + controlPanel: "Control Plane", eventList: "Event List", databasePanel: "Database Panel", meshServicePanel: "Service Panel", @@ -129,6 +129,7 @@ const msg = { textAlign: "Text Align", metricLabel: "Metric Label", showUnit: "Show Unit", + noGraph: "No Graph", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 43f09eb6..c607407a 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -129,6 +129,7 @@ const msg = { textAlign: "文本对齐", metricLabel: "指标标签", showUnit: "显示单位", + noGraph: "无图表", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/store/data.ts b/src/store/data.ts index eba3c3bb..d6d3e01e 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -21,14 +21,6 @@ export const NewControl = { h: 12, i: "0", type: "Widget", - widget: { - title: "", - }, - graph: {}, - standard: {}, - metrics: [""], - metricTypes: [""], - metricConfig: [], }; export const TextConfig = { fontColor: "white", diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index fc56a4d1..d06213be 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -28,13 +28,12 @@ export interface LayoutConfig { w: number; h: number; i: string; - widget: WidgetConfig; - graph: GraphConfig; - standard: StandardConfig; - metrics: string[]; + widget?: WidgetConfig; + graph?: GraphConfig; + metrics?: string[]; type: string; - metricTypes: string[]; - children?: any; + metricTypes?: string[]; + children?: { name: string; children: LayoutConfig[] }[]; activedTabIndex?: number; metricConfig?: MetricConfigOpt[]; } @@ -53,20 +52,6 @@ export interface WidgetConfig { tips?: string; } -export interface StandardConfig { - sortOrder?: string; - unit?: string; - labelsIndex?: string; - metricLabels?: string; - plus?: string; - minus?: string; - multiply?: string; - divide?: string; - milliseconds?: string; - seconds?: string; - maxItemNum?: number; -} - export type GraphConfig = | BarConfig | LineConfig diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue index 2e298154..722dfd3a 100644 --- a/src/views/dashboard/configuration/Text.vue +++ b/src/views/dashboard/configuration/Text.vue @@ -91,12 +91,13 @@ import { useDashboardStore } from "@/store/modules/dashboard"; const { t } = useI18n(); const dashboardStore = useDashboardStore(); const originConfig = dashboardStore.selectedGrid; +const graph = originConfig.graph || {}; const url = ref(originConfig.graph.url || ""); -const backgroundColor = ref(originConfig.graph.backgroundColor || "green"); -const fontColor = ref(originConfig.graph.fontColor || "white"); -const content = ref(originConfig.graph.content || ""); -const fontSize = ref(originConfig.graph.fontSize || 12); -const textAlign = ref(originConfig.graph.textAlign || "left"); +const backgroundColor = ref(graph.backgroundColor || "green"); +const fontColor = ref(graph.fontColor || "white"); +const content = ref(graph.content || ""); +const fontSize = ref(graph.fontSize || 12); +const textAlign = ref(graph.textAlign || "left"); const Colors = [ { label: "Green", diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue index e9b28006..dac5d4d9 100644 --- a/src/views/dashboard/configuration/Topology.vue +++ b/src/views/dashboard/configuration/Topology.vue @@ -48,9 +48,9 @@ import { Option } from "@/types/app"; const { t } = useI18n(); const dashboardStore = useDashboardStore(); -const { selectedGrid } = dashboardStore; -const showDepth = ref(selectedGrid.graph.showDepth); -const depth = ref(selectedGrid.graph.depth || 2); +const graph = dashboardStore.selectedGrid.graph || {}; +const showDepth = ref(graph.showDepth); +const depth = ref(graph.depth || 2); function applyConfig() { dashboardStore.setConfigs(dashboardStore.selectedGrid); diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index 13239a6e..6e60c63c 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -16,20 +16,20 @@ limitations under the License. -->
- {{ dashboardStore.selectedGrid.widget.title || "" }} -
- + {{ widget.title || "" }} +
+
-
+
{{ t("noData") }}
@@ -56,7 +56,7 @@ limitations under the License. --> /> - + @@ -74,7 +74,7 @@ limitations under the License. -->
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index fe08b8e0..91011379 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -65,17 +65,6 @@ limitations under the License. -->
-