From ee06546c204572e24a006c33167bcde4cd75ce8a Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Wed, 30 Mar 2022 21:19:06 +0800
Subject: [PATCH] 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 ---------
 .../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 +-
 .../widget/graph-styles/Area.vue              |  8 ++--
 .../configuration/widget/graph-styles/Bar.vue |  8 ++--
 .../widget/graph-styles/Card.vue              |  6 +--
 .../widget/graph-styles/EndpointList.vue      |  8 ++--
 .../widget/graph-styles/InstanceList.vue      |  8 ++--
 .../widget/graph-styles/Line.vue              | 22 +++++------
 .../widget/graph-styles/ServiceList.vue       | 10 ++---
 .../widget/graph-styles/Table.vue             | 12 +++---
 .../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 +--
 .../topology/components/PodTopology.vue       |  8 +++-
 38 files changed, 138 insertions(+), 260 deletions(-)
 delete mode 100755 src/assets/icons/arrow-down.svg
 delete mode 100644 src/assets/icons/arrow_drop_down.svg
 delete mode 100644 src/assets/icons/bar_chart.svg
 delete mode 100644 src/assets/icons/clearclose.svg
 delete mode 100644 src/assets/icons/health.svg
 delete mode 100644 src/assets/icons/keyboard_control.svg
 delete mode 100644 src/assets/icons/library_add.svg
 delete mode 100644 src/assets/icons/notification_important.svg
 delete mode 100644 src/assets/icons/save_alt.svg
 rename src/assets/icons/{insert_image.svg => storage.svg} (77%)

diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
deleted file mode 100755
index f85e0b06..00000000
--- 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-.0066912l2.48658215 2.52737493z"/></svg>
\ 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 63151de2..00000000
--- 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 e8745222..00000000
--- 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 ddc35190..00000000
--- 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 56f20622..00000000
--- 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 cf8d477c..00000000
--- 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 382303c4..00000000
--- 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 8a806114..00000000
--- 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 59d6e879..00000000
--- 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 5aea97ca..73d66841 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 c83f9db3..217831b7 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 4bc394fd..2b999fc5 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 ea047d45..6bb75048 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 0f198740..037377f5 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 c607407a..12e182c6 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 a3e5bdf6..7dc0653c 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 9869e765..e414df03 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 d06213be..f4086d9d 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 722dfd3a..40b93de2 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 eb09fac9..9c4b3e0b 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 be63da1e..0cffd9e3 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 6259b141..ed994091 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 dba79092..51257f39 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 78df72d3..e44cb53d 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 219674cc..66b7c78f 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 0e2936d7..b19cbc04 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 37468f22..b83d46e8 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 27f7a94f..8c485d78 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 e84e7f42..6c156efb 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 26d1163a..7d153960 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 72c65b83..0dd0bc3b 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 91011379..a5d8d8f0 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 80e1f73b..f90d387a 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 65d76baf..678256d8 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 978aa101..084e1c4f 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 8be7cd6f..09284280 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 cec440ac..6bb9a0b7 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 131221b8..ab387612 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 },