From fde5baa42edde78016a03ad5d4cad053646e47c0 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 28 Dec 2021 10:18:18 +0800 Subject: [PATCH 01/63] refactor: update dashboard tool --- src/views/dashboard/Edit.vue | 50 ++------------------- src/views/dashboard/panel/Tool.vue | 70 ++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 47 deletions(-) create mode 100644 src/views/dashboard/panel/Tool.vue diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 056041f2..40a15f5a 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -13,33 +13,7 @@ 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. --> From fa3cce939f807bd84e4b1d2e088a6f9f9487e18f Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 28 Dec 2021 15:34:47 +0800 Subject: [PATCH 02/63] feat: add filters on dasboard --- src/components/Selector.vue | 7 ++ src/router/dashboard.ts | 2 +- src/views/dashboard/Edit.vue | 2 +- src/views/dashboard/data.ts | 64 +++++++++++--- src/views/dashboard/panel/Tool.vue | 136 +++++++++++++++++++++++------ 5 files changed, 172 insertions(+), 39 deletions(-) diff --git a/src/components/Selector.vue b/src/components/Selector.vue index cd99a1b0..0b814075 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -18,6 +18,8 @@ limitations under the License. --> v-model="selected" :placeholder="placeholder" @change="changeSelected" + filterable + :style="{ borderRadius }" > (props.value); function changeSelected() { @@ -92,4 +95,8 @@ function changeSelected() { width: 30px; } } + +.el-input__inner { + border-radius: unset !important; +} diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts index a98134fa..c1924a21 100644 --- a/src/router/dashboard.ts +++ b/src/router/dashboard.ts @@ -48,7 +48,7 @@ export const routesDashboard: Array = [ }, }, { - path: "/dashboard/edit/:layerId/:entityId/:dashboardId", + path: "/dashboard/edit/:layerId/:entity/:dashboardId", component: () => import("@/views/dashboard/Edit.vue"), name: "Edit", meta: { diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 40a15f5a..2a18bbe1 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -15,7 +15,7 @@ limitations under the License. --> diff --git a/src/views/dashboard/graphs/Pie.vue b/src/views/dashboard/graphs/Pie.vue index 5560eb5d..25874d42 100644 --- a/src/views/dashboard/graphs/Pie.vue +++ b/src/views/dashboard/graphs/Pie.vue @@ -16,7 +16,7 @@ limitations under the License. --> From 92b03a006ed1f959bc0f4b9800ed25f3a79335e8 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Sun, 9 Jan 2022 16:58:11 +0800 Subject: [PATCH 33/63] feat: edit tab item name, add widgets in tab --- src/store/modules/dashboard.ts | 25 +++++++- src/store/modules/data.ts | 1 + src/types/dashboard.ts | 2 +- src/views/dashboard/controls/Tab.vue | 91 +++++++++++++++++++++++----- src/views/dashboard/panel/Tool.vue | 4 ++ 5 files changed, 105 insertions(+), 18 deletions(-) diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 2ce3a815..2f2b44f2 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -24,7 +24,7 @@ import { useAppStoreWithOut } from "@/store/modules/app"; interface DashboardState { showConfig: boolean; layout: LayoutConfig[]; - selectedGrid: Nullable; + selectedGrid: Nullable; // edit widgets entity: string; layerId: string; activedGridItem: string; @@ -61,13 +61,14 @@ export const dashboardStore = defineStore({ return d; }); this.layout.push(newWidget); + this.activedGridItem = newWidget.i; }, addTab() { const newWidget: LayoutConfig = { x: 0, y: 0, w: 24, - h: 12, + h: 20, i: String(this.layout.length), type: "Tab", children: [ @@ -89,6 +90,7 @@ export const dashboardStore = defineStore({ return d; }); this.layout.push(newWidget); + this.activedGridItem = newWidget.i; }, addTabItem(item: LayoutConfig) { const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i); @@ -102,6 +104,25 @@ export const dashboardStore = defineStore({ }; this.layout[idx].children?.push(i); }, + addTabWidget(tabIndex: number) { + const idx = this.layout.findIndex( + (d: LayoutConfig) => d.i === this.activedGridItem + ); + const newWidget = { + x: 0, + y: 0, + w: 24, + h: 12, + i: String(this.layout[idx].children[tabIndex].children.length), + type: "Widget", + widget: {}, + graph: {}, + standard: {}, + }; + if (this.layout[idx].children) { + this.layout[idx].children[tabIndex].children.push(newWidget); + } + }, activeGridItem(index: string) { this.activedGridItem = index; }, diff --git a/src/store/modules/data.ts b/src/store/modules/data.ts index 676a9bd9..f56c16cf 100644 --- a/src/store/modules/data.ts +++ b/src/store/modules/data.ts @@ -36,4 +36,5 @@ export const ConfigData = { sortOrder: "DEC", unit: "s", }, + children: [], }; diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index 35fe7bcc..c6a99b76 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -26,7 +26,7 @@ export interface LayoutConfig { metrics?: string[]; type?: string; queryMetricType?: string; - children?: any[]; + children?: any; } export interface WidgetConfig { diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 5cb0b43a..33a397dd 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -16,22 +16,33 @@ limitations under the License. -->
- {{ item.name }} + - - - + + + + + + +
@@ -55,12 +66,15 @@ limitations under the License. --> :i="item.i" :key="item.i" > - + diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index f1ea3bd2..65b02230 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/src/views/dashboard/panel/Layout.vue @@ -55,6 +55,7 @@ export default defineComponent({ dashboardStore.setLayout(newLayout); } function clickGrid(item: LayoutConfig) { + console.log(item); dashboardStore.activeGridItem(item.i); } return { From 74401f4e790b6b03c20e55d8043989570f1162f1 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Mon, 10 Jan 2022 15:41:53 +0800 Subject: [PATCH 37/63] feat:cancel selected widgets --- src/views/dashboard/Edit.vue | 10 ++++++++-- src/views/dashboard/controls/Tab.vue | 25 +++++++++++++++++++------ src/views/dashboard/panel/Layout.vue | 1 - 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 87f5c8f2..ba9da3aa 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/components/index.ts b/src/components/index.ts index 57da373f..d807304a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -20,7 +20,6 @@ import Selector from "./Selector.vue"; import Graph from "./Graph.vue"; import type { App } from "vue"; import VueGridLayout from "vue-grid-layout"; -import { ElLoading } from "element-plus"; const components: { [key: string]: any } = { Icon, @@ -28,7 +27,6 @@ const components: { [key: string]: any } = { VueGridLayout, Selector, Graph, - ElLoading, }; const componentsName: string[] = Object.keys(components); diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index e8d82433..35f3502c 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -29,13 +29,25 @@ interface DashboardState { layerId: string; activedGridItem: string; } - +const newControl: LayoutConfig = { + x: 0, + y: 0, + w: 24, + h: 12, + i: "0", + type: "Widget", + widget: { + title: "Title", + }, + graph: {}, + standard: {}, +}; export const dashboardStore = defineStore({ id: "dashboard", state: (): DashboardState => ({ layout: [ConfigData], showConfig: false, - selectedGrid: ConfigData, + selectedGrid: null, entity: "", layerId: "", activedGridItem: "", @@ -44,36 +56,15 @@ export const dashboardStore = defineStore({ setLayout(data: LayoutConfig[]) { this.layout = data; }, - addWidget() { + addControl(type: string) { const newWidget: LayoutConfig = { - x: 0, - y: 0, - w: 24, - h: 12, + ...newControl, i: String(this.layout.length), - type: "Widget", - widget: { - title: "Title", - }, - graph: {}, - standard: {}, + type, }; - this.layout = this.layout.map((d: LayoutConfig) => { - d.y = d.y + newWidget.h; - return d; - }); - this.layout.push(newWidget); - this.activedGridItem = newWidget.i; - }, - addTab() { - const newWidget: LayoutConfig = { - x: 0, - y: 0, - w: 24, - h: 20, - i: String(this.layout.length), - type: "Tab", - children: [ + if (type === "Tab") { + newWidget.h = 24; + newWidget.children = [ { name: "Tab1", children: [], @@ -82,11 +73,8 @@ export const dashboardStore = defineStore({ name: "Tab2", children: [], }, - ], - widget: {}, - graph: {}, - standard: {}, - }; + ]; + } this.layout = this.layout.map((d: LayoutConfig) => { d.y = d.y + newWidget.h; return d; @@ -153,7 +141,7 @@ export const dashboardStore = defineStore({ this.showConfig = show; }, selectWidget(widget: Nullable) { - this.selectedGrid = ConfigData || widget; //todo + this.selectedGrid = widget; }, setLayer(id: string) { this.layerId = id; @@ -176,9 +164,10 @@ export const dashboardStore = defineStore({ return res.data; }, async fetchMetricValue(config: LayoutConfig) { - if (!config.queryMetricType) { - return; - } + // if (!config.queryMetricType) { + // return; + // } + config.queryMetricType = "readMetricsValues"; const appStoreWithOut = useAppStoreWithOut(); const variable = { condition: { diff --git a/src/utils/is.ts b/src/utils/is.ts index edf4ef36..5f1be52f 100644 --- a/src/utils/is.ts +++ b/src/utils/is.ts @@ -92,3 +92,9 @@ export function isElement(val: unknown): val is Element { export function isMap(val: unknown): val is Map { return is(val, "Map"); } +export function isEmptyObject(val: T): val is T { + if (isObject(val)) { + return Object.keys(val).length === 0; + } + return false; +} diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 4bb17a0d..7a7a5d0e 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -56,7 +56,6 @@ limitations under the License. --> import { reactive } from "vue"; import { useI18n } from "vue-i18n"; import router from "@/router"; -import { ElInput, ElButton } from "element-plus"; import { useSelectorStore } from "@/store/modules/selectors"; import { EntityType, Options } from "./data"; import uuid from "@/utils/uuid"; diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index cc4f12b0..1e4c7a84 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -18,22 +18,22 @@ limitations under the License. -->
{{ title }}
+
{{ t("noData") }}
- {{ t("noData") }}
class="selectors" /> v-for="(type, index) in ChartTypes" :key="index" @click="changeChartType(type)" - :class="{ active: type.value === chartType }" + :class="{ active: type.value === states.chartType }" > {{ type.label }} @@ -67,7 +67,7 @@ limitations under the License. --> @@ -94,13 +94,14 @@ import { reactive, defineComponent, toRefs, ref } from "vue"; import { useI18n } from "vue-i18n"; import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; -import { ElMessage, ElButton, ElCollapse, ElCollapseItem } from "element-plus"; +import { ElMessage } from "element-plus"; import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data"; import { Option } from "@/types/app"; import graphs from "../graphs"; import configs from "./graph-styles"; import WidgetOptions from "./WidgetOptions.vue"; import StandardOptions from "./StandardOptions.vue"; +import { isEmptyObject } from "@/utils/is"; export default defineComponent({ name: "ConfigEdit", @@ -109,9 +110,6 @@ export default defineComponent({ ...configs, WidgetOptions, StandardOptions, - ElButton, - ElCollapse, - ElCollapseItem, }, setup() { const loading = ref(false); @@ -148,7 +146,9 @@ export default defineComponent({ tips: selectedGrid.widget.tips, title: selectedGrid.widget.title, }); - queryMetricType(states.metrics[0]); + if (states.metrics[0]) { + queryMetricType(states.metrics[0]); + } async function changeMetrics(arr: Option[]) { if (!arr.length) { @@ -157,7 +157,9 @@ export default defineComponent({ return; } states.metrics = arr.map((d: Option) => String(d.value)); - queryMetricType(String(arr[0].value)); + if (arr[0].value) { + queryMetricType(String(arr[0].value)); + } } async function queryMetricType(metric: string) { @@ -171,11 +173,13 @@ export default defineComponent({ 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]; + queryMetrics(); } function changeChartType(item: Option) { @@ -207,6 +211,9 @@ export default defineComponent({ const json = await dashboardStore.fetchMetricValue( dashboardStore.selectedGrid ); + if (!json) { + return; + } if (json.error) { return; @@ -214,9 +221,7 @@ export default defineComponent({ const metricVal = json.data.readMetricsValues.values.values.map( (d: { value: number }) => d.value ); - const m = - dashboardStore.selectedGrid.metrics && - dashboardStore.selectedGrid.metrics[0]; + const m = states.metrics[0]; if (!m) { return; } @@ -251,7 +256,7 @@ export default defineComponent({ return { ...toRefs(widgetOpt), - ...toRefs(states), + states, changeChartType, changeValueType, changeMetrics, @@ -325,6 +330,12 @@ export default defineComponent({ } } +.no-data { + font-size: 14px; + text-align: center; + line-height: 350px; +} + span.active { background-color: #409eff; color: #fff; diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index de92e32e..8fe1c0ee 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -37,12 +37,16 @@ limitations under the License. --> /> - - - - - - + + + + + + + + + +
@@ -73,7 +77,7 @@ limitations under the License. --> -
No widgets, plase add widgets
+
Please add widgets.
From 7d1abb34212459becf67a7c200d7ae5584cacaf0 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 11 Jan 2022 20:25:06 +0800 Subject: [PATCH 47/63] build: update eslint --- package.json | 8 +++++++- src/views/dashboard/configuration/ConfigEdit.vue | 1 - 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 65c00506..a37167a8 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,13 @@ }, "rules": { "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" + "@typescript-eslint/explicit-module-boundary-types": "off", + "vue/script-setup-uses-vars": "error", + "@typescript-eslint/ban-ts-ignore'": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "no-use-before-define": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off" }, "overrides": [ { diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index 1e4c7a84..48cc055f 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -101,7 +101,6 @@ import graphs from "../graphs"; import configs from "./graph-styles"; import WidgetOptions from "./WidgetOptions.vue"; import StandardOptions from "./StandardOptions.vue"; -import { isEmptyObject } from "@/utils/is"; export default defineComponent({ name: "ConfigEdit", From ad1e500c5447c27f91540d0b5497cd536f850082 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Wed, 12 Jan 2022 11:44:54 +0800 Subject: [PATCH 48/63] feat: update config --- src/store/{modules => }/data.ts | 19 +++++-- src/store/modules/dashboard.ts | 19 ++----- src/types/dashboard.ts | 22 +++++--- src/views/dashboard/Edit.vue | 1 + .../dashboard/configuration/ConfigEdit.vue | 51 ++++++++++--------- .../configuration/StandardOptions.vue | 1 - .../dashboard/configuration/WidgetOptions.vue | 9 +++- .../configuration/graph-styles/Area.vue | 42 ++++++++++++++- .../configuration/graph-styles/Bar.vue | 7 +-- .../configuration/graph-styles/Line.vue | 7 +-- src/views/dashboard/data.ts | 18 +++++++ 11 files changed, 130 insertions(+), 66 deletions(-) rename src/store/{modules => }/data.ts (83%) diff --git a/src/store/modules/data.ts b/src/store/data.ts similarity index 83% rename from src/store/modules/data.ts rename to src/store/data.ts index f56c16cf..c09a465f 100644 --- a/src/store/modules/data.ts +++ b/src/store/data.ts @@ -14,6 +14,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +export const NewControl = { + x: 0, + y: 0, + w: 24, + h: 12, + i: "0", + type: "Widget", + widget: { + title: "Title", + }, + graph: {}, + standard: {}, +}; export const ConfigData = { x: 0, y: 0, @@ -24,8 +37,8 @@ export const ConfigData = { queryMetricType: "readMetricsValues", type: "Widget", widget: { - title: "Title123", - tips: "Tooltip123", + title: "Title", + tips: "Tooltip", }, graph: { showBackground: true, @@ -34,7 +47,7 @@ export const ConfigData = { }, standard: { sortOrder: "DEC", - unit: "s", + unit: "min", }, children: [], }; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 35f3502c..7897a1aa 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -19,8 +19,9 @@ import { store } from "@/store"; import { LayoutConfig } from "@/types/dashboard"; import graph from "@/graph"; import { AxiosResponse } from "axios"; -import { ConfigData } from "./data"; +import { ConfigData } from "../data"; import { useAppStoreWithOut } from "@/store/modules/app"; +import { NewControl } from "../data"; interface DashboardState { showConfig: boolean; layout: LayoutConfig[]; @@ -29,19 +30,7 @@ interface DashboardState { layerId: string; activedGridItem: string; } -const newControl: LayoutConfig = { - x: 0, - y: 0, - w: 24, - h: 12, - i: "0", - type: "Widget", - widget: { - title: "Title", - }, - graph: {}, - standard: {}, -}; + export const dashboardStore = defineStore({ id: "dashboard", state: (): DashboardState => ({ @@ -58,7 +47,7 @@ export const dashboardStore = defineStore({ }, addControl(type: string) { const newWidget: LayoutConfig = { - ...newControl, + ...NewControl, i: String(this.layout.length), type, }; diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index c6a99b76..f4fee79b 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -30,14 +30,8 @@ export interface LayoutConfig { } export interface WidgetConfig { - title?: string; - tips?: string; -} - -export interface GraphConfig { - type?: string; - showBackground?: boolean; - barWidth?: number; + title: string; + tips: string; } export interface StandardConfig { @@ -46,3 +40,15 @@ export interface StandardConfig { max?: string; min?: string; } + +export type GraphConfig = BarConfig | LineConfig; +interface BarConfig { + type?: string; + showBackground?: boolean; + barWidth?: number; +} +interface LineConfig { + type?: string; + showBackground?: boolean; + barWidth?: number; +} diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 34621048..5dda9a57 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -20,6 +20,7 @@ limitations under the License. --> v-model="dashboardStore.showConfig" title="Edit Graph Options" fullscreen + :destroy-on-close="true" @closed="dashboardStore.setConfigPanel(false)" > diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue index 48cc055f..337f6614 100644 --- a/src/views/dashboard/configuration/ConfigEdit.vue +++ b/src/views/dashboard/configuration/ConfigEdit.vue @@ -15,7 +15,7 @@ limitations under the License. --> + diff --git a/src/views/dashboard/configuration/graph-styles/Bar.vue b/src/views/dashboard/configuration/graph-styles/Bar.vue index f4ce7a3d..a5ecc100 100644 --- a/src/views/dashboard/configuration/graph-styles/Bar.vue +++ b/src/views/dashboard/configuration/graph-styles/Bar.vue @@ -24,18 +24,13 @@ limitations under the License. -->
Show Background - +
diff --git a/src/views/dashboard/configuration/graph-styles/Line.vue b/src/views/dashboard/configuration/graph-styles/Line.vue index 71f712ef..357f1926 100644 --- a/src/views/dashboard/configuration/graph-styles/Line.vue +++ b/src/views/dashboard/configuration/graph-styles/Line.vue @@ -62,11 +62,6 @@ function updateConfig(param: { [key: string]: unknown }) { } diff --git a/src/views/dashboard/configuration/graph-styles/TopList.vue b/src/views/dashboard/configuration/graph-styles/TopList.vue new file mode 100644 index 00000000..c75f2006 --- /dev/null +++ b/src/views/dashboard/configuration/graph-styles/TopList.vue @@ -0,0 +1,59 @@ + + + + diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index 2f796d8b..c68111eb 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -48,6 +48,7 @@ limitations under the License. --> :intervalTime="appStoreWithOut.intervalTime" :data="state.source" :config="data.graph" + :standard="data.standard" />
{{ t("noData") }}
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 370c2b21..c93f74c5 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -41,6 +41,21 @@ export const DefaultGraphConfig: { [key: string]: any } = { type: "Area", opacity: 0.4, }, + Card: { + type: "Card", + fontSize: 14, + showUint: true, + }, + Table: { + type: "Card", + showTableValues: true, + tableHeaderCol1: "", + tableHeaderCol2: "", + }, + TopList: { + type: "TopList", + topN: 10, + }, }; export enum MetricQueryTypes { diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue index 288c7197..360f6301 100644 --- a/src/views/dashboard/graphs/Card.vue +++ b/src/views/dashboard/graphs/Card.vue @@ -14,44 +14,41 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 058d6869..3f14aa94 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -18,7 +18,6 @@ limitations under the License. --> diff --git a/src/views/dashboard/graphs/HeatMap.vue b/src/views/dashboard/graphs/HeatMap.vue index 0c968e20..a07f22ce 100644 --- a/src/views/dashboard/graphs/HeatMap.vue +++ b/src/views/dashboard/graphs/HeatMap.vue @@ -16,9 +16,9 @@ limitations under the License. --> diff --git a/src/views/dashboard/graphs/Pie.vue b/src/views/dashboard/graphs/Pie.vue index 25874d42..1f0149ce 100644 --- a/src/views/dashboard/graphs/Pie.vue +++ b/src/views/dashboard/graphs/Pie.vue @@ -24,7 +24,10 @@ const props = defineProps({ type: Array as PropType<{ name: string; value: number }[]>, default: () => [], }, - theme: { type: String, default: "dark" }, + config: { + type: Object as PropType<{ sortOrder: string }>, + default: () => ({}), + }, }); const option = computed(() => getOption()); function getOption() { @@ -40,7 +43,7 @@ function getOption() { left: 0, itemWidth: 12, textStyle: { - color: props.theme === "dark" ? "#fff" : "#333", + color: "#333", }, }, series: [ diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue index 1bfd50bd..4e69adbb 100644 --- a/src/views/dashboard/graphs/Table.vue +++ b/src/views/dashboard/graphs/Table.vue @@ -19,28 +19,26 @@ limitations under the License. -->
- {{ item.tableHeaderCol1 || $t("name") }} + {{ config.tableHeaderCol1 || $t("name") }}
-
- {{ item.tableHeaderCol2 || $t("value") }} +
+ {{ config.tableHeaderCol2 || $t("value") }}
{{ key }}
-
- {{ data[key][dataLength(data[key])] }} +
+ {{ data[key][data[key].length - 1 || 0] }}
@@ -54,9 +52,12 @@ const props = defineProps({ type: Object as PropType<{ [key: string]: number[][] }>, default: () => ({}), }, - theme: { type: String, default: "dark" }, - itemConfig: { - type: Object as PropType<{ showTableValues: string | boolean }>, + config: { + type: Object as PropType<{ + showTableValues: boolean; + tableHeaderCol2: string; + tableHeaderCol1: string; + }>, default: () => ({}), }, }); @@ -69,10 +70,10 @@ onMounted(() => { if (!chartTable.value) { return; } - const width = showTableValues.value + const width = props.config.showTableValues ? chartTable.value.offsetWidth / 2 : chartTable.value.offsetWidth; - initWidth.value = showTableValues.value + initWidth.value = props.config.showTableValues ? chartTable.value.offsetWidth / 2 : 0; nameWidth.value = width - 5; @@ -98,15 +99,6 @@ const dataKeys = computed(() => { ); return keys; }); -const showTableValues = computed(() => { - return props.itemConfig.showTableValues === "true" || - props.itemConfig.showTableValues === true - ? true - : false; -}); -const dataLength = computed((param: number[]) => { - return param.length - 1 || 0; -});