github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-17 16:15:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tooltips for list charts

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-30 20:36:57 +08:00
parent 1c1c1fb7aa
commit b095bf5b4c
15 changed files with 53 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/icons/arrow-down.svg
View File

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

Before

Width:  |  Height:  |  Size: 1.3 KiB

17
src/assets/icons/arrow_drop_down.svg
View File

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

Before

Width:  |  Height:  |  Size: 922 B

18
src/assets/icons/keyboard_control.svg
View File

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

Before

Width:  |  Height:  |  Size: 1.2 KiB

18
src/assets/icons/library_add.svg
View File

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

Before

Width:  |  Height:  |  Size: 1.2 KiB

2
src/layout/components/SideBar.vue
View File

@ -165,7 +165,7 @@ span.collapse {
.menu-control {
position: absolute;
top: 8px;
top: 7px;
left: 200px;
cursor: pointer;
transition: all 0.2s linear;

2
src/locales/lang/en.ts
View File

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

2
src/locales/lang/zh.ts
View File

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

2
src/styles/reset.scss
View File

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

1
src/types/dashboard.ts
View File

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

2
src/views/dashboard/controls/Tab.vue
View File

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

9
src/views/dashboard/graphs/EndpointList.vue
View File

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

9
src/views/dashboard/graphs/InstanceList.vue
View File

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

28
src/views/dashboard/graphs/Line.vue
View File

@ -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 {
color,
tooltip: {
const 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,

9
src/views/dashboard/graphs/ServiceList.vue
View File

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

2
src/views/dashboard/panel/Layout.vue
View File

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