add tooltips for list charts

src/assets/icons/arrow-down.svg

@@ -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>

src/assets/icons/arrow_drop_down.svg

@@ -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>

src/assets/icons/keyboard_control.svg

@@ -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>

src/assets/icons/library_add.svg

@@ -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>

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;

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",

src/locales/lang/zh.ts

@@ -310,7 +310,7 @@ const msg = {
     "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
   setEvent: "设置事件",
-  viewAttributes: "实例属性",
+  viewAttributes: "查看",
   serviceEvents: "服务事件",
   select: "选择",
   eventID: "事件ID",

src/styles/reset.scss

@@ -139,5 +139,5 @@ pre {
 }
 
 .el-icon.menu-icons {
-  margin-right: 8px !important;
+  margin-top: -3px !important;
 }

src/types/dashboard.ts

@@ -72,6 +72,7 @@ export interface LineConfig extends AreaConfig {
   step?: boolean;
   showXAxis?: boolean;
   showYAxis?: boolean;
+  smallTips?: boolean;
 }
 
 export interface AreaConfig {

src/views/dashboard/controls/Tab.vue

@@ -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 {

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 {

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 {

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;
   }
-  return {
+  const tooltip = {
-    color,
-    tooltip: {
     trigger: "axis",
-      zlevel: 1000,
-      z: 60,
     backgroundColor: "rgb(50,50,50)",
     textStyle: {
-        fontSize: 13,
+      fontSize: 12,
       color: "#ccc",
     },
     enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto; border: none",
+    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: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
       show: keys.length === 1 ? false : true,

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 {

src/views/dashboard/panel/Layout.vue

@@ -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 {