This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new ee06546 fix: add tooltips for list graphs (#47)
ee06546 is described below
commit ee06546c204572e24a006c33167bcde4cd75ce8a
Author: Fine0830 <[email protected]>
AuthorDate: Wed Mar 30 21:19:06 2022 +0800
fix: add tooltips for list graphs (#47)
---
src/assets/icons/arrow-down.svg | 16 ---------
src/assets/icons/arrow_drop_down.svg | 17 ----------
src/assets/icons/bar_chart.svg | 19 -----------
src/assets/icons/clearclose.svg | 17 ----------
src/assets/icons/health.svg | 15 ---------
src/assets/icons/keyboard_control.svg | 18 ----------
src/assets/icons/library_add.svg | 18 ----------
src/assets/icons/notification_important.svg | 18 ----------
src/assets/icons/save_alt.svg | 17 ----------
src/assets/icons/{insert_image.svg => storage.svg} | 2 +-
src/components/Graph.vue | 17 +++++-----
src/hooks/data.ts | 4 +--
src/layout/components/SideBar.vue | 2 +-
src/locales/lang/en.ts | 2 +-
src/locales/lang/zh.ts | 6 ++--
src/router/database.ts | 2 +-
src/styles/reset.scss | 2 +-
src/types/dashboard.ts | 1 +
src/views/dashboard/configuration/Text.vue | 2 +-
.../configuration/widget/graph-styles/Area.vue | 8 ++---
.../configuration/widget/graph-styles/Bar.vue | 8 ++---
.../configuration/widget/graph-styles/Card.vue | 6 ++--
.../widget/graph-styles/EndpointList.vue | 8 ++---
.../widget/graph-styles/InstanceList.vue | 8 ++---
.../configuration/widget/graph-styles/Line.vue | 22 ++++++-------
.../widget/graph-styles/ServiceList.vue | 10 +++---
.../configuration/widget/graph-styles/Table.vue | 12 +++----
.../configuration/widget/graph-styles/TopList.vue | 4 +--
.../configuration/widget/metric/Index.vue | 3 ++
src/views/dashboard/controls/Tab.vue | 6 ++--
src/views/dashboard/controls/Text.vue | 22 +++++--------
src/views/dashboard/graphs/EndpointList.vue | 9 +++--
src/views/dashboard/graphs/HeatMap.vue | 7 ++--
src/views/dashboard/graphs/InstanceList.vue | 9 +++--
src/views/dashboard/graphs/Line.vue | 38 ++++++++++++++--------
src/views/dashboard/graphs/ServiceList.vue | 9 +++--
src/views/dashboard/panel/Layout.vue | 6 ++--
.../related/topology/components/PodTopology.vue | 8 +++--
38 files changed, 138 insertions(+), 260 deletions(-)
diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
deleted file mode 100755
index f85e0b0..0000000
--- a/src/assets/icons/arrow-down.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- 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. -->
-
-<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16" viewBox="0 0 16
16"><path id="a" d="m10.472352 7.28232367c.3431062-.36783247.904419-.36783247
1.2592596-.00644059.3578153.36442148.3578153.95850784.0002156
1.28561559l-3.10532264
3.16826253c-.17025689.1734002-.39845625.2702388-.62654793.2702388-.24380864
0-.45151514-.0919745-.62697852-.2706782l-3.09835734-3.16693764c-.36405333-.352236-.36405333-.94614513-.01248284-1.28566765.34310619-.36783247.90441901-.36783247
1.25901327-.0 [...]
\ No newline at end of file
diff --git a/src/assets/icons/arrow_drop_down.svg
b/src/assets/icons/arrow_drop_down.svg
deleted file mode 100644
index 63151de..0000000
--- a/src/assets/icons/arrow_drop_down.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
-</svg>
diff --git a/src/assets/icons/bar_chart.svg b/src/assets/icons/bar_chart.svg
deleted file mode 100644
index e874522..0000000
--- a/src/assets/icons/bar_chart.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- 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. -->
-
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<title>bar_chart</title>
-<path d="M16.219 12.984h2.766v6h-2.766v-6zM10.594
5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z"></path>
-</svg>
diff --git a/src/assets/icons/clearclose.svg b/src/assets/icons/clearclose.svg
deleted file mode 100644
index ddc3519..0000000
--- a/src/assets/icons/clearclose.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578
5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578
5.578-5.578z"></path>
-</svg>
diff --git a/src/assets/icons/health.svg b/src/assets/icons/health.svg
deleted file mode 100644
index 56f2062..0000000
--- a/src/assets/icons/health.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- 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. -->
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg class="icon"
width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg";><path fill="#ffffff" d="M432
617.6l-121.6-121.6L265.6 544l166.4 166.4L758.4 384l-44.8-48z" /></svg>
\ No newline at end of file
diff --git a/src/assets/icons/keyboard_control.svg
b/src/assets/icons/keyboard_control.svg
deleted file mode 100644
index cf8d477..0000000
--- a/src/assets/icons/keyboard_control.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<title>keyboard_control</title>
-<path d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406
0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406
0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406
1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406
0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z"></path>
-</svg>
diff --git a/src/assets/icons/library_add.svg b/src/assets/icons/library_add.svg
deleted file mode 100644
index 382303c..0000000
--- a/src/assets/icons/library_add.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<title>library_add</title>
-<path d="M18.984
11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016
2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383
0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797
0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797
0-1.383-0.586t-0.586-1.383v-14.016h1.969z"></path>
-</svg>
diff --git a/src/assets/icons/notification_important.svg
b/src/assets/icons/notification_important.svg
deleted file mode 100644
index 8a80611..0000000
--- a/src/assets/icons/notification_important.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<title>notification_important</title>
-<path d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609
1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984
15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016
2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344
1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422
1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z"></path>
-</svg>
diff --git a/src/assets/icons/save_alt.svg b/src/assets/icons/save_alt.svg
deleted file mode 100644
index 59d6e87..0000000
--- a/src/assets/icons/save_alt.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<!-- 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<path d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016
1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609
1.406t-1.406 0.609h-13.969q-0.797
0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z"></path>
-</svg>
diff --git a/src/assets/icons/insert_image.svg b/src/assets/icons/storage.svg
similarity index 77%
rename from src/assets/icons/insert_image.svg
rename to src/assets/icons/storage.svg
index 5aea97c..73d6684 100644
--- a/src/assets/icons/insert_image.svg
+++ b/src/assets/icons/storage.svg
@@ -13,5 +13,5 @@ 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. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
viewBox="0 0 24 24">
-<path d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0
0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797
0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797
0 1.406 0.609t0.609 1.406v13.969z"></path>
+<path d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016
14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016
3.984h19.969v4.031h-19.969v-4.031zM3.984
17.016v1.969h2.016v-1.969h-2.016zM2.016
20.016v-4.031h19.969v4.031h-19.969z"></path>
</svg>
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index c83f9db..217831b 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -13,12 +13,9 @@ 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. -->
<template>
- <div
- v-if="available"
- ref="chartRef"
- :style="`height:${height};width:${width};`"
- ></div>
- <div v-else class="no-data">No Data</div>
+ <div ref="chartRef" :style="`height:${height};width:${width};`">
+ <div v-if="!available" class="no-data">No Data</div>
+ </div>
</template>
<script lang="ts" setup>
import {
@@ -50,9 +47,10 @@ const props = defineProps({
});
const available = computed(
() =>
- Array.isArray(props.option.series) &&
- props.option.series[0] &&
- props.option.series[0].data
+ (Array.isArray(props.option.series) &&
+ props.option.series[0] &&
+ props.option.series[0].data) ||
+ (Array.isArray(props.option.series.data) && props.option.series.data[0])
);
onMounted(async () => {
await setOptions(props.option);
@@ -92,5 +90,6 @@ onBeforeUnmount(() => {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
+ color: #666;
}
</style>
diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index 4bc394f..2b999fc 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -26,8 +26,8 @@ export enum MetricQueryTypes {
export enum Calculations {
Percentage = "percentage",
ByteToKB = "byteToKB",
- ByteToMB = "ByteToMB",
- ByteToGB = "ByteToGB",
+ ByteToMB = "byteToMB",
+ ByteToGB = "byteToGB",
Apdex = "apdex",
Precision = "precision",
ConvertSeconds = "convertSeconds",
diff --git a/src/layout/components/SideBar.vue
b/src/layout/components/SideBar.vue
index ea047d4..6bb7504 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -165,7 +165,7 @@ span.collapse {
.menu-control {
position: absolute;
- top: 8px;
+ top: 7px;
left: 200px;
cursor: pointer;
transition: all 0.2s linear;
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 0f19874..037377f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -311,7 +311,7 @@ const msg = {
keywordsOfContentLogTips:
"Current storage of SkyWalking OAP server does not support this.",
setEvent: "Set Event",
- viewAttributes: "View Attributes",
+ viewAttributes: "View",
serviceEvents: "Service Events",
select: "Select",
eventID: "Event ID",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index c607407..12e182c 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -20,7 +20,7 @@ const msg = {
traces: "跟踪",
metrics: "指标",
serviceMesh: "服务网格",
- infrastructure: "基础结构",
+ infrastructure: "基础设施",
virtualMachine: "虚拟机",
dashboardNew: "新建仪表板",
dashboardHome: "仪表盘首页",
@@ -112,7 +112,7 @@ const msg = {
showGroup: "显示分组",
noWidget: "请添加组件",
rename: "重命名",
- selfObservability: "自观性",
+ selfObservability: "自观测性",
satellite: "Satellite",
skyWalkingServer: "SkyWalking服务",
functions: "Functions",
@@ -310,7 +310,7 @@ const msg = {
"只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
setEvent: "设置事件",
- viewAttributes: "实例属性",
+ viewAttributes: "查看",
serviceEvents: "服务事件",
select: "选择",
eventID: "事件ID",
diff --git a/src/router/database.ts b/src/router/database.ts
index a3e5bdf..7dc0653 100644
--- a/src/router/database.ts
+++ b/src/router/database.ts
@@ -23,7 +23,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
name: "Database",
meta: {
title: "database",
- icon: "bar_chart",
+ icon: "storage",
hasGroup: true,
},
redirect: "/database",
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 9869e76..e414df0 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -139,5 +139,5 @@ pre {
}
.el-icon.menu-icons {
- margin-right: 8px !important;
+ margin-top: -3px !important;
}
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index d06213b..f4086d9 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -72,6 +72,7 @@ export interface LineConfig extends AreaConfig {
step?: boolean;
showXAxis?: boolean;
showYAxis?: boolean;
+ smallTips?: boolean;
}
export interface AreaConfig {
diff --git a/src/views/dashboard/configuration/Text.vue
b/src/views/dashboard/configuration/Text.vue
index 722dfd3..40b93de 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -92,7 +92,7 @@ const { t } = useI18n();
const dashboardStore = useDashboardStore();
const originConfig = dashboardStore.selectedGrid;
const graph = originConfig.graph || {};
-const url = ref(originConfig.graph.url || "");
+const url = ref(graph.url || "");
const backgroundColor = ref(graph.backgroundColor || "green");
const fontColor = ref(graph.fontColor || "white");
const content = ref<string>(graph.content || "");
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Area.vue
b/src/views/dashboard/configuration/widget/graph-styles/Area.vue
index eb09fac..9c4b3e0 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Area.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Area.vue
@@ -34,16 +34,16 @@ import { useDashboardStore } from
"@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph || {};
-const opacity = ref(selectedGrid.graph.opacity);
+const opacity = ref(graph.opacity);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
b/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
index be63da1..0cffd9e 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
@@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const showBackground = ref(selectedGrid.graph.showBackground || false);
+const graph = dashboardStore.selectedGrid.graph;
+const showBackground = ref(graph.showBackground || false);
function changeConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Card.vue
b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
index 6259b14..ed99409 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Card.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
@@ -43,9 +43,9 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
-const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
+const graph = dashboardStore.selectedGrid.graph || {};
+const fontSize = ref(graph.fontSize);
+const showUnit = ref<boolean>(graph.showUnit);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
diff --git
a/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
b/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
index dba7909..51257f3 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
@@ -33,17 +33,17 @@ import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph;
const { t } = useI18n();
-const fontSize = ref(selectedGrid.graph.fontSize);
+const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git
a/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
b/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
index 78df72d..e44cb53 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
@@ -34,15 +34,15 @@ import { useDashboardStore } from
"@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
+const graph = dashboardStore.selectedGrid.graph;
+const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Line.vue
b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
index 219674c..66b7c78 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Line.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
@@ -16,19 +16,19 @@ limitations under the License. -->
<div>
<span class="label">{{ t("showXAxis") }}</span>
<el-switch
- v-model="selectedGrid.graph.showXAxis"
+ v-model="graph.showXAxis"
active-text="Yes"
inactive-text="No"
- @change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
+ @change="updateConfig({ showXAxis: graph.showXAxis })"
/>
</div>
<div>
<span class="label">{{ t("showYAxis") }}</span>
<el-switch
- v-model="selectedGrid.graph.showYAxis"
+ v-model="graph.showYAxis"
active-text="Yes"
inactive-text="No"
- @change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
+ @change="updateConfig({ showYAxis: graph.showYAxis })"
/>
</div>
<div>
@@ -60,23 +60,23 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const smooth = ref(selectedGrid.graph.smooth);
-const showSymbol = ref(selectedGrid.graph.showSymbol);
-const step = ref(selectedGrid.graph.step);
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const smooth = ref(graph.value.smooth);
+const showSymbol = ref(graph.value.showSymbol);
+const step = ref(graph.value.step);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git
a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
index 0e2936d..b19cbc0 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
@@ -16,10 +16,10 @@ limitations under the License. -->
<div class="item">
<span class="label">{{ t("showGroup") }}</span>
<el-switch
- v-model="selectedGrid.graph.showGroup"
+ v-model="graph.showGroup"
active-text="Yes"
inactive-text="No"
- @change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
+ @change="updateConfig({ showGroup: graph.showGroup })"
/>
</div>
<div class="item">
@@ -37,14 +37,14 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const fontSize = ref(graph.value.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const { selectedGrid } = dashboardStore;
diff --git a/src/views/dashboard/configuration/widget/graph-styles/Table.vue
b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
index 37468f2..b83d46e 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/Table.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
@@ -50,17 +50,17 @@ import { useDashboardStore } from
"@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const showTableValues = ref(selectedGrid.graph.showTableValues);
-const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
-const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
+const graph = dashboardStore.selectedGrid.graph || {};
+const showTableValues = ref(graph.showTableValues);
+const tableHeaderCol1 = ref(graph.tableHeaderCol1);
+const tableHeaderCol2 = ref(graph.tableHeaderCol2);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
- ...selectedGrid.graph,
+ ...dashboardStore.selectedGrid.graph,
...param,
};
- dashboardStore.selectWidget({ ...selectedGrid, graph });
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
index 27f7a94..8c485d7 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
@@ -32,8 +32,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const color = ref(selectedGrid.graph.color || "purple");
+const graph = dashboardStore.selectedGrid.graph || {};
+const color = ref(graph.color || "purple");
const Colors = [
{ label: "Purple", value: "purple" },
{
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue
b/src/views/dashboard/configuration/widget/metric/Index.vue
index e84e7f4..6c156ef 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -349,6 +349,9 @@ async function queryMetrics() {
return;
}
const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
+ if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
+ return;
+ }
const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
const params = useQueryProcessor({ ...states, metricConfig, catalog });
if (!params) {
diff --git a/src/views/dashboard/controls/Tab.vue
b/src/views/dashboard/controls/Tab.vue
index 26d1163..7d15396 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -83,8 +83,8 @@ limitations under the License. -->
v-model:layout="dashboardStore.currentTabItems"
:col-num="24"
:row-height="10"
- :is-draggable="true"
- :is-resizable="true"
+ :is-draggable="dashboardStore.editMode"
+ :is-resizable="dashboardStore.editMode"
@layout-updated="layoutUpdatedEvent"
>
<grid-item
@@ -320,7 +320,7 @@ export default defineComponent({
.vue-grid-item:not(.vue-grid-placeholder) {
background: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
- border-radius: 5px;
+ border-radius: 3px;
}
.tab-layout {
diff --git a/src/views/dashboard/controls/Text.vue
b/src/views/dashboard/controls/Text.vue
index 72c65b8..0dd0bc3 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -36,21 +36,21 @@ limitations under the License. -->
</div>
<div
class="body"
- :class="data.graph.textAlign === 'center' ? 'center' : ''"
:style="{
- backgroundColor: TextColors[data.graph.backgroundColor],
- color: TextColors[data.graph.fontColor],
- fontSize: data.graph.fontSize + 'px',
- textAlign: data.graph.textAlign,
+ backgroundColor: TextColors[graph.backgroundColor],
+ color: TextColors[graph.fontColor],
+ fontSize: graph.fontSize + 'px',
+ textAlign: graph.textAlign,
}"
>
- <a :href="data.graph.url" target="_blank">
- {{ data.graph.content }}
+ <a :href="graph.url" target="_blank">
+ {{ graph.content }}
</a>
</div>
</div>
</template>
<script lang="ts" setup>
+import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
@@ -65,6 +65,7 @@ const props = defineProps({
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
+const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
function removeTopo() {
@@ -93,16 +94,11 @@ function editConfig() {
}
.body {
- text-align: center;
+ padding: 5px 20px 0 10px;
width: 100%;
height: 100%;
line-height: 100%;
cursor: pointer;
- -webkit-box-orient: horizontal;
- -webkit-box-pack: center;
- box-sizing: border-box;
- display: -webkit-box;
- // -webkit-box-align: left;
}
.tools {
diff --git a/src/views/dashboard/graphs/EndpointList.vue
b/src/views/dashboard/graphs/EndpointList.vue
index 9101137..a5d8d8f 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -53,7 +53,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
- :config="{ showXAxis: false, showYAxis: false }"
+ :config="{
+ showXAxis: false,
+ showYAxis: false,
+ smallTips: true,
+ showSymbol: true,
+ }"
/>
<Card
v-else
@@ -204,7 +209,7 @@ watch(
@import "./style.scss";
.chart {
- height: 39px;
+ height: 60px;
}
.inputs {
diff --git a/src/views/dashboard/graphs/HeatMap.vue
b/src/views/dashboard/graphs/HeatMap.vue
index 80e1f73..f90d387 100644
--- a/src/views/dashboard/graphs/HeatMap.vue
+++ b/src/views/dashboard/graphs/HeatMap.vue
@@ -36,8 +36,11 @@ const props = defineProps({
const option = computed(() => getOption());
function getOption() {
- const metric = props.config.metrics[0];
- const nodes = (props.data[metric] && props.data[metric].nodes) || [];
+ const metric = props.config.metrics && props.config.metrics[0];
+ let nodes: any = [];
+ if (metric) {
+ nodes = (props.data[metric] && props.data[metric].nodes) || [];
+ }
const source = (nodes || []).map((d: number[]) => d[2]);
const maxItem = Math.max(...source);
const minItem = Math.min(...source);
diff --git a/src/views/dashboard/graphs/InstanceList.vue
b/src/views/dashboard/graphs/InstanceList.vue
index 65d76ba..678256d 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -53,7 +53,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="metric ? { [metric]: scope.row[metric] } : {}"
:intervalTime="intervalTime"
- :config="{ showXAxis: false, showYAxis: false }"
+ :config="{
+ showXAxis: false,
+ showYAxis: false,
+ smallTips: true,
+ showSymbol: true,
+ }"
/>
<Card
v-else
@@ -255,7 +260,7 @@ watch(
@import "./style.scss";
.chart {
- height: 40px;
+ height: 60px;
}
.inputs {
diff --git a/src/views/dashboard/graphs/Line.vue
b/src/views/dashboard/graphs/Line.vue
index 978aa10..084e1c4 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -39,6 +39,7 @@ const props = defineProps({
opacity: 0.4,
showXAxis: true,
showYAxis: true,
+ smallTips: false,
}),
},
});
@@ -79,7 +80,7 @@ function getOption() {
name: i,
type: "line",
symbol: "circle",
- symbolSize: 8,
+ symbolSize: 6,
showSymbol: props.config.showSymbol,
step: props.config.step,
smooth: props.config.smooth,
@@ -141,20 +142,31 @@ function getOption() {
];
break;
}
+ const tooltip = {
+ trigger: "axis",
+ backgroundColor: "rgb(50,50,50)",
+ textStyle: {
+ fontSize: 12,
+ color: "#ccc",
+ },
+ enterable: true,
+ extraCssText: "max-height: 300px; overflow: auto; border: none;",
+ };
+ const tips = {
+ formatter(params: any) {
+ return `${params[0].value[1]}`;
+ },
+ extraCssText: `height: 20px; padding:0 2px;`,
+ trigger: "axis",
+ textStyle: {
+ fontSize: 12,
+ color: "#333",
+ },
+ };
+
return {
color,
- tooltip: {
- trigger: "axis",
- zlevel: 1000,
- z: 60,
- backgroundColor: "rgb(50,50,50)",
- textStyle: {
- fontSize: 13,
- color: "#ccc",
- },
- enterable: true,
- extraCssText: "max-height: 300px; overflow: auto; border: none",
- },
+ tooltip: props.config.smallTips ? tips : tooltip,
legend: {
type: "scroll",
show: keys.length === 1 ? false : true,
diff --git a/src/views/dashboard/graphs/ServiceList.vue
b/src/views/dashboard/graphs/ServiceList.vue
index 8be7cd6..0928428 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -65,7 +65,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
- :config="{ showXAxis: false, showYAxis: false }"
+ :config="{
+ showXAxis: false,
+ showYAxis: false,
+ smallTips: true,
+ showSymbol: true,
+ }"
/>
<Card
v-else
@@ -288,7 +293,7 @@ watch(
@import "./style.scss";
.chart {
- height: 39px;
+ height: 60px;
}
.inputs {
diff --git a/src/views/dashboard/panel/Layout.vue
b/src/views/dashboard/panel/Layout.vue
index cec440a..6bb9a0b 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -17,8 +17,8 @@ limitations under the License. -->
v-model:layout="dashboardStore.layout"
:col-num="24"
:row-height="10"
- :is-draggable="true"
- :is-resizable="true"
+ :is-draggable="dashboardStore.editMode"
+ :is-resizable="dashboardStore.editMode"
v-if="dashboardStore.layout.length"
>
<grid-item
@@ -86,7 +86,7 @@ export default defineComponent({
.vue-grid-item:not(.vue-grid-placeholder) {
background: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
- border-radius: 5px;
+ border-radius: 3px;
}
.vue-grid-item.active {
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue
b/src/views/dashboard/related/topology/components/PodTopology.vue
index 131221b..ab38761 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -16,7 +16,9 @@ limitations under the License. -->
<div class="tool">
<span
v-show="
- dashboardStore.entity === EntityType[2].value && config.graph.showDepth
+ dashboardStore.entity === EntityType[2].value &&
+ config.graph &&
+ config.graph.showDepth
"
>
<span class="label">{{ t("currentDepth") }}</span>
@@ -111,7 +113,9 @@ const width = ref<number>(100);
const showSettings = ref<boolean>(false);
const settings = ref<any>(props.config);
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const depth = ref<number>(props.config.graph.depth || 3);
+const depth = ref<number>(
+ (props.config.graph && props.config.graph.depth) || 3
+);
const items = [
{ id: "inspect", title: "Inspect", func: inspect },
{ id: "dashboard", title: "View Dashboard", func: goDashboard },
